/* ===== Lausbubenmama — Website Styles ===== */

/* Schriften lokal gehostet (DSGVO): keine Verbindung zu Google-Servern,
   dadurch wird keine Besucher-IP an Google in die USA uebertragen. */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/BodoniModa-600i-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/BodoniModa-600i-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/BodoniModa-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/BodoniModa-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/Figtree-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/Figtree-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/Figtree-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/Figtree-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/Figtree-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/Figtree-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/Figtree-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/Figtree-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Great Vibes';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/GreatVibes-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Great Vibes';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/GreatVibes-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ===== Farbsystem =====
   Alle Pinktöne teilen einen einzigen Farbton (334°) — exakt das Pink aus dem
   Logo (#F84E99). Variiert wird nur die Helligkeit. Das hält die Seite ruhig,
   statt mehrere leicht verschiedene Pinks nebeneinander zu stellen.
   Der Studio-Hintergrund der Fotos liegt bei 333° und passt damit von selbst. */
:root{
  --pink-50:#FFF0F6;    /* Seitenhintergrund            */
  --pink-100:#FEDDEB;   /* Chips, Tags, Icon-Flächen    */
  --pink-200:#FBBBD7;   /* Galerie-Fläche, helle Schrift auf Pink */
  --pink-300:#F98ABA;   /* „Für Marken“-Fläche          */
  --pink-500:#F84F98;   /* MARKENPINK (= Logo): Icons, Akzente, Verläufe */
  --pink-600:#D70962;   /* Fläche mit weißer Schrift: Kopf-/Fußzeile, Amazon (5,1:1) */
  --pink-700:#DB0662;   /* Verläufe, Icon-Flächen */
  --pink-800:#A6074C;   /* Text, Links UND tiefste Fläche: Kontakt (7,6:1) */
  --pink-950:#400720;   /* Schrift auf Gold             */

  --gold:#D9A93B;
  --gold-2:#EFC24A;
  --ink:#2B0A1B;
  --ink-2:#1A1013;

  /* Schatten aus dem Markenpink abgeleitet */
  --shadow-pink:rgba(166,7,76,.18);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* Damit Sprungmarken nicht unter der fixen Kopfzeile landen */
section[id],main[id]{scroll-margin-top:64px}
body{
  margin:0;
  background:var(--pink-50);
  color:var(--ink);
  font-family:'Figtree',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--pink-800);text-decoration:none}
h1,h2,h3{font-family:'Bodoni Moda',serif;margin:0}
.script{font-family:'Great Vibes',cursive;font-weight:400;line-height:1}
/* Goldene Wörter bekommen einen langsam wandernden Lichtschimmer.
   color bleibt als Rückfall stehen, falls background-clip:text fehlt. */
.italic-gold{
  font-style:italic;color:var(--gold-2);
  background:linear-gradient(100deg,#E0B54A 0%,#EFC24A 18%,#FFF6D8 30%,#EFC24A 42%,#D9A93B 60%,#EFC24A 100%);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:lbmShimmer 7s linear infinite;
}
@keyframes lbmShimmer{
  from{background-position:180% 0}
  to  {background-position:-80% 0}
}
.italic-rose{font-style:italic;color:var(--pink-800)}

/* =========================================================
   Animationen
   Alle Bewegungen laufen über dieselbe weiche Kurve und werden
   per JS gestaffelt (--d = Verzögerung). Wer im Betriebssystem
   „Bewegung reduzieren“ aktiviert hat, sieht alles sofort statisch.
   ========================================================= */
:root{ --ease-out-soft:cubic-bezier(.16,1,.3,1); }

/* Grundzustand animierter Elemente */
.reveal{
  opacity:0;transform:translateY(26px);
  transition:opacity .8s var(--ease-out-soft) var(--d,0s),
             transform .8s var(--ease-out-soft) var(--d,0s);
  will-change:opacity,transform;
}
.reveal.is-in{opacity:1;transform:none}
.reveal.is-in{will-change:auto}

/* Bilder kommen mit sanftem Heranzoomen statt Verschieben */
.reveal-zoom{
  opacity:0;transform:scale(1.06);
  transition:opacity 1.1s ease var(--d,0s),
             transform 1.5s var(--ease-out-soft) var(--d,0s);
}
.reveal-zoom.is-in{opacity:1;transform:none}

/* Chips „poppen“ leicht herein */
.reveal-pop{
  opacity:0;transform:translateY(10px) scale(.94);
  transition:opacity .5s ease var(--d,0s),
             transform .5s var(--ease-out-soft) var(--d,0s);
}
.reveal-pop.is-in{opacity:1;transform:none}

/* Headline: jede Zeile fährt hinter ihrer eigenen Kante hervor */
.hero-title .line{display:block;overflow:hidden;padding-bottom:.04em}
.hero-title .line > span{
  display:block;transform:translateY(105%);
  transition:transform 1s var(--ease-out-soft) var(--d,0s);
}
.hero-title.is-in .line > span{transform:none}

/* Sterne erst einblenden, wenn der Hero steht.
   Nur animation-name zurücksetzen — so bleiben die einzelnen
   animation-delay-Werte erhalten und die Sterne blinken versetzt. */
.twinkle{opacity:0;animation-name:none;transition:opacity .7s ease}
.twinkle.is-in{opacity:1;animation-name:lbmTwinkle}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;transition-delay:0s!important;
    scroll-behavior:auto!important;
  }
  .reveal,.reveal-zoom,.reveal-pop{opacity:1;transform:none}
  .hero-title .line > span{transform:none}
  .twinkle{opacity:1}
}

/* ---------- Header ---------- */
/* Menüleiste bleibt beim Scrollen oben stehen */
.site-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 44px;background:var(--pink-600);border-bottom:2px solid var(--gold);
  position:sticky;top:0;z-index:100;
  transition:padding .25s ease,box-shadow .25s ease;
}
/* Nach dem ersten Scrollen etwas flacher, mit Schatten zur Abgrenzung */
.site-header.is-stuck{padding:10px 44px;box-shadow:0 4px 18px rgba(64,7,32,.22)}
.site-header.is-stuck .logo img{height:30px}
.site-header .logo img{transition:height .25s ease}
.site-header .logo img{height:38px;width:auto}
.nav-desktop{display:flex;align-items:center;gap:26px;font:600 12px/1 Figtree,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#fff}
.nav-desktop a{color:#fff}
.nav-desktop a:hover{color:var(--gold-2)}
/* Unterstrich wächst von links ein */
.nav-desktop a:not(.btn-pill-white){position:relative;transition:color .25s ease}
.nav-desktop a:not(.btn-pill-white)::after{
  content:'';position:absolute;left:0;right:0;bottom:-7px;height:2px;
  background:var(--gold-2);transform:scaleX(0);transform-origin:right;
  transition:transform .38s var(--ease-out-soft);
}
.nav-desktop a:not(.btn-pill-white):hover::after{transform:scaleX(1);transform-origin:left}
.btn-pill-white{
  background:#fff;padding:11px 20px;border-radius:100px;
  letter-spacing:.08em;font-weight:700;
  display:inline-flex;align-items:center;min-height:44px;
  position:relative;overflow:hidden;background-origin:border-box;
  transition:transform .35s var(--ease-out-soft),box-shadow .35s ease,
             background .35s ease,color .35s ease,opacity .3s ease;
}
/* Solange der Kooperations-Button im Hero zu sehen ist, wäre der in der
   Kopfzeile eine Dopplung. Er blendet erst auf, wenn der Hero-Button nach
   oben hinausgescrollt ist (siehe main.js).

   Der versteckte Zustand hängt an .hat-js, das schon im <head> gesetzt wird –
   so steht er vor dem ersten Bild fest und blitzt beim Laden nicht kurz auf.
   Ohne JavaScript greift die Regel nie, dann ist er wie bisher immer da.
   Geändert wird nur die Deckkraft, der Platz bleibt reserviert, sonst würde
   die Navigation springen. */
.hat-js .nav-desktop .btn-pill-white{
  opacity:0;transform:translateY(-5px) scale(.96);pointer-events:none;
}
.hat-js .site-header.cta-frei .nav-desktop .btn-pill-white{
  opacity:1;transform:none;pointer-events:auto;
}
.nav-desktop a.btn-pill-white,
.nav-mobile a.btn-pill-white{color:var(--pink-800)}
/* Hover: hebt sich an und wechselt von Weiß auf Gold */
.nav-desktop a.btn-pill-white:hover,
.nav-mobile a.btn-pill-white:hover{
  color:var(--pink-950);
  background:linear-gradient(135deg,#FBEBB5 0%,#E0B54A 52%,#B98A2A 100%);
  background-origin:border-box;
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(64,7,32,.30);
}
.btn-pill-white:active{transform:translateY(0) scale(.97)}
/* Das Funkeln dreht und wächst mit */
.btn-pill-white .spark{
  display:inline-block;
  transition:transform .5s var(--ease-out-soft),filter .5s ease;
}
.btn-pill-white:hover .spark{
  transform:rotate(20deg) scale(1.3);
  filter:drop-shadow(0 0 5px rgba(255,255,255,.9));
}
/* Lichtreflex wandert über den Button */
.btn-pill-white::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.6) 50%,transparent 62%);
  transform:translateX(-130%);
}
.btn-pill-white:hover::after{transform:translateX(130%);transition:transform .8s ease}

.burger{display:none;flex-direction:column;gap:5px;padding:11px;background:none;border:none;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:#fff}

.nav-mobile{
  display:none;
  position:absolute;top:100%;left:0;right:0;
  background:var(--pink-500);border-bottom:2px solid var(--gold);
  flex-direction:column;padding:8px 20px 20px;gap:4px;
}
.nav-mobile a{
  color:#fff;font:600 14px/1 Figtree,sans-serif;letter-spacing:.06em;text-transform:uppercase;
  padding:14px 4px;border-bottom:1px solid rgba(255,255,255,.15);
}
.nav-mobile .btn-pill-white{
  margin-top:10px;text-align:center;color:var(--pink-800);
}
.nav-mobile.is-open{display:flex}

/* ---------- Hero ---------- */
/* Verlauf ist aus dem Hero-Foto ausgemessen, damit die Kante zwischen
   Textfläche und Foto nahtlos ineinander übergeht. Bei Fotowechsel neu abgleichen! */
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#DC0062 0%,#E70167 45%,#E70164 100%);
  display:grid;grid-template-columns:1.05fr .95fr;align-items:end;
}
.hero-content{padding:70px 20px 76px 44px;position:relative;z-index:2}
.hero-brand{display:flex;align-items:center;gap:14px;color:#fff}
/* Innerhalb der h1 sind es Spans – sie brauchen einen eigenen Blocksatz. */
.hero-kicker,.hero-claim{display:block}
/* Goldstrich statt zweitem Logo – die Krone steht schon in der Kopfzeile */
.hero-brand::before{
  content:'';width:36px;height:2px;flex:none;border-radius:2px;
  background:linear-gradient(90deg,#B98A2A,#EFC24A);
}
.hero-brand span{font:600 11px/1 Figtree,sans-serif;letter-spacing:.22em;text-transform:uppercase}
/* pink-100 statt pink-200: auf dem dunkelsten Punkt des Hero-Verlaufs kam
   pink-200 nur auf 2,87:1 und verfehlte damit knapp die 3:1, die für große
   Schrift gefordert sind. Mit pink-100 sind es 3,64:1. */
.hero-kicker{margin-top:26px;font-size:46px;color:var(--pink-100)}
/* Der Abstand saß vorher an der h1 selbst; die umfasst jetzt mehr. */
.hero-claim{margin-top:6px}
.hero h1{margin:0;font:600 78px/.94 'Bodoni Moda',serif;color:#fff;letter-spacing:-.01em}
.hero p.lead{margin:26px 0 0;font:400 20px/1.5 Figtree,sans-serif;color:#fff;max-width:400px}
.hero-actions{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.btn{
  display:inline-block;padding:16px 26px;border-radius:100px;
  font:700 14px/1 Figtree,sans-serif;letter-spacing:.04em;
  border:2px solid transparent;cursor:pointer;text-align:center;
  /* Wichtig: Der Verlauf muss den transparenten 2px-Rahmen mit einbeziehen.
     Sonst wird dort die Randfarbe flach wiederholt und es entsteht ein
     matter Saum an den Rundungen. */
  background-origin:border-box;
}
.btn-white{background:#fff;color:var(--pink-800)}
.btn-white:hover{background:var(--gold-2);color:var(--ink-2)}
.btn-gold{
  background:linear-gradient(135deg,#FBEBB5 0%,#E0B54A 42%,#B98A2A 100%);
  /* Muss NACH der background-Kurzform stehen: die setzt background-origin
     sonst wieder auf padding-box zurück, und der 2px-Rahmen bekäme erneut
     den matten Saum. */
  background-origin:border-box;
  color:var(--pink-950);box-shadow:0 4px 14px rgba(0,0,0,.18);
  position:relative;overflow:hidden;
}
.btn-gold:hover{filter:brightness(1.04)}
/* Lichtreflex wandert beim Hover über das Gold.
   Liegt bewusst ÜBER der Fläche – hinter ihr wäre er unsichtbar und würde
   nur an den weich gerechneten Rundungen als heller Saum durchscheinen.
   border-radius:inherit sorgt für saubere Kanten. */
.btn-gold::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.5) 50%,transparent 62%);
  transform:translateX(-130%);
}
.btn-gold:hover::after{transform:translateX(130%);transition:transform .85s ease}

/* Buttons reagieren spürbar auf Klick und Hover */
.btn{transition:transform .28s var(--ease-out-soft),box-shadow .28s ease,background-color .28s ease,color .28s ease,filter .28s ease}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.985)}

/* Pfeil rutscht beim Hover nach rechts */
.arrow{display:inline-block;transition:transform .3s var(--ease-out-soft)}
.btn:hover .arrow{transform:translateX(5px)}
.hero-actions .btn-gold{font-size:15px;padding:17px 30px}

.hero-media{position:relative;min-height:660px}
/* Weiche linke Kante: Foto blendet in den Hero-Verlauf, statt hart abzusetzen */
.hero-media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 7%,#000 16%);
  mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 7%,#000 16%);
}

/* ===== Glitzerstern =====
   Zwei gekreuzte, weich auslaufende Strahlen mit hellem Kern – das wirkt wie
   echtes Funkeln, statt wie ein hartes Sternsymbol. Reines CSS, kein Bild.
   Steuerung je Stern: --s Größe, --c Farbe, --dur Dauer, animation-delay. */
.twinkle{
  position:absolute;pointer-events:none;
  width:var(--s,16px);height:var(--s,16px);
  animation-duration:var(--dur,5s);
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
  /* animation-name setzt erst .is-in (siehe main.js) */
}
.twinkle::before,.twinkle::after{
  content:'';position:absolute;left:50%;top:50%;border-radius:50%;
  transform:translate(-50%,-50%);
}
/* waagerechter Strahl */
.twinkle::before{
  width:100%;height:13%;
  background:linear-gradient(90deg,transparent 0%,var(--c,#EFC24A) 30%,#fff 50%,var(--c,#EFC24A) 70%,transparent 100%);
}
/* senkrechter Strahl */
.twinkle::after{
  width:13%;height:100%;
  background:linear-gradient(180deg,transparent 0%,var(--c,#EFC24A) 30%,#fff 50%,var(--c,#EFC24A) 70%,transparent 100%);
}

/* Aufblitzen – zweimal Licht fangen, dann langsam nach oben verwehen */
@keyframes lbmTwinkle{
  0%      {opacity:0;   transform:translateY(0)     scale(.15) rotate(0deg)}
  10%     {opacity:1;   transform:translateY(-2px)  scale(1.05) rotate(24deg)}
  26%     {opacity:.35; transform:translateY(-5px)  scale(.7)  rotate(48deg)}
  42%     {opacity:.95; transform:translateY(-8px)  scale(.95) rotate(72deg)}
  70%,100%{opacity:0;   transform:translateY(-16px) scale(.15) rotate(110deg)}
}

/* Verteilung auf dem Desktop – bewusst um die Textspalte herum */
.twinkle:nth-of-type(1) {left:9%; top:15%;   --s:20px; --dur:5.2s; animation-delay:0s}
.twinkle:nth-of-type(2) {left:30%;top:8%;    --s:12px; --c:#fff;    --dur:6.4s; animation-delay:.7s}
.twinkle:nth-of-type(3) {left:41%;top:30%;   --s:16px; --dur:4.8s; animation-delay:1.9s}
.twinkle:nth-of-type(4) {left:4%; bottom:17%;--s:14px; --c:#FBBBD7; --dur:6s;   animation-delay:.4s}
.twinkle:nth-of-type(5) {left:24%;bottom:25%;--s:9px;  --dur:5.6s; animation-delay:2.6s}
.twinkle:nth-of-type(6) {left:45%;top:62%;   --s:11px; --c:#fff;    --dur:5s;   animation-delay:1.2s}
.twinkle:nth-of-type(7) {left:53%;top:11%;   --s:8px;  --dur:7s;   animation-delay:3.1s}
.twinkle:nth-of-type(8) {left:17%;top:38%;   --s:7px;  --c:#fff;    --dur:6.8s; animation-delay:2.1s}
.twinkle:nth-of-type(9) {left:36%;bottom:12%;--s:13px; --dur:5.4s; animation-delay:3.6s}
.twinkle:nth-of-type(10){left:57%;top:44%;   --s:10px; --c:#FBBBD7; --dur:6.2s; animation-delay:1.6s}
.twinkle:nth-of-type(11){left:13%;top:57%;   --s:8px;  --dur:5.8s; animation-delay:4.2s}
.twinkle:nth-of-type(12){left:49%;bottom:32%;--s:6px;  --c:#fff;    --dur:7.4s; animation-delay:2.9s}

/* ---------- Claim-Band (statisch) ---------- */
.claimband{background:var(--ink-2);padding:18px 44px}
.claimband-inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 22px;
  font:600 13px/1 Figtree,sans-serif;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-2);text-align:center;
}
.claimband .dot{color:var(--pink-500)}

/* ---------- About ---------- */
.about{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;padding:88px 44px;align-items:center}
.about-photo{position:relative}
.about-photo .frame{border-radius:260px 260px 18px 18px;overflow:hidden;border:3px solid var(--gold);height:540px}
.about-photo .frame img{width:100%;height:100%;object-fit:cover;object-position:56% 32%}
.about-photo .badge-logo{position:absolute;right:-18px;bottom:-18px;height:96px;width:96px;border-radius:50%;box-shadow:0 8px 24px var(--shadow-pink)}
.eyebrow{font:600 11px/1 Figtree,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--pink-500)}
.about h2{margin-top:14px;font:600 44px/1.08 'Bodoni Moda',serif;color:var(--ink-2)}
.about p{margin:22px 0 0;font:400 17px/1.75 Figtree,sans-serif;color:rgba(26,16,19,.75);max-width:520px}
.tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.tag{background:#fff;color:var(--pink-800);padding:9px 16px;border-radius:100px;font:600 13px/1 Figtree,sans-serif}

/* ---------- Gallery ---------- */
.gallery{background:var(--pink-200);padding:76px 44px}
.section-head{text-align:center}
.section-head h2{margin-top:8px;font:600 34px/1.2 'Bodoni Moda',serif}
.section-head .script{font-size:38px;color:var(--pink-800)}
.section-head p{margin:16px auto 0;font:500 16px/1.65 Figtree,sans-serif;color:var(--pink-950);max-width:470px}
/* Goldbalken als Trenner unter der Überschrift.
   Bewusst ohne Transparenz an den Enden – ausgefranst verschwand er auf Pink.
   Der helle Kern und der feine Schatten geben ihm Tiefe. */
.section-head h2::after{
  content:'';display:block;width:92px;height:3px;margin:24px auto 0;border-radius:3px;
  background:linear-gradient(90deg,#B98A2A 0%,#EFC24A 50%,#B98A2A 100%);
  box-shadow:0 1px 3px rgba(64,7,32,.30);
}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
/* Hochformatige Kacheln: die Fotos sind überwiegend Hochformat,
   im Querformat müsste sonst eng aufs Gesicht beschnitten werden. */
/* Kachelhöhe nah am Seitenverhältnis der Fotos (2:3), damit möglichst
   wenig beschnitten wird und alle drei gleich viel zeigen. */
.gallery-grid .ph{
  margin:0;height:600px;border-radius:16px;overflow:hidden;border:3px solid #fff;
  box-shadow:0 8px 24px var(--shadow-pink);
}
.gallery-grid .ph img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.gallery-grid .ph:hover img{transform:scale(1.06)}

.btn-insta{
  display:block;width:fit-content;margin:74px auto 0;
  background:var(--pink-600);color:#fff;border:2px solid var(--gold);
  box-shadow:0 6px 18px var(--shadow-pink);
}
.btn-insta:hover{background:var(--pink-800);color:var(--gold-2)}

/* ---------- For Brands ---------- */
.brands{background:var(--pink-300);padding:76px 44px}
/* Fünf Karten: Flexbox statt Grid, damit die letzte Reihe zentriert steht
   (3 oben, 2 mittig darunter) statt links zu kleben. */
.blocks{display:flex;flex-wrap:wrap;justify-content:center;gap:22px;margin-top:44px}
.blocks > .block{flex:0 1 calc((100% - 44px) / 3)}

.block{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#fff 0%,#FFF8FB 100%);
  border:1px solid rgba(217,169,59,.34);
  border-radius:20px;padding:34px 28px 28px;
  display:flex;flex-direction:column;
  box-shadow:0 2px 4px rgba(166,7,76,.05), 0 14px 30px rgba(166,7,76,.09);
  transition:transform .45s var(--ease-out-soft),box-shadow .45s ease,border-color .45s ease;
}
/* Goldkante wächst beim Hover über die Karte */
.block::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#FBEBB5,#E0B54A,#B98A2A);
  transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease-out-soft);
}
.block:hover{
  /* Bewusst nur leicht: die Karten sind Information, keine Schaltflaechen. */
  transform:translateY(-3px);
  box-shadow:0 4px 8px rgba(166,7,76,.06), 0 20px 40px rgba(166,7,76,.16);
  border-color:rgba(217,169,59,.7);
}
.block:hover::before{transform:scaleX(1)}

/* Große Ziffer als dezentes Wasserzeichen statt Pillen-Label */
.block-num{
  position:absolute;top:20px;right:26px;
  font:600 46px/1 'Bodoni Moda',serif;color:var(--pink-100);
  letter-spacing:-.03em;pointer-events:none;user-select:none;
  transition:color .45s ease;
}
.block:hover .block-num{color:var(--pink-200)}

/* Kräftiger Pink-Verlauf mit weißem Icon statt blasser Fläche */
.block-icon{
  width:58px;height:58px;border-radius:50%;margin-bottom:24px;
  display:grid;place-items:center;
  background:linear-gradient(140deg,var(--pink-500) 0%,var(--pink-700) 100%);
  color:#fff;box-shadow:0 8px 18px rgba(219,6,98,.30);
  transition:transform .5s var(--ease-out-soft),box-shadow .5s ease;
}
.block:hover .block-icon{transform:scale(1.07) rotate(-5deg);box-shadow:0 12px 24px rgba(219,6,98,.42)}
.block-icon svg{width:27px;height:27px}

/* hyphens:auto trennt lange Komposita wie „Weiter-nutzung“ sauber,
   statt sie aus der Karte laufen zu lassen (Sprache steckt in <html lang="de">). */
.block h3{
  font:600 25px/1.2 'Bodoni Moda',serif;color:var(--ink-2);
  hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;
}
.block p{margin:12px 0 0;font:400 15px/1.68 Figtree,sans-serif;color:rgba(43,10,27,.72);flex:1}

/* Abschlusspanel als eigenständiges Highlight */
.longterm{
  position:relative;overflow:hidden;margin-top:28px;
  background:linear-gradient(135deg,#C10858 0%,#98063F 100%);
  border:1px solid rgba(217,169,59,.65);border-radius:20px;
  padding:34px 42px;
  display:grid;grid-template-columns:auto 1fr;align-items:center;gap:38px;
  box-shadow:0 20px 44px rgba(166,7,76,.26);
}
.longterm::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 95% at 0% 0%, rgba(255,255,255,.17), transparent 62%);
}
.longterm .script{
  position:relative;font-size:40px;color:var(--gold-2);white-space:nowrap;
  padding-right:38px;border-right:1px solid rgba(239,194,74,.42);
}
.longterm p{position:relative;margin:0;font:400 16px/1.7 Figtree,sans-serif;color:#fff}


/* Hinweis + Handlungsaufforderung unter den Bausteinen.
   Ohne ihn wirken die Karten anklickbar, ohne dass etwas passiert. */
.blocks-note{
  margin-top:22px;background:#fff;border:1px solid rgba(217,169,59,.4);
  border-radius:20px;padding:30px 36px;
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
  box-shadow:0 2px 4px rgba(166,7,76,.05), 0 14px 30px rgba(166,7,76,.09);
}
.blocks-note h3{font:600 23px/1.25 'Bodoni Moda',serif;color:var(--ink-2)}
.blocks-note p{
  margin:9px 0 0;max-width:620px;
  font:400 15px/1.65 Figtree,sans-serif;color:rgba(43,10,27,.72);
}
.blocks-note .btn-gold{flex:none;padding:17px 30px;font-size:15px}



/* Zwei Wege für Marken: direkt anfragen oder erst das Media Kit lesen */
.note-aktionen{display:flex;gap:12px;flex-wrap:wrap;flex:none}
.btn-umriss{
  border:2px solid var(--pink-800);color:var(--pink-800);background:transparent;
  padding:15px 26px;background-origin:border-box;
}
.btn-umriss:hover{background:var(--pink-800);color:#fff}


/* Referenzen: Markennamen sind der stärkste Vertrauensbeleg auf der Seite */


/* ===== Reel-Wand =====
   Fünf Spalten laufen langsam gegenläufig. Die Inhalte stehen im HTML doppelt,
   dadurch springt die Schleife bei -50 % nahtlos zurück an den Anfang.

   Zur Laufruhe: die weichen Kanten oben und unten sind bewusst KEINE
   mask-image. Eine Maske über einem animierten Element zwingt den Browser,
   jeden Frame neu zusammenzusetzen – vor allem Safari ruckelt dann. Zwei
   Verlaufsflächen in der Hintergrundfarbe erledigen dasselbe zum Nulltarif,
   weil sie sich nie ändern. Aus demselben Grund tragen die Kacheln keinen
   weichen Schlagschatten mehr: 34 Weichzeichner kosten bei jedem Neuzeichnen
   der hohen Spalten spürbar Zeit. */
.reelwand{background:var(--pink-200);padding:76px 44px 84px;overflow:hidden}
.reel-buehne{
  position:relative;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;
  /* Nicht über die ganze Breite: als schmales Band wirkt die Wand ruhiger.
     1020 px ergeben bei fünf Spalten rund 194 px je Kachel – bei 384 px
     Bilddatei genau die doppelte Auflösung, also scharf auf Retina. */
  max-width:1020px;margin:40px auto 0;
  height:640px;overflow:hidden;
  contain:layout paint;
}
/* Weiche Kanten – rgba-Werte sind --pink-200 (#FBBBD7) mit Deckkraft 0 */
.reel-buehne::before,.reel-buehne::after{
  content:"";position:absolute;left:0;right:0;height:80px;z-index:2;pointer-events:none;
}
.reel-buehne::before{top:0;   background:linear-gradient(180deg,var(--pink-200),rgba(251,187,215,0))}
.reel-buehne::after {bottom:0;background:linear-gradient(  0deg,var(--pink-200),rgba(251,187,215,0))}

.reel-lauf{
  display:flex;flex-direction:column;gap:12px;
  will-change:transform;backface-visibility:hidden;
}
.reel-spalte.hoch   .reel-lauf{animation:reelHoch   23s linear infinite}
.reel-spalte.runter .reel-lauf{animation:reelRunter 24s linear infinite}
/* Spalte 1 und 2 tragen vier Reels, die übrigen drei – also einen längeren
   Weg in derselben Zeit. Damit alle gleich schnell wirken (rund 60 px/s,
   eine Kachel zieht in knapp sechs Sekunden vorbei), laufen die kurzen
   Spalten in weniger Zeit. Die versetzten Startpunkte verhindern, dass
   Reihen auf gleicher Höhe stehen. */
.reel-spalte:nth-child(2) .reel-lauf{animation-delay:-11s}
.reel-spalte:nth-child(3) .reel-lauf{animation-duration:17s;animation-delay:-6s}
.reel-spalte:nth-child(4) .reel-lauf{animation-duration:18s;animation-delay:-13s}
.reel-spalte:nth-child(5) .reel-lauf{animation-duration:18s;animation-delay:-9s}

@keyframes reelHoch  {from{transform:translate3d(0,0,0)}      to{transform:translate3d(0,-50%,0)}}
@keyframes reelRunter{from{transform:translate3d(0,-50%,0)}   to{transform:translate3d(0,0,0)}}

/* Außerhalb des Sichtfelds (siehe main.js) stehenbleiben und die
   GPU-Ebenen wieder freigeben. */
.reel-buehne.ruht .reel-lauf{animation-play-state:paused}

.reel{
  position:relative;margin:0;border-radius:14px;overflow:hidden;
  border:3px solid #fff;background:var(--ink-2);
}
.reel img{width:100%;height:auto;display:block}
/* Nur die Aufrufzahl – den Titel trägt das Cover selbst schon. */
.reel figcaption{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;align-items:center;justify-content:center;gap:7px;
  padding:30px 8px 11px;
  background:linear-gradient(180deg,transparent,rgba(26,16,19,.9) 62%);
}
/* Auge als Hintergrundbild statt 34-mal SVG im Quelltext */
.reel-views::before{
  content:"";width:17px;height:17px;flex:none;
  background:center/contain no-repeat url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23EFC24A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1.6 12S5.7 5.2 12 5.2 22.4 12 22.4 12 18.3 18.8 12 18.8 1.6 12 1.6 12Z"/><circle cx="12" cy="12" r="3.1"/></svg>');
}
.reel-views{
  display:flex;align-items:center;gap:7px;
  font:700 17px/1 Figtree,sans-serif;letter-spacing:.01em;
  color:var(--gold-2);white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.55);
}
.reelwand .btn-insta{margin-top:44px}

@media (prefers-reduced-motion: reduce){
  .reel-spalte .reel-lauf{animation:none!important}
  .reel-buehne{height:auto}
  .reel-buehne::before,.reel-buehne::after{display:none}
}

/* ---------- Amazon Storefront ---------- */
.amazon{padding:80px 44px;background:var(--pink-600);color:#fff}
.storefront-inner{max-width:640px;margin:0 auto;text-align:center}
.storefront-inner .script{font-size:34px;color:var(--gold-2)}
.storefront-inner h2{margin-top:8px;font:600 36px/1.15 'Bodoni Moda',serif;color:#fff}
.storefront-quote{margin:22px auto 0;font:400 17px/1.7 Figtree,sans-serif;color:#fff}
.storefront-inner .btn-gold{display:inline-block;margin-top:30px;padding:18px 34px;font:700 15px/1 Figtree,sans-serif}
.amazon .disclaimer{margin:22px 0 0;font:400 12px/1.5 Figtree,sans-serif;color:rgba(255,255,255,.88)}

/* ---------- Contact ---------- */
.contact{background:var(--pink-800);color:#fff;padding:84px 44px}
.contact-inner{max-width:720px;margin:0 auto;text-align:center}
.contact-inner > .script{font-size:40px;color:var(--pink-200)}
.contact-inner h2{margin-top:10px;font:600 46px/1.05 'Bodoni Moda',serif}
.contact-intro{margin:20px auto 0;font:400 17px/1.7 Figtree,sans-serif;color:#fff;max-width:480px}
.contact-card{margin-top:38px;background:rgba(255,255,255,.12);border:1px solid var(--gold);border-radius:18px;padding:44px;text-align:center}
.contact-card img{height:64px;width:64px;border-radius:50%;margin:0 auto}
.contact-card h3{margin-top:22px;font:600 26px/1.25 'Bodoni Moda',serif}
.contact-card p{margin:12px auto 0;font:400 16px/1.65 Figtree,sans-serif;color:#fff;max-width:340px}
.contact-card .btn-gold{display:inline-block;margin-top:26px;padding:18px 34px;box-shadow:0 4px 14px rgba(0,0,0,.2);font:700 15px/1 Figtree,sans-serif}
.contact-card .insta-line{margin-top:16px;font:500 14px/1.5 Figtree,sans-serif;color:rgba(255,255,255,.88)}
.contact-card .insta-line a{color:var(--gold-2)}


/* Glitzerstaub in zwei Ebenen: unterschiedliche Dichte, gegenläufige Drift.
   Dadurch wirkt die Fläche räumlich statt wie ein flaches Muster. */
.contact{position:relative;overflow:hidden}
.contact::before,.contact::after{
  content:'';position:absolute;inset:-6%;pointer-events:none;z-index:0;
}
.contact::before{
  background-image:
    radial-gradient(1px 1px at 33.1% 17.2%, rgba(255,255,255,.95), transparent 100%),
    radial-gradient(1px 1px at 80.8% 11.8%, rgba(255,255,255,.7), transparent 100%),
    radial-gradient(1px 1px at 5.6% 43.8%, rgba(255,255,255,.7), transparent 100%),
    radial-gradient(1px 1px at 10.7% 42.9%, rgba(255,255,255,.7), transparent 100%),
    radial-gradient(1px 1px at 62.5% 57.8%, rgba(251,187,215,.85), transparent 100%),
    radial-gradient(1px 1px at 6.8% 23.8%, rgba(239,194,74,.95), transparent 100%),
    radial-gradient(1.4px 1.4px at 42.2% 53.8%, rgba(255,255,255,.7), transparent 100%),
    radial-gradient(1px 1px at 11.9% 56.7%, rgba(239,194,74,.95), transparent 100%),
    radial-gradient(1px 1px at 11.4% 69.9%, rgba(255,255,255,.7), transparent 100%),
    radial-gradient(1.4px 1.4px at 49.7% 53.0%, rgba(251,187,215,.85), transparent 100%),
    radial-gradient(1.4px 1.4px at 58.2% 45.6%, rgba(255,255,255,.7), transparent 100%),
    radial-gradient(1px 1px at 78.3% 68.7%, rgba(255,255,255,.95), transparent 100%),
    radial-gradient(1.4px 1.4px at 57.1% 52.4%, rgba(251,187,215,.85), transparent 100%),
    radial-gradient(1px 1px at 29.6% 95.1%, rgba(251,187,215,.85), transparent 100%),
    radial-gradient(2px 2px at 17.8% 35.2%, rgba(251,187,215,.85), transparent 100%),
    radial-gradient(1.4px 1.4px at 5.8% 65.8%, rgba(239,194,74,.95), transparent 100%),
    radial-gradient(2px 2px at 68.7% 58.9%, rgba(255,255,255,.95), transparent 100%),
    radial-gradient(2px 2px at 82.6% 91.8%, rgba(255,255,255,.95), transparent 100%),
    radial-gradient(2px 2px at 7.8% 68.9%, rgba(239,194,74,.95), transparent 100%),
    radial-gradient(1.4px 1.4px at 70.8% 86.4%, rgba(255,255,255,.95), transparent 100%),
    radial-gradient(1px 1px at 92.3% 36.4%, rgba(251,187,215,.85), transparent 100%),
    radial-gradient(1px 1px at 7.7% 75.2%, rgba(255,255,255,.7), transparent 100%),
    radial-gradient(2px 2px at 40.2% 89.2%, rgba(255,255,255,.95), transparent 100%),
    radial-gradient(1.4px 1.4px at 18.0% 40.8%, rgba(255,255,255,.7), transparent 100%),
    radial-gradient(1.4px 1.4px at 80.7% 84.2%, rgba(251,187,215,.85), transparent 100%),
    radial-gradient(2px 2px at 96.7% 67.2%, rgba(255,255,255,.7), transparent 100%);
  animation:lbmDustA 14s ease-in-out infinite;
}
.contact::after{
  background-image:
    radial-gradient(1.4px 1.4px at 17.8% 67.8%, rgba(251,187,215,.85), transparent 100%),
    radial-gradient(2.6px 2.6px at 83.0% 96.0%, rgba(255,255,255,.7), transparent 100%),
    radial-gradient(1px 1px at 50.5% 25.2%, rgba(255,255,255,.95), transparent 100%),
    radial-gradient(1px 1px at 37.6% 58.0%, rgba(255,255,255,.7), transparent 100%),
    radial-gradient(1px 1px at 78.2% 24.8%, rgba(255,255,255,.95), transparent 100%),
    radial-gradient(2.6px 2.6px at 43.9% 96.6%, rgba(251,187,215,.85), transparent 100%),
    radial-gradient(2.6px 2.6px at 5.3% 33.9%, rgba(255,255,255,.95), transparent 100%),
    radial-gradient(1px 1px at 64.3% 91.2%, rgba(255,255,255,.7), transparent 100%),
    radial-gradient(1px 1px at 73.1% 11.3%, rgba(251,187,215,.85), transparent 100%),
    radial-gradient(2.6px 2.6px at 17.5% 71.5%, rgba(251,187,215,.85), transparent 100%),
    radial-gradient(2.6px 2.6px at 16.5% 65.5%, rgba(255,255,255,.7), transparent 100%),
    radial-gradient(1px 1px at 9.2% 21.6%, rgba(255,255,255,.95), transparent 100%),
    radial-gradient(2.6px 2.6px at 55.8% 55.5%, rgba(255,255,255,.7), transparent 100%),
    radial-gradient(2.6px 2.6px at 34.8% 16.7%, rgba(239,194,74,.95), transparent 100%),
    radial-gradient(2.6px 2.6px at 37.1% 45.4%, rgba(239,194,74,.95), transparent 100%),
    radial-gradient(1px 1px at 97.5% 39.3%, rgba(255,255,255,.95), transparent 100%),
    radial-gradient(2.6px 2.6px at 17.3% 70.3%, rgba(255,255,255,.95), transparent 100%),
    radial-gradient(1px 1px at 49.2% 54.7%, rgba(239,194,74,.95), transparent 100%);
  animation:lbmDustB 19s ease-in-out infinite;
}
@keyframes lbmDustA{
  0%,100%{opacity:.30;transform:translate3d(0,0,0)}
  50%    {opacity:.85;transform:translate3d(6px,-10px,0)}
}
@keyframes lbmDustB{
  0%,100%{opacity:.70;transform:translate3d(0,0,0)}
  50%    {opacity:.25;transform:translate3d(-8px,8px,0)}
}
.contact-inner{position:relative;z-index:1}

/* ---------- Footer ---------- */
.site-footer{display:flex;align-items:center;justify-content:space-between;padding:28px 44px;background:var(--pink-600);border-top:2px solid var(--gold);flex-wrap:wrap;gap:16px}
.site-footer img{height:26px;width:auto}
.footer-links{display:flex;gap:22px;font:500 13px/1 Figtree,sans-serif;color:#fff;flex-wrap:wrap}
.footer-links a{color:#fff}
.footer-links a:hover{color:var(--gold-2)}

/* ---------- Simple pages (Impressum/Datenschutz) ---------- */
.legal-page{max-width:760px;margin:0 auto;padding:70px 24px 100px}
.legal-page h1{font-size:38px;margin-bottom:24px}
.legal-page h2{font:700 20px/1.3 Figtree,sans-serif;margin:32px 0 10px;color:var(--pink-800)}
.legal-page p,.legal-page li{font:400 16px/1.7 Figtree,sans-serif;color:rgba(43,10,27,.8)}
.legal-page ul{margin:10px 0 0;padding-left:22px}
.legal-page li{margin-bottom:6px}
.legal-page strong{color:var(--ink);font-weight:700}
.legal-page a{text-decoration:underline}
/* Schaltflächen behalten ihr Aussehen, auch auf den Textseiten */
.legal-page a.btn{text-decoration:none}
/* 404: kurze Seite. Statt mit einer geschätzten Höhe zu rechnen, wird der
   Body zur Spalte und der Inhalt dehnt sich – dann sitzt die Fußzeile immer
   genau unten, egal wie hoch Kopf- und Fußzeile gerade sind. */
body.seite-404{min-height:100vh;display:flex;flex-direction:column}
@supports (height: 100dvh){ body.seite-404{min-height:100dvh} }
body.seite-404 .fehlerseite{flex:1 0 auto}
.legal-page .back-link{display:inline-block;margin-bottom:30px;font:600 13px/1 Figtree,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.placeholder-note{background:var(--pink-100);border:1px dashed var(--gold);border-radius:12px;padding:16px 20px;margin:24px 0;font:500 14px/1.6 Figtree,sans-serif;color:var(--pink-800)}

/* ---- Mittlere Breiten: vier Spalten wären hier zu schmal ---- */
@media (max-width:1150px) and (min-width:901px){
  .blocks > .block{flex:0 1 calc((100% - 22px) / 2)}
  .gallery-grid .ph{height:460px}
  .longterm{padding:30px 32px;gap:28px}
  .longterm .script{font-size:34px;padding-right:28px}
}


/* =========================================================
   Bedienbarkeit
   Apple empfiehlt mindestens 44x44 Punkt fuer alles Antippbare –
   kleinere Ziele erhoehen die Fehlerrate deutlich.
   ========================================================= */

/* Navigation: Textzeile bleibt optisch gleich, die Trefferflaeche waechst */
.nav-desktop a:not(.btn-pill-white){
  display:inline-flex;align-items:center;min-height:44px;
}
.nav-desktop a:not(.btn-pill-white)::after{bottom:9px}

/* Fusszeile: gleiche Logik, plus mehr Luft zwischen den Links */
.footer-links{gap:4px 10px}
.footer-links a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 10px;
}

/* Logo und Textlinks in Flaechen */
.site-header .logo{display:inline-flex;align-items:center;min-height:44px}
.contact-card .insta-line a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 6px;
}
.burger{min-width:44px;min-height:44px;align-items:center;justify-content:center}

/* -------- Tastaturbedienung --------
   Ohne sichtbaren Fokus weiss man beim Tabben nicht, wo man steht.
   :focus-visible zeigt den Rahmen nur bei Tastatur, nicht bei Mausklick. */
:focus-visible{
  outline:3px solid var(--gold-2);
  outline-offset:3px;
  border-radius:4px;
}
.site-header :focus-visible,
.amazon :focus-visible,
.contact :focus-visible,
.site-footer :focus-visible{outline-color:#fff}

/* -------- Zeilenlaengen --------
   Zielkorridor sind 45-75 Zeichen pro Zeile. Achtung: die Einheit ch misst
   die Breite der Ziffer 0 (hier ~10px), das Durchschnittszeichen ist aber
   nur ~7px breit. 48ch ergibt daher rund 68 echte Zeichen. */
.longterm p{max-width:48ch}
.blocks-note p{max-width:47ch}
.about p{max-width:47ch}
.storefront-quote{max-width:46ch}

/* =========================================================
   Mobile (matches design 3a)
   ========================================================= */
@media (max-width: 900px){

  section[id],main[id]{scroll-margin-top:56px}
  .site-header{padding:12px 18px}
  .site-header.is-stuck{padding:9px 18px;box-shadow:0 4px 14px rgba(64,7,32,.22)}
  .site-header .logo img{height:26px}
  .site-header.is-stuck .logo img{height:23px}
  .nav-desktop{display:none}
  .burger{display:grid}
  .nav-mobile{display:none}

  .hero{display:block;padding-top:0}
  .hero-content{padding:28px 20px 0}
  .hero-brand img{height:28px;width:28px}
  .hero-kicker{margin-top:16px;font-size:30px}
  .hero h1{font-size:52px;line-height:.95}
  .hero p.lead{margin-top:16px;font-size:17px;max-width:none}
  .hero-actions{display:grid;margin-top:22px}
  /* Glitzer mobil neu verteilen: auf schmalen Displays lägen die Sterne
     sonst mitten auf der Schrift. Positionen aus dem HTML werden überschrieben. */
  .twinkle:nth-of-type(1) {left:auto;bottom:auto;right:7%; top:6%;    --s:17px}
  .twinkle:nth-of-type(2) {left:auto;bottom:auto;right:19%;top:18%;   --s:10px}
  .twinkle:nth-of-type(3) {left:auto;bottom:auto;right:5%; top:33%;   --s:13px}
  .twinkle:nth-of-type(4) {right:auto;top:auto;  left:5%;  bottom:33%;--s:11px}
  .twinkle:nth-of-type(5) {left:auto;top:auto;   right:8%; bottom:25%;--s:15px}
  .twinkle:nth-of-type(6) {right:auto;top:auto;  left:7%;  bottom:11%;--s:9px}
  .twinkle:nth-of-type(7) {left:auto;top:auto;   right:14%;bottom:9%; --s:12px}
  .twinkle:nth-of-type(8) {right:auto;bottom:auto;left:6%; top:6%;    --s:8px}
  /* Rest auf schmalen Displays ausblenden – sonst wird es unruhig */
  .twinkle:nth-of-type(n+9){display:none}

  .hero-media{position:relative;height:420px;min-height:0;margin:24px -20px 0}
  /* Mobil sitzt das Foto unter dem Text – weiche Kante deshalb oben statt links.
     object-position 0% = Bildoberkante, damit der Kopf vollständig sichtbar bleibt;
     die Blende endet früh (9%), damit sie nicht in die Haare läuft. */
  .hero-media img{
    object-position:50% 0%;
    -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.6) 3.5%,#000 9%);
    mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.6) 3.5%,#000 9%);
  }

  .claimband{padding:16px 20px}
  .claimband-inner{font-size:11px;gap:8px 14px}

  .about{display:block;padding:40px 20px}
  .about-photo{margin-bottom:26px}
  .about-photo .frame{border-radius:150px 150px 14px 14px;height:360px}
  .about-photo .badge-logo{height:66px;width:66px;right:-8px;bottom:-12px}
  .about h2{font-size:32px;margin-top:12px}
  .about p{font-size:16px;max-width:none}

  .reelwand{padding:40px 20px 48px}
  .reel-buehne{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;height:430px;margin:26px auto 0}
  .reel-lauf{gap:9px}
  .reel-spalte:nth-child(n+4){display:none}
  .reel figcaption{padding:22px 5px 8px;gap:4px}
  .reel-views{font-size:12px;gap:4px}
  .reel-views::before{width:13px;height:13px}
  .reel{border-width:2px;border-radius:12px}
  .reelwand .btn-insta{margin-top:30px}

  .gallery{padding:40px 20px}
  .section-head .script{font-size:30px}
  .section-head h2{font-size:26px}
  /* Drei Bilder: einspaltig, damit keine Kachel allein steht */
  .gallery-grid{grid-template-columns:1fr;gap:14px;margin-top:24px}
  .gallery-grid .ph{height:420px;border-radius:12px;border-width:2px}
  .gallery-grid .ph:nth-child(3n+2){transform:none}
  .btn-insta{margin-top:32px;width:100%}

  .brands{padding:40px 20px}
    

  .blocks{gap:14px;margin-top:26px}
  .blocks > .block{flex:1 1 100%}
  .blocks-note{
    margin-top:16px;border-radius:16px;padding:24px 22px;
    flex-direction:column;align-items:flex-start;gap:20px;text-align:left;
  }
  .blocks-note h3{font-size:20px}
  .note-aktionen{width:100%;flex-direction:column;gap:10px}
  .blocks-note .btn{width:100%;padding:16px}
  .block{border-radius:16px;padding:26px 22px 22px}
  .block-icon{width:50px;height:50px;margin-bottom:18px}
  .block-icon svg{width:24px;height:24px}
  .block-num{font-size:38px;top:16px;right:20px}
  .block h3{font-size:22px}
  .longterm{
    margin-top:16px;border-radius:16px;padding:26px 22px;
    grid-template-columns:1fr;gap:18px;text-align:center;
  }
  .longterm .script{
    font-size:30px;white-space:normal;
    padding:0 0 18px;border-right:0;border-bottom:1px solid rgba(239,194,74,.42);
  }

  .amazon{padding:44px 20px}
  .storefront-inner .script{font-size:30px}
  .storefront-inner h2{font-size:26px}
  .storefront-quote{margin-top:16px;font-size:16px;line-height:1.6}
  .storefront-inner .btn-gold{display:block;margin-top:24px;padding:17px}

  .contact{padding:44px 20px}
  .contact-inner > .script{font-size:30px}
  .contact-inner h2{font-size:34px}
  .contact-intro{margin-top:14px;font-size:16px}
  .contact-card{margin-top:24px;border-radius:16px;padding:26px}
  .contact-card img{height:52px;width:52px}
  .contact-card h3{font-size:22px}

  .site-footer{flex-direction:column;text-align:center;padding:24px 20px}
  .footer-links{justify-content:center;gap:6px 14px}
  .footer-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px}
}