/* ===========================================================
   itegon - erste Fassung, Stand 08.08.2026

   FARBEN - warum diese und nicht die aus farben-schriften.md
   -----------------------------------------------------------
   In 00_GLOBAL/farben-schriften.md ist Blau #1C4587 als
   Primaerfarbe festgelegt. Diese Analyse stammte aus der CSS der
   ALTEN Website. Im Logo kommt dieses Blau nicht vor:

     Logo: Schiefergrau #424F56 + Hellgruen #B0DD55

   Kurz erwogen und wieder verworfen: das Dunkelgruen #4A6B2B aus
   den Screenshots als Primaerfarbe zu nehmen. Das waere falsch
   gewesen - dieses Gruen gehoert dem Demokunden, nicht itegon.
   Das Portal uebernimmt Farben und Logo des jeweiligen Kunden,
   jede Installation sieht anders aus. Eine Website, die sich auf
   die Farbe EINES Screenshots stuetzt, waere spaetestens beim
   zweiten Screenshot inkonsistent.

   Daraus folgt die Regel fuer diese Website:
   Die Rahmenfarben muessen NEUTRAL zu allen Screenshots stehen.
   Deshalb hier die Logofarben - Schiefergrau als Traeger,
   das dunkle Gruen der Logo-Familie fuer Schaltflaechen und
   Verweise, Hellgruen nur als Schmuck.

   Kontraste auf Weiss (WCAG 2.1 AA verlangt 4,5:1 fuer Text):
     #424F56  8,9:1  ok   Schiefergrau, Ueberschriften
     #4F6B15  6,1:1  ok   Gruen fuer Schaltflaechen und Verweise
     #434343  9,9:1  ok   Fliesstext
     #666666  5,7:1  ok   Sekundaertext
     #B0DD55  1,9:1  NIEMALS fuer Text - nur Linien, Flaechen, Icons

   UMSTELLEN AUF EINE ANDERE PALETTE
   Nur die zwei Zeilen --primaer und --akzent aendern:

     Variante Blau (wie in farben-schriften.md festgelegt):
       --primaer: #1C4587;  --primaer-dunkel: #073763;
     Variante Gruen (Logo-Gruenfamilie durchgehend):
       --primaer: #4F6B15;  --primaer-dunkel: #3B5010;
     Variante Schiefergrau (aktuell):
       --primaer: #424F56;  --primaer-dunkel: #2E383E;

   SCHRIFTEN: nur Systemschriften, kein Google Fonts, kein CDN.
   Kein einziger Aufruf an einen fremden Server.
   =========================================================== */

:root{
  --primaer:        #424F56;   /* Schiefergrau aus dem Logo */
  --primaer-dunkel: #2E383E;
  --gruen:          #4F6B15;   /* Schaltflaechen, Verweise */
  --gruen-dunkel:   #3B5010;
  --gruen-hell:     #B0DD55;   /* Schmuck - nie Text */
  --slate:          #424F56;
  --slate-dunkel:   #2E383E;
  --text:           #434343;
  --grau:           #666666;
  --grau-hell:      #E1E5E7;
  --flaeche:        #F4F6F7;
  --flaeche-gr:     #F3F7EA;
  --weiss:          #FFFFFF;
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; font-family:var(--schrift); font-size:17px; line-height:1.65;
  color:var(--text); background:var(--weiss); -webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{line-height:1.25; margin:0 0 .5em;}
h1{font-size:2.4rem; font-weight:700; color:var(--primaer); letter-spacing:-.01em;}
h2{font-size:1.85rem; font-weight:700; color:var(--primaer);}
h3{font-size:1.15rem; font-weight:700; color:var(--gruen);}
h4{font-size:1.02rem; font-weight:700; color:var(--text);}
p{margin:0 0 1.1em;}
a{color:var(--gruen);}
a:hover{color:var(--gruen-dunkel);}
:focus-visible{outline:3px solid var(--gruen); outline-offset:3px;}
img{max-width:100%; height:auto;}

.wrap{max-width:1120px; margin:0 auto; padding:0 24px;}
section{padding:66px 0;}
.lead{font-size:1.15rem; color:var(--grau);}
.eng{max-width:62ch;}

.skip{position:absolute; left:-9999px; top:0; background:var(--gruen); color:#fff;
  padding:12px 20px; z-index:100; text-decoration:none;}
.skip:focus{left:0;}

/* ---------- Kopf ---------- */
header{border-bottom:1px solid var(--grau-hell); position:sticky; top:0;
  background:rgba(255,255,255,.97); z-index:50;}
/* padding links/rechts muss hier wiederholt werden: .kopf steht in der
   CSS nach .wrap und wuerde dessen padding sonst ueberschreiben.
   Genau das war der Grund, warum das Logo am linken Rand klebte. */
.kopf{display:flex; align-items:center; gap:24px; padding:12px 20px;}
.marke img{display:block; height:38px; width:auto;}
nav{margin-left:auto; display:flex; gap:18px; align-items:center; flex-wrap:wrap;}
nav a{color:var(--text); text-decoration:none; font-size:.92rem;}
nav a:hover{color:var(--gruen); text-decoration:underline;}
nav a.aktiv{color:var(--gruen); font-weight:700;}

/* ---------- Schaltflaechen ---------- */
/* font-family:inherit ist wegen des Absendeknopfs noetig: <button> erbt
   die Schrift nicht, sondern nimmt die Systemschrift des Browsers. Ohne
   diese Zeile steht auf der Kontaktseite ein Knopf in einer anderen
   Schrift als der Rest der Seite. */
.btn{display:inline-block; padding:14px 28px; border-radius:6px; font-weight:700;
  font-family:inherit; line-height:1.2;
  font-size:1rem; text-decoration:none; cursor:pointer; border:2px solid transparent;
  transition:background .15s, color .15s;}
.btn-primaer{background:var(--gruen); color:#fff !important;}
.btn-primaer:hover{background:var(--gruen-dunkel); color:#fff !important;}
.btn-sekundaer{background:#fff; color:var(--gruen) !important; border-color:var(--gruen);}
.btn-sekundaer:hover{background:var(--flaeche-gr);}
.btn-klein{padding:10px 20px; font-size:.9rem;}
.btn-reihe{display:flex; gap:14px; flex-wrap:wrap; margin-top:26px;}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(180deg,var(--flaeche) 0%,#fff 100%); padding:64px 0 48px;}
.hero .kicker{display:inline-block; font-size:.8rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--gruen); margin-bottom:16px;}
.hero h1{max-width:20ch;}
.hero p.lead{max-width:56ch; font-size:1.17rem; color:var(--text);}
.hero-inner{display:flex; gap:44px; align-items:center; flex-wrap:wrap;}
.hero-text{flex:1 1 440px;}
.hero-bild{flex:1 1 420px;}
.hero-bild img{border:1px solid var(--grau-hell); border-radius:8px;
  box-shadow:0 6px 26px rgba(46,56,62,.13);}
.bildnachweis{font-size:.8rem; color:var(--grau); margin-top:8px;}

/* ---------- Screenshotstrecke ----------
   Die Bilder haben sehr unterschiedliche Seitenverhaeltnisse (quer,
   hochkant, sehr hoch). Deshalb bekommt jede Karte eine feste Hoehe und
   das Bild wird eingepasst statt beschnitten - sonst wackelt das Raster
   und auf einem Bild sieht man nur noch die Kopfzeile.
   Weisse Flaeche unter dem Bild ist hier gewollt: die Screenshots haben
   selbst weissen Hintergrund, so entsteht kein sichtbarer Rand. */
.shots{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:28px; margin-top:34px;}
.shot{margin:0;}
.shot a{display:block; background:var(--weiss); border:1px solid var(--grau-hell);
  border-radius:8px; overflow:hidden; height:320px; padding:10px;
  box-shadow:0 3px 14px rgba(46,56,62,.08); transition:box-shadow .15s, border-color .15s;}
.shot a:hover{border-color:var(--gruen); box-shadow:0 6px 22px rgba(46,56,62,.16);}
.shot img{width:100%; height:100%; object-fit:contain; object-position:top center;
  display:block;}
.shot figcaption{margin-top:12px; font-size:.94rem; color:var(--text); line-height:1.5;}
.shot-hinweis{margin-top:26px; font-size:.85rem; color:var(--grau); max-width:70ch;}
@media (max-width:640px){
  .shot a{height:240px;}
}
.marker{display:flex; gap:24px; flex-wrap:wrap; margin-top:34px; padding-top:22px;
  border-top:1px solid var(--grau-hell); font-size:.9rem; color:var(--grau);}
.marker span{display:flex; align-items:flex-start; gap:8px; max-width:29ch;}
.haken{color:var(--gruen); font-weight:700;}

/* ---------- Platzhalter fuer fehlendes Material ---------- */
.platz{border:2px dashed var(--gruen-hell); border-radius:8px; background:var(--flaeche-gr);
  padding:22px; font-size:.92rem; color:var(--gruen);}
.platz strong{display:block; margin-bottom:6px; font-size:1rem;}
.platz.bild{min-height:230px; display:flex; flex-direction:column;
  justify-content:center; text-align:center;}
.offen{background:#FFF6E5; border-left:4px solid #C98A00; padding:12px 15px;
  font-size:.9rem; margin:12px 0 0; color:#5A4000;}
.offen strong{color:#5A4000;}

/* ---------- Kacheln ---------- */
.karten{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:22px; margin-top:34px;}
.karte{border:1px solid var(--grau-hell); border-radius:8px; background:#fff;
  display:flex; flex-direction:column; overflow:hidden;}
.karte img{display:block; width:100%; border-bottom:1px solid var(--grau-hell);}
.karte-inhalt{padding:22px; display:flex; flex-direction:column; flex:1;}
.karte .situation{font-size:.88rem; color:var(--gruen); font-weight:700; margin-bottom:8px;}
.karte h3{margin-bottom:.4em;}
.karte p{margin:0 0 16px; font-size:.95rem; color:var(--grau);}
.karte a.mehr{margin-top:auto; font-weight:700; font-size:.93rem; text-decoration:none;}
.karte a.mehr:hover{text-decoration:underline;}
.karte.leer{background:var(--flaeche);}

/* ---------- Einsatzbeispiele ---------- */
.einsatz{display:grid; grid-template-columns:1fr; gap:26px; margin-top:34px;}
@media(min-width:780px){.einsatz{grid-template-columns:repeat(2,1fr);}}
.einsatz-karte{border:1px solid var(--grau-hell); border-radius:8px;
  background:var(--weiss); padding:26px 24px; display:flex; flex-direction:column;}
.einsatz-karte .pikto{color:var(--gruen); margin-bottom:14px;}
.einsatz-karte .pikto svg{display:block; width:36px; height:36px;}
.einsatz-karte h3{color:var(--primaer); margin-bottom:.7em;}
.einsatz-karte ul{list-style:none; margin:0 0 6px; padding:0;}
.einsatz-karte li{position:relative; padding:0 0 13px 20px; font-size:.95rem;
  color:var(--grau); line-height:1.5;}
.einsatz-karte li::before{content:""; position:absolute; left:0; top:.6em;
  width:8px; height:8px; border-radius:2px; background:var(--gruen-hell);}
.einsatz-karte li b{color:var(--text); font-weight:700;}
.einsatz-karte .summe{margin-top:auto; padding-top:14px;
  border-top:1px solid var(--grau-hell); font-size:.88rem; font-weight:700;
  color:var(--gruen);}
.einsatz-fuss{margin-top:28px; font-size:.93rem; color:var(--grau); max-width:70ch;}

/* ---------- Dunkler Block ---------- */
.dunkel{background:var(--slate-dunkel); color:#fff;}
.dunkel h2{color:#fff;}
.dunkel h3{color:var(--gruen-hell);}
.dunkel p,.dunkel .lead{color:#D9DFE2;}
.zwei{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:40px; margin-top:34px;}
.drei{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:32px; margin-top:34px;}

/* ---------- Listen ---------- */
.liste{list-style:none; padding:0; margin:22px 0 0; columns:2; column-gap:40px;}
.liste li{padding:8px 0 8px 28px; position:relative; break-inside:avoid;}
.liste li::before{content:"\2013"; position:absolute; left:6px; color:var(--gruen-hell);
  font-weight:700;}
.flaeche{background:var(--flaeche);}
.gruenflaeche{background:var(--flaeche-gr); border-block:1px solid #DCE6CE;}

/* ---------- Nummerierte Punkte ---------- */
.punkte{margin-top:30px;}
.punkt{display:flex; gap:18px; padding:18px 0; border-bottom:1px solid var(--grau-hell);}
.punkt:last-child{border-bottom:none;}
.punkt .nr{flex:0 0 32px; height:32px; border-radius:50%; background:var(--gruen-hell);
  color:#22330A; font-weight:700; display:flex; align-items:center;
  justify-content:center; font-size:.92rem;}
.punkt h4{margin-bottom:.25em;}
.punkt p{margin:0; font-size:.97rem; color:var(--grau);}

/* ---------- Referenzstreifen ---------- */
.ref{background:var(--flaeche); padding:34px 0;}
.ref-inner{display:flex; gap:28px; align-items:center; flex-wrap:wrap;
  justify-content:space-between;}
.ref h2{font-size:1.25rem; margin-bottom:.3em;}
.ref-text{flex:1 1 400px;}
.ref .platz{flex:1 1 380px;}

/* ---------- Fragen ---------- */
.faq{max-width:830px;}
.faq details{border-bottom:1px solid var(--grau-hell); padding:16px 0;}
.faq summary{font-weight:700; cursor:pointer; color:var(--gruen); font-size:1.03rem;
  list-style:none;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::before{content:"+ "; color:var(--gruen-hell); font-weight:700;}
.faq details[open] summary::before{content:"\2013 ";}
.faq p{margin:12px 0 0; font-size:.98rem;}
.faq .weiter{margin-top:22px; font-size:.95rem; color:var(--grau);}

/* ---------- Abschluss ---------- */
.abschluss{background:var(--flaeche);}
.abschluss .wrap{max-width:780px; text-align:center;}
.abschluss .btn-reihe{justify-content:center;}

/* ---------- Bilder mit Zoom beim Ueberfahren ----------
   Nachbau des Effekts von itegon.de, mit drei Aenderungen:

   1. Ohne Herstellerpraefixe. -webkit-, -moz-, -ms- und -o- fuer
      transform und transition werden seit rund zehn Jahren von keinem
      unterstuetzten Browser mehr benoetigt. Sie vervierfachen den Code
      und man vergisst beim Aendern regelmaessig die Haelfte.

   2. Zurueckhaltender: 1.06 statt 1.2. Die Bilder hier sind
      Screenshots. Bei 1.2 wird ringsum ein Fuenftel abgeschnitten -
      bei einem Foto egal, bei einer Bedienoberflaeche verschwinden
      Menue und Kopfzeile. Kacheln vertragen etwas mehr (1.10), weil
      dort ohnehin nur ein Ausschnitt zu sehen ist.

   3. Mit Ruecksicht auf prefers-reduced-motion (siehe unten). Wer im
      Betriebssystem "Bewegung reduzieren" eingestellt hat, bekommt
      keinen Zoom. Auf einer Seite, die mit Barrierefreiheit
      argumentiert, gehoert das dazu.

   Wichtig ist das overflow:hidden am Rahmen - ohne das waechst das
   Bild ueber seinen Platz hinaus, statt hineinzuzoomen. */
.bildrahmen{
  overflow:hidden; border:1px solid var(--grau-hell); border-radius:8px;
  box-shadow:0 6px 26px rgba(46,56,62,.13); display:block;
}
.bildrahmen img,
.bildrahmen video{
  width:100%; height:auto; display:block;
  transform:scale(1); transition:transform .3s linear;
}
.bildrahmen:hover img{transform:scale(1.06);}
/* Beim Video waere Zoom stoerend - man will die Schaltflaechen treffen. */
.bildrahmen:hover video{transform:scale(1);}

.karte .bildrahmen{
  border:0; border-radius:0; box-shadow:none;
  border-bottom:1px solid var(--grau-hell);
}
.karte .bildrahmen:hover img{transform:scale(1.10);}

@media (prefers-reduced-motion: reduce){
  .bildrahmen img{transition:none;}
  .bildrahmen:hover img{transform:scale(1);}
}

/* ---------- Hilfsklassen statt style-Attribute ----------
   Saemtliche Gestaltung steht in dieser Datei. In den HTML-Dateien
   gibt es kein einziges style-Attribut mehr - damit laesst sich das
   Aussehen der ganzen Website an einer Stelle aendern. */
.eng-60{max-width:60ch;}
.eng-64{max-width:64ch;}
.eng-66{max-width:66ch;}
.eng-70{max-width:70ch;}
.eng-78{max-width:78ch;}
.abstand-oben{margin-top:22px;}
.abstand-oben-mittel{margin-top:26px;}
.abstand-oben-gross{margin-top:34px;}
.abstand-oben-klein{margin-top:14px;}
.ohne-abstand-oben{padding-top:0;}
.h2-klein{font-size:1.3rem;}
.grau{color:var(--grau);}
.ohne-rand{margin:0;}
.fuss-absatz{margin:0 0 12px;}
.siegel-bild{margin:14px 0 0;}
/* Siegel ohne weisse Platte (17.08.2026). Die Platte war eine
   Vorsichtsmassnahme fuer den Fall, dass das Siegel einen hellen
   Hintergrund braucht - die PNG-Datei ist aber transparent, und die
   tragenden Elemente des Siegels (Schriftzug, Jahreszahl, Lilie) sind
   weiss und rot. Die stehen auf dem dunklen Fuss von allein. Der
   schwarze Kreis verschmilzt dabei fast mit dem Hintergrund; das ist
   gewollt und wirkt ruhiger als ein weisses Quadrat im dunklen Fuss.
   Groesse: 142px statt 190px = 75 Prozent (Egon, 17.08.2026). */
.siegel-bild img{max-width:142px;}
.siegel-platz{margin:14px 0 0; padding:14px;}
.textlink{font-weight:700; text-decoration:none;}
.link-hell{color:var(--gruen-hell); font-weight:700; text-decoration:none;}
.link-hell:hover{color:#fff;}

/* ---------- Ablauf in Phasen (Partnerseite) ----------
   Bewusst als HTML/CSS statt als Bild: scharf in jeder Groesse, vom
   Screenreader lesbar, in einer Minute aenderbar, und der Text ist
   durchsuchbar. Text in Bildern faellt ausserdem unter WCAG 1.4.5 -
   auf einer Seite, die mit Barrierefreiheit argumentiert, waere eine
   Grafik mit eingebranntem Text ein Eigentor. */
.phasen{display:grid; gap:16px; margin-top:32px;}
.phase{border:1px solid var(--grau-hell); border-radius:10px; overflow:hidden;}
.phase-kopf{background:var(--slate-dunkel); color:#fff; padding:11px 18px;
  font-weight:700; font-size:.95rem; display:flex; gap:12px; align-items:center;}
.phase-nr{background:var(--gruen-hell); color:#22330A; width:26px; height:26px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:.85rem; flex:0 0 26px;}
.phase.dauer .phase-kopf{background:var(--gruen);}
.phase-schritte{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1px; background:var(--grau-hell);}
.schritt{background:#fff; padding:16px 18px;}
.schritt .snr{display:block; color:var(--gruen); font-weight:700; font-size:.8rem;
  letter-spacing:.05em; margin-bottom:4px;}
.schritt h4{font-size:.98rem; margin:0 0 .3em;}
.schritt p{margin:0; font-size:.89rem; color:var(--grau);}
.spur{margin-top:18px; border:1px dashed var(--gruen); border-radius:10px;
  padding:16px 18px; background:var(--flaeche-gr); font-size:.93rem;}
.spur b{color:var(--gruen);}

/* ---------- Terminliste (Schulungen) ---------- */
.termine{margin-top:30px; border-top:1px solid var(--grau-hell);}
/* Sichtbar auch in der Livefassung - anders als die Redaktionskaesten
   "platz" und "offen", die beim Bau mit ENTWURF=False entfernt werden.
   Genau deshalb eine eigene Klasse: Der Hinweis, dass gerade kein Termin
   offen ist, muss stehen bleiben. */
.hinweis-leer{margin-top:30px; padding:22px 24px; border-radius:10px;
  background:var(--flaeche-gr); color:var(--grau); max-width:78ch;}
.hinweis-leer strong{color:var(--text); display:block; margin-bottom:4px;}
.termin{display:flex; gap:20px; align-items:flex-start; padding:20px 0;
  border-bottom:1px solid var(--grau-hell); flex-wrap:wrap;}
.termin-tag{flex:0 0 66px; background:var(--flaeche-gr); border-radius:8px;
  text-align:center; padding:10px 4px;}
.termin-tag span{font-weight:700; color:var(--gruen); font-size:1.02rem;}
.termin-text{flex:1 1 340px;}
.termin-text h3{margin:0 0 .25em; font-size:1.08rem;}
.termin-text p{margin:0; font-size:.94rem; color:var(--grau);}
.termin-meta{margin-bottom:.4em !important; color:var(--slate) !important;
  font-weight:600; font-size:.88rem !important;}
.termin-aktion{flex:0 0 auto; display:flex; flex-direction:column; gap:8px;
  align-items:flex-end;}
.termin-preis{font-weight:700; color:var(--gruen); font-size:.95rem;}
@media(max-width:640px){
  .termin-aktion{align-items:flex-start; width:100%;}
}

/* ---------- KI-Kennzeichnung (EU-KI-Verordnung Art. 50) ----------
   Gilt seit 02.08.2026. Kuenstlich erzeugte Bild-, Audio- und
   Videoinhalte muessen erkennbar sein, wenn sie fuer echte Aufnahmen
   gehalten werden koennten. Deshalb zwei Stellen: ein Hinweis im Bild
   selbst (auch sichtbar, wenn jemand nur das Standbild sieht) und eine
   Zeile darunter im Klartext. */
.video-huelle{position:relative;}
.ki-badge{
  position:absolute; top:12px; left:12px; z-index:2;
  background:rgba(46,56,62,.92); color:#fff; font-size:.78rem;
  font-weight:700; letter-spacing:.03em; padding:6px 11px; border-radius:4px;
  pointer-events:none;
}
.ki-hinweis{font-size:.85rem; color:var(--grau); margin-top:8px;}

/* ---------- Demo ---------- */
.demo{background:var(--flaeche-gr); border-block:1px solid #DCE6CE;}
.demo-hinweis{font-size:.9rem; color:var(--gruen); font-weight:700; margin-top:12px;}

/* ---------- Tabelle Zusatzleistungen ---------- */
.addon{display:flex; gap:20px; padding:20px 0; border-bottom:1px solid var(--grau-hell);
  flex-wrap:wrap;}
.addon:last-child{border-bottom:none;}
.addon-txt{flex:1 1 420px;}
.addon h4{margin-bottom:.25em;}
.addon p{margin:0; font-size:.95rem; color:var(--grau);}
.addon .preis{white-space:nowrap; font-size:.88rem; color:var(--gruen); font-weight:700;}

/* ---------- Referenzseite ----------
   LOGO-KONZEPT: Kundenlogos kommen in jedem denkbaren Format - mit weissem
   Hintergrund, mit Transparenz, hoch, breit, quadratisch. Deshalb steht
   jedes Logo auf einer weissen Kachel fester Hoehe, die Kacheln stehen auf
   hellgrauer Flaeche. Damit sieht jedes kuenftige Logo automatisch richtig
   aus, ohne dass eine Datei nachbearbeitet werden muss - und ein Logo mit
   weissem Hintergrund ist von einem transparenten nicht zu unterscheiden. */
.zitat{background:var(--flaeche); border-left:5px solid var(--gruen-hell);
  border-radius:0 10px 10px 0; padding:38px 42px; display:flex; gap:34px;
  align-items:flex-start; flex-wrap:wrap;}
.zitat + .zitat{margin-top:30px;}
.zitat-text{flex:1 1 440px;}
.zitat blockquote{margin:0; font-size:1.26rem; line-height:1.55;
  color:var(--primaer); font-weight:400;}
.zitat blockquote p{margin:0 0 .7em;}
.zitat blockquote p:last-child{margin-bottom:0;}
.zitat blockquote .hervor{color:var(--gruen); font-weight:700;}
.zitat-person{flex:0 0 210px; text-align:center;}
.zitat-person .name{font-weight:700; color:var(--primaer); display:block;}
.zitat-person .rolle{font-size:.9rem; color:var(--grau); display:block;
  margin-top:2px;}
.zitat-person .logo-mini{margin-top:14px; background:#fff;
  border:1px solid var(--grau-hell); border-radius:6px; padding:12px 14px;}
.zitat-person .logo-mini img{display:block; width:100%; height:auto;
  max-height:56px; object-fit:contain;}
.zitat-person .logo-links{margin-top:8px; text-align:center;}
.zitat-projekt{margin-top:20px; padding-top:15px;
  border-top:1px solid var(--grau-hell); font-size:.92rem; color:var(--grau);}
.zitat-projekt b{color:var(--primaer);}

/* justify-content:center ab dem 4. Eintrag noetig (17.08.2026): In eine
   Zeile passen drei Kacheln. Der vierte Eintrag rutscht in die zweite
   Zeile und stuende ohne diese Zeile allein linksbuendig unter der ersten
   Kachel - das sieht nach Fehler aus, nicht nach Absicht. Zentriert wirkt
   jede Restzeile gewollt, unabhaengig davon, wie viele Logos spaeter
   dazukommen. Auf die volle erste Zeile hat es keine Wirkung, weil dort
   durch flex-grow kein nennenswerter Freiraum bleibt. */
.logo-raster{display:flex; flex-wrap:wrap; gap:22px; margin-top:34px;
  justify-content:center;}
.logo-eintrag{flex:1 1 300px; max-width:340px; display:flex; flex-direction:column;}
.logo-kachel{background:var(--weiss); border:1px solid var(--grau-hell);
  border-radius:10px; height:148px; display:flex; align-items:center;
  justify-content:center; padding:24px 28px;
  transition:border-color .15s, box-shadow .15s;}
/* max-height 92px statt der urspruenglichen 62: Das KH-IT-Logo ist fast
   quadratisch (743 x 384) und hat die Verbandsbezeichnung als Kleintext
   eingebacken. Bei 62px waere diese Zeile unleserlich. Breite Logos wie
   Limbach (4:1) sind ohnehin durch max-width begrenzt und aendern sich
   dadurch nicht - die Kachel bleibt also fuer jedes Format brauchbar. */
.logo-kachel img{max-width:100%; max-height:92px; width:auto; height:auto;
  display:block; object-fit:contain;}
.logo-eintrag:hover .logo-kachel{border-color:#C3CDD2;
  box-shadow:0 2px 10px rgba(46,56,62,.08);}
.logo-info{padding:16px 4px 0;}
.logo-info h3{font-size:1.03rem; margin-bottom:.35em; color:var(--primaer);}
.logo-info p{font-size:.94rem; color:var(--grau); margin:0 0 .5em;}
.logo-links{margin-top:8px !important; font-size:.87rem !important;}
.logo-links a{color:var(--gruen); text-decoration:none; font-weight:700;}
.logo-links a:hover{text-decoration:underline;}

/* Bewusst maximal zwei Spalten: bei drei Spalten wird die Beschreibungs-
   spalte so schmal, dass fast jede Zeile umbricht. */
.projekte{display:grid; grid-template-columns:repeat(auto-fit,minmax(420px,1fr));
  gap:22px; margin-top:36px;}
@media(min-width:1100px){ .projekte{grid-template-columns:repeat(2,1fr);} }
.projekt{border:1px solid var(--grau-hell); border-radius:8px; padding:26px;
  background:#fff; border-top:4px solid var(--gruen-hell);}
.projekt h3{margin-bottom:.5em; color:var(--primaer);}
.projekt dl{margin:0; font-size:.94rem;}
.projekt dt{font-weight:700; color:var(--gruen); float:left; clear:left;
  width:9.5em; margin-bottom:8px; font-size:.92rem; padding-top:.1em;}
.projekt dd{margin:0 0 8px 9.5em; color:var(--grau);}

.versprechen-box{background:#fff; border:1px solid var(--grau-hell);
  border-top:4px solid var(--gruen-hell); border-radius:10px; padding:32px 36px;
  margin-top:32px; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:36px;}
.versprechen-box ul{list-style:none; padding:0; margin:0; font-size:.96rem;}
.versprechen-box li{padding:7px 0 7px 26px; position:relative;}
.versprechen-box li::before{content:"\2013"; position:absolute; left:4px;
  color:var(--gruen-hell); font-weight:700;}

.zahlen-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:32px; margin-top:42px;}
.zahl{font-size:2.3rem; font-weight:700; color:var(--gruen-hell); line-height:1.1;
  display:block; margin-bottom:6px;}
.zahlen-grid p{font-size:.95rem; margin:0;}
/* Huelle um die reinen Ziffern, damit die Zaehlanimation nichts
   verschiebt: feste Mindestbreite (setzt das Skript aus der Endbreite)
   und Ziffern mit gleicher Laufweite. Ohne das wandert bei "14 Tage"
   das Wort "Tage" waehrend des Zaehlens hin und her. */
.zahl-wert{display:inline-block; text-align:right;
  font-variant-numeric:tabular-nums;}

@media(max-width:760px){
  .zitat{padding:28px 24px;}
  .zitat blockquote{font-size:1.1rem;}
  .zitat-person{flex:1 1 100%;}
  .logo-eintrag{max-width:none;}
  .projekt dt{float:none; width:auto; margin-bottom:0;}
  .projekt dd{margin-left:0; margin-bottom:10px;}
}

/* ---------- Fuss ---------- */
footer{background:var(--slate-dunkel); color:#C4CED4; padding:52px 0 28px; font-size:.92rem;}
footer h4{color:#fff; font-size:1rem; margin-bottom:12px;}
footer a{color:#fff;}
/* Ohne diese Regel greift a:hover von oben (dunkles Gruen) - auf dem
   dunklen Fuss ergibt das rund 1,4:1 und ist praktisch unlesbar.
   Das Schmuckgruen erreicht hier 6,3:1 und ist damit AA-konform.
   Genau der Fall, fuer den es die Regel "Hellgruen nie auf Weiss" gibt:
   auf DUNKLEM Grund ist es die richtige Wahl. */
footer a:hover, footer a:focus-visible{color:var(--gruen-hell); text-decoration:underline;}
footer ul{list-style:none; padding:0; margin:0;}
footer li{margin-bottom:7px;}
.foot-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:34px;}
.foot-klein{margin-top:14px; font-size:.85rem; color:#9CACB4;}
.foot-unten{margin-top:34px; padding-top:18px; border-top:1px solid rgba(255,255,255,.18);
  display:flex; gap:18px; flex-wrap:wrap; justify-content:space-between; font-size:.86rem;}

/* ---------- Hinweisleiste dieser Vorschau ---------- */
.vorschau{background:#22330A; color:#DDEEBB; font-size:.86rem; padding:9px 0;}
.vorschau .wrap{display:flex; gap:14px; flex-wrap:wrap; align-items:center;}
.vorschau b{color:#fff;}

/* ---------- Kontaktformular ---------- */
.formular{display:grid; grid-template-columns:repeat(2,1fr); gap:18px 22px;
  margin-top:8px;}
/* Ohne diese Zeile bleibt das Formular nach dem Absenden sichtbar: das
   hidden-Attribut setzt display:none nur mit der Standardgewichtung des
   Browsers, und display:grid aus der Zeile darueber schlaegt sie. */
.formular[hidden]{display:none;}
.formular .breit{grid-column:1 / -1;}
.feld{display:flex; flex-direction:column; gap:6px;}
.feld label{font-size:.92rem; font-weight:700; color:var(--primaer);}
.feld .opt{font-weight:400; color:var(--grau);}
.feld input, .feld select, .feld textarea{
  font:inherit; font-size:1rem; color:var(--text); background:#fff;
  border:1px solid #C3CDD2; border-radius:6px; padding:11px 13px;
  width:100%; box-sizing:border-box;}
.feld textarea{min-height:170px; resize:vertical; line-height:1.55;}
.feld input:focus, .feld select:focus, .feld textarea:focus{
  outline:3px solid var(--gruen-hell); outline-offset:1px;
  border-color:var(--gruen);}
/* Honigtopf: fuer Menschen unsichtbar, fuer Bots ein normales Feld.
   Bewusst nicht display:none - manche Bots ueberspringen genau das. */
.honigtopf{position:absolute; left:-9999px; width:1px; height:1px;
  overflow:hidden;}
.formular-fuss{font-size:.9rem; color:var(--grau); margin-top:4px;}
.gesendet{background:var(--flaeche-gr); border-left:4px solid var(--gruen);
  border-radius:6px; padding:16px 18px; margin-bottom:26px;}
.gesendet strong{display:block; color:var(--gruen-dunkel);
  margin-bottom:4px; font-size:1.05rem;}
/* 190px statt 230: Bei drei Karten in einer 78ch breiten Spalte reicht
   es sonst nur fuer zwei, und die dritte steht allein in der zweiten
   Zeile. */
.wege{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:20px; margin-top:26px;}
.weg{border:1px solid var(--grau-hell); border-radius:8px; padding:20px 22px;
  background:#fff; border-top:4px solid var(--gruen-hell);}
.weg h3{margin-bottom:.4em;}
.weg p{font-size:.94rem; color:var(--grau); margin:0 0 .5em;}
.weg a{color:var(--gruen); font-weight:700; text-decoration:none;}
.weg a:hover{text-decoration:underline;}

@media(max-width:760px){
  h1{font-size:1.85rem;} h2{font-size:1.45rem;}
  section{padding:48px 0;}
  .liste{columns:1;}
  nav{display:none;}
  .formular{grid-template-columns:1fr;}
}