/* ============================================================
   GEMEINSAME GRUNDLAGE — gilt für alle Seiten (index, ueber-mich,
   freebie, angebot, impressum, datenschutz).

   Design-Regel: Farben, Schriften, Abstände nur HIER ändern,
   niemals hart in einer einzelnen Seite. Ändert sich hier zum
   Beispiel die Markenfarbe, zieht automatisch jede Seite nach.

   Seiten-eigene Layout-Regeln (welche Spalten eine Section hat,
   eigene Komponenten wie .steps oder .qual-grid) stehen bewusst
   im <style>-Block der jeweiligen Seite — die Grundlage hier ist
   für alle Seiten identisch.
   ============================================================ */

/* Eigene, lokal gehostete Schriften statt Google Fonts vom CDN.
   Das ist der einzige externe Request, den das Original-Template
   hatte — dadurch komplett entfernt, kein Cookie-Banner mehr nötig. */
@font-face{
  font-family:"Fraunces";
  src:url("fonts/fraunces-latin.woff2") format("woff2");
  font-weight:400 600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("fonts/inter-latin.woff2") format("woff2");
  font-weight:400 600;
  font-style:normal;
  font-display:swap;
}

:root{
  /* Markenfarben Ukulelenwelt — fröhlich, warm, kindgerecht.
     Sonnengelb ist die Hauptfarbe, Koralle der Aufmerksamkeits-
     Akzent (Buttons, aktive Zustände), Türkis die ruhige
     Gegenfarbe. Alles andere ist bewusst warm getönt statt
     neutral-grau, damit die Seite freundlich wirkt. */
  --sun:#ffc233;
  --sun-soft:#ffe9a8;
  --coral:#ff6a4d;
  --coral-dark:#e8482a;
  --turquoise:#159f9c;
  --turquoise-soft:#d3f0ef;

  /* Die Namen unten bleiben wie in der Vorlage (--black, --gray …),
     damit alle Seiten weiter funktionieren — die Werte sind aber
     keine reinen Graustufen mehr, sondern warm eingefärbt. */
  --black:#26313d;
  --charcoal:#3c4a57;
  --gray-dark:#5d6b78;
  --gray:#93a0aa;
  --gray-light:#c8d3da;
  --gray-lighter:#ece4d6;
  --off-white:#fff9ef;
  --white:#ffffff;

  --display:"Fraunces", serif;
  --body:"Inter", sans-serif;

  --max-width:1120px;
  --radius:18px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  font-family:var(--body);
  color:var(--charcoal);
  background:var(--off-white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:var(--display);
  font-weight:500;
  color:var(--black);
  line-height:1.15;
}

.wrap{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 32px;
}

section{
  padding:100px 0;
  border-bottom:1px solid var(--gray-lighter);
}

.eyebrow{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--body);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gray-dark);
  margin-bottom:22px;
}
.eyebrow .num{
  font-family:var(--display);
  font-style:italic;
  font-size:15px;
  color:var(--coral);
}

.placeholder-h{ font-size:clamp(28px, 4vw, 44px); margin-bottom:18px; }
.placeholder-p{ color:var(--gray-dark); font-size:17px; max-width:640px; }

.tip{
  margin-top:28px;
  padding:16px 20px;
  border:1px dashed var(--gray-light);
  background:var(--white);
  border-radius:var(--radius);
  font-size:13.5px;
  color:var(--gray-dark);
  max-width:640px;
}
.tip strong{ color:var(--black); }

/* Buttons sind rund und knallig — das ist der Hauptgrund, warum die
   Seite freundlich statt streng wirkt. Koralle zieht den Blick,
   Sonnengelb ist die ruhigere Zweitvariante. */
.btn{
  display:inline-block;
  margin-top:32px;
  padding:16px 36px;
  background:var(--coral);
  color:var(--white);
  font-family:var(--body);
  font-size:15px;
  font-weight:600;
  letter-spacing:0.01em;
  text-decoration:none;
  border:2px solid var(--coral);
  border-radius:999px;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
  cursor:pointer;
}
.btn:hover, .btn:focus-visible{ background:var(--coral-dark); border-color:var(--coral-dark); color:var(--white); transform:translateY(-2px); }
.btn-sun{ background:var(--sun); border-color:var(--sun); color:var(--black); }
.btn-sun:hover, .btn-sun:focus-visible{ background:var(--black); border-color:var(--black); color:var(--white); }
.btn-ghost{ background:transparent; color:var(--black); border-color:var(--black); }
.btn-ghost:hover{ background:var(--black); color:var(--white); }
.btn-inverse{ background:var(--white); color:var(--black); border-color:var(--white); }
.btn-inverse:hover{ background:var(--sun); border-color:var(--sun); color:var(--black); }

.microcopy{ font-size:12px; color:var(--gray); margin-top:12px; }

/* ===== NAVIGATION ===== */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(244,244,242,0.9);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--gray-lighter);
}
nav.wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:76px;
}
.logo{
  font-family:var(--display);
  font-size:20px;
  color:var(--black);
  letter-spacing:0.02em;
  text-decoration:none;
}
.nav-links{
  display:flex;
  gap:28px;
  list-style:none;
  font-size:14px;
  color:var(--gray-dark);
}
.nav-links a{ color:inherit; text-decoration:none; }
.nav-cta{
  padding:11px 24px;
  border:2px solid var(--coral);
  border-radius:999px;
  background:var(--coral);
  font-size:13.5px;
  font-weight:600;
  color:var(--white);
  text-decoration:none;
  transition:background .2s ease, border-color .2s ease;
}
.nav-cta:hover, .nav-cta:focus-visible{ background:var(--coral-dark); border-color:var(--coral-dark); }
@media(max-width:760px){ .nav-links{ display:none; } }
/* Auf schmalen Handys brach der CTA-Text zweizeilig um und schob sich
   über das Logo — deshalb hier kompakter und ohne Umbruch. */
@media(max-width:520px){
  .logo{ font-size:18px; }
  .nav-cta{ padding:9px 16px; font-size:12.5px; white-space:nowrap; }
  nav.wrap{ padding:0 20px; gap:12px; }
}

/* ===== JOURNEY DOTS — Signatur-Element, zeigt die emotionale
   Reise der Besucherin anhand der Scrollposition. Logik dazu in
   journey.js, funktioniert automatisch auf jeder Seite mit
   section[data-stage]-Markup. ===== */
.journey{
  position:fixed;
  right:26px;
  top:50%;
  transform:translateY(-50%);
  z-index:40;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.journey .dot{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--gray-light);
  transition:all .25s ease;
  position:relative;
}
.journey .dot.active{ background:var(--coral); transform:scale(1.6); }
.journey .dot::after{
  content:attr(data-label);
  position:absolute;
  right:20px; top:50%;
  transform:translateY(-50%);
  font-size:11px;
  white-space:nowrap;
  color:var(--black);
  background:var(--off-white);
  padding:3px 8px;
  border:1px solid var(--gray-lighter);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}
.journey .dot:hover::after{ opacity:1; }
@media(max-width:900px){ .journey{ display:none; } }

/* ===== WIEDERKEHRENDE BAUSTEINE ===== */
.input-slot{
  padding:14px 18px;
  border:1px solid var(--gray-light);
  border-radius:999px;
  background:var(--white);
  font-size:14px;
  color:var(--gray);
  min-width:180px;
  flex:1;
}
.cta-box{ display:flex; gap:10px; flex-wrap:wrap; margin-top:28px; }
.cta-note{ font-size:12px; color:var(--gray); margin-top:10px; max-width:420px; }

.img-slot{
  aspect-ratio:4/5;
  background:repeating-linear-gradient(135deg, var(--sun-soft), var(--sun-soft) 10px, var(--off-white) 10px, var(--off-white) 20px);
  border:1px solid var(--gray-light);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; color:var(--gray-dark);
  text-align:center;
  padding:20px;
}

.avatar-slot{
  width:44px; height:44px;
  border-radius:50%;
  background:var(--gray-lighter);
  border:1px solid var(--gray-light);
  margin-bottom:16px;
}
.avatar-slot-large{
  aspect-ratio:1/1;
  border-radius:50%;
  background:var(--gray-lighter);
  border:1px solid var(--gray-light);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; color:var(--gray-dark); text-align:center; padding:20px;
}
/* Sobald ein echtes Foto drin liegt, statt des Platzhalters:
   Klasse "has-photo" ergänzen — dann füllt das Bild den Kreis
   randlos aus. Gilt genauso für .img-slot. */
.has-photo{ padding:0; border:none; overflow:hidden; background:none; }
.has-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Bildband über die volle Fensterbreite — als optischer Trenner
   zwischen zwei Abschnitten. Die Höhe wächst nur begrenzt mit dem
   Fenster mit, damit der Streifen nie zu hoch wird; der Ausschnitt
   des Fotos wird dabei automatisch beschnitten statt gestaucht. */
.photo-band{ width:100%; overflow:hidden; }
.photo-band img{
  display:block;
  width:100%;
  height:clamp(170px, 24vw, 330px);
  object-fit:cover;
  /* Nicht mittig, sondern etwas tiefer angesetzt — sonst wird
     die Kopfplatte der Ukulele unten abgeschnitten. */
  object-position:center 72%;
}

.logo-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:48px; }
.logo-slot{
  width:126px; height:40px;
  border:1px dashed var(--gray-light);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; color:var(--gray);
  text-align:center;
}

.testi-grid{ margin-top:44px; display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; }
.testi-card{ background:var(--white); border:1px solid var(--gray-lighter); border-radius:var(--radius); padding:28px; }
.testi-card p{ font-size:14.5px; color:var(--gray-dark); font-style:italic; }
.testi-card .name, .testi-card .testi-name{ margin-top:14px; font-size:13px; color:var(--black); font-weight:600; }
@media(max-width:820px){ .testi-grid{ grid-template-columns:1fr; } }

.numbers-row{ display:flex; flex-wrap:wrap; gap:24px 40px; }
.numbers-row div{ text-align:left; }
.numbers-row .n{ font-family:var(--display); font-size:34px; color:var(--turquoise); }
.numbers-row .l{ font-size:12px; color:var(--gray-dark); max-width:150px; }

footer{
  background:var(--off-white);
  border-top:1px solid var(--gray-lighter);
  padding:36px 0;
  font-size:13px;
  color:var(--gray);
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:16px;
}
footer a{ color:var(--gray); margin-left:18px; text-decoration:none; }
footer a:first-child{ margin-left:0; }

/* ===== RECHTSSEITEN (Impressum, Datenschutz) ===== */
.legal-wrap{
  max-width:760px;
  margin:0 auto;
  padding:100px 32px 120px;
}
.legal-wrap h1{ font-size:clamp(30px, 4vw, 42px); margin-bottom:12px; }
.legal-intro{
  color:var(--gray-dark);
  font-size:15px;
  max-width:560px;
  margin-bottom:56px;
  padding-bottom:32px;
  border-bottom:1px solid var(--gray-lighter);
}
.legal-block{ padding:36px 0; border-bottom:1px solid var(--gray-lighter); }
.legal-block:last-of-type{ border-bottom:none; }
.legal-block h2{ font-size:20px; margin-bottom:14px; }
.legal-block h3{ font-family:var(--body); font-weight:600; color:var(--charcoal); font-size:15px; margin:20px 0 8px; }
.legal-block .num{ font-family:var(--display); font-style:italic; color:var(--gray); font-size:13px; margin-right:6px; }
.legal-field{ font-size:15.5px; color:var(--charcoal); margin-bottom:6px; }
.legal-field .fill{ color:var(--gray); border-bottom:1px dashed var(--gray-light); padding-bottom:1px; }
.legal-block p{ font-size:14.5px; color:var(--gray-dark); max-width:600px; }
.legal-block p + p{ margin-top:10px; }
a.link{ color:var(--black); }
.legal-footer{ max-width:760px; margin:0 auto; padding:0 32px 60px; font-size:13px; color:var(--gray); }