/* ==========================================================================
   Schriften vom eigenen Server. Bewusst kein Google-CDN: die Datenschutz-
   erklärung sagt zu, dass keine Verbindung zu Google-Servern aufgebaut wird.
   Neu erzeugen mit: python3 _dev/build-fonts.py
   ========================================================================== */
@font-face{
  font-family:'Jost';
  src:url('../fonts/jost-variable.woff2') format('woff2-variations'),
      url('../fonts/jost-variable.woff2') format('woff2');
  font-weight:200 600;
  font-style:normal;
  font-display:swap;
}
@font-face{ font-family:'Montserrat'; src:url('../fonts/montserrat-300.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:'Montserrat'; src:url('../fonts/montserrat-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Montserrat'; src:url('../fonts/montserrat-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Montserrat'; src:url('../fonts/montserrat-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:'Montserrat'; src:url('../fonts/montserrat-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }

/* ==========================================================================
   Rebecca Maria Jesske — Site Styles
   Ergänzt Tailwind um Typografie-Details, Split-Headline, Marquee,
   3D-Buch-Mockup und Scroll-Reveals.
   ========================================================================== */

:root{
  --raspberry:#E14965;   /* Buchfarbe / Primär */
  --crushed:#BF3054;     /* Crushed Raspberry */
  --blush:#EBA2B9;       /* Blush Raspberry */
  --cream:#F9EBF2;       /* Raspberry Cream */
  --noir:#260309;        /* Raspberry Noir */
  --sand:#F3EDE7;

  /* Grünfamilie – reserviert für das Event. Pink bleibt der Community
     vorbehalten, so trennt die Farbe das Einmalige vom Dauerhaften. */
  --forest:#1B3A31;   /* dunkle Fläche, Weiß darauf 12,4:1 */
  --fern:#2F5A4C;     /* Grün als Text auf Hell, 7,7:1 */
  --sage:#EEF3F0;     /* sehr helle Fläche */
  --mint:#B5D3C6;     /* heller Akzent auf Dunkelgrün, 7,7:1 */

  --paper:#FFFCFA;
  --ink:#2B1A1F;

  --shell-x: 6%;         /* horizontale Innenabstände der Hero-Bühne */
  --split: 100%;         /* Farbkante der Headline (mobil: alles dunkel) */
}

/* ---------- Basis ---------- */
html{ scroll-behavior:smooth; }
body{
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{ background:var(--raspberry); color:#fff; }

/* Sichtbarer, markenkonformer Fokus */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--raspberry);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- Typo-Utilities ---------- */
.display{
  font-family:'Jost',ui-sans-serif,system-ui,sans-serif;
  font-weight:300;
  line-height:.86;
  letter-spacing:-.015em;
  text-transform:uppercase;
}
.display--lower{ text-transform:none; letter-spacing:-.02em; }

.eyebrow{
  font-size:.6875rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  font-weight:600;
}
.serif-quote{
  font-family:'Jost',ui-sans-serif,system-ui,sans-serif;
  font-weight:300;
  line-height:1.22;
  letter-spacing:-.01em;
}
.measure{ max-width:64ch; }

/* Handgezeichneter Kreis um ein Wort – wie in der Buchseiten-Referenz. */
.circled{ position:relative; display:inline-block; }
.circled::after{
  content:"";
  position:absolute;
  left:-15%; right:-14%; top:-22%; bottom:-10%;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 92' preserveAspectRatio='none'><path d='M26 60 C4 36 26 11 78 7 C134 3 192 15 195 42 C198 69 138 88 82 86 C42 83 16 73 13 52' fill='none' stroke='%23E14965' stroke-width='1.9' stroke-linecap='round' vector-effect='non-scaling-stroke'/></svg>") no-repeat center;
  background-size:100% 100%;
  pointer-events:none;
}


/* Jost zeichnet den Gedankenstrich mit 0,74 em ungewöhnlich breit. In
   Displaygrößen wird er deshalb aus Montserrat gezogen (0,5 em). */
.display .dash, .serif-quote .dash{ font-family:'Montserrat', ui-sans-serif, sans-serif; }

/* Dünne Trennlinie mit Punkt – wiederkehrendes Detail */
.rule{
  display:flex; align-items:center; gap:.75rem;
}
.rule::after{
  content:""; flex:1 1 auto; height:1px;
  background:currentColor; opacity:.25;
}

/* ---------- Hero: überlappende Split-Headline ---------- */
.hero-shell{ position:relative; overflow:hidden; }
.hero-inner{ padding-inline:var(--shell-x); }

/* Zwei deckungsgleiche Ebenen, an der Bildkante hart beschnitten:
   links dunkel auf Creme, rechts hell auf dem Foto. */
.split-title{ position:relative; display:block; }
.split-title__layer{
  display:block;
  grid-area:1/1;
  /* Jost zieht das große „J“ mit einem Bogen unter die Grundlinie. Bei
     line-height .86 ragt der aus der Box heraus und würde vom clip-path
     abgeschnitten. Padding vergrößert die Clipping-Box, der negative
     Außenabstand nimmt den Platz im Layout wieder zurück. */
  padding-block:.28em;
  margin-block:-.28em;
}
.split-title__stack{ display:grid; }
.name-line{ display:block; }
.split-title__layer--dark{
  color:var(--noir);
  clip-path:inset(0 calc(100% - var(--split)) 0 0);
}
.split-title__layer--light{
  color:#fff;
  clip-path:inset(0 0 0 var(--split));
  text-shadow:0 2px 30px rgba(38,3,9,.28);
}

@media (min-width:1024px){
  :root{ --split:52.3%; }  /* = (52% Bildkante − 6% Padding) / 88% Textbreite */

}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.7rem;
  padding:1.0625rem 2.25rem;
  font-size:.6875rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  border:1px solid transparent;
  cursor:pointer;
  transition:background-color .22s ease, color .22s ease,
             border-color .22s ease, box-shadow .22s ease;
}
.btn svg{ transition:transform .22s ease; }
.btn:hover svg{ transform:translateX(4px); }

.btn--primary{ background:var(--crushed); color:#fff; }
.btn--primary:hover{ background:#9C2445; box-shadow:0 12px 28px -12px rgba(191,48,84,.7); }

.btn--outline{ background:transparent; color:var(--noir); border-color:rgba(38,3,9,.35); }
.btn--outline:hover{ background:var(--noir); color:#fff; border-color:var(--noir); }

.btn--ghost-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.btn--ghost-light:hover{ background:#fff; color:var(--noir); border-color:#fff; }

.btn--book{ background:var(--raspberry); color:var(--noir); }
.btn--book:hover{ background:#F15B7C; box-shadow:0 12px 28px -12px rgba(225,73,101,.8); }

.btn--forest{ background:var(--forest); color:#fff; }
.btn--on-forest{ background:#fff; color:var(--forest); }   /* 12,7:1 */
.btn--on-forest:hover{ background:var(--mint); color:var(--forest); }
.btn--forest:hover{ background:var(--fern); box-shadow:0 12px 28px -12px rgba(27,58,49,.8); }

.btn--cream{ background:var(--cream); color:var(--crushed); }
.btn--cream:hover{ background:#fff; }

/* Kompakter Button in der Navigation */
.btn--sm{ padding:.8125rem 1.375rem; letter-spacing:.18em; }

/* ---------- Link mit Unterstrich-Animation ---------- */
.link-underline{
  position:relative; display:inline-flex; align-items:center; gap:.55rem;
}
.link-underline::after{
  content:""; position:absolute; left:0; right:0; bottom:-.35rem;
  height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:left;
  transition:transform .28s ease;
}
.link-underline:hover::after{ transform:scaleX(1); }

/* Navigation */
.nav-link{ position:relative; }
.nav-link::after{
  content:""; position:absolute; left:0; bottom:-6px; width:100%; height:1px;
  background:var(--raspberry);
  transform:scaleX(0); transform-origin:right;
  transition:transform .3s ease;
}
.nav-link:hover::after, .nav-link[aria-current="page"]::after{
  transform:scaleX(1); transform-origin:left;
}

/* ---------- 3D-Buch-Mockup ----------
   Wichtig: kein box-shadow auf dem Cover. Die 3D-Drehung verzerrt ihn zu einer
   schrägen grauen Platte unter dem Buch. Die Schatten liegen stattdessen als
   eigene, nicht gedrehte Ebenen hinter dem Buch.                              */
.book{ position:relative; perspective:2000px; }

.book__inner{
  position:relative; z-index:2;
  transform-style:preserve-3d;
  transform:rotateY(20deg) rotateX(1.5deg);
  transition:transform .7s cubic-bezier(.22,1,.36,1);
}
.book:hover .book__inner{ transform:rotateY(13deg) rotateX(1deg); }

.book__cover{
  display:block; width:100%; height:auto;
  position:relative; z-index:2;
}

/* Falz-Schatten am Bund. Getönt statt schwarz, damit das Pink gesättigt bleibt. */
.book__cover-shade{
  position:absolute; inset:0 auto 0 0; width:7%; z-index:3;
  pointer-events:none;
  background:linear-gradient(90deg,
    rgba(38,3,9,.3) 0%, rgba(38,3,9,.1) 45%, rgba(38,3,9,0) 100%);
}

.book__spine{
  position:absolute; top:0; left:0; height:100%; width:34px;
  transform-origin:right center;
  transform:translateX(-100%) rotateY(-90deg);
  background:var(--raspberry);
  overflow:hidden;
}
.book__spine img{ width:100%; height:100%; object-fit:cover; display:block; }
.book__spine::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(38,3,9,.18), rgba(38,3,9,0) 70%);
}

/* Der Schatten liegt ausschließlich an der Standkante – ein breiter Seiten-
   schatten wirkt bei einem so satten Pink wie grauer Dunst. Beide Ebenen sind
   nicht Teil des 3D-Raums, sonst verzieht die Drehung sie mit.               */
.book__shadow{ position:absolute; z-index:0; pointer-events:none; }
.book__shadow--ambient{          /* weicher Bodenschatten */
  left:-2%; right:-2%; bottom:-4%; height:9%;
  background:rgba(38,3,9,.26);
  border-radius:50%;
  filter:blur(20px);
  transform:rotate(-5deg);
}
.book__shadow--contact{          /* schmale, dunklere Auflagekante */
  left:6%; right:13%; bottom:-.5%; height:2.4%;
  background:rgba(38,3,9,.45);
  border-radius:50%;
  filter:blur(6px);
  transform:rotate(-5deg);
}

/* ---------- Testimonial-Slider ---------- */
.slide{
  opacity:0; visibility:hidden;
  transition:opacity .5s ease;
  grid-area:1/1;
}
.slide[data-active="true"]{ opacity:1; visibility:visible; }

/* ---------- Scroll-Reveal ---------- */
.js .reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
}
.js .reveal.is-visible{ opacity:1; transform:none; }
.js .reveal[data-delay="1"]{ transition-delay:.09s; }
.js .reveal[data-delay="2"]{ transition-delay:.18s; }
.js .reveal[data-delay="3"]{ transition-delay:.27s; }

/* ---------- Formular ---------- */
.field{
  width:100%;
  background:transparent;
  border:0; border-bottom:1px solid rgba(38,3,9,.22);
  padding:.85rem 0;
  font-size:1rem;
  color:var(--ink);
  transition:border-color .25s ease;
}
.field::placeholder{ color:rgba(43,26,31,.6); }
.field:focus{ outline:none; border-bottom-color:var(--raspberry); }
.field:focus-visible{ outline:none; }
select.field{ -webkit-appearance:none; appearance:none; border-radius:0; }

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js .reveal{ opacity:1; transform:none; transition:none; }
  .book__inner{ transition:none; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ---------- Rechtsseiten: Fließtext ---------- */
.prose{
  max-width:72ch;
  /* min-width:0 verhindert, dass eine lange URL das Grid aufbläht;
     overflow-wrap:anywhere erlaubt den Umbruch mitten in der Adresse. */
  min-width:0;
}
.prose a{ overflow-wrap:anywhere; }
.prose p, .prose li{ overflow-wrap:break-word; }
.prose > * + *{ margin-top:1.05em; }
.prose h2{
  font-family:'Jost', ui-sans-serif, system-ui, sans-serif;
  font-weight:300;
  font-size:clamp(1.5rem,3.2vw,2.25rem);
  line-height:1.1;
  letter-spacing:-.01em;
  text-transform:uppercase;
  color:var(--noir);
  margin-top:3.25em;
  scroll-margin-top:7rem;
}
.prose h2:first-child{ margin-top:0; }
.prose h3{
  font-family:'Jost', ui-sans-serif, system-ui, sans-serif;
  font-weight:500;
  font-size:1.1875rem;
  line-height:1.3;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--noir);
  margin-top:2.25em;
}
.prose h4{
  font-size:.9375rem;
  font-weight:700;
  color:var(--noir);
  margin-top:1.75em;
}
.prose p, .prose li{
  font-size:.9375rem;
  line-height:1.85;
  color:var(--ink);
  opacity:.86;
}
.prose ul{ padding-left:1.15rem; list-style:none; }
.prose ul li{ position:relative; padding-left:1rem; }
.prose ul li + li{ margin-top:.5em; }
.prose ul li::before{
  content:""; position:absolute; left:0; top:.85em;
  width:5px; height:5px; border-radius:50%; background:var(--raspberry);
}
.prose a{ color:var(--crushed); text-decoration:underline; text-underline-offset:2px; }
.prose a:hover{ color:var(--noir); }
.prose strong{ font-weight:600; color:var(--noir); opacity:1; }
.prose address{ font-style:normal; }
/* Blockzitat für die Passagen in Versalien (Widerspruchsrecht) */
.prose .shout{
  font-size:.8125rem;
  line-height:1.8;
  letter-spacing:.01em;
  background:var(--cream);
  padding:1.5rem;
  border-left:2px solid var(--raspberry);
  opacity:1;
}

/* Inhaltsverzeichnis der Datenschutzerklärung */
.toc{ list-style:none; padding:0; margin:0; display:grid; gap:.6rem; }
.toc a{
  display:inline-flex; gap:.75rem; align-items:baseline;
  font-size:.875rem; color:var(--ink); text-decoration:none;
}
.toc a:hover{ color:var(--crushed); }
.toc .num{
  font-size:.6875rem; font-weight:700; letter-spacing:.14em;
  color:var(--crushed); min-width:1.5rem;
}

/* ── Seitenverhältnisse für Bilder ─────────────────────────────────────────
   Ersetzt die früheren style="aspect-ratio:…"-Attribute, damit die
   Content-Security-Policy ohne 'unsafe-inline' für Styles auskommt. */
.ar-3-2{ aspect-ratio:3/2; }
.ar-4-3{ aspect-ratio:4/3; }
.ar-5-4{ aspect-ratio:5/4; }
.ar-4-5{ aspect-ratio:4/5; }