/* Fahrschule Wühler – Website-Entwurf 2026 (Fassung 2: Flyer-Stil) */
@font-face{font-family:"Barlow";src:url("../fonts/barlow-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url("../fonts/barlow-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow";src:url("../fonts/barlow-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow";src:url("../fonts/barlow-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("../fonts/barlow-condensed-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("../fonts/barlow-condensed-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("../fonts/barlow-condensed-700i.woff2") format("woff2");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("../fonts/barlow-condensed-800i.woff2") format("woff2");font-weight:800;font-style:italic;font-display:swap}

:root{
  --blau:#1663b6;
  --blau-dunkel:#0d3d75;
  --blau-hell:#e4eef9;
  --orange:#f39200;
  --rot:#e2412c;
  --gruen:#1f9d55;
  --ink:#16202c;
  --text:#323c48;
  --grau:#69737f;
  --linie:#d8dee6;
  --flaeche:#f2f4f7;
  --breite:1180px;
  --gutter:clamp(16px,4vw,32px);
  --cond:"Barlow Condensed","Arial Narrow",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:110px}
body{margin:0;background:#fff;color:var(--text);font-family:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:17px;line-height:1.6;overflow-x:clip;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--blau);text-underline-offset:2px}
a:hover{color:var(--blau-dunkel)}
a[href^="tel:"]{white-space:nowrap}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
h1,h2,h3,h4{color:var(--ink);margin:0 0 .5em;line-height:1.1}
h1{font-family:var(--cond);font-weight:800;font-style:italic;text-transform:uppercase;font-size:clamp(2.4rem,5.5vw,4.2rem);letter-spacing:.005em;line-height:.95}
h2{font-family:var(--cond);font-weight:700;text-transform:uppercase;font-size:clamp(1.7rem,3vw,2.3rem);color:var(--blau-dunkel);letter-spacing:.01em}
h3{font-size:1.15rem;font-weight:700}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding:0}
blockquote{margin:0}
table{border-collapse:collapse;width:100%}
.icon{width:1.15em;height:1.15em;flex:none;vertical-align:-.18em}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px}
.skip:focus{top:12px}
.wrap{width:100%;max-width:calc(var(--breite) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter)}

/* Knöpfe */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:.6em 1.25em;border:2px solid var(--blau);border-radius:3px;background:var(--blau);color:#fff;font-family:var(--cond);font-weight:700;font-size:1.1rem;letter-spacing:.03em;text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.btn:hover{background:var(--blau-dunkel);border-color:var(--blau-dunkel);color:#fff}
.btn.orange{background:var(--orange);border-color:var(--orange);color:#1b1206}
.btn.orange:hover{background:#d98200;border-color:#d98200;color:#1b1206}
.btn.wa{background:var(--gruen);border-color:var(--gruen)}
.btn.wa:hover{background:#178246;border-color:#178246}
.btn.rand{background:transparent;color:var(--blau)}
.btn.rand:hover{background:var(--blau);color:#fff}
.btn.hell{background:transparent;border-color:rgba(255,255,255,.7);color:#fff}
.btn.hell:hover{background:#fff;color:var(--blau-dunkel)}
.btns{display:flex;flex-wrap:wrap;gap:10px}
.weiter{font-weight:700;text-decoration:none;white-space:nowrap}
.weiter::after{content:" →"}

/* Vorschau-Leiste */
.demo-leiste{background:#111;color:#cfcfcf;font-size:.78rem;line-height:1.4;padding:6px var(--gutter);text-align:center}
.demo-leiste strong{color:var(--orange)}

/* Kopfzeile */
.topbar{background:var(--blau-dunkel);color:#dce6f3;font-size:.9rem}
.topbar .wrap{display:flex;gap:22px;align-items:center;min-height:38px;flex-wrap:wrap}
.topbar a{color:#fff;text-decoration:none}
.topbar a:hover{text-decoration:underline;color:#fff}
.topbar .rechts{margin-left:auto;display:flex;gap:22px}
.topbar .icon{color:var(--orange);margin-right:5px}
@media (max-width:760px){.topbar .zeit{display:none}.topbar .wrap{gap:14px;justify-content:space-between}.topbar .rechts{margin-left:0}.topbar .mail{display:none}}
.header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--linie)}
.header.gescrollt{box-shadow:0 2px 10px rgba(0,0,0,.08)}
.header .wrap{display:flex;align-items:center;gap:20px;min-height:76px}
.logo{display:block;flex:none;line-height:0}
.logo img{height:54px;width:auto}
.nav{margin-left:auto}
.nav ul{display:flex;list-style:none;margin:0}
.nav a{display:block;padding:26px 11px 23px;font-family:var(--cond);font-weight:600;font-size:1.08rem;letter-spacing:.03em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:3px solid transparent}
.nav a:hover{color:var(--blau)}
.nav a[aria-current="page"]{color:var(--blau);border-bottom-color:var(--orange)}
.header .btn{min-height:44px;font-size:1rem}
.menu-btn{display:none;align-items:center;justify-content:center;width:46px;height:46px;border:1px solid var(--linie);border-radius:3px;background:#fff;color:var(--ink);cursor:pointer;margin-left:auto}
.menu-btn .icon{width:24px;height:24px}
@media (max-width:1120px){.nav,.header .btn{display:none}.menu-btn{display:inline-flex}.logo img{height:46px}.header .wrap{min-height:66px}}
.mobil-nav{position:fixed;inset:0;z-index:60;background:#fff;display:flex;flex-direction:column;padding:14px var(--gutter) 28px;overflow-y:auto}
.mobil-nav .zeile{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.mobil-nav .zeile img{height:42px}
.mobil-nav .menu-btn{display:inline-flex;margin:0}
.mobil-nav ul{list-style:none;margin:0 0 22px}
.mobil-nav ul a{display:block;padding:13px 2px;border-bottom:1px solid var(--linie);font-family:var(--cond);font-weight:700;font-size:1.45rem;text-transform:uppercase;color:var(--ink);text-decoration:none}
.mobil-nav ul a[aria-current="page"]{color:var(--blau)}
.mobil-nav .btns{flex-direction:column}
.mobil-nav .btn{width:100%}
body.nav-offen{overflow:hidden}

/* Schräges Banner wie auf den Flyern */
.banner{display:inline-block;background:var(--orange);color:#1b1206;transform:skewX(-14deg);padding:10px 26px;text-decoration:none}
.banner > span{display:inline-block;transform:skewX(14deg);font-family:var(--cond);font-weight:700;font-style:italic;text-transform:uppercase;font-size:1.25rem;letter-spacing:.02em;line-height:1.15}
.banner b{font-weight:800}
a.banner:hover{background:#d98200;color:#1b1206}
.banner.blau{background:var(--blau);color:#fff}

/* Startseite: Kopfbereich */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#d4e4f5 0%,#eef4fb 100%);padding:clamp(36px,5vw,64px) 0 0}
.hero::before,.hero::after{content:"";position:absolute;right:-4%;width:52%;transform:skewX(-35deg);transform-origin:top right}
.hero::before{top:0;height:26px;background:var(--orange)}
.hero::after{top:34px;height:10px;background:var(--blau)}
.hero .wrap{position:relative;display:grid;grid-template-columns:1fr 1.15fr;gap:24px;align-items:end}
.hero h1{margin-bottom:.35em}
.hero h1 .blau{color:var(--blau);display:block}
.hero p.unter{font-size:1.15rem;max-width:30em;color:var(--text)}
.hero .text{padding-bottom:clamp(36px,5vw,64px)}
.hero .fahrzeuge{margin:0 -2% 0 0;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,#000 38%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,#000 38%);mask-composite:intersect}
.hero .fahrzeuge img{width:100%}
.kursband{background:var(--blau);position:relative}
.kursband .wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap;min-height:72px;padding-top:12px;padding-bottom:12px}
.kursband .banner{margin-left:-8px}
.kursband p{margin:0;color:#fff;font-size:1.05rem}
.kursband .btn{margin-left:auto}
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr}
  .hero .text{padding-bottom:8px}
  .hero::before{height:16px}.hero::after{top:22px;height:7px}
  .kursband .btn{margin-left:0}
}

/* Infoleiste */
.infoleiste{border-bottom:1px solid var(--linie)}
.infoleiste .wrap{display:grid;grid-template-columns:repeat(3,1fr)}
.infoleiste .feld{padding:22px 24px 22px 0;border-right:1px solid var(--linie)}
.infoleiste .feld + .feld{padding-left:24px}
.infoleiste .feld:last-child{border-right:0}
.infoleiste .titel{display:block;font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--blau);font-size:1rem;margin-bottom:4px}
.infoleiste .feld p{margin:0;color:var(--ink);font-weight:500}
@media (max-width:760px){.infoleiste .wrap{grid-template-columns:1fr}.infoleiste .feld,.infoleiste .feld + .feld{padding:16px 0;border-right:0;border-bottom:1px solid var(--linie)}.infoleiste .feld:last-child{border-bottom:0}}

/* Abschnitte */
.abschnitt{padding:clamp(48px,6vw,80px) 0}
.abschnitt.grau{background:var(--flaeche)}
.abschnitt.blau{background:var(--blau-dunkel);color:#d7e2f0}
.abschnitt.blau h2,.abschnitt.blau h3{color:#fff}
.abschnitt.blau a:not(.btn){color:#fff}
.einleitung{max-width:44rem;margin-bottom:28px;font-size:1.08rem}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:start}
.zwei.mitte{align-items:center}
@media (max-width:860px){.zwei{grid-template-columns:1fr}}
.drei{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:900px){.drei{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.drei{grid-template-columns:1fr}}
.zwei > *,.drei > *,.inhalt-grid > *,.hero .wrap > *{min-width:0}

/* Ausbildungs-Kacheln (Startseite) */
.sparte{background:#fff;border:1px solid var(--linie);display:flex;flex-direction:column}
.sparte .bild{aspect-ratio:16/9;overflow:hidden;background:#dfe6ee}
.sparte .bild img{width:100%;height:100%;object-fit:cover}
.sparte .kopf{background:var(--blau);color:#fff;padding:12px 22px}
.sparte .kopf h3{color:#fff;margin:0;font-family:var(--cond);font-size:1.6rem;text-transform:uppercase;font-style:italic;font-weight:800}
.sparte.rot .kopf{background:var(--rot)}
.sparte .rumpf{padding:20px 22px 24px;flex:1;display:flex;flex-direction:column}
.sparte .rumpf .weiter{margin-top:auto}

/* Listen und Tabellen */
.liste{list-style:none;margin:0 0 1.2em}
.liste li{position:relative;padding-left:20px;margin-bottom:.4em}
.liste li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;background:var(--rot)}
.abschnitt.blau .liste li::before{background:var(--orange)}
.tabelle td,.tabelle th{padding:10px 12px 10px 0;border-bottom:1px solid var(--linie);text-align:left;vertical-align:top}
.tabelle th{font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--grau);font-size:.92rem}
.tabelle td b{color:var(--ink)}
.tabelle tr:last-child td{border-bottom:0}
.tabelle td:first-child:has(.klasse){white-space:nowrap;width:1%}
.klasse{display:inline-block;min-width:54px;text-align:center;font-family:var(--cond);font-weight:700;font-size:1.05rem;color:#fff;background:var(--blau);padding:2px 8px;border-radius:2px}
.klasse.rot{background:var(--rot)}
.tabelle-scroll{overflow-x:auto}

.nummern{padding-left:1.3em;margin:0 0 1.2em}
.nummern li{margin-bottom:.4em;padding-left:4px}
.nummern li::marker{color:var(--rot);font-weight:700}

.bike-logo{float:right;width:150px;margin:0 0 12px 24px}
@media (max-width:600px){.bike-logo{width:96px;margin-left:14px}}

/* Fotos */
.foto{margin:0 0 1.2em}
.foto img{width:100%;border-radius:2px}
.foto figcaption{font-size:.85rem;color:var(--grau);margin-top:6px}
.fotoreihe{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 1.2em}
.fotoreihe img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px}
.fotoreihe.vier{grid-template-columns:repeat(4,1fr)}
@media (max-width:600px){.fotoreihe,.fotoreihe.vier{grid-template-columns:1fr 1fr}}

/* Kacheln mit Bild und Bildunterschrift (Startseite "Außerdem") */
.bildkachel{position:relative;display:block;overflow:hidden;aspect-ratio:4/3;background:#dfe6ee;text-decoration:none}
.bildkachel img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.bildkachel:hover img{transform:scale(1.04)}
.bildkachel .unter{position:absolute;left:0;right:0;bottom:0;background:rgba(13,61,117,.92);color:#fff;padding:12px 16px}
.bildkachel .unter b{display:block;font-family:var(--cond);font-weight:700;font-size:1.35rem;text-transform:uppercase;line-height:1.1}
.bildkachel .unter span{font-size:.92rem;color:#dbe6f4}

/* Unterseiten: Seitenkopf + Inhalt mit Seitenleiste */
.seitenkopf{background:var(--blau);color:#fff;padding:34px 0 46px;clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),0 100%);position:relative}
.seitenkopf::after{content:"";position:absolute;right:0;top:0;width:28%;height:12px;background:var(--orange);transform:skewX(-30deg);transform-origin:top right}
.seitenkopf h1{color:#fff;margin:0;font-size:clamp(2.2rem,5vw,3.4rem)}
.brot{list-style:none;display:flex;gap:6px;flex-wrap:wrap;margin:0 0 8px;font-size:.88rem;color:#cfe0f3}
.brot a{color:#fff}
.inhalt-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:48px;padding-top:40px;padding-bottom:72px}
@media (max-width:960px){.inhalt-grid{grid-template-columns:1fr;gap:36px}}
.haupt h2{margin-top:1.4em}
.haupt > h2:first-child,.haupt > .einleitung:first-child + h2{margin-top:0}
.haupt h3{margin-top:1.3em}
.haupt .einleitung{font-size:1.15rem;color:var(--ink)}
.seite{display:flex;flex-direction:column;gap:20px}
.box{background:var(--flaeche);border-top:4px solid var(--blau);padding:18px 20px 20px}
.box h3{font-family:var(--cond);font-weight:700;text-transform:uppercase;font-size:1.3rem;letter-spacing:.02em;margin:0 0 10px}
.box p:last-child,.box ul:last-child{margin-bottom:0}
.box.kurs{background:var(--blau);border-top-color:var(--orange);color:#e3ecf7}
.box.kurs h3{color:#fff}
.box.kurs .datum{display:block;font-family:var(--cond);font-weight:800;font-style:italic;font-size:2.6rem;line-height:1;color:#fff;margin:4px 0 8px}
.box.kurs .tage{display:inline-block;background:var(--orange);color:#1b1206;font-weight:700;font-size:.9rem;padding:2px 10px;margin-bottom:10px}
.box.kurs a:not(.btn){color:#fff}
.box .kontaktzeile{display:flex;gap:10px;align-items:baseline;margin-bottom:6px}
.box .kontaktzeile .icon{color:var(--blau)}
.box .qr{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center}
.box .qr img{width:96px;height:96px}
.ferien{list-style:none;margin:0}
.ferien li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed var(--linie)}
.ferien li:last-child{border-bottom:0}

/* Hinweis */
.hinweis{border-left:4px solid var(--orange);background:#fff6e8;padding:12px 16px;margin:0 0 1.2em;color:var(--ink)}
.hinweis.blau{border-left-color:var(--blau);background:var(--blau-hell)}

/* B96-Rechner */
.rechner{border:2px solid var(--blau);margin:0 0 1.4em}
.rechner .titel{background:var(--blau);color:#fff;padding:10px 18px;font-family:var(--cond);font-weight:700;font-size:1.35rem;text-transform:uppercase}
.rechner .innen{display:grid;grid-template-columns:1fr 1fr;gap:0}
.rechner .eingabe{padding:18px}
.rechner .ausgabe{padding:18px;background:var(--flaeche);border-left:1px solid var(--linie)}
.rechner label{display:block;font-weight:700;color:var(--ink);margin-bottom:4px}
.rechner .feld{margin-bottom:16px}
.rechner .feld .zeile{display:flex;gap:10px;align-items:center}
.rechner input[type=number]{width:130px;font:inherit;font-weight:600;padding:8px 10px;border:1px solid #b9c3cf;border-radius:2px}
.rechner input[type=range]{width:100%;accent-color:var(--blau);margin-top:6px}
.rechner small{color:var(--grau);font-size:.85rem}
.rechner .summe{font-weight:700;color:var(--ink);padding-top:10px;border-top:1px solid var(--linie)}
.rechner .ergebnis{font-family:var(--cond);font-weight:800;font-style:italic;font-size:4rem;line-height:1;color:var(--blau)}
.rechner .ergebnis-label{font-family:var(--cond);font-weight:700;text-transform:uppercase;color:var(--grau)}
.rechner ol{list-style:none;margin:12px 0 0;font-size:.95rem}
.rechner ol li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-top:1px solid var(--linie)}
.rechner ol li b{white-space:nowrap}
.rechner ol li.aus{color:#9aa3ad}
.rechner ol li.ja b{color:#b35f00}
.rechner ol li.nein b{color:var(--gruen)}
.rechner .beispiele{margin:4px 0 0;font-size:.9rem;color:var(--grau)}
.rechner .beispiele button{font:inherit;font-size:.9rem;color:var(--blau);background:none;border:0;padding:0;text-decoration:underline;cursor:pointer;margin-right:10px}
@media (max-width:640px){.rechner .innen{grid-template-columns:1fr}.rechner .ausgabe{border-left:0;border-top:1px solid var(--linie)}}

/* Checkliste */
.checkliste{list-style:none;margin:0 0 1em;border-top:1px solid var(--linie)}
.checkliste li{border-bottom:1px solid var(--linie)}
.checkliste label{display:flex;gap:14px;align-items:flex-start;padding:12px 2px;cursor:pointer}
.checkliste input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--blau);flex:none}
.checkliste b{color:var(--ink)}
.checkliste span span{display:block;color:var(--grau);font-size:.93rem}
.fortschritt{font-weight:700;color:var(--ink);margin-bottom:8px}
.fortschritt .balken{display:block;height:8px;background:var(--linie);margin-top:6px}
.fortschritt .balken i{display:block;height:100%;width:0;background:var(--blau);transition:width .3s}

/* Team */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:0 0 1.2em}
.team figure{margin:0}
.team img{width:100%;max-width:200px;aspect-ratio:4/5;object-fit:cover;border-radius:2px;background:#dfe6ee}
.team figcaption{padding-top:10px}
.team figcaption b{display:block;color:var(--ink);font-family:var(--cond);font-size:1.4rem;text-transform:uppercase;font-weight:700}
.team .liste{font-size:.95rem;margin-top:6px}
@media (max-width:700px){.team{grid-template-columns:1fr 1fr}}
@media (max-width:440px){.team{grid-template-columns:1fr}}

/* Kontakt */
.formular{display:grid;gap:12px}
.formular label{font-weight:600;color:var(--ink);display:grid;gap:4px;font-size:.95rem}
.formular input,.formular select,.formular textarea{font:inherit;padding:10px 12px;border:1px solid #b9c3cf;border-radius:2px;background:#fff;color:var(--ink);width:100%}
.formular input:focus,.formular select:focus,.formular textarea:focus{outline:2px solid var(--blau);outline-offset:0;border-color:var(--blau)}
.formular textarea{min-height:110px;resize:vertical}
.formular .reihe{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.formular .reihe{grid-template-columns:1fr}}
.kontakt-tabelle td{padding:8px 14px 8px 0;border-bottom:1px solid var(--linie);vertical-align:top}
.kontakt-tabelle td:first-child{font-weight:600;color:var(--grau);white-space:nowrap}
.kontakt-tabelle td b{color:var(--ink)}
.kontakt-tabelle a{overflow-wrap:anywhere}

/* Fußzeile */
.footer{background:#0b1a2e;color:#a7b3c2;font-size:.95rem;padding:48px 0 22px;border-top:6px solid var(--orange)}
.footer a{color:#e3eaf3;text-decoration:none}
.footer a:hover{text-decoration:underline;color:#fff}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px}
.footer h4{color:#fff;font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:1.05rem;margin:0 0 12px}
.footer ul{list-style:none;margin:0;display:grid;gap:6px}
.footer .logo{display:inline-block;background:#fff;padding:8px 12px;border-radius:2px;margin-bottom:14px}
.footer .logo img{height:46px}
.footer .unten{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:36px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);font-size:.85rem}
.footer .unten nav{display:flex;gap:16px}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.footer-grid{grid-template-columns:1fr}}

.klein{font-size:.9rem}
.grau-text{color:var(--grau)}
.mt{margin-top:1.4em}
.mb-0{margin-bottom:0}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}