/* ════════════════════════════════════════════════════════
   RegionalesBranchenbuch.at — style.css
   assets/images/logo.png   → Header + Loading Screen
   assets/images/logo2.png  → Footer
════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --blue:       #1A56DB;
  --blue-mid:   #2563EB;
  --blue-light: #3B82F6;
  --blue-pale:  #EFF6FF;
  --blue-soft:  #DBEAFE;
  --g50:  #F8FAFC;
  --g100: #F1F5F9;
  --g200: #E2E8F0;
  --g300: #CBD5E1;
  --g400: #94A3B8;
  --g500: #64748B;
  --g600: #475569;
  --g700: #334155;
  --g800: #1E293B;
  --g900: #0F172A;
  --white: #FFFFFF;
  --ease:     cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(0,0,.2,1);
  --r-sm: 12px; --r-md: 16px; --r-lg: 20px; --r-xl: 24px;
}

html { scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', sans-serif;
  color: var(--g800); background: var(--white);
  line-height: 1.6; overflow-x: hidden;
}
h1,h2,h3,h4 { font-family: 'Sora', sans-serif; }
a { color: inherit; }

/* ── Logo component ──────────────────────────────────── */
.logo-img { display: block; height: var(--logo-h, 36px); width: auto; max-width: 100%; }
.logo-fallback {
  display: none; font-family: 'Sora', sans-serif; font-weight: 700;
  font-size: var(--logo-fs, .95rem); color: var(--logo-color, var(--blue));
  white-space: nowrap;
}
.logo-wrap.img-err .logo-img      { display: none; }
.logo-wrap.img-err .logo-fallback { display: block; }

/* ════════════════════════════════════════════════════════
   LOADING SCREEN
════════════════════════════════════════════════════════ */
#loader {
  position: fixed; inset: 0; z-index: 9999;
  background: linear-gradient(160deg, #EBF3FF 0%, #F2F8FF 50%, #F8FAFC 100%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2.8rem;
  transition: opacity .75s var(--ease), visibility .75s var(--ease);
}
#loader.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.ld-logo-wrap { opacity: 0; animation: ldUp .75s var(--ease-out) .2s forwards; max-width: 86vw; text-align: center; }
.ld-logo-wrap .logo-img {
  --logo-h: auto; height: auto;
  width: min(440px, 82vw); max-width: 100%;
  filter: drop-shadow(0 4px 20px rgba(26,86,219,.18));
}
.ld-logo-wrap .logo-fallback { font-size: 1.3rem; color: var(--blue); white-space: normal; }
.ld-pill-wrap { opacity: 0; animation: ldUp .72s var(--ease-out) .5s forwards; }
.ld-pill {
  width: min(480px, 86vw); background: white;
  border: 1.5px solid var(--g200); border-radius: 100px;
  display: flex; align-items: center;
  padding: .92rem 1rem .92rem 1.5rem; gap: .9rem;
  box-shadow: 0 2px 10px rgba(37,99,235,.07), 0 10px 40px rgba(37,99,235,.11);
}
.ld-sicon { color: var(--blue-light); flex-shrink: 0; }
.ld-sicon svg { width: 18px; height: 18px; display: block; }
.ld-track { flex: 1; height: 1.35rem; position: relative; overflow: hidden; }
.ld-word {
  position: absolute; inset: 0; font-size: .94rem; font-weight: 500; color: var(--g600);
  display: flex; align-items: center; opacity: 0; transform: translateY(9px);
  transition: opacity .44s var(--ease), transform .44s var(--ease);
}
.ld-word.show  { opacity: 1; transform: translateY(0); }
.ld-word.leave { opacity: 0; transform: translateY(-9px); }
.ld-go {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--blue), var(--blue-mid));
  display: flex; align-items: center; justify-content: center;
  border: none; box-shadow: 0 2px 14px rgba(37,99,235,.35);
}
.ld-go svg { width: 14px; height: 14px; color: white; }
.ld-prog-wrap {
  display: flex; flex-direction: column; align-items: center; gap: .8rem;
  opacity: 0; animation: ldUp .65s var(--ease-out) .8s forwards;
}
.ld-bar-bg { width: min(180px,50vw); height: 2px; background: var(--g200); border-radius: 100px; overflow: hidden; }
.ld-bar-fill {
  height: 100%; width: 0; border-radius: 100px;
  background: linear-gradient(90deg, var(--blue-soft), var(--blue-light), var(--blue));
  animation: ldFill 3.6s var(--ease) 1s forwards;
}
@keyframes ldFill { to { width: 100%; } }
.ld-hint { font-size: .78rem; color: var(--g400); white-space: nowrap; letter-spacing: .01em; }
@keyframes ldUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }

/* ════════════════════════════════════════════════════════
   NAVBAR
════════════════════════════════════════════════════════ */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 6px 1rem; display: flex; align-items: center; pointer-events: none;
}
.nav-inner {
  pointer-events: all; width: 100%; max-width: 1180px; margin: 0 auto;
  height: 58px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.6rem;
  background: rgba(255,255,255,.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(226,232,240,.8); border-radius: 18px;
  box-shadow: 0 1px 3px rgba(15,23,42,.04);
  transition: border-radius .35s var(--ease), box-shadow .35s var(--ease),
              background .25s var(--ease), border-color .25s var(--ease);
}
.navbar.scrolled .nav-inner {
  border-radius: 26px;
  box-shadow: 0 6px 32px rgba(15,23,42,.12), 0 1px 4px rgba(15,23,42,.06);
  background: rgba(255,255,255,.97); border-color: rgba(226,232,240,.45);
}
.nav-logo-link { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.nav-logo-link .logo-img { --logo-h: 32px; }
.nav-logo-link .logo-fallback { color: var(--blue); font-size: .9rem; }
.nav-links { list-style: none; display: flex; align-items: center; gap: 1.6rem; }
.nav-links a { text-decoration: none; color: var(--g500); font-size: .86rem; font-weight: 500; transition: color .17s; white-space: nowrap; }
.nav-links a:hover, .nav-links a.active { color: var(--blue); }

/* CTA with subtle pulsing glow */
.nav-cta {
  background: var(--blue); color: white !important; padding: .44rem 1.1rem;
  border-radius: 100px; font-weight: 600 !important; font-size: .82rem !important;
  transition: background .17s, box-shadow .17s, transform .17s !important;
  animation: ctaGlow 3.5s ease-in-out infinite;
}
@keyframes ctaGlow {
  0%,100% { box-shadow: 0 2px 10px rgba(37,99,235,.22); }
  50%      { box-shadow: 0 2px 22px rgba(37,99,235,.48), 0 0 0 4px rgba(37,99,235,.10); }
}
.nav-cta:hover {
  background: var(--blue-mid) !important; transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(37,99,235,.40) !important;
  color: white !important; animation: none;
}
.ham { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; }
.ham span { display: block; width: 20px; height: 1.5px; background: var(--g700); border-radius: 2px; transition: .2s; }
.nav-links.open {
  display: flex !important; flex-direction: column;
  position: fixed; top: 76px; left: 1rem; right: 1rem;
  background: white; padding: 1.4rem 1.6rem;
  border: 1px solid var(--g200); border-radius: 22px;
  gap: 1rem; box-shadow: 0 12px 40px rgba(0,0,0,.12); z-index: 999;
}
.nav-links.open a { color: var(--g700); }
.nav-links.open .nav-cta { color: white !important; text-align: center; animation: none; }

/* ════════════════════════════════════════════════════════
   HERO + ANIMATED BACKGROUND
════════════════════════════════════════════════════════ */
.hero {
  padding-top: 76px; padding-bottom: 6rem;
  padding-left: 2rem; padding-right: 2rem;
  min-height: 88vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; position: relative;
  background: linear-gradient(172deg, #E4F0FF 0%, #EDF6FF 35%, #F5F9FF 65%, var(--white) 100%);
}
.hero-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

/* Stronger grid + larger orbs */
.hero-grid-lines {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(59,130,246,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  animation: gridShift 22s linear infinite;
}
.orb-1 { position:absolute; top:-180px; right:-140px; width:780px; height:780px; border-radius:50%; background:radial-gradient(circle,rgba(59,130,246,.16) 0%,transparent 65%); animation:drift1 14s ease-in-out infinite; }
.orb-2 { position:absolute; bottom:-140px; left:-120px; width:580px; height:580px; border-radius:50%; background:radial-gradient(circle,rgba(37,99,235,.13) 0%,transparent 65%); animation:drift2 18s ease-in-out infinite; }
.orb-3 { position:absolute; top:32%; left:4%; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle,rgba(96,165,250,.13) 0%,transparent 65%); animation:drift3 22s ease-in-out infinite; }
.orb-4 { position:absolute; top:-80px; left:50%; transform:translateX(-50%); width:820px; height:400px; border-radius:50%; background:radial-gradient(ellipse,rgba(59,130,246,.11) 0%,transparent 60%); animation:drift4 20s ease-in-out infinite; }
.orb-5 { position:absolute; top:18%; right:3%; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle,rgba(59,130,246,.11) 0%,transparent 65%); animation:drift3 17s ease-in-out 3s infinite; }

@keyframes drift1 { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(-40px,50px) scale(1.08)} 66%{transform:translate(24px,-28px) scale(.94)} }
@keyframes drift2 { 0%,100%{transform:translate(0,0) scale(1)} 40%{transform:translate(50px,-40px) scale(1.07)} 70%{transform:translate(-30px,35px) scale(.96)} }
@keyframes drift3 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(32px,-42px)} }
@keyframes drift4 { 0%,100%{transform:translateX(-50%) translateY(0);opacity:1} 50%{transform:translateX(-50%) translateY(28px);opacity:.6} }
@keyframes gridShift { 0%{background-position:0 0,0 0} 100%{background-position:64px 64px,64px 64px} }

.hero-content { position: relative; z-index: 2; width: 100%; display: flex; flex-direction: column; align-items: center; }
.hero-eye { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.15em; color:var(--blue-light); margin-bottom:1.5rem; opacity:0; animation:fadeUp .7s var(--ease) .05s forwards; }
.hero-h1 { font-size:clamp(2rem,4.5vw,3.75rem); font-weight:800; line-height:1.1; color:var(--g900); max-width:800px; margin-bottom:1.1rem; opacity:0; animation:fadeUp .7s var(--ease) .15s forwards; }

/* Animated shimmer on headline em */
.hero-h1 em {
  font-style: normal;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-light) 50%, var(--blue) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: textShimmer 4s linear infinite;
}
@keyframes textShimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

.hero-sub { font-size:1.02rem; color:var(--g500); line-height:1.8; margin-bottom:3rem; font-weight:400; opacity:0; animation:fadeUp .7s var(--ease) .25s forwards; }

/* Search card: fadeUp + continuous float */
.sc {
  width:100%; max-width:860px;
  background:rgba(255,255,255,.97); border-radius:24px;
  border:1.5px solid rgba(226,232,240,.9);
  padding:2rem 2rem 1.8rem;
  box-shadow:0 2px 8px rgba(15,23,42,.04),0 16px 56px rgba(15,23,42,.10),0 4px 16px rgba(37,99,235,.07);
  backdrop-filter:blur(10px); position:relative;
  opacity:0;
  animation: fadeUp .7s var(--ease) .35s forwards;
}

/* Accent bar pulses in width */
.sc::before {
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  height:3px;
  background:linear-gradient(90deg, var(--blue-light), var(--blue));
  border-radius:0 0 6px 6px;
  animation: accentExpand 4s ease-in-out infinite;
}
@keyframes accentExpand {
  0%,100% { width:48px; opacity:1; }
  50%      { width:88px; opacity:.82; }
}

.sc-grid { display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:.75rem; align-items:end; }
.sc-field { display:flex; flex-direction:column; gap:.38rem; position:relative; }
.sc-lbl { font-size:.69rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--g400); }
.sc-wrap {
  display:flex; align-items:center; gap:.6rem;
  background:var(--g50); border:1.5px solid var(--g200);
  border-radius:14px; padding:.8rem 1rem;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.sc-wrap:focus-within { border-color:var(--blue-light); background:white; box-shadow:0 0 0 3px rgba(59,130,246,.11); }
.sc-wrap svg { width:15px; height:15px; color:var(--blue-light); flex-shrink:0; }
.sc-wrap input, .sc-wrap select { flex:1; border:none; background:none; outline:none; font-family:'DM Sans',sans-serif; font-size:.91rem; color:var(--g800); min-width:0; }
.sc-wrap select { cursor:pointer; }
.sc-wrap input::placeholder { color:var(--g400); }

/* Search button with shine sweep */
.sc-btn {
  background:linear-gradient(135deg, var(--blue), var(--blue-mid));
  color:white; border:none; border-radius:14px;
  height:50px; padding:0 1.6rem;
  font-family:'Sora',sans-serif; font-size:.88rem; font-weight:600;
  cursor:pointer; white-space:nowrap;
  display:flex; align-items:center; gap:.45rem;
  box-shadow:0 4px 22px rgba(37,99,235,.30);
  transition:transform .2s, box-shadow .2s;
  position:relative; overflow:hidden;
}
.sc-btn::after {
  content:'';
  position:absolute; top:0; left:-100%; width:55%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transform:skewX(-18deg);
}
.sc-btn:hover { transform:translateY(-3px); box-shadow:0 10px 32px rgba(37,99,235,.44); }
.sc-btn:hover::after { animation:btnShine .55s ease forwards; }
@keyframes btnShine { to { left:140%; } }
.sc-btn svg { width:15px; height:15px; }

/* Autocomplete */
.ac { position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:200; background:white; border:1.5px solid var(--g200); border-radius:16px; box-shadow:0 8px 36px rgba(0,0,0,.11); overflow:hidden; display:none; }
.ac.open { display:block; animation:acIn .14s var(--ease); }
@keyframes acIn { from{opacity:0;transform:translateY(-5px)} to{opacity:1;transform:none} }
.ac-head { padding:.45rem 1rem .18rem; font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--g400); }
.ac-row { padding:.62rem 1rem; font-size:.87rem; color:var(--g700); cursor:pointer; display:flex; align-items:center; gap:.5rem; transition:background .12s; }
.ac-row:hover { background:var(--blue-pale); color:var(--blue); }
.ac-row svg { width:12px; height:12px; opacity:.5; flex-shrink:0; }
.ac-meta { color:var(--g400); font-size:.76rem; margin-left:.3rem; }

@keyframes fadeUp {
  from { opacity:0; transform:translateY(22px) scale(.98); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

/* ════════════════════════════════════════════════════════
   SHARED
════════════════════════════════════════════════════════ */
.wrap { max-width: 1100px; margin: 0 auto; }
section { padding: 5.5rem 2rem; }
.s-eye { font-size:.71rem; font-weight:700; text-transform:uppercase; letter-spacing:.13em; color:var(--blue-light); margin-bottom:.55rem; }
.s-h2 { font-size:clamp(1.45rem,2.4vw,2.1rem); font-weight:800; color:var(--g900); line-height:1.2; margin-bottom:.55rem; }
.s-desc { font-size:.92rem; color:var(--g500); line-height:1.75; max-width:460px; }
.s-head { margin-bottom:2.8rem; }

/* Scroll reveal with scale */
.reveal {
  opacity: 0; transform: translateY(24px) scale(.98);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.vis { opacity: 1; transform: translateY(0) scale(1); }

/* ════════════════════════════════════════════════════════
   BRANCHEN
════════════════════════════════════════════════════════ */
.branchen { background:var(--g50); border-top:1px solid var(--g200); }
.b-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:.7rem; }
.b-tile {
  background:white; border:1.5px solid var(--g200); border-radius:18px;
  padding:1.45rem .8rem; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  text-decoration:none; cursor:pointer;
  transition:border-color .25s, box-shadow .25s, transform .25s;
}
.b-tile:hover {
  border-color:var(--blue-light);
  box-shadow:0 8px 32px rgba(37,99,235,.16), 0 2px 8px rgba(37,99,235,.08);
  transform:translateY(-6px);
}
.b-tile:hover .b-ico { background:var(--blue); color:white; transform:scale(1.1); }
.b-ico {
  width:48px; height:48px; border-radius:14px;
  background:var(--blue-pale); color:var(--blue);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:background .25s, color .25s, transform .25s;
}
.b-ico svg { width:22px; height:22px; }
.b-name { font-family:'Sora',sans-serif; font-weight:600; font-size:.79rem; color:var(--g700); line-height:1.3; }
.b-n { font-size:.69rem; color:var(--g400); }
.b-more { text-align:center; margin-top:2.2rem; }
.b-more a {
  display:inline-flex; align-items:center; gap:.4rem;
  text-decoration:none; color:var(--blue); font-size:.86rem; font-weight:600;
  border:1.5px solid var(--blue-soft); padding:.58rem 1.7rem; border-radius:100px;
  transition:background .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.b-more a:hover { background:var(--blue-pale); border-color:var(--blue-light); transform:translateY(-2px); box-shadow:0 4px 16px rgba(37,99,235,.14); }
.b-more a svg { width:14px; height:14px; }

/* ════════════════════════════════════════════════════════
   BUNDESLÄNDER
════════════════════════════════════════════════════════ */
.regionen { background:white; border-top:1px solid var(--g200); }
.bl-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.65rem; }
.bl-tile {
  background:var(--g50); border:1.5px solid var(--g200); border-radius:16px;
  padding:1.05rem 1.35rem;
  display:flex; align-items:center; justify-content:space-between;
  text-decoration:none; cursor:pointer;
  transition:border-color .2s, background .2s, transform .22s, box-shadow .22s;
}
.bl-tile:hover {
  border-color:var(--blue-light); background:var(--blue-pale);
  transform:translateX(7px); box-shadow:0 4px 20px rgba(37,99,235,.13);
}
.bl-tile:hover .bl-arr { color:var(--blue); transform:translateX(3px); }
.bl-left { display:flex; align-items:center; gap:.8rem; }
.bl-dot { width:32px; height:32px; border-radius:50%; background:var(--blue-soft); color:var(--blue); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.bl-dot svg { width:13px; height:13px; }
.bl-nm { font-family:'Sora',sans-serif; font-weight:600; font-size:.88rem; color:var(--g800); }
.bl-ct { font-size:.71rem; color:var(--g400); margin-top:1px; }
.bl-arr { width:15px; height:15px; color:var(--g300); transition:color .2s, transform .22s; }

/* ════════════════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════════════════ */
footer { background:var(--g900); padding:3.5rem 2.5rem 2rem; }
.ft { max-width:1100px; margin:0 auto; }
.ft-top { display:grid; grid-template-columns:1.6fr 2fr auto; gap:3rem; padding-bottom:2.5rem; border-bottom:1px solid rgba(255,255,255,.06); align-items:start; }
.ft-brand { display:flex; align-items:center; }
.ft-brand .logo-img { --logo-h:28px; filter:brightness(0) invert(1); opacity:.75; }
.ft-brand .logo-fallback { font-family:'Sora',sans-serif; font-weight:700; font-size:.88rem; color:rgba(255,255,255,.75); }
.ft-brand-desc { font-size:.82rem; color:var(--g500); line-height:1.7; margin-top:.8rem; max-width:240px; }
.ft-cols { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.ft-col-title { font-family:'Sora',sans-serif; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--g500); margin-bottom:.9rem; }
.ft-col nav { display:flex; flex-direction:column; gap:.55rem; }
.ft-col nav a { text-decoration:none; color:var(--g500); font-size:.83rem; transition:color .15s, transform .18s; cursor:pointer; display:inline-block; }
.ft-col nav a:hover { color:var(--g300); transform:translateX(3px); }
.ft-soc { display:flex; flex-direction:column; gap:.5rem; align-items:flex-end; }
.ft-soc-row { display:flex; gap:.5rem; }
.ft-s { width:34px; height:34px; border-radius:10px; background:var(--g800); color:var(--g500); display:flex; align-items:center; justify-content:center; text-decoration:none; transition:background .18s, color .18s, transform .18s; }
.ft-s:hover { background:var(--blue); color:white; transform:translateY(-2px); }
.ft-s svg { width:13px; height:13px; }
.ft-bottom { padding-top:1.6rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.8rem; }
.ft-copy { font-size:.77rem; color:var(--g600); }
.ft-legal { display:flex; gap:1.4rem; }
.ft-legal a { font-size:.77rem; color:var(--g600); text-decoration:none; transition:color .15s; cursor:pointer; }
.ft-legal a:hover { color:var(--g400); }

/* ════════════════════════════════════════════════════════
   MODALS
════════════════════════════════════════════════════════ */
.modal-backdrop {
  position:fixed; inset:0; z-index:2000;
  background:rgba(15,23,42,.58); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  display:flex; align-items:center; justify-content:center; padding:1.5rem;
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s var(--ease);
}
.modal-backdrop.open { opacity:1; visibility:visible; }
.modal-backdrop.open .modal-box { transform:translateY(0) scale(1); opacity:1; }
.modal-box {
  background:white; border-radius:24px;
  box-shadow:0 24px 64px rgba(0,0,0,.20), 0 4px 16px rgba(0,0,0,.08);
  width:100%; max-width:520px; max-height:85vh; overflow-y:auto;
  transform:translateY(24px) scale(.97); opacity:0;
  transition:transform .35s var(--ease-out), opacity .35s var(--ease-out); position:relative;
}
.modal-box.wide { max-width:680px; }
.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:1.6rem 1.8rem 1.2rem; border-bottom:1px solid var(--g100);
  position:sticky; top:0; background:white; border-radius:24px 24px 0 0; z-index:1;
}
.modal-title { font-family:'Sora',sans-serif; font-weight:700; font-size:1.05rem; color:var(--g900); }
.modal-close { width:32px; height:32px; border-radius:50%; background:var(--g100); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--g500); transition:background .15s, color .15s, transform .2s; flex-shrink:0; }
.modal-close:hover { background:var(--g200); color:var(--g800); transform:rotate(90deg); }
.modal-close svg { width:14px; height:14px; }
.modal-body { padding:1.6rem 1.8rem; }
.oz-table { width:100%; border-collapse:collapse; }
.oz-table tr:not(:last-child) td { border-bottom:1px solid var(--g100); }
.oz-table td { padding:.8rem .4rem; font-size:.92rem; }
.oz-table td:first-child { color:var(--g600); font-weight:500; }
.oz-table td:last-child { color:var(--g900); font-weight:600; text-align:right; }
.imp-section { margin-bottom:1.5rem; }
.imp-section:last-child { margin-bottom:0; }
.imp-label { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--blue-light); margin-bottom:.5rem; }
.imp-block { background:var(--g50); border:1px solid var(--g200); border-radius:14px; padding:1rem 1.2rem; }
.imp-name { font-family:'Sora',sans-serif; font-weight:700; font-size:1rem; color:var(--g900); margin-bottom:.6rem; }
.imp-row { display:flex; align-items:flex-start; gap:.6rem; font-size:.88rem; color:var(--g600); margin-bottom:.3rem; }
.imp-row svg { width:14px; height:14px; color:var(--blue-light); flex-shrink:0; margin-top:2px; }
.imp-divider { height:1px; background:var(--g200); margin:1rem 0; }

/* ════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════ */
@media (max-width:1024px) {
  .ft-top { grid-template-columns:1fr 1fr; }
  .ft-soc { flex-direction:row; align-items:center; grid-column:1/-1; }
  .ft-soc-row { flex-direction:row; }
}
@media (max-width:920px) {
  .sc-grid { grid-template-columns:1fr 1fr; }
  .sc-btn { grid-column:1/-1; justify-content:center; height:48px; }
  .b-grid { grid-template-columns:repeat(4,1fr); }
  .bl-grid { grid-template-columns:1fr 1fr; }
  .nav-links { display:none; }
  .ham { display:flex; }
  .ft-top { grid-template-columns:1fr; }
  .ft-cols { grid-template-columns:1fr 1fr; }
  .ft-soc { flex-direction:row; }
}
@media (max-width:620px) {
  .sc-grid { grid-template-columns:1fr; }
  .b-grid { grid-template-columns:repeat(3,1fr); }
  .bl-grid { grid-template-columns:1fr; }
  section { padding:4rem 1.4rem; }
  .sc { padding:1.5rem 1.2rem 1.3rem; }
  .navbar { padding:6px .75rem; }
  .nav-inner { border-radius:14px; }
  .navbar.scrolled .nav-inner { border-radius:22px; }
  .ft-cols { grid-template-columns:1fr; gap:1.5rem; }
  .ft-bottom { flex-direction:column; }
  .modal-box { border-radius:18px; }
  .modal-header { border-radius:18px 18px 0 0; }
  /* Loading-Screen mobil */
  #loader { gap:2rem; padding:1.5rem; }
  .ld-logo-wrap .logo-img { width:min(300px,78vw); }
  .ld-logo-wrap .logo-fallback { font-size:1.05rem; }
  /* Navi-Logo (10:1) darf nicht über den Rand */
  .nav-logo-link .logo-img { --logo-h:auto; height:auto; width:min(190px,52vw); }
}
@media (max-width:400px) {
  .b-grid { grid-template-columns:repeat(2,1fr); }
  .ld-logo-wrap .logo-img { width:74vw; }
  .nav-logo-link .logo-img { width:min(165px,50vw); }
}