/* ============================================================
   IGNISAFE Website 3.0 – Design-System
   CI übernommen aus Website 1.0:
   Akzentrot #c0271f · Barlow Condensed + Inter · bg_ignisafe2
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --red:#c0271f;
  --red-dark:#9e1f18;
  --dark:#1e2028;
  --text:#22242e;
  --text-lt:#484b5c;
  --text-xs:#737688;
  --border:#d4d6e0;
  --bg:#f0f1f6;
  --bg-soft:#e6e8f0;
  --white:#ffffff;
  --nav-h:56px;
  /* Submarken-CI */
  --ignicare:#005eb8;        /* Signalblau (hindernisfrei/Rollstuhl-Signaletik) */
  --ignicare-lt:#4d94d6;
  --ignicare-bg:#eef4fb;
  --crowdsafe:#008c50;       /* Rettungszeichen-Grün, abgesoftet */
  --crowdsafe-lt:#4db892;
  --crowdsafe-bg:#edf7f2;
}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 18px)}
body{font-family:'Inter',sans-serif;color:var(--text);overflow-x:hidden}

/* ---------- Globaler Hintergrund (wie Website 1.0) ---------- */
#global-bg{
  position:fixed;top:-60%;left:0;right:0;height:200%;z-index:-1;
  background:url('../assets/bg_ignisafe.jpg?v=2') center/cover no-repeat;
  will-change:transform;
}

/* ---------- Topnav ---------- */
#topnav{
  position:fixed;top:0;left:0;right:0;height:var(--nav-h);
  background:var(--white);border-bottom:1px solid var(--border);
  display:flex;align-items:center;z-index:100;padding:0 32px;
  box-shadow:0 1px 6px rgba(0,0,0,.06);
}
.tn-brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:20px;user-select:none}
.tn-logo{height:38px;width:auto}
.tn-links{display:flex;align-items:center;gap:2px;flex:1}
.tn-a{padding:8px 14px;text-decoration:none;color:var(--text-lt);font-size:13px;font-weight:500;transition:all .2s;user-select:none;white-space:nowrap}
.tn-a:hover,.tn-a.active{background:var(--red);color:#fff}

/* Leistungen-Dropdown (Desktop) */
.tn-drop{position:relative}
.tn-drop>.tn-a::after{content:' ▾';font-size:10px}
.tn-drop-menu{
  display:none;position:absolute;top:100%;left:0;min-width:230px;
  background:var(--white);border:1px solid var(--border);
  box-shadow:0 8px 24px rgba(0,0,0,.12);padding:6px 0;
}
.tn-drop:hover .tn-drop-menu{display:block}
.tn-drop-menu a{display:block;padding:9px 16px;font-size:13px;color:var(--text-lt);text-decoration:none}
.tn-drop-menu a:hover{background:var(--bg);color:var(--red)}

/* Hamburger – links, zwischen Logo und Navi, mit Abstand */
.tn-burger{
  margin:0 22px 0 6px;width:40px;height:40px;border:1px solid var(--border);
  background:var(--white);cursor:pointer;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;transition:all .2s;flex:0 0 auto;
}
.tn-burger span{width:18px;height:2px;background:var(--dark);transition:all .2s}
.tn-burger:hover{background:var(--bg)}
.tn-burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.tn-burger.open span:nth-child(2){opacity:0}
.tn-burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Hamburger-Panel – linksbündig unter der Navi, kein Fullscreen */
#megamenu{
  display:none;position:fixed;top:calc(var(--nav-h) + 8px);left:24px;z-index:99;
  width:min(720px,calc(100vw - 24px));max-height:calc(100vh - var(--nav-h) - 24px);
  background:rgba(20,22,30,.97);overflow-y:auto;padding:28px 28px 22px;
  border-radius:12px;box-shadow:0 18px 48px rgba(0,0,0,.35);
}
#megamenu.show{display:block}
.mm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.mm-col h4{
  font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;
  color:rgba(255,255,255,.4);margin-bottom:14px;padding-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.mm-col a{
  display:block;padding:9px 0;font-family:'Barlow Condensed',sans-serif;
  font-size:20px;font-weight:600;color:#fff;text-decoration:none;transition:color .2s;
}
.mm-col a:hover{color:var(--red)}
.mm-col a small{display:block;font-family:'Inter',sans-serif;font-size:12px;font-weight:400;color:rgba(255,255,255,.45);margin-top:1px}
/* Externe Submarken – bewusst unterscheidbar, im jeweiligen Marken-CI */
.mm-ext{
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);
  padding:12px 14px !important;margin-bottom:10px;border-radius:8px;
}
.mm-ext .ext-arrow{float:right;font-size:15px}
.mm-ext small{color:rgba(255,255,255,.5)}
.mm-logo{height:26px;width:auto;display:block;margin-bottom:6px}
.mm-ext.ignicare{border-left:3px solid var(--ignicare)}
.mm-ext.ignicare:hover{border-color:var(--ignicare);background:rgba(0,94,184,.15)}
.mm-ext.ignicare .ext-arrow{color:var(--ignicare-lt)}
.mm-ext.crowdsafe{border-left:3px solid var(--crowdsafe)}
.mm-ext.crowdsafe:hover{border-color:var(--crowdsafe);background:rgba(0,140,80,.15)}
.mm-ext.crowdsafe .ext-arrow{color:var(--crowdsafe-lt)}

/* ---------- Layout / Sektionen ---------- */
#main{padding-top:calc(var(--nav-h) + 40px)}
/* Sektions-«Balken»: volle Breite, einfacher Transparenzeffekt (94%),
   keine Kantenglättung */
.sec{padding:56px 72px;margin:0 0 160px}
.s-white{background:rgba(255,255,255,.88)}
.s-bg{background:rgba(240,241,246,.88)}
.s-dark{background:var(--dark)}
.s-eye{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--red);margin-bottom:8px}
.s-eye::before{content:'';width:18px;height:2px;background:var(--red)}
.s-title{font-family:'Barlow Condensed',sans-serif;font-size:clamp(26px,3vw,40px);font-weight:700;color:var(--dark);margin-bottom:10px}
.s-dark .s-title{color:#fff}
.s-lead{font-size:15px;color:var(--text-lt);line-height:1.75;max-width:560px;margin-bottom:36px}
.s-dark .s-lead{color:rgba(255,255,255,.75)}
.s-txt{font-size:15px;color:var(--text-lt);line-height:1.8;margin-bottom:24px;max-width:800px}

/* ---------- Hero ---------- */
#hero{position:relative;min-height:calc(100vh - var(--nav-h) - 40px);display:flex;align-items:center;margin-bottom:120px}
.hero-in{position:relative;z-index:2;padding:64px 72px;max-width:1560px;width:100%;
  background:linear-gradient(to right,rgba(255,255,255,.88) 0%,rgba(255,255,255,.88) 62%,rgba(255,255,255,0) 100%)}
.h-logo{height:clamp(114px,22.8vw,222px);width:auto;max-width:100%;object-fit:contain;object-position:left;margin-bottom:32px;display:block}
.h-title{font-family:'Barlow Condensed',sans-serif;font-size:clamp(36px,4.5vw,59px);font-weight:700;color:var(--dark);line-height:1.05;margin-bottom:16px}
.h-lead{font-size:18px;font-weight:400;color:var(--text-lt);line-height:1.75;max-width:620px;margin-bottom:32px}
.h-ctas{display:flex;gap:12px;flex-wrap:wrap}

/* Unterseiten-Header (kompakter Hero) */
.hero-sub{position:relative;min-height:44vh;display:flex;align-items:flex-end;margin-bottom:90px;overflow:hidden}
.hero-sub .hero-in{padding:64px 72px 48px}

/* Kursdetails / Definitionszeilen */
.dl{display:grid;grid-template-columns:190px 1fr;gap:0}
.dl dt{font-size:12.5px;font-weight:600;color:var(--text-xs);text-transform:uppercase;letter-spacing:.8px;padding:10px 12px 10px 0;border-top:1px solid var(--border)}
.dl dd{font-size:14px;color:var(--text-lt);line-height:1.7;padding:10px 0;border-top:1px solid var(--border)}
.dl dt:first-of-type,.dl dd:first-of-type{border-top:none}

/* Download-Button (PDF/Dokumente) */
.dl-btn{display:inline-flex;align-items:center;gap:7px;background:var(--red);color:#fff;font-size:13px;font-weight:600;padding:11px 22px;text-decoration:none;border:2px solid var(--red);transition:all .2s;cursor:pointer}
.dl-btn::before{content:'\2193';color:#fff;font-size:15px;font-weight:700;line-height:1}
.dl-btn:hover{background:var(--red-dark);border-color:var(--red-dark);color:#fff;transform:translateY(-1px)}
.tile-dl{margin-top:12px}
.tile.klickbar{cursor:pointer}

/* Häkchen-/Strichliste */
.list-dash{list-style:none;margin:8px 0}
.list-dash li{font-size:14px;color:var(--text-lt);line-height:1.7;padding-left:18px;position:relative;margin-bottom:4px}
.list-dash li::before{content:'–';position:absolute;left:0;color:var(--red);font-weight:700}

/* Zitat (Portrait) */
.quote{border-left:3px solid var(--red);padding:6px 0 6px 20px;margin:22px 0;font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:600;color:var(--dark);line-height:1.4;max-width:680px}

/* Portraitfoto */
.pf-wrap{display:flex;gap:40px;align-items:flex-start;flex-wrap:wrap}
.pf-foto{width:360px;border:1px solid var(--border);border-left:3px solid var(--red)}

@media(max-width:960px){
  .hero-sub .hero-in{padding:44px 24px 36px}
  .dl{grid-template-columns:1fr}
  .dl dt{border-top:1px solid var(--border);padding-bottom:0}
  .dl dd{border-top:none;padding-top:4px}
}

/* ---------- Buttons / Links ---------- */
.btn-r{display:inline-flex;align-items:center;gap:7px;background:var(--red);color:#fff;font-size:13px;font-weight:600;padding:11px 22px;text-decoration:none;border:2px solid var(--red);transition:all .2s;cursor:pointer}
.btn-r:hover{background:var(--red-dark);border-color:var(--red-dark);transform:translateY(-1px)}
.btn-o{display:inline-flex;align-items:center;gap:7px;background:transparent;color:#fff;font-size:13px;font-weight:600;padding:11px 22px;text-decoration:none;border:2px solid rgba(255,255,255,.6);transition:all .2s;cursor:pointer}
.btn-o:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.btn-o.on-light,.hero-in .btn-o{color:var(--dark);border-color:#9aa0b0}
.btn-o.on-light:hover,.hero-in .btn-o:hover{border-color:var(--dark);background:rgba(0,0,0,.05)}
.lnk{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--red);text-decoration:none;transition:gap .2s;cursor:pointer}
.lnk:hover{gap:12px}

/* ---------- Kacheln (Konzept: roter Akzentstrich links) ---------- */
.tile-g{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.tile-g.cols-3{grid-template-columns:repeat(3,1fr)}
.tile{
  background:var(--white);border:1px solid var(--border);border-left:3px solid var(--red);
  padding:24px 22px;text-decoration:none;color:inherit;display:block;transition:all .2s;
}
a.tile:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.09)}
.tile-t{font-family:'Barlow Condensed',sans-serif;font-size:19px;font-weight:700;color:var(--dark);margin-bottom:6px}
.tile-p{font-size:13.5px;color:var(--text-lt);line-height:1.65}
.tile .lnk{margin-top:12px}
.tile-meta{margin-top:12px;font-size:12.5px;color:var(--text-xs)}
.tile-meta strong{color:var(--text-lt);font-weight:600}

/* Status-Badges (Academy) */
.badge{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:4px 10px;margin-bottom:10px}
.badge-open{background:rgba(28,130,60,.1);color:#1c823c;border:1px solid rgba(28,130,60,.3)}
.badge-run{background:rgba(192,39,31,.08);color:var(--red);border:1px solid rgba(192,39,31,.3)}
.badge-closed{background:var(--bg-soft);color:var(--text-xs);border:1px solid var(--border)}
.badge-full{background:var(--dark);color:#fff;border:1px solid var(--dark)}
.badge-info{background:rgba(192,39,31,.08);color:var(--red);border:1px solid rgba(192,39,31,.25)}

/* Hinweisblock (z.B. BSV15→BSV26) */
.note{
  background:var(--white);border:1px solid var(--border);border-left:3px solid var(--red);
  padding:22px 24px;margin-bottom:36px;max-width:860px;
}
.note-t{font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:700;color:var(--dark);margin-bottom:8px}
.note p{font-size:14px;color:var(--text-lt);line-height:1.7}

/* ---------- Timelines ---------- */
/* Horizontal (SIA-Phasen, Lebenszyklus) */
.tl-h{display:grid;grid-template-columns:repeat(var(--tl-cols,4),1fr);gap:18px;position:relative;margin-top:36px}
.tl-h::before{content:'';position:absolute;top:17px;left:4%;right:4%;height:2px;background:var(--border)}
.tl-step{position:relative;padding-top:52px}
.tl-dot{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:36px;height:36px;border-radius:50%;background:var(--red);color:#fff;
  font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:700;
  display:flex;align-items:center;justify-content:center;z-index:2;
  box-shadow:0 0 0 4px var(--bg);
}
.tl-step.inactive .tl-dot{background:var(--bg-soft);color:var(--text-xs);box-shadow:0 0 0 4px var(--bg)}
.tl-card{background:var(--white);border:1px solid var(--border);border-left:3px solid var(--red);padding:18px;height:100%}
.tl-step.inactive .tl-card{border-left-color:var(--border);opacity:.65}
.tl-card h4{font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:700;color:var(--dark);margin-bottom:4px}
.tl-card .tl-sub{font-size:11.5px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--text-xs);margin-bottom:8px}
.tl-card p{font-size:13px;color:var(--text-lt);line-height:1.65}

/* Vertikal (Portrait-Werdegang) */
.tl-v{position:relative;max-width:760px;margin-top:32px}
.tl-v::before{content:'';position:absolute;left:17px;top:6px;bottom:6px;width:2px;background:var(--border)}
.tl-v-item{position:relative;padding:0 0 28px 56px}
.tl-v-item:last-child{padding-bottom:0}
.tl-v-dot{
  position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;
  background:var(--red);color:#fff;font-family:'Barlow Condensed',sans-serif;
  font-size:17px;font-weight:700;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 4px var(--bg);
}
.tl-v-item .tile{margin:0}

/* ---------- Formulare ---------- */
.form{max-width:760px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.f-group{margin-bottom:14px}
.f-group label{display:block;font-size:12.5px;font-weight:600;color:var(--text-lt);margin-bottom:5px}
.f-group label .req{color:var(--red)}
.f-group input[type=text],.f-group input[type=email],.f-group input[type=tel],.f-group input[type=date],
.f-group select,.f-group textarea{
  width:100%;padding:10px 12px;font-family:'Inter',sans-serif;font-size:14px;color:var(--text);
  background:var(--white);border:1px solid var(--border);transition:border .2s;
}
.f-group input:focus,.f-group select:focus,.f-group textarea:focus{outline:none;border-color:var(--red)}
.f-group textarea{min-height:100px;resize:vertical}
.f-check{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px;font-size:13.5px;color:var(--text-lt);line-height:1.6}
.f-check input{margin-top:3px;accent-color:var(--red)}
.f-hint{font-size:12px;color:var(--text-xs);margin-top:4px}
.f-section{font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:700;color:var(--dark);margin:26px 0 12px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.f-dyn{display:none}
.f-dyn.show{display:block}
.f-ok{background:rgba(28,130,60,.08);border:1px solid rgba(28,130,60,.3);border-left:3px solid #1c823c;padding:20px;font-size:14px;color:var(--text);line-height:1.7;display:none}
.f-err{background:rgba(192,39,31,.06);border:1px solid rgba(192,39,31,.3);border-left:3px solid var(--red);padding:14px 16px;font-size:13.5px;color:var(--red-dark);margin-bottom:14px;display:none}

/* ---------- Kontakt-Abschluss ---------- */
.contact-wrap{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}

/* ---------- Footer ---------- */
footer{background:var(--dark);padding:36px 72px 24px}
.ft-main{display:flex;justify-content:center;align-items:center;margin-bottom:24px}
.ft-logo-wrap img{width:240px}
.ft-bot{padding-top:18px;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.08)}
.ft-copy{font-size:11px;color:rgba(255,255,255,.22)}
.ft-leg{display:flex;gap:16px}
.ft-leg a{font-size:11px;color:rgba(255,255,255,.22);text-decoration:none;transition:color .2s}
.ft-leg a:hover{color:rgba(255,255,255,.55)}
.ft-brands{display:flex;justify-content:center;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.ft-brands a{font-size:12px;color:rgba(255,255,255,.4);text-decoration:none;border:1px solid rgba(255,255,255,.15);padding:7px 14px;transition:all .2s}
.ft-brands a:hover{color:#fff;border-color:var(--red)}
.ft-brands a .ext-arrow{color:var(--red);margin-left:5px}

/* ---------- Submarken-Karten (Landingpage) – im jeweiligen Marken-CI, pastell,
     Form wie die übrigen Kacheln ---------- */
.brand-card{
  padding:24px 22px;text-decoration:none;display:block;
  transition:all .2s;position:relative;color:var(--text);
}
.brand-logo{height:52px;width:auto;max-width:100%;display:block;margin:2px 0 12px}
.brand-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.10)}
.brand-card .ext-arrow{position:absolute;top:18px;right:18px;font-size:16px}
.brand-t{font-family:'Barlow Condensed',sans-serif;font-size:24px;font-weight:700;letter-spacing:1px;margin-bottom:8px}
.brand-p{font-size:13.5px;color:var(--text-lt);line-height:1.65;margin-bottom:14px}
.brand-url{font-size:12px;font-weight:600}
.brand-card.ignicare{background:var(--ignicare-bg);border:1px solid rgba(0,94,184,.22);border-left:3px solid var(--ignicare)}
.brand-card.ignicare .brand-t,.brand-card.ignicare .brand-url,.brand-card.ignicare .ext-arrow{color:var(--ignicare)}
.brand-card.crowdsafe{background:var(--crowdsafe-bg);border:1px solid rgba(0,140,80,.22);border-left:3px solid var(--crowdsafe)}
.brand-card.crowdsafe .brand-t,.brand-card.crowdsafe .brand-url,.brand-card.crowdsafe .ext-arrow{color:var(--crowdsafe)}

/* Kleines Extern-Kennzeichen generisch */
.ext-arrow::after{content:'↗'}

/* ---------- Responsive ---------- */
@media(max-width:960px){
  #topnav{padding:0 16px}
  .tn-logo{height:34px}
  .tn-links{display:none}
  .tn-burger{margin:0 0 0 auto}
  .sec{padding:44px 24px;margin:0 0 110px}
  #hero{margin-bottom:90px;min-height:calc(100vh - var(--nav-h) - 30px)}
  #main{padding-top:calc(var(--nav-h) + 30px)}
  .hero-in{padding:48px 24px}
  .tile-g,.tile-g.cols-3{grid-template-columns:1fr}
  .f-row{grid-template-columns:1fr}
  .tl-h{grid-template-columns:1fr}
  .tl-h::before{left:17px;right:auto;top:6px;bottom:6px;width:2px;height:auto}
  .tl-step{padding:0 0 10px 56px}
  .tl-dot{left:0;transform:none}
  .mm-grid{grid-template-columns:1fr;gap:26px}
  #megamenu{left:12px;right:12px;width:auto;padding:22px 18px}
  .ft-logo-wrap img{width:180px}
  footer{padding:32px 24px 20px}
}
@media(max-width:640px){
  #topnav{padding:0 12px}
  .tn-brand{margin-right:12px}
  .tn-logo{height:29px}
}

/* ---------- Datenschutz-Modal ---------- */
.ds-overlay{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;padding:28px;cursor:pointer}
.ds-box{background:var(--white);width:min(720px,100%);height:min(72vh,780px);position:relative;box-shadow:0 24px 80px rgba(0,0,0,.4);display:flex;flex-direction:column;cursor:auto}
.ds-kopf{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--dark);color:#fff;flex:0 0 auto}
.ds-kopf span{font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:700;letter-spacing:.5px}
.ds-close{width:34px;height:34px;background:var(--red);color:#fff;border:none;font-size:20px;line-height:1;cursor:pointer}
.ds-close:hover{background:var(--red-dark)}
.ds-box iframe{border:0;width:100%;flex:1;background:#fff}
.ds-fuss{flex:0 0 auto;padding:10px 16px;border-top:1px solid var(--border);text-align:right}
@media(max-width:640px){.ds-overlay{padding:12px}.ds-box{height:86vh}}