:root{
  --bg:#f7fafc;
  --alt:#f7fafc;
  --text:#0f172a;
  --muted:#475569;
  --border:#e2e8f0;

  --blue:#46bff2;
  --yellow:#f6d800;

  --red:#ef4444;
  --red-dark:#dc2626;

  --container:1100px;
  --radius:18px;
  --shadow:0 14px 35px rgba(2,8,23,0.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
[hidden]{display:none !important;} /* wichtig: hidden darf nicht von display-Regeln überschrieben werden */

body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);

  /* Weicher "Logo-Verlauf" über die ganze Seite:
     - große Radials (nicht pixel-klein), damit in der Mitte kein "Loch" entsteht
     - 3 Layer: oben links blau, mittig rechts gelb, unten links blau */
  background:
          radial-gradient(
                  900px 600px at 12% 0%,
                  rgba(70,191,242,0.045),
                  transparent 65%
          ),
          radial-gradient(
                  700px 520px at 90% 85%,
                  rgba(246,216,0,0.055),
                  transparent 65%
          ),
          #f7fafc;

  min-height: 100vh;
}


/* Sticky Footer Layout */
html, body{height:100%}
body{display:flex; flex-direction:column}
main{flex:1 0 auto}
footer{flex-shrink:0}

a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}

.container{width:min(var(--container), calc(100% - 32px)); margin:0 auto}
.muted{color:var(--muted)}
.tiny{font-size:12px;line-height:1.45}

h1{font-size:clamp(28px, 4vw, 40px); letter-spacing:-0.02em; margin:0 0 10px}
h2{font-size:22px; margin:0 0 10px}
h3{font-size:16px; margin:0 0 10px}
.lead{font-size:16px; line-height:1.65; margin:0 0 14px}

/* Header */
.header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.header__inner{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 0;
}
.brand{
  display:inline-flex;
  align-items:center;
}
.brand__logo{
  height:160px;
  width:auto;
  display:block;
  transition:transform 160ms ease, filter 160ms ease;
}
.brand:hover .brand__logo{
  transform:translateY(-1px);
  filter:drop-shadow(0 6px 14px rgba(0,0,0,0.18));
}

/* Navigation rechts */
.nav{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
}
.nav a{
  padding:10px 12px;
  border-radius:999px;
  font-weight:700;
  color:#0b1220;
}
.nav a:hover{background:rgba(70,191,242,0.12); text-decoration:none}
.nav a.is-active{
  background:rgba(70,191,242,0.18);
  border:1px solid rgba(70,191,242,0.22);
}

/* Header actions (Call + Burger) */
.header__actions{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Call-to-Action Button (Desktop & Mobile) */
.nav__cta{
  display:inline-flex;
  align-items:center;
  gap:6px;

  padding:12px 20px;
  border-radius:999px;

  background:rgba(246,216,0,0.9);
  border:1px solid rgba(246,216,0,0.6);
  color:var(--text);

  font-size:14px;
  font-weight:600;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
}
.nav__cta:hover{background:rgba(246,216,0,0.45); text-decoration:none}

/* Burger + Mobile */
.burger{
  display:none;
  width:44px;height:44px;border-radius:12px;
  border:1px solid var(--border); background:#fff;
  padding:10px; cursor:pointer;
}
.burger span{
  display:block; width:18px; height:2px; background:#0b1220; border-radius:2px;
}
.burger span + span{margin-top:5px}

.mobile{border-top:1px solid var(--border); background:#fff}
.mobile__inner{display:flex; flex-direction:column; gap:10px; padding:14px 0 18px}
.mobile__inner a{
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  font-weight:800;
}
.mobile__inner a:hover{background:rgba(70,191,242,0.10); text-decoration:none}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 14px; border-radius:999px;
  font-weight:900; border:1px solid transparent;
  cursor:pointer; transition:transform 120ms ease, filter 120ms ease;
}
.btn:hover{transform:translateY(-1px); text-decoration:none}
.btn--ghost{background:transparent; border-color:var(--border)}
.btn--red{background:var(--red); color:#fff; border-color:rgba(0,0,0,0.06)}
.btn--red:hover{filter:brightness(0.98)}
.btn--full{width:100%}

/* Pulse-Animation (nur wenn per JS aktiviert) */
.btn--pulse-once{position:relative; isolation:isolate}
.btn--pulse-once::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,0.55);
  opacity:0;
  transform:scale(0.95);
  z-index:-1;
}
.btn--pulse-once.is-pulsing::after{animation:pulseOnce 1.6s ease-out 1}
@keyframes pulseOnce{
  0%{opacity:0; transform:scale(0.95)}
  30%{opacity:0.65}
  100%{opacity:0; transform:scale(1.25)}
}
@media (prefers-reduced-motion: reduce){
  .btn--pulse-once::after,
  .btn--pulse-once.is-pulsing::after{animation:none}
}

/* Sections */
.section{padding:44px 0}
.section--alt{
  background: transparent;
  border-top: none;
  border-bottom: none;
}
.section__head{margin-bottom:14px}
.section--tight{padding:28px 0}

/* Hero */
.hero{
  padding:34px 0 18px;
  background:
          radial-gradient(900px 300px at 20% 10%, rgba(70,191,242,0.18), transparent 60%),
          radial-gradient(800px 260px at 90% 20%, rgba(246,216,0,0.20), transparent 60%);
}
.hero__inner{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:18px;
  align-items:start;
}
.hero__actions{display:flex; gap:10px; flex-wrap:wrap}

/* Hero mit Header-Bild */
.hero--image{
  position:relative;
  background-image:url("assets/header.png");
  background-size:cover;
  background-position:center 80%;
  min-height:420px;
  display:flex;
  align-items:center;
}
.hero__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to right, rgba(15,23,42,0.75), rgba(15,23,42,0.35), rgba(15,23,42,0.15));
}
.hero__inner--image{position:relative; z-index:2}
.heroText{max-width:520px; color:#fff}
.heroText h1{color:#fff}
.heroText .lead{color:rgba(255,255,255,0.9)}

/* Notdienst Card */
.emergencyCard{
  border-radius:var(--radius);
  border:1px solid rgba(239,68,68,0.35);
  background:rgba(239,68,68,0.06);
  padding:16px;
}
.emergencyCard__badge{
  display:inline-block;
  background:var(--red);
  color:#fff;
  font-weight:900;
  padding:6px 10px;
  border-radius:999px;
  margin-bottom:10px;
  letter-spacing:0.04em;
  font-size:12px;
}
.emergencyCard__title{font-weight:900; font-size:18px; margin-bottom:6px}
.emergencyCard__text{margin:0 0 12px; color:var(--muted); line-height:1.55}

/* Tiles */
.tiles{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
}
.tile{
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px;
  background:#fff;
  box-shadow:0 10px 22px rgba(2,8,23,0.04);
  display:grid;
  gap:6px;
  transition:transform 120ms ease;
}
.tile:hover{transform:translateY(-1px); text-decoration:none}
.tile__icon{font-size:20px}
.tile__title{font-weight:900}
.tile__meta{color:var(--muted); font-size:13px}
.tile--red{
  border-color:rgba(239,68,68,0.35);
  background:rgba(239,68,68,0.04);
}

/* Standort */
.location{
  display:grid;
  grid-template-columns:0.95fr 1.05fr;
  gap:14px;
  align-items:stretch;
}
.location__card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:0 10px 22px rgba(2,8,23,0.04);
}
.kv{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-top:12px;
}
.kv__k{font-size:12px; color:var(--muted); font-weight:800}
.kv__v{font-weight:800}
.link{text-decoration:underline; text-underline-offset:3px}
.location__actions{display:grid; gap:10px; margin-top:14px}
.map{
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:0 10px 22px rgba(2,8,23,0.04);
  background:#fff;
}
.map iframe{width:100%; height:100%; min-height:320px; border:0}

/* Team teaser */
.teamTeaser{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.teamTeaser__text{max-width:520px}
.teamTeaser__faces{display:flex; gap:14px; align-items:center}
.face{margin:0; text-align:center}
.face img{
  width:110px; height:110px;
  border-radius:999px;
  object-fit:cover;
  border:3px solid #fff;
  box-shadow:var(--shadow);
}
.face figcaption{
  margin-top:8px;
  font-weight:800;
  color:var(--muted);
  font-size:13px;
}

/* Page title */
.pageTitle{padding:28px 0 8px}
.stacks{display:grid; gap:12px}

/* Accordion: Dienstleistungen */
.accordion{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:#fff;
  box-shadow:0 10px 22px rgba(2,8,23,0.04);
  overflow:hidden;
  scroll-margin-top:90px;
}
.accordion__title{
  list-style:none;
  cursor:pointer;
  padding:16px;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.accordion__title::-webkit-details-marker{display:none}
.accordion__icon{font-size:20px; transition:transform 150ms ease}
.accordion[open] .accordion__icon{transform:rotate(45deg)}
.accordion__content{padding:0 16px 16px}
.accordion__content ul{
  margin:10px 0 14px;
  padding-left:18px;
  color:var(--muted);
  line-height:1.6;
}
.accordion__content li{margin:6px 0}

/* Layout: Accordion links, Erklärung rechts */
.servicesLayout{
  display:grid;
  grid-template-columns:1.2fr 0.8fr;
  gap:14px;
  align-items:start;
}
.servicesLayout__right{
  position:sticky;
  top:120px;
}
.explainCard{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:#fff;
  box-shadow:0 10px 22px rgba(2,8,23,0.04);
  padding:16px;
}
.explainCard__image{
  width:100%;
  height:210px;
  object-fit:cover;
  border-radius:14px;
  border:1px solid var(--border);
  margin:10px 0 12px;
  display:block; /* JS blendet per hidden+inline style aus, daher ok */
  background:#fff;
}
.explainCard__kicker{
  display:inline-block;
  font-weight:900;
  font-size:12px;
  letter-spacing:0.04em;
  color:var(--muted);
  margin-bottom:10px;
}
.explainCard__title{margin:0 0 8px}
.explainCard__text{margin:0; color:var(--muted); line-height:1.6}



.explainCard.is-updating{
  animation: explainPop 520ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

@keyframes explainPop{
  0%{
    opacity: 0.90;
    transform: translateY(10px) scale(0.995);
  }
  70%{
    opacity: 1;
    transform: translateY(-1px) scale(1);
  }
  100%{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}


/* Über uns */
.aboutGrid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:14px;
  align-items:start;
}
.aboutBullets{display:grid; gap:10px; margin:14px 0}
.bullet{
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px 12px;
  background:#fff;
  font-weight:800;
}
.aboutCTA{display:flex; gap:10px; flex-wrap:wrap; margin-top:8px}
.aboutPhotos{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.photo{
  margin:0;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--border);
  background:#fff;
  box-shadow:0 10px 22px rgba(2,8,23,0.04);
}
.photo img{width:100%; height:240px; object-fit:cover; display:block}
.photo figcaption{padding:10px 12px; font-weight:900}

/* Notdienst Banner */
.notdienstBanner{
  display:flex;
  align-items:center;
  gap:18px;
  background:var(--red);
  color:#fff;
  border-radius:18px;
  padding:18px 22px;
  box-shadow:0 18px 40px rgba(239,68,68,0.35);
  text-decoration:none;
  transition:transform 120ms ease, box-shadow 120ms ease;
}
.notdienstBanner:hover{
  transform:translateY(-1px);
  box-shadow:0 22px 48px rgba(239,68,68,0.45);
  text-decoration:none;
}
.notdienstBanner__icon{
  width:54px; height:54px;
  border-radius:50%;
  background:rgba(255,255,255,0.15);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
}
.notdienstBanner__content{display:grid; gap:4px}
.notdienstBanner__kicker{
  font-size:12px;
  font-weight:900;
  letter-spacing:0.08em;
  opacity:0.9;
}
.notdienstBanner__phone{
  font-size:22px;
  font-weight:900;
  letter-spacing:0.02em;
}
.notdienstBanner__text{font-size:14px; opacity:0.95}
.notdienstBanner--center{
  max-width:520px;
  margin:0 auto;
  justify-content:center;
  text-align:left;
}
.notdienstBanner--center .notdienstBanner__icon{width:46px; height:46px; font-size:20px}
.notdienstBanner--center .notdienstBanner__phone{font-size:20px}
.notdienstBanner--center .notdienstBanner__text{font-size:13px}

/* Dev Pop-in */
.devPopin{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:120;

  width:320px;
  max-width:calc(100% - 40px);

  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:0 22px 48px rgba(2,8,23,0.18);

  opacity:0;
  transform:translateY(12px);
  pointer-events:none;

  transition:opacity 220ms ease, transform 220ms ease;
}
.devPopin.is-visible{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.devPopin__close{
  position:absolute;
  top:10px;
  right:10px;
  border:none;
  background:transparent;
  font-size:20px;
  cursor:pointer;
  color:var(--muted);
}
.devPopin__content{padding:18px}
.devPopin__kicker{
  font-size:12px;
  font-weight:900;
  letter-spacing:0.06em;
  color:var(--muted);
  margin-bottom:6px;
}
.devPopin__title{margin:0 0 6px; font-size:18px}
.devPopin__text{margin:0 0 12px; color:var(--muted); line-height:1.55}

/* Footer */
.footer{
  padding:18px 0;
  border-top:1px solid var(--border);
  background:#fff;
}
.footer__inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.footer__links{display:flex; gap:12px}
.footer__links a{text-decoration:underline; text-underline-offset:3px}

/* Page transition – nur Desktop */
@media (min-width: 981px){
  html{opacity:1; transition:opacity 160ms ease}
  html.is-leaving{opacity:0}
}

/* Responsive */
@media (max-width: 980px){
  .hero__inner{grid-template-columns:1fr}
  .tiles{grid-template-columns:repeat(2, 1fr)}
  .location{grid-template-columns:1fr}
  .aboutGrid{grid-template-columns:1fr}
  .servicesLayout{grid-template-columns:1fr}
  .servicesLayout__right{position:static}
  .nav{display:none}
  .burger{display:block}
  .nav__cta{
    display:inline-flex;
    padding:8px 12px;
    font-size:14px;
    white-space:nowrap;
  }
}
@media (max-width: 720px){
  .brand__logo{height:62px}
  .tiles{grid-template-columns:1fr}
  .aboutPhotos{grid-template-columns:1fr}
  .teamTeaser{flex-direction:column; align-items:flex-start}
  .teamTeaser__faces{width:100%}
  .face img{width:96px; height:96px}
  .hero--image{min-height:360px; background-position:center right}
  .notdienstBanner{gap:14px; padding:16px}
  .notdienstBanner__phone{font-size:18px}
  .notdienstBanner--center{max-width:100%}
  .devPopin{
    right:12px; left:12px; bottom:12px;
    width:auto;
  }
}


/* --- Override: Verlauf ohne sichtbare Kante zwischen Sections --- */
/* Falls alte Regeln noch im Cache sind, erzwingen wir es hier. */
.section--alt,
.section--alt--blend{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}




/* === Header Layout Override (fix: Nav + Actions rechtsbündig) === */
.header__inner{
  display:flex !important;
  align-items:center !important;
  justify-content: space-between !important;
  gap:14px !important;
}

/* Logo darf nicht "wachsen" und alles wegdrücken */
.brand{ flex: 0 0 auto !important; }

/* Navigation nach rechts schieben (Desktop) */
.nav{
  margin-left:auto !important;
  display:flex;
  align-items:center;
  gap:10px;
}

/* Actions (Call + Burger) ganz rechts */
.header__actions{
  margin-left: 12px;
  flex: 0 0 auto !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}

/* Mobile: Nav ausblenden, Actions bleiben rechts */
@media (max-width: 980px){
  .nav{ display:none !important; }
  .burger{ display:block !important; }
  .nav__cta{
    display:inline-flex !important;
    padding:8px 12px;
    font-size:14px;
    white-space:nowrap;
  }
}
@media (min-width: 981px){
  .burger{ display:none !important; }
}


/* === Mobile Header Fix (rechtsbündig erzwingen) === */
@media (max-width: 980px){
  .header__inner{
    justify-content: flex-start !important; /* wir steuern über auto-margins */
    flex-wrap: nowrap !important;
  }
  .brand{
    margin-right: auto !important;  /* Logo drückt alles nach rechts */
    flex: 0 0 auto !important;
  }
  .header__actions{
    margin-left: auto !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
  }
  .nav__cta, .burger{
    flex: 0 0 auto;
  }
}

/* === Über uns: Text besser lesbar (nur Ergänzungen) === */
.aboutProse{
  display:grid;
  gap:10px;
  margin-top:10px;
}
.aboutProse p{
  margin:0;
  line-height:1.75;
}

/* === Über uns: Gruppenbild im gleichen Look wie die Team-Cards === */
.groupPhoto{
  margin:0;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--border);
  background:#fff;
  box-shadow:0 10px 22px rgba(2,8,23,0.04);
}
.groupPhoto img{
  width:100%;
  height:260px;
  object-fit:cover;
  display:block;
}
.groupPhoto figcaption{
  padding:10px 12px;
  font-weight:900;
}
/* in deinem aboutPhotos-Grid (2 Spalten) über beide Spalten */
.groupPhoto--span2{ grid-column: 1 / -1; }

@media (max-width: 720px){
  .groupPhoto img{ height:220px; }
}


.photo figcaption{
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.photo__name{
  font-weight:900;
  font-size:16px;
  letter-spacing:0.01em;
  color:var(--text);
}

.photo__role{
  font-size:13px;
  font-weight:600;
  color:var(--muted);
  text-transform:none;
  letter-spacing:0.06em;
}


.photo__role{
  position:relative;
  padding-top:6px;
}

.photo__role::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:28px;
  height:2px;
  background:rgba(70,191,242,0.6);
  border-radius:2px;
}


/* === Team-Fotos: Mobile-Layout verbessern === */
@media (max-width: 720px){
  .aboutPhotos{
    grid-template-columns: 1fr;   /* hast du schon, lassen wir explizit drin */
    gap: 14px;
  }

  /* Card bleibt gleich, aber Bild wird "responsive" */
  .photo img{
    width: 100%;
    height: auto;                /* feste Höhe raus */
    aspect-ratio: 4 / 3;         /* schönes Verhältnis auf Mobile */
    object-fit: cover;
    object-position: 50% 20%;    /* Fokus etwas nach oben (Gesichter) */
    display: block;
  }

  .photo figcaption{
    padding: 12px 14px;
  }
}