/* ============================================================================ style-v3.css — Referenz-Umsetzung, betriebsunabhängig Erstellt 07.08.2026 aus dem Testbau „Wurzelwerk", statisch nachgebaut. ANWENDUNG PRO BETRIEB: Diese Datei kopieren und AUSSCHLIESSLICH den :root-Block ändern. Darunter steht nichts Betriebsspezifisches mehr. Kein Framework, kein Build-Schritt, kein CDN. Reines CSS. Schriften werden selbst gehostet — @font-face-Block unten anpassen. BETRIEB: Garten- und Landschaftsbau Klotz GmbH (05-klotz), 13.08.2026. Geändert wurde ausschließlich der :root-Block. ============================================================================ */ /* --------------------------------------------------------------------------- SCHRIFTEN — Dateien liegen in fonts/, Namen an das Schriftsystem anpassen --------------------------------------------------------------------------- */ /* Die Dateien werden bewusst NEUTRAL benannt: display.ttf, display-italic.ttf, body.ttf. So bleibt dieser Block bei jedem Schriftsystem gleich — nur die Dateien im fonts/-Ordner werden getauscht. Google Fonts liefert Namen wie `Fraunces[SOFT,WONK,opsz,wght].ttf`; die eckigen Klammern machen in CSS-URLs Ärger. Deshalb: nach dem Download umbenennen. */ @font-face{ font-family:'Display'; src:url('fonts/display.woff2') format('woff2'),url('fonts/display.ttf') format('truetype'); font-weight:300 700;font-style:normal;font-display:swap;font-optical-sizing:auto; } @font-face{ font-family:'Display'; src:url('fonts/display-italic.woff2') format('woff2'),url('fonts/display-italic.ttf') format('truetype'); font-weight:300 700;font-style:italic;font-display:swap;font-optical-sizing:auto; } @font-face{ font-family:'Body'; src:url('fonts/body.woff2') format('woff2'),url('fonts/body.ttf') format('truetype'); font-weight:100 900;font-style:normal;font-display:swap;font-optical-sizing:auto; } /* --------------------------------------------------------------------------- :root — DIE EINZIGE STELLE, DIE PRO BETRIEB GEÄNDERT WIRD --------------------------------------------------------------------------- */ :root{ /* Akzent — kommt fertig berechnet aus dem Briefing, nie selbst ableiten */ --primary:#55741A; --primary-dark:#3F5613; --on-primary:#F9F6EF; /* Akzent für TEXT auf Papier. Muss gegen --paper ≥ 4,5:1 stehen. Bei hellen Akzenten hier --primary-dark eintragen, sonst reißt der Kontrast: ein Grün mit 4,59:1 gegen Weiß liegt gegen --paper nur noch bei ~4,4:1. */ --primary-text:#55741A; /* Gegenton — hier BLAU statt erdig: belegte Firmenfarbe aus dem Logo */ --accent:#1A5090; /* Papierton — nach Palettentabelle unten. NIE reines Weiß als Grundfläche */ --paper:#FAF7F0; --paper-alt:#F1EBDD; --card:#ffffff; --ink:#1c231f; --muted:#6A6D69; /* Anthrazit als Bandfarbe — dieselbe Grauachse wie --muted (Farbton 105°), eine Stufe tiefer. Klotz nennt Anthrazit als dritte Firmenfarbe. */ --surface-dark:#383937; /* Logo-Grün unverändert. Gegen Papier nur 1,84:1 und dort unbrauchbar, gegen --surface-dark aber 6,41:1 — auf dem dunklen Band einsetzbar. */ --logo-green:#A5CD3A; /* Sternegold. Keine Firmenfarbe, sondern die erwartete Konvention für eine Bewertung — ein grüner oder blauer Stern liest sich nicht als Note. Nur als Symbolfläche, nie als Textfarbe. */ --star:#E8A400; --line:#e2dac7; --line-strong:#cfc3a9; --font-display:'Display','Helvetica Neue',Arial,sans-serif; --font-body:'Body',system-ui,-apple-system,'Segoe UI',sans-serif; --head-track:-.025em; --head-weight:700; /* Ab hier nur noch anfassen, wenn es einen benannten Grund gibt */ --wrap:1152px; --r-lg:16px; --r-md:12px; --r-pill:999px; --s-1:8px; --s-2:12px; --s-3:16px; --s-4:24px; --s-5:32px; --s-6:48px; --s-7:64px; --s-8:96px; --s-9:112px; } /* PALETTENTABELLE — Papierton und Gegenton nach Akzentfamilie --------------------------------------------------------------------------- Grün --paper #faf7f0 --paper-alt #f1ebdd --accent #9c4a1c Blaugrün --paper #f7f6f2 --paper-alt #e9e9e2 --accent #8a5a20 Rot/Orange --paper #f9f7f2 --paper-alt #efeade --accent #4a5a32 Anthrazit --paper #f8f7f4 --paper-alt #ecebe5 --accent #8a4a28 Kontraste einmal geprüft, alle Textpaarungen über 4,5:1. --------------------------------------------------------------------------- */ /* ============================================================================ AB HIER BETRIEBSUNABHÄNGIG — nicht pro Betrieb ändern ============================================================================ */ *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;} body{ margin:0;background:var(--paper);color:var(--ink); font-family:var(--font-body);font-size:17px;line-height:1.65; -webkit-font-smoothing:antialiased;overflow-x:hidden; } img{max-width:100%;display:block;} a{color:inherit;} ul{margin:0;padding:0;list-style:none;} p{margin:0;} h1,h2,h3{font-family:var(--font-display);font-optical-sizing:auto;margin:0; font-weight:var(--head-weight);letter-spacing:var(--head-track);} :focus-visible{outline:2.5px solid var(--primary);outline-offset:3px;border-radius:4px;} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--s-4);} @media(min-width:1024px){.wrap{padding:0 var(--s-5);}} section{padding:var(--s-8) 0;} @media(min-width:1024px){section{padding:var(--s-9) 0;}} .alt{background:var(--paper-alt);} /* --- Mikro-Label: stärkstes Signal für gestaltet statt zusammengeklickt ---- */ .kicker{display:block;font-size:12px;font-weight:600;letter-spacing:.2em; text-transform:uppercase;color:var(--primary-text);} h2{margin-top:var(--s-2);max-width:36rem; font-size:clamp(1.875rem,3.2vw,2.25rem);line-height:1.15;} .lead{margin-top:var(--s-3);max-width:34rem;font-size:16px; line-height:1.625;color:var(--muted);} /* --- Buttons: vollrund, nie 4px ------------------------------------------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; border-radius:var(--r-pill);padding:14px var(--s-4); font-size:15px;font-weight:600;text-decoration:none;cursor:pointer; border:1px solid transparent;font-family:inherit; transition:background-color .2s,border-color .2s;} .btn-primary{background:var(--primary);color:var(--on-primary);} .btn-primary:hover{background:var(--primary-dark);} .btn-ghost{background:var(--card);color:var(--ink);border-color:var(--line-strong);} .btn-ghost:hover{background:var(--paper-alt);} .ico{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.75; stroke-linecap:round;stroke-linejoin:round;} /* --- Vorschau-Banner ------------------------------------------------------ */ .preview{background:var(--primary-dark);color:var(--on-primary); font-size:13px;line-height:1.5;padding:10px 0;text-align:center;} .preview a{color:#fff;} /* --- Header --------------------------------------------------------------- */ header{position:sticky;top:0;z-index:50; background:color-mix(in srgb,var(--paper) 90%,transparent); backdrop-filter:blur(10px);border-bottom:1px solid var(--line);} .hdr{display:flex;align-items:center;justify-content:space-between; padding:var(--s-3) var(--s-4);max-width:var(--wrap);margin:0 auto;} @media(min-width:1024px){.hdr{padding:var(--s-3) var(--s-5);}} .mark{font-family:var(--font-display);font-weight:600;line-height:1; text-decoration:none;color:var(--primary-dark);letter-spacing:-.02em;} .mark b{display:block;font-size:19px;letter-spacing:.06em;} .mark span{display:block;font-family:var(--font-body);font-size:10.5px; font-weight:600;letter-spacing:.28em;color:var(--muted); text-transform:uppercase;margin-top:2px;} .nav{display:none;gap:var(--s-5);} .nav a{font-size:15px;font-weight:500;text-decoration:none; color:color-mix(in srgb,var(--ink) 80%,transparent);} .nav a:hover,.nav a.on{color:var(--primary);} .hdr-right{display:none;align-items:center;gap:20px;} .hdr-tel{display:inline-flex;align-items:center;gap:8px;font-size:15px; font-weight:500;text-decoration:none; color:color-mix(in srgb,var(--ink) 80%,transparent);} .hdr-tel:hover{color:var(--primary);} .hdr .btn{padding:10px 20px;font-size:14px;} @media(min-width:900px){.nav{display:flex;}.hdr-right{display:flex;}} /* --- Hero: Standbild, kein Karussell -------------------------------------- */ .hero{position:relative;overflow:hidden;background:var(--paper-alt); border-bottom:1px solid var(--line);padding:0;} .topo{position:absolute;inset:0;width:100%;height:100%; color:var(--primary);opacity:.14;pointer-events:none;} /* Doppelte Absicherung: offene Kurven werden beim Füllen implizit geschlossen und ergeben eine schwarze Fläche. Das fill="none"-Attribut allein reicht nicht, wenn das Stylesheet fehlt oder überschrieben wird. */ .topo path{fill:none !important;stroke:currentColor;} .hero-fade{position:absolute;left:0;right:0;bottom:0;height:160px; background:linear-gradient(to top,var(--paper-alt),transparent); pointer-events:none;} .hero-inner{position:relative;max-width:var(--wrap);margin:0 auto; padding:var(--s-7) var(--s-4) 80px;} @media(min-width:1024px){.hero-inner{padding:var(--s-8) var(--s-5) var(--s-9);}} .badge{display:inline-flex;align-items:center;gap:8px; border-radius:var(--r-pill);border:1px solid var(--line-strong); background:var(--paper);padding:6px var(--s-3); font-size:12px;font-weight:600;letter-spacing:.06em; text-transform:uppercase;color:var(--primary-dark);} .hero h1{margin-top:28px;max-width:20ch; font-size:clamp(2.5rem,6vw,3.75rem);line-height:1.08;} .hero h1 em{font-style:italic;color:var(--primary);} .hero .sub{margin-top:var(--s-4);max-width:34rem;font-size:18px; line-height:1.65;color:var(--muted);} .hero-btns{margin-top:36px;display:flex;flex-wrap:wrap;gap:var(--s-3);} /* --- Hero-Variante mit Bildern: geteilt, Text links, Fotos rechts ---------- Kein Karussell, kein Text über dem Foto. Die Typografie bleibt dominant, die Arbeit ist trotzdem im ersten Bildschirm zu sehen. Quellbilder sollten quadratisch oder hochformatig sein — Querformate wirken in der schmalen Spalte gestaucht. */ .hero--split .hero-top{display:grid;grid-template-columns:1fr; gap:var(--s-6);align-items:center;} @media(min-width:1024px){ .hero--split .hero-top{grid-template-columns:1fr 1fr;gap:var(--s-7);} .hero--split h1{max-width:14ch;} .hero--split .sub{max-width:30rem;} } .hero-media{position:relative;} .hero-media .shot{overflow:hidden;border-radius:var(--r-lg); border:1px solid var(--line-strong);background:var(--card); box-shadow:0 1px 0 rgba(0,0,0,.03);} .hero-media .shot img{width:100%;height:100%;object-fit:cover; filter:saturate(.94) contrast(1.03);} .hero-media .shot--main{aspect-ratio:4/5;} @media(min-width:640px){.hero-media .shot--main{aspect-ratio:1/1;}} /* zweites, kleineres Bild versetzt darüber — erzeugt Tiefe ohne Schatten */ .hero-media .shot--inset{position:absolute;right:-8px;bottom:-28px; width:44%;aspect-ratio:4/3;display:none;} @media(min-width:640px){.hero-media .shot--inset{display:block;}} @media(min-width:1024px){.hero-media .shot--inset{right:-24px;bottom:-36px;width:48%;}} /* Bei Split-Hero rückt die Kennzahlenleiste weiter nach unten, damit das versetzte Bild nicht kollidiert */ .hero--split .stats{margin-top:var(--s-8);} @media(min-width:640px){.hero--split .stats{margin-top:100px;}} /* --- Kennzahlenleiste ------------------------------------------------------ Werte kurz halten (2–4 Zeichen). Lange Werte brechen die optische Achse. */ .stats{margin-top:var(--s-7);display:grid;grid-template-columns:repeat(2,1fr); gap:var(--s-6) var(--s-5);border-top:1px solid var(--line-strong); padding-top:40px;margin-bottom:0;} @media(min-width:640px){.stats{grid-template-columns:repeat(4,1fr);}} .stats>div{position:relative;} @media(min-width:640px){ .stats>div+div::before{content:"";position:absolute;left:calc(var(--s-5) / -2); top:4px;bottom:4px;width:1px;background:var(--line);} } .stats dd{margin:0;} .stats .val{font-family:var(--font-display); font-size:clamp(2rem,3.4vw,2.5rem);font-weight:600;line-height:1; letter-spacing:-.02em;color:var(--primary-dark); font-variant-numeric:lining-nums tabular-nums;} .stats .lbl{margin-top:10px;font-size:13.5px;line-height:1.35; color:var(--muted);max-width:16ch;} /* Weniger als vier Kennzahlen — besser als eine schwache mitzuschleppen */ .stats--3{grid-template-columns:repeat(2,1fr);} .stats--2{grid-template-columns:repeat(2,1fr);} @media(min-width:640px){ .stats--3{grid-template-columns:repeat(3,1fr);} .stats--2{grid-template-columns:repeat(2,1fr);max-width:32rem;} } /* Offene Kennzahl — sichtbare Leerstelle statt erfundener Zahl. Liest sich als Ausfüllfeld und ist ein Rückkanal: Der Inhaber sieht, dass genau eine Angabe von ihm fehlt. */ .stat--offen .val{color:var(--muted);opacity:.5;display:inline-block; border-bottom:2px dashed var(--line-strong);padding-bottom:4px;} .stat--offen .lbl{font-style:italic;} /* --- Leistungskarten ------------------------------------------------------ */ .cards{margin-top:56px;display:grid;gap:var(--s-4);grid-template-columns:1fr;} @media(min-width:640px){.cards{grid-template-columns:repeat(2,1fr);}} @media(min-width:1024px){.cards{grid-template-columns:repeat(3,1fr);}} .card{height:100%;border:1px solid var(--line);border-radius:var(--r-lg); background:var(--card);padding:28px;transition:border-color .2s;} .card:hover{border-color:color-mix(in srgb,var(--primary) 30%,transparent);} .disc{display:inline-flex;align-items:center;justify-content:center; width:44px;height:44px;border-radius:var(--r-md); background:color-mix(in srgb,var(--primary) 10%,transparent); color:var(--primary-dark);} /* Symbole aus _base/_symbole.md sind Flächenzeichen, viewBox 0 0 256 256 */ .disc svg{width:22px;height:22px;fill:currentColor;} /* Auf den Leistungskarten: Scheibe groß und zentriert, Text linksbündig. Maße aus dem Livevergleich vom 03.08.2026 (sechs Varianten geprüft): 56 px Symbol in einer 88er Scheibe. Ein kleines linksbündiges Symbol verschwindet neben der Überschrift — die Scheibe macht daraus ein abgeschlossenes Objekt, dann trägt die Mittelachse. Überschrift und Fließtext bleiben linksbündig: zentrierter Fließtext ist bei mehrzeiligen Absätzen schlechter lesbar, Zielgruppe 45+. */ .card .disc{display:flex;margin:0 auto;width:88px;height:88px; border-radius:var(--r-pill);} .card .disc svg{width:56px;height:56px;} .card h3{margin-top:24px;font-size:18px;} .card p{margin-top:10px;font-size:15px;line-height:1.625;color:var(--muted);} /* Karte ohne passendes Symbol im Katalog — bewusste Variante, kein Fehler */ .card--nosym{border-left:3px solid color-mix(in srgb,var(--primary) 35%,transparent);} .card--nosym h3{margin-top:0;} /* --- Leistungsdetails: gestapelte Liste, editorial ------------------------ */ .svc-list{margin-top:56px;border-top:1px solid var(--line);} .svc{display:grid;grid-template-columns:1fr;gap:var(--s-3); padding:var(--s-5) 0;border-bottom:1px solid var(--line);} @media(min-width:768px){.svc{grid-template-columns:1fr 2fr;gap:var(--s-6);}} .svc-head{display:flex;align-items:flex-start;gap:var(--s-3);} .svc h3{font-size:20px;} .svc p{font-size:16px;line-height:1.7;color:var(--muted);} .svc p+p{margin-top:var(--s-2);} /* --- Projektkacheln ------------------------------------------------------- */ .gal{margin-top:56px;display:grid;gap:var(--s-4);grid-template-columns:1fr;} @media(min-width:640px){.gal{grid-template-columns:repeat(2,1fr);}} @media(min-width:1024px){.gal--3{grid-template-columns:repeat(3,1fr);}} .tile{overflow:hidden;border:1px solid var(--line);border-radius:var(--r-lg); background:var(--card);height:100%;} .tile figure{margin:0;height:210px;overflow:hidden;} .tile img{width:100%;height:100%;object-fit:cover; filter:saturate(.94) contrast(1.03);} .tile .cap{padding:20px var(--s-4) var(--s-4);} .tile h3{font-size:17px;} .tile p{margin-top:8px;font-size:15px;line-height:1.6;color:var(--muted);} /* --- Zitate --------------------------------------------------------------- */ .quotes{margin-top:var(--s-7);display:grid;gap:var(--s-4); grid-template-columns:1fr;border-top:1px solid var(--line);padding-top:56px;} @media(min-width:640px){.quotes{grid-template-columns:repeat(2,1fr);}} blockquote{margin:0;position:relative;padding-left:36px;} blockquote .qm{position:absolute;left:0;top:2px;width:20px;height:20px; fill:var(--primary);opacity:.45;} blockquote p{font-size:17px;line-height:1.65;font-style:italic; color:color-mix(in srgb,var(--ink) 90%,transparent);} blockquote footer{margin-top:var(--s-2);font-size:14px;color:var(--muted);} blockquote footer b{color:color-mix(in srgb,var(--ink) 80%,transparent);} /* --- Vollbreite Bildsektion ----------------------------------------------- */ .bleed{position:relative;padding:0;border-block:1px solid var(--line);} .bleed img{width:100%;height:clamp(280px,42vw,420px);object-fit:cover; filter:saturate(.94) contrast(1.03);} .bleed .line{position:absolute;inset:0;display:flex;align-items:center; background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.1));} .bleed .line p{max-width:var(--wrap);margin:0 auto;padding:0 var(--s-4); width:100%;font-family:var(--font-display);color:#fff; font-size:clamp(1.4rem,3vw,2rem);line-height:1.25; letter-spacing:var(--head-track);text-shadow:0 1px 12px rgba(0,0,0,.35);} @media(min-width:1024px){.bleed .line p{padding:0 var(--s-5);}} /* --- Kontakt -------------------------------------------------------------- */ .kontakt-grid{margin-top:56px;display:grid;gap:var(--s-6);grid-template-columns:1fr;} @media(min-width:1024px){.kontakt-grid{grid-template-columns:2fr 3fr;gap:var(--s-7);}} .info-item{display:flex;gap:var(--s-3);margin-bottom:var(--s-5);} .info-disc{flex:0 0 auto;margin-top:2px;display:flex;align-items:center; justify-content:center;width:40px;height:40px;border-radius:var(--r-pill); background:color-mix(in srgb,var(--primary) 10%,transparent); color:var(--primary-dark);} .info-item b{display:block;font-size:14px;font-weight:600;} .info-item p,.info-item a{margin-top:2px;font-size:15px;color:var(--muted); text-decoration:none;display:block;} .info-item a:hover{color:var(--primary);} .service-box{border:1px solid var(--line);border-radius:var(--r-lg); background:var(--paper-alt);padding:var(--s-4);} .service-box b{font-size:14px;font-weight:600;} .service-box p{margin-top:6px;font-size:15px;line-height:1.625;color:var(--muted);} .form-card{border:1px solid var(--line);border-radius:var(--r-lg); background:var(--card);padding:28px;} @media(min-width:640px){.form-card{padding:36px;}} .row{display:grid;gap:20px;grid-template-columns:1fr;} @media(min-width:640px){.row{grid-template-columns:1fr 1fr;}} label{display:block;margin-bottom:6px;font-size:14px;font-weight:500;} input,textarea{width:100%;border:1px solid var(--line-strong); border-radius:var(--r-md);background:var(--paper);padding:12px var(--s-3); font-size:15px;color:var(--ink);font-family:inherit; transition:border-color .2s,box-shadow .2s;} input::placeholder,textarea::placeholder{ color:color-mix(in srgb,var(--muted) 60%,transparent);} input:focus,textarea:focus{outline:none;border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 15%,transparent);} textarea{resize:none;} .field{margin-top:20px;} .form-note{margin-top:20px;font-size:12.5px;line-height:1.6;color:var(--muted);} .hp{position:absolute;left:-9999px;} /* Inline-Bestätigung nach dem Absenden. Ohne JavaScript greift stattdessen das action-Ziel danke.html — der Inhalt bleibt also auch dann erreichbar. */ .thanks .tick{display:flex;align-items:center;justify-content:center; width:44px;height:44px;border-radius:var(--r-pill); background:color-mix(in srgb,var(--primary) 12%,transparent); color:var(--primary-dark);} .thanks .tick svg{width:22px;height:22px;stroke:currentColor;fill:none; stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round;} .thanks h3{margin-top:20px;font-size:20px;} .thanks p{margin-top:10px;font-size:15px;line-height:1.65;color:var(--muted);} .thanks .again{margin-top:20px;background:none;border:0;padding:0; font-family:inherit;font-size:15px;font-weight:600;color:var(--primary-text); cursor:pointer;text-decoration:underline;} .thanks:focus{outline:none;} /* --- Footer --------------------------------------------------------------- */ footer{background:var(--paper-alt);border-top:1px solid var(--line); padding:56px 0 40px;} .foot{display:grid;gap:var(--s-5);grid-template-columns:1fr;} @media(min-width:768px){.foot{grid-template-columns:2fr 1fr 1fr;}} .foot p,.foot a{font-size:15px;color:var(--muted);text-decoration:none;} .foot a:hover{color:var(--primary);} .foot b{display:block;font-size:14px;font-weight:600;color:var(--ink); margin-bottom:10px;} .foot li{margin-bottom:6px;} .legal{margin-top:40px;padding-top:var(--s-4);border-top:1px solid var(--line); font-size:13px;color:var(--muted);} /* --- Telefonlogik: über die Eingabeart, nicht über die Breite -------------- */ .only-desk{display:none;} @media(hover:hover) and (pointer:fine){ .only-touch{display:none;} p.only-desk{display:block;} span.only-desk{display:inline;} .only-desk.hdr-tel,.only-desk.btn{display:inline-flex;} a.only-desk{display:block;} .callbar{display:none;} body{padding-bottom:0;} } /* Mobile Anrufleiste */ .callbar{position:fixed;left:0;right:0;bottom:0;z-index:60; display:flex;align-items:center;justify-content:center;gap:8px; min-height:56px;background:var(--primary);color:var(--on-primary); font-size:16px;font-weight:600;text-decoration:none;} body{padding-bottom:56px;} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *,*::before,*::after{transition-duration:.01ms !important; animation-duration:.01ms !important;} } /* ============================================================================ ERGÄNZUNG 13.08.2026 — Klotz. Bricht die Regel „nur :root ändern". Grund: zwei Bausteine, die style-v3.css nicht kennt und die ausdrücklich bestellt wurden — der Zwei-Wege-Block der Startseite und der Vorher/Nachher-Schieber (in _build-spec.md als „Geparkt" geführt). Klassennamen kurz, kleingeschrieben, inhaltsneutral. Nichts oberhalb dieser Zeile wurde angefasst. ============================================================================ */ /* --- Zwei-Wege-Block: die beiden Abteilungen als gleich große Türen -------- */ .doors{margin-top:56px;display:grid;gap:var(--s-4);grid-template-columns:1fr;} @media(min-width:768px){.doors{grid-template-columns:1fr 1fr;gap:var(--s-5);}} .door{display:block;text-decoration:none;padding:32px;} @media(min-width:768px){.door{padding:40px;}} /* Symbol linksbündig statt zentriert — eine Tür ist kein Kartenraster */ .door .disc{margin:0;width:56px;height:56px;border-radius:var(--r-md);} .door .disc svg{width:30px;height:30px;} .door h3{margin-top:20px;font-size:clamp(1.375rem,2.4vw,1.625rem);line-height:1.2;} .door .loc{display:block;margin-top:8px;font-size:12px;font-weight:600; letter-spacing:.16em;text-transform:uppercase;color:var(--primary-text);} .door p{margin-top:14px;font-size:16px;line-height:1.625;color:var(--muted);} .door .more{display:inline-flex;align-items:center;gap:8px;margin-top:20px; font-size:15px;font-weight:600;color:var(--primary-text);} .door:hover .more{color:var(--primary-dark);} /* --- Fehlerbehebung: beiger Kasten unter jedem Zitat ----------------------- style-v3.css setzt `footer{background:var(--paper-alt);padding:56px 0 40px}` als Typselektor. Das trifft auch das