/* Charakter werkstatt: Archivo breit 800 / Source Sans 3. Hart, hoher Kontrast, keine Radien,
   dicke Linien in Tinte, Telefonzeile oben, Leistungen als nummerierte Liste, Einzugsgebiet als Ortsliste. */
:root{
  --schrift-ueberschrift:'Archivo',system-ui,"Helvetica Neue",Arial,sans-serif;
  --schrift-text:'Source Sans 3',system-ui,"Helvetica Neue",Arial,sans-serif;
  --gewicht-ueberschrift:800;
  --laufweite-ueberschrift:-.02em;
  --radius:0;
  --linie-staerke:2px;
  --groesse-3:clamp(2.25rem,1.2rem + 4.2vw,4.5rem);
  --zeile:1.5;
}
@media (prefers-color-scheme:light){:root{--papier:#FFFFFF;--linie:#D9DDE2}}

h1,h2,.wortmarke,.zahlen b{font-stretch:118%}
h1{text-transform:uppercase;line-height:.98;max-width:20ch}
h2{font-stretch:112%}
.abschnitt > h2{font-size:clamp(1.5rem,1.1rem + 1.4vw,2.25rem);text-transform:uppercase;letter-spacing:-.01em}
.wortmarke{font-size:1.625rem;text-transform:uppercase}
.vorzeile{color:var(--tinte);font-weight:700}

/* Telefonzeile oben */
.telefonzeile{background:var(--tinte);color:var(--papier)}
.telefonzeile-innen{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem var(--raum-3);padding-block:.55rem;font-size:.9375rem}
.telefonzeile a{color:inherit;text-decoration:none}
.telefonzeile a:hover{text-decoration:underline}
.telefonzeile .notruf{font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.telefonzeile .nummer{font-family:var(--schrift-ueberschrift);font-weight:800;font-stretch:112%;font-size:1.125rem;background:var(--zweit-knopf);color:var(--zweit-text);padding:.15rem .6rem}
.telefonzeile .nummer:hover{background:var(--zweit-hell);text-decoration:none}

.kopf{border-bottom:3px solid var(--tinte)}
.kopf nav a{font-weight:600}
.kopf nav a[aria-current]{border-bottom:3px solid var(--zweit)}

.knopf{background:var(--zweit-knopf);color:var(--zweit-text);border-color:var(--zweit-knopf);text-transform:uppercase;letter-spacing:.04em;font-stretch:112%}
.knopf:hover{background:var(--tinte);border-color:var(--tinte);color:var(--papier)}
.knopf-still{background:transparent;color:var(--tinte);border:2px solid var(--tinte)}
.knopf-still:hover{background:var(--tinte);color:var(--papier)}

.zahlen{border-block:3px solid var(--tinte);gap:var(--raum-3) var(--raum-5)}
.zahlen b{color:var(--tinte);font-size:clamp(1.75rem,1.3rem + 1.6vw,2.5rem)}
.zahlen span{color:var(--tinte);font-weight:600}

.abschnitt + .abschnitt{border-top:3px solid var(--tinte)}

/* Leistungen als nummerierte Liste */
.leistungen{counter-reset:leistung;border-top:2px solid var(--tinte)}
.leistungen li{counter-increment:leistung;grid-template-columns:3.5rem minmax(0,19rem) minmax(0,1fr);border-bottom:2px solid var(--tinte);align-items:start}
.leistungen li::before{content:counter(leistung,decimal-leading-zero);font-family:var(--schrift-ueberschrift);font-weight:800;font-stretch:118%;font-size:1.5rem;line-height:1;color:var(--akzent-lesbar);padding-top:.1rem}
.leistungen h3{font-size:1.375rem;font-stretch:110%;letter-spacing:-.01em}
.leistungen-ausfuehrlich li{grid-template-columns:3.5rem minmax(0,1fr)}
.leistungen-ausfuehrlich h3{grid-column:2}
.leistungen-ausfuehrlich li > div{grid-column:2}
@media (max-width:40rem){.leistungen li{grid-template-columns:3rem minmax(0,1fr)}.leistungen li p{grid-column:2}}

.frage{border-top:2px solid var(--linie)}
.frage h3{font-family:var(--schrift-ueberschrift);font-stretch:108%;font-size:1.25rem}

/* Einzugsgebiet als Ortsliste */
.orte{gap:.5rem .75rem}
.orte li{border:2px solid var(--tinte);padding:.25rem .7rem;font-weight:600}
.orte li::after{content:none}

.zeiten th{color:var(--tinte);font-weight:700}
.figur figcaption{font-weight:600;color:var(--tinte)}
.fuss{border-top:3px solid var(--tinte)}
.muster{border-left:4px solid var(--zweit)}