/* Quoto Website · Markenauftritt Variante B (Ablesa-Farben, Zählrolle).
   Schriften liegen lokal, damit beim Aufruf keine Daten an Dritte gehen. */

@font-face{font-family:"Barlow";font-weight:400;font-display:swap;src:url(fonts/barlow-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:500;font-display:swap;src:url(fonts/barlow-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:600;font-display:swap;src:url(fonts/barlow-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:500;font-display:swap;src:url(fonts/barlow-condensed-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:600;font-display:swap;src:url(fonts/barlow-condensed-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-weight:700;font-display:swap;src:url(fonts/bricolage-grotesque-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-weight:800;font-display:swap;src:url(fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2")}

:root{
  --nacht:#192e40; --rolle:#c8381f; --rolle-text:#b8331c; --berg:#67acd9; --eis:#d1ebff; --wald:#48733d;
  --bg:#f3f8fc; --flaeche:#ffffff; --text:#192e40; --text-2:#33495d; --leise:#55687a; --linie:#d3e0eb;
  --band:#192e40; --band-text:#e8f3fc; --band-leise:#a9bfd3; --chip:#e4f2fd;
  --f-display:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;
  --f-text:"Barlow","Helvetica Neue",Arial,system-ui,sans-serif;
  --f-zahl:"Barlow Condensed","Arial Narrow",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0f1d29; --flaeche:#172a3a; --text:#e8f3fc; --text-2:#c6d6e4; --leise:#9fb3c6; --linie:#2c4a63;
  --rolle-text:#ff8f78; --band:#0a151e; --chip:#1d3549; color-scheme:dark}}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:400 18px/1.6 var(--f-text);-webkit-text-size-adjust:100%}
img,svg{display:block}
a{color:inherit;text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:3px solid var(--berg);outline-offset:3px;border-radius:4px}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;background:var(--flaeche);padding:8px 12px;z-index:10}

/* Wortmarke: "quot" plus rote Zählrolle mit dem Anteils-o */
.marke{display:inline-flex;align-items:center;gap:.07em;font:800 32px/1 var(--f-display);letter-spacing:-.045em;color:inherit;text-decoration:none}
.marke .quot{transform:translateY(-.06em)}
.rolle{width:.82em;height:.92em;border-radius:.13em;background:var(--rolle);display:inline-flex;align-items:center;justify-content:center;
  box-shadow:inset 0 .07em .05em -.04em rgba(0,0,0,.35),inset 0 -.07em .05em -.04em rgba(0,0,0,.35)}
.rolle svg{width:.56em;height:.56em;overflow:visible}

/* Kopf */
.kopf{background:var(--band);color:var(--band-text)}
.kopf nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;flex-wrap:wrap}
.kopf nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.kopf nav ul a{text-decoration:none;font-weight:500;color:var(--band-leise)}
.kopf nav ul a:hover{color:var(--band-text)}

.hero{padding:64px 0 80px}
.eyebrow{font:600 14px/1.2 var(--f-zahl);letter-spacing:.12em;text-transform:uppercase;color:var(--band-leise)}
.hero h1{font:800 clamp(44px,8vw,88px)/1 var(--f-display);letter-spacing:-.035em;margin:16px 0 0}
.hero h1 .r{color:#ff8f78}
.hero p.lead{font-size:clamp(19px,2.2vw,22px);color:var(--band-leise);max-width:40ch;margin:22px 0 0}
.knoepfe{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.knopf{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:10px;font-weight:600;text-decoration:none;border:1.5px solid transparent}
.knopf.haupt{background:var(--rolle);color:#fff}
.knopf.haupt:hover{background:#a92f19}
.knopf.neben{border-color:#3d5a73;color:var(--band-text)}
.knopf.neben:hover{border-color:var(--band-leise)}

/* Zählwerk im Hero: Beispielrechnung je Mieter */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:48px;align-items:center}
.schild{background:var(--flaeche);color:var(--text);border-radius:12px;overflow:hidden;border:1.5px solid var(--linie)}
.schild .titel{display:flex;justify-content:space-between;padding:12px 18px;background:#0f1d29;color:var(--band-text);font:600 14px/1.2 var(--f-zahl);letter-spacing:.1em;text-transform:uppercase}
.schild table{width:100%;border-collapse:collapse;font-size:16px}
.schild td{padding:11px 18px;border-bottom:1.5px solid var(--linie)}
.schild td.b{text-align:right;white-space:nowrap;font:600 19px var(--f-zahl);font-variant-numeric:tabular-nums}
.schild tr:last-child td{border-bottom:0;background:var(--chip);font-weight:600}
.schild .fuss{padding:10px 18px;font-size:13px;color:var(--leise);border-top:1.5px solid var(--linie)}

/* Abschnitte */
section{padding:72px 0}
section + section{border-top:1.5px solid var(--linie)}
h2{font:700 clamp(30px,4vw,42px)/1.12 var(--f-display);letter-spacing:-.02em;margin:0;max-width:24ch;text-wrap:balance}
h3{font:700 21px/1.25 var(--f-display);margin:0}
.lead2{color:var(--text-2);max-width:62ch;margin:16px 0 0}
.raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:36px}
.karte{background:var(--flaeche);border:1.5px solid var(--linie);border-radius:12px;padding:24px;min-width:0}
.karte p{margin:8px 0 0;color:var(--text-2);font-size:17px}
.schritte{list-style:none;counter-reset:s;padding:0;margin:36px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.schritte li{counter-increment:s;min-width:0}
.schritte li::before{content:counter(s);display:flex;align-items:center;justify-content:center;width:44px;height:50px;border-radius:7px;background:var(--rolle);color:#fff;font:600 28px/1 var(--f-zahl);margin-bottom:14px;
  box-shadow:inset 0 4px 3px -2px rgba(0,0,0,.3),inset 0 -4px 3px -2px rgba(0,0,0,.3)}
.schritte p{margin:8px 0 0;color:var(--text-2);font-size:17px}
.liste{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px 32px}
.liste li{padding-left:28px;position:relative}
.liste li::before{content:"";position:absolute;left:0;top:.55em;width:14px;height:8px;border-left:2.5px solid var(--wald);border-bottom:2.5px solid var(--wald);transform:rotate(-45deg)}
@media (prefers-color-scheme:dark){.liste li::before{border-color:#92bf63}}
.chip{display:inline-block;font:600 13px/1.6 var(--f-zahl);letter-spacing:.06em;text-transform:uppercase;padding:0 8px;border-radius:99px;background:var(--chip);color:var(--text);margin-left:6px;vertical-align:2px}

.cta{background:var(--band);color:var(--band-text);border-radius:16px;padding:44px;display:grid;gap:20px}
.cta p{color:var(--band-leise);margin:0;max-width:56ch}

/* Fuß */
footer{padding:40px 0 56px;color:var(--leise);font-size:15px;border-top:1.5px solid var(--linie)}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
footer ul{display:flex;gap:20px;list-style:none;margin:0;padding:0}

/* Rechtstexte */
.text{max-width:72ch;padding:56px 0 80px}
.text h1{font:800 clamp(34px,5vw,48px)/1.1 var(--f-display);letter-spacing:-.02em;margin:0 0 24px}
.text h2{font-size:24px;margin:36px 0 8px;max-width:none}
.text p,.text li{color:var(--text-2)}
.platzhalter{background:#fff3cd;color:#5c4400;padding:0 4px;border-radius:3px}
@media (prefers-color-scheme:dark){.platzhalter{background:#4a3b00;color:#ffe9a6}}

@media (max-width:760px){
  .hero{padding:40px 0 56px}
  .hero-grid{grid-template-columns:1fr;gap:36px}
  section{padding:52px 0}
  .cta{padding:28px 22px}
  .kopf nav ul{display:none}
  .schild td{padding:10px 14px}
  body{font-size:17px}
}