/* Kiratio — Grundgestaltung
   Palette und Schrift kommen aus dem Logo (festgelegt 21.10.2026): Anthrazit, Kupfer,
   Grau und Papier, mehr Farben hat die Marke nicht. Die abgeleiteten Töne stehen
   darunter und sind nur Aufhellungen oder Abdunklungen dieser vier.
   Inter wird nicht nachgeladen, sondern als erste Wahl im Schriftstapel genannt.
   Wer Inter installiert hat, sieht Inter, alle anderen Segoe UI oder Helvetica.
   Soll Inter überall gleich aussehen, müssen die woff2-Dateien selbst gehostet werden
   (nicht von Google laden, sonst braucht die Seite einen Cookie-Hinweis).

   Abstandsregel: .wrap setzt ausschließlich den seitlichen Rand. Vertikale Abstände
   kommen von Regeln mit höherer Spezifität (section.wrap, .auftakt-in, .abschluss .wrap),
   damit sie den seitlichen Rand nicht überschreiben. */

:root{
  /* Die vier Logofarben, dazu zwei abgeleitete Töne. */
  --anthrazit:#1B2430;   /* Wortmarke, dunkle Flächen */
  --kupfer:#C0713C;      /* „Ki", der Punkt, alle Akzente */
  --grau:#6B7683;        /* Claim, Beschriftungen */
  --papier:#F5F3EF;      /* helle Flächen und die Umkehrung auf dunklem Grund */

  --kupfer-dunkel:#A85F30;  /* Kupfer eine Stufe dunkler, für Hover */
  --text:#39424F;           /* Anthrazit aufgehellt, für Fließtext */
  --linie:#E1DCD4;          /* Papier eine Stufe dunkler, für Trennlinien */
  --papier-grau:#AEB6BF;    /* Grau aufgehellt, für Text auf Anthrazit */
  --weiss:#FFFFFF;

  --rand:clamp(22px,4vw,44px);  /* seitlicher Rand, wächst mit dem Fenster */
  --mass:40rem;     /* gemeinsame Zeilenbreite für Fließtext und seine Überschrift */
  --block:48px;     /* vertikaler Abstand je Abschnitt */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--weiss);color:var(--anthrazit);
  font-family:Inter,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
}

a{color:var(--kupfer);transition:color .18s ease,background-color .18s ease,border-color .18s ease}
a:hover{color:var(--kupfer-dunkel)}
a:focus-visible,button:focus-visible{outline:2px solid var(--kupfer);outline-offset:3px}
@media (prefers-reduced-motion:reduce){a{transition:none}}

/* Behälter: nur seitlicher Rand */
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--rand)}

/* Kopf */
header{border-bottom:1px solid var(--linie);position:sticky;top:0;background:rgba(255,255,255,.96);z-index:10}
.kopf{display:flex;justify-content:space-between;align-items:center;gap:14px 20px;flex-wrap:wrap;
      padding-top:16px;padding-bottom:16px}
.marke{display:block;line-height:0}
.marke img{display:block;width:auto;height:54px}
nav{display:flex;align-items:center;flex-wrap:wrap;gap:8px 20px}
nav a{color:var(--anthrazit);text-decoration:none;font-size:15px}
nav a:hover{color:var(--kupfer)}
/* Die aktuelle Seite wird kupfern markiert, beim Knopf würde das Schrift auf gleicher Farbe geben. */
nav a[aria-current="page"]:not(.btn){color:var(--kupfer);font-weight:600}

/* Knöpfe */
.btn{display:inline-block;background:var(--kupfer);color:#fff;text-decoration:none;
     padding:13px 24px;font-size:16px;font-weight:600;border-radius:3px}
.btn:hover{background:var(--kupfer-dunkel);color:#fff}
.btn.klein{padding:9px 16px;font-size:15px}
.btn.hell{background:transparent;border:1px solid var(--kupfer);color:var(--kupfer)}
.btn.hell:hover{background:var(--kupfer);color:#fff}

/* Hero: liegt seit dem Umbau im dunklen Auftakt, siehe .auftakt am Dateiende */

/* Abschnitte */
section.wrap{padding-top:var(--block);padding-bottom:var(--block)}
section.wrap > :last-child{margin-bottom:0}

h1{font-size:44px;line-height:1.15;font-weight:700;letter-spacing:-1.2px;margin:0 0 18px}
h2{font-size:28px;letter-spacing:-.6px;margin:0 0 10px}
h3{font-size:19px;margin:0 0 6px}
.lead{font-size:20px;color:var(--text);margin:0 0 28px}
.sub{color:var(--grau);margin:0 0 30px;max-width:var(--mass)}

/* Überschrift und Fließtext darunter enden an derselben Kante. Raster, Bänder
   und Karten bleiben voll breit, nur der Lesetext bekommt sein Maß. */
section.wrap > h2,.risiko > .wrap > h2,.abschluss h2{max-width:var(--mass)}

/* Fließtext */
.fliess{max-width:var(--mass)}
.fliess p{color:var(--text);margin:0 0 18px}
.fliess p:last-child{margin-bottom:0}
.fliess h3{margin:32px 0 8px}
.fliess > h3:first-child{margin-top:0}

/* Abgesetzter Hinweis */
.hinweis{background:var(--papier);border-left:3px solid var(--kupfer);padding:16px 20px;
         font-size:16px;color:var(--text);max-width:var(--mass);margin:32px 0 0}

/* Weiterführender Link unter einem Abschnitt */
.mehr{margin:22px 0 0}

/* Handlungsaufforderung mit Telefonnummer */
.aktion{margin:28px 0 0}

/* Belegband */
.belege{background:var(--papier);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.belege-in{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 24px;
           padding-top:30px;padding-bottom:30px}
.beleg b{display:block;font-size:27px;font-weight:700;letter-spacing:-.6px;font-variant-numeric:tabular-nums}
.beleg span{font-size:14px;color:var(--grau);line-height:1.4;display:block;margin-top:2px;
            text-wrap:pretty;hyphens:auto}

/* Zweispaltige Aufzählung */
.zweier{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 32px}
.zweier p{margin:0;padding:16px 18px;background:var(--papier);border-left:3px solid var(--kupfer);font-size:18px}
.zweier p strong{color:var(--anthrazit)}

/* Tarifkarten */
.preise{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.tarif{border:1px solid var(--linie);border-radius:4px;padding:26px 24px;background:#fff}
.tarif.hervor{border:2px solid var(--kupfer);position:relative;box-shadow:0 6px 20px rgba(27,36,48,.07)}
.fahne{position:absolute;top:-12px;left:24px;background:var(--kupfer);color:#fff;font-size:12px;
       font-weight:600;letter-spacing:.5px;padding:4px 10px;border-radius:2px}
.tarif h3{margin:0 0 4px}
.tarif .p{font-size:32px;font-weight:700;letter-spacing:-1px;margin:12px 0 2px;font-variant-numeric:tabular-nums}
.tarif .p span{font-size:14px;font-weight:400;color:var(--grau)}
.tarif .zusatz{font-size:15px;color:var(--grau)}
.tarif .zusatz.betont{color:var(--kupfer)}
.tarif .mehr{margin-top:20px}

/* Strichlisten */
ul.striche{list-style:none;margin:18px 0 0;padding:0;color:var(--text);font-size:16px}
ul.striche li{padding:6px 0 6px 22px;position:relative}
ul.striche li::before{content:"";position:absolute;left:0;top:14px;width:10px;height:2px;background:var(--kupfer)}

/* Nummerierter Ablauf */
ol.ablauf{list-style:none;counter-reset:schritt;margin:0;padding:0}
ol.ablauf li{counter-increment:schritt;position:relative;padding:0 0 30px 58px;
             border-left:1px solid var(--linie);margin-left:17px}
ol.ablauf li:last-child{border-left-color:transparent;padding-bottom:0}
ol.ablauf li::before{content:counter(schritt,decimal-leading-zero);position:absolute;left:-17px;top:0;
                     width:34px;height:34px;border-radius:50%;background:var(--kupfer);color:#fff;
                     display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
ol.ablauf h3{margin:5px 0 4px}
ol.ablauf p{margin:0;color:var(--text);max-width:var(--mass)}
ol.ablauf .dauer{font-size:14px;color:var(--grau);display:block;margin-bottom:8px}

/* Rechenbeispiel */
.rechnung{border:1px solid var(--linie);background:var(--papier);padding:22px 24px;max-width:30rem;
          border-radius:4px;margin:24px 0 0}
.rechnung table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.rechnung td{padding:7px 0;font-size:16px}
.rechnung td:last-child{text-align:right;white-space:nowrap}
.rechnung tr.summe td{border-top:1px solid var(--anthrazit);font-weight:700;font-size:19px;padding-top:12px}

/* Personen */
.personen{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.person{display:flex;gap:18px;align-items:flex-start;background:var(--papier);padding:20px;border-radius:4px}
.ph{width:92px;height:92px;flex:none;border-radius:4px;background:#E8E3DB;color:var(--grau);
    display:flex;align-items:center;justify-content:center;font-size:11px;text-align:center;line-height:1.3}
.ph b{font-size:26px;font-weight:700;letter-spacing:.5px;color:var(--kupfer)}
.person h3{margin:0}
.person .rolle{color:var(--kupfer);font-size:15px;margin:2px 0 8px}
.person p{margin:0;color:var(--text);font-size:15px}

/* Abschlussblock */
.abschluss{background:var(--anthrazit);color:var(--papier)}
.abschluss .wrap{padding-top:56px;padding-bottom:56px}
.abschluss h2{color:var(--papier)}
.abschluss p{color:var(--papier-grau);max-width:var(--mass);margin:0}
.tel{font-size:32px;font-weight:700;letter-spacing:-.8px;display:inline-block;
     margin:0 24px 8px 0;color:var(--papier);text-decoration:none}
.tel:hover{color:var(--kupfer)}

/* Fuß. Folgt der Abschlussblock, gehen beide Flächen ineinander über, deshalb
   trennt dort eine Haarlinie statt einer Kante. */
footer{background:var(--anthrazit);color:var(--papier-grau);font-size:14px}
.fuss{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 20px;
      flex-wrap:wrap;padding-top:40px;padding-bottom:44px}
.abschluss + footer .fuss{border-top:1px solid rgba(245,243,239,.14);padding-top:32px}
.fuss-marke img{display:block;width:auto;height:46px;margin-bottom:14px}
.fuss-marke p{margin:0}
footer a{color:var(--papier)}
footer a:hover{color:var(--kupfer)}

/* Platzhalter-Kennzeichnung, vor dem Livegang entfernen */
.platzhalter{background:#FDF3E7;border-bottom:1px solid #E8C9A4;color:#7A4A1E;font-size:14px;
             padding:8px 16px;text-align:center}

@media(max-width:860px){
  :root{--rand:22px;--block:40px}
  .marke img{height:44px}
  .fuss-marke img{height:40px}
  .belege-in{grid-template-columns:repeat(2,1fr)}
  .zweier,.preise,.personen{grid-template-columns:1fr}
  h1{font-size:32px}
  h2{font-size:24px}
  .lead{font-size:18px}
  .tel{display:block;margin-right:0;margin-bottom:16px}
}

@media(max-width:560px){
  .person{flex-direction:column}
  .ph{width:100%;height:120px}
}

/* ---------------------------------------------------------------
   Ergänzungen: Förderprogramme, Risikoabschnitt, Zeitvergleich
   --------------------------------------------------------------- */

/* Förderprogramm als aufklappbarer Block */
.programm{border:1px solid var(--linie);border-radius:4px;background:#fff;margin:0 0 18px}
.programm > .kopfzeile{padding:22px 24px;border-bottom:1px solid var(--linie)}
.programm h3{font-size:21px;margin:0 0 4px}
.programm .summe-gross{font-size:26px;font-weight:700;letter-spacing:-.8px;color:var(--kupfer);
                       margin:6px 0 8px;font-variant-numeric:tabular-nums}
.programm .kopfzeile p{margin:0;color:var(--text);max-width:var(--mass)}
.programm details{border-top:1px solid var(--linie)}
.programm details:first-of-type{border-top:0}
.programm summary{padding:14px 24px;cursor:pointer;font-weight:600;font-size:16px;list-style:none;
                  display:flex;justify-content:space-between;align-items:center;gap:12px}
.programm summary::-webkit-details-marker{display:none}
.programm summary::after{content:"+";color:var(--kupfer);font-size:20px;font-weight:700;line-height:1}
.programm details[open] summary::after{content:"–"}
.programm summary:hover{color:var(--kupfer)}
.programm .inhalt{padding:0 24px 20px}
.programm .inhalt p{margin:0 0 12px;color:var(--text);font-size:16px}
.programm .inhalt p:last-child{margin-bottom:0}
.programm .laufzeit{padding:14px 24px;border-top:1px solid var(--linie);background:var(--papier);
                    font-size:15px;color:var(--grau);border-radius:0 0 4px 4px}

/* Risikoabschnitt */
.risiko{background:var(--papier);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.risiko .wrap{padding-top:var(--block);padding-bottom:var(--block)}
.kennzahlen{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:30px 0 0}
.kennzahl{border-top:3px solid var(--kupfer);padding-top:14px}
.kennzahl b{display:block;font-size:24px;font-weight:700;letter-spacing:-.5px;margin-bottom:4px}
.kennzahl p{margin:0;font-size:15px;color:var(--text)}

/* Zeitvergleich vorher/nachher */
.zeiten{width:100%;border-collapse:collapse;margin:24px 0 0;max-width:40rem}
.zeiten th{text-align:left;font-size:13px;letter-spacing:1.6px;text-transform:uppercase;color:var(--grau);
           font-weight:600;padding:0 0 10px;border-bottom:1px solid var(--linie)}
.zeiten th:not(:first-child),.zeiten td:not(:first-child){text-align:right;white-space:nowrap}
.zeiten td{padding:13px 0;border-bottom:1px solid var(--linie);font-size:16px;
           font-variant-numeric:tabular-nums}
.zeiten .vorher{color:var(--grau);text-decoration:line-through}
.zeiten .nachher{color:var(--kupfer);font-weight:700}

/* Kleingedruckter Rechtshinweis */
.rechtshinweis{font-size:14px;color:var(--grau);margin:20px 0 0;max-width:var(--mass)}

@media(max-width:860px){
  .kennzahlen{grid-template-columns:1fr;gap:18px}
  .zeiten{font-size:15px}
}

/* Zweite Überschrift nach einem Rechenbeispiel */
.rechnung + h3{margin-top:34px}

/* Voraussetzungen als Checkliste */
.checkliste{display:grid;grid-template-columns:repeat(2,1fr);gap:32px}
.checkliste h3{margin:0 0 4px}
.checkliste .wofuer{font-size:14px;letter-spacing:1.6px;text-transform:uppercase;color:var(--kupfer);
                    font-weight:600;margin:0 0 10px}
.checkliste ul{list-style:none;margin:0;padding:0}
.checkliste li{position:relative;padding:10px 0 10px 30px;border-bottom:1px solid var(--linie);
               font-size:16px;color:var(--text)}
.checkliste li:last-child{border-bottom:0}
.checkliste li::before{content:"";position:absolute;left:4px;top:17px;width:10px;height:5px;
                       border-left:2px solid var(--kupfer);border-bottom:2px solid var(--kupfer);
                       transform:rotate(-45deg)}

/* Fußnote unter Zahlen */
.fussnote{font-size:14px;color:var(--grau);margin:10px 0 0;max-width:32rem}

@media(max-width:860px){
  .checkliste{grid-template-columns:1fr;gap:24px}
}

/* ---------------------------------------------------------------
   Startseite: dunkler Auftakt (Entwurf 11 aus design/)
   Diese Regeln greifen nur auf index.html. Alle übrigen Seiten
   behalten den hellen, klebenden Kopf aus dem oberen Teil der Datei.
   --------------------------------------------------------------- */

.auftakt{background:var(--anthrazit);color:var(--papier);padding-bottom:150px}
.auftakt header{position:static;background:transparent;border-bottom:0}
.auftakt nav a{color:var(--papier)}
.auftakt nav a:hover{color:var(--kupfer)}
.auftakt-in{padding-top:46px}
.auftakt h1{font-size:50px;line-height:1.1;letter-spacing:-1.6px;margin:0 0 18px;max-width:20ch}
.auftakt h1 em{font-style:normal;color:var(--kupfer)}
.auftakt .lead{color:var(--papier-grau);font-size:20px;max-width:var(--mass);margin:0 0 30px}

/* Zwei Knöpfe nebeneinander, der zweite nur mit Rand */
.knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.btn.rand{background:transparent;border:1px solid rgba(245,243,239,.45);color:var(--papier)}
.btn.rand:hover{background:var(--papier);color:var(--anthrazit);border-color:var(--papier)}

/* Die vier Leistungskarten schieben sich in die dunkle Fläche hinein. */
.leistungen{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:-110px}
.leistung{background:#fff;border-radius:6px;padding:26px 22px;display:flex;flex-direction:column;
          box-shadow:0 10px 30px rgba(27,36,48,.12)}
.leistung .nr{font-size:12px;letter-spacing:2.2px;font-weight:700;color:var(--kupfer);margin-bottom:12px}
.leistung h2{font-size:20px;margin:0 0 8px;letter-spacing:-.3px}
.leistung p{margin:0;color:var(--text);font-size:15px}
.leistung .mehr{margin:auto 0 0;padding-top:16px;font-size:14px}

/* Datenschutzband, zweispaltig, zwischen zwei Haarlinien */
.datenschutz{background:#fff;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);
             margin-top:var(--block)}
.datenschutz .wrap{display:grid;grid-template-columns:1fr 1.5fr;gap:44px;
                   padding-top:52px;padding-bottom:52px}
.datenschutz h2{margin:0}
.datenschutz p{color:var(--text);margin:0 0 14px}
.datenschutz p:last-child{margin-bottom:0}

/* Kleine Rubrik über einer Überschrift */
.kicker{font-size:13px;letter-spacing:2.2px;text-transform:uppercase;color:var(--grau);
        font-weight:600;margin:0 0 8px}

/* Förderung und Personen nebeneinander */
.unten{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.unten > div > h2{margin-bottom:16px}
.unten .person{margin-bottom:16px}

@media(max-width:980px){
  .auftakt h1{font-size:34px}
  .auftakt .lead{font-size:18px}
  .leistungen{grid-template-columns:repeat(2,1fr)}
  .datenschutz .wrap{grid-template-columns:1fr;gap:24px}
  .unten{grid-template-columns:1fr;gap:32px}
}

@media(max-width:560px){
  .auftakt{padding-bottom:120px}
  .auftakt-in{padding-top:30px}
  .leistungen{grid-template-columns:1fr;margin-top:-100px}
}

/* Unterseiten: derselbe Auftakt, nur ohne den Platz für die Karten darunter.
   Sie tragen .auftakt.seite, die Startseite nur .auftakt. */
.auftakt.seite{padding-bottom:52px}
.auftakt.seite h1{font-size:40px;max-width:24ch}
.auftakt-in > :last-child{margin-bottom:0}

@media(max-width:980px){
  .auftakt.seite h1{font-size:31px}
  .auftakt-in{padding-top:36px}
}

@media(max-width:560px){
  .auftakt.seite{padding-bottom:38px}
}

/* Zweispaltiger Textabschnitt: Rubrik und Überschrift links, Fließtext rechts.
   Füllt die Breite, ohne die Zeilen zu lang werden zu lassen. Dasselbe Muster
   wie .datenschutz auf der Startseite, nur als eigene Klasse zum Wiederverwenden. */
.gespalten{display:grid;grid-template-columns:1fr 1.5fr;gap:44px;align-items:start}
.gespalten h2{margin:0}
.gespalten .kicker + h2{margin-top:0}
.gespalten > div > :last-child{margin-bottom:0}
.gespalten .sub{margin:12px 0 0}

@media(max-width:980px){
  .gespalten{grid-template-columns:1fr;gap:18px}
}

/* Hinweise und weiterführende Links, die beim zweispaltigen Satz in die
   Textspalte gewandert sind, behalten ihre Abstände und Farben. */
.fliess > .hinweis{margin:28px 0 0}
.fliess > .mehr{margin:22px 0 0}
.fliess > .rechtshinweis{margin:20px 0 0;color:var(--grau);font-size:14px}