/* =========================
   SafeTec24 – Style (Refine)
   ========================= */

:root{
  --bg: #f3f7ff;
  --card: #ffffff;
  --text: #0d1b2a;
  --muted: #516074;
  --line: rgba(13,27,42,.10);

  --brand: #0b3a66;
  --brand2:#0a2c4c;

  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 12px;

  --shadow-sm: 0 8px 20px rgba(13,27,42,.08);
  --shadow-md: 0 14px 30px rgba(13,27,42,.10);

  --ease: cubic-bezier(.2,.8,.2,1);

  /* Header-Steuerung */
  --header-h: 74px;
  --safe-top: env(safe-area-inset-top, 0px);
}

*{ box-sizing:border-box; }

html,body{ height:100%; }

/* ✅ verhindert, dass Ankerlinks/Scroll-Ziele unter dem Fixed-Header verschwinden */
html{
  scroll-padding-top: calc(var(--header-h) + var(--safe-top) + 12px);
}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);
  background: radial-gradient(1200px 800px at 20% -10%, rgba(11,58,102,.16), transparent 60%),
              radial-gradient(1200px 800px at 80% 0%, rgba(11,58,102,.10), transparent 55%),
              var(--bg);

  /* ✅ wichtig bei position:fixed Header */
  padding-top: calc(var(--header-h) + var(--safe-top));
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
p{ line-height:1.55; color: var(--muted); margin:0 0 12px; }
h1,h2,h3{ margin:0 0 10px; letter-spacing:-.02em; color: var(--text); }
h1{ font-size: clamp(28px, 2.6vw, 40px); }
h2{ font-size: clamp(20px, 2vw, 28px); }
h3{ font-size: 16px; }

.container{
  width: min(1120px, calc(100% - 44px));
  margin: 0 auto;
}

.page{ padding: 24px 0 60px; }

/* =========================
   Header
   ========================= */

.site-header{
  position: fixed;              /* ✅ bleibt immer sichtbar (Safari/iOS Fix) */
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;

  background: #ffffff !important;
  backdrop-filter: none !important;
  border-bottom: 1px solid var(--line);

  height: calc(var(--header-h) + var(--safe-top));
  padding-top: var(--safe-top);
  overflow: visible;

  /* Safari / iOS FIX: verhindert “Verschwinden” beim Scrollen */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
}

.site-header.is-scrolled{
  box-shadow: 0 8px 24px rgba(13,27,42,.08);
}

.site-header .container{
  width: 100%;
  max-width: none;
  margin: 0;
  padding-left: 16px;
  padding-right: 16px;
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  height: var(--header-h);
}

/* Brand row */
.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0;
  margin-right: auto;
}

/* ✅ Logo-Größe wie gewünscht (Desktop) */
.logo{
  height: 56px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
}

/* Badges (wenn du sie noch irgendwo nutzt) */
.badges{
  display:flex;
  align-items:center;
  gap: 8px;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(11,58,102,.06);
  border: 1px solid rgba(11,58,102,.12);
  color: var(--brand);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.badge svg,
.badge img{
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}
.badge img{ object-fit: contain; }

/* Desktop nav */
.nav{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(13,27,42,.03);
  border: 1px solid rgba(13,27,42,.06);
}

.nav a{
  padding: 10px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(13,27,42,.72);
  transition: background .18s var(--ease), color .18s var(--ease);
}

.nav a:hover{
  background: rgba(11,58,102,.08);
  color: var(--brand);
}

.nav a.active{
  background: rgba(11,58,102,.10);
  color: var(--brand);
}

/* ✅ FIX: Button in der Desktop-Navigation darf NICHT von .nav a überschrieben werden */
.nav a.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 999px;
  border: 1px solid rgba(13,27,42,.10);
  background: rgba(255,255,255,.78);
  font-weight: 900;
  font-size: 13px;
  color: rgba(13,27,42,.80);
  cursor:pointer;
  transition: transform .12s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.nav a.btn:hover{ box-shadow: var(--shadow-sm); }
.nav a.btn:active{ transform: scale(.99); }

/* ✅ dunkler Button in Nav: Text immer weiß */
.nav a.btn.dark{
  background: rgba(13,27,42,.92);
  border-color: rgba(13,27,42,.35);
  color:#fff;
}
.nav a.btn.dark:hover{
  background: rgba(13,27,42,.92);
  color:#fff;
}

/* ✅ Primary Button in Nav (falls du den mal nutzt) */
.nav a.btn.primary{
  background: linear-gradient(180deg, rgba(11,58,102,1), rgba(10,44,76,1));
  border-color: rgba(11,58,102,.30);
  color:#fff;
}
.nav a.btn.primary:hover{ color:#fff; }

.header-cta{ display:none; }

/* Mobile menu button */
.menu-btn{
  border: 1px solid rgba(13,27,42,.10);
  background: #fff;
  color: var(--text);
  border-radius: 999px;
  padding: 10px 12px;
  font-weight: 800;
  font-size: 13px;
  cursor:pointer;
  transition: transform .12s var(--ease), box-shadow .18s var(--ease);
}
.menu-btn:hover{ box-shadow: var(--shadow-sm); }
.menu-btn:active{ transform: scale(.98); }

/* =========================
   Mobile nav (Slide)
   ========================= */

.mobile-nav{
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);

  opacity: 0;
  transform: translateY(-10px);
  max-height: 0;
  overflow: hidden;
  pointer-events: none;

  transition:
    opacity .22s var(--ease),
    transform .22s var(--ease),
    max-height .28s var(--ease);

  will-change: opacity, transform, max-height;

  /* ✅ wichtig bei fixed Header */
  position: fixed;
  top: calc(var(--header-h) + var(--safe-top));
  left: 0;
  right: 0;
  z-index: 9998;
}

.mobile-nav .container{
  display:grid;
  gap: 6px;
  padding: 12px 16px 16px;
  margin: 0;
  width: 100%;
  max-width: none;
}

.mobile-nav a{
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(13,27,42,.03);
  border: 1px solid rgba(13,27,42,.06);
  font-weight: 800;
  font-size: 14px;
  color: rgba(13,27,42,.78);
}

.mobile-nav a.active{
  background: rgba(11,58,102,.10);
  color: var(--brand);
}

.mobile-nav.is-open{
  opacity: 1;
  transform: translateY(0);
  max-height: 520px;
  pointer-events: auto;
}

/* =========================
   Responsive
   ========================= */

.menu-btn{ display:none; }

@media (max-width: 920px){
  :root{ --header-h: 66px; }
  body{ padding-top: calc(var(--header-h) + var(--safe-top)); }

  .nav{ display:none; }
  .menu-btn{ display:inline-flex; }

  /* ✅ Logo-Größe wie gewünscht (Mobile) */
  .logo{
    height: 44px;
    max-width: 180px;
  }

  /* Badges auf Mobile aus (damit nichts überlappt) */
  .badges{ display:none; }
}

/* =========================
   Cards / Sections
   ========================= */

.card{
  background: var(--card);
  border: 1px solid rgba(13,27,42,.08);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.card.soft{
  background: rgba(255,255,255,.86);
}

.pad{ padding: 22px; }
.section{ margin-top: 18px; }

.hr{
  height:1px;
  background: rgba(13,27,42,.08);
  margin: 18px 0;
  border-radius: 999px;
}

.section-title{
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 14px;
  margin: 22px 0 14px;
}
.section-title p{ margin: 0; }

.tag{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(13,27,42,.10);
  background: rgba(255,255,255,.7);
  font-weight: 800;
  font-size: 13px;
  color: rgba(13,27,42,.75);
  transition: transform .12s var(--ease), box-shadow .18s var(--ease);
}
.tag:hover{ box-shadow: var(--shadow-sm); }
.tag:active{ transform: scale(.99); }

/* =========================
   Hero
   ========================= */

.hero{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  padding: 22px;
  overflow:hidden;
}

.hero-left{ display:flex; flex-direction:column; gap: 10px; }
.hero-right{ display:flex; align-items:center; justify-content:center; }

.kicker{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(11,58,102,.06);
  border: 1px solid rgba(11,58,102,.12);
  font-weight: 900;
  font-size: 12px;
  color: var(--brand);
  width: fit-content;
}

.kicker-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--brand);
  box-shadow: 0 0 0 4px rgba(11,58,102,.10);
}

.hero-img{
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: calc(var(--radius-lg) - 4px);
  border: 1px solid rgba(13,27,42,.08);
  box-shadow: 0 20px 40px rgba(13,27,42,.12);
}

.hero-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

@media (max-width: 920px){
  .hero{ grid-template-columns: 1fr; }
  .hero-img{ max-height: 320px; }
}

/* =========================
   Buttons
   ========================= */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 999px;
  border: 1px solid rgba(13,27,42,.10);
  background: rgba(255,255,255,.78);
  font-weight: 900;
  font-size: 13px;
  color: rgba(13,27,42,.80);
  cursor:pointer;
  transition: transform .12s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.btn:hover{ box-shadow: var(--shadow-sm); }
.btn:active{ transform: scale(.99); }

.btn.primary{
  background: linear-gradient(180deg, rgba(11,58,102,1), rgba(10,44,76,1));
  border-color: rgba(11,58,102,.30);
  color: #fff;
}

.btn.dark{
  background: rgba(13,27,42,.92);
  border-color: rgba(13,27,42,.35);
  color:#fff;
}

/* =========================
   Grids / Tiles
   ========================= */

.grid-2{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 920px){
  .grid-2, .grid-3{ grid-template-columns: 1fr; }
}

.tile{
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(13,27,42,.08);
  border-radius: var(--radius-md);
  padding: 14px;
  box-shadow: 0 10px 22px rgba(13,27,42,.06);
  transition: transform .14s var(--ease), box-shadow .18s var(--ease);
}
.tile:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 30px rgba(13,27,42,.10);
}

.tile-head{
  display:flex;
  align-items:center;
  gap: 12px;
  margin-bottom: 8px;
}

.meta{
  font-size: 12px;
  font-weight: 800;
  color: rgba(13,27,42,.55);
}

.iconbox{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(11,58,102,.08);
  border: 1px solid rgba(11,58,102,.16);
  flex: 0 0 auto;
}
.iconbox img{
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.small{
  font-size: 13px;
  font-weight: 900;
  color: rgba(11,58,102,.95);
}
.small:hover{ text-decoration: underline; }

/* =========================
   Media blocks
   ========================= */

.media{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: center;
}
.media.card{ padding: 16px; }
.media .photo img{
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid rgba(13,27,42,.08);
  box-shadow: 0 18px 30px rgba(13,27,42,.10);
}
.media .caption{
  font-size: 12px;
  font-weight: 800;
  color: rgba(13,27,42,.55);
  margin-top: 10px;
}

@media (max-width: 920px){
  .media{ grid-template-columns: 1fr; }
}

/* =========================
   Bullet list
   ========================= */

.list{ display:grid; gap: 8px; margin-top: 10px; }
.bullet{ display:flex; gap: 10px; align-items:flex-start; }
.dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--brand);
  margin-top: 7px;
  box-shadow: 0 0 0 4px rgba(11,58,102,.10);
}

/* =========================
   FAQ
   ========================= */

.faq details{
  border: 1px solid rgba(13,27,42,.08);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  background: rgba(255,255,255,.78);
}
.faq details + details{ margin-top: 10px; }
.faq summary{
  cursor:pointer;
  font-weight: 900;
  color: rgba(13,27,42,.85);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:after{
  content:"+";
  float:right;
  font-weight: 900;
  color: rgba(13,27,42,.55);
}
.faq details[open] summary:after{ content:"–"; }

/* =========================
   CTA section
   ========================= */

.cta{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.78));
}
.cta .left p{ margin: 0; }
.cta .right{ display:flex; gap: 10px; flex-wrap:wrap; }

@media (max-width: 920px){
  .cta{ flex-direction:column; align-items:flex-start; }
}

/* =========================
   Footer
   ========================= */

.site-footer{
  border-top: 1px solid rgba(13,27,42,.08);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
  padding: 18px 0;
}
.footer-inner{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 14px;
}
.footer-left{ color: rgba(13,27,42,.70); font-size: 13px; font-weight: 700; }
.footer-links{
  display:flex;
  gap: 14px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.footer-links a{
  font-weight: 900;
  color: rgba(11,58,102,.95);
}
.footer-links a:hover{ text-decoration: underline; }
.footer-links .small{
  font-size: 12px;
  font-weight: 900;
  color: rgba(13,27,42,.55);
}

@media (max-width: 920px){
  .footer-inner{ flex-direction:column; }
  .footer-links{ justify-content:flex-start; }
}

/* =========================
   Focus states
   ========================= */

a:focus, button:focus, .btn:focus{ outline: none; }
a:focus-visible, button:focus-visible, .btn:focus-visible{
  box-shadow: 0 0 0 4px rgba(11,58,102,.18);
  border-radius: 12px;
}

/* =========================
   Reveal on scroll / load
   ========================= */

.reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s ease;
  will-change: opacity, transform;
}

.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

.delay-1{ transition-delay: .08s; }
.delay-2{ transition-delay: .16s; }
.delay-3{ transition-delay: .24s; }
.delay-4{ transition-delay: .32s; }