/* ========== Tokens ========== */
@font-face{
    font-family: "Urbanist";
    src: url("assets/Urbanist.woff2") format("woff2");
    font-weight: 100 900;     /* Variable Font Range */
    font-style: normal;
    font-display: swap;
  }
  
  :root{
    --container: min(92rem, 92vw);
    --space-1:.5rem; --space-2:1rem; --space-3:1.5rem; --space-4:2rem; --space-6:3rem;
    --radius:1.25rem;
  
    /* Fluid Type */
    --step--1: clamp(0.85rem, 0.82rem + 0.15vw, 0.95rem);
    --step-0:  clamp(1.0rem, 0.94rem + 0.28vw, 1.15rem);
    --step-1:  clamp(1.25rem, 1.12rem + 0.68vw, 1.6rem);
    --step-2:  clamp(1.6rem, 1.35rem + 1.2vw, 2.2rem);
    --step-3:  clamp(2.0rem, 1.55rem + 1.9vw, 3rem);
    --step-4:  clamp(2.6rem, 1.9rem + 3.2vw, 3.8rem);
  
    color-scheme: light;
    --bg:#f2f2f2; --ink:#2c2c2c; --ink-dim:#666666;
    --brand:#3ea6ff; --brand-ink:#081018;
  
    /* Light cards */
    --card:#ffffff; --card-ink:#0b0d10; --card-ink-dim:#5b6572; --card-border:#e6ebf2; --card-bg-soft:#f7f9fc;
  
    /* Karten & Footer gleiche Höhe */
    --card-min-h: 560px;     /* Gesamt-Mindesthöhe */
    --foot-min-h: 200px;     /* Footer-Mindesthöhe */
  
    /* Avatar-Größe */
    --avatar-s: 180px;
  
    /* Ticker (dynamic) */
    --ticker-row-height:58px;
  
    /* Header Elemente - gleiche Höhe */
    --header-element-height: 48px;
  
    --shadow-1:0 8px 24px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.06);
  }
  
  *{box-sizing:border-box}
  html{font-size:16px}
  body{
    margin:0; font-family: "Urbanist", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Noto Sans", Arial, "Apple Color Emoji", "Segoe UI Emoji";
    line-height:1.5; color:var(--ink); background:var(--bg);
  }
  
  /* Utilities */
  .container{width:var(--container); margin-inline:auto; padding-inline:var(--space-2)}
  .section{padding-block:clamp(2.5rem,2vw + 2rem,5rem)}
  .section__header{margin-bottom:var(--space-3)}
  .section__title{font-size:var(--step-2); margin:0}
  .section__kicker{margin:.25rem 0 0; color:var(--ink-dim); font-size:var(--step-0)}
  .flow > * + *{margin-top:var(--space-2)}
  
  .btn{
    display:inline-flex; align-items:center; justify-content:center;
    padding:.6rem 1rem; border-radius:0; text-decoration:none; font-weight:600; font-size:var(--step-0);
    border:1px solid transparent; height:var(--header-element-height);
  }
  .btn--primary{background:#000000; color:#ffffff; box-shadow:var(--shadow-1); transition:background-color 0.2s ease}
  .btn--primary:hover{background:#333333}
  .btn--primary:focus-visible{outline:2px solid currentColor; outline-offset:2px}
  
  /* ========== Hero ========== */
  .hero{position:relative; height:100svh; display:grid; grid-template-rows:auto 1fr; overflow:clip}
  .hero__bar{position:relative; z-index:3; display:flex; align-items:center; justify-content:space-between; padding-block:var(--space-4)}
  .hero__logo{display:flex; align-items:center; height:var(--header-element-height)}
  .hero__logo img{display:block; height:var(--header-element-height); width:auto}
  
  /* Responsive Anpassungen für Mobile */
  @media (max-width:768px){
    :root{--header-element-height: 40px}
    .btn{padding:.5rem .8rem; font-size:var(--step--1)}
  }
  
  .hero__ticker{position:absolute; inset:0; z-index:1; display:grid; align-content:stretch; gap:.4rem; opacity:0.15; pointer-events:none; background:#F2F2F2}
  .ticker-row{position:relative; height:var(--ticker-row-height); display:flex; align-items:center; overflow:hidden; white-space:nowrap; line-height:1; mask-image:linear-gradient(to right, transparent, #000 10%, #000 90%, transparent)}
  
  /* Hero Fade Overlays - separate für individuelle Anpassung */
  .hero__fade-top{
    position:absolute; top:0; left:0; right:0; height:240px; z-index:2;
    background:linear-gradient(to bottom, #F2F2F2 0%, rgba(242,242,242,0.8) 30%, transparent 100%);
    pointer-events:none;
  }
  .hero__fade-left{
    position:absolute; top:0; bottom:0; left:0; width:80px; z-index:2;
    background:linear-gradient(to right, #F2F2F2 0%, rgba(242,242,242,0.6) 50%, transparent 100%);
    pointer-events:none;
  }
  .hero__fade-right{
    position:absolute; top:0; bottom:0; right:0; width:80px; z-index:2;
    background:linear-gradient(to left, #F2F2F2 0%, rgba(242,242,242,0.6) 50%, transparent 100%);
    pointer-events:none;
  }
  .ticker-line{display:inline-block; will-change:transform}
  .ticker-line--clone{display:none}
  .ticker-word{display:inline-block; font-weight:400; letter-spacing:.02em; font-size:clamp(1.1rem,.7rem + 2.2vw,3rem); margin-inline:1rem; color:#666666}
  .ticker-probe{position:absolute; left:-9999px}
  
  /* Modifikatoren für einzelne Wörter */
  .ticker-word.is-bold{ font-weight: 900; }
  .ticker-word.is-caps{ text-transform: uppercase; letter-spacing: .05em; }
  
  .hero__fg{position:relative; z-index:2; display:grid; place-items:end center; padding:0; height:100%; margin:0}
  .hero__fg picture{display:block; margin:0; padding:0; line-height:0}
  .hero__image{width:min(1100px,95vw); height:auto; max-height:100%; object-fit:cover; object-position:center; display:block; margin:0; padding:0}
  
  /* ========== Intro ========== */
  .intro__grid{
    display:grid; grid-template-columns:1fr 1fr; gap:var(--space-6);
    align-items:center;
  }
  .intro__text p{font-size:var(--step-0); color:var(--ink)}
  .intro__image{
    display:flex; justify-content:center; align-items:center;
  }
  .intro__image img{
    width:100%; max-width:500px; height:auto;
  }

  /* Responsive Intro */
  @media (max-width:768px){
    .intro__grid{grid-template-columns:1fr; gap:var(--space-4)}
    .intro__image{order:1}
  }

  /* ========== Gallery ========== */
  .gallery__grid{
    columns:3; column-gap:var(--space-3); column-fill:balance;
  }
  .gallery__item{
    position:relative; overflow:hidden;
    background:var(--card); box-shadow:var(--shadow-1);
    break-inside:avoid; margin-bottom:var(--space-3);
    display:inline-block; width:100%;
  }
  .gallery__item img{
    width:100%; height:auto; display:block; object-fit:cover;
  }

  /* Gallery Item Varianten - verschiedene Höhen für Collage-Effekt */
  .gallery__item--wide img{aspect-ratio:16/9}
  .gallery__item--tall img{aspect-ratio:3/4}
  .gallery__item:not(.gallery__item--wide):not(.gallery__item--tall) img{aspect-ratio:4/3}

  /* Responsive Gallery */
  @media (max-width:1200px){
    .gallery__grid{columns:2; column-gap:var(--space-2)}
  }
  @media (max-width:768px){
    .gallery__grid{columns:2; column-gap:var(--space-2)}
    .gallery__item{margin-bottom:var(--space-2)}
  }
  @media (max-width:480px){
    .gallery__grid{columns:1; column-gap:0}
    .gallery__item{margin-bottom:var(--space-2)}
  }
  
  /* ========== Team Grid (mit Sicherheitsabstand für Overhang) ========== */
  .team__grid{
    display:grid; grid-template-columns:repeat(3,1fr);
    column-gap:var(--space-3); row-gap:calc(var(--space-3) + var(--avatar-s) * 0.18);
    align-items:stretch;
  }
  .team__grid--safe{ padding-top: calc(var(--avatar-s) * 0.46); } /* Abstand zum Section-Heading */
  @media (max-width:1000px){ .team__grid{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:640px){ .team__grid{grid-template-columns:1fr} }
  
  /* ========== Card A1 ========== */
  .cardA{
    position:relative; overflow:visible;
    background:var(--card); color:var(--card-ink);
    border:1px solid var(--card-border); border-radius:1rem; box-shadow:var(--shadow-1);
  
    /* Platz oben für Avatar: kein Heading-Overlap */
    padding:calc(var(--avatar-s) * 0.64 + 1.15rem) 1.25rem 1.15rem;
  
    display:grid; grid-template-rows:auto 1fr auto; gap:1rem;
    min-height:var(--card-min-h);
  }
  
  /* Avatar – reduzierter Overhang */
  .cardA__avatar{
    position:absolute; left:50%; top:0; transform:translate(-50%, -28%);
    width:var(--avatar-s); height:var(--avatar-s);
    border-radius:999px; background:#fff; display:grid; place-items:center;
    box-shadow:0 10px 30px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.08);
    border:1px solid var(--card-border); z-index:2;
  }
  .cardA__avatar img{
    width:calc(var(--avatar-s) - 22px); height:calc(var(--avatar-s) - 22px);
    border-radius:999px; object-fit:cover; display:block;
  }
  
  /* Head */
  .cardA__head{text-align:center}
  .cardA__name{margin:.2rem 0 .1rem; font-size:clamp(1.2rem,1rem + 1vw,1.55rem); line-height:1.2}
  .cardA__firm{margin:0; color:var(--card-ink-dim); font-size:var(--step-0)}
  
/* Body */
.cardA__body p{
  margin:0; color:var(--card-ink-dim); font-size:var(--step-0); line-height:1.65;
}
  
  /* Footer – zentriert, gleich hohe Box (Locked Grid) */
  .cardA__foot{
    display:grid;
    grid-template-areas: "logo" "contacts";
    justify-items:center;
    gap:.75rem;
    padding-top:.9rem;
    border-top:1px solid var(--card-border);
    min-height: var(--foot-min-h, 200px);
  }
  .cardA__logo{
    grid-area:logo; height:150px; width:90%;
    display:flex; align-items:center; justify-content:center;
  }
  .cardA__logo img{
    height:100px; width:auto; max-width:100%;
    display:block; object-fit:contain; filter:saturate(.95);
  }
  .cardA__contacts{
    grid-area:contacts;
    display:grid; grid-template-columns:1fr; grid-auto-rows:min-content;
    gap:.5rem; width:min(90%, 360px); justify-items:center;
  }
  .btn-ct{
    width:100%; justify-content:center; white-space:nowrap;
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.55rem .8rem; border-radius:.7rem; font-weight:700; text-decoration:none;
    border:1px solid var(--card-border); color:var(--card-ink); background:#fff;
    min-height:44px;
  }
  .btn-ct svg{width:18px; height:18px; fill:currentColor; flex:0 0 auto}
  .btn-ct:hover{background:#eef3fb}
  .btn-ct:focus-visible{outline:3px solid color-mix(in srgb, var(--brand), #fff 20%); outline-offset:2px; box-shadow:0 0 0 4px rgba(62,166,255,.15)}
  
  /* Responsive Tweaks */
  @media (max-width:900px){
    :root{ --avatar-s: 170px; }
  }
  @media (max-width:720px){
    :root{ --avatar-s: 160px; }
    .cardA{padding:calc(var(--avatar-s) * 0.68 + 1rem) 1rem 1rem}
    .btn-ct{width:100%; justify-content:center}
  }
  
  /* ========== Footer ========== */
  .footer{
    background:var(--card-bg-soft); border-top:1px solid var(--card-border);
    padding-block:var(--space-6); color:var(--card-ink-dim); font-size:var(--step-0);
  }
  .footer__content{
    width:80vw; max-width:1200px; margin:0 auto;
    display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4);
    margin-bottom:var(--space-4); padding-bottom:var(--space-4);
    border-bottom:1px solid var(--card-border);
  }
  .footer__info h3{
    margin:0 0 var(--space-2); color:var(--card-ink); font-size:var(--step-1);
  }
  .footer__info p{
    margin:0 0 var(--space-2); line-height:1.6;
  }
  .footer__info a{
    color:#134FAA; text-decoration:none; font-weight:600;
  }
  .footer__info a:hover{text-decoration:underline; color:#0d3a7a}
  .footer__map{
    display:flex; justify-content:center; align-items:center;
  }
  .footer__map iframe{
    width:100%; max-width:400px; height:300px;
    box-shadow:var(--shadow-1);
  }
  .footer__bottom{
    display:flex; justify-content:space-between; align-items:center;
    flex-wrap:wrap; gap:var(--space-2);
  }
  .footer__links{
    display:flex; gap:var(--space-3);
  }
  .footer__links a{
    color:inherit; text-decoration:none; font-size:var(--step--1);
  }
  .footer__links a:hover{text-decoration:underline}

  /* Responsive Footer */
  @media (max-width:768px){
    .footer__content{width:90vw; grid-template-columns:1fr; gap:var(--space-4)}
    .footer__map{order:1}
    .footer__bottom{flex-direction:column; text-align:center; gap:var(--space-2)}
  }

  /* ========== Page Header ========== */
  .page-header{
    background:var(--card); border-bottom:1px solid var(--card-border);
    padding:var(--space-4) 0;
  }
  .page-header__content{
    display:flex; align-items:center; justify-content:space-between;
  }
  .page-header__logo{
    display:flex; align-items:center; height:var(--header-element-height);
  }
  .page-header__logo img{
    display:block; height:var(--header-element-height); width:auto;
  }

  /* ========== Impressum ========== */
  .impressum__content{
    max-width:800px; margin:0 auto;
  }
  .impressum__section{
    margin-bottom:var(--space-6); padding-bottom:var(--space-4); border-bottom:1px solid var(--card-border);
  }
  .impressum__section:last-child{
    border-bottom:none; margin-bottom:0;
  }
  .impressum__section h2{
    font-size:var(--step-1); margin:0 0 var(--space-3); color:var(--ink);
  }
  .impressum__section h3{
    font-size:var(--step-0); margin:0 0 var(--space-2); color:var(--ink); font-weight:600;
  }
  .impressum__company{
    margin-bottom:var(--space-4);
  }
  .impressum__company:last-child{
    margin-bottom:0;
  }
  .impressum__section address{
    font-style:normal; line-height:1.6; color:var(--ink-dim);
  }
  .impressum__section a{
    color:var(--brand); text-decoration:none;
  }
  .impressum__section a:hover{
    text-decoration:underline;
  }
  .impressum__section ul{
    margin:0; padding-left:var(--space-3); color:var(--ink-dim);
  }
  .impressum__section li{
    margin-bottom:var(--space-1);
  }
  .impressum__section p{
    margin:0 0 var(--space-2); color:var(--ink-dim); line-height:1.6;
  }
  .impressum__section p:last-child{
    margin-bottom:0;
  }

  /* ========== DSGVO-konforme Karte ========== */
  .map-placeholder{
    width:100%; max-width:400px; height:300px;
    background:var(--card-bg-soft); border:1px solid var(--card-border);
    display:flex; align-items:center; justify-content:center;
    border-radius:var(--radius);
  }
  .map-placeholder__content{
    text-align:center; padding:var(--space-4);
  }
  .map-placeholder__content h3{
    margin:0 0 var(--space-2); color:var(--ink); font-size:var(--step-1);
  }
  .map-placeholder__content p{
    margin:0 0 var(--space-3); color:var(--ink-dim); font-size:var(--step-0); line-height:1.5;
  }
  .map-placeholder__content a{
    color:#134FAA; text-decoration:none; font-weight:600;
  }
  .map-placeholder__content a:hover{
    text-decoration:underline; color:#0d3a7a;
  }
  .map-container{
    width:100%; max-width:400px; height:300px;
  }
  .map-container iframe{
    width:100%; height:100%; border-radius:var(--radius);
  }

  /* ========== Fehlerseiten ========== */
  .error__content{
    max-width:800px; margin:0 auto; text-align:center;
  }
  .error__message{
    margin-bottom:var(--space-6);
  }
  .error__message p{
    margin:0 0 var(--space-2); color:var(--ink-dim); line-height:1.6;
  }
  .error__message ul{
    margin:var(--space-2) 0; padding-left:var(--space-3); color:var(--ink-dim);
    text-align:left; max-width:400px; margin-left:auto; margin-right:auto;
  }
  .error__message li{
    margin-bottom:var(--space-1);
  }
  .error__actions{
    display:flex; flex-wrap:wrap; gap:var(--space-2);
    justify-content:center; margin-bottom:var(--space-6);
  }
  .error__actions .btn{
    min-width:140px;
  }
  .error__help{
    background:var(--card-bg-soft); padding:var(--space-4);
    border-radius:var(--radius); border:1px solid var(--card-border);
    text-align:left; max-width:500px; margin:0 auto;
  }
  .error__help h2{
    margin:0 0 var(--space-2); color:var(--ink); font-size:var(--step-1);
  }
  .error__help p{
    margin:0 0 var(--space-2); color:var(--ink-dim); line-height:1.6;
  }
  .error__help address{
    font-style:normal; margin:var(--space-2) 0; color:var(--ink-dim);
  }
  .error__help a{
    color:var(--brand); text-decoration:none;
  }
  .error__help a:hover{
    text-decoration:underline;
  }
  .error__help small{
    color:var(--ink-dim); font-size:var(--step--1);
  }