/* base.css - gemeinsame Basis aller Seiten (ohne ki-landing.html).
   Aenderungen hier wirken auf alle eingebundenen Seiten. */

/* ---------------------------------------------------------------
   SCHRIFTGROESSE - ein Regler fuer die ganze Website.
   Alle font-size-Angaben sind in rem, beziehen sich also auf
   diesen Wert. Aendern und neu laden genuegt.

     100%     = 16px  Ausgangszustand (Stand vor dieser Aenderung)
     106.25%  = 17px  leicht groesser
     112.5%   = 18px  aktuell eingestellt
     118.75%  = 19px  deutlich groesser

   Logo- und Siegelhoehe haengen bewusst mit dran, damit die
   Navigationsleiste proportional bleibt. Wer nur die Schrift
   skalieren will, setzt die beiden Variablen auf px-Werte.
   --------------------------------------------------------------- */
:root{
  --logo-height:2.125rem;   /* 34px bei 100% */
  --siegel-height:4.5rem;   /* 72px bei 100% */
}
html{font-size:112.5%}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Barlow',sans-serif;background:#f8f8f8;color:#1a1a1a;line-height:1.5}
a{color:inherit;text-decoration:none}
/* Hand-Cursor bei Links explizit setzen. Browser machen das zwar von sich
   aus, aber so ist es unabhaengig von Browser-Defaults garantiert. */
a[href]{cursor:pointer}

/* Navigation */
.nav{display:flex;align-items:center;justify-content:space-between;padding:18px 32px;border-bottom:0.5px solid #e2e2e2;background:#ffffff;position:sticky;top:0;z-index:50}
.nav-logo{font-size:1rem;font-weight:500}
.nav-logo span{color:#004985}
.nav-logo img{height:var(--logo-height);width:auto}
.nav-links{display:flex;gap:24px;list-style:none}
.nav-link{font-size:0.8125rem;color:#5a5a5a;padding:7px 4px;position:relative;display:inline-block;transition:color 0.15s}
.nav-link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#99b9ff;width:0;transition:width 0.25s}
.nav-link:hover{color:#004985}
.nav-link:hover::after{width:100%}
.nav-link.active{color:#004985}
/* Aktive Seite dauerhaft unterstrichen. Nutzt dasselbe ::after wie der
   Hover-Effekt, deshalb genuegt width:100%. Gilt auch auf den
   Unterseiten, weil die dort im Markup denselben Hauptmenuepunkt als
   active markieren (z. B. datenschutz-isms.html -> Informations-
   sicherheit & Datenschutz). */
.nav-link.active::after{width:100%}

/* Umschalt-Button fuer das mobile Menue. Auf dem Desktop unsichtbar,
   ab 768px Breite abwaerts sichtbar (siehe Media Query unten). */
.nav-toggle{display:none;background:none;border:none;padding:8px;margin:-8px;cursor:pointer;color:#004985;line-height:1}
.nav-toggle i{font-size:1.625rem;display:block}
.nav-toggle:focus-visible{outline:2px solid #004985;outline-offset:2px;border-radius:6px}
/* Zusaetzlicher Menuepunkt, der nur im Overlay erscheint: der
   Anfrage-Button, weil er in der schmalen Leiste keinen Platz hat. */
.nav-item-mobil{display:none}
/* Seite nicht scrollen, solange das Overlay offen ist. */
body.menue-offen{overflow:hidden}

/* Hero */
.eyebrow{font-size:0.75rem;color:#004985;font-weight:500;letter-spacing:0.5px;text-transform:uppercase;margin-bottom:14px}

/* Quote-Sektion */
.quote-inner{position:relative;z-index:1;max-width:600px}
.quote-icon{font-size:1.625rem;color:#99b9ff;display:block;margin-bottom:18px;text-shadow:0 2px 8px rgba(0,0,0,0.7)}
.quote-text{font-size:1.25rem;font-weight:500;color:#ffffff;line-height:1.5;margin-bottom:16px;text-shadow:0 2px 8px rgba(0,0,0,0.7)}
.quote-author{font-size:0.8125rem;color:#ffffff;text-shadow:0 2px 8px rgba(0,0,0,0.7)}

/* Kontakt-CTA */
.kontakt-cta{padding:32px}
.kontakt-box{max-width:920px;margin:0 auto;background:#004985;border-radius:20px;padding:48px 40px;text-align:center}
.kontakt-title{font-size:1.25rem;font-weight:500;color:#ffffff;margin-bottom:12px;max-width:480px;margin-left:auto;margin-right:auto}
.kontakt-text{font-size:0.875rem;color:#cfe0f5;line-height:1.7;max-width:440px;margin:0 auto 24px}
.kontakt-btn{display:inline-block;background:#99b9ff;color:#ffffff;padding:12px 26px;border-radius:10px;font-size:0.8125rem;font-weight:500;transition:background 0.15s}
.kontakt-btn:hover{background:#7da6f5}

/* Footer */
.footer{background:#caddff;padding:48px 32px 32px}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr auto;gap:32px;max-width:1000px;margin:0 auto;align-items:start}
.footer-brand{font-size:1rem;font-weight:500;margin-bottom:12px}
.footer-brand span{color:#004985}
.footer-brand img{height:var(--logo-height);width:auto}
.footer-address{font-size:0.75rem;color:#004985;line-height:1.7}
.footer-col-title{font-size:0.75rem;font-weight:500;color:#004985;text-transform:uppercase;letter-spacing:0.4px;margin-bottom:14px}
.footer-col-list{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer-col-list a{font-size:0.8125rem;color:#0c2340;transition:color 0.15s}
.footer-col-list a:hover{color:#004985}
.footer-siegel{display:flex;flex-direction:column;align-items:center;gap:6px}
.footer-siegel picture{display:block}
.footer-siegel img{height:var(--siegel-height);width:auto}

@media (max-width:768px){
  /* Der Button erscheint, der Anfrage-Knopf wandert ins Overlay. */
  .nav-toggle{display:block}
  .nav-cta{display:none}
  .nav-item-mobil{display:block}

  /* Das Menue wird zum Overlay ueber der ganzen Seite. Die Navigations-
     leiste liegt mit hoeherem z-index darueber, damit Logo und Button
     sichtbar und bedienbar bleiben. */
  .nav{z-index:210}
  .nav-links{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;
    background:#ffffff;flex-direction:column;justify-content:center;align-items:center;
    gap:4px;padding:88px 32px 40px;overflow-y:auto;
    opacity:0;visibility:hidden;transition:opacity 0.25s ease,visibility 0.25s}
  .nav-links.offen{opacity:1;visibility:visible}
  /* text-align ist noetig, weil align-items:center nur die Elemente
     zentriert, nicht den Text INNERHALB eines Punktes. Ohne das faellt
     ein umgebrochener Punkt wie "Informationssicherheit & Datenschutz"
     auf linksbuendig zurueck. */
  .nav-links .nav-link{font-size:1.25rem;padding:14px 10px;text-align:center;line-height:1.35}
  /* Im Overlay keinen Unterstrich: bei einem umgebrochenen Punkt spannt
     der Balken ueber die ganze Feldbreite und sitzt breiter als die
     letzte Zeile. Die aktive Seite zeigt sich hier ueber die dunklere
     Schriftfarbe aus .nav-link.active. */
  .nav-links .nav-link::after{display:none}
  .nav-links .nav-cta{display:inline-block;margin-top:20px}

  .footer-grid{grid-template-columns:1fr;text-align:center}
  .footer-siegel{margin:0 auto}
}
@media (prefers-reduced-motion:reduce){
  .nav-links{transition:none}
}