@media (max-width: 760px) { .footer-nap a { font-size: 1em !important; } } /* Basic Reset & Theme */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Display:wght@400;600;700;800&display=swap'); * { box-sizing: border-box; } :root { --bg: #0f172a; --panel: #111827; --card: #0f172a; /* vereinheitlicht im Dark-Mode */ --text: #e5e7eb; --muted: #94a3b8; --primary: #00aff0; /* Hauptfarbe */ --primary-600: #008ecf; /* dunklerer Ton */ --ring: rgba(0, 175, 240, .35); --border: #1a2333; --header-bg: rgba(15, 23, 42, 0.8); --footer-bg: rgba(15, 23, 42, 0.8); --section-alt-bg: rgba(3, 7, 18, 0.35); --section-alt-border: #0b1220; --hover-bg: #0b1220; --bg-grad-start: #0f172a; /* einheitlich im Dark-Mode */ --bg-grad-end: #0f172a; --input-bg: #15233f; --input-border: #2a3a55; --placeholder: #a5b4c3; } /* Light theme */ :root[data-theme="light"] { --bg: #f4f6f8; /* helles Grau */ --panel: #ffffff; /* weiß für Header/Dropdowns */ --card: #ffffff; /* weiße Karten */ --text: #0f172a; --muted: #475569; --border: #e5e7eb; /* hellgraue Ränder */ --header-bg: rgba(255,255,255,.85); --footer-bg: rgba(255,255,255,.9); --section-alt-bg: #f0f2f5; /* abgesetzte Sektionen in Grau */ --section-alt-border: #e5e7eb; --hover-bg: #f3f4f6; /* helles Hover-Grau */ --bg-grad-start: #f8fafc; /* sanfte Weiß-Grau-Kombi ohne starken Verlauf */ --bg-grad-end: #f4f6f8; --input-bg: #ffffff; --input-border: #d3d9e4; --placeholder: #6b7280; } html, body { height: 100%; } body { margin: 0; font-family: 'Noto Sans Display', 'NotoSansDisplay', 'NotoSansDisplay-fallback', Arial, sans-serif; color: var(--text); background: linear-gradient(180deg, var(--bg-grad-start), var(--bg-grad-end)); /* Sticky footer layout */ min-height: 100vh; display: flex; flex-direction: column; } /* Grow main to push footer to the bottom */ main { flex: 1; display: block; } /* Footer styling */ .site-footer { margin-top: auto; background: var(--footer-bg); border-top: 1px solid var(--section-alt-border); } img { max-width: 100%; display: block; } .container { width: min(1120px, 100% - 2rem); margin: 0 auto; } .narrow { width: min(820px, 100% - 2rem); margin: 0 auto; } /* Header */ .site-header { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(180%) blur(10px); background: var(--header-bg); border-bottom: 1px solid var(--section-alt-border); } .header-inner { display: flex; align-items: center; justify-content: space-between; padding: .9rem 0; } .logo { color: var(--text); font-weight: 800; text-decoration: none; letter-spacing: .5px; font-size: 1.1rem; } .logo span { color: var(--primary); } /* Desktop navbar alignment */ .nav { display: flex; align-items: center; gap: .5rem; } .nav-actions { display: flex; align-items: center; gap: .5rem; position: relative; margin-left: .5rem; } /* Navbar Layout: Logo links, Links und Zahnrad rechts */ .header-inner { display: flex; align-items: center; justify-content: space-between; } .nav-list { display: flex; gap: 0; list-style: none; padding: 0; margin: 0; align-items: center; } .nav-list li { margin: 0 .15rem; } .nav-list a { color: var(--text); text-decoration: none; padding: .5rem .75rem; border-radius: .6rem; transition: background-color .2s ease, color .2s ease; } .nav-list a:hover { background: var(--hover-bg); color: var(--primary); } /* Settings dropdown */ .nav-list .settings { position: relative; } .icon-btn { display: grid; place-items: center; padding: .45rem; border-radius: .6rem; border: 1px solid var(--border); background: var(--card); color: var(--text); cursor: pointer; } .icon-btn:hover { background: var(--hover-bg); } .icon-btn i { font-size: 1.25rem; color: var(--primary); } .dropdown { position: absolute; right: 0; top: calc(100% + .5rem); background: var(--panel); border: 1px solid var(--border); border-radius: .6rem; box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: .35rem; min-width: 200px; display: none; } .dropdown.open { display: block; } .dropdown button { width: 100%; background: transparent; color: var(--text); border: 0; text-align: left; padding: .55rem .65rem; border-radius: .45rem; cursor: pointer; display: flex; align-items: center; gap: .5rem; } .dropdown button:hover { background: var(--hover-bg); } .dropdown button i { font-size: 1.1rem; color: var(--primary); } @media (max-width: 760px) { .header-inner { align-items: center; } .nav { display: flex; align-items: center; gap: .5rem; } .nav-toggle { display: inline-grid; place-items: center; width: 40px; height: 40px; font-size: 1.1rem; border-radius: 10px; background: var(--card); border: 1px solid var(--border); color: #ffffff; } .nav-toggle:hover, .nav-toggle:focus { outline: none; background: var(--hover-bg); border-color: rgba(255,255,255,.35); color: #ffffff; box-shadow: 0 0 0 2px rgba(0,175,240,.25) inset; } :root[data-theme="light"] .nav-toggle { color: #0f172a; } :root[data-theme="light"] .nav-toggle:hover, :root[data-theme="light"] .nav-toggle:focus { border-color: #d3d9e4; color: #0f172a; } .nav-actions { display: inline-flex; gap: .5rem; } .nav-list { display: none; position: absolute; right: 1rem; top: 56px; background: var(--card); padding: .6rem; border-radius: .6rem; border: 1px solid var(--border); box-shadow: 0 12px 28px rgba(0,0,0,.18); min-width: 220px; } .nav-list.open { display: block; } .nav-list li { display: block; margin: .2rem 0; } .nav-list a { display: block; } } /* Desktop: Burger ausblenden, Zahnrad rechts */ @media (min-width: 761px) { .nav-toggle { display: none; } .nav { width: 100%; justify-content: flex-end; } .nav-list { margin-right: .5rem; } } /* Hero */ .hero { min-height: 78vh; padding: 96px 0 64px; position: relative; background-image: linear-gradient(180deg, rgba(0,175,240,.6), rgba(0,175,240,.82)), url('../../../img/modern/5.jpg'); background-size: cover; background-position: center; border-bottom: 1px solid var(--section-alt-border); } /* Hero Variante für Wertgarantie: dunklere Overlay für Lesbarkeit */ .hero-wg { background-image: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.55)), url('../../../img/modern/wertgarantie.png'); } :root[data-theme="light"] .hero-wg { background-image: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.35)), url('../../../img/modern/wertgarantie.png'); } .hero-inner { display: grid; grid-template-columns: 1fr; align-items: center; gap: 2rem; max-width: 820px; } .hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); margin: 0 0 .7rem; font-weight: 800; letter-spacing: -0.02em; color: #ffffff; text-shadow: 0 2px 12px rgba(0,0,0,.25); } .hero p { color: #f8fbff; opacity: .96; margin: 0 0 .9rem; font-size: 1.12rem; text-shadow: 0 2px 10px rgba(0,0,0,.25); } .hero-badge { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 1.1rem; padding: .5rem .75rem; border-radius: 999px; background: rgba(255,255,255,.14); color: #ffffff; font-weight: 800; letter-spacing: .01em; border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(6px); box-shadow: 0 8px 24px rgba(0,0,0,.22); } .hero-badge i { color: var(--primary); font-size: 1.05rem; } .cta-row { display: flex; gap: .85rem; flex-wrap: wrap; } /* Hero: keine Zusatzinfos/Media anzeigen */ .hero .contact-inline, .hero .hero-media { display: none !important; } .media-placeholder { height: 320px; border-radius: 18px; background: radial-gradient(140px 140px at 30% 30%, rgba(0,175,240,.20), transparent), var(--card); border: 1px solid var(--border); display: grid; place-items: center; color: #00aff0; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; } .hero-media img { width: 100%; border-radius: 18px; border: 1px solid var(--border); display: block; } @media (max-width: 960px) { .hero-inner { grid-template-columns: 1fr; } } /* Sections */ .section { padding: 56px 0; } /* Startseite: helle Wechselhintergrfcnde im Light-Theme */ :root[data-theme="light"] main#home .section { background: #ffffff; } :root[data-theme="light"] main#home .section.alt { background: #f4f6f8; border-top: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; } /* Automatische Wechselhintergrfcnde: abwechselnd weidf/grau (Hero ausgenommen) */ :root[data-theme="light"] main#home > section:not(.hero):nth-of-type(odd) { background: #ffffff; border-top: 0; border-bottom: 0; } :root[data-theme="light"] main#home > section:not(.hero):nth-of-type(even) { background: #f4f6f8; border-top: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; } /* Dark-Theme behe4lt die bisherigen Variablenfarben */ .section.alt { background: var(--section-alt-bg); border-top: 1px solid var(--section-alt-border); border-bottom: 1px solid var(--section-alt-border); } .section h2 { font-size: clamp(1.4rem, 2.6vw, 2.1rem); margin: 0 0 1rem; font-weight: 800; letter-spacing: -.01em; } /* Scroll reveal (enhanced) */ [data-anim] { opacity: 0; transform: translateY(18px); filter: blur(4px); transition: opacity var(--anim-dur, .7s) var(--anim-ease, cubic-bezier(.22,.61,.36,1)), transform var(--anim-dur, .7s) var(--anim-ease, cubic-bezier(.22,.61,.36,1)), filter var(--anim-dur, .7s) var(--anim-ease, cubic-bezier(.22,.61,.36,1)); will-change: transform, opacity; } [data-anim].in { opacity: 1; transform: none; filter: none; } /* Variants */ [data-anim="fade-up"] { transform: translateY(18px); } [data-anim="fade-up"].in { transform: translateY(0); } [data-anim="fade-left"] { transform: translateX(24px); } [data-anim="fade-left"].in { transform: translateX(0); } [data-anim="fade-right"] { transform: translateX(-24px); } [data-anim="fade-right"].in { transform: translateX(0); } [data-anim="zoom-in"] { transform: translateY(8px) scale(.96); } [data-anim="zoom-in"].in { transform: none; } @media (prefers-reduced-motion: reduce) { [data-anim] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } } /* Cards Grid */ .grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; align-items: stretch; } @media (max-width: 960px) { .grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 640px) { .grid { grid-template-columns: 1fr; } } .card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 1.25rem; box-shadow: 0 12px 36px rgba(0,0,0,.12); transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease; position: relative; overflow: hidden; display: flex; flex-direction: column; } .card:hover { transform: translateY(-3px); box-shadow: 0 16px 48px rgba(0,0,0,.3); border-color: rgba(0,175,240,.4); } .card-icon { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(180deg, rgba(0,175,240,.25), rgba(0,175,240,.06)); border: 1px solid #1e2a3f; font-size: 2rem; margin-bottom: .85rem; color: #00aff0; } .card-icon i { font-size: 2.2rem; line-height: 1; color: var(--primary); } .card h3 { margin: 0 0 .35rem; font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; } .card p { margin: 0; color: var(--muted); line-height: 1.55; } /* ensure last child sits at bottom in generic cards too */ .card > :last-child { margin-top: auto; padding-top: .9rem; } /* Einheitliche Karten für "Unsere Reparaturen" */ #services .card { display: grid; grid-template-rows: auto auto 1fr auto; gap: .75rem; } #services .card > img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; margin-bottom: 0; display: block; } #services .card p:last-of-type { margin-top: 0; } /* Einheitliche Karten für "Leistungen & Reparaturen" */ #leistungen-reparaturen .card { display: grid; grid-template-rows: auto auto 1fr auto; gap: .75rem; } #leistungen-reparaturen .card > img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; display: block; } #leistungen-reparaturen h2 { text-align: left; } #leistungen-reparaturen .narrow { margin-left: 0; margin-right: 0; text-align: left; } /* Services heading alignment */ #services h2 { text-align: left; } #services .narrow { margin-left: 0; margin-right: 0; text-align: left; } /* Services-info heading alignment */ #services-info .narrow { width: min(1120px, 100% - 2rem); margin: 0 auto; text-align: left; } #services-info h2 { text-align: left; } /* Wertgarantie Promo */ .wg-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items: center; } @media (max-width: 960px) { .wg-grid { grid-template-columns: 1fr; } } .wg-list { margin: .6rem 0 1rem; padding-left: 0; list-style: none; color: var(--muted); } .wg-list li { display: flex; align-items: center; gap: .5rem; margin: .25rem 0; } .wg-list i { color: #2ecc71; } .wg-media { position: relative; } .wg-media .wg-img { width: 100%; border-radius: 16px; border: 1px solid var(--border); display: none; } /* show light image by default */ .wg-media .wg-img--light { display: block; } /* dark theme shows dark image */ :root[data-theme="dark"] .wg-media .wg-img--light { display: none; } :root[data-theme="dark"] .wg-media .wg-img--dark { display: block; } /* system mode support when root has no data-theme: use prefers-color-scheme */ :root:not([data-theme]) .wg-media .wg-img--light { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .wg-media .wg-img--light { display: none; } :root:not([data-theme]) .wg-media .wg-img--dark { display: block; } } /* Referenzen (Kennzahlen) */ .refs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; } @media (max-width: 960px) { .refs-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .refs-grid { grid-template-columns: 1fr; } } .ref-item { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 1.25rem; text-align: center; box-shadow: 0 12px 36px rgba(0,0,0,.12); } .ref-number { font-size: clamp(1.6rem, 5vw, 2.4rem); font-weight: 900; letter-spacing: -.02em; color: var(--primary); } .ref-label { margin-top: .35rem; color: var(--muted); font-weight: 700; } /* Reviews section */ .reviews .grid { align-items: stretch; } .review-card { display: flex; flex-direction: column; gap: .6rem; } .review-header { display: flex; align-items: center; gap: .7rem; } .review-header .avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: linear-gradient(180deg, rgba(0,175,240,.18), rgba(0,175,240,.06)); color: var(--primary); border: 1px solid var(--border); } .review-card .name { font-weight: 800; letter-spacing: -.01em; } .review-card .rating i { color: #f5c518; } .review-text { color: var(--muted); line-height: 1.55; } /* Contact */ .contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items: start; } @media (max-width: 960px) { .contact-grid { grid-template-columns: 1fr; } } .contact-list, .hours { list-style: none; padding: 0; margin: .5rem 0 1rem; color: var(--muted); } /* Improve visibility of links in contact list */ .contact-list a { color: var(--text); text-decoration-color: rgba(0, 175, 240, .85); text-underline-offset: 3px; text-decoration-thickness: 2px; } .contact-list a:hover { color: var(--primary); text-decoration-color: var(--primary); } .contact-form { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 1rem; } .contact-form h3 { margin-top: 0; } .contact-form label { display: grid; gap: .35rem; margin-bottom: .75rem; font-weight: 600; font-size: .95rem; } .contact-form input, .contact-form textarea { background: var(--input-bg); color: var(--text); border: 1px solid var(--input-border); border-radius: 10px; padding: .7rem .8rem; outline: none; } .contact-form input:focus, .contact-form textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--ring); } .contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--placeholder); opacity: 1; } .contact-form .btn { width: fit-content; } .form-feedback { margin-top: .5rem; color: var(--muted); } .map-wrap { margin-top: 1.25rem; } .map { width: 100%; height: 320px; border: 1px solid var(--border); border-radius: 12px; } /* Footer */ .site-footer { border-top: 1px solid var(--section-alt-border); background: var(--footer-bg); font-size: 1rem; } .footer-inner { display: flex; gap: 1.2rem; align-items: center; justify-content: space-between; padding: 1.1rem 0; } .footer-nap { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: 1.05em; font-weight: 600; color: var(--text); } .footer-nap a { color: var(--primary); font-weight: 800; text-decoration: none; padding: .1em .4em; border-radius: 8px; background: rgba(0,175,240,.08); transition: background .18s, color .18s; white-space: nowrap; } .footer-nap a:hover { background: var(--primary); color: #fff; } .footer-nav { display: flex; gap: .7rem; } .footer-nav a { color: var(--muted); text-decoration: none; margin-right: 0; font-weight: 600; font-size: .98em; padding: .1em .4em; border-radius: 8px; transition: background .18s, color .18s; } .footer-nav a:hover { color: var(--primary); background: rgba(0,175,240,.08); } @media (max-width: 760px) { .footer-inner { flex-direction: column; align-items: flex-start; gap: .7rem; padding: 1.2rem 0 .7rem 0; } .site-footer { font-size: 1.04em; } .footer-nap { flex-direction: column; align-items: flex-start; gap: .2rem; font-size: 1.08em; margin: 0; } .footer-nap a { font-size: 1.13em; padding: .18em .7em; margin-top: .1em; } .footer-nav { gap: .3rem; margin-top: .2em; } .footer-nav a { font-size: 1em; padding: .18em .7em; } } @media (max-width: 420px) { .footer-inner { padding: 1.1rem 0 .5rem 0; gap: .5rem; } .footer-nap a, .footer-nav a { font-size: 1.15em; padding: .22em .9em; } } /* Buttons */ .btn { display: inline-block; text-decoration: none; border-radius: 10px; padding: .5rem .9rem; font-weight: 700; font-size: .95rem; letter-spacing: .01em; background: var(--primary); color: #04131a; border: 1px solid #0ea5b1; line-height: 1; } .btn:hover { filter: brightness(1.06); } .btn.primary { background: var(--primary); color: #04131a; border-color: #0ea5b1; } /* Ghost button for secondary CTA on hero */ .btn.ghost { background: transparent; color: var(--text); border-color: rgba(255,255,255,.6); } .btn.ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.8); } /* Contextual button sizing */ .card .btn { font-size: .92rem; padding: .5rem .8rem; } .hero .btn { font-size: 1.02rem; padding: .7rem 1rem; font-weight: 800; } /* Responsive fixes: Profis grid and mobile spacing */ #profis .grid { grid-template-columns: repeat(4, 1fr); } #profis .card h3 { font-size: clamp(1rem, 2.8vw, 1.2rem); } @media (max-width: 960px) { #profis .grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { #profis .grid { grid-template-columns: 1fr; } } /* Profis: icon and spacing responsiveness */ #profis .card-icon { width: clamp(56px, 12vw, 72px); height: clamp(56px, 12vw, 72px); } #profis .card-icon i { font-size: clamp(1.4rem, 4.5vw, 2rem); } @media (max-width: 640px) { .card { padding: 1rem; } .section { padding: 48px 0; } } /* Consistent mobile side padding for very small screens */ @media (max-width: 420px) { .container { width: min(1120px, 100% - 1.5rem); } .narrow { width: min(820px, 100% - 1.5rem); } } /* FAQ styles */ .faq { margin-top: 1rem; } .faq details { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: .9rem 1rem; margin-bottom: .8rem; } .faq summary { cursor: pointer; font-weight: 800; letter-spacing: -.01em; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq details[open] { border-color: rgba(0,175,240,.4); box-shadow: 0 10px 30px rgba(0,0,0,.18); } .faq .answer { color: var(--muted); margin-top: .6rem; line-height: 1.6; } .faq .q { display: flex; align-items: center; gap: .5rem; } .faq .q i { color: var(--primary); } /* spacing tighter on mobile */ @media (max-width: 640px) { .faq details { padding: .8rem .85rem; } } /* Vorbereitung steps */ .prep-steps { display: grid; gap: .9rem; padding-left: 1.2rem; } .prep-steps li { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: .9rem 1rem; list-style-position: inside; } .prep-steps h3 { margin: 0 0 .35rem; font-size: 1.05rem; font-weight: 800; } .prep-steps p { margin: 0; color: var(--muted); line-height: 1.55; } /* Steps (MediaMarkt-like) */ /* Wizard (Kosten) */ .wizard { background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; } /* Wizard Panels: theme-aware backgrounds */ .wizard .wizard-panel { background: var(--section-alt-bg); border: 1px solid var(--section-alt-border); border-radius: 12px; padding: 24px; } /* Dark theme: slightly lighter panel for contrast */ :root[data-theme="dark"] .wizard .wizard-panel { background: var(--input-bg); border-color: var(--input-border); } /* System theme: follow prefers-color-scheme */ :root:not([data-theme]) .wizard .wizard-panel { background: var(--section-alt-bg); border: 1px solid var(--section-alt-border); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .wizard .wizard-panel { background: var(--input-bg); border-color: var(--input-border); } } .wizard-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; list-style: none; padding: 0; margin: 0 0 2.4rem; position: relative; } /* Verbindungs-Linien nur zwischen den Kreisen */ .wizard-steps li { display: grid; grid-template-rows: 40px auto; justify-items: center; text-align: center; gap: .5rem; color: var(--muted); font-weight: 800; font-size: 0.875rem; padding: 0; position: relative; z-index: 1; } .wizard-steps li::before, .wizard-steps li::after { content: ""; position: absolute; top: 20px; border-top: 2px solid var(--border); width: calc(50% - 20px); } .wizard-steps li::before { left: 0; } .wizard-steps li::after { right: 0; } .wizard-steps li:first-child::before { display: none; } .wizard-steps li:last-child::after { display: none; } .wizard-steps li span { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--card); border: 2px solid var(--text); color: var(--text); font-weight: 800; transition: background-color .2s ease, border-color .2s ease, color .2s ease; } .wizard-steps li.is-active { color: var(--text); } .wizard-steps li.is-active span, .wizard-steps li.is-complete span { background: #00aff0; border-color: #00aff0; color: #0a1222; } /* Step 4: Angebot – Kachel-Grid im MediaMarkt-Stil */ .offer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.2rem; margin-top: 1rem; min-width: 0; } @media (max-width: 760px) { .offer-grid { grid-template-columns: minmax(0, 1fr); } } .offer-card { display: grid; grid-template-columns: 1fr auto; gap: .35rem 1rem; align-items: start; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 1rem 1.1rem; box-shadow: 0 8px 26px rgba(0,0,0,.12); max-width: 100%; min-width: 0; } .offer-card .title { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.05rem; min-width: 0; } .offer-card .title i { color: var(--primary); font-size: 1.15rem; } .offer-card .desc { grid-column: 1 / -1; color: var(--muted); font-size: .95rem; margin-top: .1rem; min-width: 0; overflow-wrap: anywhere; } .offer-card .price { font-weight: 800; font-size: 1.05rem; } .offer-card .cta { color: #e00000; font-weight: 800; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; } .offer-card .cta::before { content: "›"; font-weight: 900; } .offer-card .title span { min-width: 0; overflow-wrap: anywhere; } @media (max-width: 760px) { .offer-card { grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; } .offer-card .title { grid-column: 1 / -1; grid-row: 1; } .offer-card .desc { grid-column: 1 / -1; grid-row: 2; } .offer-card .cta { grid-column: 1; grid-row: 3; justify-self: start; } .offer-card .price { grid-column: 2; grid-row: 3; justify-self: end; align-self: center; white-space: nowrap; margin-top: 0; } } .brand-grid { display: grid; grid-template-columns: 1fr; gap: .8rem; max-width: 520px; margin: 1.8rem auto 0; } .brand-card { display: grid; grid-template-columns: 18px 28px 1fr; align-items: center; gap: .8rem; padding: .95rem 1rem; border-radius: 12px; background: var(--card); border: 2px solid var(--border); color: var(--text); cursor: pointer; font-weight: 600; text-align: left; } .brand-card:hover, .brand-card.is-selected { border-color: #111; box-shadow: 0 6px 18px rgba(0,0,0,.12); } .brand-card i { font-size: 1.7rem; color: var(--primary); } .brand-card span { font-size: 0.875rem; } /* runde Auswahl-Indikator links (wie Radio) */ .brand-card::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--text); display: inline-block; justify-self: center; } .brand-card.is-selected::before { background: var(--text); box-shadow: inset 0 0 0 3px var(--card); } .model-picker { display: grid; gap: .6rem; } .model-picker input { width: 100%; background: var(--input-bg); color: var(--text); border: 1px solid var(--input-border); border-radius: 10px; padding: .7rem .8rem; } .model-picker input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--ring); } /* Modelle: 2-spaltiges Grid, kleinere Karten wie Step 1/2 */ .model-grid { display: grid; grid-template-columns: repeat(2, minmax(260px, 1fr)); gap: .9rem; max-width: 760px; margin: .8rem auto 0; } @media (max-width: 640px) { .model-grid { grid-template-columns: 1fr; } } /* Model-Card mit Radio-Optik links */ .model-card { position: relative; display: grid; grid-template-columns: 20px 1fr; align-items: center; gap: .8rem; padding: .85rem 1rem; border-radius: 12px; background: var(--card); border: 2px solid var(--border); color: var(--text); cursor: pointer; font-weight: 700; text-align: left; } .model-card:hover, .model-card.is-selected { border-color: #111; box-shadow: 0 6px 18px rgba(0,0,0,.12); } .model-card input { position: absolute; opacity: 0; pointer-events: none; } .model-card span { font-size: .95rem; } .model-card::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--text); background: transparent; display: inline-block; } .model-card.is-selected::before { background: var(--text); box-shadow: inset 0 0 0 3px var(--card); } .wizard-actions { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1rem; } .muted { color: var(--muted); } .small { font-size: .92rem; } @media (max-width: 760px) { /* keep steps side-by-side on mobile */ .wizard-steps { grid-template-columns: repeat(4, minmax(0,1fr)); gap: .8rem; } /* use horizontal scroll if very tight */ .wizard-steps { overflow-x: auto; padding-bottom: .25rem; } /* stack device cards for readability on small screens */ .brand-grid { grid-template-columns: 1fr; width: 100%; max-width: 520px; margin-left: auto; margin-right: auto; } .brand-card { width: 100%; } } .steps h2 { font-size: clamp(1.4rem, 3.2vw, 2rem); margin-bottom: 2rem; } .steps-list { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; padding: 0; margin: 0; align-items: stretch; } /* Desktop: Kopfzeile (Kreis + waagerechte Punkte) oben, Text darunter */ .step { display: grid; grid-template-rows: auto 1fr auto; row-gap: 1rem; height: 100%; } .step-head { display: grid; grid-template-columns: 64px 1fr; align-items: center; } .step-number { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--card); border: 2px solid var(--text); color: var(--text); font-weight: 800; font-size: 1.25rem; } .step-connector { position: relative; width: 100%; height: 0; border-bottom: 3px dotted #666; margin-left: 1rem; } /* durchgehende Linie über alle Schritte (Desktop) */ .steps-list { position: relative; } .steps-list::before { content: ""; position: absolute; left: 32px; right: 0; top: 32px; border-top: 3px dotted #666; z-index: 0; } .step-head, .step-number { position: relative; z-index: 1; } /* letzter Schritt ohne waagerechte Punkte */ .step:last-child .step-connector { display: none; } .step-body h3 { font-size: 1.25rem; font-weight: 800; margin: .2rem 0 .4rem; } /* Body als Grid: Titel/Text oben, flexibler Inhalt in der Mitte, Link unten */ .step-body { display: grid; grid-template-rows: auto 1fr auto; min-height: 100%; } .step-body p { margin: 0 0 .5rem; color: var(--text); } /* Linkzeile immer nach unten */ .step-link { align-self: end; margin-top: .25rem; } .step-link a { color: var(--text); text-decoration-color: rgba(0, 175, 240, .85); text-underline-offset: 3px; text-decoration-thickness: 2px; font-weight: 800; position: relative; } .step-link a::before { color: #e00000; font-weight: 900; margin-right: .4rem; } /* Mobile: So funktioniert – Kreise links, vertikale Punkt-Linie dazwischen, Text rechts */ @media (max-width: 960px) { .steps-list { grid-template-columns: 1fr; row-gap: 1.5rem; padding-left: 0; position: relative; } .steps-list::before { display: none; } .step { display: grid; grid-template-columns: 64px 1fr; column-gap: 1rem; align-items: start; padding: 0 0 1rem 0; position: relative; } .step-head { grid-column: 1; } .step-number { width: 64px; height: 64px; margin: 0; display: flex; align-items: center; justify-content: center; } .step-connector { display: none !important; } .step-body { grid-column: 2; grid-row: 1; } .step::after { content: ""; position: absolute; left: 32px; /* Mitte der Kreis-Spalte */ top: 64px; /* direkt unter dem Kreis starten */ bottom: -1.5rem; /* in den Abstand zum nächsten Step verlängern */ border-left: 3px dotted #666; } .step:last-child::after { display: none; } }