/* installateur-notdienst-in-graz.at · Stilwelt P Plakativ (02.11.2026), Anker A „Notruf-Tafel“
   F8 Pflaume mit Signalfarbe Beere · S8 Big Shoulders Display und Work Sans
   Harte Kanten (0 bis 2 px), keine Schatten, Vollflächen, schmale Großschrift, große Knöpfe, Rufnummer immer sichtbar */
:root{
  --signal:#A8165A;--signal-tief:#8A1149;--signal-hell:#FF8DC0;--auf-signal:#FFD9EA;
  --pflaume:#4B1F3F;--tief:#2E1227;--nacht:#1A0B16;
  --grau:#EEEEEC;--linie:#1A0B16;--weiss:#FFFFFF;--tinte:#1D1520;--tinte-2:#4A3F4B;
  --anzeige:"Big Shoulders Display",sans-serif;--text:"Work Sans",sans-serif;
  --rand:clamp(16px,4.4vw,64px);--kopf:76px;
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{font-size:17px;scroll-padding-top:96px}
body{font-family:var(--text);color:var(--tinte);background:var(--grau);line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:inherit}
p a,li a,dd a,td a{color:var(--signal);font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
p a:hover,li a:hover{text-decoration-thickness:3px}
::selection{background:var(--signal);color:var(--weiss)}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
.tab{font-variant-numeric:tabular-nums;white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:50;background:var(--weiss);padding:10px 16px}
.skip:focus{left:8px}
ul,ol{list-style:none}

/* Kopf: Nacht mit Rufnummer als Signalblock */
.kopf{position:relative;z-index:20;display:flex;align-items:stretch;gap:28px;min-height:var(--kopf);padding:0 0 0 var(--rand);background:var(--nacht);color:var(--weiss);font-size:.92rem}
.marke{display:flex;flex-direction:column;justify-content:center;min-height:44px;text-decoration:none;font-family:var(--anzeige);font-weight:800;font-size:1.35rem;letter-spacing:.02em;text-transform:uppercase;line-height:1}
.marke small{font-family:var(--text);font-weight:600;font-size:.64rem;letter-spacing:.16em;margin-top:6px;color:var(--signal-hell)}
.kopf nav{display:flex;align-items:center;gap:22px;margin-left:12px}
.kopf nav a{text-decoration:none;font-weight:600;padding:8px 0;border-bottom:3px solid transparent}
.kopf nav a:hover,.kopf nav a[aria-current]{border-color:var(--signal-hell)}
.kopf-tel{margin-left:auto;display:flex;flex-direction:column;justify-content:center;padding:0 24px;background:var(--signal);text-decoration:none;line-height:1.25}
.kopf-tel b{font-size:1.3rem;font-weight:800;letter-spacing:.01em}
.kopf-tel small{display:block;font-size:.74rem;font-weight:600;color:var(--auf-signal)}
.kopf .knopf{align-self:center;margin-right:16px;min-height:48px;padding:0 20px;font-size:.88rem;background:var(--weiss);color:var(--nacht)}
.kopf [data-nach-hero]{display:none}
.kopf [data-nach-hero].zeigen{display:inline-flex}
.menue-knopf{display:none}

/* Knöpfe: groß, eckig, Großbuchstaben */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:60px;padding:0 28px;font:800 1.02rem/1.1 var(--text);letter-spacing:.05em;text-transform:uppercase;border-radius:2px;border:0;cursor:pointer;text-decoration:none;background:var(--signal);color:var(--weiss)}
.knopf:hover{background:var(--signal-tief)}
.knopf svg{width:20px;height:20px;flex:none}
.knopf-tel{display:inline-flex;align-items:center;gap:12px;min-height:60px;padding:0 26px;background:var(--nacht);color:var(--weiss);border-radius:2px;font-weight:800;font-size:1.35rem;letter-spacing:.02em;text-decoration:none}
.knopf-tel svg{width:22px;height:22px}
.aktionen{display:flex;flex-wrap:wrap;align-items:stretch}

/* Hero: Signalfläche, große Zeile, H1 klein darüber, Hero-H2, Knopf mit Rufnummer, Blöcke */
.hero{position:relative;background:var(--signal);color:var(--weiss)}
.hero-inhalt{display:flex;flex-direction:column}
.hero h1{order:-1;font:700 .95rem/1.3 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--auf-signal);margin-bottom:14px}
.hero-marke{font-family:var(--anzeige);font-weight:800;text-transform:uppercase;line-height:.84;letter-spacing:-.005em;font-size:clamp(3.6rem,7.6vw,7.6rem)}
.hero-h2,.hero-text{font:600 clamp(1.2rem,1.9vw,1.55rem)/1.28 var(--text);margin-top:20px;max-width:28ch}
.hero-text{max-width:42ch;font-weight:500}
.hero .aktionen{margin-top:32px}
.hero .aktionen .knopf{background:var(--weiss);color:var(--signal)}
.hero .aktionen .knopf:hover{background:var(--grau)}
.badges{display:flex;flex-wrap:wrap;margin-top:22px}
.badge{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 16px;font-size:.9rem;font-weight:700;line-height:1.25;border:2px solid var(--weiss)}
.badge:first-child{background:var(--nacht);border-color:var(--nacht)}
.badge+.badge{border-left:0}
.badge svg{width:20px;height:20px;flex:none}
.badges .vermittlungshinweis{font-size:.9rem}
.bildnachweis{font-size:.72rem;line-height:1.35;color:var(--tinte-2);margin-top:6px}
.bildnachweis a{color:inherit;font-weight:400}
.hero .bildnachweis{position:absolute;z-index:3;right:14px;bottom:10px;margin:0;color:#fff;text-shadow:0 1px 3px #000}

.hero-start{display:grid;grid-template-columns:58% 42%;grid-template-rows:1fr auto;min-height:calc(100vh - var(--kopf));min-height:calc(100svh - var(--kopf))}
.hero-start .hero-inhalt{justify-content:flex-end;padding:56px 56px 48px var(--rand)}
.hero-start .bild,.hero-unter .bild{position:relative;overflow:hidden;background:var(--nacht);min-height:320px}
.hero-start .bild img,.hero-unter .bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:30% 30%}
.leiste{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--nacht);color:var(--weiss)}
.leiste a{display:flex;align-items:center;gap:18px;min-height:120px;padding:18px 26px;border-right:2px solid #3a2235;text-decoration:none;font-weight:700;font-size:1.08rem;line-height:1.25}
.leiste a:last-child{border-right:0}
.leiste a:hover{background:var(--tief)}
.leiste b{font-family:var(--anzeige);font-weight:800;font-size:3.6rem;line-height:1;color:var(--signal-hell)}

.hero-unter{display:grid;grid-template-columns:minmax(0,1fr) 44%;min-height:540px}
.hero-unter .hero-inhalt{justify-content:center;padding:64px 56px 64px var(--rand)}
.hero-unter .hero-marke,.hero-ohne .hero-marke{font-size:clamp(3.2rem,6.4vw,6.4rem)}
.hero-ohne{padding:64px var(--rand) 56px}
.brotkrume ol{display:flex;flex-wrap:wrap;gap:6px;font-size:.86rem;margin-bottom:22px;color:var(--auf-signal)}
.brotkrume li+li::before{content:"/";margin-right:6px}
.brotkrume a{color:var(--weiss);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* Antwortabsatz: weiße Tafel mit harter Kante */
.antwort{padding:48px var(--rand);background:var(--weiss);border-bottom:6px solid var(--linie)}
.antwort p{max-width:62ch;font-size:1.28rem;line-height:1.5;font-weight:500}

/* Abschnitte: harte Farbwechsel. Grau, Weiß, Signal, Nacht */
main{display:block}
.abschnitt{padding:80px var(--rand)}
.innen{max-width:1200px;margin:0 auto}
.abschnitt h2{font-family:var(--anzeige);font-weight:800;text-transform:uppercase;font-size:clamp(2.2rem,4vw,3.4rem);line-height:.92;letter-spacing:-.005em;max-width:20ch;margin-bottom:22px}
.abschnitt h3{font-size:1.15rem;font-weight:800;line-height:1.3;margin:24px 0 8px}
.abschnitt p{max-width:64ch;margin-bottom:14px;font-size:1.04rem}
.einleitung{font-size:1.16rem!important;font-weight:500}
.abschnitt.hell{background:var(--weiss)}
.abschnitt.zart{background:var(--signal);color:var(--weiss)}
.abschnitt.dunkel{background:var(--nacht);color:var(--weiss)}
.abschnitt.zart p a,.abschnitt.zart li a,.abschnitt.dunkel p a,.abschnitt.dunkel li a{color:var(--weiss)}
.abschnitt.dunkel .einleitung{color:var(--weiss)}
.zwei{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center}
.zwei.oben{align-items:start}
figure{margin:0}
.zwei figure img{width:100%;height:auto}
.zwei figure .bildnachweis{margin-top:8px}
.abschnitt.zart .bildnachweis,.abschnitt.dunkel .bildnachweis{color:var(--auf-signal)}
.zeichnung{background:var(--weiss);border:4px solid var(--linie);padding:24px}
.zeichnung img{width:100%;height:auto;max-height:440px}
.zeichnung figcaption{font-size:.9rem;font-weight:600;margin-top:10px;text-align:center;color:var(--tinte)}

/* Kosten: wenige große Zahlen, Tabellen mit harten Linien */
.tafel-wrap{overflow-x:auto}
.tafel{width:100%;border-collapse:collapse;margin:8px 0 14px;background:var(--weiss);color:var(--tinte);border:3px solid var(--linie);font-size:1rem}
.tafel th,.tafel td{text-align:left;padding:14px 18px;border-bottom:2px solid var(--linie);vertical-align:top}
.tafel thead th{background:var(--nacht);color:var(--weiss);font-weight:800;font-size:.86rem;letter-spacing:.08em;text-transform:uppercase}
.tafel td.zahl{font-family:var(--anzeige);font-weight:800;font-size:1.7rem;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--signal)}
.tafel td small{display:block;font-family:var(--text);font-weight:500;font-size:.8rem;color:var(--tinte-2);margin-top:6px;white-space:normal}
.preis-hinweis{font-size:.92rem!important;font-weight:600}
.quelle{font-size:.86rem!important}
.zahl-gross{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:18px 0 24px;background:var(--weiss);color:var(--tinte);border:3px solid var(--linie)}
.zahl-gross div{padding:22px 22px 20px;border-top:8px solid var(--signal)}
.zahl-gross div+div{border-left:3px solid var(--linie)}
.zahl-gross b{display:block;font-family:var(--anzeige);font-weight:800;font-size:3.2rem;line-height:.9;font-variant-numeric:tabular-nums;color:var(--signal)}
.zahl-gross span{display:block;font-size:.95rem;margin-top:12px;line-height:1.4;font-weight:500}

/* Notfälle auf der Startseite: harte Blöcke */
.faelle{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:10px;border:3px solid var(--linie);background:var(--linie);gap:3px}
.faelle a{display:grid;grid-template-columns:52px 1fr 24px;gap:18px;align-items:center;padding:22px 22px;background:var(--weiss);text-decoration:none;min-height:104px}
.faelle a:hover{background:var(--grau)}
.faelle .ic{width:52px;height:52px;background:var(--signal);color:var(--weiss);display:grid;place-items:center}
.faelle .ic svg{width:28px;height:28px}
.faelle b{display:block;font-size:1.12rem;font-weight:800;line-height:1.25}
.faelle span.zeile{display:block;font-size:.94rem;color:var(--tinte-2);line-height:1.4;margin-top:3px}
.faelle .pfeil{width:24px;height:24px;color:var(--signal)}
.nicht-hier{margin-top:18px!important;font-size:.95rem!important;font-weight:600}

/* Sofort oder warten: zwei harte Blöcke */
.gegenueber{display:grid;grid-template-columns:1fr 1fr;margin:6px 0 18px;border:3px solid var(--linie)}
.gegenueber div{padding:22px 24px;background:var(--signal);color:var(--weiss)}
.gegenueber div.warten{background:var(--weiss);color:var(--tinte);border-left:3px solid var(--linie)}
.gegenueber h3{margin-top:0;font-family:var(--anzeige);font-size:1.7rem;text-transform:uppercase;line-height:1}
.gegenueber li{position:relative;padding-left:24px;margin:8px 0;line-height:1.45;font-weight:600}
.gegenueber li::before{content:"";position:absolute;left:0;top:.5em;width:12px;height:12px;background:var(--weiss)}
.gegenueber .warten li::before{background:var(--signal)}
.zwei .gegenueber{grid-template-columns:1fr}
.zwei .gegenueber div.warten{border-left:0;border-top:3px solid var(--linie)}

/* Nummern 128, 122, Holding */
.nummern{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:10px 0 18px;border:3px solid var(--weiss)}
.nummern div{padding:20px 22px}
.nummern div+div{border-left:3px solid var(--weiss)}
.nummern b{display:block;font-family:var(--anzeige);font-weight:800;font-size:3.4rem;line-height:.9;color:var(--signal-hell);font-variant-numeric:tabular-nums}
.nummern span{display:block;margin-top:10px;font-size:.98rem;line-height:1.45}
.abschnitt:not(.dunkel) .nummern{border-color:var(--linie);background:var(--weiss);color:var(--tinte)}
.abschnitt:not(.dunkel) .nummern div+div{border-color:var(--linie)}
.abschnitt:not(.dunkel) .nummern b{color:var(--signal)}

/* Prüfliste: Zeilen mit quadratischem Signalfeld */
.pruefliste{margin:8px 0 18px;border-top:3px solid currentColor}
.pruefliste li{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:center;padding:12px 0;border-bottom:2px solid currentColor;line-height:1.45;font-weight:500}
.pruefliste .ic{width:44px;height:44px;display:grid;place-items:center;background:var(--signal);color:var(--weiss)}
.pruefliste .ic svg{width:24px;height:24px}
.abschnitt.zart .pruefliste .ic{background:var(--nacht)}
.abschnitt.dunkel .pruefliste .ic{background:var(--signal)}

/* Ablauf: große nummerierte Blöcke */
.schritte{counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:18px 0 24px;border:3px solid currentColor}
.schritte li{counter-increment:s;padding:20px 22px 22px}
.schritte li+li{border-left:3px solid currentColor}
.schritte li::before{content:counter(s);display:block;font-family:var(--anzeige);font-weight:800;font-size:4rem;line-height:.85;color:var(--signal);margin-bottom:12px}
.abschnitt.dunkel .schritte li::before{color:var(--signal-hell)}
.abschnitt.zart .schritte li::before{color:var(--weiss)}
.schritte b{display:block;font-size:1.12rem;font-weight:800;margin-bottom:6px;line-height:1.3}
.schritte span{display:block;line-height:1.5;font-size:1rem}
.schritte.senkrecht{grid-template-columns:1fr}
.schritte.senkrecht li{display:grid;grid-template-columns:72px 1fr;gap:6px 18px;align-items:start}
.schritte.senkrecht li+li{border-left:0;border-top:3px solid currentColor}
.schritte.senkrecht li::before{grid-row:span 2;margin:0}

/* Feiertage: Datumsblöcke */
.feiertage{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));margin:8px 0 16px;border:3px solid var(--linie);background:var(--linie);gap:3px}
.feiertage li{background:var(--weiss);padding:14px 16px;line-height:1.35}
.feiertage time{display:block;font-family:var(--anzeige);font-weight:800;font-size:1.5rem;text-transform:uppercase;color:var(--signal);font-variant-numeric:tabular-nums}
.feiertage span{font-weight:600}

/* Bezirke */
.bezirke{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));margin:14px 0 18px;gap:0}
.bezirke a{margin:0 -3px -3px 0;border:3px solid var(--linie);display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;padding:8px 16px;background:var(--weiss);text-decoration:none;font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-size:.92rem}
.bezirke a:hover{background:var(--signal);color:var(--weiss)}
.bezirke svg{width:18px;height:18px;flex:none}
.bezirk-zeilen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px;margin:10px 0 16px;border-top:3px solid currentColor}
.bezirk-zeilen li{padding:14px 0;border-bottom:2px solid currentColor;line-height:1.45}
.bezirk-zeilen a{font-family:var(--anzeige);font-weight:800;font-size:1.5rem;text-transform:uppercase;color:var(--signal);text-decoration:none}
.bezirk-zeilen span{display:block;font-size:.98rem;margin-top:3px}
.abschnitt.dunkel .bezirk-zeilen a{color:var(--signal-hell)}

/* Karte: Farben der Stilwelt, harte Kante */
.karte-abschnitt .zwei{align-items:start}
.fplie-karte{--k-umland:#DCD6DC;--k-land:#FFFFFF;--k-linie:#B9AEB8;--k-stadt:#1A0B16;--k-akzent:#A8165A;--k-wasser:#6F9DBD;--k-text:#1A0B16;border-radius:0;border:3px solid var(--linie)}

/* Häufige Fragen: harte Linien */
.fragen .frage{border-top:4px solid var(--linie);padding:20px 0 8px;max-width:900px}
.fragen .frage:last-child{border-bottom:4px solid var(--linie)}
.fragen .frage h3{margin:0 0 8px;font-size:1.18rem}
.fragen .frage p{max-width:72ch}
.abschnitt.dunkel.fragen .frage{border-color:var(--weiss)}

/* Abschluss und Karte „Was ist passiert?“ */
.abschluss{background:var(--nacht);color:var(--weiss)}
.abschluss .zwei{align-items:center}
.abschluss .fall-karte{justify-self:end}
.fall-karte{width:100%;max-width:500px;background:var(--signal);color:var(--weiss);padding:30px 28px 26px}
.fall-karte .schritt{font-size:.82rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--auf-signal)}
.fall-karte .titel{font-family:var(--anzeige);font-weight:800;text-transform:uppercase;font-size:2.9rem;line-height:.92;margin:8px 0 20px}
.kacheln{display:grid;gap:3px}
.kacheln a{display:flex;align-items:center;gap:16px;min-height:66px;padding:8px 18px;background:var(--weiss);color:var(--nacht);font-weight:800;text-decoration:none;line-height:1.25}
.kacheln a:hover{background:var(--grau)}
.kacheln .nr{font-family:var(--anzeige);font-weight:800;font-size:2.3rem;line-height:1;color:var(--signal);width:26px;flex:none}
.kacheln .pfeil{margin-left:auto;width:20px;height:20px;color:var(--signal);flex:none}
.fall-karte .tel-zeile{margin-top:16px}
.fall-karte .tel-zeile a{display:flex;align-items:center;justify-content:center;gap:10px;min-height:60px;background:var(--nacht);color:var(--weiss);font-weight:800;font-size:1.15rem;text-decoration:none}
.fall-karte .tel-zeile svg{width:20px;height:20px}
.fall-karte .tel-zeile .vermittlungshinweis{display:block;margin-top:10px;font-size:.92rem;line-height:1.4;font-weight:600;text-align:center}

/* Rufnummer im Text, Knopfblock außerhalb des Hero */
.tel-satz{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.tel-satz a{font-family:var(--anzeige);font-weight:800;font-size:3rem;line-height:1;text-decoration:none;color:var(--signal)}
.abschnitt.dunkel .tel-satz a{color:var(--signal-hell)}
.tel-satz .vermittlungshinweis{font-size:.95rem;font-weight:600}
.aktion-block{margin-top:24px}
.aktion-block .vermittlungshinweis{display:block;margin-top:10px;font-size:.95rem;font-weight:600}
.abschnitt.zart .aktion-block .knopf{background:var(--weiss);color:var(--signal)}
.abschnitt.dunkel .aktion-block .knopf{background:var(--signal)}

/* Anfrage-Formular */
.anfrage{max-width:720px}
.anfrage fieldset{border:0}
.anfrage legend{font-family:var(--anzeige);font-weight:800;text-transform:uppercase;font-size:2.6rem;line-height:.95;margin-bottom:6px}
.anfrage .schritt{font-size:.86rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--signal);margin-bottom:18px}
.anfrage .kacheln{gap:0;border:3px solid var(--linie)}
.anfrage .kacheln label{display:flex;align-items:center;gap:14px;min-height:62px;padding:8px 16px;background:var(--weiss);font-weight:700;cursor:pointer}
.anfrage .kacheln label+label{border-top:2px solid var(--linie)}
.anfrage .kacheln label:has(input:checked){background:var(--signal);color:var(--weiss)}
.anfrage .kacheln input{width:22px;height:22px;accent-color:var(--nacht)}
.feld{display:grid;gap:6px;margin:16px 0}
.feld label{font-weight:700;font-size:.95rem}
.feld input,.feld textarea{font:inherit;padding:12px 14px;min-height:52px;border:3px solid var(--linie);border-radius:0;background:var(--weiss);color:var(--tinte)}
.feld input:focus,.feld textarea:focus{outline:3px solid var(--signal);outline-offset:0}
.feld [aria-invalid="true"]{border-color:#C0122E}
.haken{display:flex;gap:12px;align-items:flex-start;margin:14px 0;line-height:1.45;font-size:.95rem}
.haken input{width:24px;height:24px;flex:none;margin-top:1px;accent-color:var(--signal)}
.fehler{color:#B0102A;font-weight:700;min-height:1.4em;margin:8px 0}
.knoepfe{display:flex;gap:0;flex-wrap:wrap;margin-top:12px}
.knopf.zurueck{background:var(--weiss);color:var(--nacht);border:3px solid var(--linie)}
.ergebnis{display:none;background:var(--weiss);border:3px solid var(--linie);border-top:10px solid var(--signal);padding:24px 26px}
.fertig form{display:none}
.fertig .ergebnis{display:block}
.ergebnis p{margin-bottom:10px}
.anfrage-hinweis{font-size:.95rem;margin-top:18px;max-width:60ch;font-weight:500}

/* Rechtsseiten aus der Vorlage */
main.recht{padding:64px var(--rand);max-width:calc(840px + 2*var(--rand));margin:0 auto}
main.recht h2{font-family:var(--anzeige);font-weight:800;text-transform:uppercase;font-size:1.9rem;line-height:1;margin:36px 0 12px}
main.recht h3{font-size:1.15rem;font-weight:800;margin:22px 0 8px}
main.recht p,main.recht li{margin-bottom:10px;max-width:72ch}
main.recht ul{list-style:square;padding-left:22px}

/* Fuß */
.fuss{background:var(--nacht);color:#EFE6EC;padding:56px var(--rand) 110px;border-top:10px solid var(--signal)}
.fuss .reihe{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px;max-width:1200px;margin:0 auto}
.fuss .marke{color:var(--weiss);margin-bottom:14px}
.fuss p{font-size:.95rem;margin-bottom:8px;max-width:44ch}
.fuss .tel a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--anzeige);font-size:2.4rem;font-weight:800;color:var(--weiss);text-decoration:none}
.fuss .tel .vermittlungshinweis{display:block;font-size:.9rem;margin-top:4px;max-width:34ch}
.fuss nav{display:flex;flex-direction:column}
.fuss nav a{min-height:44px;display:flex;align-items:center;text-decoration:none;font-weight:600;border-bottom:1px solid #3a2235}
.fuss nav a:hover{color:var(--signal-hell)}
.fuss .klein{max-width:1200px;margin:34px auto 0;padding-top:20px;border-top:2px solid #3a2235;font-size:.88rem}

/* Fokus auf dunklen Flächen */
.hero :focus-visible,.abschnitt.dunkel :focus-visible,.abschnitt.zart :focus-visible,.abschluss :focus-visible,.kopf :focus-visible,.fuss :focus-visible,.anrufleiste :focus-visible,.leiste :focus-visible{outline-color:var(--weiss)}

/* Anrufleiste mobil */
.anrufleiste{display:none}

@media (max-width:1180px){
  .kopf nav{display:none}
  .js .menue-knopf{display:inline-flex;align-self:center;align-items:center;gap:8px;min-height:44px;padding:0 12px;margin-right:12px;background:transparent;border:2px solid var(--weiss);border-radius:0;color:var(--weiss);font:700 .9rem var(--text);cursor:pointer}
  .kopf.menue-offen nav{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:var(--nacht);padding:8px var(--rand) 18px;margin:0;gap:0}
  .kopf.menue-offen nav a{min-height:48px;display:flex;align-items:center;border-bottom:1px solid #3a2235}
  html:not(.js) .kopf nav{display:flex;flex-wrap:wrap}
}
@media (max-width:980px){
  .hero-start,.hero-unter{grid-template-columns:1fr}
  .hero-start .bild,.hero-unter .bild{order:-1;height:240px;min-height:0}
  .hero-start .hero-inhalt,.hero-unter .hero-inhalt{padding:40px var(--rand) 44px}
  .leiste{grid-template-columns:repeat(2,minmax(0,1fr))}
  .leiste a{min-height:96px;border-bottom:2px solid #3a2235}
  .zwei{grid-template-columns:1fr;gap:32px}
  .faelle{grid-template-columns:1fr}
  .schritte li+li{border-left:0;border-top:3px solid currentColor}
  .nummern{grid-template-columns:1fr}
  .nummern div+div{border-left:0;border-top:3px solid currentColor}
  .abschnitt:not(.dunkel) .nummern div+div{border-top-color:var(--linie)}
  .gegenueber{grid-template-columns:1fr}
  .gegenueber div.warten{border-left:0;border-top:3px solid var(--linie)}
  .zahl-gross div+div{border-left:0;border-top:3px solid var(--linie)}
  .bezirk-zeilen{grid-template-columns:1fr}
  .fuss .reihe{grid-template-columns:1fr;gap:28px}
  .abschluss .fall-karte{justify-self:stretch;max-width:none}
}
@media (max-width:720px){
  :root{--kopf:64px}
  html{font-size:16px}
  .kopf{gap:12px}
  .kopf-tel,.kopf .knopf{display:none!important}
  .marke{font-size:1.15rem}
  .js .menue-knopf{margin-left:auto}
  .hero-marke{font-size:clamp(3rem,14vw,4.4rem)}
  .hero h1{font-size:.82rem}
  .aktionen>a{flex:1 1 100%}
  .badge{flex:1 1 100%}
  .badge+.badge{border-left:2px solid var(--weiss);border-top:0}
  .leiste a{gap:12px;padding:14px 16px;font-size:.98rem}
  .leiste b{font-size:2.6rem}
  .abschnitt{padding:56px var(--rand)}
  .antwort{padding:36px var(--rand)}
  .antwort p{font-size:1.1rem}
  .tafel,.tafel tbody,.tafel tr,.tafel td{display:block;width:100%}
  .tafel thead{display:none}
  .tafel tr{border-bottom:3px solid var(--linie);padding:6px 0}
  .tafel td{border:0;padding:6px 14px}
  .tafel td.zahl{white-space:normal}
  .bezirke{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fall-karte{padding:24px 18px 20px}
  .fall-karte .titel{font-size:2.3rem}
  .tel-satz a{font-size:2.4rem}
  .schritte.senkrecht li{grid-template-columns:56px 1fr}
  .anrufleiste{display:flex;position:fixed;z-index:30;left:0;right:0;bottom:0;align-items:stretch;gap:0;background:var(--nacht);color:var(--weiss);border-top:4px solid var(--signal)}
  .anrufleiste .tel{flex:1;min-width:0;line-height:1.2;padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
  .anrufleiste .tel a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:800;font-size:1.2rem;text-decoration:none}
  .anrufleiste .tel svg{width:20px;height:20px}
  .anrufleiste .vermittlungshinweis{display:block;font-size:.74rem;font-weight:600;color:#EFE6EC}
  .anrufleiste .knopf{min-height:auto;padding:0 18px;font-size:.88rem;display:none;background:var(--signal);color:var(--weiss);border-radius:0}
  .anrufleiste .knopf.zeigen{display:inline-flex}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* craft.py, Plakativ-Runde: Rahmen am dunklen Badge, Link im Abschluss, Menülinks 44 px */
.badge:first-child{border-color:var(--weiss)}
.abschluss p a,.abschluss li a{color:var(--weiss)}
.kopf nav a{display:flex;align-items:center;min-height:44px;padding:0}
/* blick, Plakativ-Runde 2 */
.hero .bildnachweis{background:rgba(26,11,22,.82);padding:4px 8px;text-shadow:none}
.abschnitt h2,.hero-marke{text-wrap:balance}
.schritte li::before{font-size:5rem}
.fall-karte .tel-zeile a{padding:0 14px;text-align:center}
.marke,.kopf .knopf{white-space:nowrap}
.kopf nav{gap:18px}
main.recht h2{line-height:1.08}
.kopf nav a,.kopf-tel small{white-space:nowrap}
/* Fotofeld im Formular (03.11.2026): eigene deutsche Beschriftung statt „Choose File“ */
.feld.datei{grid-template-columns:auto 1fr;align-items:center;gap:8px 14px}
.feld.datei .feld-titel{grid-column:1/-1;font-weight:700;font-size:.95rem}
.feld.datei input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.datei-knopf{display:inline-flex;align-items:center;min-height:52px;padding:0 20px;border:3px solid var(--linie);background:var(--weiss);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:.88rem;cursor:pointer}
.feld.datei input:focus-visible+.datei-knopf{outline:3px solid var(--signal);outline-offset:3px}
.datei-name{font-size:.92rem}
/* craft.py 03.11.2026: Raster am Handy darf nicht breiter werden als der Inhalt; Rahmen nur am weißen Block */
@media (max-width:980px){.zwei{grid-template-columns:minmax(0,1fr)}.fall-karte .tel-zeile a{flex-wrap:wrap;text-align:center}}
.gegenueber{border:0}
.gegenueber div.warten{border:3px solid var(--linie)}
.zwei .gegenueber div.warten,.gegenueber div.warten{border-left:3px solid var(--linie);border-top:3px solid var(--linie)}
/* Badges, die umbrechen, behalten den linken Rahmen */
.badge+.badge{border-left:2px solid var(--weiss);margin-left:-2px}
@media (max-width:720px){.badge+.badge{margin-left:0;border-top:0}}