/* =========================================================
   Raffaela Schumer – Grundstyles
   Farben & Typografie (Adobe Fonts via Typekit)
   ========================================================= */

:root{
  --col-bg:#213023;
  --col-text:#ffffff;
  --col-accent:#fd9301;
  --underline:#ffffff;

  /* Font-Families – prüfe ggf. Family-Namen aus deinem Typekit */
  --ff-epic: "ivyepic","Ivy Epic",serif;
  --ff-presto: "ivypresto-display","IvyPresto Display",serif;

  /* Typo-Größen gemäß Vorgaben */
  --fz-body: 28px;
  --fz-h1: 48px;
  --fz-h2: 42px;
  --fz-cta: 48px;         /* Teaser-/Split-Link-Größe */
  --fz-footer-claim: 216px;

  /* Chrome/Brand */
  --chrome-pad: clamp(20px, 2.2vw, 20px);
  --logo-min: 36px;
  --logo-max: 42px;
  --brand-min: 24px;
  --brand-max: 42px;
  --brand-gap: 12px;

  /* Burger */
  --burger-w: 40px;
  --burger-h: 2px;
  --burger-gap: 9px;

  /* ===========================
     ARROWS – getrennt je Kontext
     =========================== */

  /* Kopf-Formen (Masken) – für Split-Links */
  --arrow-head-triangle: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'>\
<path d='M0 0 L14 6 L0 12 L0 8 L8 6 L0 4 Z' fill='white'/>\
</svg>");
  --arrow-head-chevron: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'>\
<path d='M0 2 L6 6 L0 10 L2 12 L10 6 L2 0 Z' fill='white'/>\
</svg>");
  --arrow-head-barbed: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'>\
<path d='M0 4 H8 L6 2 H9 L12 6 L9 10 H6 L8 8 H0 Z' fill='white'/>\
</svg>");

  /* Split-Links (Teaser) */
  --arrow-teaser-l: 58px;
  --arrow-teaser-thick: 2px;
  --arrow-teaser-head-w: 16px;
  --arrow-teaser-head-h: 14px;
  --arrow-teaser-va: -0.08em;
  --arrow-teaser-head-mask: var(--arrow-head-triangle);
  --arrow-teaser-color: currentColor;
  --arrow-teaser-gap: 16px;    /* Abstand Text ↔ Pfeil */

  /* Footer-Links (Schaft + Spitze in EINEM ::after) */
  --arrow-footer-l: 38px;      /* Schaft-Länge */
  --arrow-footer-thick: 2px;   /* Schaft-Dicke */
  --arrow-footer-head-w: 10px; /* Breite der Spitze */
  --arrow-footer-head-h: 12px; /* Höhe der Spitze */
  --arrow-footer-va: 0em;      /* vertikale Feinkorrektur beider Teile */
  --arrow-footer-color: currentColor;
  --arrow-footer-gap: .4em;    /* Abstand Text ↔ Pfeil */

  /* Footer-Abstände */
  --footer-lineheight: 1.55em;
  --footer-block-gap-lines: 2;
  --footer-claim-gap-top: clamp(36px, 6vw, 80px);
  --footer-claim-gap-bottom: clamp(36px, 6vw, 80px);
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }
html { scroll-behavior: smooth; }

body{
  margin: 0;
  color: var(--col-text);
  background: var(--col-bg);
  font-family: var(--ff-epic);
  font-weight: 300;
  font-size: var(--fz-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video { max-width: 100%; display: block; }

a{
  color: var(--col-text);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-color: var(--underline);
}

a:focus-visible,
button:focus-visible{
  outline: 2px dashed var(--col-accent);
  outline-offset: 3px;
}

/* Container & Grid */
.wrapper{
  width: min(1400px, 92vw);
  margin-inline: auto;
}

.grid-2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 32px);
}

/* =========================================
   Header – fixed Logo + Burger
   ========================================= */

.site-chrome{
  position: fixed;
  inset: 0 0 auto 0;
  width: 100vw;
  z-index: 120;
  pointer-events: none;
}

.site-chrome__inner{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: var(--chrome-pad);
  width: 100%;
  pointer-events: auto;
}

/* Logo */
.logo{
  position: relative;
  display: inline-block;
  font-size: clamp(var(--logo-min), 8vw, var(--logo-max));
  line-height: 1;
  text-decoration: none;
}
.logo img{ height: 1em; width: auto; display: block; vertical-align: baseline; }
.logo::after{ content:""; position:absolute; inset:-10px -12px -8px -12px; }

/* Burger */
.burger{
  appearance: none; border: none; background: transparent; color: var(--col-text);
  width: var(--burger-w);
  height: calc(var(--burger-gap)*2 + var(--burger-h));
  display: block; position: relative; cursor: pointer; border-radius: 6px;
  margin-right: 2px; transform: translateY(6px);
}
.burger span, .burger::before, .burger::after{
  content: ""; position: absolute; left: 0; width: var(--burger-w); height: var(--burger-h);
  background: currentColor; transition: transform .22s ease, top .22s ease, opacity .18s ease;
}
.burger span{ top: calc(50% - 1px); }
.burger::before{ top: calc(50% - 1px - var(--burger-gap)); }
.burger::after { top: calc(50% - 1px + var(--burger-gap)); }
.burger[aria-expanded="true"] span{ opacity: 0; }
.burger[aria-expanded="true"]::before{ top: calc(50% - 1px); transform: rotate(45deg); }
.burger[aria-expanded="true"]::after { top: calc(50% - 1px); transform: rotate(-45deg); }

/* =========================================
   Brand
   ========================================= */

.brand{
  position: absolute;
  top: var(--chrome-pad);
  left: var(--chrome-pad);
  margin-left: calc(clamp(var(--logo-min), 9vw, var(--logo-max)) + var(--brand-gap));
  font-family: var(--ff-epic);
  font-weight: 300;
  font-size: clamp(var(--brand-min), 8vw, var(--brand-max));
  line-height: 1;
  letter-spacing: 0;
  z-index: 1;
}
.brand > span{ display:block; }

body:has(.menu-overlay[aria-hidden="false"]) .site-chrome .logo::before,
body.menu-open .site-chrome .logo::before{
  content: "Raffaela\A Schumer";
  white-space: pre;
  position: absolute;
  left: calc(100% + var(--brand-gap));
  top: 0;
  font-family: var(--ff-epic);
  font-weight: 300;
  font-size: clamp(var(--brand-min), 8vw, var(--brand-max));
  line-height: 1;
}

/* =========================================
   Overlay-Menü
   ========================================= */
.menu-overlay{
  position: fixed; inset: 0; z-index: 100;
  background: rgba(33,48,35,0.95); backdrop-filter: blur(2px);
  display: none;
}
.menu-overlay[aria-hidden="false"]{ display: block; }

.menu-overlay__inner.wrapper{
  width: 100vw; max-width: none; margin: 0; padding: var(--chrome-pad);
  --brand-offset: calc(clamp(var(--logo-min), 9vw, var(--logo-max)) + var(--brand-gap));
}
.menu-body{
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 4vw, 40px);
  padding-top: clamp(48px, 16vh, 180px);
}
.menu-nav{ margin-left: var(--brand-offset); }
.menu-nav a{
  display: block; font-size: clamp(32px, 8vw, 42px); line-height: 1.1;
  font-weight: 300; text-decoration: none; padding: 4px 0;
}
.menu-nav a:hover, .menu-nav a:focus{
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--underline);
}
.menu-contact a{ display: inline-block; text-decoration: none; }
.menu-contact p{ margin: 0 0 8px 0; }

/* =========================================
   Hero
   ========================================= */
.hero{ position: relative; min-height: 100vh; isolation: isolate; }
.hero video{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; z-index: -1; background: #000;
}
.hero__scrim{ position: absolute; inset: 0; background: linear-gradient(180deg, rgba(33,48,35,0.60) 0%, rgba(33,48,35,0.20) 50%, rgba(33,48,35,0.60) 100%); z-index: 0; }
.hero__content{ position: relative; z-index: 1; padding-block: clamp(80px, 12vh, 160px); }
.hero .grid-2 > *{ align-self: center; }

/* Reduced motion: Video ausblenden, Poster als Background */
@media (prefers-reduced-motion: reduce){
  .hero video{ display:none; }
  .hero{
    background: #000 url('assets/raffaela-schumer-loop.jpg') center/cover no-repeat;
  }
}

/* Typo */
h1, h2{ margin: 0 0 0.35em 0; font-weight: 300; }
.h1{ font-size: var(--fz-h1); letter-spacing: 0.01em; }
.h2{ font-size: var(--fz-h2); letter-spacing: 0.01em; }

/* Inline-Mix: Spektrum Mensch */
.mixline{ line-height: 1; }
.mix-presto{ font-family: var(--ff-presto); font-weight: 100; font-style: italic; }
.mix-epic{   font-family: var(--ff-epic);   font-weight: 300; font-style: normal; }

/* =========================================
   Split-Links (Teaser)
   ========================================= */
.split-link{ display: inline-flex; flex-direction: column; gap: 2px; text-decoration: none; }
.split-link .line-top{
  font-family: var(--ff-epic); font-weight: 300; font-size: var(--fz-cta); line-height: 1.1;
}
.split-link .line-bottom{
  display: inline-flex; align-items: center; gap: var(--arrow-teaser-gap);
  font-family: var(--ff-presto); font-weight: 100; font-style: italic;
  font-size: var(--fz-cta); line-height: 1.1;
  text-decoration: underline; text-decoration-color: var(--underline); text-underline-offset: 6px;
}
/* Arrow (Container: Shaft ::before, Head ::after) */
.split-link .arrow{
  position: relative; width: var(--arrow-teaser-l); height: var(--arrow-teaser-thick);
  display: inline-block; vertical-align: middle; transform: translateY(var(--arrow-teaser-va));
  color: var(--arrow-teaser-color);
}
.split-link .arrow::before{
  content:""; position:absolute; left:0; top:50%;
  width: calc(100% - var(--arrow-teaser-head-w)); height: var(--arrow-teaser-thick);
  transform: translateY(-50%); background: currentColor;
}
/* SPLIT-LINKS – Pfeilspitze per conic-gradient wie im Footer */
.split-link .arrow::after{
  content:"";
  position:absolute; right:0; top:50%;
  width: var(--arrow-teaser-head-w);
  height: var(--arrow-teaser-head-h);
  transform: translateY(-50%);
  background:
    conic-gradient(from 225deg at 50% 50%,
      currentColor 0 90deg,
      transparent 90deg 360deg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
.split-link:hover .line-bottom{ text-decoration-color: var(--col-accent); }
.split-link:hover .arrow{ color: var(--col-accent); }

/* =========================================
   Teaser
   ========================================= */
.teaser{ position: relative; overflow: hidden; aspect-ratio: 16/9; }
.teaser img{ width: 100%; height: 100%; object-fit: cover; object-position: center; filter: brightness(0.92); }
.teaser__label{ position: absolute; left: clamp(16px,3vw,48px); bottom: clamp(18px,3.2vw,56px); }

/* =========================================
   Sections
   ========================================= */
.section{ padding-block: clamp(36px, 6vw, 100px); }
.section--tight{ padding-block: clamp(20px, 4vw, 60px); }
.copy-muted{ opacity: .9; }

/* =========================================
   Footer
   ========================================= */
.site-footer{ padding-top: clamp(40px,6vw,80px); border-top: 1px solid rgba(255,255,255,0.15); }

.footer-grid{
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: clamp(16px,3vw,40px); align-items: start;
}
.footer-grid h3{
  margin: 0 0 12px 0; font-family: var(--ff-epic); font-weight: 300; font-size: var(--fz-body); opacity: .9;
}
.footer-grid p{ margin: 0 0 10px 0; }

/* Footer-Links: nur bei Hover unterstrichen */
.footer-grid a{
  position: relative;
  display: inline-block;   /* wichtig für das ::after-Pfeilelement */
  text-decoration: none;
}
.footer-grid a:hover,
.footer-grid a:focus{
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  text-decoration-color: var(--underline);
  --arrow-footer-color: var(--col-accent); /* Pfeil färbt auf Hover */
}

/* EIN Pfeil für Footer-Links (kein Pfeil bei mailto: / tel:)
   ::after enthält zwei Background-Layer:
   1) Schaft (horizontale Linie)
   2) Spitze (Dreieck via conic-gradient)
   → sitzt inline, vertikal mittig, keine Underline-Lücke
*/
.footer-grid a:not([href^="mailto:"]):not([href^="tel:"])::after{
  content:"";
  display:inline-block;
  vertical-align: middle;
  transform: translateY(var(--arrow-footer-va));

  width: calc(var(--arrow-footer-gap) + var(--arrow-footer-l) + var(--arrow-footer-head-w));
  height: max(var(--arrow-footer-head-h), var(--arrow-footer-thick));

  background:
    /* Schaft */
    linear-gradient(var(--arrow-footer-color), var(--arrow-footer-color))
      var(--arrow-footer-gap) 50% / var(--arrow-footer-l) var(--arrow-footer-thick) no-repeat,

    /* Spitze (nach rechts) */
    conic-gradient(from 225deg at 50% 50%,
      var(--arrow-footer-color) 0 90deg,
      transparent 90deg 360deg)
      calc(var(--arrow-footer-gap) + var(--arrow-footer-l)) 50% /
      var(--arrow-footer-head-w) var(--arrow-footer-head-h) no-repeat;
}

/* Spalten-Feinschliff */
.footer-links a{ display: inline-block; }
.footer-links a + a{ margin-left: 18px; }

/* Claim */
.footer-claim{
  margin-top: 100px; /* Feineinstellung */
  padding-top: var(--footer-claim-gap-top);
  padding-bottom: var(--footer-claim-gap-bottom);
  border-top: 1px solid rgba(255,255,255,0.15);
}
.footer-claim__line{ display: block; line-height: .95; margin: 0; }
.footer-claim__line--a{ font-family: var(--ff-epic); font-weight: 300; font-size: clamp(56px, 12vw, var(--fz-footer-claim)); }
.footer-claim__line--b{ font-family: var(--ff-presto); font-weight: 100; font-style: italic; font-size: clamp(56px, 12vw, var(--fz-footer-claim)); }
.footer-claim__line--b + .footer-claim__line{ margin-top: clamp(24px, 1.8vw, 48px); }

.footer-copyright{ padding-block: 16px 40px; font-size: 14px; opacity: .8; }

/* ------------------------------
   Layout-Feinschliff Spalten
   ------------------------------ */
.footer-grid > div:nth-child(2) p{ margin: 0; }
.footer-grid > div:nth-child(2) p:nth-of-type(1),
.footer-grid > div:nth-child(2) p:nth-of-type(2){ display: inline; margin-right: clamp(18px, 2.4vw, 32px); }
.footer-grid > div:nth-child(2) p:nth-of-type(3){ margin-top: calc(var(--footer-block-gap-lines) * var(--footer-lineheight)); }
.footer-grid > div:nth-child(2) p:nth-of-type(4){ margin-top: 8px; }
.footer-grid > div:nth-child(2) p:nth-of-type(5){ margin-top: calc(var(--footer-block-gap-lines) * var(--footer-lineheight)); }
.footer-grid > div:nth-child(2) p:nth-of-type(6){ margin-top: 8px; }

.footer-grid > div:nth-child(3) p{ margin: 0; }
.footer-grid > div:nth-child(3) p:nth-of-type(1),
.footer-grid > div:nth-child(3) p:nth-of-type(2){ display: inline; margin-right: clamp(18px, 2.4vw, 32px); }
.footer-grid > div:nth-child(3) p:nth-of-type(3){ margin-top: calc(var(--footer-block-gap-lines) * var(--footer-lineheight)); }

/* Responsive */
@media (max-width: 768px){
  .footer-grid{ grid-template-columns: 1fr; }
  .footer-grid > div:nth-child(2) p:nth-of-type(1),
  .footer-grid > div:nth-child(2) p:nth-of-type(2),
  .footer-grid > div:nth-child(3) p:nth-of-type(1),
  .footer-grid > div:nth-child(3) p:nth-of-type(2){ display: block; margin-right: 0; }
}

@media (max-width: 1280px){
  :root{ --fz-body: 24px; }
}
@media (max-width: 992px){
  .grid-2{ grid-template-columns: 1fr; }
  .menu-body{ grid-template-columns: 1fr; }
}
@media (max-width: 768px){
  :root{ --fz-body: 20px; --fz-h1: 36px; --fz-h2: 32px; --fz-cta: 36px; }
  .site-chrome__inner{ padding: var(--chrome-pad); }
  .mixline{ line-height: 1.1; font-size: var(--fz-cta); white-space: nowrap; }
}
@media (max-width: 576px){
  .footer-grid{ grid-template-columns: 1fr; }
}

/* Utilities */
.hide{ display:none !important; }
.m0{ margin:0; }
.mt0{ margin-top:0; }
.mb0{ margin-bottom:0; }