/* =====================================================================
   Schriften liegen bei uns. Vorher kamen sie von fonts.googleapis.com -
   das uebertraegt die IP-Adresse jedes Besuchers an Google und haette in
   die Datenschutzerklaerung gemusst. Selbst ausgeliefert entfaellt die
   Uebertragung ganz. Nunito steht unter der SIL Open Font License.
   ===================================================================== */
@font-face{font-family:'Nunito';font-style:normal;font-weight:600;font-display:swap;src:url(schriften/nunito-600.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url(schriften/nunito-800.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:900;font-display:swap;src:url(schriften/nunito-900.woff2) format('woff2')}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:400;font-display:swap;src:url(schriften/nunito-sans-400.woff2) format('woff2')}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:600;font-display:swap;src:url(schriften/nunito-sans-600.woff2) format('woff2')}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:700;font-display:swap;src:url(schriften/nunito-sans-700.woff2) format('woff2')}

/* =====================================================================
   digitalPRO - gemeinsame Gestaltung fuer Startseite, Preise und die
   drei Produktseiten. Eine Datei, damit die Seiten nicht auseinander-
   laufen.

   Farben: die Produktverlaeufe stammen aus _WERKZEUG/werbung/logo.py -
   je Produkt die Akzentfarbe seiner eigenen Oberflaeche.

   DUNKEL IST DER NORMALFALL, wie seit dem 02.09.2026 auf der Homepage.
   Der bare :root traegt deshalb die dunklen Werte; hell kommt ueber
   [data-theme="light"] dazu, gesetzt vom Umschalter im Kopf und
   gemerkt in localStorage unter "dp-theme" - derselbe Schluessel wie
   bisher, damit die Wahl der Besucher erhalten bleibt.
   ===================================================================== */

:root{
  --grund:#0f172a;
  --flaeche:#162034;
  --flaeche-2:#1d2942;
  --linie:rgba(148,163,184,.18);
  --text:#f1f5f9;
  --text-2:#cbd5e1;
  --gedaempft:#94a3b8;
  --marke:#5f84ff;
  --kopf-grund:rgba(15,23,42,.86);
  --schau-grund:#0b1220;
  --schau-schleier:rgba(22,32,52,.92);

  --f-display:"Nunito","Segoe UI",system-ui,sans-serif;
  --f-text:"Nunito Sans","Segoe UI",system-ui,sans-serif;

  --r:18px;
  --r-s:11px;
  --maxw:1120px;
}

/* Die helle Fassung. Werte aus der bisherigen stil.css uebernommen,
   damit beide Faelle dieselbe Handschrift haben. */
:root[data-theme="light"]{
  --grund:#f5f6f9;
  --flaeche:#ffffff;
  --flaeche-2:#eef1f5;
  --linie:#e2e6ec;
  --text:#0f1720;
  --text-2:#33404e;
  --gedaempft:#5c6773;
  --marke:#1746c9;
  --kopf-grund:rgba(245,246,249,.88);
  --schau-grund:#e8ebf0;
  --schau-schleier:rgba(255,255,255,.92);
}

/* Produktfarben als Bereichsvariablen - jedes Element unterhalb erbt sie. */
.ida {--von:#fbbf24; --bis:#f97316}
.con {--von:#a78bfa; --bis:#7c3aed}
.vera{--von:#60a5fa; --bis:#4f46e5}
.smart{--von:#34d399; --bis:#0d9488}
.waerme{--von:#fb7185; --bis:#dc2626}

/* Auf hellem Grund sind dieselben Toene als Schrift nicht mehr lesbar -
   Amber auf Weiss faellt durch jede Kontrastpruefung. Deshalb je Thema
   eigene Werte; die Flaechenverlaeufe tragen weiterhin weisse Schrift. */
:root[data-theme="light"] .ida {--von:#b45309; --bis:#c2410c}
:root[data-theme="light"] .con {--von:#6d28d9; --bis:#5b21b6}
:root[data-theme="light"] .vera{--von:#1d4ed8; --bis:#4338ca}
:root[data-theme="light"] .smart{--von:#047857; --bis:#0f766e}
:root[data-theme="light"] .waerme{--von:#be123c; --bis:#991b1b}

*{box-sizing:border-box}
/* Ohne das gewinnt jede Klasse mit eigenem display gegen das
   hidden-Attribut: .tarife{display:grid} liess am 22.09.2026 beide
   Vera-Tarifgruppen gleichzeitig stehen, obwohl hidden gesetzt war. */
[hidden]{display:none!important}
body{
  margin:0;
  background:var(--grund);
  color:var(--text);
  font-family:var(--f-text);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.huelle{max-width:var(--maxw);margin-inline:auto;padding-inline:20px}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;margin:0;line-height:1.14;letter-spacing:-.02em}
p{margin:0}
img{max-width:100%;display:block}

/* ---------- Kopf ---------- */
.kopf{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:20;
  background:var(--kopf-grund);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--linie);
}
.kopf .huelle{display:flex;align-items:center;gap:12px;padding-block:14px}
.wortmarke{font-family:var(--f-display);font-weight:900;font-size:20px;
  letter-spacing:-.03em;text-decoration:none;color:var(--text)}
.wortmarke .pro{color:var(--marke)}
.kopf nav{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.kopf nav a{text-decoration:none;color:var(--text-2);font-weight:600;font-size:14px;
  padding:8px 13px;border-radius:99px;transition:background .15s,color .15s}
.kopf nav a:hover{background:var(--flaeche-2);color:var(--text)}
.kopf nav a.stark{background:var(--marke);color:#fff}
.kopf nav a.stark:hover{filter:brightness(1.12);color:#fff}

/* Der Umschalter fuers Erscheinungsbild - ein Knopf, kein Menue. */
.licht{
  flex:none;width:34px;height:34px;border-radius:99px;cursor:pointer;
  border:1px solid var(--linie);background:transparent;color:var(--text-2);
  display:grid;place-items:center;font-size:15px;line-height:1;
  transition:background .15s,color .15s;
}
.licht:hover{background:var(--flaeche-2);color:var(--text)}
.licht:focus-visible{outline:2px solid var(--marke);outline-offset:2px}
.licht .sonne{display:none}
.licht .mond{display:block}
:root[data-theme="light"] .licht .sonne{display:block}
:root[data-theme="light"] .licht .mond{display:none}

/* ---------- Produktzeichen ---------- */
.zeichen{
  flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--von),var(--bis));
  font-family:var(--f-display);font-weight:900;font-size:20px;color:#fff;
  box-shadow:0 8px 22px -8px var(--bis);
}
.name{
  background:linear-gradient(100deg,var(--von),var(--bis));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- Knoepfe ---------- */
.knopf{display:inline-block;text-decoration:none;font-weight:700;font-size:15px;
  padding:13px 26px;border-radius:99px;transition:transform .15s,background .15s,filter .15s}
.knopf.voll{background:var(--marke);color:#fff}
.knopf.voll:hover{filter:brightness(1.12);transform:translateY(-1px);color:#fff}
.knopf.leer{border:1px solid var(--linie);color:var(--text)}
.knopf.leer:hover{background:var(--flaeche-2);transform:translateY(-1px)}
.knopf.produkt{background:linear-gradient(100deg,var(--von),var(--bis));color:#fff}
.knopf.produkt:hover{filter:brightness(1.08);transform:translateY(-1px);color:#fff}
.knopfreihe{display:flex;gap:11px;flex-wrap:wrap}
.knopfreihe.mitte{justify-content:center}

/* ---------- Preisumschalter ---------- */
.umschalter{display:flex;justify-content:center}
.umschalter .gruppe{display:inline-flex;background:var(--flaeche);
  border:1px solid var(--linie);border-radius:99px;padding:4px;gap:3px}
.umschalter button{font-family:var(--f-text);font-size:13.5px;font-weight:700;border:0;
  background:transparent;color:var(--gedaempft);padding:9px 18px;border-radius:99px;
  cursor:pointer;transition:background .15s,color .15s}
.umschalter button[aria-pressed="true"]{background:var(--marke);color:#fff}
.umschalter button:focus-visible{outline:2px solid var(--marke);outline-offset:2px}
.steuerhinweis{text-align:center;font-size:12.5px;color:var(--gedaempft);margin-top:12px}

/* ---------- Abschluss- und Kontaktkasten ---------- */
.abschluss-kasten{
  border:1px solid var(--linie);border-radius:var(--r);padding:36px 24px;text-align:center;
  background:radial-gradient(60% 120% at 50% 0%,rgba(95,132,255,.16),transparent 70%),var(--flaeche);
}
:root[data-theme="light"] .abschluss-kasten{
  background:radial-gradient(60% 120% at 50% 0%,rgba(23,70,201,.08),transparent 70%),var(--flaeche);
}
.abschluss-kasten h2{font-size:clamp(1.3rem,3.4vw,1.78rem);font-weight:900;margin-bottom:10px}
.abschluss-kasten p{color:var(--text-2);max-width:54ch;margin-inline:auto;font-size:15px}
.abschluss-kasten .knopfreihe{margin-top:22px}
/* Der Weg zu uns steht als Text da, nicht nur als Knopf: wer lieber
   selbst waehlt, kann Adresse und Nummer abschreiben. */
.kontaktzeile{margin-top:18px;font-size:13.5px;color:var(--gedaempft)}
.kontaktzeile a{color:var(--text-2)}

/* ---------- Fuss ---------- */
.fuss{border-top:1px solid var(--linie);padding-block:28px;background:var(--grund)}
.fuss .huelle{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.fuss-links{display:flex;flex-wrap:wrap;gap:8px 18px}
.fuss a{color:var(--gedaempft);text-decoration:none;font-size:13.5px}
.fuss a:hover{color:var(--text);text-decoration:underline}
.fuss .klein{color:var(--gedaempft);font-size:13px}

/* ---------- Tarifkarten (Preisseite) ---------- */
.tarife{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
@media (max-width:900px){.tarife{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}
.tarif{position:relative;display:flex;flex-direction:column;
  background:var(--flaeche);border:1px solid var(--linie);
  border-radius:var(--r-s);padding:22px 20px 20px}
/* Nur der empfohlene Tarif bekommt die Produktfarbe an den Rand - sonst
   waere die Empfehlung kein Hinweis mehr, sondern Dekoration. */
.tarif.empfohlen{border-color:var(--von);background:var(--flaeche-2)}
.marke-empfohlen{position:absolute;top:-10px;left:20px;
  font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  background:linear-gradient(100deg,var(--von),var(--bis));color:#fff;
  padding:4px 11px;border-radius:99px}
.tarif h3{font-size:1.02rem;font-weight:800;margin-bottom:3px}
.tarif .wofuer{font-size:12.5px;color:var(--gedaempft);margin-bottom:16px}
.zahl{display:flex;align-items:baseline;gap:5px;margin-bottom:3px;flex-wrap:wrap}
.zahl .betrag{font-family:var(--f-display);font-weight:900;font-size:2.05rem;
  font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.zahl .takt{font-size:13.5px;color:var(--gedaempft)}
.staffel{font-size:12.5px;color:var(--von);font-weight:700;margin-bottom:14px;min-height:1.2em}
.enthalten{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:8px}
.enthalten li{position:relative;padding-left:22px;font-size:13.5px;color:var(--text-2);line-height:1.45}
.enthalten li::before{content:"";position:absolute;left:0;top:.42em;width:11px;height:6px;
  border-left:2.5px solid var(--von);border-bottom:2.5px solid var(--von);transform:rotate(-45deg)}
.tarif .holen{margin-top:auto;display:block;text-align:center;text-decoration:none;
  font-weight:700;font-size:14px;padding:11px 18px;border-radius:99px;
  border:1px solid var(--linie);color:var(--text);transition:background .15s}
.tarif .holen:hover{background:var(--flaeche-2)}
.tarif.empfohlen .holen{background:linear-gradient(100deg,var(--von),var(--bis));
  border-color:transparent;color:#fff}
.tarif.empfohlen .holen:hover{filter:brightness(1.08)}
.nachsatz{font-size:13px;color:var(--gedaempft);margin-top:16px;padding-top:14px;
  border-top:1px solid var(--linie)}

/* =====================================================================
   Produktseiten (ida.html, concordia.html, vera.html)
   ===================================================================== */

.p-auftakt{padding-block:50px 0}
.p-auftakt .wer{font-size:12px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gedaempft);margin-bottom:14px;display:block}
.p-auftakt h1{font-size:clamp(1.9rem,5.2vw,3rem);font-weight:900;margin-bottom:16px}
.p-auftakt .deutung{color:var(--text-2);font-size:clamp(1rem,2.3vw,1.12rem);
  max-width:62ch;margin-bottom:22px}
.p-auftakt .deutung em{color:var(--von);font-style:normal;font-weight:700}
.p-schau{margin-top:34px;border:1px solid var(--linie);border-radius:var(--r);
  overflow:hidden;background:var(--schau-grund);position:relative}
.p-schau::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;z-index:2;
  background:linear-gradient(90deg,var(--von),var(--bis))}
.p-schau img{width:100%;height:auto}

/* Hoehepunkte: Bild und Text im Wechsel */
.hoehen{padding-block:56px 10px;display:grid;gap:42px}
.hoehe{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
.hoehe:nth-child(even) .hoehe-bild{order:2}
@media (max-width:820px){
  .hoehe{grid-template-columns:1fr;gap:20px}
  .hoehe:nth-child(even) .hoehe-bild{order:0}
}
.hoehe-bild{border:1px solid var(--linie);border-radius:var(--r-s);
  overflow:hidden;background:var(--schau-grund)}
.hoehe-bild img{width:100%;height:auto}
.hoehe-bild.hochkant{max-width:280px;margin-inline:auto}
.hoehe-text .kennung{font-size:11.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--von);margin-bottom:9px;display:block}
.hoehe-text h2{font-size:clamp(1.3rem,3.4vw,1.72rem);font-weight:900;margin-bottom:11px}
.hoehe-text p{color:var(--text-2);font-size:15px}

/* Alle Funktionen */
.funktionen{margin-top:56px;padding-block:44px;border-block:1px solid var(--linie);
  background:var(--flaeche)}
.funktionen h2{font-size:clamp(1.35rem,3.6vw,1.85rem);font-weight:900;
  text-align:center;margin-bottom:7px}
.funktionen .unter{text-align:center;color:var(--gedaempft);font-size:14.5px;margin-bottom:30px}
.f-gitter{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:900px){.f-gitter{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.f-gitter{grid-template-columns:1fr}}
.f-block{background:var(--grund);border:1px solid var(--linie);
  border-radius:var(--r-s);padding:18px 18px 16px}
.f-block h3{font-size:14.5px;font-weight:800;margin-bottom:10px;
  padding-bottom:9px;border-bottom:1px solid var(--linie)}
.f-block ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.f-block li{position:relative;padding-left:19px;font-size:13.5px;
  color:var(--text-2);line-height:1.45}
.f-block li::before{content:"";position:absolute;left:0;top:.44em;width:9px;height:5px;
  border-left:2.2px solid var(--von);border-bottom:2.2px solid var(--von);
  transform:rotate(-45deg)}

/* Preisstreifen */
.p-preis{padding-block:46px}
.p-preis-kasten{border:1px solid var(--von);border-radius:var(--r);
  background:var(--flaeche-2);padding:28px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
.p-preis .was{font-size:13px;color:var(--gedaempft);display:block;margin-bottom:3px}
.p-preis .betrag{font-family:var(--f-display);font-weight:900;font-size:2.1rem;
  font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.p-preis .dazu{font-size:13.5px;color:var(--gedaempft);display:block;margin-top:3px}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* =====================================================================
   Vera als Unterstuetzung, nicht als eigenes Angebot: der Streifen steht
   auf jeder Produktseite und sagt, welche KI-Funktionen im Produkt
   stecken und dass sie auf dem eigenen Server laufen.
   ===================================================================== */
.vera-streifen{padding-block:14px 46px}
.vera-kasten{
  border:1px solid var(--linie);border-radius:var(--r);
  background:
    linear-gradient(120deg,rgba(96,165,250,.10),transparent 58%),
    var(--flaeche);
  padding:26px 24px;
  display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;
}
@media (max-width:640px){.vera-kasten{grid-template-columns:1fr;gap:14px}}
:root[data-theme="light"] .vera-kasten{
  background:linear-gradient(120deg,rgba(29,78,216,.07),transparent 58%),var(--flaeche);
}
/* Das Zeichen traegt hier immer Veras Blau, auch auf einer Ida- oder
   Concordia-Seite - es ist ihr Zeichen, nicht das der Seite. */
.vera-kasten .zeichen{
  background:linear-gradient(140deg,#60a5fa,#4f46e5);
  box-shadow:0 8px 22px -8px #4f46e5;
}
:root[data-theme="light"] .vera-kasten .zeichen{
  background:linear-gradient(140deg,#3b82f6,#4338ca);
}
.vera-kasten .kennung{font-size:11.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gedaempft);display:block;margin-bottom:6px}
.vera-kasten h2{font-size:clamp(1.12rem,2.8vw,1.38rem);font-weight:900;margin-bottom:9px}
.vera-kasten p{color:var(--text-2);font-size:14.5px;margin-bottom:12px}
.vera-kasten ul{list-style:none;margin:0 0 14px;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:7px 18px}
@media (max-width:640px){.vera-kasten ul{grid-template-columns:1fr}}
.vera-kasten li{position:relative;padding-left:20px;font-size:13.5px;
  color:var(--text-2);line-height:1.45}
.vera-kasten li::before{content:"";position:absolute;left:0;top:.44em;width:10px;height:6px;
  border-left:2.4px solid #60a5fa;border-bottom:2.4px solid #60a5fa;transform:rotate(-45deg)}
:root[data-theme="light"] .vera-kasten li::before{border-color:#1d4ed8}
.vera-kasten .mehr{font-size:13.5px;font-weight:700;color:var(--marke);text-decoration:none}
.vera-kasten .mehr:hover{text-decoration:underline}
/* Die Zubuchung steht abgesetzt unter den enthaltenen Funktionen -
   sonst liest sich beides wie ein Block und der Unterschied zwischen
   "ist drin" und "kostet extra" geht verloren. */
.vera-kasten .zubuchen{
  margin-top:2px;padding-top:12px;border-top:1px solid var(--linie);
  font-size:13.5px;color:var(--text-2);
}
.vera-kasten .zubuchen strong{color:var(--text)}

/* =====================================================================
   Kontaktformular. Geht an den Dienst auf 9095, der die Nachricht an
   info@ schickt - kein mailto, das beim Besucher ein Mailprogramm
   voraussetzt, das viele gar nicht eingerichtet haben.
   ===================================================================== */
.formular{display:grid;gap:14px;text-align:left;margin-top:24px}
.f-reihe{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.f-reihe{grid-template-columns:1fr}}
.feld{display:flex;flex-direction:column;gap:5px}
.feld label{font-size:13px;font-weight:700;color:var(--text-2)}
.feld label .pflicht{color:var(--marke)}
.feld input,.feld select,.feld textarea{
  font-family:var(--f-text);font-size:15px;color:var(--text);
  background:var(--grund);border:1px solid var(--linie);
  border-radius:var(--r-s);padding:11px 13px;width:100%;
}
.feld textarea{min-height:110px;resize:vertical}
.feld input:focus,.feld select:focus,.feld textarea:focus{
  outline:2px solid var(--marke);outline-offset:1px;border-color:transparent;
}
/* Der Honigtopf steht im Quelltext, aber nie auf dem Bildschirm. */
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.einwilligung{display:flex;gap:10px;align-items:flex-start;
  font-size:13px;color:var(--text-2);line-height:1.45}
.einwilligung input{flex:none;width:17px;height:17px;margin-top:2px;accent-color:var(--marke)}
.einwilligung a{color:var(--marke)}
.f-senden{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:2px}
.f-senden button{
  font-family:var(--f-text);font-size:15px;font-weight:700;cursor:pointer;
  background:var(--marke);color:#fff;border:0;border-radius:99px;padding:13px 28px;
  transition:filter .15s,transform .15s;
}
.f-senden button:hover{filter:brightness(1.12);transform:translateY(-1px)}
.f-senden button:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.f-senden .oder{font-size:13.5px;color:var(--gedaempft)}
.f-senden .oder a{color:var(--text-2)}

/* =====================================================================
   Vierte Karte: Sensorik. Sie hat noch keinen Screenshot, weil es die
   Oberflaeche noch nicht gibt - statt einen zu erfinden steht dort ein
   Schema, das den Weg Sensor -> Funk -> Auswertung zeigt.
   ===================================================================== */
.schema{
  position:relative;aspect-ratio:16/10;
  border-radius:var(--r) var(--r) 0 0;
  background:
    radial-gradient(120% 90% at 20% 15%,rgba(52,211,153,.16),transparent 60%),
    var(--schau-grund);
  display:grid;place-items:center;
}
.schema svg{width:86%;height:auto;max-height:82%}

/* Der Hinweis, dass es das Angebot noch nicht fertig gibt. Er sitzt im
   Bild, damit ihn niemand uebersieht - Werbung fuer etwas, das noch
   gebaut wird, muss das sagen. */
.pilot{
  position:absolute;top:12px;right:12px;z-index:3;
  font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  background:linear-gradient(100deg,var(--von),var(--bis));color:#fff;
  padding:5px 11px;border-radius:99px;
  box-shadow:0 6px 18px -6px var(--bis);
}
/* Auf breiten Schirmen vier Karten in zwei Reihen statt vier duennen
   Spalten - die Screenshots brauchen Breite, um etwas zu zeigen. */
@media (min-width:881px){
  .karten.vier{grid-template-columns:repeat(2,1fr);max-width:900px;margin-inline:auto}
}

/* =====================================================================
   Messenger und Unterweisungen. Bekommt einen eigenen breiten Abschnitt,
   weil es das Argument gegen die WhatsApp-Gruppe ist, die in fast jedem
   Betrieb und Verein laeuft - und weil eine bestaetigte Unterweisung ein
   Nachweis ist, den ein Zettel nicht besser kann.
   ===================================================================== */
.melder{padding-block:46px;border-block:1px solid var(--linie);background:var(--flaeche)}
.melder-gitter{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:center}
@media (max-width:900px){.melder-gitter{grid-template-columns:1fr;gap:24px}}
.melder .kennung{font-size:11.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--marke);margin-bottom:9px;display:block}
.melder h2{font-size:clamp(1.4rem,3.8vw,2rem);font-weight:900;margin-bottom:12px}
.melder .lead{color:var(--text-2);font-size:15.5px;margin-bottom:18px}
.melder ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.melder li{position:relative;padding-left:23px;font-size:14.5px;color:var(--text-2);line-height:1.45}
.melder li::before{content:"";position:absolute;left:0;top:.42em;width:11px;height:6px;
  border-left:2.5px solid var(--marke);border-bottom:2.5px solid var(--marke);
  transform:rotate(-45deg)}

/* Die Bestaetigungsuebersicht - gezeichnet, nicht fotografiert. */
.nachweis{background:var(--grund);border:1px solid var(--linie);
  border-radius:var(--r);padding:22px 20px}
.nachweis .titel{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;margin-bottom:4px;flex-wrap:wrap}
.nachweis .titel b{font-family:var(--f-display);font-weight:900;font-size:1.02rem}
.nachweis .titel span{font-size:12.5px;color:var(--gedaempft)}
.nachweis .wortlaut{font-size:12.5px;color:var(--gedaempft);font-style:italic;
  border-left:2px solid var(--linie);padding-left:10px;margin-bottom:16px}
.balken{height:8px;border-radius:99px;background:var(--flaeche-2);overflow:hidden;margin-bottom:6px}
.balken i{display:block;height:100%;width:75%;border-radius:99px;
  background:linear-gradient(90deg,#34d399,#059669)}
.nachweis .stand{font-size:12.5px;color:var(--gedaempft);margin-bottom:16px}
.leute{display:grid;gap:7px}
.person{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--text-2)}
.person .haken{flex:none;width:18px;height:18px;border-radius:50%;display:grid;
  place-items:center;font-size:10px;font-weight:900;color:#fff;background:#059669}
.person.offen .haken{background:transparent;border:1.5px dashed var(--gedaempft);color:var(--gedaempft)}
.person .wann{margin-left:auto;font-size:12px;color:var(--gedaempft);
  font-variant-numeric:tabular-nums}

/* =====================================================================
   Bausteine fuer die Angebotsseiten (smart-city.html, waerme.html) -
   beide zeigen Anwendungsfaelle mit Preis und einen Pilothinweis.
   ===================================================================== */
.pilotband{background:linear-gradient(100deg,var(--von),var(--bis));color:#fff;padding-block:11px}
.pilotband .huelle{display:flex;gap:12px;align-items:center;justify-content:center;
  flex-wrap:wrap;text-align:center}
.pilotband strong{font-family:var(--f-display);font-weight:900;letter-spacing:.06em;
  text-transform:uppercase;font-size:12px}
.pilotband span{font-size:13.5px;opacity:.95}

.bereich{padding-block:52px 10px}
.bereich-titel{display:flex;align-items:center;gap:13px;margin-bottom:6px;flex-wrap:wrap}
.bereich-titel h2{font-size:clamp(1.3rem,3.4vw,1.75rem);font-weight:900}
.bereich .wofuer{color:var(--gedaempft);font-size:14.5px;margin-bottom:24px}
/* Ein Anwendungsfall traegt Preis und Nutzen - dieselbe Bauform wie eine
   Tarifkarte, weil der Besucher genau das vergleicht. */
.fall .zahl .betrag{font-size:1.7rem}
.fall .spart{font-size:12.5px;color:var(--von);font-weight:700;margin-bottom:12px}

.enthalt{margin-top:52px;padding-block:42px;border-block:1px solid var(--linie);background:var(--flaeche)}
.enthalt h2{font-size:clamp(1.3rem,3.4vw,1.7rem);font-weight:900;text-align:center;margin-bottom:7px}
.enthalt .unter{text-align:center;color:var(--gedaempft);font-size:14.5px;margin-bottom:28px}
.e-gitter{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:860px){.e-gitter{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.e-gitter{grid-template-columns:1fr}}
.e-block{background:var(--grund);border:1px solid var(--linie);border-radius:var(--r-s);padding:18px}
.e-block h3{font-size:14.5px;font-weight:800;margin-bottom:5px}
.e-block p{font-size:13px;color:var(--gedaempft);line-height:1.5}

.steuerzeile{font-size:13px;color:var(--gedaempft);margin-top:18px;padding-top:14px;
  border-top:1px solid var(--linie)}

/* Die fuenfte Karte laege im 2x2-Raster allein in einer halben Reihe.
   Stattdessen nimmt sie die ganze Breite und legt Bild und Text
   nebeneinander - das hebt sie zugleich hervor. */
@media (min-width:881px){
  .karten.vier .karte.breit{grid-column:1 / -1;display:grid;
    grid-template-columns:minmax(0,42%) 1fr;align-items:stretch}
  .karten.vier .karte.breit .schau,
  .karten.vier .karte.breit .schema{aspect-ratio:auto;height:100%;
    border-radius:var(--r) 0 0 var(--r)}
  .karten.vier .karte.breit .zeichen{left:auto;right:-21px;bottom:auto;top:18px}
  .karten.vier .karte.breit .inhalt{padding:26px 24px 22px}
}

/* Kopf auf schmalen Schirmen: Logo und Navigation brachen nebeneinander
   um, das Logo stand dann allein links neben zwei Zeilen Menue. Unter
   620 px stehen beide untereinander und mittig - das sieht gewollt aus
   statt gebrochen. */
@media (max-width:620px){
  .kopf .huelle{flex-direction:column;gap:10px;padding-block:12px}
  .kopf nav{margin-left:0;justify-content:center;gap:4px}
  .kopf nav a{font-size:13.5px;padding:7px 11px}
  .wortmarke{font-size:19px}
  .licht{width:32px;height:32px}
}
@media (max-width:380px){
  .kopf nav a{font-size:13px;padding:6px 9px}
  .kopf nav{gap:2px}
}