:root{
  --side:86px;
  --side-m:20px;
  --black:#000;
  --white:#fff;

  /* Startkanten */
  --intro-top-d:132px; /* Desktop: Intro & Smiley */
  --intro-top-m:92px;  /* Mobil:   Intro & Smiley */

  /* Abstände unten zum Footer (Mail) */
  --gap-bottom-d:72px;  /* Desktop */
  --gap-bottom-m:56px;  /* Mobile: vorher 46px, jetzt +10px */

  /* Mobile Smiley (20% kleiner als früher) */
  --smiley-m: min(48vw, 256px);
}

#contact-page *{ box-sizing:border-box; }
#contact-page img{ display:block; max-width:100%; height:auto; }

/* Typo */
#contact-page h1,#contact-page h2,#contact-page h3,#contact-page h4,#contact-page h5,#contact-page h6{
  font-family:"Swear Display",serif; font-weight:400; color:var(--black);
}
#contact-page p,#contact-page .copy,#contact-page li{
  font-family:"Swear Text",serif; font-weight:400; color:var(--black);
}

/* Außenkanten */
#contact-page .wrap{ padding-inline:var(--side); }
@media (max-width:768px){ #contact-page .wrap{ padding-inline:var(--side-m); } }

/* Fullbleed */
#contact-page .fullbleed{
  position:relative; width:100vw;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  overflow:hidden; background:#fff;
}
@supports (width:100dvw){
  #contact-page .fullbleed{ width:100dvw; margin-left:calc(50% - 50dvw); margin-right:calc(50% - 50dvw); }
}

/* Viewport-Höhe nutzen, Footer bleibt unten */
.contact-hero{ background:#fff; color:#000; --header-h:0px; }
.hero-inner{
  position:relative; z-index:2;
  min-height:calc(100svh - var(--header-h));
  display:flex; flex-direction:column;
  padding-top:var(--intro-top-d);
  padding-bottom:var(--gap-bottom-d);
}

/* Smiley rechts, Top = Intro */
.hero-media{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.smiley-bg{
  position:absolute; right:-2px; top:var(--intro-top-d);
  width:min(28vw, 420px);
  aspect-ratio:1/1;
  background-image:var(--smiley), var(--smiley-fallback);
  background-repeat:no-repeat,no-repeat;
  background-size:contain,44%;
  background-position:right center,right center;
  opacity:.98;
}

/* Intro */
#contact-page .intro{
  font-size:clamp(28px, 2.3vw, 42px);
  line-height:1.15; letter-spacing:-.01em;
  margin:0 0 72px 0;
  max-width:22ch;
}

/* Flexibler Spacer: positioniert die Mail „weit unten“, ohne starre margin-top */
.hero-spacer{
  /* Standard (Cross-Browser): dynamisch nach Viewport-Höhe */
  height:clamp(320px, 28vh, 420px);
}

/* Mail */
#contact-page .mail{
  font-size:clamp(40px, 4.4vw, 86px);
  line-height:.95; letter-spacing:-.01em;
  margin:0;
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:break-word;
  hyphens:auto;
}
#contact-page .mail a{ color:var(--black); text-decoration:none; }
#contact-page .mail a:hover{ text-decoration:underline; }

/* ====== BREAKPOINTS ====== */

/* 1081–1919 px */
@media (min-width:1081px) and (max-width:1919px){
  .smiley-bg{ width:min(24vw, 360px); }
  #contact-page .intro{ margin-bottom:64px; }
}

/* Large Desktop (nahe & über 1920 px):
   Tether via VW -> exakt 600px bei 1920px, robust bei Scrollbar/Zoom */
@media (min-width:1880px){
  .hero-spacer{ height:clamp(560px, 31.25vw, 640px); } /* 1920px * 0.3125 = 600px */
}

/* 769–1080 px */
@media (min-width:769px) and (max-width:1080px){
  .smiley-bg{ width:min(26vw, 300px); }
  #contact-page .intro{ margin-bottom:56px; }
}

/* Mobile */
@media (max-width:768px){
  .hero-inner{
    min-height:calc(100svh - var(--header-h));
    padding-top:var(--intro-top-m);
    padding-bottom:var(--gap-bottom-m); /* jetzt 56px */
  }

  /* Smiley: 20% kleiner & exakt auf Höhe des Subtexts */
  .smiley-bg{
    right:-2px; top:var(--intro-top-m);
    width:var(--smiley-m);
  }

  #contact-page .intro{
    margin-bottom:32px; max-width:24ch;
  }

  /* Mail: zusätzliche Tiefe via Spacer (enthält bereits +80px) */
  .hero-spacer{
    height:calc(var(--smiley-m) + 280px);
  }

  #contact-page .mail{
    font-size:clamp(36px, 8vw, 64px);
  }
}

/* Theme-Container neutralisieren */
@supports selector(body:has(main)){
  body:has(main#contact-page) .grid-container,
  body:has(main#contact-page) .container,
  body:has(main#contact-page) .site-content,
  body:has(main#contact-page) .content-area,
  body:has(main#contact-page) .inside-article,
  body:has(main#contact-page) .entry-content{
    max-width:none !important; width:100% !important;
    padding:0 !important; margin:0 !important;
    border:0 !important; box-shadow:none !important; overflow:visible !important;
  }
  body.separate-containers:has(main#contact-page) .site-main > .inside-article{ padding:0 !important; }
  html, body{ overflow-x:hidden !important; scrollbar-gutter:stable both-edges; }
}