/* basis.css — gemeinsames Grundlayout aller oeffentlichen Seiten.
   Ausgelagert am 04.09.2026 aus dem inline-<style> der Seiten. Die Zeilen sind
   1:1 uebernommen, KEIN Wert wurde geaendert. Seitenspezifische Regeln stehen
   weiterhin im jeweiligen <style> der Seite und wirken dadurch danach. */
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
    html{scroll-behavior:smooth;}
    body{font-family:'Outfit',sans-serif;color:#0f2a50;background:#f5f8ff;padding-top:68px;
      font-size:var(--text);line-height:1.6;}
    :root{
      --blue:#1a4a8a;--blue-mid:#2563b0;--blue-light:#dbeafe;
      --dark:#0f2a50;--white:#fff;--off:#f5f8ff;
      --gray:#5a6a7e;--lgray:#e2eaf5;
      /* Groesse des normalen Fliesstexts. EINE Stelle — hier justieren,
         wirkt auf allen oeffentlichen Seiten. */
      --text:17px;
    }

    /* NAV */
    nav{position:fixed;top:0;left:0;right:0;z-index:1000;
      background:rgba(15,42,80,0.97);backdrop-filter:blur(12px);
      display:flex;align-items:center;justify-content:space-between;
      padding:0 40px;height:68px;border-bottom:2px solid var(--blue-mid);}
    .nav-logo img{display:block;}
    .nav-links{display:flex;align-items:center;gap:4px;list-style:none;}
    .nav-links a{color:#b8cdbf;text-decoration:none;font-size:15px;font-weight:500;
      padding:6px 13px;border-radius:6px;transition:all .2s;white-space:nowrap;}
    .nav-links a:hover,.nav-links a.active{color:#fff;background:var(--blue-mid);}
    .nav-dropdown{position:relative;}
    .nav-dropdown .dropdown{display:none;position:absolute;top:100%;left:0;
      background:#0f2a50;border-radius:10px;padding:8px 0;min-width:190px;
      box-shadow:0 8px 32px rgba(0,0,0,0.3);list-style:none;z-index:999;}
    .nav-dropdown:hover .dropdown{display:block;}
    .dropdown li a{display:block;padding:8px 16px;color:#b8cdbf;font-size:15px;
      text-decoration:none;transition:all .2s;}
    .dropdown li a:hover{background:var(--blue-mid);color:#fff;}
    .nav-burger{display:none;background:none;border:none;color:white;font-size:22px;cursor:pointer;}

    /* HERO */
    .hero{min-height:60vh;background:
      linear-gradient(160deg,rgba(15,42,80,.8) 0%,rgba(26,74,138,.5) 60%,transparent 100%),
      var(--hero-bg,#1a4a8a) center/cover no-repeat;
      display:flex;flex-direction:column;justify-content:flex-end;
      padding:0 60px 60px;position:relative;}
    .hero-badge{display:inline-flex;align-items:center;gap:8px;
      background:var(--blue-mid);color:#fff;font-size:14px;font-weight:700;
      letter-spacing:2px;text-transform:uppercase;padding:6px 16px;
      border-radius:100px;margin-bottom:20px;width:fit-content;}
    .hero h1{font-family:'Bebas Neue',sans-serif;font-size:clamp(48px,8vw,100px);
      color:#fff;line-height:.95;letter-spacing:3px;margin-bottom:20px;}
    .hero h1 span{color:#60a5fa;}
    .hero p{color:rgba(255,255,255,.8);font-size:19px;max-width:560px;line-height:1.6;}

    /* SECTIONS */
    section{padding:64px 60px;}
    .section-tag{font-size:14px;font-weight:700;letter-spacing:3px;
      text-transform:uppercase;color:var(--blue-mid);margin-bottom:8px;}
    .section-title{font-family:'Bebas Neue',sans-serif;
      font-size:clamp(32px,4vw,52px);color:var(--dark);
      letter-spacing:2px;margin-bottom:32px;line-height:1;}
    .section-title span{color:var(--blue-mid);}

    /* CARDS */
    .card{background:#fff;border-radius:16px;padding:28px;
      box-shadow:0 2px 12px rgba(0,0,0,.06);transition:all .25s;}
    .card:hover{transform:translateY(-3px);box-shadow:0 10px 32px rgba(0,0,0,.1);}

    /* BUTTON */
    .btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;
      border-radius:10px;font-size:15px;font-weight:600;text-decoration:none;
      cursor:pointer;border:none;transition:all .2s;font-family:'Outfit',sans-serif;}
    .btn-primary{background:var(--blue-mid);color:#fff;}
    .btn-primary:hover{background:var(--blue);transform:translateY(-2px);}
    .btn-outline{background:transparent;color:var(--blue-mid);border:2px solid var(--blue-mid);}
    .btn-outline:hover{background:var(--blue-light);}

    /* INFO BOX */
    /* Raster der Sparten-Seiten. Stand bis 04.09.2026 als style-Attribut im HTML und
       war damit fuer keine Media-Query erreichbar. Werte 1:1 uebernommen. */
    .sparte-grid{display:grid;grid-template-columns:2fr 1fr;gap:40px;align-items:start;}

    .info-box{background:var(--blue-light);border-radius:14px;padding:24px 28px;
      border-left:4px solid var(--blue-mid);}
    .info-row{display:flex;gap:12px;margin-bottom:10px;align-items:flex-start;font-size:15px;}
    .info-row:last-child{margin-bottom:0;}
    .info-label{font-weight:700;color:var(--blue-mid);min-width:130px;flex-shrink:0;}
    /* break-word statt anywhere: bricht NUR, wenn ein Wort sonst nicht passt, und
       zaehlt nicht in die Mindestbreite. 'anywhere' liess "Klaus-Dieter Klebba"
       Buchstabe fuer Buchstabe senkrecht umbrechen. */
    .info-value{color:var(--dark);overflow-wrap:break-word;}
    .info-value a{color:var(--blue-mid);text-decoration:none;}
    .info-value a:hover{text-decoration:underline;}
    /* Telefonnummern nicht mitten in der Ziffernfolge trennen. Gezielt ueber den
       href: das Schutz-Skript baut a.href='tel:'+d.a (mailto: fuer E-Mail).
       E-Mail-Adressen bleiben dadurch normal umbrechbar. */
    .info-value a[href^="tel:"]{white-space:nowrap;}

    /* FOOTER */
    footer{background:#0f2a50;padding:48px 60px 28px;}
    .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px;}
    .footer-brand p{color:rgba(255,255,255,.5);font-size:15px;line-height:1.7;margin-top:14px;}
    .footer-brand a{color:rgba(255,255,255,.5);text-decoration:none;}
    .footer-col h4{color:#fff;font-size:14px;font-weight:700;letter-spacing:1px;
      text-transform:uppercase;margin-bottom:14px;}
    .footer-col ul{list-style:none;}
    .footer-col ul li{margin-bottom:9px;}
    .footer-col ul li a{color:rgba(255,255,255,.78);text-decoration:none;font-size:15px;transition:color .2s;}
    .footer-col ul li a:hover{color:#fff;}
    .footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:20px;
      display:flex;justify-content:space-between;align-items:center;}
    .footer-bottom p{font-size:14px;color:rgba(255,255,255,.3);}
    .footer-bottom a{color:rgba(255,255,255,.4);text-decoration:none;font-size:14px;}
    .footer-bottom a:hover{color:#fff;}

    /* RESPONSIVE */
    @media(max-width:900px){
      nav{padding:0 20px;}
      .nav-links{display:none;flex-direction:column;position:absolute;
        top:68px;left:0;right:0;background:#0f2a50;padding:16px;gap:4px;}
      .nav-links.open{display:flex;}
      .nav-burger{display:block;}
      .dropdown{position:static!important;box-shadow:none!important;
        background:rgba(255,255,255,.05)!important;border-radius:8px!important;}
      .nav-dropdown:hover .dropdown{display:none;}
      .nav-dropdown.open .dropdown{display:block;}
      section{padding:48px 24px;}
      .hero{padding:0 24px 48px;min-height:50vh;}
      .footer-grid{grid-template-columns:1fr 1fr;}
    }

    /* ── Handy-Stufe (neu 04.09.2026) ────────────────────────────────────────────
       Bis hierher endete die Anpassung bei 900px: ein 360px-Handy bekam dasselbe
       Layout wie ein 899px-Tablet. Ergaenzt, nichts ersetzt. */
    @media(max-width:600px){
      /* Sparten: Text und Info-Box untereinander statt 2fr/1fr nebeneinander.
         Erst dadurch bekommt die Box ueberhaupt Platz. */
      .sparte-grid{grid-template-columns:1fr;gap:24px;}
      /* Info-Box: Beschriftung UEBER dem Wert, der 130px-Riegel faellt weg. */
      .info-row{flex-direction:column;gap:2px;}
      .info-label{min-width:0;}
      /* Footer einspaltig — bei 2 Spalten blieben je rund 120px. */
      .footer-grid{grid-template-columns:1fr;gap:28px;}
      /* Seitenraender: 24px links und rechts sind auf 360px ein Siebtel der
         Breite. Der Footer stand sogar noch auf 60px und wurde nie verkleinert. */
      section{padding:40px 18px;}
      .hero{padding:0 18px 40px;}
      footer{padding:40px 18px 24px;}
    }