/* Theme "energiehandel" – Hausfarben laut Logo energiehandel.bayern.
   Orange #EF7D00 (Wortmarke) · Blau #0098D6 (Ring) · Nachtblau #14304F (Text und Fußbereich).

   Die beiden Markenfarben wurden aus der gelieferten Logodatei ausgelesen (häufigste Farbwerte).
   Sobald das Logo als Vektor-PDF vorliegt, bitte gegen die dortigen Werte prüfen.

   Barrierefreiheit: Orange #EF7D00 auf Weiß erreicht nur 2,76:1 und ist damit als Textfarbe
   NICHT ausreichend (WCAG AA verlangt 4,5:1). Deshalb:
     --signal       = Flächenfarbe für Knöpfe (dunkler Text darauf)
     --signal-text  = Nachtblau, nicht Weiß
     --orange-text  = abgedunkeltes Orange ausschließlich für Textfarbe und Links
   Das Logo selbst bleibt unverändert im Original-Orange.

   Schrift: Encode Sans (SIL Open Font License), lokal eingebunden, keine Google Fonts.
   Die Schriftdateien fehlen noch: assets/fonts/encode-sans-var.woff2 (siehe LIESMICH in dem Ordner).
   Solange sie fehlen, greift die Systemschrift aus der Reihe unten. */

/* Das @font-face fuer Encode Sans liegt in schrift.css und wird vom
   Layout nur eingebunden, wenn assets/fonts/encode-sans-var.woff2 auf dem
   Server vorhanden ist. Solange sie fehlt, fordert kein Browser sie an -
   vorher stand bei jedem Seitenaufruf ein 404 im Protokoll. */

:root{
  --schrift:"Encode Sans","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;

  --primaer:#00669A;              /* Logoblau abgedunkelt: 6,2:1 auf Weiss, damit auch als Textfarbe nutzbar */
  --primaer-dunkel:#005C8A;
  --primaer-hell:#E6F4FB;
  --logo-blau:#0098D6;            /* Originalton aus dem Logo: nur fuer Flaechen und Zierelemente */
  --tief:#14304F;                 /* Nachtblau: Text, Fussbereich, dunkle Baender */

  --signal:#EF7D00;               /* Orange aus dem Logo: nur als Flaeche */
  --signal-text:#14304F;          /* dunkler Text auf Orange statt Weiss */
  --signal-dunkel:#D46F00;
  --orange-text:#A25B06;   /* eine Spur dunkler als das Logo-Orange: nur so reicht der Kontrast auch auf orange-hell (4,76:1) */
  --orange-hell:#FFF3E4;
  --orange-linie:#F6D2A4;

  --gruen:#0E7A54; --gruen-hell:#EDF9F4;
  --rot:#A5271E; --rot-hell:#FDF3F2;
  --nebel:#F5F8FC; --nebel2:#E9F1F8; --linie:#DCE7F2;
  --grau:#5B6F86; --grau2:#33475F; --text:#14304F;

  --r-s:12px; --r-m:18px; --r-l:28px;
  --schatten-s:0 1px 2px rgb(20 48 79 / .05), 0 6px 18px -8px rgb(20 48 79 / .16);
  --schatten-m:0 16px 40px -24px rgb(20 48 79 / .42);
  --schatten-l:0 40px 80px -40px rgb(20 48 79 / .55);
  --breite:1200px;

  --held-verlauf:linear-gradient(160deg,#FFFFFF 0%,#EAF3FB 60%,#F7FBFE 100%);
  --held-bild:none;
}

/* ---- Schrift: Ueberschriften etwas schmaler, passend zur Wortmarke ---- */
h1,h2,h3,.wortmarke-text{font-stretch:92%;letter-spacing:-.01em}
h1{font-weight:700}
h2,h3{font-weight:700}

.wortmarke{height:34px;width:auto;max-width:300px;object-fit:contain;display:block}
@media(min-width:48rem){.wortmarke{height:40px}}
.wortmarke-fuss{height:30px;max-width:250px}

/* ---- Knoepfe ---- */
.knopf{border-radius:14px;padding-inline:1.4rem}
.knopf-signal{background:var(--signal);color:var(--signal-text);font-weight:700;
              box-shadow:0 10px 26px -14px rgb(239 125 0 / .8)}
.knopf-signal:hover{background:var(--signal-dunkel);transform:translateY(-1px)}
.knopf-dunkel{background:var(--tief);color:#fff}

.karte{border-radius:var(--r-m);box-shadow:var(--schatten-s)}
.held-kicker{background:rgb(239 125 0 / .12);border-color:var(--orange-linie);color:var(--orange-text)}
.fuss{background:var(--tief)}

/* ---- Verbrauchs-Weiche: drei Stufen ----
   Die Farbe zeigt, welcher Weg gilt: blau = Direktvergleich, orange = individuelles Angebot,
   nachtblau = Ausschreibung. Die Zustaende setzt portal.js ueber data-weiche. */
.weiche{margin-top:.9rem;border-radius:14px;padding:.85rem 1rem;display:flex;gap:.7rem;
        align-items:flex-start;font-size:.95rem;line-height:1.45;border:1px solid transparent}
.weiche svg{flex:none;margin-top:.15rem}
.weiche b{display:block}
.weiche[data-weiche="direkt"]{background:var(--primaer-hell);border-color:var(--linie);color:var(--text)}
.weiche[data-weiche="individuell"]{background:var(--orange-hell);border-color:var(--orange-linie);color:var(--text)}
.weiche[data-weiche="ausschreibung"]{background:var(--tief);border-color:var(--tief);color:#fff}
.weiche[data-weiche="ausschreibung"] a{color:#fff;text-decoration:underline}

.weiche-skala{position:relative;height:74px;margin:2.2rem 0 1rem}
.weiche-skala .spur{position:absolute;left:0;right:0;top:26px;height:12px;border-radius:6px;
  background:linear-gradient(90deg,var(--primaer) 0%,var(--primaer) 30%,var(--signal) 30%,var(--signal) 100%)}
.weiche-skala .marke{position:absolute;top:0;transform:translateX(-50%);text-align:center;font-size:.85rem;color:var(--grau)}
.weiche-skala .marke i{display:block;width:3px;height:64px;margin:0 auto;background:var(--tief);border-radius:2px}
.weiche-skala .marke b{position:absolute;top:-24px;left:50%;transform:translateX(-50%);white-space:nowrap;color:var(--text)}
.weiche-skala .marke.gross b{background:var(--tief);color:#fff;padding:3px 12px;border-radius:999px;top:-30px}

/* ---- Zwei-Wege-Karten ---- */
.weg{border-radius:var(--r-l);padding:2rem}
.weg.direkt{background:var(--primaer-hell)}
.weg.individuell{background:var(--orange-hell)}
.weg .kennzeichen{display:inline-flex;gap:.4rem;align-items:center;font-size:.85rem;font-weight:700;
                  padding:.35rem .75rem;border-radius:999px;background:#fff}
.weg.direkt .kennzeichen{color:var(--primaer)}
.weg.individuell .kennzeichen{color:var(--orange-text)}

/* ---- Branchenkacheln ---- */
.branchen-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.7rem}
.branche-kachel{display:flex;gap:.7rem;align-items:center;background:var(--nebel);border-radius:14px;
                padding:.85rem;font-weight:700;line-height:1.25;min-height:56px;
                overflow-wrap:break-word;
                /* B3: hyphens:auto zerriss die Namen mitten im Wort - "Gärtnereien und Ge-wächshäuser",
                   "Kunststoffverarbei-tung". Bei Eigennamen von Branchen ist das unschön und schlecht
                   lesbar. break-word bricht nur, wenn ein Wort allein nicht in die Zeile passt. */
                hyphens:none;-webkit-hyphens:none;
                /* C9: Die Kacheln mit Seite waren unterstrichene Verweise, die ohne schlichte Kästen -
                   der Unterschied wirkte wie ein Fehler. Jetzt tragen beide dieselbe Gestalt, und der
                   Unterschied zeigt sich über Farbe und Zeiger. */
                text-decoration:none;color:var(--tief)}
.branche-kachel:hover{background:var(--primaer-hell);color:var(--primaer)}
a.branche-kachel{cursor:pointer}
.branche-kachel.ohne-seite{color:var(--grau);cursor:default}
.branche-kachel.ohne-seite:hover{background:var(--nebel);color:var(--grau)}
.branche-kachel .zeichen{width:34px;height:34px;border-radius:10px;background:#fff;flex:none;
                         display:flex;align-items:center;justify-content:center;color:var(--primaer)}
.branche-kachel:hover{background:var(--primaer-hell)}

/* ---- Autoren- und Stand-Angabe ---- */
.autorbox{display:flex;gap:.8rem;align-items:center;border-top:1px solid var(--linie);
          margin-top:2.2rem;padding-top:1.1rem;font-size:.92rem;color:var(--grau)}
.autorbox img{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none}
.autorbox strong{color:var(--text)}

/* ---- Kennwert-Hinweis (Stand-Datum bei gesetzlichen Werten) ---- */
.kennwert-stand{font-size:.85rem;color:var(--grau);margin-top:.4rem}

/* ---- Bewegung reduzieren ---- */
@media (prefers-reduced-motion: reduce){
  .knopf-signal:hover{transform:none}
}

/* ====================================================================
   Bausteine der Unternehmensseite
   Die Grundformen (wrap, karte, knopf, raster, seiten-kopf, fuss) kommen
   aus assets/css/basis.css. Hier steht nur, was neu dazukommt.
   ==================================================================== */

/* Vertrauensleiste unter dem Hero */
.vertrauen{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-radius:20px;
           box-shadow:var(--schatten-s);margin-top:-34px;position:relative;z-index:2}
.vertrauen > div{padding:20px 24px;display:flex;gap:13px;align-items:center;font-size:.95rem;
                 color:var(--grau);border-right:1px solid var(--linie)}
.vertrauen > div:last-child{border-right:0}
.vertrauen b{display:block;color:var(--text);font-size:1.05rem}

/* Kreisförmiges Heldenbild mit den beiden Logoringen */
.kreis{position:relative;width:100%;max-width:470px;aspect-ratio:1}
.kreis .ring{position:absolute;inset:0}
.kreis .bild{position:absolute;inset:11%;border-radius:50%;object-fit:cover;width:78%;height:78%}
.plakette{position:absolute;background:#fff;border-radius:16px;padding:12px 16px;
          box-shadow:var(--schatten-m);font-size:.9rem;color:var(--grau);display:flex;gap:11px;align-items:center}
.plakette b{display:block;font-size:1rem;color:var(--text)}

/* Schrittfolge "So läuft Ihre Anfrage ab" */
.ablauf-schritte{display:grid;grid-template-columns:repeat(4,1fr);background:var(--nebel);
          border-radius:26px;padding:38px 16px}
.ablauf-schritte > div{padding:0 22px;border-right:1px solid var(--linie)}
.ablauf-schritte > div:last-child{border-right:0}
.ablauf-schritte .nr{width:42px;height:42px;border-radius:50%;background:#fff;border:2px solid var(--signal);
              color:var(--orange-text);font-weight:700;display:flex;align-items:center;justify-content:center}
.ablauf-schritte b{display:block;font-size:1.2rem;margin:16px 0 6px}

/* Branchensuche */
.finder{display:grid;grid-template-columns:370px 1fr;gap:50px;align-items:start}
.suche{display:flex;align-items:center;gap:10px;border:2px solid var(--tief);border-radius:16px;
       padding:14px 16px;color:var(--grau)}
.reiter{display:flex;gap:6px;border-bottom:2px solid var(--linie);margin-bottom:18px;overflow:auto}
.reiter span,.reiter a{padding:11px 14px;font-size:.97rem;font-weight:700;color:var(--grau);
             margin-bottom:-2px;border-bottom:3px solid transparent;white-space:nowrap}
.reiter a{text-decoration:none}
.reiter a:hover{color:var(--text)}
.reiter .on{color:var(--text);border-color:var(--signal)}
.branche-kachel.ohne-seite{background:transparent;border:1.5px dashed var(--linie);color:var(--grau);cursor:default}

/* Portalkarten */
.portale{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pk{background:#fff;border:1.5px solid var(--linie);border-radius:22px;padding:26px;
    display:flex;flex-direction:column;gap:6px}
.pk .kopfz{display:flex;justify-content:space-between;align-items:center;gap:10px}
.pk .marke{font-weight:700;font-size:1.2rem;color:var(--tief)}
.pk small{display:block;margin-top:10px;font-size:.85rem;font-weight:700;color:var(--primaer)}
.status{font-size:.78rem;font-weight:700;padding:4px 11px;border-radius:999px;
        background:var(--gruen-hell);color:var(--gruen);white-space:nowrap}
.status.bald{background:var(--orange-hell);color:var(--orange-text)}
.pk .lk{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:13px;
        border-top:1px solid var(--linie);font-weight:700}
.pk .lk-aus{color:var(--grau);font-weight:400}

/* Artikel mit Inhaltsverzeichnis und Seitenspalte */
.artikel{display:grid;grid-template-columns:220px minmax(0,1fr) 300px;gap:44px;align-items:start}
.inhaltsverzeichnis{position:sticky;top:1.5rem;border-top:3px solid var(--tief);padding-top:14px;font-size:.92rem}
.inhaltsverzeichnis .iv-titel{font-weight:700;margin-bottom:8px}
.inhaltsverzeichnis ul{list-style:none;display:grid;gap:7px}
.inhaltsverzeichnis a{color:var(--grau)}
.inhaltsverzeichnis a:hover{color:var(--primaer)}
.seitenspalte{position:sticky;top:1.5rem;display:grid;gap:14px}
.seitenspalte .karte{background:var(--nebel);padding:20px;display:grid;gap:10px}
.karte-titel{font-weight:700;font-size:1.05rem}
.liste-links{list-style:none;display:grid;gap:9px}
.hinweis-recht{border-left:3px solid var(--linie);padding-left:14px;margin-top:2rem}

/* Formulare der Anfragestrecke und des Angebotsformulars */
.formular{display:grid;gap:14px}
.formular label{font-weight:700;font-size:.95rem}
.formular input,.formular select,.formular textarea{
  width:100%;border:1.5px solid var(--linie);border-radius:14px;padding:13px 15px;
  font:inherit;font-size:16px;background:#fff;color:var(--text)}
.formular input:focus-visible,.formular select:focus-visible,.formular textarea:focus-visible{
  outline:3px solid var(--primaer);outline-offset:1px}
.formular fieldset{border:0;display:grid;gap:8px}
.formular legend{font-weight:700;font-size:.95rem;margin-bottom:6px}
.formular .zwei{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.honigtopf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fehler{background:var(--rot-hell);border:1px solid var(--rot);color:var(--rot);
        border-radius:12px;padding:12px 15px;margin-bottom:10px}
.hinweis-gruen{background:var(--gruen-hell);border:1px solid var(--gruen);border-radius:16px;padding:20px 22px}
.ergebnis{margin-top:16px;background:var(--nebel);padding:22px}
.ergebnis .gross{font-size:2rem;font-weight:700;margin:4px 0 8px}

/* Feste Aktionsleiste auf dem Telefon */
.leiste{display:none}

@media (max-width:60rem){
  .vertrauen{grid-template-columns:1fr 1fr;margin-top:16px;background:transparent;
             box-shadow:none;gap:8px}
  .vertrauen > div{background:var(--nebel);border-radius:14px;border:0;padding:12px}
  .ablauf-schritte{grid-template-columns:1fr;padding:20px 18px}
  .ablauf-schritte > div{border-right:0;border-bottom:1px solid var(--linie);padding:14px 0}
  .ablauf-schritte > div:last-child{border-bottom:0}
  .finder{grid-template-columns:1fr;gap:20px}
  .portale{grid-template-columns:1fr}
  .artikel{grid-template-columns:1fr;gap:26px}
  .inhaltsverzeichnis,.seitenspalte{position:static}
  .formular .zwei{grid-template-columns:1fr}
  .branchen-raster{grid-template-columns:1fr 1fr}
  .weiche-skala{height:60px;margin:26px 0 10px}
  .kreis{display:none}

  .leiste{display:grid;position:fixed;left:0;right:0;bottom:0;z-index:40;
          grid-template-columns:1fr 1.6fr;gap:8px;background:#fff;
          border-top:1px solid var(--linie);padding:10px 12px calc(10px + env(safe-area-inset-bottom));
          box-shadow:0 -10px 30px -20px rgb(20 48 79 / .4)}
  .leiste .knopf{height:50px;padding:0}
  body{padding-bottom:86px}
}

/* ============================================================================
   Ergänzungen zu den mitgelieferten Regeln
   Bausteine, die in den Vorlagen vorkommen, in der Theme-Datei des Pakets aber
   noch keine Regel haben. Nur hier, nicht in basis.css: Die Vergleichsportale
   brauchen sie nicht.
   ========================================================================= */

/* ---- Knopfrollen der Weiche: primaer = Direktvergleich, tief = Ausschreibung ---- */
.knopf-primaer{background:var(--primaer);color:#fff;font-weight:700;
               box-shadow:0 10px 26px -14px rgb(30 111 176 / .8)}
.knopf-primaer:hover{background:var(--primaer-dunkel);transform:translateY(-1px)}
.knopf-tief{background:var(--tief);color:#fff;font-weight:700;
            box-shadow:0 10px 26px -14px rgb(20 48 79 / .7)}
.knopf-tief:hover{background:#0D2136;transform:translateY(-1px)}

/* ---- Die Verbrauchs-Weiche ---- */
.weiche{display:grid;gap:1.1rem}
.weiche-titel{font-weight:700;font-size:1.05rem;margin:0}
.weiche-arten{display:flex;flex-wrap:wrap;gap:.5rem;border:0;padding:0;margin:0}
.weiche-arten .wahl{display:inline-flex;align-items:center;gap:.45rem;margin:0;padding:.5rem .9rem;
                    border:1px solid var(--linie);border-radius:999px;background:#fff;cursor:pointer}
.weiche-arten .wahl:hover{border-color:var(--primaer);background:var(--primaer-hell)}
.weiche-arten .wahl.an{border-color:var(--primaer);background:var(--primaer-hell);font-weight:700}
.weiche-arten .wahl input{accent-color:var(--primaer)}
.weiche-felder{display:grid;gap:.9rem}
@media(min-width:40rem){.weiche-felder{grid-template-columns:1.4fr 1fr 1fr}}
.weiche-hinweis{background:var(--nebel);border-left:4px solid var(--signal);border-radius:0 var(--r-s) var(--r-s) 0;
                padding:.85rem 1.1rem;margin:0;font-size:.95rem;color:var(--grau2)}
.weiche-fuss{margin:0;color:var(--grau)}

/* ---- Branchenkacheln ---- */
.branchen{display:grid;gap:.9rem;grid-template-columns:1fr;margin-top:1.2rem}
@media(min-width:34rem){.branchen{grid-template-columns:1fr 1fr}}
@media(min-width:60rem){.branchen{grid-template-columns:repeat(3,1fr)}}
.branche{display:flex;align-items:center;gap:.6rem;background:#fff;border:1px solid var(--linie);
         border-radius:var(--r-m);padding:.9rem 1rem;text-decoration:none;color:inherit;
         box-shadow:var(--schatten-s);transition:transform .15s,border-color .15s}
a.branche:hover{transform:translateY(-2px);border-color:var(--primaer)}
.branche svg{color:var(--primaer);flex:0 0 auto}
.branche.ohne-seite{background:var(--nebel);box-shadow:none;cursor:default;color:var(--grau2)}
.branche.ohne-seite:hover{transform:none;border-color:var(--linie)}
.suchfeld{width:100%;max-width:26rem;margin-top:1rem}

/* ---- Drei Wege auf den Leistungsseiten ---- */
.wege{display:grid;gap:1rem;grid-template-columns:1fr;margin-top:1.2rem}
@media(min-width:52rem){.wege{grid-template-columns:repeat(3,1fr)}}
.weg-bereich{font-size:.88rem;font-weight:700;color:var(--orange-text);
             background:var(--orange-hell);border:1px solid var(--orange-linie);
             border-radius:999px;padding:.2rem .7rem;display:inline-block;margin-bottom:.5rem}

/* ---- Formularbausteine der Anfragestrecke ---- */
.formular-fuss{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;justify-content:space-between;margin-top:.4rem}
.kasten{background:var(--nebel);border:1px solid var(--linie);border-radius:var(--r-m);padding:1.1rem 1.2rem}
.dateiliste{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.35rem;font-size:.93rem}
.dateiliste li{display:flex;justify-content:space-between;gap:.8rem;background:#fff;
               border:1px solid var(--linie);border-radius:var(--r-s);padding:.45rem .7rem}

/* ---- Ratgeberartikel: Fussnoten und Quellenangaben ---- */
.fh{font-size:.86rem;color:var(--grau);text-decoration:none;vertical-align:super}
.fq{font-size:.9rem;color:var(--grau2);border-top:1px solid var(--linie);margin-top:1.4rem;padding-top:.8rem}

/* ============================================================================
   Heldbereich: hell statt dunkel
   basis.css setzt .held fest auf #08243E mit weißer Schrift und legt darüber
   dunkle Farbverläufe - gedacht für die Vergleichsportale. Die Unternehmensseite
   ist hell. Die Variable --held-verlauf allein genügt nicht, weil basis.css sie
   für .held gar nicht verwendet; deshalb hier ausdrücklich überschreiben.
   ========================================================================= */
.held{background:var(--held-verlauf);color:var(--text)}
.held-bild{background-image:none;background:transparent}
.held h1{color:var(--text);max-width:16ch}
.held-vorspann{color:var(--grau);max-width:52ch}
.held .haken-liste li{color:var(--grau2)}
.held-berater,.held-berater a{color:var(--grau2)}

/* Zwei Spalten: links Text und Weiche, rechts die Kreisgrafik.
   basis.css gibt .held-innen nur Innenabstand, .held-text eine Höchstbreite. */
.held-innen{display:grid;gap:2.5rem;align-items:center;padding-block:3rem 3.5rem}
.held-text{max-width:none}
@media(min-width:64rem){
  .held-innen{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:3.5rem}
  .held-text{max-width:38rem}
}

/* ---- Energiearten: Knopfleiste statt sichtbarer Auswahlknöpfe ----
   Der Entwurf zeigt drei Schaltflächen mit Symbol. Das Auswahlfeld bleibt für
   Screenreader und für die Bedienung ohne Maus erhalten, wird aber nicht gezeigt. */
.weiche-arten .wahl{flex:0 0 auto;white-space:nowrap;padding:.55rem 1.05rem;gap:.5rem;
                    font-weight:600;transition:background .15s,border-color .15s}
.weiche-arten .wahl input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.weiche-arten .wahl:focus-within{outline:2px solid var(--primaer);outline-offset:2px}
.weiche-arten .wahl.an{background:var(--tief);border-color:var(--tief);color:#fff}
.weiche-arten .wahl.an svg{color:#fff}
.weiche-arten .wahl svg{color:var(--primaer);flex:none}

/* ---- Servicezeile und Kopfbereich der Unternehmensseite ---- */
.band-service{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.6rem;font-size:.88rem}
.band-service a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:.4rem}
.band-service a:hover{text-decoration:underline}
.band-privat a{font-weight:700}
.band-schnell{display:flex;gap:1.2rem;margin-left:auto}
@media(max-width:60rem){
  .band-mail,.band-schnell{display:none}     /* auf schmalen Geräten bleibt die Rufnummer */
  .band-privat{margin-left:auto}
}
.kopf-anfrage{height:44px;padding-inline:1.3rem;white-space:nowrap}
@media(max-width:48rem){.kopf-anfrage{display:none}}   /* dort übernimmt die Aktionsleiste unten */

/* ---- Wortmarke als Text, solange die Logodatei fehlt ----
   Nicht die echte Marke, aber in deren Farben und Schreibweise. Sobald
   assets/img/marke/energiehandel.bayern/logo.svg liegt, greift sie stattdessen
   und diese Regeln laufen ins Leere. */
.logo{gap:.6rem}
/* Die echte Wortmarke ist ein Bild. Ohne Datei steht hier nur der Name - in Versalien und Orange
   wie die Marke, aber ohne nachgebautes Zeichen. Sobald die Logodatei liegt, greift diese Regel nie mehr. */
/* Die Wortmarke enthält den Slogan. Bei 30 px Höhe wäre er unleserlich - deshalb größer. */
.wortmarke{height:42px;max-width:260px}
@media(min-width:48rem){.wortmarke{height:52px;max-width:320px}}
.wortmarke-fuss{height:44px;max-width:280px}

.logo-text{font-weight:800;font-size:1.1rem;letter-spacing:.01em;font-stretch:92%;
           white-space:nowrap;line-height:1.15;text-transform:uppercase;color:var(--signal)}
.logo-text .lm-name,.logo-text .lm-endung{color:inherit}
@media(min-width:48rem){.logo-text{font-size:1.28rem}}

/* ---- Kreisgrafik im Heldbereich ---- */
.kreis{margin-inline:auto}
.kreis-platzhalter{position:absolute;inset:22%;margin:0;display:flex;flex-direction:column;
                   align-items:center;justify-content:center;text-align:center;gap:.35rem;
                   color:var(--grau);font-size:.95rem;line-height:1.4}
.kreis-platzhalter span{font-size:.86rem}
.plakette{display:flex;align-items:flex-start;gap:.6rem;max-width:17rem}
.plakette > span{display:block}
.plakette b{display:block;font-size:1rem;color:var(--text);line-height:1.25}
.plakette svg{flex:none;margin-top:.15rem}
.plakette-oben{left:46%;top:12%}
.plakette-unten{left:52%;bottom:14%}

/* ---- Fußbereich: Rechtszeile getrennt vom Hinweistext ---- */
.fuss-recht{margin:1.2rem 0 .4rem;font-size:.9rem}
.fuss-recht a{color:inherit}

/* ---- Mega-Menü nach Entwurf B ----
   Öffnet beim Überfahren und beim Tastaturfokus. Alle Verweise stehen immer im HTML, auch
   geschlossen - so findet die Suchmaschine sie ohne JavaScript. */
/* Der Menüpunkt ist nur so hoch wie seine Schrift, das Klappfeld beginnt aber erst am unteren Rand
   der Kopfzeile. Dazwischen lag tote Fläche: Wer mit der Maus nach unten fuhr, verlor das Überfahren
   und das Feld verschwand. Deshalb spannt der Punkt jetzt über die volle Zeilenhöhe - sichtbar bleibt
   er unverändert, weil der Verweis darin mittig sitzt. */
.nav-punkt{position:static;display:inline-flex;align-self:stretch;align-items:center}
.nav-punkt > a{display:inline-flex;align-items:center;gap:.35rem}
/* Brücke über den Rand der Kopfzeile: ein schmaler Streifen, der zum Klappfeld gehört.
   ACHTUNG: Sie darf NICHT über .nav-punkt laufen - der muss position:static bleiben, sonst wird
   das Klappfeld wieder auf die Breite des Menüpunkts eingeschnürt. Deshalb am Feld selbst, und
   dafür ohne overflow:hidden (die runden Ecken übernimmt die linke Spalte). */
.mega::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.nav-pfeil{opacity:.55;transition:transform .15s}
/* Bezugspunkt ist der Kopfbereich (position:sticky). Damit das Menü nicht über die ganze
   Fensterbreite läuft, wird es mittig auf die Breite der Kopfzeile begrenzt. */
.mega{position:absolute;left:50%;transform:translateX(-50%);
      width:min(86rem, calc(100vw - 2.5rem));top:100%;z-index:60;
      display:grid;grid-template-columns:19rem minmax(0,1fr) 20rem;
      background:#fff;border:1px solid var(--linie);border-radius:0 0 var(--r-l) var(--r-l);
      box-shadow:var(--schatten-m);
      opacity:0;visibility:hidden;
      /* Nachlauf von 250 ms: Wer schräg zum Feld fährt, verliert es nicht auf halbem Weg. */
      transition:opacity .12s ease, visibility 0s linear .25s}
.nav-punkt:hover .mega,.nav-punkt:focus-within .mega{opacity:1;visibility:visible;
      transition:opacity .12s ease, visibility 0s}
.nav-punkt:hover .nav-pfeil,.nav-punkt:focus-within .nav-pfeil{transform:rotate(180deg)}

.mega-links{background:var(--primaer-hell);border-bottom-left-radius:var(--r-l);padding:1.9rem 1.8rem;display:flex;flex-direction:column;gap:.55rem}
.mega-titel{font-size:1.45rem;font-weight:800;line-height:1.15;color:var(--tief);margin:0}
.mega-text{color:var(--grau);font-size:.95rem;line-height:1.5;margin:0 0 .6rem}
.mega-alle{background:#fff;border-radius:12px;padding:.8rem 1rem;font-weight:700;
           color:var(--primaer);text-decoration:none;box-shadow:var(--schatten-s)}
.mega-alle:hover{color:var(--primaer-dunkel)}
.mega-seite{color:var(--grau2);text-decoration:none;font-weight:600;padding:.35rem .2rem}
.mega-seite:hover{color:var(--primaer)}

/* Mehrspaltig statt Raster: Im Entwurf liest man jede Spalte von oben nach unten durch.
   Ein Raster füllt zeilenweise - dann steht die zweite Branche rechts statt darunter. */
/* Spaltenbreite statt fester Spaltenzahl: "Einzelhandel und Einkaufszentren" oder
   "Pflegeheime und Seniorenzentren" brauchen mehr als ein Drittel der Fläche. Mit einer
   Mindestbreite nimmt der Browser drei Spalten, wenn sie passen, sonst zwei - statt die
   Namen aus der Spalte laufen zu lassen. */
.mega-mitte{padding:1.9rem 2rem;columns:12rem 3;column-gap:2rem;column-fill:balance}
.mega-mitte a{display:block;padding:.62rem 0;border-bottom:1px solid var(--linie);
              color:var(--grau2);text-decoration:none;font-size:1rem;font-weight:500;line-height:1.3;
              break-inside:avoid}
.mega-mitte a:hover{color:var(--primaer)}

/* Die rechte Spalte hatte 17rem abzüglich zweimal Rand - für den Text zu wenig, und seit das
   Klappfeld kein overflow:hidden mehr hat, stand der Kasten sichtbar über dessen Rand hinaus. */
.mega-rechts{margin:1.9rem 1.8rem 1.9rem 0;min-width:0;overflow-wrap:break-word;
             background:var(--orange-hell);border-radius:var(--r-m);
             padding:1.5rem;align-self:start}
.mega-frage{font-size:1.2rem;font-weight:800;color:var(--tief);margin:0 0 .5rem;line-height:1.2}
/* Nur die Frage ist fett. Der Fließtext daneben stand zu schwer im Bild - die Menüpunkte
   ringsum sind fett gesetzt, und ohne diese Angabe erbt er das. */
.mega-rechts p{color:var(--grau);font-size:.95rem;line-height:1.5;margin:0;font-weight:400}
.mega-anfrage{display:inline-flex;align-items:center;gap:.45rem;margin-top:1rem;
              color:var(--orange-text);font-weight:700;text-decoration:none}
.mega-anfrage:hover{color:var(--signal-dunkel)}

@media(max-width:64rem){
  /* Im ausgeklappten Menü auf schmalen Geräten alles untereinander im Fluss */
  .nav-punkt{display:block}
  /* transform und width müssen hier ausdrücklich zurück - sonst steht das Menü im
     ausgeklappten Zustand halb außerhalb des Bildschirms. */
  .mega{position:static;transform:none;width:auto;display:block;opacity:1;visibility:visible;
        box-shadow:none;border:0;border-radius:0;background:transparent}
  .mega-links{background:transparent;padding:.2rem 0 .4rem 1rem;gap:.3rem}
  .mega-titel,.mega-text,.mega-rechts{display:none}
  .mega-mitte{columns:1;padding:0 0 .6rem 1rem}   /* Mehrspaltigkeit zurücknehmen, nicht das alte Raster */
  .mega-alle{box-shadow:none;padding:.35rem 0;background:transparent}
}

/* ---- Fußbereich: Rechtszeile getrennt vom Hinweistext ---- */
.fuss-recht{margin:1.2rem 0 .4rem;font-size:.9rem}
.fuss-recht a{color:inherit}

/* ---- Verwandte Inhalte ---- */
.verwandte{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.5rem;
           grid-template-columns:repeat(auto-fill,minmax(17rem,1fr))}
.verwandte li{margin:0}
.verwandte a{display:block;background:var(--nebel);border:1px solid var(--linie);border-radius:var(--r-s);
             padding:.7rem .9rem;text-decoration:none;color:var(--grau2);font-weight:600}
.verwandte a:hover{background:var(--primaer-hell);border-color:var(--primaer);color:var(--primaer)}

/* ============================================================================
   Kopfbereich nach dem Entwurf
   basis.css setzt die obere Leiste dunkel (#0A2743) - das passt zu den
   Vergleichsportalen, nicht zur Unternehmensseite. Dort ist sie hell.
   ========================================================================= */
.band{background:var(--nebel);color:var(--grau);border-bottom:1px solid var(--linie)}
.band a{color:var(--grau)}
/* .band-tel ist in basis.css auf Weiß gesetzt - auf hellem Grund unsichtbar. */
.band-tel{color:var(--grau)}
.band-privat a,.band a:hover,.band-tel:hover{color:var(--tief)}
.band-service{padding-block:.5rem;font-size:.9rem}

/* WICHTIG: .haupt hat in basis.css overflow:hidden - damit das Mega-Menü überhaupt
   sichtbar werden kann, muss das hier aufgehoben werden. Ohne diese Zeile steht der
   Pfeil da, das Untermenü wird aber am Rand der Navigation abgeschnitten. */
/* Die Unternehmensseite hat fünf lange Menüpunkte und rechts den Anfrage-Knopf. In der Engine
   erscheint die Navigation ab 66rem - dort reicht der Platz hier nicht, die Punkte schoben sich
   unter den Knopf. Deshalb bis 84rem der Menüknopf, darüber die volle Navigation. */
/* Die Kopfzeile liegt in .wrap und ist damit auf die Inhaltsbreite begrenzt. Fünf lange Menüpunkte,
   Logo mit Slogan und der Anfrage-Knopf passen dort nicht nebeneinander - deshalb bekommt nur die
   Kopfzeile mehr Breite. Der Inhalt darunter bleibt unverändert lesefreundlich schmal. */
.kopf .wrap.kopf-reihe{max-width:86rem}
.band .wrap{max-width:86rem}

/* Unterhalb von 90rem uebernimmt der Menueknopf. */
@media(max-width:90rem){
  .haupt{display:none}
  .burger{display:inline-flex}
}
@media(min-width:90rem){
  .haupt{display:flex}
  .burger{display:none}
  /* Es bleibt eng - Abstände und Schriftgrad etwas kleiner. */
  .haupt{gap:1rem;font-size:.97rem}
  .kopf-reihe{gap:1.1rem}
}
@media(min-width:110rem){
  .haupt{gap:1.35rem;font-size:1.02rem}
  .kopf-reihe{gap:1.4rem}
}
/* HIER KEIN gap und KEIN font-size.
   Beides wird oben je nach Fensterbreite gesetzt - 1rem und .97rem zwischen
   90 und 110rem, darüber 1.35rem und 1.02rem. Eine Regel ohne Medienabfrage
   steht im Stylesheet DANACH und gewinnt bei gleicher Gewichtung. Genau das
   ist passiert: Die Verengung zwischen 90 und 110rem wurde nie wirksam, das
   Menü blieb zu breit und lief unter den Knopf. */
.haupt{overflow:visible;font-weight:700;flex:0 1 auto;min-width:0}
/* Der Knopf darf nie schrumpfen und nie überdeckt werden. Der Abstand davor
   ist die Sicherheitsreserve: Selbst wenn das Menü doch einmal zu breit
   wird, schiebt es sich nicht darunter. */
.kopf-anfrage{flex:none;margin-left:1rem}
/* Das Mega-Menü spannt über die volle Breite - Bezugspunkt ist deshalb der Kopfbereich,
   nicht der einzelne Menüpunkt. .kopf ist in basis.css sticky, also bereits positioniert;
   die Angabe hier macht den Bezug ausdrücklich und schadet nicht. */
.kopf{position:sticky;overflow:visible}
.haupt > a,.nav-punkt > a{color:var(--tief)}
.haupt > a:hover,.nav-punkt > a:hover{color:var(--primaer)}
/* Nur die Höhe: Der Abstand wird weiter oben je nach Fensterbreite gesetzt und darf hier
   nicht wieder überschrieben werden. */
.kopf-reihe{min-height:5rem}

/* ---- Hero-Bild der Inhaltsseiten ---- */
.held-bild-breit{margin-top:1.6rem}
.held-bild-breit picture,.held-bild-breit img{display:block;width:100%;height:auto;
                                              border-radius:var(--r-l);object-fit:cover}
.kreis .bild picture,.kreis .bild img{width:100%;height:100%;border-radius:50%;object-fit:cover}

/* ---- Zweitbild im Textbereich ---- */
.zweitbild{margin:2rem auto}
.zweitbild picture,.zweitbild img{display:block;width:100%;max-width:42rem;height:auto;
                                  border-radius:var(--r-m);object-fit:cover}

/* ---- Felder der Weiche sauber ausrichten ----
   Die Beschriftungen sind unterschiedlich lang. Ohne align-items:start rutschen die Eingabefelder
   gegeneinander, sobald eine Beschriftung umbricht - im Entwurf stehen sie auf einer Linie. */
.weiche-felder{align-items:start}
.weiche-felder .feld{min-width:0}
.weiche-felder label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.weiche-felder input,.weiche-felder select{height:3.1rem}
.weiche-felder .klein{min-height:2.4rem}

/* ---- Dritte Stufe der Wege-Karten ----
   basis.css kennt nur .weg.direkt und .weg.individuell. Ohne diese Regel steht die
   Ausschreibungs-Karte weiß und ohne Kennzeichnung neben den beiden anderen. */
.weg.aus{background:var(--tief);color:#fff}
.weg.aus h3{color:#fff}
.weg.aus p{color:#D6E2EE}
.weg.aus .kennzeichen{background:rgb(255 255 255 / .14);color:#fff}
.weg.aus .klein strong{color:#fff}
.weg.aus .knopf-hell{background:#fff;color:var(--tief)}
.weg .kennzeichen{background:#fff}

/* ---- Einstiegskarten (Wohnanlagen, Kommunen, große Abnahmestellen) ---- */
.seiten-karte{display:flex;flex-direction:column;gap:.5rem;background:var(--nebel);
              border:1px solid var(--linie);border-radius:var(--r-m);padding:1.4rem 1.5rem;
              text-decoration:none;color:var(--grau);line-height:1.55;
              transition:border-color .15s,transform .15s}
.seiten-karte:hover{border-color:var(--primaer);transform:translateY(-2px)}
.seiten-karte span{text-decoration:none}
.seiten-karte-titel{font-weight:800;font-size:1.08rem;color:var(--tief);text-transform:none;
                    letter-spacing:normal}
.seiten-karte time{color:var(--grau)}

/* ---- Ansprechpartner auf der Startseite ----
   NICHT .personen verwenden: Diese Klasse ist in basis.css die Schaltergruppe für die
   Personenzahl im Tarifrechner (display:flex, feste Höhe 3,5rem). Sie hatte die Kacheln
   in einen Balken gepresst. */
/* auto-fit mit fester Höchstbreite lässt bei EINEM Ansprechpartner eine breite Leere daneben -
   die Karte wirkte wie aus dem Rahmen gefallen. Feste Spaltenzahl je Breite ist berechenbarer. */
.ansprechpartner{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr);justify-items:stretch}
@media(min-width:40rem){.ansprechpartner{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:64rem){.ansprechpartner{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:40rem){
  .ansprechpartner{grid-template-columns:repeat(auto-fit,minmax(17rem,22rem));justify-content:start}
}
.person-karte{display:flex;align-items:center;gap:.9rem;background:#fff;border:1px solid var(--linie);
               border-radius:var(--r-m);padding:1rem 1.2rem;text-decoration:none;color:inherit;
               box-shadow:var(--schatten-s);transition:border-color .15s,transform .15s}
.person-karte:hover{border-color:var(--primaer);transform:translateY(-2px)}
.person-karte .portraet{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none;
                         background:var(--nebel2)}
.person-text{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.berater-name{font-weight:700;color:var(--tief)}
.berater-rolle{font-size:.9rem;color:var(--grau)}

/* ---- Begleittext neben den häufigen Fragen ---- */
.seitenspalte-vorspann{color:var(--grau);margin-top:0}

/* ---- Portalzeile im Fußbereich ----
   Linktext und Zielgruppe standen in einer Zeile ineinander. Die Zielgruppe gehört
   als eigene Zeile darunter, sonst liest sich beides wie ein einziger Satz. */
.fuss .portal-liste li{display:block;margin-bottom:.7rem}
.fuss .portal-liste li > a{display:block}
.fuss .portal-liste li > .klein{display:block;margin-top:.15rem;opacity:.75}

/* ---- Suchfeld im Branchenfinder ---- */
.suche{display:flex;align-items:center;gap:.6rem;border:2px solid var(--tief);border-radius:16px;
       padding:.55rem .6rem .55rem 1rem;color:var(--grau);background:#fff;max-width:30rem}
.suche input{flex:1 1 auto;min-width:0;border:0;outline:0;background:transparent;font:inherit;color:var(--text)}
.suche .knopf{flex:none;height:2.5rem;padding-inline:1rem}

/* ============================================================================
   Redaktioneller Fließtext
   basis.css setzt alle Ränder auf null und definiert die Abstände nur für
   .fliesstext. Der Inhalt der Branchen-, Leistungs- und Ratgeberseiten steht
   aber in .text-inhalt - dort klebten Überschrift und Absatz aneinander.
   ========================================================================= */
.text-inhalt h2{font-size:1.55rem;margin:2.4rem 0 .8rem;line-height:1.25}
.text-inhalt h2:first-child{margin-top:0}
.text-inhalt h3{font-size:1.18rem;margin:1.7rem 0 .55rem;line-height:1.3}
.text-inhalt p{margin:0 0 1rem}
.text-inhalt p:last-child{margin-bottom:0}
.text-inhalt ul,.text-inhalt ol{margin:0 0 1.2rem;padding-left:1.3rem;list-style:revert}
.text-inhalt li{margin-bottom:.45rem}
.text-inhalt li:last-child{margin-bottom:0}
.text-inhalt table{width:100%;border-collapse:collapse;margin:0 0 1.4rem;font-size:.97rem}
.text-inhalt th,.text-inhalt td{text-align:left;padding:.6rem .8rem;border-bottom:1px solid var(--linie)}
.text-inhalt th{background:var(--nebel);font-weight:700;color:var(--tief)}
.text-inhalt strong,.text-inhalt b{color:var(--tief)}
.text-inhalt a{color:var(--primaer)}
.text-inhalt .hinweis-recht{background:var(--nebel);border-left:4px solid var(--linie);
                            border-radius:0 var(--r-s) var(--r-s) 0;padding:.9rem 1.1rem;
                            font-size:.95rem;color:var(--grau)}

/* Die Seitenspalte soll nicht breiter wirken als der Text daneben. */
.text-raster-rechts .text-inhalt{max-width:none}
/* Weitere Elemente, die redaktionsHtml zulässt - damit kein Baustein ohne Gestalt bleibt. */
.text-inhalt h4{font-size:1.05rem;margin:1.4rem 0 .4rem;color:var(--tief)}
.text-inhalt blockquote{margin:0 0 1.2rem;padding:.9rem 1.2rem;border-left:4px solid var(--primaer);
                        background:var(--primaer-hell);border-radius:0 var(--r-s) var(--r-s) 0}
.text-inhalt figure{margin:0 0 1.4rem}
.text-inhalt figcaption{margin-top:.4rem;font-size:.9rem;color:var(--grau)}
.text-inhalt hr{border:0;border-top:1px solid var(--linie);margin:2rem 0}
.text-inhalt small{font-size:.9rem;color:var(--grau)}
.text-inhalt img{border-radius:var(--r-m);margin:0 0 1.2rem}
.text-inhalt sup,.text-inhalt sub{font-size:.75em}

/* ---- Livesuche im Branchenfinder ---- */
.branche-kachel.verborgen{display:none}
.branchen-raster .hinweis{grid-column:1/-1}

/* ============================================================================
   Korrekturen aus der Sichtprüfung
   ========================================================================= */

/* B3: Keine Silbentrennung in Kacheln und Knöpfen. "Gärtnereien und Ge-wächshäuser"
   ist schwerer zu lesen als eine zweite Zeile. */
.kachel,.kachel h3,.branchen-kachel,.seiten-karte-titel,.knopf,.reiter a,.mega-mitte a,
.finder-kachel,.verwandte a{hyphens:none;-webkit-hyphens:none}

/* C9: Branchenkacheln sind Flächen, keine Textlinks - der Unterstrich gehört weg.
   Ob eine Branche eine eigene Seite hat, zeigt der Pfeil, nicht die Schriftauszeichnung. */
.branchen-kachel,.branchen-kachel:hover,.finder-kachel,.finder-kachel:hover{text-decoration:none}
.branchen-kachel span,.finder-kachel span{text-decoration:none}

/* C7: Kontrast. --grau war auf hellem Grund zu schwach für Fließtext in Karten und im
   Fußbereich. Diese Töne erreichen auf ihrem jeweiligen Grund mindestens 4,5:1. */
.seiten-karte span,.seiten-karte time{color:var(--grau2)}
.fuss .klein,.fuss-zeiten,.fuss address{color:#C6D2E0}
.fuss .portal-liste li > .klein{color:#B8C6D6;opacity:1}
.hinweis-recht{color:var(--grau2)}

/* C1: Weiche in der schmalen Seitenspalte.
   Drei Felder nebeneinander passen in 20 rem nicht: Beschriftungen brachen ab
   ("Jahresve…", "Postleitz…"), Eingaben waren abgeschnitten. In der Seitenspalte
   stehen sie deshalb untereinander, in voller Breite bleibt das Raster. */
.text-seitenspalte .weiche-felder{grid-template-columns:1fr}
.text-seitenspalte .weiche-felder label{white-space:normal;overflow:visible}
.text-seitenspalte .weiche-felder .klein{min-height:0}
.text-seitenspalte .weiche-arten{flex-wrap:wrap}
.text-seitenspalte .weiche-arten .wahl{flex:1 1 auto}


/* ============================================================================
   Mobil: waagerechtes Überlaufen verhindern

   Ursache war das Suchfeld im Branchenfinder. Ein <input type="search"> bringt
   eine eigene Mindestbreite mit und schrumpft nicht von selbst. In einem Raster
   mit "1fr" bedeutet das: Die Spalte wird so breit wie das Feld, und der ganze
   Abschnitt läuft über den Bildschirmrand hinaus - samt Text und Kacheln.
   ========================================================================= */
@media (max-width:60rem){
  /* minmax(0,1fr) erlaubt der Spalte, schmaler zu werden als ihr Inhalt */
  .finder{grid-template-columns:minmax(0,1fr)}
  .finder > *{min-width:0}
  .suche{max-width:100%;width:100%}
  .suche input{min-width:0;width:100%}
  .reiter{min-width:0}
  /* Zwei Kacheln nebeneinander sind auf schmalen Geräten zu eng */
  .branchen-raster{grid-template-columns:minmax(0,1fr)}
}
@media (min-width:34rem) and (max-width:60rem){
  .branchen-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Die Aktionsleiste am unteren Rand: gleich breite Hälften, damit beide
   Beschriftungen hineinpassen. Vorher war die rechte Schaltfläche abgeschnitten. */
@media (max-width:60rem){
  .leiste{grid-template-columns:1fr 1fr}
  .leiste .knopf{padding-inline:.6rem;font-size:.97rem;white-space:nowrap;
                 overflow:hidden;text-overflow:ellipsis}
}

/* Sicherungsnetz: Kein Baustein darf breiter werden als sein Platz. */
.wrap,.abschnitt,.finder,.branchen-raster{min-width:0}

/* ============================================================================
   Fußbereich
   ========================================================================= */
/* C6: 1,6fr + dreimal 1fr ließ die zweite Zeile ungleich umbrechen - drei Spalten oben,
   zwei unten, rechts daneben eine breite Leere. Gleich breite Spalten ab der zweiten. */
.fuss-marke{min-width:0}
.fuss-logo{flex-wrap:wrap}
.fuss-logo .wortmarke-fuss{max-width:260px;height:auto}

/* C5: Die Zielgruppe stand als eigene Zeile unter dem Linktext und wiederholte ihn sinngemäß.
   Sie erscheint nur noch, wenn sie etwas anderes sagt als der Verweis selbst. */
.fuss .portal-liste li > .klein{color:#B9C7D6}

/* C7: Kontrast. Die blassen Zeilen im dunklen Fußbereich lagen unter dem Mindestwert. */
.fuss-zeiten,.fuss .klein,.fuss-rechtszeile{color:#C3D0DD}
.fuss a{color:#E6ECF3}
.fuss a:hover{color:#fff}

/* ============================================================================
   C1: Weiche in der Seitenspalte
   Die Spalte ist 20rem breit. Drei Felder nebeneinander ergaben abgeschnittene
   Beschriftungen ("Jahresve…", "Postleitz…") und ein Eingabefeld, in das nicht
   einmal "z. B. 28.000" passte. In der Seitenspalte stehen sie untereinander.
   ========================================================================= */
.text-seitenspalte .weiche-felder{grid-template-columns:minmax(0,1fr)}
.text-seitenspalte .weiche-felder label{white-space:normal}
.text-seitenspalte .weiche-felder .klein{min-height:0}
.text-seitenspalte .weiche .energiearten{flex-wrap:wrap}
.text-seitenspalte .weiche{padding:1.2rem}

/* C3: Abstände zwischen den Abschnitten waren auf Inhaltsseiten sehr groß.
   ACHTUNG: Der obere Abstand darf NICHT entfallen, wenn zwei Abschnitte aufeinanderfolgen.
   Ein früherer Versuch mit ".abschnitt + .abschnitt{padding-top:0}" hat auf der Startseite
   jede Überschrift an den oberen Rand ihres farbigen Abschnitts geklebt. */
.abschnitt{padding-block:2.8rem}
@media(min-width:64rem){.abschnitt{padding-block:3.4rem}}

/* C10: Textabschnitte ohne Seitenspalte standen mittig in großer Leere.
   Sie richten sich jetzt links aus wie der übrige Inhalt. */
.wrap.abschnitt.text-inhalt{margin-inline:auto}
.text-raster-rechts > .text-inhalt{justify-self:start}

/* C11: Die Linie über dem Inhaltsverzeichnis hatte keine Funktion. */
.inhaltsverzeichnis{border-top:0;padding-top:0}
.inhaltsverzeichnis > p:first-child,.inhaltsverzeichnis > strong:first-child{margin-top:0}

/* ============================================================================
   Nachbesserungen aus der Bildschirmdurchsicht
   ========================================================================= */
/* Das Klappmenü liegt innerhalb der Navigation und erbt von dort white-space:nowrap.
   Dadurch wurde "Schreinereien und Holzverarbeitung" am Spaltenrand abgeschnitten,
   statt umzubrechen. */
.mega a,.mega p,.mega h3{white-space:normal}
/* Höher gewichtet als .haupt a aus basis.css - dort steht white-space:nowrap, und das Klappfeld
   liegt innerhalb der Navigation. Ohne diese Zeile laufen lange Branchennamen aus der Spalte
   heraus und schieben sich unter den orangefarbenen Kasten. */
.mega .mega-mitte a{white-space:normal;overflow-wrap:break-word;min-width:0}

/* Der Kontaktkasten stapelte seine Absätze ohne Abstand; der Knopf legte sich dadurch
   über die Zeile darüber. Eine Spalte mit festem Abstand schließt das aus. */
.kasten{display:flex;flex-direction:column;gap:.7rem;align-items:flex-start}
.kasten > p{margin:0}
.kasten .knopf{margin-top:0}
/* padding-block kommt ebenfalls aus der Navigation und addiert sich zum eigenen Innenabstand. */
.mega a{padding-block:0}
.mega-mitte a{padding-block:.62rem}
.mega-alle{padding-block:.7rem}

/* ---- Formularmaske "Partner werden" ---- */
.formular .feld{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.9rem}
.formular .feld label{font-weight:600;font-size:.95rem;color:var(--tief)}
.formular .feld input,.formular .feld select,.formular .feld textarea{width:100%;min-width:0}
.formular .zwei{display:grid;gap:.9rem;grid-template-columns:minmax(0,1fr)}
@media(min-width:30rem){.formular .zwei{grid-template-columns:repeat(2,minmax(0,1fr))}}
.formular .feld-kasten{background:var(--nebel);border-radius:var(--r-s);padding:.8rem .9rem}
.formular .feld-kasten label{display:flex;gap:.6rem;align-items:flex-start;font-weight:400;
                             font-size:.93rem;line-height:1.45;color:var(--grau)}
.formular .feld-kasten input{width:auto;flex:none;margin-top:.2rem}
.formular .knopf{width:100%;justify-content:center;margin-top:.4rem}
.formular .fehler{color:var(--warn,#B3261E);font-size:.88rem}
.honigtopf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---- Beraterkarte in der Seitenspalte ----
   Der senkrechte Baustein aus basis.css: Bild und Name nebeneinander, darunter die Rufnummer
   über die volle Breite. Vorher lag hier die waagerechte Gestaltung der Startseite darüber –
   dadurch wurde die Rufnummer in eine schmale Spalte gedrängt und brach mitten durch. */
.text-seitenspalte .berater-karte{padding:1.1rem}
.berater-karte .knopf{width:100%;justify-content:center;white-space:nowrap}
.berater-karte .berater-name{line-height:1.25}
/* Eine Rufnummer darf nie umbrechen – „08157 / 999“ über „42 - 11“ liest sich wie zwei Nummern. */
a[href^="tel:"]{white-space:nowrap}

/* ---- Verweise auf die eigenen Portale (neues Tab) ----
   Das kleine Zeichen kündigt an, dass ein neues Tab aufgeht. Ohne Ankündigung ist das ein
   bekannter Kritikpunkt der Barrierefreiheit; für Screenreader steht der Hinweis im Text. */
.neues-tab{display:inline-block;vertical-align:-1px;opacity:.65;margin-left:.15rem}
a:hover > .neues-tab{opacity:1}

/* ============================================================================
   Profilseite eines Ansprechpartners
   Sie muss auch dann geschlossen wirken, wenn nur Name, Rolle, Foto und
   Durchwahl gepflegt sind - mehr liefert das Partnerportal nicht immer.
   ========================================================================= */
.profil-karte{display:grid;gap:1.6rem;grid-template-columns:minmax(0,1fr);
              background:#fff;border:1px solid var(--linie);border-radius:var(--r-l);
              padding:1.8rem;box-shadow:var(--schatten-s);max-width:52rem}
@media(min-width:44rem){.profil-karte{grid-template-columns:auto minmax(0,1fr);align-items:start}}

/* .portraet.gross hatte gar keine Regel - deshalb blieb das Bild bei den 3,9rem
   der Grunddatei, obwohl im Markup 180 Pixel stehen. */
.portraet.gross{width:150px;height:150px}
@media(min-width:44rem){.portraet.gross{width:180px;height:180px}}

.profil-text{display:flex;flex-direction:column;gap:.55rem;min-width:0}
.profil-name{font-size:1.35rem;font-weight:800;color:var(--tief);line-height:1.2}
.profil-rolle{color:var(--grau);margin-top:-.35rem}
.profil-vorstellung{margin:.4rem 0 0;line-height:1.6}
.profil-karte .berater-zitat{margin:.4rem 0 0;padding-left:1rem;border-left:3px solid var(--signal);
                             color:var(--grau2);font-style:italic}
.profil-karte .fakten{display:grid;gap:.5rem;margin:.6rem 0 0}
.profil-karte .fakten > div{display:grid;gap:.1rem}
.profil-karte .fakten dt{font-size:.85rem;font-weight:700;color:var(--grau);
                         text-transform:uppercase;letter-spacing:.04em}
.profil-karte .fakten dd{margin:0;color:var(--text)}
.profil-wege{display:flex;flex-wrap:wrap;gap:.6rem;margin:.9rem 0 0}
.profil-wege .knopf{margin-top:0}
/* .mt-klein wurde im Markup verwendet, hatte aber nirgends eine Regel. */
.mt-klein{margin-top:.45rem}

/* ============================================================================
   Fortschrittsanzeige der Anfragestrecke

   Drei Schritte, nicht vier: Das Raster aus basis.css sieht vier Spalten vor
   und ließ rechts eine leere Spalte stehen. Und die Zustände "an" und "fertig"
   hatten gar keine Regel - dadurch sahen alle drei Kästen gleich aus, und man
   erkannte nicht, wo man steht.
   ========================================================================= */
.seiten-kopf .schritte{grid-template-columns:minmax(0,1fr);counter-reset:schritt;gap:.6rem}
@media(min-width:44rem){.seiten-kopf .schritte{grid-template-columns:repeat(3,minmax(0,1fr))}}
.seiten-kopf .schritte li{counter-increment:schritt;display:flex;align-items:center;gap:.7rem;
                          padding:.85rem 1rem;font-size:.97rem;color:var(--grau);
                          box-shadow:none;background:#fff}
.seiten-kopf .schritte li::before{content:counter(schritt);flex:none;width:1.8rem;height:1.8rem;
                                  border-radius:50%;display:flex;align-items:center;justify-content:center;
                                  font-weight:700;font-size:.92rem;
                                  background:var(--nebel2);color:var(--grau)}
/* Der aktuelle Schritt */
.seiten-kopf .schritte li.an{border-color:var(--primaer);color:var(--tief);font-weight:700}
.seiten-kopf .schritte li.an::before{background:var(--primaer);color:#fff}
/* Bereits erledigte Schritte */
.seiten-kopf .schritte li.fertig{border-color:var(--gruen,#1E8E3E);color:var(--grau2)}
.seiten-kopf .schritte li.fertig::before{content:"✓";background:var(--gruen,#1E8E3E);color:#fff}
/* Die Verbindungslinie aus basis.css passt nur zum Vierer-Raster. */
.seiten-kopf .schritte li:not(:last-child)::after{display:none}


/* ============================================================================
   Lieferstellen auf /mehrere-standorte
   Eine Zeile je Standort. Ohne Rahmen wäre bei zehn Stellen nicht mehr
   erkennbar, welches Feld zu welchem Standort gehört.
   ========================================================================= */
.stellen-liste{display:grid;gap:1rem;margin-bottom:1rem}
.stelle{border:1px solid var(--linie);border-radius:var(--r-m);padding:1rem 1.1rem .4rem;margin:0}
.stelle legend{font-weight:700;color:var(--tief);font-size:.95rem;padding-inline:.4rem}
.stelle-felder{display:grid;gap:.7rem;grid-template-columns:minmax(0,1fr)}
@media(min-width:34rem){.stelle-felder{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:60rem){
  .stelle-felder{grid-template-columns:repeat(6,minmax(0,1fr))}
  /* Bezeichnung, Zählernummer und Marktlokations-ID brauchen mehr Platz als PLZ und Datum. */
  .stelle-felder .feld{grid-column:span 2}
  .stelle-felder .feld-kurz{grid-column:span 1}
}
.stelle-felder label{font-size:.85rem;font-weight:600;color:var(--grau)}