/* Help Hanna – gemeinsames CSS für alle Seiten */
  [hidden] { display: none !important; }
  img { max-width: 100%; height: auto; } /* width/height-Attribute nur fürs Seitenverhältnis, nie als feste Höhe */
  :root {
    --sky: linear-gradient(180deg,
      #005A95 0%, #005E98 10%, #00659E 20%, #0270A8 30%, #127AB2 35%, #3083B8 40%,
      #5294C4 50%, #70A5CE 60%, #88B5D8 70%, #A5C4DC 80%, #B6CCDA 90%, #C4D1D9 100%);
    --yellow: #FBFF7A;
    --navy: #005A95;
    --ink: #003E66;
    --text-w: 91.146vw;
    --text-h: 31.979vw;
    --overlap: 7.177vw;
    --person-ratio: 0.9273;
    --crop: 0.025;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; background: #fff; }
  html { scroll-behavior: smooth; }
  :root {
    --nav-inset: clamp(12px, 1.6vw, 28px);
    --nav-h: clamp(52px, 4vw, 66px);
    --nav-space: calc(var(--nav-inset) * 2 + var(--nav-h));
  }
  section[id], header[id] { scroll-margin-top: var(--nav-space); }
  body { font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; -webkit-font-smoothing: antialiased; }

  /* ================= Header ================= */
  .hero {
    position: relative; overflow: hidden; background: var(--sky);
    --top: calc(var(--nav-space) + max(1.2vw, 8px));
    /* Hanna höchstens --frac der Bildschirmbreite (schmale Screens: viel Luft links/rechts),
       und nie höher als der Platz unter dem Schriftblock (+ Überlappung) */
    --frac: 0.6;
    --pw-fit: min(var(--frac) * 100vw, 100vw - 64px,
              (100svh - var(--top) - var(--text-h) + var(--overlap)) / (1 - var(--crop)) * var(--person-ratio));
    --pw: var(--pw-fit);
    --ph: calc(var(--pw) / var(--person-ratio));
    padding-top: var(--top);
  }
  .hero img { display: block; user-select: none; }
  .wm { width: var(--text-w); margin: 0 auto; position: relative; }
  .wm--hanna { margin-bottom: 1.458vw; }
  .person {
    width: var(--pw); position: relative;
    margin: calc(-1 * var(--overlap)) auto calc(-1 * var(--crop) * var(--ph));
  }

  /* Sticker-Buttons links/rechts von Hanna, mittig im Raum unter SCHOTTE – nur breite Querformate */
  .cta {
    --gap: 2.6vw;
    position: absolute;
    top: calc(var(--top) + var(--text-h) + (var(--ph) * (1 - var(--crop)) - var(--overlap)) / 2);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: clamp(18px, 1.3vw, 26px); font-weight: 800; letter-spacing: -0.01em; line-height: 1;
    padding: 0.95em 2.1em; border-radius: 999px; text-decoration: none; white-space: nowrap;
    background: var(--yellow); color: var(--ink); border: 2.5px solid var(--ink); box-shadow: 5px 5px 0 var(--ink);
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .cta--left  { right: calc(50% + var(--pw) / 2 + var(--gap)); transform: translateY(-50%) rotate(-4deg); }
  .cta--right { left:  calc(50% + var(--pw) / 2 + var(--gap)); transform: translateY(-50%) rotate(3deg); }
  .cta:hover { box-shadow: 8px 8px 0 var(--ink); }
  .cta--left:hover  { transform: translateY(calc(-50% - 3px)) rotate(-4deg); }
  .cta--right:hover { transform: translateY(calc(-50% - 3px)) rotate(3deg); }
  /* Tablet & halbe Fenster: Größe wächst mit der Breite (768px ≈ 16px Schrift), passt immer in den Rand */
  @media (max-width: 1179px) {
    .cta { --gap: 1.6vw; font-size: clamp(13px, 2.1vw, 18px); padding: 0.85em 1.15em; border-width: 2px; box-shadow: 4px 4px 0 var(--ink); }
    .cta:hover { box-shadow: 6px 6px 0 var(--ink); }
  }
  /* Handy: kein Platz neben Hanna */
  @media (max-width: 599px) {
    .cta { display: none; }
  }

  /* ================= Videos ================= */
  /* Hintergrund per URL: ?s=weiss (Standard) | hellblau | dunkel */
  .social {
    background: #fff; color: var(--ink);
    padding: clamp(56px, 7vw, 130px) 0 clamp(64px, 8vw, 150px);
  }
  [data-s="hellblau"] .social { background: #E4EEF6; }
  [data-s="dunkel"] .social { background: var(--ink); color: #fff; }
  .social__title {
    margin: 0 auto clamp(32px, 4.5vw, 80px); padding: 0 20px; text-align: center;
    font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.95;
    font-size: clamp(40px, 6.2vw, 118px);
  }
  .social__title span { display: block; }
  /* Gelb ist auf hellem Grund unlesbar -> Textmarker-Balken mit dunkelblauer Schrift */
  .social__title .accent {
    display: table; margin: 0.08em auto 0; padding: 0.02em 0.14em 0;
    background: var(--yellow); color: var(--ink); transform: rotate(-1.5deg);
  }
  [data-s="dunkel"] .social__title .accent { display: block; background: none; color: var(--yellow); transform: none; padding: 0; margin: 0; }
  [data-s="weiss"] .reel__video, [data-s="hellblau"] .reel__video { box-shadow: 0 18px 40px rgb(0 62 102 / 14%); }

  .reel-grid {
    list-style: none; margin: 0 auto; padding: 0 4.4vw; max-width: 1560px;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.4vw;
  }
  .reel { display: flex; flex-direction: column; }
  .reel__video {
    position: relative; aspect-ratio: 9 / 16; border-radius: 16px 16px 0 0; overflow: hidden;
    background: linear-gradient(180deg, #3083B8 0%, #88B5D8 60%, #C4D1D9 100%);
    display: grid; place-items: center;
  }
  .reel__video::after {
    content: attr(data-label); position: absolute; left: 0; right: 0; bottom: 16px; text-align: center;
    font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgb(255 255 255 / 75%);
  }
  .play {
    width: clamp(52px, 4.4vw, 76px); aspect-ratio: 1; border-radius: 50%;
    background: rgb(255 255 255 / 92%); box-shadow: 0 10px 30px rgb(0 40 80 / 25%);
    display: grid; place-items: center;
  }
  .play::before {
    content: ""; margin-left: 12%; width: 0; height: 0;
    border-left: calc(clamp(52px, 4.4vw, 76px) * .3) solid var(--ink);
    border-top: calc(clamp(52px, 4.4vw, 76px) * .19) solid transparent;
    border-bottom: calc(clamp(52px, 4.4vw, 76px) * .19) solid transparent;
  }
  .reel__label {
    background: var(--yellow); color: var(--ink); text-align: center;
    font-weight: 800; font-size: clamp(16px, 1.25vw, 22px); padding: 0.85em 0.5em;
  }

  /* Tablet: 2 Spalten */
  @media (max-width: 1023px) {
    .reel-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 0 6vw; max-width: 760px; }
  }
  /* Handy: 1 Video, Rest hinter „Alle Videos anzeigen“ (dann untereinander) */
  .more { display: none; }
  @media (max-width: 599px) {
    .reel-grid { grid-template-columns: 1fr; gap: 24px; padding: 0 24px; max-width: 388px; }
    .reel-grid:not(.is-open) .reel:nth-child(n+2) { display: none; }
    .more {
      display: flex; justify-content: center; margin-top: 30px;
    }
    .more button {
      font: 800 15px/1 "Inter", -apple-system, sans-serif; letter-spacing: -0.01em; cursor: pointer;
      padding: 0.95em 1.6em; border-radius: 999px;
      background: var(--yellow); color: var(--ink); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
    }
    .more button:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
    .reel-grid.is-open + .more { display: none; }
  }

  /* ================= Kontakt (nach Referenz „Get in touch“, ohne Leiste und Gesicht) ================= */
  .contact { position: relative; overflow: hidden; background: var(--sky); padding-top: max(2.4vw, 16px); }
  .contact__title {
    margin: 0; text-align: center; color: var(--yellow);
    font-weight: 900; text-transform: uppercase; line-height: 0.8; letter-spacing: -0.035em;
    font-size: 18.8vw; white-space: nowrap; /* "KONTAKT" = 91vw breit wie HANNA */
  }
  /* Zwei Bereiche: links Foto von Pius, rechts Text (weiße Karte) */
  .contact { padding-bottom: clamp(56px, 7vw, 130px); }
  .contact-grid {
    margin: clamp(28px, 3.5vw, 64px) auto 0; width: min(1100px, 100% - 40px);
    display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(16px, 2vw, 28px); align-items: stretch;
  }
  .contact-card {
    background: #fff; color: var(--ink); border-radius: 24px; padding: clamp(24px, 3.6vw, 56px);
    display: flex; flex-direction: column; justify-content: center;
    box-shadow: 0 24px 60px rgb(0 40 80 / 18%);
  }
  .contact-photo {
    aspect-ratio: 4 / 5; border-radius: 24px; background: linear-gradient(180deg, #E4EEF6, #C4D1D9);
    display: grid; place-items: center; align-content: center; gap: 10px; color: rgb(0 62 102 / 55%);
    font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    box-shadow: 0 24px 60px rgb(0 40 80 / 18%);
  }
  .contact-photo { overflow: hidden; }
  .contact-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
  .contact-card__eyebrow { margin: 0 0 10px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--navy); }
  .contact-card__name { margin: 0; font-size: clamp(30px, 3.4vw, 54px); font-weight: 900; letter-spacing: -0.03em; line-height: 1; }
  .contact-card__role { margin: 12px 0 0; font-size: clamp(16px, 1.3vw, 20px); font-weight: 500; line-height: 1.45; color: rgb(0 62 102 / 80%); }
  .contact-card__mail {
    align-self: flex-start; margin-top: clamp(20px, 2.2vw, 32px); color: var(--navy); text-decoration: none;
    font-size: clamp(18px, 1.6vw, 26px); font-weight: 800; letter-spacing: -0.01em;
  }
  .contact-card__mail:hover { color: var(--ink); }
  .btn-square {
    display: inline-flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer;
    min-height: 52px; padding: 0 1.6em; font: 800 clamp(16px, 1.15vw, 19px)/1 "Inter", -apple-system, sans-serif;
    color: var(--ink); background: var(--yellow); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
    transition: transform .12s ease, box-shadow .12s ease;
  }
  .btn-square:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
  .btn-square:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
  .contact-card .btn-square { align-self: flex-start; margin-top: 22px; }
  /* Handy: nur Foto, direkt darunter Name + Mail – ein zusammenhängender Block */
  @media (max-width: 599px) {
    .contact-grid { grid-template-columns: 1fr; gap: 0; border-radius: 24px; box-shadow: 0 24px 60px rgb(0 40 80 / 18%); }
    .contact-photo { border-radius: 24px 24px 0 0; box-shadow: none; }
    .contact-card { border-radius: 0 0 24px 24px; box-shadow: none; text-align: center; padding: 22px 20px 26px; }
    .contact-card__eyebrow, .contact-card__role { display: none; }
    .contact-card__mail { align-self: center; margin-top: 12px; }
    .contact-card .btn-square { align-self: stretch; margin-top: 18px; }
  }

  /* ================= Über Hanna (Bio-Panel) ================= */
  .about { background: #E4EEF6; color: var(--ink); padding: clamp(40px, 5vw, 80px) 0; }
  .about__inner { width: min(1200px, 100% - 40px); margin: 0 auto; }
  .about__card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 72px); align-items: start; }
  .about__head .card__title { margin-bottom: clamp(10px, 1.2vw, 16px); }
  .about__name { margin: 0; font-size: clamp(30px, 3.4vw, 52px); font-weight: 900; letter-spacing: -0.03em; line-height: 1; }
  .about__handle {
    display: inline-block; margin-top: clamp(12px, 1.2vw, 18px); padding: .12em .4em; background: var(--yellow); color: var(--ink);
    text-decoration: none; font-weight: 800; font-size: clamp(17px, 1.5vw, 24px); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
    transform: rotate(-1.5deg); transition: transform .15s ease;
  }
  .about__handle:hover { transform: rotate(-1.5deg) translate(-1px, -1px); }
  .about__meta { margin: clamp(12px, 1.2vw, 18px) 0 0; font-size: clamp(13px, 1vw, 15px); font-weight: 700; color: rgb(0 62 102 / 60%); letter-spacing: .04em; }
  .about__text p { margin: 0 0 .9em; font-size: clamp(17px, 1.35vw, 21px); line-height: 1.55; }
  .about__text p:last-child { margin-bottom: 0; }
  @media (max-width: 767px) {
    .about__card { grid-template-columns: 1fr; gap: 22px; }
    .about__text p { font-size: 16px; line-height: 1.55; }
  }

  /* ================= Zahlen (Reichweite + Zielgruppe, Instagram) ================= */
  .stats { background: #E4EEF6; color: var(--ink); padding: clamp(56px, 7vw, 120px) 0 clamp(64px, 7vw, 120px); }
  .stats__inner { width: min(1200px, 100% - 40px); margin: 0 auto; }
  .stats__label {
    margin: 0 0 clamp(14px, 1.4vw, 22px); font-size: clamp(22px, 2.2vw, 36px); font-weight: 900; letter-spacing: -0.01em; text-transform: uppercase;
  }
  .stats__label span { background: var(--yellow); padding: 0 .12em; }
  .stats__label + .card, .stats__label + .aud { margin-bottom: clamp(40px, 5vw, 80px); }
  .card { background: #fff; border-radius: 20px; padding: clamp(22px, 2.6vw, 40px); box-shadow: 0 18px 40px rgb(0 62 102 / 10%); }
  .card__title { margin: 0 0 clamp(18px, 2vw, 28px); font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--navy); }

  .reach { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(20px, 3vw, 56px); }
  .reach__item { display: flex; flex-direction: column; gap: 6px; }
  .reach__num { font-size: clamp(52px, 6.4vw, 104px); font-weight: 900; letter-spacing: -0.04em; line-height: .9; }
  .reach__txt { font-size: clamp(15px, 1.2vw, 19px); font-weight: 700; color: rgb(0 62 102 / 75%); }
  .reach__divider { width: 2px; align-self: stretch; background: #D6E3EE; }
  .reach__ig {
    margin-left: auto; color: var(--navy); text-decoration: none; font-weight: 900; letter-spacing: -0.03em; line-height: 1;
    font-size: clamp(30px, 3.6vw, 60px); border-bottom: max(3px, .25vw) solid currentColor; padding-bottom: .06em;
  }
  .reach__ig:hover { color: var(--ink); }

  .aud { display: grid; grid-template-columns: 1fr 1.55fr 1.3fr; gap: clamp(16px, 1.8vw, 24px); }
  .gender__row { display: flex; align-items: baseline; gap: 10px; }
  .gender__num { font-size: clamp(44px, 4.6vw, 76px); font-weight: 900; letter-spacing: -0.04em; line-height: 1; }
  .gender__num--f { color: #3083B8; }
  .gender__txt { font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
  .gender__bar { display: flex; height: 14px; margin-top: 22px; border-radius: 7px; overflow: hidden; }
  .gender__bar i { display: block; }

  .age { display: grid; grid-template-columns: repeat(7, 1fr); gap: clamp(6px, .9vw, 14px); align-items: end; }
  .age__col { display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .age__val { font-size: clamp(11px, .95vw, 14px); font-weight: 800; }
  .age__track { width: 100%; max-width: 40px; height: clamp(130px, 13vw, 190px); background: #E4EEF6; border-radius: 20px; display: flex; align-items: flex-end; overflow: hidden; }
  .age__fill { width: 100%; height: calc(var(--v) / 48.6 * 100%); min-height: 8px; background: var(--navy); border-radius: 20px; }
  .age__lbl { font-size: clamp(11px, .95vw, 14px); font-weight: 600; color: rgb(0 62 102 / 75%); white-space: nowrap; }

  .land { display: flex; flex-direction: column; gap: 14px; }
  .land__head { display: flex; justify-content: space-between; font-size: 15px; font-weight: 700; margin-bottom: 6px; }
  .land__head b { font-weight: 800; }
  .land__track { height: 10px; background: #E4EEF6; border-radius: 5px; overflow: hidden; }
  .land__fill { height: 100%; width: calc(var(--v) * 1%); min-width: 4px; background: var(--navy); border-radius: 5px; }

  .stats__note { margin: calc(-1 * clamp(24px, 3.4vw, 60px)) 0 0; font-size: clamp(12px, .95vw, 14px); font-weight: 600; color: rgb(0 62 102 / 60%); }
  .stats__cta {
    display: flex; align-items: center; justify-content: center; width: 100%; margin-top: clamp(32px, 4vw, 56px);
    min-height: clamp(60px, 5vw, 84px); text-decoration: none; text-transform: uppercase; letter-spacing: .02em;
    font-weight: 900; font-size: clamp(18px, 1.6vw, 26px); color: var(--ink); background: var(--yellow);
    border: 2.5px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); transition: transform .15s ease, box-shadow .15s ease;
  }
  .stats__cta:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink); }

  @media (max-width: 1023px) {
    .aud { grid-template-columns: 1fr 1fr; }
    .aud .card--age { grid-column: 1 / -1; order: 3; }
  }
  @media (max-width: 599px) {
    .aud { grid-template-columns: 1fr; }
    .reach__divider { display: none; }
    .reach__ig { margin-left: 0; font-size: 30px; }
  }

  /* ================= Leiste oben (eckig, Kontur + harter Schatten) ================= */
  .nav {
    position: fixed; z-index: 20; top: var(--nav-inset); left: var(--nav-inset); right: var(--nav-inset);
    height: var(--nav-h); display: flex; align-items: center; gap: clamp(10px, 1.2vw, 18px);
    padding: 0 clamp(8px, 1vw, 14px) 0 clamp(16px, 1.8vw, 28px);
    background: #fff; border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
  }
  .nav a { color: var(--ink); text-decoration: none; }
  .nav__home { margin-right: auto; font-weight: 900; font-size: clamp(17px, 1.3vw, 22px); letter-spacing: -0.02em; }
  .nav__contact {
    display: inline-flex; align-items: center; height: calc(var(--nav-h) - 16px); padding: 0 clamp(14px, 1.6vw, 26px);
    background: var(--yellow); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
    font-weight: 800; font-size: clamp(15px, 1.15vw, 19px); transition: transform .12s ease, box-shadow .12s ease;
  }
  .nav__contact:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
  .nav__burger {
    width: calc(var(--nav-h) - 16px); height: calc(var(--nav-h) - 16px); flex: none; cursor: pointer;
    display: grid; place-content: center; gap: 5px; padding: 0; background: #fff; border: 2px solid var(--ink);
  }
  .nav__burger span { display: block; width: 20px; height: 2.5px; background: var(--ink); transition: transform .18s ease, opacity .18s ease; }
  .nav.is-open .nav__burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .nav.is-open .nav__burger span:nth-child(2) { opacity: 0; }
  .nav.is-open .nav__burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
  .nav__menu {
    position: absolute; top: calc(100% + 12px); right: -2px; min-width: 220px; display: none; flex-direction: column;
    background: #fff; border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
  }
  .nav.is-open .nav__menu { display: flex; }
  .nav__menu a { padding: 16px 20px; font-weight: 700; font-size: 16px; border-top: 2px solid var(--ink); }
  .nav__menu a:first-child { border-top: 0; }
  .nav__menu a:hover { background: var(--yellow); }

  .badge { position: fixed; right: 8px; bottom: 8px; z-index: 9; font: 600 12px/1 -apple-system, sans-serif;
           background: rgba(0,0,0,.65); color: #fff; padding: 6px 8px; border-radius: 6px; }
  .shot .badge { display: none; }

/* ================= Footer (kurz, alle Seiten) ================= */
.footer { background: var(--ink); color: #fff; }
.footer__main {
  width: min(1200px, 100% - 40px); margin: 0 auto; padding: clamp(40px, 4vw, 64px) 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 64px;
}
.footer__brand { margin: 0; font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; line-height: .95; font-size: clamp(30px, 2.8vw, 46px); color: var(--yellow); }
.footer__brand small { display: block; margin-top: 10px; font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: rgb(255 255 255 / 70%); }
.footer__links { display: flex; flex-wrap: wrap; gap: 14px 34px; }
.footer__links a { color: #fff; text-decoration: none; font-weight: 800; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }
.footer__links a:hover { color: var(--yellow); }
.footer__bar { background: #002D4A; }
.footer__bar p { width: min(1200px, 100% - 40px); margin: 0 auto; padding: 16px 0; font-size: 13px; color: rgb(255 255 255 / 60%); }

/* ================= Unterseiten: kurzer Header + Inhalt ================= */
.subhead { background: var(--sky); padding: calc(var(--nav-space) + clamp(24px, 3vw, 56px)) 0 clamp(28px, 3vw, 56px); }
.subhead h1 {
  width: min(1200px, 100% - 40px); margin: 0 auto; color: var(--yellow); font-weight: 900; text-transform: uppercase;
  letter-spacing: -0.035em; line-height: .85; font-size: min(calc((100vw - 40px) / 8.2), 150px); /* passt auch „DATENSCHUTZ“ in eine Zeile */
}
.subpage { background: #E4EEF6; color: var(--ink); padding: clamp(40px, 5vw, 90px) 0 clamp(56px, 6vw, 110px); }
.subpage__inner { width: min(1200px, 100% - 40px); margin: 0 auto; }
.legal { max-width: 820px; }
.legal h2 {
  margin: 0 0 18px; padding-bottom: 14px; border-bottom: 2.5px solid var(--ink);
  font-size: clamp(22px, 2.2vw, 34px); font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em;
}
.legal h2:not(:first-child) { margin-top: 44px; }
.legal p { margin: 0; font-size: 18px; line-height: 1.65; color: rgb(0 62 102 / 85%); }
.legal a { color: var(--navy); font-weight: 700; }
.legal .todo { margin-top: 14px; padding: 14px 16px; background: var(--yellow); border: 2px solid var(--ink); font-size: 15px; font-weight: 600; color: var(--ink); }

/* Kontaktformular */
.contact-page { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(16px, 2vw, 28px); align-items: start; }
.form { display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 8px; }
.field span { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); }
.field input, .field textarea, .field select {
  font: 500 17px/1.4 "Inter", -apple-system, sans-serif; color: var(--ink); background: #fff;
  border: 2px solid var(--ink); border-radius: 0; padding: 13px 14px; width: 100%;
}
.field textarea { min-height: 170px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; box-shadow: 4px 4px 0 var(--yellow), 4px 4px 0 2px var(--ink); }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: rgb(0 62 102 / 85%); }
.consent input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--navy); flex: none; }
.consent a { color: var(--navy); font-weight: 700; }
.form .btn-square { width: 100%; min-height: 60px; font-size: 19px; text-transform: uppercase; letter-spacing: .02em; }
.form__hint { margin: 0; font-size: 13px; color: rgb(0 62 102 / 65%); }
.info-card { background: #fff; border-radius: 24px; overflow: hidden; box-shadow: 0 24px 60px rgb(0 40 80 / 14%); }
.info-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 40%; }
.info-card__body { padding: 24px 26px 28px; }
@media (max-width: 899px) {
  .contact-page { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
  .form__row { grid-template-columns: 1fr; }
  .footer__main { flex-direction: column; align-items: flex-start; }
}

/* Echte Videos in den Karten (wie wecreate: eigene MP4, Steuerleiste, erster Frame als Vorschau) */
.reel__video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: transparent; }
.reel__video.has-video { background: #000; }
.reel__video.has-video .play, .reel__video.has-video::after { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-done { display: grid; gap: 14px; justify-items: start; padding: 10px 0; }
.legal p + p { margin-top: 14px; }
.legal h3 { margin: 26px 0 8px; font-size: 18px; font-weight: 800; color: var(--ink); }
.ig-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; color: var(--ink); text-decoration: none; font-weight: 800; font-size: 18px; }
.ig-link svg { width: 24px; height: 24px; flex: none; }
.ig-link:hover { color: var(--navy); }

/* ================= Feinschliff nach Größen-Check ================= */
/* Karten dürfen schmaler werden als ihr Inhalt (sonst schiebt das Alters-Diagramm die Seite bei 320px) */
.aud > .card, .contact-grid > *, .contact-page > * { min-width: 0; }
@media (max-width: 380px) {
  .card { padding: 18px; }
  .age { gap: 4px; }
  .age__val, .age__lbl { font-size: 10px; letter-spacing: -0.02em; }
}
/* Handy quer: Höhe reicht nicht für Schrift + Hanna -> Hanna nach Breite, Header darf länger als der Screen sein */
@media (orientation: landscape) and (max-height: 500px) {
  .hero { --pw: 30vw; }
}
/* Kontaktseite: Mail und Instagram auf einer Linie, vertikal mittig; wird es eng, rutscht Instagram darunter */
.contact-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: clamp(20px, 2.2vw, 32px); }
.contact-links .contact-card__mail, .contact-links .ig-link { margin-top: 0; line-height: 1.2; }

/* ================= Barrierefreiheit & Video-Rahmen ================= */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hero__title { margin: 0; font-size: inherit; }
a:focus-visible, button:focus-visible, video:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--ink); outline-offset: 3px;
}
.nav a:focus-visible, .nav button:focus-visible { outline-offset: 2px; }

/* Video-Karten eckig wie die Leiste: Kontur + harter Schatten, kein weicher Schatten mehr, der ins Gelb verläuft */
.reel { border: 2.5px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); background: var(--ink); }
.reel__video, [data-s="weiss"] .reel__video, [data-s="hellblau"] .reel__video { border-radius: 0; box-shadow: none; }
.reel__label { border-top: 2.5px solid var(--ink); }

/* Kontakt (gewählt: Option 2): Pius + Hanna freigestellt direkt auf dem Verlauf, unten bündig mit dem Abschnitt */
.contact--duo { padding-bottom: 0; }
.contact-grid--v2 { grid-template-columns: 1fr 1fr; align-items: end; width: min(1100px, 100% - 40px); }
.contact-duo img { display: block; width: 100%; height: auto; }
.contact-grid--v2 .contact-card { align-self: center; }
.contact-card__name--v2 { font-size: clamp(26px, 2.5vw, 40px); line-height: 1.08; }
.contact-card__by { margin: 14px 0 0; font-size: clamp(15px, 1.2vw, 18px); font-weight: 700; color: var(--navy); }
@media (max-width: 899px) {
  .contact--duo { padding-bottom: clamp(40px, 8vw, 72px); }
  .contact-grid--v2 { grid-template-columns: 1fr; gap: 0; }
  .contact-duo { width: min(520px, 92%); margin: 0 auto; }
  .contact-grid--v2 .contact-card { border-radius: 0 0 24px 24px; }
}

/* Kontaktseite: Foto Pius + Hanna freigestellt auf dem Seitenverlauf */
.info-card__duo { aspect-ratio: 4 / 3; background: var(--sky); display: flex; justify-content: center; align-items: flex-end; overflow: hidden; }
.info-card .info-card__duo img { width: auto; height: 94%; aspect-ratio: auto; object-fit: contain; }