/* ============================================================= Lack & Reifen Vogelsang Farbsystem Rot/Schwarz, WCAG 2.2 AA geprueft. Regel: Rot ausschliesslich fuer Handlungen und Links. Alles andere Schwarz, Anthrazit, Grau. Grund: Bagchi & Cheema (JCR 2013) - rote Flaechen senken im Festpreiskontext die Zahlungsbereitschaft. Der Effekt von Signalfarben kommt aus dem Kontrast, nicht aus dem Farbton. ============================================================= */ :root{ /* Flaechen hell - hier steht der Fliesstext */ --bg:#fbfbfa; /* Seite - naeher an Weiss */ --surface:#ffffff; /* Karten, Formulare */ --bg-tint:#efeeea; /* ruhige Abschnitte */ /* Flaechen dunkel - nur Hero, Baender, Fusszeile */ --dark:#111418; --dark-deep:#0b0d0f; --dark-surface:#1a1d21; /* Text */ --ink:#14171c; /* auf #fff 17,96:1 AAA */ --ink-2:#3f454e; /* auf #f6f6f4 8,93:1 AAA */ --ink-3:#565d66; /* auf #f6f6f4 6,15:1 AA - Untergrenze */ --on-dark:#ffffff; /* auf #14171c 17,96:1 AAA */ --on-dark-2:#c9cdd3; /* auf #14171c 11,25:1 AAA */ --on-dark-3:#a8aeb7; /* auf #14171c 8,04:1 AAA */ /* Rot - zwei Toene, weil kein Rot auf hell UND dunkel traegt */ --red:#d32d33; /* aus dem Logo. Auf #fff 5,00:1 AA */ --red-hover:#a4161a; /* 7,75:1 AAA */ --red-active:#8c1114; /* 9,52:1 AAA */ --red-dark:#d32d33; /* dasselbe Rot. Auf #111418 3,75:1, */ /* genug fuer Flaechen und Linien (3:1), */ /* nicht fuer Text - daher weisse Links */ --red-dark-hover:#e04a4f; --on-red-dark:#ffffff; /* Schrift auf #d32d33 5,00:1 AA */ /* Fokus bewusst blau - roter Ring auf rotem Button = 1,09:1 */ --focus:#0b63ce; /* auf #fff 5,69:1 AA */ --focus-dark:#7cc0ff; /* auf #14171c 9,27:1 AAA */ /* Zustaende - Fehlerrot dunkler als Markenrot, damit Rot seine Signalfunktion behaelt */ --error:#9b1b1e; /* auf #fff 8,17:1 AAA */ --border:#e3e4e0; /* nur dekorativ */ --border-2:#c9c9c3; --border-input:#6b7280; /* interaktiv, 4,83:1 */ --w:1180px; /* Weichere Formensprache. Ein Radius, an einer Stelle gepflegt - Knoepfe, Karten, Felder und Bildflaechen greifen darauf zu, damit die Seite nicht aus zwoelf verschiedenen Rundungen besteht. */ --r:14px; /* Karten, Bildflaechen */ --r-s:11px; /* Formularfelder, kleine Flaechen */ --r-pill:999px; /* Pillen */ /* Bildflaechen. Eigene Toene, weil hier kein Fliesstext steht, sondern eine Flaeche, die ein Foto vertritt. */ --zone:#171b21; /* Grundton der Flaeche */ --zone-cap:#0f1318; /* Beschriftungsbalken darunter */ --on-zone:#c9cdd3; /* auf #0f1318 11,68:1 AAA */ --on-zone-2:#8b95a2; /* auf #0f1318 6,14:1 AA */ --zone-ico:#6a7481; /* Strichsymbol, rein dekorativ, 3,64:1 */ } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--ink); font-family:"Helvetica Neue",Helvetica,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased} img{max-width:100%;display:block} a{color:var(--red)} .nap a{color:var(--red);text-decoration:underline;text-underline-offset:.15em} .on-dark a{color:#fff} .wrap{max-width:var(--w);margin:0 auto;padding:0 28px} .narrow{max-width:760px} /* ---- Sprungmarke fuer Tastaturnutzer ---- */ .skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff; padding:14px 20px;z-index:200;font-weight:700;text-decoration:none} .skip:focus{left:0} /* ---- Fokus: zweifarbiger Ring, funktioniert auf jedem Grund ---- */ :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{ outline:none;box-shadow:0 0 0 2px var(--surface),0 0 0 5px var(--focus);border-radius:3px} .on-dark :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{ box-shadow:0 0 0 2px var(--dark),0 0 0 5px var(--focus-dark)} :target{scroll-margin-top:110px} /* ---- Typografie ---- */ h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.025em;line-height:1.1; overflow-wrap:break-word} h1{font-size:clamp(34px,5.2vw,60px);letter-spacing:-.035em;line-height:1.04} h2{font-size:clamp(25px,3.3vw,38px)} h3{font-size:20px;letter-spacing:-.015em;line-height:1.25} h4{font-size:16.5px;letter-spacing:-.01em} p{margin:0 0 18px} .lede{font-size:20px;line-height:1.55;color:var(--ink-2);max-width:62ch} .on-dark .lede{color:var(--on-dark-2)} .meta{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--ink-3)} /* Die Abschnittsnummer wird gezaehlt, nicht gesetzt. Faellt ein Abschnitt aus - etwa Vorher-nachher, wenn kein Bildpaar vorliegt - zaehlt der Zaehler weiter und es entsteht keine Luecke. Vorher standen auf den Stadtteilseiten 01, 02, 04. Die Nummer ist Schmuck, deshalb traegt das Element aria-hidden. */ main{counter-reset:abschnitt} .meta .n{color:var(--ink);margin-right:12px} .shead .n::before{counter-increment:abschnitt; content:counter(abschnitt,decimal-leading-zero)} .on-dark .meta{color:var(--on-dark-3)} .on-dark .meta .n{color:var(--on-dark)} .small{font-size:14.5px;color:var(--ink-2)} .on-dark .small{color:var(--on-dark-2)} /* Textlinks immer unterstrichen - Rot allein traegt bei Rot-Gruen-Sehschwaeche keine Information */ .copybox a{color:var(--red);text-decoration:underline;text-underline-offset:.15em; text-decoration-thickness:.08em} .copybox a:hover{color:var(--red-hover)} .on-dark .copybox a{color:#fff} /* ---- Kopf ---- */ .topbar{background:var(--dark-deep);color:var(--on-dark-2);font-size:14px} .topbar .wrap{display:flex;justify-content:center;padding:11px 20px} .topstatus{display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:center} .topsep{opacity:.45} .topbar b{color:#fff} .topbar a{color:#fff;text-decoration:underline;text-underline-offset:.15em} /* Punkt startet neutral. Gruen setzt erst das Skript, wenn wirklich offen ist - ohne Skript lieber keine Aussage als eine falsche. */ /* Der Punkt sitzt auf der DUNKLEN Leiste ueber dem Kopf. Hell heisst offen, gedaempft heisst zu - andersherum waere der Offen-Zustand unsichtbar. Genau das war er eine Zeit lang: Nach dem Entfernen des Gruens stand er auf --ink, also fast Schwarz auf Schwarz, 1,08:1. */ .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#6a7481; margin-right:7px;vertical-align:baseline} /* Gefuellt heisst offen, blass heisst zu. Kein Gruen: die Seite haelt Rot, Schwarz und Weiss. Der Punkt traegt aria-hidden, die Aussage steht als Text daneben - die Farbe ist reine Zugabe. Rot scheidet aus, das bleibt den Handlungen vorbehalten. */ .dot.auf{background:#3dd68c;box-shadow:0 0 0 3px rgba(61,214,140,.22)} header{position:sticky;top:0;z-index:60;background:rgba(246,246,244,.95); backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--border-2)} .hrow{display:flex;align-items:center;gap:22px;padding:14px 0} /* Bildmarke plus Wortmarke. Die Marke kommt als Bild, die Worte bleiben Text: so bleibt die Schrift bei jeder Groesse scharf, laesst sich markieren und vorlesen, und das Bild traegt nur die Form. Das alt- Attribut ist leer, weil der Name direkt daneben steht - sonst laese ein Screenreader ihn zweimal vor. */ .logo{text-decoration:none;flex:0 0 auto;display:flex;align-items:center;gap:11px;line-height:1} .marke{height:36px;width:auto;flex:0 0 auto;display:block} .lworte{display:block;min-width:0} .logo .l1{font-size:clamp(15.5px,4.6vw,23px);font-weight:800;letter-spacing:-.035em; white-space:nowrap; display:block;color:var(--ink)} /* Das Kaufmanns-Und traegt keine Bedeutung und wird zurueckgenommen - das ist der aelteste Kniff im Wortmarken-Handwerk und laesst die beiden Woerter staerker wirken, ohne eine zweite Schrift zu laden. */ .logo .l1 .amp{font-weight:400;color:var(--ink-3);letter-spacing:0} .logo .l2{font-size:clamp(9.5px,2.8vw,11.5px);letter-spacing:.15em; text-align:center; text-transform:uppercase;color:var(--ink-3); margin-top:6px;display:block;font-weight:600} nav{margin-left:auto;display:flex;gap:24px;align-items:center} nav a{font-size:15px;text-decoration:none;color:var(--ink-2);padding:6px 0;position:relative; font-weight:500;white-space:nowrap} nav a:hover{color:var(--ink)} nav a[aria-current="page"]{color:var(--ink);font-weight:700} nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px; height:3px;background:var(--ink)} .headcall{margin-left:20px} /* Menueknopf. Wichtig ist die eigene Textfarbe: ohne sie faerbt iOS Systemknoepfe blau ein - daher sah der Knopf aus wie eine Fremdkomponente und nicht wie Teil der Marke. Dunkel gefuellt statt weiss umrandet, dazu ein Balkensymbol; im offenen Zustand ein Kreuz. */ .navtoggle{display:none;margin-left:auto;align-items:center;gap:9px; background:var(--ink);color:#fff;border:0;border-radius:13px; padding:11px 17px 11px 15px;font:inherit;font-size:14.5px;font-weight:750; letter-spacing:.01em;cursor:pointer;min-height:46px;-webkit-appearance:none; -webkit-tap-highlight-color:transparent; transition:background .18s ease,transform .12s ease} .navtoggle:hover{background:#000} .navtoggle:active{transform:scale(.97)} .navtoggle svg{width:19px;height:19px;display:block} .navtoggle .nt-auf,.navtoggle .nt-zu{display:flex} .navtoggle .nt-zu{display:none} .navtoggle[aria-expanded="true"] .nt-auf{display:none} .navtoggle[aria-expanded="true"] .nt-zu{display:flex} /* ---- Buttons: min. 48px Touch-Target (WCAG 2.5.5 / Material) ---- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none; font-weight:700;font-size:16px;padding:15px 26px;min-height:52px;border-radius:var(--r-pill); border:2px solid transparent;cursor:pointer;line-height:1.2; transition:background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .12s ease; -webkit-tap-highlight-color:transparent} .btn:active{transform:scale(.97)} /* Ein Knopf, der sich beim Zeigen leicht hebt und beim Druecken einsinkt. Nur Transform und Schatten - beides laeuft auf der Grafikkarte und ruckelt auch auf aelteren Telefonen nicht. */ .btn-primary{box-shadow:0 1px 2px rgba(20,23,28,.16)} .btn-primary:hover{box-shadow:0 6px 18px rgba(193,18,31,.30);transform:translateY(-1px)} .btn-primary:active{transform:translateY(0) scale(.97)} .btn-fest{box-shadow:0 1px 2px rgba(20,23,28,.16)} .btn-fest:hover{box-shadow:0 6px 18px rgba(20,23,28,.26);transform:translateY(-1px)} .btn-fest:active{transform:translateY(0) scale(.97)} .btn-secondary:hover{background:rgba(20,23,28,.04)} .on-dark .btn-secondary:hover{background:rgba(255,255,255,.08)} /* Der Pfeil im Knopf laeuft beim Zeigen ein Stueck mit. */ .btn .pfeil{transition:transform .2s ease} .btn:hover .pfeil{transform:translateX(3px)} /* Wer die Maus nicht benutzt, bekommt das Heben nicht - und wer Bewegung abbestellt hat, ebenfalls nicht. */ @media(hover:none){ .btn-primary:hover,.btn-fest:hover{transform:none;box-shadow:0 1px 2px rgba(20,23,28,.16)} } @media(prefers-reduced-motion:reduce){ .btn,.btn .pfeil{transition:none} .btn:hover,.btn:active{transform:none} } .btn svg{width:19px;height:19px;flex:0 0 auto} .btn-primary{background:var(--red);color:#fff;border-color:var(--red)} .btn-primary:hover{background:var(--red-hover);border-color:var(--red-hover)} .btn-primary:active{background:var(--red-active);border-color:var(--red-active)} .btn-secondary{background:transparent;color:var(--ink);border-color:var(--border-input)} .btn-secondary:hover{border-color:var(--ink)} .on-dark .btn-primary{background:var(--red-dark);color:var(--on-red-dark);border-color:var(--red-dark)} .on-dark .btn-primary:hover{background:var(--red-dark-hover);border-color:var(--red-dark-hover)} .on-dark .btn-secondary{color:#fff;border-color:rgba(255,255,255,.42)} .on-dark .btn-secondary:hover{border-color:#fff} .btn-sm{padding:11px 16px;min-height:48px;font-size:15px} .btns{display:flex;gap:12px;flex-wrap:wrap;align-items:center} .btnnote{font-size:14px;color:var(--ink-3);margin:12px 0 0} .on-dark .btnnote{color:var(--on-dark-3)} /* ---- Hero: dunkel, kurzer Text - Fliesstext bleibt hell ---- */ /* Der Hero war eine flache dunkle Flaeche. Ein weicher Verlauf gibt ihm Tiefe, ohne dass etwas blinkt oder sich bewegt. */ .hero{background:var(--dark);color:var(--on-dark);padding:64px 0 0;position:relative; background-image:radial-gradient(115% 85% at 12% 0%, #232830 0%, #14171c 62%)} /* text-wrap:balance verteilt die Zeilen gleichmaessig statt die letzte als Rest stehenzulassen; pretty verhindert einzelne Woerter am Absatzende. Beides faellt in aelteren Browsern stillschweigend auf den normalen Umbruch zurueck. */ .hero h1{max-width:15ch;margin-bottom:16px;color:#fff;text-wrap:balance} /* Rote Haarlinie ueber der Zeile - dasselbe Zeichen wie ueber den Abschnittsueberschriften. Es gibt dem Kopfbereich einen Anker, ohne eine weitere Flaeche einzufuehren. */ .hero .meta{margin-bottom:14px;position:relative;padding-top:15px} .hero .meta::before{content:"";position:absolute;top:0;left:0;width:32px; height:3px;background:var(--red-dark);border-radius:2px} .hero .lede{margin-bottom:26px;text-wrap:pretty} .hero .btns{margin-bottom:14px} .hero .btnnote{margin-bottom:54px} /* Bildgetragener Hero: die Flaeche steht ueber dem Text, nicht dahinter. Hinter dem Text laege Schrift auf Foto - der Kontrast haengt dann vom Bild ab und ist nicht mehr pruefbar. */ .hero.bild{padding-top:14px} /* Das Hero-Bild sitzt eingerueckt mit weichen Kanten auf der dunklen Flaeche, statt randlos anzustossen. */ .hero>.zone,.hero>.foto{border-radius:var(--r);border:0;display:block; width:calc(100% - 28px);margin:0 14px} /* Hoehe an das Sichtfenster gekoppelt, nicht fest. Auf einem iPhone SE (667 px hoch) blieben bei fester Hoehe beide Handlungsknoepfe unter der Kante - der erste Bildschirm war dann nur graue Flaeche. svh statt vh: vh rechnet am Handy mit eingeklappter Adressleiste und liegt beim ersten Blick zu hoch. dvh springt beim Scrollen. */ .hero>.zone,.hero>.foto{height:min(32svh,280px);min-height:150px;object-fit:cover} @supports not (height:1svh){.hero>.zone,.hero>.foto{height:min(32vh,280px)}} /* Am Desktop darf die Ueberschrift breiter laufen und eine Nummer kleiner ausfallen. Mit 15ch und 60 px stand sie vierzeilig unter der Bildflaeche und schob die Knoepfe auf einem 1280x800-Bildschirm unter die Kante. */ @media(min-width:761px){.hero.bild h1{max-width:24ch;font-size:clamp(34px,4.2vw,48px)}} /* Flache Notebook-Bildschirme (1024x768, 1280x800) sind am Schreibtisch noch verbreitet. Dort weicht die Bildflaeche ein Stueck, damit auch hier ein Knopf ohne Scrollen dasteht. */ @media(min-width:761px) and (max-height:820px){ .hero>.zone,.hero>.foto{height:min(28svh,230px)} .hero .herotext{padding-top:30px} } .hero .herotext{padding-top:38px} /* Foto statt Flaeche - gleiche Masse, gleicher Radius */ .foto{width:100%;height:100%;object-fit:cover;border-radius:var(--r);background:var(--zone)} .foto.r43{aspect-ratio:4/3} .foto.r32{aspect-ratio:3/2} .foto.r1610{aspect-ratio:16/10} /* Pille: Oeffnungszeit oder ein pruefbarer Fakt. Weiche Form, ruhiger Ton - kein Rot, das bleibt den Handlungen. */ .pills{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 26px} .pill{display:inline-flex;align-items:center;gap:8px;padding:9px 15px; border-radius:var(--r-pill);border:1px solid #39414c;background:var(--dark-surface); color:var(--on-dark-2);font-size:14.5px;font-weight:650;line-height:1.3} .pill svg{width:17px;height:17px;flex:0 0 auto;color:var(--on-dark-3)} .pill.hell{background:var(--surface);border-color:var(--border-2);color:var(--ink-2)} .pill.hell svg{color:var(--ink-3)} .factrow{display:grid;grid-template-columns:repeat(4,1fr);gap:1px; background:rgba(255,255,255,.13);border-top:1px solid rgba(255,255,255,.13)} .factrow div{padding:22px 26px 26px 0;border-right:1px solid rgba(255,255,255,.14)} .factrow div:last-child{border-right:none;padding-right:0} .factrow b{display:block;font-size:16px;margin-bottom:5px;color:#fff} /* Grosse Zahlen geben Struktur, wo noch keine Fotos sind. Die Ketten nehmen dafuer Filialzahlen - die hat dieser Betrieb nicht, also stehen hier nur Angaben, die anderswo auf der Seite ohnehin zugesagt sind. */ .factrow span{font-size:14px;color:var(--on-dark-3);line-height:1.45;display:block} /* ---- Abschnitte ---- */ section{padding:60px 0} section.tight{padding:40px 0} section.line{border-top:1px solid var(--border)} section.tone{background:var(--bg-tint)} section.ink{background:var(--dark);color:var(--on-dark)} section.ink h2,section.ink h3,section.ink h4{color:#fff} .shead{margin-bottom:38px} .shead h2{margin-top:14px;max-width:20ch} .shead .lede{margin-top:18px} /* ---- Raster ---- */ .cols{display:grid;gap:36px} .c2{grid-template-columns:repeat(2,1fr)} .c3{grid-template-columns:repeat(3,1fr)} .c4{grid-template-columns:repeat(4,1fr)} .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start} .split-a{grid-template-columns:minmax(0,7fr) minmax(0,5fr)} /* Karten mit eigener Flaeche. Vorher trennte nur eine Haarlinie die Leistungen - das las sich wie eine Liste, nicht wie ein Angebot. Eine Flaeche mit Rand und leichtem Schatten gibt jeder Leistung Gewicht und macht sie am Handy zu einem klaren Antippziel. */ /* ---- Bildkarten: die drei Saeulen, seitlich zu schieben ---- Am Telefon eine Reihe mit Einrastpunkten; die naechste Karte lugt ins Bild, sonst raet niemand, dass es weitergeht. scroll-snap sorgt dafuer, dass eine Karte sauber stehenbleibt statt irgendwo zwischen zwei Bildern. Kein Zeitgeber, keine Automatik: Was von allein weiterspringt, wird uebersehen - geschoben wird vom Kunden. overscroll-behavior-inline verhindert, dass die Seite mitwandert. */ .bkreihe{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:14px} .bk{position:relative;display:block;overflow:hidden;border-radius:var(--r); text-decoration:none;color:#fff;background:var(--zone);aspect-ratio:4/3; transition:transform .2s ease,box-shadow .2s ease} .bk img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transition:transform .35s ease} .bk::after{content:"";position:absolute;inset:0; background:linear-gradient(to top,rgba(9,11,13,.86) 0%,rgba(9,11,13,.45) 34%,rgba(9,11,13,0) 62%)} .bk-leer{position:absolute;inset:0;background:var(--zone)} .bk-text{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px 17px 15px} .bk-text b{display:block;font-size:20px;font-weight:800;letter-spacing:-.02em; line-height:1.15;text-shadow:0 1px 10px rgba(0,0,0,.45)} .bk-text>span{display:block;font-size:13.5px;color:rgba(255,255,255,.88); margin-top:4px;line-height:1.35;text-shadow:0 1px 8px rgba(0,0,0,.5)} .bk:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(20,23,28,.18)} .bk:hover img{transform:scale(1.03)} .bk:active{transform:translateY(0) scale(.995)} @media(hover:none){.bk:hover{transform:none;box-shadow:none} .bk:hover img{transform:none}} @media(prefers-reduced-motion:reduce){.bk,.bk img{transition:none} .bk:hover,.bk:active{transform:none} .bk:hover img{transform:none}} /* Positionsanzeige unter den Bildkarten. Balken statt Punkte: leichter zu treffen und sie zeigen die Reihenfolge. Das Tippziel ist 36x31 px gross, der sichtbare Balken nur 26x3 - so bleibt die Anzeige zurueck- haltend, ohne dass man danebentippt. Wird vom Skript erzeugt und ausgeblendet, sobald alle Karten nebeneinander stehen. */ .bkpunkte{display:flex;justify-content:center;gap:4px;margin-top:12px} .bkpunkte button{-webkit-appearance:none;appearance:none;background:none;border:0; padding:14px 5px;margin:0;cursor:pointer;line-height:0; -webkit-tap-highlight-color:transparent} .bkpunkte button::before{content:"";display:block;width:26px;height:3px; border-radius:2px;background:var(--border-2);transition:background .2s ease} .bkpunkte button.an::before{background:var(--red)} .bkpunkte button:focus-visible{outline:3px solid var(--focus);outline-offset:-6px; border-radius:4px} .on-dark .bkpunkte button::before{background:rgba(255,255,255,.3)} .on-dark .bkpunkte button.an::before{background:var(--red-dark)} /* ---- Videokarten: Hochformat, fuehren zu TikTok ---- Gleiche Wischmechanik wie die Bildkarten. Hochformat 9:16, weil die Videos so aufgenommen sind - ein quadratischer Ausschnitt schneidet immer das Wichtigste weg. Auf der Seite liegt nur das eigene Vorschaubild; TikTok wird erst durch den Klick geoeffnet. */ .vkreihe{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:14px} .vk{position:relative;display:block;overflow:hidden;border-radius:var(--r); text-decoration:none;color:#fff;background:var(--zone);aspect-ratio:9/16; transition:transform .2s ease,box-shadow .2s ease} .vk img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .vk::after{content:"";position:absolute;inset:0; background:linear-gradient(to top,rgba(9,11,13,.85) 0%,rgba(9,11,13,.28) 40%,rgba(9,11,13,.1) 70%)} .vk-leer{position:absolute;inset:0;background:var(--zone)} .vk-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2; display:grid;place-items:center;width:54px;height:54px;border-radius:50%; background:rgba(255,255,255,.92);color:var(--ink); box-shadow:0 4px 18px rgba(0,0,0,.3);transition:transform .2s ease} .vk-play svg{width:26px;height:26px;margin-left:2px} .vk-text{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px 14px 13px} .vk-marke{display:block;width:19px;height:19px;margin-bottom:7px;color:#fff;opacity:.92} .vk-marke svg{width:19px;height:19px;display:block} .vk-text b{display:block;font-size:15px;font-weight:750;line-height:1.25; letter-spacing:-.012em;text-shadow:0 1px 8px rgba(0,0,0,.5)} .vk-fehlt{display:block;font-size:12.5px;color:var(--on-dark-3);margin-top:4px} /* Der Hinweis auf den neuen Tab steht fuer die Sprachausgabe da, nicht fuer das Auge - das Symbol sagt es Sehenden bereits. */ .vk-hinweis{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} .vk:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(20,23,28,.18)} .vk:hover .vk-play{transform:translate(-50%,-50%) scale(1.06)} .vk:active{transform:translateY(0) scale(.995)} .vk.ph{cursor:default} @media(hover:none){.vk:hover{transform:none;box-shadow:none} .vk:hover .vk-play{transform:translate(-50%,-50%)}} @media(prefers-reduced-motion:reduce){.vk,.vk-play{transition:none} .vk:hover,.vk:active{transform:none} .vk:hover .vk-play{transform:translate(-50%,-50%)}} /* ---- Leistungsliste ---- Symbol links, Bezeichnung, Halbsatz, Pfeil. Die ganze Zeile ist das Tippziel. Ersetzt Kartenstapel dort, wo viele gleichartige Leistungen untereinander stehen - acht Karten waren acht Rahmen fuer je zwei Zeilen Inhalt. */ .lliste{list-style:none;margin:0;padding:0;border-top:1px solid var(--border)} .lliste li{border-bottom:1px solid var(--border)} .lliste a{display:flex;align-items:center;gap:15px;padding:15px 2px; text-decoration:none;color:var(--ink);min-height:64px; transition:background .16s ease} .lliste a:hover{background:var(--bg-tint)} .lliste a:active{background:var(--border)} .ll-zeile{display:flex;align-items:center;gap:15px;padding:15px 2px;min-height:64px} .ll-ico{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px; border-radius:11px;background:var(--bg-tint);color:var(--ink)} .ll-ico svg{width:24px;height:24px} .ll-txt{flex:1 1 auto;min-width:0} .ll-txt b{display:block;font-size:16.5px;font-weight:750;letter-spacing:-.012em; line-height:1.25} .ll-txt span{display:block;font-size:14px;color:var(--ink-3);line-height:1.4; margin-top:3px} .lliste .pfeil{flex:0 0 auto;width:19px;height:19px;color:var(--ink-3); transition:transform .18s ease,color .18s ease} .lliste a:hover .pfeil{transform:translateX(3px);color:var(--red)} .on-dark .lliste{border-color:rgba(255,255,255,.13)} .on-dark .lliste li{border-color:rgba(255,255,255,.13)} .on-dark .lliste a{color:#fff} .on-dark .lliste a:hover{background:rgba(255,255,255,.05)} .on-dark .ll-ico{background:rgba(255,255,255,.08);color:#fff} .on-dark .ll-txt span{color:var(--on-dark-3)} .on-dark .lliste .pfeil{color:var(--on-dark-3)} .on-dark .lliste a:hover .pfeil{color:var(--red-dark)} @media(hover:none){.lliste a:hover{background:transparent} .lliste a:hover .pfeil{transform:none;color:var(--ink-3)}} @media(prefers-reduced-motion:reduce){.lliste a,.lliste .pfeil{transition:none} .lliste a:hover .pfeil{transform:none}} /* ---- Leistungsraster: der Einstieg der Startseite ---- Symbol und Name, sonst nichts. Zwei Spalten am Telefon, vier am Schreibtisch. Bewusst flach gehalten - hier wird ausgewaehlt, nicht gelesen. Radius 14 statt 20: kantiger wirkt technischer, und genau darum geht es. */ /* Ueberschrift des Rasters. Bewusst schlicht: eine Frage, eine Zeile Erklaerung, dann die Kacheln. Die rote Haarlinie ist der einzige Farbakzent im Abschnitt. */ .rasterkopf{font-size:clamp(23px,5.4vw,32px);font-weight:800;letter-spacing:-.03em; margin:0 0 6px;position:relative;padding-top:14px;line-height:1.12} .rasterkopf::before{content:"";position:absolute;top:0;left:0;width:34px;height:3px; background:var(--red);border-radius:2px} .rasterlede{font-size:15px;color:var(--ink-2);margin:0 0 18px;max-width:44ch} .on-dark .rasterkopf::before{background:var(--red-dark)} .on-dark .rasterlede{color:var(--on-dark-2)} .raster{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .raster a{display:flex;flex-direction:column;align-items:center;justify-content:center; gap:11px;text-align:center;text-decoration:none;color:var(--ink); background:var(--surface);border:1px solid var(--border-2);border-radius:14px; padding:20px 10px;min-height:112px;min-width:0; transition:border-color .18s ease,transform .12s ease,box-shadow .18s ease,color .18s ease} .raster a:hover{border-color:var(--ink);transform:translateY(-2px); box-shadow:0 6px 18px rgba(20,23,28,.09)} .raster a:active{transform:translateY(0) scale(.98)} .raster svg{width:30px;height:30px;flex:0 0 auto;color:var(--ink-2)} .raster a:hover svg{color:var(--red)} .raster b{font-size:13.5px;font-weight:750;line-height:1.25;letter-spacing:-.005em; hyphens:auto} .on-dark .raster a{background:var(--dark-surface);border-color:rgba(255,255,255,.14); color:#fff} .on-dark .raster svg{color:var(--on-dark-2)} .on-dark .raster a:hover{border-color:rgba(255,255,255,.42);box-shadow:none} .on-dark .raster a:hover svg{color:var(--red-dark)} @media(hover:none){ .raster a:hover{border-color:var(--border-2);transform:none;box-shadow:none} .raster a:hover svg{color:var(--ink-2)} } @media(prefers-reduced-motion:reduce){ .raster a{transition:none} .raster a:hover,.raster a:active{transform:none} } .svc{background:var(--surface);border:1px solid var(--border);border-radius:var(--r); padding:18px 17px;display:flex;flex-direction:column; box-shadow:0 1px 2px rgba(20,23,28,.05); transition:box-shadow .2s,border-color .2s,transform .2s} .svc:hover{box-shadow:0 6px 20px rgba(20,23,28,.10);border-color:var(--border-2); transform:translateY(-2px)} .svc .ico{color:var(--ink);margin-bottom:16px;display:flex;align-items:center; justify-content:center;width:46px;height:46px;border-radius:10px; background:var(--bg-tint)} .svc .ico svg{width:25px;height:25px} .svc a.more{margin-top:auto;align-self:flex-start} .on-dark .svc{background:var(--dark-surface);border-color:rgba(255,255,255,.13); box-shadow:none} .on-dark .svc:hover{border-color:rgba(255,255,255,.3);box-shadow:0 8px 24px rgba(0,0,0,.3)} .on-dark .svc .ico{background:rgba(255,255,255,.08);color:#fff} .svc .ico{color:var(--ink);margin-bottom:11px;display:block} .svc .ico svg{width:24px;height:24px} .svc h3{margin-bottom:7px} .svc p{font-size:15.5px;color:var(--ink-2);margin-bottom:14px;line-height:1.55} /* Der Kachel-Link ist jetzt eine umrandete Pille statt eines roten Textlinks. Zwei Gruende: er wird zum Tippziel statt zu einer Zeile, und das Rot bleibt dem eigentlichen Handlungsknopf. Zwoelf rote Links auf einer Seite entwerten den einen, auf den es ankommt. Unterstrichen werden muss er nicht mehr - die Umrandung traegt die Erkennbarkeit. */ .svc a.more{display:inline-flex;align-items:center;gap:7px;font-size:14.5px;font-weight:700; color:var(--ink);text-decoration:none;background:transparent; border:1.5px solid var(--border-input);border-radius:var(--r-pill); padding:9px 15px;min-height:44px; transition:background .2s ease,border-color .2s ease,transform .12s ease} .svc a.more:hover{background:rgba(20,23,28,.05);border-color:var(--ink);transform:translateY(-1px)} .svc a.more:active{transform:translateY(0) scale(.98)} .svc a.more .pfeil{width:16px;height:16px;flex:0 0 auto;transition:transform .2s ease} .svc a.more:hover .pfeil{transform:translateX(3px)} .on-dark .svc a.more{color:#fff;border-color:rgba(255,255,255,.42)} .on-dark .svc a.more:hover{background:rgba(255,255,255,.08);border-color:#fff} @media(hover:none){ .svc a.more:hover{background:transparent;border-color:var(--border-input);transform:none} } @media(prefers-reduced-motion:reduce){ .svc a.more,.svc a.more .pfeil{transition:none} .svc a.more:hover,.svc a.more:active{transform:none} } .on-dark .svc{border-color:rgba(255,255,255,.5)} .on-dark .svc .ico{color:#fff} .on-dark .svc p{color:var(--on-dark-2)} /* Leistungskarte mit Preis und Dauer. Aus dem Entwurf "handlungsgetrieben" uebernommen: Wer eine Kachel liest, will als Naechstes wissen, was es kostet und wie lange es dauert - beides vor dem Klick, nicht danach. Der Preis steht schwarz, nicht rot: er ist eine Angabe, keine Handlung. */ /* Umbrechen erlaubt: In einer dreispaltigen Reihe bleiben bei 768 px nur rund 170 px Textbreite. Passt der Betrag nicht mehr neben die Ueberschrift, rutscht er darunter, statt die Kachel aus dem Bild zu schieben. */ .svc .kopf{display:flex;flex-wrap:nowrap;align-items:flex-start; justify-content:space-between;gap:6px 14px} .svc .kopf h3{margin-bottom:0;min-width:0} .svc .preis{flex:0 1 auto;min-width:0;text-align:right;font-size:19px;font-weight:800; letter-spacing:-.02em;white-space:nowrap;line-height:1.2;font-variant-numeric:tabular-nums} /* Der Zusatz darf umbrechen, der Betrag nicht. Ohne das schob bei 320 px "Radwechsel, vier Raeder" die Kachel seitlich aus dem Bild. */ .svc .preis small{display:block;font-size:12.5px;font-weight:600;color:var(--ink-3); letter-spacing:0;white-space:normal;line-height:1.35;margin-top:3px} .svc .dauer{display:inline-flex;align-self:flex-start;align-items:center;gap:7px;margin:10px 0 0; padding:6px 12px;border-radius:var(--r-pill);background:var(--bg-tint); font-size:13px;font-weight:700;color:var(--ink-2);letter-spacing:.01em} .svc .dauer svg{width:14px;height:14px;flex:0 0 auto;color:var(--ink-3)} .svc .kopf+p{margin-top:14px} .promise{background:var(--surface);border:1px solid var(--border);border-radius:var(--r); padding:22px 20px;box-shadow:0 1px 2px rgba(20,23,28,.05)} .promise .num{display:inline-flex;align-items:center;justify-content:center; width:30px;height:30px;border-radius:8px;background:var(--ink);color:#fff; font-size:12.5px;font-weight:700;letter-spacing:0;margin-bottom:14px} .promise h4{margin-bottom:7px} .promise p{font-size:15.5px;color:var(--ink-2);margin:0;line-height:1.6} /* ---- Preisliste ---- */ .plist{margin:0;padding:0;list-style:none} .plist li{display:flex;align-items:baseline;gap:10px;padding:15px 14px; border-bottom:1px solid var(--border);border-radius:var(--r-s)} .plist li:nth-child(odd){background:var(--surface)} .plist li:first-child{border-top:2px solid var(--ink)} /* min-width:0, damit die Bezeichnung umbrechen darf. Sonst schiebt eine lange Zeile mit nicht umbrechbarem Preis die Liste aus dem Bild. */ .plist .t{font-weight:650;font-size:16.5px;min-width:0} .plist .t em{display:block;font-style:normal;font-weight:400;font-size:14px;color:var(--ink-3);margin-top:4px;line-height:1.45} .plist .dots{flex:1 1 auto;border-bottom:1px dotted var(--border-2);transform:translateY(-4px);min-width:24px} .plist .v{font-weight:700;font-size:17px;white-space:nowrap;font-variant-numeric:tabular-nums} /* Kostentransparenz-Block (Mohan/Buell/John, HBS) */ .why{background:var(--surface);border:1px solid var(--border-2);border-left:4px solid var(--ink); border-radius:var(--r-s);padding:22px 24px;margin:26px 0} .why h4{margin-bottom:12px} .why ul{margin:0;padding-left:20px;font-size:15.5px;color:var(--ink-2)} .why li{margin-bottom:8px} .note{border-left:3px solid var(--ink);padding:2px 0 2px 18px;margin:26px 0;font-size:15.5px;color:var(--ink-2)} .note b{color:var(--ink)} /* ---- Angebot ---- */ .offer{border:2px solid var(--ink);border-radius:var(--r);padding:34px;background:var(--surface)} .offer h3{font-size:25px;margin:12px 0 16px;letter-spacing:-.025em} .offer ul{margin:0 0 24px;padding:0;list-style:none} .offer li{padding-left:30px;position:relative;margin-bottom:12px;font-size:16px;color:var(--ink-2)} .offer li b{color:var(--ink)} .offer li::before{content:"";position:absolute;left:0;top:9px;width:14px;height:8px; border-left:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);transform:rotate(-45deg)} /* ---- Ablauf ---- */ .flow{list-style:none;padding:0;margin:0;counter-reset:f} .flow li{counter-increment:f;display:flex;gap:20px;padding:20px 0;border-bottom:1px solid var(--border)} .flow li::before{content:counter(f,decimal-leading-zero);font-size:12.5px;font-weight:700; letter-spacing:.1em;color:var(--ink-3);flex:0 0 34px;padding-top:5px} .flow li>div{min-width:0} .flow b{display:block;margin-bottom:5px;font-size:17.5px} .flow span{font-size:16px;color:var(--ink-2);line-height:1.6} .on-dark .flow li{border-color:rgba(255,255,255,.2)} .on-dark .flow li::before{color:var(--on-dark-3)} .on-dark .flow span{color:var(--on-dark-2)} /* ---- Bildflaechen ---------------------------------------------------- Ersetzen die frueheren gestrichelten Kaesten. Eine Bildflaeche ist eine gestaltete Flaeche mit Verlauf, Strichsymbol und Beschriftungsbalken - sie sagt, was dort hingehoert, und sieht auch ohne Foto ordentlich aus. Wichtig: der Balken nennt den Zweck ("Bildflaeche 1 - Halle"), er behauptet keine Aufnahme. Was noch nicht fotografiert ist, wird nicht als Foto ausgegeben. */ .zone{position:relative;overflow:hidden;background:var(--zone); border-radius:var(--r);isolation:isolate;min-width:0} .zone::before{content:"";position:absolute;inset:0;background: radial-gradient(115% 70% at 18% 4%,#2b323c 0,rgba(43,50,60,0) 62%), radial-gradient(95% 65% at 92% 100%,#1e242c 0,rgba(30,36,44,0) 66%), linear-gradient(160deg,#1b2027 0%,#12161b 100%)} /* Lichtkante wie ein Reflex auf dunklem Blech - nimmt der Flaeche das Pappige, ohne dass etwas blinkt oder sich bewegt. */ .zone::after{content:"";position:absolute;left:-30%;top:-40%;width:120%;height:190%; background:linear-gradient(104deg,rgba(255,255,255,0) 44%, rgba(255,255,255,.055) 50%,rgba(255,255,255,0) 57%)} .zone-mark{position:absolute;inset:0;display:grid;place-items:center;z-index:1;padding:14px} .zone-mark svg{width:clamp(34px,22%,84px);height:auto;aspect-ratio:1/1;color:var(--zone-ico)} .zone-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex; align-items:center;justify-content:space-between;gap:12px;min-width:0;margin:0; padding:11px 15px;background:var(--zone-cap);color:var(--on-zone); font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;line-height:1.35} .zone-cap b{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .zone-cap span{color:var(--on-zone-2);flex:0 0 auto;letter-spacing:.05em} .zone.r43{aspect-ratio:4/3} .zone.r32{aspect-ratio:3/2} .zone.r1610{aspect-ratio:16/10} /* Quadrat nur fuer Detailaufnahmen - ueber die halbe Spaltenbreite hinaus wirkt ein Quadrat wie ein Fehler im Raster. */ .zone.r11,.foto.r11{aspect-ratio:1/1;max-width:340px} /* Breites Bildband unter dem Seitenkopf. */ .bildband{margin:34px 0 0;min-width:0} /* ---- Vorher und nachher: der Schieberegler --------------------------- Grundzustand ohne Skript: beide Bilder liegen nebeneinander, beschriftet, fertig. Erst das Skript setzt .ba-js und macht daraus den Regler - dann liegt das Vorher-Bild ueber dem Nachher-Bild und wird beschnitten. So ist die Seite ohne JavaScript nicht kaputt, sondern schlichter. */ /* 760 px: Die Bildpaare kommen mit 720 px Breite aus der Kamera. Breiter waere hochgerechnet und weich, und ein 4:3-Bild ueber die volle Spaltenbreite wuerde am Schreibtisch die halbe Seite fuellen. */ .ba{margin:0 auto;max-width:760px;min-width:0} .ba+.ba{margin-top:34px} .ba-stage{position:relative;overflow:hidden;background:var(--zone-cap); border-radius:var(--r) var(--r) 0 0; display:grid;grid-template-columns:1fr 1fr;gap:3px} .ba-stage>img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;background:var(--zone)} .ba-stage .zone{border-radius:0} .ba-tag{position:absolute;bottom:12px;z-index:5;padding:7px 11px;border-radius:8px; background:rgba(12,14,17,.88);color:#fff;font-size:12px;font-weight:700; letter-spacing:.09em;text-transform:uppercase;line-height:1} .ba-l{left:12px} .ba-r{right:12px} .ba-line,.ba-range{display:none} /* Mit Skript: ein Bild ueber dem anderen, dazwischen der Griff. */ .ba-js{display:block;aspect-ratio:4/3;gap:0;touch-action:pan-y} .ba-js>img{position:absolute;inset:0;aspect-ratio:auto} .ba-js .ba-a{clip-path:inset(0 calc(100% - var(--p,50%)) 0 0);z-index:2} .ba-js .ba-b{z-index:1} .ba-js .ba-line{display:block;position:absolute;top:0;bottom:0;left:var(--p,50%); width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.35);z-index:3} .ba-grip{position:absolute;top:50%;left:50%;width:52px;height:52px;margin:-26px 0 0 -26px; border-radius:50%;background:#fff;box-shadow:0 3px 14px rgba(0,0,0,.5); display:grid;place-items:center;transition:transform .12s ease} .ba-grip svg{width:24px;height:24px;color:var(--ink)} /* Der Regler selbst ist ein echtes input[type=range]: Pfeiltasten, Pos1 und Ende funktionieren ohne eine Zeile Skript, Screenreader kennen die Rolle, und der Finger zieht ihn wie gewohnt. Unsichtbar, aber da. */ .ba-js .ba-range{display:block;position:absolute;inset:0;z-index:4; width:100%;height:100%;margin:0;padding:0;border:0;background:transparent; -webkit-appearance:none;appearance:none;cursor:ew-resize;touch-action:pan-y} .ba-range::-webkit-slider-runnable-track{background:transparent;height:100%;border:0} .ba-range::-webkit-slider-thumb{-webkit-appearance:none;width:2px;height:100%; background:transparent;border:0} .ba-range::-moz-range-track{background:transparent;height:100%;border:0} .ba-range::-moz-range-thumb{width:2px;height:100%;background:transparent;border:0;border-radius:0} /* Fokus: Ring auf der Buehne, innen Seitenfarbe, aussen Blau. Wo :has() fehlt, bekommt das Feld selbst einen Ring - lieber schlichter als gar keiner. */ .ba-range:focus-visible{outline:3px solid var(--focus-dark);outline-offset:-3px} @supports selector(:has(*)){ .ba-range:focus-visible{outline:none} .ba-stage:has(.ba-range:focus-visible){ box-shadow:0 0 0 3px var(--dark-deep),0 0 0 7px var(--focus-dark)} } /* Dunkler Beschriftungsblock unter der Flaeche. Kurzer Text, deshalb erlaubt - Fliesstext bleibt auf hellem Grund. */ .ba-cap{background:var(--dark);color:var(--on-dark-2);padding:16px 20px 18px; border-radius:0 0 var(--r) var(--r);font-size:15.5px;line-height:1.55} .ba-cap b{display:block;color:#fff;font-size:17px;letter-spacing:-.015em;margin-bottom:4px} .ba-cap .fine{display:block;margin-top:8px;color:var(--on-dark-3);font-size:14px;line-height:1.5} /* Platzhalter-Fassung: Etikett ueber der Flaeche statt Rahmen um alles. Die Markierung data-platzhalter bleibt im Markup - build.py --check zaehlt sie, und das ist das Sicherheitsnetz vor dem Live-Gang. */ .ba.ph{border:0!important;background:none;padding-top:0} .ba.ph::before{position:static;display:inline-block;margin:0 0 9px; border:1px solid var(--border-2);border-radius:6px} .ba.ph>*:first-child{margin-top:0} .ba.ph .ba-stage{outline:2px dashed var(--border-2);outline-offset:-2px} /* ---- Platzhalter-Markierung ---- Sichtbar als Platzhalter, damit nichts Erfundenes aus Versehen live geht. Kein Rot: Rot bleibt den Handlungen vorbehalten. Gestrichelter Rahmen und Etikett in derselben Sprache wie die Bildflaechen (.zone). */ .ph{position:relative;border:1.5px dashed var(--border-2)!important;background:var(--bg-tint)} .ph::before{content:"Platzhalter";position:absolute;top:0;left:0; font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700; color:var(--ink-3);background:var(--bg);padding:4px 9px;border:1px solid var(--border-2); border-top:0;border-left:0} .ph>*:first-child{margin-top:20px} /* ---- Bewertungen ---- */ .revs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:10px} .rev{background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r);padding:22px} .rev .stars{font-size:15px;letter-spacing:2px;color:var(--ink)} .rev .stars b{font-weight:700;letter-spacing:0;margin-left:8px;font-size:14px} .rev p{font-size:15px;color:var(--ink-2);margin:12px 0 12px} .rev .who{font-size:13.5px;color:var(--ink-3)} .revbar{display:flex;gap:26px;align-items:baseline;flex-wrap:wrap;margin-bottom:26px} .revbar .big{font-size:34px;font-weight:700;letter-spacing:-.03em} /* ---- Formular ---- */ form.contact{background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r);padding:30px} .field{margin-bottom:20px} .field label{display:block;font-weight:650;font-size:15.5px;margin-bottom:6px} .field .hint{display:block;font-size:14px;color:var(--ink-3);margin-bottom:8px;font-weight:400} .field input,.field select,.field textarea{width:100%;font:inherit;font-size:16px; padding:13px 14px;min-height:52px;border:1.5px solid var(--border-input);border-radius:var(--r-s); background:var(--surface);color:var(--ink)} .field textarea{min-height:120px;resize:vertical} .field input::placeholder,.field textarea::placeholder{color:#767c85} .req{color:var(--ink);font-weight:700} .formnote{font-size:14px;color:var(--ink-3);margin-top:16px} /* Einwilligung: Kaestchen und Text nebeneinander, Kaestchen gross genug zum Treffen. Das Label selbst ist die Trefferflaeche. */ .field.check{display:flex;gap:12px;align-items:flex-start;margin-bottom:22px} .field.check input{width:22px;height:22px;flex:0 0 22px;min-height:22px;padding:0; margin-top:2px;accent-color:var(--red)} .field.check label{font-weight:400;font-size:15px;line-height:1.55;margin:0;cursor:pointer} .field.check a{color:var(--red);text-decoration:underline;text-underline-offset:.15em} /* Honeypot. Nicht display:none - manche Bots erkennen das und lassen das Feld dann leer. Aus dem Sichtfeld schieben wirkt zuverlaessiger. aria-hidden und tabindex halten Screenreader und Tastatur davon fern. */ .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* Terminanfrage: Tag und Tageszeit gehoeren nebeneinander, solange Platz ist */ .feldpaar{display:grid;grid-template-columns:1fr 1fr;gap:0 18px} .feldpaar>.field.check{grid-column:1 / -1} .feldpaar[hidden]{display:none} /* Hinweis, dass bei Smart Repair der Preis vor der Uhrzeit kommt. Heller Grund, dunkle Schrift, kein Rot - das ist eine Erklaerung, keine Warnung und schon gar keine Handlung. */ .hinweisbox{background:var(--bg-tint);border-left:3px solid var(--ink); border-radius:0 var(--r-s) var(--r-s) 0;padding:16px 18px;margin:0 0 20px} .hinweisbox[hidden]{display:none} .hinweisbox b{display:block;font-size:15.5px;margin-bottom:6px} .hinweisbox p{font-size:14.5px;color:var(--ink-2);margin:0 0 14px;line-height:1.55} /* Fehlerkasten ueber dem Formular. Fehlerrot, nicht Markenrot - sonst verliert der Anrufen-Knopf seine Signalwirkung. */ .formerror{border:2px solid var(--error);border-left-width:6px;background:var(--surface); border-radius:var(--r-s);padding:18px 20px;margin-bottom:22px;color:var(--error);font-size:15.5px} .formerror b{display:block;margin-bottom:8px;font-size:16.5px} .formerror ul{margin:0;padding-left:20px;color:var(--ink)} .formerror li{margin-bottom:5px} .formerror[hidden]{display:none} /* Meldung am Feld. Gleiche Sprache wie das Beispiel im Hinweiskasten: Fehlerrot, Wort "Fehler" im Klartext, nie Farbe allein. */ .fielderror{display:block;margin-top:8px;color:var(--error);font-weight:650; font-size:14.5px;border-left:4px solid var(--error);padding-left:12px;line-height:1.45} .fielderror[hidden]{display:none} .field input[aria-invalid="true"],.field select[aria-invalid="true"], .field textarea[aria-invalid="true"]{border-color:var(--error);border-width:2px} .field.check input[aria-invalid="true"]{outline:2px solid var(--error);outline-offset:2px} .errdemo{color:var(--error);font-weight:650;font-size:14.5px;border-left:4px solid var(--error); padding-left:12px;margin-top:8px} /* ---- Kennzahlen ---- */ .figs{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:rgba(255,255,255,.18)} .figs div{background:var(--dark);padding:26px 22px 26px 0} .figs b{display:block;font-size:34px;letter-spacing:-.03em;color:#fff;line-height:1.05;margin-bottom:8px} .figs span{font-size:13.5px;color:var(--on-dark-3);line-height:1.45;display:block} /* ---- Pakete ---- */ .pkg{border-top:2px solid var(--ink);padding-top:22px;display:flex;flex-direction:column;height:100%} .pkg h3{margin-bottom:16px} .pkg ul{list-style:none;padding:0;margin:0 0 24px;font-size:15.5px;color:var(--ink-2)} .pkg li{padding-left:22px;position:relative;margin-bottom:10px} .pkg li::before{content:"";position:absolute;left:0;top:11px;width:9px;height:2px;background:var(--ink)} .pkg .btn{margin-top:auto;align-self:flex-start} /* ---- FAQ ---- */ .faq details{border-bottom:1px solid var(--border)} .faq summary{cursor:pointer;list-style:none;padding:20px 44px 20px 0;position:relative;font-weight:650;font-size:17px;min-height:48px} .faq summary::-webkit-details-marker{display:none} .faq summary::after,.faq summary::before{content:"";position:absolute;right:8px;top:50%;background:var(--ink)} .faq summary::after{width:15px;height:2.5px;margin-top:-1px} .faq summary::before{width:2.5px;height:15px;margin-top:-7.5px;right:14px} .faq details[open] summary::before{opacity:0} .faq details p{margin:0 0 22px;color:var(--ink-2);font-size:16px;max-width:72ch} /* ---- Kontakt ---- */ .nap{font-size:18px;line-height:1.9} .nap b{font-size:20px;display:block;margin-bottom:8px} .hours{margin-top:26px;border-top:2px solid var(--ink)} .hours div{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--border);font-size:16px} .hours div.hi{font-weight:700} /* ---- Anfahrtswege ---- */ .wege div{border-top:1px solid var(--border);padding:14px 0} .wege div:first-child{border-top:2px solid var(--ink)} .wege b{display:block;font-size:16px;margin-bottom:3px} .wege span{font-size:15px;color:var(--ink-2)} /* ---- Terminbuchung ---- Der Kasten steht als Erstes auf termin.html. Kein Rot als Flaeche - das Rot bleibt dem Knopf. */ .buchung{border:2px solid var(--ink);border-radius:var(--r);padding:30px} .buchung h3{margin:0 0 10px;font-size:23px} .buchung p{color:var(--ink-2);margin:0 0 22px;max-width:58ch} .buchung .btns{margin:0} .buchung .btnnote{margin-top:16px} .buchung.ph{border-style:dashed;border-width:1.5px} /* ---- Karte: Zwei-Klick ---- Vor dem Klick liegt hier nichts von Google, nur eigene Vorschau. */ .karte{position:relative;border:1px solid var(--border-2);background:var(--bg-tint); border-radius:var(--r);height:var(--kartehoehe,340px);overflow:hidden} .karte iframe{width:100%;height:100%;border:0;display:block} .kartevorschau{position:relative;width:100%;height:100%} .kartevorschau img{width:100%;height:100%;object-fit:cover} .kartenleer{width:100%;height:100%;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:6px;text-align:center;padding:24px} .kartenleer b{font-size:18px} .kartenleer span{font-size:15px;color:var(--ink-2)} /* Aktionsflaeche liegt ueber der Vorschau, damit der Knopf nicht im Bild untergeht. Heller Grund, weil hier Fliesstext steht. */ .karteaktion{position:absolute;left:0;right:0;bottom:0;background:rgba(255,255,255,.94); border-top:1px solid var(--border-2);padding:14px 16px;display:flex;gap:14px; align-items:center;flex-wrap:wrap} .kartehinweis{font-size:13.5px;color:var(--ink-2);flex:1 1 220px;min-width:0;line-height:1.45} .kartequelle{position:absolute;right:6px;top:6px;font-size:11px;background:rgba(255,255,255,.86); padding:3px 7px;color:var(--ink-2)} /* ---- Fusszeile ---- */ footer{background:var(--dark-deep);color:var(--on-dark-3);padding:60px 0 28px;font-size:15px} footer a{color:#fff;text-decoration:none} footer a:hover{text-decoration:underline} .fgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:34px} footer h4{color:#fff;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;margin:0 0 18px} footer ul{list-style:none;padding:0;margin:0} footer li{margin-bottom:11px} footer li a{display:inline-block;padding:3px 0} /* In der Fusszeile die helle Fassung der Marke - die schwarze waere auf #111418 unsichtbar. */ .fmarke{height:44px;width:auto;display:block;margin-bottom:14px} .fbrand{color:#fff;font-size:19px;font-weight:700;letter-spacing:-.02em;display:block} .fbrand-s{font-size:10px;letter-spacing:.19em;text-transform:uppercase;color:var(--on-dark-3);margin-top:8px;display:block} .fbot{border-top:1px solid rgba(255,255,255,.16);margin-top:44px;padding-top:22px; display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13.5px} /* ---- Mobile Aktionsleiste: Telefon zuerst ---- */ /* Aktionsleiste. Flacher als vorher, mit zurueckhaltendem Schatten - ein kraeftiger Schatten laesst die Leiste ueber der Seite schweben statt zu ihr zu gehoeren. Termin buchen traegt jetzt das Rot: der Betreiber hat das so entschieden, weil zuerst die Leistung gewaehlt und dann gebucht wird. Anrufen bleibt gleichwertig gross daneben. */ .mobilebar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--surface); border-top:1px solid var(--border-2);padding:8px 11px;gap:8px; box-shadow:0 -1px 8px rgba(20,23,28,.07)} /* Dritter Knopftyp: gefuellt, aber nicht rot. Termin ist der Zweck der Seite und braucht Gewicht - Rot bleibt trotzdem dem Anruf vorbehalten, sonst konkurrieren zwei Signalfarben miteinander. Weiss auf #14171c ergibt 17,96:1. */ .btn-fest{background:var(--dark);color:#fff;border-color:var(--dark)} .btn-fest:hover{background:#000;border-color:#000} .on-dark .btn-fest{background:#fff;color:var(--ink);border-color:#fff} .mobilebar .btn{flex:1 1 0;padding:11px 4px;font-size:14px;min-height:50px;gap:7px} /* Der Buchungsknopf bekommt mehr Breite als der Anruf, ohne ihn zu verdraengen - Gewicht durch Flaeche, nicht durch Verkleinern des anderen. */ .mobilebar .mb-termin{flex:1.25 1 0} .mobilebar .mb-tel{border-color:var(--border-input)} .mobilebar .btn svg{width:17px;height:17px} /* WhatsApp nur als Zeichen: zwei beschriftete Knoepfe lesen sich besser als drei gedraengte. Das aria-label traegt den Namen fuer Screenreader. */ .mobilebar .mb-wa{flex:0 0 56px;padding:12px 0} .mobilebar .mb-route{flex:0 0 56px;padding:12px 0} .mobilebar .mb-wa svg{width:21px;height:21px} .mobilebar .mb-route svg{width:21px;height:21px} /* Zwischen Burger-Menue (960) und breitem Desktop wird der Kopf eng: Logo mit Unterzeile, sechs Links und Telefonknopf brauchen zusammen mehr als hier steht. Die Unterzeile des Logos ist dekorativ und weicht als Erstes - besser als ein Link, der mitten im Wort umbricht, und besser als den Umbruchpunkt auf 1080 zu ziehen: dann laege iPad quer (1024) im Burger-Menue. */ @media(min-width:961px) and (max-width:1080px){ .logo .l2{display:none} nav{gap:19px} .hrow{gap:18px} } @media(max-width:1000px){ .c4{grid-template-columns:repeat(2,1fr)} .fgrid{grid-template-columns:repeat(2,1fr);gap:32px} .factrow,.figs,.revs{grid-template-columns:repeat(2,1fr)} .factrow div{border-right:none;border-bottom:1px solid rgba(255,255,255,.14);padding-right:26px} .split,.split-a{grid-template-columns:minmax(0,1fr);gap:44px} } @media(max-width:960px){ /* Aufgeklapptes Menue als schwarzes Feld. Vorher war es eine weisse Liste mit duennen Trennlinien - funktionierte, sah aber nach nichts aus. Schwarz gibt dem Menue Gewicht und passt zum Logo: viel Weiss, Schwarz als Gegengewicht, Rot nur als Akzent. */ nav{display:none;width:100%;order:3;flex-direction:column;align-items:stretch; gap:0;margin:12px 0 6px;padding:6px 18px 12px; background:var(--dark);border-radius:14px} nav.open{display:flex} nav a{padding:16px 0 16px 14px;border-bottom:1px solid rgba(255,255,255,.10); font-size:17.5px;font-weight:700;color:#fff;letter-spacing:-.01em; position:relative;white-space:normal} nav a:last-child{border-bottom:0} nav a:hover{color:#fff} nav a[aria-current="page"]::after{display:none} nav a[aria-current="page"]::before{content:"";position:absolute;left:0;top:50%; transform:translateY(-50%);width:3px;height:20px;background:var(--red-dark); border-radius:2px} nav a:active{background:rgba(255,255,255,.06)} .navtoggle{display:inline-flex;margin-left:auto;flex:0 0 auto} .hrow{flex-wrap:wrap;gap:14px;align-items:center;padding:12px 0} /* Basis 0 statt auto: sonst beansprucht das Logo seine volle Textbreite, und der Menueknopf faellt bei 320 px darunter. */ .logo{flex:1 1 0;min-width:0} .headcall{margin-left:12px} } @media(max-width:760px){ /* Groessere Tippflaeche als der sichtbare Knopf: unsichtbar 7 px nach allen Seiten erweitert. Am Bildschirmrand trifft der Daumen ungenauer, und 46 px sind zwar ueber dem Mindestmass, aber knapp. */ .navtoggle{position:relative;width:46px;height:46px} .navtoggle::after{content:"";position:absolute;inset:-7px} .vkreihe{display:flex;gap:11px;overflow-x:auto;scroll-snap-type:x mandatory; overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch; scrollbar-width:none;margin:0 -18px;padding:2px 0 6px} .vkreihe::-webkit-scrollbar{display:none} .vk{flex:0 0 54%;scroll-snap-align:center} .vk:first-child{margin-left:18px} .vk:last-child{margin-right:18px} /* Der Randabstand kommt von den Karten, nicht vom Polster des Schiebers: Mit padding-right am Schieber meldete das Dokument 18 px Ueberlauf - schieben liess sich die Seite zwar nicht, aber die Ueberlaufpruefung schlug Alarm. */ .bkreihe{display:flex;gap:11px;overflow-x:auto;scroll-snap-type:x mandatory; overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch; scrollbar-width:none;margin:0 -18px;padding:2px 0 6px} .bkreihe::-webkit-scrollbar{display:none} .bk{flex:0 0 78%;scroll-snap-align:center;aspect-ratio:5/4} .bk:first-child{margin-left:18px} .bk:last-child{margin-right:18px} .bk-text b{font-size:19px} .navtoggle .nt-wort{position:absolute;width:1px;height:1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap} .navtoggle{padding:0;width:46px;justify-content:center} .navtoggle svg{width:23px;height:23px} .hero .btns,.hero .btnnote{display:none} .marke{height:31px} .logo{gap:9px} /* section.tight schlaegt sonst die allgemeine Handy-Regel und behaelt 40 px - hier ist der Abstand zum Raster aber schon Luft genug. */ section.tight{padding:26px 0} /* Zwei Spalten am Telefon. Vier waeren bei 375 px je 82 px breit - dort passt "Raedereinlagerung" nicht mehr lesbar hinein. */ .raster{grid-template-columns:repeat(2,1fr);gap:10px} .raster a{min-height:100px;padding:17px 9px;gap:9px} .raster svg{width:27px;height:27px} .raster b{font-size:13px} /* Abstand muss die Aktionsleiste ueberragen, sonst verschwindet die letzte Zeile der Fusszeile dahinter. Leiste ist 82 px hoch. */ body{font-size:16.5px;padding-bottom:92px} .wrap{padding:0 18px} section{padding:32px 0} .hero{padding-top:24px} /* Am Handy darf die Ueberschrift die ganze Breite nehmen. 15ch sind bei 339 px Textbreite nur zwei Drittel davon - die Zeile brach viermal um und schob die Knoepfe unter die Kante. */ .hero h1{max-width:none;margin-bottom:18px} /* Bildflaeche an die Fensterhoehe koppeln, nicht fest setzen. Sonst liegt auf einem 844 px hohen Telefon der erste Knopf knapp unter der Kante - dieselbe Falle wie auf dem iPhone SE, nur eine Groesse hoeher. */ .hero>.zone,.hero>.foto{height:min(26svh,250px);min-height:130px} .hero .herotext{padding-top:28px} .hero .meta{margin-bottom:20px} .hero .lede{margin-bottom:20px} .hero .pills{margin-bottom:20px} /* Bildflaechen randlos. Bei 375 px waren zwei Bilder nebeneinander je 167 px breit - zu klein, um einen Kratzer zu erkennen. Randlos sind es 187 px, und der Regler wirkt wie ein Bild statt wie zwei Briefmarken. */ .ba{max-width:none} .ba-stage,.ba-cap{margin-left:-18px;margin-right:-18px;border-radius:0} .bildband{margin-left:-18px;margin-right:-18px} .bildband .zone,.bildband .foto{border-radius:0} .ba+.ba{margin-top:26px} .ba-cap{padding:15px 18px 17px} .zone-cap{font-size:10.5px;letter-spacing:.07em;padding:10px 13px} .pills{gap:8px;margin-bottom:22px} .pill{font-size:14px;padding:8px 13px} /* Knoepfe untereinander und ueber die volle Breite. Nebeneinander werden sie bei zwei Woertern zu schmal fuer einen sicheren Treffer. */ .btns{flex-direction:column;align-items:stretch;gap:10px} .btns .btn{width:100%} .hero .btnnote{margin-bottom:40px} /* Ueberschriften enger stellen - bei 34 px Schrift wirken 1,04 Zeilen luftig genug, der Abstand darunter darf kleiner sein. */ .shead{margin-bottom:26px} .shead h2{margin-top:10px} .shead .lede{margin-top:14px} /* Am Handy war alles eine Spur zu klein. Fliesstext auf 17,5 px, Vorspann auf 19 - das liest sich einhaendig unterwegs deutlich ruhiger und wirkt nicht mehr gedraengt. */ .lede{font-size:19px;line-height:1.5} .cols{gap:16px} /* Karten am Telefon deutlich flacher - vorher stand unter dem Text viel leere Flaeche, und die Kachel sah aus wie eine Komponente aus einem Baukasten. */ .svc{padding:17px 16px} .svc h3{font-size:18.5px} .svc p{font-size:15.5px} .promise{padding:20px 18px} .faq summary{font-size:17.5px;padding:22px 44px 22px 0} .faq details p{font-size:16.5px} .plist .t{font-size:17px} .plist li{padding:14px 12px} .note,.copybox{font-size:16.5px} /* Ueberschriften bekommen mehr Gewicht statt mehr Groesse - bei 375 px wuerde groesser nur umbrechen. */ h2{letter-spacing:-.03em} .meta{font-size:12px;letter-spacing:.15em} /* Preisliste: Betrag unter den Namen statt daneben, sonst quetscht die Punktlinie beide Seiten. */ .plist li{flex-wrap:wrap;gap:2px 10px} .plist .dots{display:none} .plist .v{width:100%;font-size:18px;margin-top:2px} .c2,.c3,.c4,.factrow,.figs,.revs{grid-template-columns:1fr} .fgrid{grid-template-columns:repeat(2,1fr);gap:30px 24px} .fgrid>div:first-child{grid-column:1 / -1} .figs div{padding:22px 20px 22px 0} .headcall{display:none} .logo .l2{font-size:10px;letter-spacing:.13em;margin-top:5px} .mobilebar{display:flex} .offer{padding:24px 20px} .topbar .wrap{font-size:12.5px;gap:6px} form.contact{padding:22px 18px} .buchung{padding:18px} .feldpaar{grid-template-columns:1fr;gap:0} } /* ---- Kurze Bildschirme -------------------------------------------- Der Mangel des Entwurfs: Auf einem iPhone SE (375 x 667) fuellte die Bildflaeche den ersten Bildschirm allein - beide Handlungsknoepfe lagen unter der Kante. Auf niedrigen Fenstern schrumpft die Flaeche deshalb weiter, und Ueberschrift und Abstaende ruecken zusammen, bis der erste Knopf ohne Scrollen sichtbar ist. */ /* Drei Stufen, weil drei Telefongenerationen im Umlauf sind: 844 px hoch (aktuell), 667 px (SE, Mini) und 568 px (SE der ersten Reihe). Auf jeder Stufe schrumpfen Bildflaeche, Schriftgrad und Abstaende so weit, dass der erste Knopf ueber der Aktionsleiste steht. Gemessen, nicht geschaetzt. */ @media(max-height:800px) and (max-width:760px){ .hero>.zone,.hero>.foto{height:min(24svh,210px);min-height:112px} .hero .herotext{padding-top:20px} .hero .meta{margin-bottom:12px} .hero h1{font-size:29px;margin-bottom:12px} .hero .lede{font-size:17px;margin-bottom:16px} .hero .pills{margin-bottom:16px} .hero .btns{margin-bottom:12px} .hero .btnnote{margin-bottom:30px} .zone-cap{padding:8px 12px;font-size:10px} } @media(max-height:700px) and (max-width:760px){ .hero>.zone,.hero>.foto{height:min(24svh,190px);min-height:100px} .hero .herotext{padding-top:16px} .hero .meta{margin-bottom:10px} .hero h1{font-size:27px} /* Die Pille ist die verzichtbarste Zeile im Kopf - die Oeffnungszeit steht ohnehin in der Leiste darueber und in der Fusszeile. */ .hero .pills{display:none} } @media(max-height:600px) and (max-width:760px){ .hero>.zone,.hero>.foto{height:min(15svh,110px);min-height:70px} .hero .herotext{padding-top:14px} /* Auf 568 px Hoehe zaehlt jede Zeile. Die Ortszeile ueber der Ueberschrift steht auch in der Fusszeile und im Kopf - sie geht als Erstes, damit der Knopf oben bleibt. */ .hero .meta{display:none} .hero h1{font-size:25px;margin-bottom:10px} .hero .lede{font-size:16px;margin-bottom:12px} } /* ---- Vorschau-Leiste ---- Nur in der Fassung fuer die Testadresse. Gebranntes Orange, das sonst nirgends vorkommt - die Leiste soll sich nicht wie Teil der Seite anfuehlen. Weiss darauf 5,54:1. */ .vorschauleiste{background:#b8401b;color:#fff;font-size:13px;font-weight:600; padding:9px 20px;text-align:center;line-height:1.45} .vorschauleiste b{font-weight:800;text-transform:uppercase;letter-spacing:.08em} /* Wer im Betriebssystem Bewegung reduziert hat, bekommt keine. */ @media (prefers-reduced-motion:reduce){ .btn{transition:none} .btn:active{transform:none} .svc{transition:none} .ba-grip{transition:none} html{scroll-behavior:auto} } /* Der Griff darf beim Ziehen leicht nachgeben - aber nur, wenn Bewegung erwuenscht ist. */ @media (prefers-reduced-motion:no-preference){ .ba-js:active .ba-grip{transform:scale(1.06)} } @media print{header,.mobilebar,.topbar,.vorschauleiste{display:none}body{background:#fff}} /* Sehr niedrige Geraete - iPhone SE erster Generation und aehnliche mit 568 px Hoehe. Dort blieb der erste Knopf bis zu 59 px unter der festen Aktionsleiste. Der Kopfbereich wird gestrafft statt den Text weiter zu kuerzen: die Zeilen sind schon kurz, es waren die Abstaende. */ @media(max-width:760px) and (max-height:620px){ .hero{padding-top:12px} .hero .meta{margin-bottom:10px} .hero h1{margin-bottom:12px;font-size:clamp(25px,7.4vw,31px)} .hero .lede{margin-bottom:15px} .hero .pills{margin-bottom:14px} .hero .btns{gap:9px} } /* Sehr schmale Geraete (320 px). Dort reichte der Platz nicht mehr fuer Bildmarke, Wortmarke und Menueknopf nebeneinander - die Wortmarke ragte 14 px ueber ihren Kasten hinaus. Nur hier kleiner setzen; bei 360 px und darueber bleibt sie unveraendert. */ @media(max-width:345px){ .logo .l1{font-size:14px} .logo .l2{font-size:9px;letter-spacing:.11em} .marke{height:28px} } /* Schmale Geraete bis 385 px: Dort passte "Dellen, Kratzer, Reifen." bei 34 px nicht mehr in eine Zeile (340 px Text auf 339 px Platz). Die Ueberschrift brach dann dreizeilig und liess "Reifen." allein stehen. Eine Spur kleiner, und der feste Umbruch greift wieder wie gedacht. */ @media(max-width:385px){ .hero h1{font-size:clamp(24px,7.4vw,29px);line-height:1.06} }