/* ============================================================ VOLTASUN – Design-System Vorlage: Voltasun-Produktbroschüre (Anthrazit + Gold). Aufbau: Basis → Typo → Elemente → Kopf/Nav → Sektionen → Fuß → Mobil ============================================================ */ :root{ /* Flächen */ --schwarz:#000; --tief:#0c0c0c; --panel:#161616; --panel-hoch:#1c1c1c; --rahmen:rgba(247,216,115,.18); --rahmen-stark:rgba(247,216,115,.38); /* Gold */ --gold:#f7d873; --gold-tief:#d9a94a; --gold-glut:rgba(247,216,115,.12); /* Helle Sektionen (Kundenfarbe #dde3ea) */ --hell:#dde3ea; --hell-weiss:#f4f6f8; --hell-text:#101215; --hell-text-2:#4a545f; --hell-rahmen:rgba(16,18,21,.12); /* Text auf dunkel */ --weiss:#fff; --grau:#b4b4b4; --grau-tief:#7d7d7d; /* Maße */ --wrap:1240px; --kopf-h:82px; --pad:clamp(1.2rem,5vw,2.5rem); --sec:clamp(4.5rem,9vw,8rem); --rund:14px; --uebergang:.45s cubic-bezier(.22,.9,.28,1); } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;scroll-behavior:auto!important} } body{ margin:0; background:var(--schwarz); color:var(--weiss); font-family:Geist,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:clamp(1rem,.96rem + .2vw,1.075rem); line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:clip; /* NICHT hidden – bricht sonst GSAP-Pinning */ } img,svg,video{max-width:100%;display:block} img{height:auto} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} ::selection{background:var(--gold);color:#000} :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px} [hidden]{display:none!important} .skip{ position:absolute;left:-999px;top:0;z-index:200; background:var(--gold);color:#000;padding:.8rem 1.2rem;font-weight:600;border-radius:0 0 8px 0; } .skip:focus{left:0} .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)} /* ============================================================ Typografie */ .h1,.h2,.h3,h1,h2,h3,.quiz__danke-t{ font-family:Archivo,sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:-.018em; line-height:.98; margin:0; text-wrap:balance; /* Deutsche Komposita sind länger als jede Spalte, in der sie stehen. ist gesetzt, also trennt der Browser sauber – und nur dann, wenn das Wort sonst aus seinem Kasten liefe. */ overflow-wrap:break-word; hyphens:auto; /* Nur lange Wörter trennen und keine Zwei-Buchstaben-Reste stehen lassen – sonst wird aus WEITERSAGEN ein WEI-TERSAGEN. */ hyphenate-limit-chars:10 4 4; } .h1{font-size:clamp(2.6rem,1.5rem + 5.4vw,5.4rem)} /* Headline einer Unterseite – schmaler Satzspiegel, deshalb kleiner als die Startseite */ .h1--seite{font-size:clamp(2.3rem,1.4rem + 4.2vw,4.4rem)} .h2{font-size:clamp(2rem,1.3rem + 3.2vw,3.5rem);line-height:1.02} .h3,.quiz__danke-t{font-size:clamp(1.25rem,1.1rem + .8vw,1.7rem);line-height:1.1} .au{color:var(--gold)} /* Gold-Versalien-Label über der Headline – Broschüren-Baustein */ .label{ font-family:Geist,sans-serif; font-size:.72rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin:0 0 1.1rem; display:flex;align-items:center;gap:.85rem; } .label::before{ content:"";width:2.2rem;height:1px;flex:none; background:linear-gradient(90deg,var(--gold),transparent); } .lead{ font-size:clamp(1.05rem,1rem + .35vw,1.25rem); color:var(--grau); max-width:56ch; margin:1.4rem 0 0; } /* Der eine kursive Serif-Akzent – sparsam einsetzen */ .kursiv{ font-family:Fraunces,Georgia,serif; font-style:italic; font-weight:500; text-transform:none; letter-spacing:0; color:var(--gold); } .klein{font-size:.85rem;color:var(--grau-tief)} /* Goldene Haarlinie als Trenner */ .hr{ height:1px;border:0;margin:0; background:linear-gradient(90deg,transparent,var(--rahmen-stark) 18%,var(--rahmen-stark) 82%,transparent); } /* ============================================================ Elemente */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.6rem; padding:1rem 1.75rem; font-weight:600;font-size:.95rem;letter-spacing:.01em; border-radius:999px; transition:transform .3s var(--uebergang),background .3s,color .3s,border-color .3s,box-shadow .3s; will-change:transform; } .btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0)} .btn--gold{ background:linear-gradient(135deg,var(--gold),var(--gold-tief)); color:#0a0a0a; box-shadow:0 8px 30px -12px rgba(247,216,115,.6); } .btn--gold:hover{box-shadow:0 14px 40px -12px rgba(247,216,115,.75)} .btn--geist{ border:1px solid var(--rahmen-stark); color:var(--weiss); background:rgba(255,255,255,.02); } .btn--geist:hover{border-color:var(--gold);color:var(--gold);background:rgba(247,216,115,.06)} .btn--sm{padding:.7rem 1.25rem;font-size:.88rem} .btn--voll{width:100%} /* Präsentation der Sprite-Icons zentral statt als Attribute an jeder Hülle (siehe common.icon). Vererbt sich in den per eingebundenen Inhalt. sozial_icon()-Elemente setzen fill/stroke selbst und bleiben unberührt. */ .ic{flex:none;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round} /* Symbol-Sammlung der Seiten-Icons (siehe common._icon_sprite): nie selbst sichtbar, die -Verweise in den einzelnen Icons zeichnen daraus. */ .ic-sprite{display:none} /* Runder Icon-Knopf (Slider-Pfeile) */ .rund{ width:52px;height:52px;border-radius:50%; border:1px solid var(--rahmen-stark); display:grid;place-items:center;color:var(--weiss); transition:background .3s,color .3s,border-color .3s,transform .3s; } .rund:hover{background:var(--gold);color:#000;border-color:var(--gold);transform:scale(1.06)} .rund:disabled{opacity:.3;pointer-events:none} .rund__dreh{display:grid;place-items:center;transform:rotate(180deg)} /* Panel im Broschüren-Stil */ .panel{ background:linear-gradient(160deg,var(--panel-hoch),var(--panel)); border:1px solid var(--rahmen); border-radius:var(--rund); } /* Siegel-Badge */ .siegel{position:relative;width:120px;height:120px;flex:none} .siegel__ring{width:100%;height:100%;animation:dreh 26s linear infinite} @keyframes dreh{to{transform:rotate(360deg)}} .siegel__txt{ font-family:Geist,sans-serif;font-size:9.4px;font-weight:600; letter-spacing:.16em;fill:var(--gold);text-transform:uppercase; } .siegel__kern{ position:absolute;inset:0;display:grid;place-items:center;color:var(--gold); } /* ============================================================ Kopf & Navigation */ .kopf{ position:sticky;top:0;z-index:90; background:rgba(0,0,0,.92); backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3); border-bottom:1px solid transparent; transition:border-color .35s,background .35s; } /* Über einem Hero liegt der Kopf komplett ohne eigene Fläche auf dem Bild. Die Abdunklung für die Navigation kommt allein aus dem Hero-Overlay – ein zusätzlicher Verlauf am Kopf ergäbe an seiner Unterkante eine sichtbare Kante, weil sich beide Abdunklungen überlagern. Erst beim Scrollen wird der Kopf zur eigenen Leiste. */ body.mit-hero .kopf:not(.is-fest){ background:none; backdrop-filter:none;-webkit-backdrop-filter:none; } .kopf.is-fest{ border-bottom-color:var(--rahmen); background:rgba(0,0,0,.92); backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3); } .kopf__in{ display:flex;align-items:center;gap:clamp(1rem,3vw,2.6rem); min-height:var(--kopf-h); } /* max-content: Der Kasten ist genau so breit wie das Logobild. Ohne das zog er sich im Fuß auf die volle Spaltenbreite, und der zentrierte Claim landete rund 50 px neben der Wortmarke statt darunter. */ .logo{display:flex;flex-direction:column;gap:.3rem;line-height:1;width:max-content} /* Breite steuert die Größe, Höhe folgt dem Seitenverhältnis der Datei. width/height stehen im , damit vor dem Laden kein Sprung entsteht. */ /* 10.6rem statt breiter: Bei 11.4rem wurde die Kopfzeile so knapp, dass „Über uns" und der Button zweizeilig umbrachen. Gemessen, nicht geschätzt. */ .logo__bild{width:10.6rem;height:auto;display:block} .logo--sm .logo__bild{width:9.4rem} .logo__claim{ font-size:.56rem;letter-spacing:var(--claim-sperr,.24em);text-transform:uppercase; color:var(--grau);white-space:nowrap; /* Mittig unter die Wortmarke. Der Kasten ist so breit wie das Logo, der Text ist kürzer – ohne text-align stand er linksbündig mit knapp 30 px offener Flanke rechts. Die Sperrung setzt auch HINTER dem letzten Zeichen Abstand; unausgeglichen säße der zentrierte Text um genau diesen Betrag zu weit links. Deshalb der negative Rand – aus derselben Variable, damit beides zusammenpasst. */ text-align:center; margin-right:calc(-1 * var(--claim-sperr,.24em)); } .logo__claim b{color:var(--gold);font-weight:600} .nav{display:flex;align-items:center;gap:.35rem;margin-left:auto} .nav__link{ position:relative; display:inline-flex;align-items:center;gap:.4rem; padding:.65rem .85rem; font-size:.94rem;font-weight:500;color:var(--grau); border-radius:8px; transition:color .28s; /* Menüpunkte nie umbrechen: „Über uns" stand sonst zweizeilig, sobald es in der Kopfzeile knapp wurde. Unterhalb von 1080 px übernimmt ohnehin das Burger-Menü, darüber passt die Zeile mit Reserve. */ white-space:nowrap; } .kopf__tat .btn{white-space:nowrap} .nav__link:hover,.nav__link.is-on{color:var(--weiss)} .nav__link::after{ content:"";position:absolute;left:.85rem;right:.85rem;bottom:.42rem;height:1px; background:var(--gold);transform:scaleX(0);transform-origin:left; transition:transform .38s var(--uebergang); } .nav__link:hover::after,.nav__link.is-on::after{transform:scaleX(1)} .nav__chev{transform:rotate(90deg);transition:transform .35s} .nav__hat{position:relative} .nav__hat.is-auf .nav__chev{transform:rotate(-90deg)} /* Leistungs-Dropdown */ .drop{ position:absolute;top:calc(100% + .8rem);left:50%; width:min(720px,88vw); transform:translate(-50%,-8px); opacity:0;visibility:hidden;pointer-events:none; transition:opacity .3s,transform .3s var(--uebergang),visibility .3s; z-index:95; } .nav__hat.is-auf .drop{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)} .drop__in{ display:grid;grid-template-columns:1fr 1fr;gap:.35rem; padding:.7rem; background:linear-gradient(165deg,#191919,#0e0e0e); border:1px solid var(--rahmen); border-radius:18px; box-shadow:0 40px 80px -30px rgba(0,0,0,.9); } .drop__item{ display:flex;gap:.9rem;align-items:flex-start; padding:.85rem .95rem;border-radius:11px; transition:background .26s; } .drop__item .ic{color:var(--gold);margin-top:.15rem} .drop__item:hover{background:rgba(247,216,115,.07)} .drop__item b{display:block;font-size:.95rem;font-weight:600} .drop__item em{display:block;font-style:normal;font-size:.82rem;color:var(--grau-tief);margin-top:.15rem;line-height:1.45} .drop__spot{ grid-column:1/-1; margin-top:.35rem;padding:1.15rem 1.25rem; border-radius:12px; background: radial-gradient(120% 140% at 88% 20%,rgba(247,216,115,.16),transparent 62%), linear-gradient(150deg,#1e1c17,#121212); border:1px solid var(--rahmen-stark); transition:border-color .3s; } .drop__spot:hover{border-color:var(--gold)} .drop__spot-label{ font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold); } .drop__spot b{display:block;font-family:Archivo,sans-serif;font-weight:800; text-transform:uppercase;font-size:1.05rem;letter-spacing:.01em;margin:.35rem 0 .2rem} .drop__spot em{font-style:normal;font-size:.85rem;color:var(--grau)} .drop__spot-go{ display:inline-flex;align-items:center;gap:.4rem;margin-top:.7rem; font-size:.83rem;font-weight:600;color:var(--gold); } .drop__spot:hover .drop__spot-go .ic{transform:translateX(4px)} .drop__spot-go .ic{transition:transform .3s} .kopf__tat{display:flex;align-items:center;gap:1rem} .kopf__tel{ display:inline-flex;align-items:center;gap:.5rem; font-size:.92rem;font-weight:600;color:var(--weiss); white-space:nowrap; } .kopf__tel .ic{color:var(--gold)} .kopf__tel:hover{color:var(--gold)} /* Burger */ .burger{display:none;width:44px;height:44px;position:relative;margin-left:auto} .burger span{ position:absolute;left:11px;right:11px;height:2px;background:var(--weiss);border-radius:2px; transition:transform .35s var(--uebergang),opacity .25s; } .burger span:nth-child(1){top:15px} .burger span:nth-child(2){top:21px} .burger span:nth-child(3){top:27px} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} /* Mobiles Menü */ .mnav{ position:fixed;inset:82px 0 0;z-index:88; background:linear-gradient(180deg,#0b0b0b,#000); overflow-y:auto; animation:auf .32s var(--uebergang); } @keyframes auf{from{opacity:0;transform:translateY(-12px)}} .mnav__in{padding:2rem var(--pad) 4rem;display:flex;flex-direction:column} .mnav__titel{ font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold); margin:1.8rem 0 .5rem; } .mnav__titel:first-child{margin-top:0} .mnav__in>a{ display:flex;align-items:center;gap:.85rem; padding:.95rem 0;font-size:1.08rem;font-weight:500; border-bottom:1px solid rgba(255,255,255,.06); } .mnav__in>a .ic{color:var(--gold)} .mnav__tat{display:flex;flex-direction:column;gap:.7rem;margin-top:2rem} /* ============================================================ Sektionen */ .sec{padding-block:var(--sec);position:relative} .sec--tief{background:var(--tief)} .sec--eng{padding-block:clamp(3rem,6vw,5rem)} .sec__kopf{max-width:60ch;margin-bottom:clamp(2.5rem,5vw,4rem)} .sec__kopf--mitte{margin-inline:auto;text-align:center} .sec__kopf--mitte .label{justify-content:center} /* Atmosphärischer Gold-Schein, wie das Rimlight der Produktfotos. overflow-x:clip hält den Schein im Layout – sonst macht sein rechter Überstand das Dokument breiter als den Viewport (clip statt hidden, damit vertikaler Überlauf und sticky weiter funktionieren). */ .glut{position:relative;isolation:isolate;overflow-x:clip} .glut::before{ content:"";position:absolute;z-index:-1;pointer-events:none; width:min(760px,90vw);aspect-ratio:1; right:-14%;top:-22%; background:radial-gradient(circle,var(--gold-glut),transparent 66%); filter:blur(10px); } /* --- Hero mit Imagefilm --- */ /* Der Hero läuft unter den Kopf durch, damit das Bild bis ganz nach oben reicht. Der Ausgleich steckt im padding-top. */ .hero{ position:relative; min-height:100svh; margin-top:calc(-1 * var(--kopf-h)); display:flex;align-items:center; padding-block:calc(var(--kopf-h) + clamp(1.5rem,4vw,2.5rem)) clamp(3rem,7vw,5rem); overflow:hidden; } .hero__film{position:absolute;inset:0;z-index:-2} /* Kürzerer Hero für Unterseiten – volle Bildschirmhöhe ist dort zu viel. */ .hero--kurz{min-height:min(74svh,660px)} /* Verlauf von allen vier Seiten: das Foto läuft ringsum ins Schwarz der Seite aus, statt als Kachel mit harter Kante zu stehen. */ /* Doppelt geklassert: .hero__film::after steht weiter unten in der Datei und gewänne sonst bei gleicher Spezifität. */ .hero__film.hero__film--rundum::after{ content:"";position:absolute;inset:0; background: radial-gradient(120% 100% at 62% 50%,transparent 30%,rgba(0,0,0,.42) 72%,rgba(0,0,0,.92) 100%), linear-gradient(180deg,rgba(0,0,0,.8) 0%,rgba(0,0,0,.4) 20%,rgba(0,0,0,.26) 58%,rgba(0,0,0,.88) 90%,#000 100%), /* Links kräftig, damit die Headline trägt – rechts nur leicht, dort steht das Team und soll auch zu sehen sein. */ linear-gradient(90deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.88) 26%,rgba(0,0,0,.62) 46%,rgba(0,0,0,.2) 64%,rgba(0,0,0,.14) 86%,rgba(0,0,0,.62) 100%), radial-gradient(80% 60% at 76% 24%,rgba(247,216,115,.10),transparent 62%); } .hero__film.hero__film--rundum img{object-position:center 56%} /* Leistungsseiten: das Produkt steht rechts und ist bei Wärmepumpe und Klima selbst schwarz. Ein kräftiger Verlauf würde es in der Wand verschwinden lassen – links also abdunkeln für die Headline, rechts fast offen lassen. */ .hero__film.hero__film--produkt::after{ content:"";position:absolute;inset:0; background: /* Bis 50 % kräftig – so weit reicht die Textspalte –, danach schnell auf fast nichts, damit das Produkt rechts nicht in der Wand verschwindet. */ linear-gradient(90deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.9) 30%,rgba(0,0,0,.84) 45%, rgba(0,0,0,.55) 53%,rgba(0,0,0,.16) 62%,rgba(0,0,0,.06) 84%,rgba(0,0,0,.42) 100%), linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.18) 22%,rgba(0,0,0,.14) 62%, rgba(0,0,0,.72) 92%,#000 100%), radial-gradient(80% 60% at 74% 26%,rgba(247,216,115,.08),transparent 64%); } /* Rechtsbündig: bei breiteren Bildern als der Hero fällt links etwas weg – und links steht ohnehin nur Wand, rechts das Produkt. */ .hero__film.hero__film--produkt img{object-position:100% 50%} /* Leistungsseiten: Textspalte schmaler als beim Über-uns-Hero, sonst läuft sie ins Produkt. Eigene Klasse, damit der Über-uns-Hero unverändert bleibt. */ @media (min-width:861px){ .hero--produkt .hero__txt{max-width:min(50%,33rem)} .hero--produkt .h1{font-size:clamp(2.1rem,1.2rem + 2.8vw,3.1rem)} } /* Schmal: Text liegt zwangsläufig auf dem Produkt – gleichmäßiger Schleier. */ @media (max-width:860px){ .hero__film.hero__film--produkt::after{ background: linear-gradient(180deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.66) 24%,rgba(0,0,0,.6) 55%, rgba(0,0,0,.8) 80%,#000 100%), radial-gradient(120% 60% at 50% 24%,rgba(247,216,115,.08),transparent 64%); } } /* Headline bleibt in der linken Hälfte – rechts steht das Team, das soll die Schrift nicht überdecken. */ @media (min-width:861px){ .hero--kurz .hero__txt{max-width:min(56%,40rem)} .hero--kurz .h1{font-size:clamp(2.1rem,1.2rem + 3.2vw,3.5rem)} } /* Schmale Schirme schneiden das 16:9-Foto seitlich zu – übrig bleibt genau die Personengruppe, und der Text liegt zwangsläufig darauf. Nebeneinander geht nicht, also ein gleichmäßiger Schleier über das ganze Bild: das Foto bleibt Stimmung, die Schrift bleibt lesbar. */ @media (max-width:860px){ .hero__film.hero__film--rundum::after{ background: linear-gradient(180deg,rgba(0,0,0,.84) 0%,rgba(0,0,0,.68) 22%,rgba(0,0,0,.64) 52%, rgba(0,0,0,.82) 78%,rgba(0,0,0,.96) 92%,#000 100%), radial-gradient(120% 60% at 50% 22%,rgba(247,216,115,.09),transparent 64%); } } /* Auf breiten Bildschirmen wird oben/unten beschnitten – der Anschnitt soll die Technik am Haus (Wärmepumpe, Speicher in der Garage) stehen lassen. */ .hero__film video,.hero__film img{ width:100%;height:100%;object-fit:cover;object-position:center 62%; } .hero__film::after{ content:"";position:absolute;inset:0; background: /* Seitlicher Verlauf: hält die Headline auch dann lesbar, wenn der Film in eine helle Szene wechselt (Drohnenaufnahmen bei Tageslicht). */ linear-gradient(90deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.6) 32%,rgba(0,0,0,.1) 60%,rgba(0,0,0,.28) 100%), /* Oben etwas kräftiger: trägt jetzt allein die Navigation. Unten bewusst spät abdunkeln, sonst verschwindet die Technik am Haus. */ linear-gradient(180deg,rgba(0,0,0,.66) 0%,rgba(0,0,0,.52) 10%,rgba(0,0,0,.18) 30%,rgba(0,0,0,.22) 72%,rgba(0,0,0,.8) 94%,#000 100%), radial-gradient(90% 70% at 80% 26%,rgba(247,216,115,.14),transparent 60%); } /* Auf schmalen Geräten steht der Text über der ganzen Breite – dort flächig abdunkeln statt seitlich. */ @media (max-width:860px){ .hero__film::after{ background: linear-gradient(180deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.55) 30%,rgba(0,0,0,.88) 82%,#000 100%), radial-gradient(90% 70% at 70% 24%,rgba(247,216,115,.12),transparent 60%); } } /* Unterseiten haben kein Video – dort trägt der Verlauf allein. */ .hero__film.is-leer{ background: radial-gradient(90% 80% at 74% 22%,rgba(247,216,115,.16),transparent 62%), linear-gradient(155deg,#1a1a1a,#000 62%); } .hero__in{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)} .hero__zeile{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(2rem,5vw,4rem);align-items:center} .hero__txt{min-width:0} .hero .h1{font-size:clamp(2.5rem,1.4rem + 4.6vw,4.6rem)} .hero .h1{margin-bottom:1.5rem} .hero__lead{max-width:44ch;color:#d5d5d5;font-size:clamp(1.05rem,1rem + .4vw,1.3rem)} .hero__tat{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem} .hero__marker{ display:flex;flex-wrap:wrap;gap:1.6rem 2.4rem; margin-top:clamp(2.5rem,5vw,3.6rem); padding-top:1.8rem;border-top:1px solid var(--rahmen); } .hero__marker span{display:inline-flex;align-items:center;gap:.6rem; font-size:.9rem;font-weight:500;color:#cfcfcf} .hero__marker .ic{color:var(--gold)} .hero__karte{ padding:1.6rem;border-radius:18px; background:linear-gradient(165deg,rgba(28,28,28,.94),rgba(10,10,10,.96)); border:1px solid var(--rahmen-stark); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); box-shadow:0 40px 90px -40px #000; } .scroll{ position:absolute;left:50%;bottom:1.4rem;transform:translateX(-50%); display:grid;place-items:center;gap:.5rem; font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--grau-tief); } .scroll__linie{width:1px;height:44px;background:linear-gradient(var(--gold),transparent); animation:sink 2.4s ease-in-out infinite} @keyframes sink{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}} /* --- Vertrauensleiste --- */ .trust{border-block:1px solid var(--rahmen);background:var(--tief)} .trust__in{ display:grid;grid-template-columns:repeat(4,1fr); gap:1px;background:var(--rahmen); } .trust__z{ background:var(--tief);padding:1.9rem clamp(1rem,2.5vw,2rem); display:flex;flex-direction:column;gap:.35rem; } .trust__w{ font-family:Archivo,sans-serif;font-weight:800; font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem); color:var(--gold);line-height:1; display:flex;align-items:center;gap:.45rem; /* Feste Ziffernbreite: sonst zappelt die Kachel während des Hochzählens */ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; } .trust__stern{display:inline-flex;color:var(--gold)} .trust__stern .stern{color:inherit} .trust__b{font-size:.86rem;color:var(--grau);line-height:1.4} /* --- Icon-Raster (Broschüren-Baustein) --- */ .vgrid{display:grid;gap:1px;background:var(--rahmen);border:1px solid var(--rahmen);border-radius:var(--rund);overflow:hidden} .vgrid--3{grid-template-columns:repeat(3,1fr)} .vgrid--2{grid-template-columns:repeat(2,1fr)} .vk{ background:var(--tief); padding:clamp(1.7rem,3vw,2.4rem); display:flex;flex-direction:column;gap:.7rem; transition:background .35s; } .vk:hover{background:var(--panel)} .vk__ic{color:var(--gold);display:block;margin-bottom:.4rem} .vk__t{font-size:1rem;letter-spacing:.02em;line-height:1.25} .vk__p{margin:0;font-size:.92rem;color:var(--grau);line-height:1.6} /* --- Leistungskacheln --- Fünf Kacheln: drei oben, zwei mittig darunter. Umgesetzt über ein Sechser-Raster, in dem jede Kachel zwei Spalten belegt – die vierte startet auf Spalte 2, dadurch sitzt die untere Reihe zentriert unter der oberen. Vorher stand hier auto-fit: das ergab je nach Breite vier Kacheln oben und eine allein darunter. ponytail: auf genau fünf Kacheln zugeschnitten. Kommt eine sechste dazu, füllt sie die zweite Reihe von selbst – dann muss die nth-child-Regel raus. */ .lgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:1.1rem} .lgrid > *{grid-column:span 2} .lgrid > :nth-child(4){grid-column:2 / span 2} .lk{ position:relative; padding:clamp(1.6rem,3vw,2.2rem); border:1px solid var(--rahmen);border-radius:var(--rund); background:linear-gradient(165deg,var(--panel),#0b0b0b); overflow:hidden; transition:border-color .4s,transform .4s var(--uebergang); } .lk::before{ content:"";position:absolute;inset:0;opacity:0;transition:opacity .45s; background:radial-gradient(110% 90% at 82% 8%,rgba(247,216,115,.14),transparent 62%); } .lk:hover{border-color:var(--rahmen-stark);transform:translateY(-4px)} .lk:hover::before{opacity:1} .lk__ic{color:var(--gold);position:relative} .lk__t{margin:1.1rem 0 .5rem;font-size:1.22rem;position:relative} .lk__p{margin:0;color:var(--grau);font-size:.94rem;position:relative} .lk__go{ display:inline-flex;align-items:center;gap:.45rem;margin-top:1.4rem; font-size:.85rem;font-weight:600;color:var(--gold);position:relative; } .lk:hover .lk__go .ic{transform:translateX(5px)} .lk__go .ic{transition:transform .3s} /* --- EnergyStation-Bühne --- */ .station{ background: radial-gradient(75% 90% at 76% 26%,rgba(247,216,115,.13),transparent 60%), linear-gradient(180deg,#000,#0a0a0a 55%,#000); border-block:1px solid var(--rahmen); } .station__zeile{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2.5rem,6vw,5rem);align-items:center} .station__bild{ position:relative;border-radius:18px;overflow:hidden; border:1px solid var(--rahmen); background:linear-gradient(160deg,#151515,#000); aspect-ratio:4/5; display:grid;place-items:center; } .station__bild img{width:100%;height:100%;object-fit:cover} /* Das Produktfoto ist quadratisch – im 4:5-Rahmen fielen die offenen Türen weg. */ .station__bild--quadrat{aspect-ratio:1/1} /* Hochformat-Porträt: mittig geschnitten fehlt der Kopf, deshalb nach oben rücken. */ .station__bild--portraet img{object-position:center 22%} .station__bu{ margin:.9rem 0 0;font-size:.82rem;letter-spacing:.02em;color:var(--grau-tief); } .station__bu b{color:var(--grau);font-weight:600} .station__bild.is-leer::after{ content:"TODO: Produktfoto EnergyStation"; font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grau-tief); border:1px dashed var(--rahmen);padding:.7rem 1rem;border-radius:8px; } .station__siegel{position:absolute;right:1.2rem;bottom:1.2rem;z-index:2} .station__var{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2rem} .svar{ padding:1.4rem;border:1px solid var(--rahmen);border-radius:12px; background:rgba(255,255,255,.02); transition:border-color .35s,background .35s; } .svar:hover{border-color:var(--rahmen-stark);background:rgba(247,216,115,.05)} .svar__tag{ display:inline-block;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase; color:#000;background:var(--gold);padding:.25rem .55rem;border-radius:4px;font-weight:700; } .svar__n{font-family:Archivo,sans-serif;font-weight:800;text-transform:uppercase; font-size:1.4rem;margin:.7rem 0 .45rem;letter-spacing:.01em} .svar__p{margin:0;font-size:.9rem;color:var(--grau)} /* --- Zweispaltige Vorteilsliste („Ihre Vorteile auf einen Blick") --- */ .vliste{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(2rem,4vw,3.5rem)} .vliste__p{ display:flex;gap:1.1rem;align-items:flex-start; padding:1.35rem 0;border-bottom:1px solid rgba(255,255,255,.07); } .vliste__p .ic{color:var(--gold);margin-top:.2rem} .vliste__p b{display:block;font-family:Archivo,sans-serif;font-weight:800; text-transform:uppercase;font-size:.95rem;letter-spacing:.02em;margin-bottom:.3rem} .vliste__p span{font-size:.9rem;color:var(--grau);line-height:1.6} /* --- Zweispalter: Fließtext neben Checkliste (Analyse-Abschnitt) --- */ .zwei{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2.5rem,6vw,5rem);align-items:start; } .zwei .sec__kopf{margin-bottom:1.6rem} .zwei__txt p{color:var(--grau);margin:0 0 1.1rem;max-width:52ch} /* --- Checkliste mit goldenem Haken --- */ .chkl{list-style:none;margin:0;padding:0;border-top:1px solid var(--rahmen)} .chkl li{ display:flex;gap:.9rem;align-items:flex-start; padding:1rem 0;border-bottom:1px solid var(--rahmen); font-size:.96rem;color:var(--grau);line-height:1.55; } .chkl .ic{color:var(--gold);flex:none;margin-top:.15rem} .chkl b{color:var(--weiss);font-weight:600} .hell .chkl,.hell .chkl li{border-color:var(--hell-rahmen)} .hell .chkl li{color:var(--hell-text-2)} .hell .chkl b{color:var(--hell-text)} .hell .chkl .ic{color:#8a6d16} /* --- Hinweiskasten: Querverweis auf eine andere Leistung --- */ .hinweis{ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:1.4rem 2.4rem; padding:clamp(1.6rem,3vw,2.4rem); border:1px solid var(--rahmen-stark);border-radius:var(--rund); background:linear-gradient(150deg,rgba(247,216,115,.08),rgba(255,255,255,.02)); } /* Zeilenhöhe muss über die globalen .98 der Überschriften: bricht der Titel auf zwei Zeilen um, stoßen sonst die Umlautpunkte in die Zeile darüber. */ .hinweis__t{font-size:1.12rem;line-height:1.25;margin:0 0 .5rem} .hinweis p{margin:0;color:var(--grau);font-size:.94rem;max-width:64ch} .hinweis .btn{flex:none} /* --- Ablauf --- */ .ablauf{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.4rem,3vw,2.4rem);counter-reset:s} /* Als Klasse, nicht inline: sonst schlägt die Spaltenzahl die Mobil-Umbrüche unten. */ .ablauf--3{grid-template-columns:repeat(3,1fr)} .ablauf__s{position:relative;padding-top:5.2rem;counter-increment:s} .ablauf__s::before{ content:"0" counter(s); position:absolute;top:0;left:0;line-height:1; font-family:Archivo,sans-serif;font-weight:800;font-size:2.9rem; color:var(--gold);-webkit-text-stroke:1px transparent; transition:-webkit-text-stroke-color .5s,color .5s; } /* wie bei .hinweis__t: zweizeilige Titel mit Umlaut brauchen mehr als .98 */ .ablauf__s h3{font-size:1.05rem;line-height:1.2;margin-bottom:.7rem} .ablauf__s p{margin:0;font-size:.9rem;color:var(--grau)} /* --- Zeitstrahl --- */ .zeit{position:relative;padding-left:3rem} /* Graue Grundlinie … */ .zeit::before{ content:"";position:absolute;left:.42rem;top:.7rem;bottom:.7rem;width:1px; background:rgba(255,255,255,.1); } /* … darüber die goldene Linie, die beim Scrollen mitwächst. */ .zeit::after{ content:"";position:absolute;left:.42rem;top:.7rem;width:1px; height:max(3%, calc((100% - 1.4rem) * var(--fortschritt,1))); background:linear-gradient(var(--gold),var(--gold-tief)); box-shadow:0 0 12px rgba(247,216,115,.5); } .zeit__p{position:relative;padding-bottom:3rem} .zeit__p::before{ content:"";position:absolute;left:-3rem;top:.55rem; width:11px;height:11px;border-radius:50%; background:#2a2a2a;box-shadow:0 0 0 4px rgba(255,255,255,.04); transition:background .45s,box-shadow .45s,transform .45s var(--uebergang); } .zeit__p.is-an::before{ background:var(--gold); box-shadow:0 0 0 5px rgba(247,216,115,.16),0 0 16px rgba(247,216,115,.55); transform:scale(1.1); } .zeit__j{ display:block; font-family:Archivo,sans-serif;font-weight:800;color:var(--gold); font-size:1.3rem;letter-spacing:.06em;line-height:1; margin-bottom:.9rem; } .zeit__t{font-size:1.05rem;margin:0 0 .6rem} .zeit__p p{margin:0;color:var(--grau);font-size:.93rem;max-width:52ch} .hell .zeit::before{background:rgba(16,18,21,.14)} .hell .zeit__p::before{background:#c3ccd6;box-shadow:0 0 0 4px rgba(16,18,21,.05)} /* --- Team-Slider --- */ .tslide{position:relative} .tslide__spur{ display:flex;gap:1.2rem; overflow-x:auto;scroll-snap-type:x mandatory; scrollbar-width:none;-ms-overflow-style:none; padding-bottom:.5rem; } .tslide__spur::-webkit-scrollbar{display:none} .tk{ flex:0 0 clamp(260px,30%,340px);scroll-snap-align:start; } .tk__bild{ position:relative;aspect-ratio:4/5;border-radius:14px;overflow:hidden; background:linear-gradient(160deg,#1a1a1a,#0a0a0a); border:1px solid var(--rahmen); } .tk__bild img{width:100%;height:100%;object-fit:cover;filter:grayscale(.25) contrast(1.05)} .tk:hover .tk__bild img{filter:none} /* Solange kein Foto da ist: Gewerke-Icon auf dunkler Fläche */ /* War reines Icon (place-items:center), trägt jetzt zusätzlich den Platzhaltertext – deshalb Spalte statt Grid-Zelle, wie beim EnergyStation-Platzhalter (.station__bild.is-leer::after). */ .tk__ic{ position:absolute;inset:0;display:none; flex-direction:column;align-items:center;justify-content:center;gap:.9rem; padding:1.6rem;text-align:center; color:var(--gold); } .tk__ic svg{opacity:.5} .tk__ic p{ margin:0;font-size:.78rem;letter-spacing:.03em;line-height:1.5; color:var(--grau);max-width:20ch; } .tk__bild.is-leer{ background: radial-gradient(90% 80% at 50% 30%,rgba(247,216,115,.1),transparent 62%), linear-gradient(160deg,#1a1a1a,#0a0a0a); } .tk__bild.is-leer .tk__ic{display:flex} .tk__txt{padding-top:1.1rem} .tk__rolle{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0} .tk__name{font-size:1.15rem;margin:.4rem 0 .45rem} .tk__p{margin:0;font-size:.9rem;color:var(--grau)} .tslide__steuer{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:2rem} .tslide__pkte{display:flex;gap:.5rem} .tslide__pkt{ width:28px;height:3px;border-radius:2px;background:rgba(255,255,255,.16); transition:background .3s,width .3s; } .tslide__pkt.is-on{background:var(--gold);width:44px} .tslide__pfeile{display:flex;gap:.6rem} /* --- Hersteller-Laufband --- Braucht einen HELLEN Grund: die Logos liegen in Markenfarben vor, mehrere (Aiko, EcoFlow, JA Solar) sind dunkel gezeichnet und wären auf Schwarz unsichtbar – fremde Marken darf man zudem nicht umfärben. Statt eines neutralen Grau-/Weißtons läuft hier derselbe Gold-Verlauf wie im Claim-Balken vor dem Footer (.claimbar): technisch weiterhin ein heller Grund (alle 7 Logos gegengeprüft), wirkt aber wie ein bewusster Marken-Akzent statt wie ein zufälliger heller Streifen im dunklen Layout. */ .marken{ /* Knapp um die Logozeile statt der alten großzügigen Sektionshöhe – der Balken soll gerade so viel Platz haben, wie die Logos brauchen. Erster Versuch (1–1.5rem Polster) wirkte mit 167px Bandhöhe gegen 88px Logohöhe immer noch fast doppelt so hoch – hier deutlich enger. */ /* Unten etwas mehr als oben: über den Logos sitzt bereits das Label als Abstandhalter, darunter nichts. Die kompakte Bildmarke (K2) ragt über ihre Kachel hinaus und wurde von overflow:hidden sonst angeschnitten. */ padding-block:clamp(.5rem,1vw,.8rem) clamp(.75rem,1.35vw,1.15rem); background:linear-gradient(90deg,var(--gold-tief),var(--gold) 45%,var(--gold-tief)); color:#000; overflow:hidden; } .marken__t{ text-align:center;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase; color:rgba(0,0,0,.68);margin:0 0 .5rem; } .marken__band{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); } .marken__lauf{ display:flex;align-items:center; gap:clamp(2rem,5vw,4rem); width:max-content; } /* Läuft erst, wenn das JS die Kette breit genug geklont hat – sonst entsteht auf breiten Bildschirmen rechts eine leere Fläche. */ .marken__lauf.is-bereit{animation:lauf var(--dauer,40s) linear infinite} .marken:hover .marken__lauf{animation-play-state:paused} @keyframes lauf{to{transform:translateX(-50%)}} .marken__m{ /* flex statt grid: In einer Grid-Zelle mit genau einem Kind und place-items:center wird die (einzige) Zeilen-/Spaltenspur an den Inhalt angepasst – dadurch löst max-height:100% am Bild gegen eine Spur auf, die selbst wieder vom Bild abhängt. Diese Zirkularität behandeln Browser uneinheitlich: K2 Systems landete dadurch bei seiner vollen Originalhöhe (200 px) statt der Kachelhöhe. Flexbox hat diese Falle nicht – das ist das übliche Muster fürs Einpassen unterschiedlicher Bildformate in eine feste Box. */ flex:none;display:flex;align-items:center;justify-content:center; width:clamp(150px,15vw,210px);height:clamp(64px,7vw,86px); } /* Bewusst in Markenfarbe statt Graustufen: Die Hersteller-Partnerschaft ist ein Verkaufsargument – und fremde Logos umzufärben ist markenrechtlich ohnehin heikel. */ .marken__m img{ max-width:100%;max-height:100%;width:auto;height:auto; object-fit:contain; transition:transform .35s var(--uebergang); } /* Früher stand hier opacity:.88. Auf dem hellgrauen Band war das eine dezente Dämpfung – auf dem Goldband scheinen dadurch 12 % Gold durch jedes Logo. Bei dünnen Strichlogos fällt das nicht auf, bei einer vollflächigen Marke wie K2 Systems wird die rote Scheibe olivstichig und das Weiß vergilbt. */ .marken__m:hover img{transform:scale(1.04)} /* Nur für Screenreader/Suchmaschinen – die Logos selbst tragen alt-Texte, aber die Liste als Fließtext hilft zusätzlich. */ .marken__sr{ position:absolute;width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap; } /* --- Helle Entlastungssektionen --- */ .hell{background:var(--hell);color:var(--hell-text)} .hell--weiss{background:var(--hell-weiss)} .hell .label{color:#8a6d16} .hell .label::before{background:linear-gradient(90deg,#8a6d16,transparent)} .hell .au{color:#8a6d16} .hell .lead,.hell .vk__p,.hell .lk__p{color:var(--hell-text-2)} .hell .btn--geist{border-color:var(--hell-rahmen);color:var(--hell-text);background:transparent} .hell .btn--geist:hover{border-color:var(--hell-text);color:var(--hell-text);background:rgba(0,0,0,.04)} .rgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.2rem} /* Grundfassung dunkel – die Karte steht auf Referenzen- und Ratgeberseiten. Für helle Sektionen weiter unten die .hell-Variante. */ .rk{ background:var(--panel);border:1px solid var(--rahmen);border-radius:var(--rund); overflow:hidden;display:flex;flex-direction:column; transition:transform .4s var(--uebergang),box-shadow .4s,border-color .4s; } .rk:hover{ transform:translateY(-4px);border-color:var(--rahmen-stark); box-shadow:0 24px 50px -30px rgba(0,0,0,.9); } .rk__bild{aspect-ratio:16/10;background:#101010;position:relative;display:grid;place-items:center} .rk__bild img{width:100%;height:100%;object-fit:cover} .rk__bild.is-leer::after{ content:attr(data-ph);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase; color:var(--grau-tief); } .rk__txt{padding:1.4rem;display:flex;flex-direction:column;gap:.5rem;flex:1} .rk__meta{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)} .rk__t{font-size:1.1rem;color:var(--weiss)} .rk__p{margin:0;font-size:.92rem;color:var(--grau)} /* Helle Sektionen (Startseite, Ratgeber) */ .hell .rk{background:#fff;border-color:var(--hell-rahmen)} .hell .rk:hover{border-color:var(--hell-rahmen);box-shadow:0 24px 50px -30px rgba(16,18,21,.45)} .hell .rk__bild{background:#c9d2dc} .hell .rk__bild.is-leer::after{color:var(--hell-text-2)} .hell .rk__meta{color:#8a6d16} .hell .rk__t{color:var(--hell-text)} .hell .rk__p{color:var(--hell-text-2)} /* Google-Bewertung als Vertrauenselement */ .stern{color:#e8b23a;flex:none} .hero__note{display:inline-flex;align-items:center;gap:.35rem;flex-wrap:wrap} .hero__note .stern{margin-right:-1px} .hero__note b{color:var(--weiss);font-weight:700;margin-left:.35rem} .gbew{ display:inline-flex;flex-direction:column;gap:.3rem; margin-top:1.6rem;padding:1rem 1.3rem; border:1px solid var(--rahmen);border-radius:12px; background:rgba(255,255,255,.02); } .gbew__kopf{display:flex;align-items:center;gap:.7rem} .gbew__note{ font-family:Archivo,sans-serif;font-weight:800;font-size:1.7rem;line-height:1; color:var(--gold); } .gbew__sterne{display:inline-flex;gap:.1rem} .gbew__txt{margin:0;font-size:.88rem;color:var(--grau)} .gbew__txt b{color:var(--weiss);font-weight:600} /* Auf hellen Sektionen */ .gbew--hell{border-color:var(--hell-rahmen);background:#fff} .gbew--hell .gbew__note{color:#8a6d16} .gbew--hell .gbew__txt{color:var(--hell-text-2)} .gbew--hell .gbew__txt b{color:var(--hell-text)} /* Bewertungen */ .bgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.2rem} .bk{background:var(--panel);border:1px solid var(--rahmen);border-radius:var(--rund);padding:1.6rem; display:flex;flex-direction:column;gap:.9rem} .bk__sterne{display:flex;gap:.15rem;color:var(--gold)} .bk__zitat{margin:0;font-size:.98rem;line-height:1.65;color:var(--grau)} .bk__wer{margin:0;font-size:.85rem;color:var(--weiss);font-weight:600;margin-top:auto} /* Nicht --grau-tief: das landet auf der dunklen Karte bei 4,4:1 und damit unter dem Schwellenwert für Kleintext. */ .bk__jahr{font-weight:400;color:#9a9a9a} /* Helle Sektionen */ .hell .bk{background:#fff;border-color:var(--hell-rahmen)} .hell .bk__sterne{color:#e0a900} .hell .bk__zitat{color:var(--hell-text)} .hell .bk__wer{color:var(--hell-text-2)} .hell .bk__jahr{color:var(--hell-text-2);opacity:.75} /* Als Slider-Karte: gleiche Breite wie die Gewerke-Karten, drei nebeneinander. Gleiche Höhe in der Reihe, damit die Zeile nicht ausfranst – die Zitate sind unterschiedlich lang. */ .bk--slide{flex:0 0 clamp(260px,30%,340px);scroll-snap-align:start;align-self:stretch} .tslide--hell .tslide__pkt{background:rgba(16,18,21,.14)} .tslide--hell .tslide__pkt.is-on{background:#8a6d16} .tslide--hell .rund{border-color:var(--hell-rahmen);color:var(--hell-text)} .tslide--hell .rund:hover{border-color:#8a6d16;background:rgba(138,109,22,.08)} /* Die Spur ist ein Flex-Container – ohne align-items:stretch stünden die Karten unterschiedlich hoch. */ .tslide__spur{align-items:stretch} /* --- Terminbuchung --- */ .termine{background:var(--tief);border-block:1px solid var(--rahmen)} .tmgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.5vw,1.6rem)} .tmk{ display:grid;grid-template-columns:auto 1fr;grid-template-areas: "ic kopf" "p p" "hin hin" "go go"; gap:.5rem 1rem;align-content:start; padding:clamp(1.4rem,3vw,2rem); border:1px solid var(--rahmen);border-radius:var(--rund); background:linear-gradient(160deg,rgba(255,255,255,.035),rgba(255,255,255,.01)); transition:border-color .3s,background .3s,transform .3s; } .tmk:hover{ border-color:var(--gold);background:rgba(247,216,115,.06);transform:translateY(-3px); } .tmk__ic{grid-area:ic;color:var(--gold);display:grid;place-items:center; width:44px;height:44px;border:1px solid var(--rahmen);border-radius:11px} .tmk:hover .tmk__ic{border-color:var(--rahmen-stark)} .tmk__kopf{grid-area:kopf;display:flex;flex-direction:column;gap:.2rem;justify-content:center} .tmk__name{ font-family:Archivo,sans-serif;font-weight:800;text-transform:uppercase; letter-spacing:-.01em;font-size:1.02rem;line-height:1.15;color:var(--weiss); } .tmk__dauer{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)} .tmk__p{grid-area:p;margin-top:.5rem;font-size:.92rem;color:var(--grau)} /* Pflichthinweis aus dem Kalender – steht schon vor dem Klick da, nicht erst im Buchungsformular. */ .tmk__hinweis{ grid-area:hin;margin-top:.9rem;display:flex;gap:.5rem;align-items:flex-start; padding:.65rem .8rem;border-radius:9px; border:1px solid var(--rahmen);background:var(--gold-glut); font-size:.82rem;line-height:1.45;color:var(--grau); } .tmk__hinweis svg{display:block;flex:none;margin-top:.15rem;color:var(--gold)} .hell .tmk__hinweis{border-color:var(--hell-rahmen);background:rgba(138,109,22,.07);color:var(--hell-text-2)} .hell .tmk__hinweis svg{color:#8a6d16} .tmk__go{ grid-area:go;margin-top:1rem;display:inline-flex;align-items:center;gap:.45rem; font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gold); } .tmk:hover .tmk__go svg{transform:translateX(4px)} .tmk__go svg{transition:transform .3s} .termine__fuss{ margin:clamp(1.6rem,3vw,2.2rem) 0 0;text-align:center; font-size:.9rem;color:var(--grau-tief); } .termine__fuss a{color:var(--grau);border-bottom:1px solid var(--rahmen-stark)} .termine__fuss a:hover{color:var(--gold)} /* Ohne display:inline-block bricht das global auf block gesetzte SVG die Zeile. */ .termine__fuss svg{display:inline-block;vertical-align:-3px;color:var(--gold)} /* Auf hellen Sektionen */ .termine.hell,.termine.hell--weiss{background:var(--hell-weiss);border-color:var(--hell-rahmen)} .hell .tmk{border-color:var(--hell-rahmen);background:#fff} .hell .tmk__name{color:var(--hell-text)} .hell .tmk__p{color:var(--hell-text-2)} .hell .tmk__ic{border-color:var(--hell-rahmen);color:#8a6d16} .hell .tmk__dauer,.hell .tmk__go{color:#8a6d16} .hell .tmk:hover{border-color:#8a6d16;background:rgba(138,109,22,.05)} @media (max-width:720px){ .tmgrid{grid-template-columns:1fr} } /* Ortskacheln */ .ogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.8rem} .ok{ padding:1.1rem 1.25rem;border:1px solid var(--rahmen);border-radius:11px; background:var(--tief); display:flex;align-items:center;justify-content:space-between;gap:.8rem; transition:border-color .3s,background .3s,transform .3s; } .ok:hover{border-color:var(--gold);background:rgba(247,216,115,.06);transform:translateY(-2px)} .ok b{font-size:.98rem;font-weight:600} .ok span{display:block;font-size:.76rem;color:var(--grau-tief);margin-top:.15rem} .ok .ic{color:var(--gold);flex:none} .hell .ok{background:#fff;border-color:var(--hell-rahmen)} .hell .ok:hover{border-color:#8a6d16;background:#fff} .hell .ok span{color:var(--hell-text-2)} .hell .ok .ic{color:#8a6d16} /* --- Quiz --- */ .quiz{padding:clamp(1.5rem,3vw,2.2rem);border-radius:16px; background:linear-gradient(165deg,rgba(30,30,30,.9),rgba(8,8,8,.95)); border:1px solid var(--rahmen-stark)} .quiz--kompakt{padding:1.3rem;border-radius:14px} .hero__karte .quiz{background:none;border:0;padding:0} .quiz__kopf{margin-bottom:1.5rem} .quiz__zaehler{margin:0 0 .6rem;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--grau)} .quiz__zaehler b{color:var(--gold)} .quiz__bar{height:3px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden} .quiz__bar span{display:block;height:100%;background:linear-gradient(90deg,var(--gold-tief),var(--gold)); border-radius:2px;transition:width .5s var(--uebergang)} .qstep{border:0;padding:0;margin:0;min-inline-size:0} .qstep__frage{ font-family:Archivo,sans-serif;font-weight:800;text-transform:uppercase; font-size:clamp(1.1rem,1rem + .5vw,1.4rem);letter-spacing:-.01em; padding:0;margin-bottom:1.2rem;line-height:1.1; } .qopts{display:grid;grid-template-columns:1fr 1fr;gap:.6rem} .qopt{ display:flex;align-items:center;gap:.7rem; padding:.95rem 1rem;text-align:left; border:1px solid var(--rahmen);border-radius:10px; background:rgba(255,255,255,.02); font-size:.92rem;font-weight:500; transition:border-color .28s,background .28s,transform .28s; } .qopt .ic{color:var(--gold);transition:transform .3s} .qopt:hover{border-color:var(--gold);background:rgba(247,216,115,.08);transform:translateX(2px)} .qopt:hover .ic{transform:scale(1.12)} .qopt.is-gewaehlt{border-color:var(--gold);background:rgba(247,216,115,.14)} .qfelder{display:grid;grid-template-columns:1fr 1fr;gap:.8rem} .feld{display:flex;flex-direction:column;gap:.35rem} .feld span{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grau)} .feld input{ padding:.85rem 1rem;border-radius:9px; border:1px solid var(--rahmen);background:rgba(255,255,255,.03); color:var(--weiss);font-size:.95rem; transition:border-color .28s,background .28s; } .feld input:focus{outline:0;border-color:var(--gold);background:rgba(247,216,115,.06)} .feld input:user-invalid{border-color:#c9503f} .check{display:flex;gap:.7rem;align-items:flex-start;margin:1.1rem 0 1.3rem;font-size:.84rem;color:var(--grau)} .check input{margin-top:.2rem;accent-color:var(--gold);width:17px;height:17px;flex:none} .check a{color:var(--gold);text-decoration:underline;text-underline-offset:3px} .quiz__nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.3rem} .quiz__gewaehlt{margin:0;font-size:.8rem;color:var(--grau-tief);text-align:right} .quiz__fein{margin:.9rem 0 0;font-size:.78rem;color:var(--grau-tief);text-align:center} /* Schlussbilder des Formulars. Bewusst KEINE Überschrift, obwohl es optisch wie eine aussieht: das Formular steht auf jeder Seite direkt unter der H1, eine H3 darin risse ein Loch in die Überschriften-Gliederung (H1 → H3). */ .quiz__danke, .quiz__fehler{text-align:center;padding:2rem 0} .quiz__danke-ic{display:inline-grid;place-items:center;width:70px;height:70px;border-radius:50%; background:rgba(247,216,115,.14);color:var(--gold);margin-bottom:1.1rem} .quiz__danke-t{margin:0 0 .6rem} .quiz__danke p, .quiz__fehler p{margin:0;color:var(--grau)} .quiz__fehler a{color:var(--gold);text-decoration:underline} /* --- CTA --- */ .cta{ padding-block:clamp(3.5rem,7vw,5.5rem); background: radial-gradient(70% 120% at 20% 10%,rgba(247,216,115,.1),transparent 60%), var(--tief); border-block:1px solid var(--rahmen); } .cta__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2rem} .cta__tat{display:flex;flex-wrap:wrap;gap:.9rem} /* --- Claim-Balken (Broschüren-Fuß) --- */ .claimbar{background:linear-gradient(90deg,var(--gold-tief),var(--gold) 45%,var(--gold-tief));color:#000} .claimbar__in{ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:1rem clamp(1.5rem,4vw,3rem); padding-block:1.15rem; } .claimbar__chip{ display:inline-flex;align-items:center;gap:.65rem; font-family:Archivo,sans-serif;font-weight:800;text-transform:uppercase; font-size:clamp(.74rem,.7rem + .2vw,.9rem);letter-spacing:.04em; } /* --- Artikel/Ratgeber --- */ .artikel{max-width:70ch;margin-inline:auto} /* Auf den Leistungsseiten steht der Fließtext unter einer linksbündigen Sektionsüberschrift – zentriert säße er gegen sie versetzt. */ .artikel--links{margin-inline:0} .artikel small{font-size:.85rem;color:var(--grau-tief)} .hell .artikel small{color:var(--hell-text-2)} /* Ohne das klebt auf Impressum/Datenschutz der erste Absatz an der H1. Zum .lead der Ratgeber-Beiträge fällt der Abstand zusammen – bleibt 1,4rem. */ .artikel h1{margin:0 0 1.4rem} .artikel h2{margin:2.8rem 0 1rem} .artikel h3{margin:2rem 0 .8rem} .artikel p{margin:0 0 1.1rem;color:var(--grau)} /* .artikel p ist spezifischer als .lead – Abstand unter der H1 sonst weg */ .artikel .lead{margin:1.4rem 0 0} /* line-height gegen die globalen .98: Zwischenüberschriften brechen auf schmalen Schirmen um, dann stoßen Umlautpunkte in die Zeile darüber. */ .artikel h3{font-size:1.02rem;line-height:1.3;letter-spacing:.04em;color:var(--gold)} .artikel ol{margin:0 0 1.4rem;padding-left:1.4rem;color:var(--grau)} .artikel ol li,.artikel ul li{margin-bottom:.6rem} .artikel ol li::marker{color:var(--gold);font-weight:700} .artikel ul li::marker{color:var(--gold-tief)} .artikel__bild{margin:2.2rem 0 2.6rem} .artikel__bild img{width:100%;height:auto;display:block;border:1px solid var(--rahmen)} .hell .artikel__bild img{border-color:var(--hell-rahmen)} /* Zitat im Artikel – der eine Serif-Akzent je Beitrag */ .azitat{ margin:2.4rem 0;padding:.2rem 0 .2rem 1.4rem; border-left:2px solid var(--gold); } .azitat p{ margin:0;font-size:clamp(1.1rem,1rem + .5vw,1.35rem); line-height:1.45;text-wrap:balance; } /* Tabelle im Artikel – auf schmalen Schirmen für sich scrollbar */ .atab{margin:0 0 1.8rem;overflow-x:auto;border:1px solid var(--rahmen)} .atab table{border-collapse:collapse;width:100%;min-width:34rem;font-size:.94rem} .atab th,.atab td{padding:.7rem .9rem;text-align:left;border-bottom:1px solid var(--rahmen)} .atab th{ font-family:Archivo,sans-serif;font-weight:800;text-transform:uppercase; font-size:.74rem;letter-spacing:.08em;color:var(--gold); background:var(--panel);white-space:nowrap; } .atab td{color:var(--grau);vertical-align:top} .atab td:first-child{color:var(--weiss)} .atab tbody tr:last-child td{border-bottom:0} .hell .atab{border-color:var(--hell-rahmen)} .hell .atab th,.hell .atab td{border-bottom-color:var(--hell-rahmen)} .hell .atab th{background:rgba(16,18,21,.05);color:var(--hell-text)} .hell .atab td{color:var(--hell-text-2)} .hell .atab td:first-child{color:var(--hell-text)} .artikel ul{margin:0 0 1.4rem;padding-left:1.1rem;color:var(--grau)} .artikel li{margin-bottom:.5rem} .artikel strong,.artikel b{color:var(--weiss)} /* Links im Fließtext waren bisher unsichtbar – in den Ratgeber-Beiträgen und auf den Ortsseiten stehen die internen Verweise genau hier. */ .artikel a{ color:var(--gold);text-decoration:underline; text-decoration-thickness:1px;text-underline-offset:3px; transition:color .25s; } .artikel a:hover{color:var(--gold-tief)} .hell .artikel a{color:#8a6d16} .hell .artikel a:hover{color:var(--hell-text)} .hell .artikel p,.hell .artikel ul{color:var(--hell-text-2)} .hell .artikel strong{color:var(--hell-text)} /* --- FAQ --- */ .faq{border-top:1px solid var(--rahmen)} .faq__p{border-bottom:1px solid var(--rahmen)} .faq__f{ width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.2rem; padding:1.4rem 0;text-align:left; font-family:Archivo,sans-serif;font-weight:800;text-transform:uppercase; font-size:1rem;letter-spacing:.01em; } .faq__f .ic{color:var(--gold);transition:transform .35s} .faq__p.is-auf .faq__f .ic{transform:rotate(90deg)} .faq__a{overflow:hidden;height:0;transition:height .4s var(--uebergang)} .faq__a p{margin:0 0 1.4rem;color:var(--grau);max-width:70ch;font-size:.95rem} .hell .faq,.hell .faq__p{border-color:var(--hell-rahmen)} .hell .faq__a p{color:var(--hell-text-2)} /* --- Kontakt --- */ .kgrid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2rem,5vw,4rem);align-items:start} .kdaten{display:flex;flex-direction:column;gap:1.3rem} .kdaten__z{display:flex;gap:1rem;align-items:flex-start} .kdaten__z .ic{color:var(--gold);margin-top:.25rem} .kdaten__z b{display:block;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase; color:var(--grau);margin-bottom:.3rem;font-weight:600} .kdaten__z a,.kdaten__z address{font-style:normal;font-size:1.05rem;font-weight:500} .kdaten__z a:hover{color:var(--gold)} .sec__zwisch{margin:2.4rem 0 1.1rem;opacity:.9} /* Honigtopf-Feld des Anfrage-Formulars. Bewusst NICHT display:none – das erkennen Bots und lassen das Feld dann leer. Stattdessen aus dem Bild geschoben und aus der Tabreihenfolge genommen. */ .hnpt{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .karte{border-radius:14px;overflow:hidden;border:1px solid var(--rahmen);aspect-ratio:16/10;margin-top:1rem} .karte iframe{width:100%;height:100%;border:0;filter:grayscale(1) invert(.92) contrast(.86)} /* Vorschaltbild der Zwei-Klick-Karte: solange es steht, ist noch keine Verbindung zu Google aufgebaut. site.js ersetzt es beim Klick durchs iframe. */ .karte__vor{display:flex;flex-direction:column;align-items:center;justify-content:center; gap:.55rem;height:100%;padding:1.4rem;text-align:center; background:linear-gradient(160deg,rgba(247,216,115,.07),rgba(255,255,255,.02))} .karte__ic{color:var(--gold)} .karte__t{margin:0;font-weight:700} .karte__p{margin:0;max-width:38ch;font-size:.82rem;color:var(--grau)} .karte__p a{color:var(--gold);text-decoration:underline} .karte__vor .btn{margin-top:.35rem} .karte__route{display:inline-flex;align-items:center;gap:.3rem;font-size:.8rem;color:var(--grau)} .karte__route:hover{color:var(--gold)} /* ---------------------------------------------------- Scroll-Bühne Die Sektion bleibt mittig stehen, während der Inhalt Schritt für Schritt erscheint. Umgesetzt mit position:sticky statt einer Animations-Library: nativ, ruckelfrei und ohne zusätzliche Ladelast. Achtung: ein Vorfahre mit overflow-x:hidden würde sticky aushebeln – deshalb steht im Projekt überall overflow-x:clip. */ .buehne{position:relative} .buehne__spur{position:relative} /* Zentriert über min-height + flex statt über transform:translateY(-50%). Ein transform auf dem sticky-Element lässt Chrome beim Scrollen Textteile fehlerhaft neu zeichnen (abgeschnittene Wörter). */ .buehne__fest{ position:sticky; top:0; min-height:100svh; display:flex; align-items:center; } .buehne__fest > .wrap{width:100%} /* Beim Ziehen über die stillstehende Sektion würde sonst ungewollt Text markiert – das sah im Betrieb wie ein Darstellungsfehler aus. */ .buehne.is-aktiv .buehne__fest{user-select:none;-webkit-user-select:none} /* Ohne JS (oder bei reduzierter Bewegung) bleibt alles sichtbar und die Sektion verhält sich wie eine normale, kurze Sektion. */ .buehne:not(.is-aktiv) .buehne__spur{height:auto!important} .buehne:not(.is-aktiv) .buehne__fest{position:static;min-height:0;display:block} /* Schritte der horizontalen Bühne. Opacity/Verschiebung setzt das JS direkt aus dem Scroll-Fortschritt – bewusst OHNE CSS-Transition: eine Transition auf einem Wert, der sich ohnehin mit jedem Scroll-Frame ändert, läuft hinterher und wirkt wie Springen. Das Abdunkeln gilt nur in einer aktiven Bühne, weil die Ablauf-Kacheln auch ohne Bühne verwendet werden (Empfehlungsprogramm). */ .buehne.is-aktiv .ablauf__s{will-change:opacity,transform} .buehne.is-aktiv .ablauf__s::before{ color:transparent; -webkit-text-stroke-color:var(--rahmen-stark); } /* Ziffer wird golden, sobald der Strahl den Schritt erreicht hat */ .buehne.is-aktiv .ablauf__s.is-an::before{ color:var(--gold); -webkit-text-stroke-color:transparent; } /* Stationen der senkrechten Bühne */ .zeit__zeile{ display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2rem,6vw,5rem);align-items:start; } .zeit__zeile .sec__kopf{margin-bottom:0;position:sticky;top:0} /* Im gepinnten Zustand dichter setzen, damit die Bühne auch auf Laptop-Bildschirmen in den Viewport passt und der Effekt greift. Opacity/Verschiebung kommen wie beim Ablauf direkt aus dem Scroll. */ .buehne.is-aktiv .zeit__p{padding-bottom:1.5rem;will-change:opacity,transform} .buehne.is-aktiv .zeit__p:last-child{padding-bottom:0} .buehne.is-aktiv .zeit__j{margin-bottom:.55rem} .buehne.is-aktiv .zeit__t{margin-bottom:.4rem} .buehne.is-aktiv .buehne__fest{padding-block:1.5rem} /* Waagerechte Linie über den vier Schritten */ .ablauf{position:relative;padding-top:1.6rem} .ablauf::before{ content:"";position:absolute;top:0;left:0;right:0;height:1px; background:rgba(255,255,255,.1); } /* Länge folgt dem Scroll direkt – keine Transition, sonst läuft der Strahl dem Finger hinterher und wirkt sprunghaft. */ .ablauf::after{ content:"";position:absolute;top:0;left:0;height:1px; /* mind. ein kurzes Stück, damit die Linie am Anfang schon anliegt */ width:max(3%, calc(100% * var(--fortschritt,1))); background:linear-gradient(90deg,var(--gold-tief),var(--gold)); box-shadow:0 0 12px rgba(247,216,115,.5); } @media (prefers-reduced-motion:reduce){ .ablauf__s{opacity:1} .ablauf::after,.zeit::after{width:100%;height:100%} } /* --- Scroll-Reveal (dezent, per JS ausgelöst) --- */ /* Nur verstecken, wenn das JS auch wirklich läuft: site.js hängt an `defer`, das Stylesheet blockiert dagegen den ersten Paint. Ohne die .js-Bedingung stünde die Seite zwischen erstem Paint und Skriptstart komplett leer da – und bliebe es, falls das Skript gar nicht lädt. Dauer kurz halten: Bei .8s stand beim Scrollen sichtbar ein leerer Kasten, bevor der Inhalt kam. Der Effekt soll den Aufbau begleiten, nicht bremsen. */ .js .rev{opacity:0;transform:translateY(12px)} .js .rev.is-da{opacity:1;transform:none;transition:opacity .28s var(--uebergang),transform .28s var(--uebergang)} @media (prefers-reduced-motion:reduce){.js .rev{opacity:1;transform:none}} /* --- Fuß --- */ .fuss{background:#050505;border-top:1px solid var(--rahmen);padding-top:clamp(3rem,6vw,4.5rem)} .fuss__in{ display:grid;grid-template-columns:1.6fr repeat(3,1fr) 1.2fr; gap:clamp(1.8rem,4vw,3rem);padding-bottom:3rem; } .fuss__marke .logo{margin-bottom:1.2rem} .fuss__text{font-size:.9rem;color:var(--grau);max-width:34ch;margin:0 0 1.4rem} .fuss__tel,.fuss__mail{display:flex;align-items:center;gap:.6rem;font-size:.95rem;font-weight:500;margin-bottom:.6rem} .fuss__tel .ic,.fuss__mail .ic{color:var(--gold)} .fuss__tel:hover,.fuss__mail:hover{color:var(--gold)} .fuss__sp h3{font-size:.72rem;letter-spacing:.2em;color:var(--gold);margin-bottom:1.1rem} /* Social-Icons */ .sozial{display:flex;gap:.6rem;align-items:center} .sozial a{ width:40px;height:40px;border-radius:50%; display:grid;place-items:center; border:1px solid var(--rahmen);color:var(--grau); transition:color .3s,border-color .3s,background .3s,transform .3s; } .sozial a:hover{color:#000;background:var(--gold);border-color:var(--gold);transform:translateY(-2px)} .sozial--fuss{margin-top:1.2rem} .sozial--gross a{width:46px;height:46px} .hell .sozial a{border-color:var(--hell-rahmen);color:var(--hell-text-2)} .hell .sozial a:hover{background:#8a6d16;border-color:#8a6d16;color:#fff} /* Öffnungszeiten – waagerechtes Band im Fuß */ .ozband{ display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem clamp(1.5rem,4vw,3rem); padding-block:1.6rem; border-top:1px solid rgba(255,255,255,.07); } .ozband__label{ display:inline-flex;align-items:center;gap:.6rem;margin:0; font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold); white-space:nowrap; } .ozband__reihe{ display:flex;flex-wrap:wrap;gap:.6rem; margin-left:auto; } .ozband__k{ display:flex;flex-direction:column;gap:.15rem; padding:.65rem 1.1rem;min-width:132px; border:1px solid var(--rahmen);border-radius:10px; background:rgba(255,255,255,.02); transition:border-color .3s,background .3s; } .ozband__k:hover{border-color:var(--rahmen-stark);background:rgba(247,216,115,.05)} .ozband__t{ font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grau-tief); } .ozband__z{ font-family:Archivo,sans-serif;font-weight:800;font-size:1rem; letter-spacing:.01em;color:var(--weiss);white-space:nowrap; } .fuss__route{ display:inline-flex;align-items:center;gap:.5rem;margin-top:1rem; font-size:.88rem;font-weight:500;color:var(--gold); } .fuss__route:hover{text-decoration:underline;text-underline-offset:4px} /* Öffnungszeiten – Liste (Kontaktseite) */ .ozeiten{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem} .ozeiten__z{ display:flex;align-items:baseline;justify-content:space-between;gap:1rem; font-size:.86rem;color:var(--grau); } .ozeiten__z b{color:var(--weiss);font-weight:500;white-space:nowrap} .ozeiten--gross{margin-bottom:0;max-width:320px} .ozeiten--gross .ozeiten__z{ font-size:.95rem;padding-bottom:.4rem;border-bottom:1px solid rgba(255,255,255,.07); } .ozeiten--gross .ozeiten__z:last-child{border-bottom:0} .fuss__sp ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem} .fuss__sp a{font-size:.9rem;color:var(--grau)} .fuss__sp a:hover{color:var(--weiss)} .fuss__sp address{font-style:normal;font-size:.9rem;color:var(--grau);line-height:1.7} .fuss__klein{font-size:.78rem;color:var(--grau-tief);margin:1rem 0 0;line-height:1.7} .fuss__zeile{ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem; padding-block:1.5rem;border-top:1px solid rgba(255,255,255,.07); } .fuss__zeile p{margin:0;font-size:.84rem;color:var(--grau-tief)} .fuss__zeile nav{display:flex;gap:1.5rem} .fuss__zeile a{font-size:.84rem;color:var(--grau-tief)} .fuss__zeile a:hover{color:var(--gold)} /* ============================================================ Mobil-Pass Eigener Durchgang – nicht nur geschrumpft: verdichten, ausblenden, umsortieren. */ @media (max-width:1080px){ .nav,.kopf__tat{display:none} .burger{display:block} .fuss__in{grid-template-columns:1fr 1fr} .fuss__marke{grid-column:1/-1} .station__zeile{grid-template-columns:1fr} /* Nur die quadratischen Produktfotos (EnergyStation) ins Querformat zwingen. Diese Regel traf bisher JEDES .station__bild – auch das hochkantige Geschäftsführer-Porträt. Ein 16:11-Querformat über ein 4:5-Hochformat gelegt schneidet automatisch oben und unten ab; bei zwei nebeneinander stehenden Personen genau den Bereich mit Schultern und Hemd-Logo. Das Porträt behält deshalb sein reguläres, in .station__bild deklariertes Seitenverhältnis. */ .station__bild--quadrat{aspect-ratio:16/11;max-height:420px} .hero__zeile{grid-template-columns:1fr} .hero__txt{max-width:none} .kgrid{grid-template-columns:1fr} } @media (max-width:860px){ .zeit__zeile{grid-template-columns:1fr} .zeit__zeile .sec__kopf{position:static;margin-bottom:2.5rem} .vgrid--3{grid-template-columns:1fr 1fr} .trust__in{grid-template-columns:1fr 1fr} .ablauf{grid-template-columns:1fr 1fr;gap:2rem 1.4rem} .ablauf__s::after{display:none} .vliste{grid-template-columns:1fr} .zwei{grid-template-columns:1fr;gap:2.5rem} .station__var{grid-template-columns:1fr} .tk{flex:0 0 78%} /* Zu dritt wird es hier zu schmal: zwei je Reihe, die fünfte mittig. */ .lgrid{grid-template-columns:repeat(4,1fr)} .lgrid > :nth-child(4){grid-column:span 2} .lgrid > :nth-child(5){grid-column:2 / span 2} } @media (max-width:600px){ :root{--sec:clamp(3.2rem,11vw,4.5rem)} .h1{font-size:clamp(2.3rem,1.4rem + 6.5vw,3.4rem);line-height:1.02} /* Sieben Striche plus Pfeile passen bei 390 px sonst nicht in die Zeile */ .tslide__pkt{width:18px} .tslide__pkt.is-on{width:30px} /* Kopfhöhe muss drin bleiben – der Hero liegt darunter, sonst rutscht das Label unter das Logo. */ .hero{min-height:auto;padding-block:calc(var(--kopf-h) + 1.8rem) 3rem} .hero__marker{gap:.9rem 1.6rem;padding-top:1.4rem} .hero__marker span{font-size:.82rem} .scroll{display:none} /* auf klein sinnlos */ .hero__karte{padding:1.2rem} .vgrid--3,.vgrid--2{grid-template-columns:1fr} /* Einspaltig – die span-Regeln müssen weg, sonst entsteht eine zweite Spalte. */ .lgrid{grid-template-columns:1fr} .lgrid > *,.lgrid > :nth-child(4),.lgrid > :nth-child(5){grid-column:auto} .trust__in{grid-template-columns:1fr} .trust__z{padding:1.3rem var(--pad);flex-direction:row;align-items:baseline;gap:.9rem} .trust__w{font-size:1.5rem} .ablauf{grid-template-columns:1fr} .qopts{grid-template-columns:1fr} .qfelder{grid-template-columns:1fr} .quiz__nav{flex-direction:column-reverse;align-items:stretch;gap:.7rem} .quiz__gewaehlt{text-align:left} .tk{flex:0 0 86%} .tslide__steuer{justify-content:space-between} .claimbar__in{flex-direction:column;align-items:flex-start;gap:.7rem;padding-block:1.3rem} .cta__in{flex-direction:column;align-items:flex-start} .cta__tat{width:100%;flex-direction:column} .cta__tat .btn{width:100%} .fuss__in{grid-template-columns:1fr;gap:2.2rem} .fuss__zeile{flex-direction:column;align-items:flex-start} .siegel{width:92px;height:92px} .station__siegel{right:.8rem;bottom:.8rem} /* Öffnungszeiten stapeln statt zerreißen */ .ozeiten__z{flex-direction:column;gap:.1rem} .ozeiten--gross{max-width:none} .ozband{flex-direction:column;align-items:stretch;gap:.9rem} .ozband__reihe{margin-left:0;display:grid;grid-template-columns:1fr} .ozband__k{ flex-direction:row;align-items:baseline;justify-content:space-between; gap:.8rem;min-width:0;padding:.7rem 1rem; } /* Puffer, solange die Hausschrift noch lädt und der Fallback breiter baut */ .ozband__z{font-size:.95rem} } /* Sehr schmal: Wortmarke kleiner stellen */ @media (max-width:380px){ .logo__bild{width:9.6rem} /* nur die Variable setzen – der negative Rand oben rechnet dann selbst mit */ .logo__claim{font-size:.5rem;--claim-sperr:.2em} } /* Druck */ @media print{ .kopf,.mnav,.scroll,.claimbar,.quiz,.marken__band{display:none} body{background:#fff;color:#000} } /* ---------------------------------------------------- Ehemalige Inline-Styles Bis 09/2026 standen diese Werte als style="…" im HTML – im Schnitt fünfmal je Seite, 195-mal insgesamt. seobility zählt Inline-CSS als Befund; als Klassen sind sie außerdem an einer Stelle pflegbar. Namen nach BEM-Modifier-Muster. */ .lead--mitte{margin-inline:auto} .lead--abstand{margin-top:1rem} .klein--abstand{margin:.7rem 0 0} .funnel__box{max-width:760px;margin-inline:auto} /* Erste Sektion einer Unterseite ohne Hero: Luft unter dem festen Kopf. */ .sec--erst{padding-top:clamp(6rem,12vw,9rem)} .hinweis--abstand,.label--abstand{margin-top:clamp(2rem,4vw,3rem)} .hero__tat--abstand{margin-top:3rem} .vliste--einspaltig{grid-template-columns:1fr;margin-top:1.5rem} .hero--mittel{min-height:min(80svh,760px)} .hero__zeile--mitte{align-items:center} .station__var--buendig{margin-top:0} /* Startwert des Fortschrittsbalkens im Anfrage-Formular: Schritt 1 von 4. site.js setzt den Wert danach je Schritt neu; nur der Ausgangszustand liegt hier, damit das HTML keinen style="width:…" mehr braucht. Ändert sich die Zahl der Quiz-Schritte in common.QUIZ_SCHRITTE, hier mitziehen. */ .quiz__bar span{width:25%}