/* ============================================================
   TATJANA KULCSAR — Component Styles  (Prefix: .ds-)
   ------------------------------------------------------------
   Fassung 2 — lebendiger und farbiger nach Jans Vorgaben.
   Gerüst bleibt editorial (Raster, Haarlinien, klare Satzbreite),
   aber die Flächen sind jetzt farbig bespielt: helles Salbeigrün
   und tiefes Waldgrün, Altrosa, schimmerndes Gold.

   Schrift-Hierarchie (wichtig):
   - Playfair Display 700 trägt ALLE Überschriften. Sie ist die
     schwere Schrift, damit nichts mehr übersehen wird.
   - Cormorant bleibt nur den ganz großen Display-Zeilen.
   - Caveat setzt Handschrift-Akzente.
   Alle Werte kommen aus tokens.css — keine Rohfarben.
   ============================================================ */

/* ============ Basis ============ */
.ds{font-family:var(--ds-font-body);color:var(--ds-text);
  font-weight:var(--ds-w-body);
  font-feature-settings:"kern" 1,"liga" 1;-webkit-font-smoothing:antialiased}
.ds-primary-text{color:var(--ds-primary)}

/* Haarlinie — jetzt mit Goldschimmer statt flacher Farbe. */
.ds-rule{border:0;height:2px;background:var(--ds-gold-shimmer);
  opacity:.75;border-radius:2px;margin:var(--ds-s-lg) 0}
.ds-rule--fine{height:1px;background:var(--ds-hairline);opacity:1}

/* Zierschrift in schimmerndem Gold (Verlauf im Text). */
.ds-gold-text{background:var(--ds-gold-shimmer);-webkit-background-clip:text;
  background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* ============ Kicker (Mono) ============ */
.ds-kicker{
  font-family:var(--ds-font-mono);font-weight:500;font-size:var(--ds-t-kicker);
  letter-spacing:.18em;text-transform:uppercase;color:var(--ds-ink-2);
  display:inline-flex;align-items:center;gap:10px;
}
.ds-kicker::before{content:"";width:26px;height:2px;flex:none;border-radius:2px;
  background:var(--ds-gold-shimmer)}
.ds-kicker--blank::before{display:none}

/* ============ Handschrift-Akzent ============ */
.ds-script{font-family:var(--ds-font-script);font-weight:600;
  font-size:clamp(26px,3.4vw,40px);line-height:1.15;color:var(--ds-primary)}
.ds-script--gold{background:var(--ds-gold-shimmer);-webkit-background-clip:text;
  background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.ds-script--green{color:var(--ds-green)}

/* ============ Button ============ */
.ds-btn{
  font-family:var(--ds-font-body);font-weight:700;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:none;cursor:pointer;border-radius:var(--ds-r-full);
  padding:15px 30px;font-size:15px;letter-spacing:.01em;
  transition:background-color var(--ds-dur) var(--ds-ease),
             color var(--ds-dur) var(--ds-ease),
             box-shadow var(--ds-dur) var(--ds-ease);
}
/* Bewusst kein Hüpfen/Skalieren: die Marke verspricht Ruhe.
   Zustandswechsel laufen über Farbe und Fläche, nicht über Bewegung. */
.ds-btn:focus-visible{outline:none;box-shadow:var(--ds-focus-ring)}
.ds-btn--sm{padding:11px 20px;font-size:13px}
.ds-btn--lg{padding:18px 38px;font-size:16px}
.ds-btn--block{width:100%}

.ds-btn--primary{background:var(--ds-primary);color:var(--ds-on-primary);box-shadow:var(--ds-e-1)}
.ds-btn--primary:hover{background:var(--ds-primary-600)}

.ds-btn--green{background:var(--ds-green);color:var(--ds-on-green);box-shadow:var(--ds-e-1)}
.ds-btn--green:hover{background:var(--ds-green-mid)}

/* Goldrahmen mit Schimmer — für zurückhaltende, festliche Aktionen. */
.ds-btn--gold{background:var(--ds-paper);color:var(--ds-gold);
  box-shadow:inset 0 0 0 2px var(--ds-gold-mid)}
.ds-btn--gold:hover{background:var(--ds-gold-light);color:var(--ds-on-light)}

.ds-btn--tonal{background:var(--ds-primary-soft);color:var(--ds-primary)}
.ds-btn--tonal:hover{background:color-mix(in srgb, var(--ds-primary) 18%, var(--ds-paper))}

.ds-btn--outline{background:transparent;color:var(--ds-primary);box-shadow:inset 0 0 0 2px var(--ds-primary)}
.ds-btn--outline:hover{background:var(--ds-primary-soft)}

.ds-btn--ghost{background:transparent;color:var(--ds-text);padding-left:10px;padding-right:10px}
.ds-btn--ghost:hover{color:var(--ds-primary)}

.ds-btn:disabled,.ds-btn--disabled{background:var(--ds-n-100);color:var(--ds-n-400);cursor:not-allowed;box-shadow:none}

/* ============ IconButton ============ */
.ds-iconbtn{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:var(--ds-r-full);cursor:pointer;
  background:transparent;border:2px solid var(--ds-n-300);color:var(--ds-ink);
  transition:border-color var(--ds-dur) var(--ds-ease),color var(--ds-dur) var(--ds-ease),background-color var(--ds-dur) var(--ds-ease);
}
.ds-iconbtn:hover{border-color:var(--ds-primary);color:var(--ds-primary)}
.ds-iconbtn:focus-visible{outline:none;box-shadow:var(--ds-focus-ring)}
.ds-iconbtn--solid{background:var(--ds-primary);color:var(--ds-on-primary);border-color:transparent}
.ds-iconbtn--solid:hover{background:var(--ds-primary-600);color:var(--ds-on-primary)}

/* ============ Card ============ */
.ds-card{background:var(--ds-surface);border:1px solid var(--ds-border);
  border-radius:var(--ds-r-lg);padding:var(--ds-s-lg)}
.ds-card--elevated{box-shadow:var(--ds-e-2);border-color:transparent}
/* Grüne Fläche — das lebendige Pendant zur weißen Karte. */
.ds-card--green{background:var(--ds-green-soft);border-color:transparent}
/* Goldrahmen mit Schimmer, wie der Rand einer Urkunde. */
.ds-card--gold{background:var(--ds-surface);border:2px solid transparent;
  background-image:linear-gradient(var(--ds-surface),var(--ds-surface)),var(--ds-gold-shimmer);
  background-origin:border-box;background-clip:padding-box,border-box}
/* Die ruhige Variante trägt nur eine Goldlinie oben — kein Kasten. */
.ds-card--quiet{background:transparent;border:0;border-radius:0;padding:var(--ds-s-lg) 0 0;
  border-top:2px solid transparent;
  background-image:var(--ds-gold-shimmer);background-repeat:no-repeat;
  background-size:100% 2px;background-position:top left}
.ds-card__kicker{font-family:var(--ds-font-mono);font-weight:500;font-size:var(--ds-t-kicker);
  letter-spacing:.18em;text-transform:uppercase;color:var(--ds-ink-2)}
.ds-card__title{font-family:var(--ds-font-head);font-weight:var(--ds-w-head);font-size:24px;
  line-height:1.2;margin:10px 0 8px;color:var(--ds-ink)}
.ds-card__body{font-size:var(--ds-t-body);line-height:1.65;color:var(--ds-text-2)}

/* ============ Chip ============ */
.ds-chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--ds-font-body);
  font-weight:600;font-size:14px;padding:8px 16px;border-radius:var(--ds-r-full);
  background:transparent;border:2px solid var(--ds-n-300);color:var(--ds-ink)}
.ds-chip--solid{background:var(--ds-primary);color:var(--ds-on-primary);border-color:transparent}
.ds-chip--tonal{background:var(--ds-primary-soft);color:var(--ds-primary);border-color:transparent}
.ds-chip--nature{background:var(--ds-green-light);color:var(--ds-on-tint);border-color:transparent}
.ds-chip--rose{background:var(--ds-rose-light);color:var(--ds-on-tint);border-color:transparent}
.ds-chip--gold{background:var(--ds-gold-light);color:var(--ds-on-light);border-color:transparent}

/* ============ Badge ============ */
.ds-badge{display:inline-flex;align-items:center;font-family:var(--ds-font-mono);font-weight:500;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;
  border-radius:var(--ds-r-full);color:var(--ds-on-solid)}
.ds-badge--primary{background:var(--ds-primary);color:var(--ds-on-primary)}
.ds-badge--green{background:var(--ds-green);color:var(--ds-on-green)}
.ds-badge--gold{background:var(--ds-gold-light);color:var(--ds-on-light)}
.ds-badge--sage{background:var(--ds-green-light);color:var(--ds-on-tint)}
.ds-badge--rose{background:var(--ds-rose);color:var(--ds-on-solid)}
.ds-badge--success{background:var(--ds-success);color:var(--ds-on-solid)}
.ds-badge--warning{background:var(--ds-warning);color:var(--ds-on-solid)}
.ds-badge--danger{background:var(--ds-danger);color:var(--ds-on-solid)}
.ds-badge--neutral{background:var(--ds-n-500);color:var(--ds-on-solid)}

/* ============ Input ============ */
.ds-field{display:flex;flex-direction:column;gap:8px}
.ds-field__label{font-family:var(--ds-font-mono);font-weight:500;font-size:var(--ds-t-kicker);
  letter-spacing:.16em;text-transform:uppercase;color:var(--ds-ink-2)}
.ds-input{display:flex;align-items:center;gap:10px;background:transparent;
  border:0;border-bottom:2px solid var(--ds-n-300);border-radius:0;padding:11px 2px;
  transition:border-color var(--ds-dur) var(--ds-ease)}
.ds-input:focus-within{border-bottom-color:var(--ds-primary)}
.ds-input input{border:none;outline:none;width:100%;background:transparent;
  font-family:var(--ds-font-body);font-weight:var(--ds-w-body);
  font-size:var(--ds-t-body);color:var(--ds-ink)}
.ds-input input::placeholder{color:var(--ds-n-400)}
.ds-input__icon{color:var(--ds-n-400);display:inline-flex;flex-shrink:0}
.ds-input--boxed{border:2px solid var(--ds-n-300);border-radius:var(--ds-r-md);padding:13px 15px}
.ds-input--boxed:focus-within{border-color:var(--ds-primary);box-shadow:var(--ds-focus-ring)}

/* ============ Icon ============ */
.ds-icon{display:inline-block;vertical-align:middle}
.ds-icon svg{display:block;stroke:currentColor;fill:none}
.ds-icon--filled svg{fill:currentColor;stroke:none}

/* ============ Typografie ============ */
.ds-type{display:flex;flex-direction:column;gap:var(--ds-s-lg)}
.ds-type__row{display:flex;flex-direction:column;gap:6px;padding-bottom:var(--ds-s-md);
  border-bottom:1px solid var(--ds-border)}
.ds-type__row:last-child{border-bottom:none;padding-bottom:0}
.ds-type__label{font-family:var(--ds-font-mono);font-weight:500;font-size:var(--ds-t-kicker);
  letter-spacing:.16em;text-transform:uppercase;color:var(--ds-ink-2)}
.ds-type__sample{color:var(--ds-ink)}

/* Display = die leichte, schöne. Nur ganz groß einsetzen. */
.ds-display{font-family:var(--ds-font-display);font-weight:500;font-size:var(--ds-t-display);
  line-height:1.02;letter-spacing:-.01em;color:var(--ds-ink)}
/* Überschriften = die schwere. Alles hier wird gelesen, nicht übersehen. */
.ds-h1{font-family:var(--ds-font-head);font-weight:var(--ds-w-head);font-size:var(--ds-t-h1);
  line-height:1.12;letter-spacing:-.01em;color:var(--ds-ink)}
.ds-h2{font-family:var(--ds-font-head);font-weight:var(--ds-w-head);font-size:var(--ds-t-h2);
  line-height:1.2;color:var(--ds-ink)}
.ds-h3{font-family:var(--ds-font-head);font-weight:600;font-size:var(--ds-t-h3);
  line-height:1.35;color:var(--ds-ink)}
.ds-body{font-family:var(--ds-font-body);font-weight:var(--ds-w-body);font-size:var(--ds-t-body);
  line-height:1.7;color:var(--ds-text-2);max-width:62ch}
.ds-small{font-family:var(--ds-font-body);font-weight:var(--ds-w-body);font-size:var(--ds-t-small);
  line-height:1.6;color:var(--ds-text-2)}

/* ============ Logo / Wortmarke ============ */
.ds-logo{display:inline-flex}
.ds-logo__row{display:inline-flex;align-items:center;gap:16px}
.ds-logo__wm{font-family:var(--ds-font-head);font-weight:var(--ds-w-head);letter-spacing:.005em;
  color:var(--ds-ink);line-height:1}
.ds-logo__tag{font-family:var(--ds-font-mono);font-weight:500;font-size:10px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ds-ink-2);line-height:1}
.ds-logo__stack{display:flex;flex-direction:column;gap:8px}
.ds-logo--dark .ds-logo__row{background:var(--ds-black);padding:18px 22px;border-radius:var(--ds-r-lg)}
.ds-logo--dark .ds-logo__wm{color:var(--ds-paper)}
.ds-logo--dark .ds-logo__tag{color:var(--ds-gold-signet)}
/* Das Originallogo als Rasterbild — Größe über die Breite steuern. */
.ds-logo__mark{display:block;height:auto;flex:none}

/* ============================================================
   PROJEKT-SPEZIFISCHE BAUSTEINE
   Bewusst NICHT enthalten: Streak, Fortschritt, Lernkarte,
   Preistabelle, Warenkorb — das Projekt braucht sie nicht.
   ============================================================ */

/* ---- Stat — das Analytik-Signal --------------------------- */
.ds-stat{display:flex;flex-direction:column;gap:6px;padding-top:16px;min-width:0;
  break-inside:avoid;border-top:2px solid transparent;
  background-image:var(--ds-gold-shimmer);background-repeat:no-repeat;
  background-size:100% 2px;background-position:top left}
.ds-stat__value{font-family:var(--ds-font-mono);font-weight:500;
  font-size:clamp(36px,4.6vw,54px);line-height:1;color:var(--ds-ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.ds-stat__value em{font-style:normal;color:var(--ds-primary)}
.ds-stat__label{font-family:var(--ds-font-body);font-weight:600;font-size:var(--ds-t-small);
  color:var(--ds-ink);line-height:1.4}
.ds-stat__note{font-family:var(--ds-font-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ds-n-500)}
.ds-stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--ds-s-xl)}

/* ---- Quote — Tatjanas Kernsätze ---------------------------
   Jetzt in Handschrift statt Kursiv: das ist der lebendigste
   Teil der Marke und stammt direkt aus Tatjanas Vorlage.       */
.ds-quote{margin:0;padding-left:var(--ds-s-lg);max-width:24ch;break-inside:avoid;
  border-left:3px solid transparent;
  background-image:var(--ds-gold-shimmer);background-repeat:no-repeat;
  background-size:3px 100%;background-position:left top}
.ds-quote__text{font-family:var(--ds-font-script);font-weight:600;
  font-size:clamp(30px,4vw,48px);line-height:1.14;color:var(--ds-primary);margin:0}
.ds-quote__source{display:block;margin-top:14px;font-family:var(--ds-font-mono);
  font-style:normal;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ds-ink-2)}
.ds-quote--wide{max-width:40ch}
.ds-quote--green .ds-quote__text{color:var(--ds-green)}

/* ---- ProgramDay — Ablauf des Intensivs -------------------- */
.ds-day{display:grid;grid-template-columns:auto 1fr;gap:var(--ds-s-lg);align-items:baseline;
  padding:var(--ds-s-lg) 0;border-top:1px solid var(--ds-border);break-inside:avoid}
.ds-day:last-child{border-bottom:1px solid var(--ds-border)}
.ds-day__step{font-family:var(--ds-font-mono);font-weight:500;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ds-primary);white-space:nowrap}
.ds-day__title{font-family:var(--ds-font-head);font-weight:var(--ds-w-head);
  font-size:clamp(22px,2.6vw,30px);line-height:1.22;color:var(--ds-ink);margin:0}
.ds-day__text{font-family:var(--ds-font-body);font-size:var(--ds-t-small);line-height:1.65;
  color:var(--ds-text-2);margin:8px 0 0;max-width:56ch}

/* ---- Offer — die drei Formate -----------------------------
   Jedes Format hat jetzt eine eigene Tönung statt nur eines
   Streifens: das macht die Seite spürbar bunter, ohne dass die
   Farben beliebig würden — sie ordnen weiter die Formate.      */
.ds-offer{position:relative;display:flex;flex-direction:column;gap:10px;
  border:1px solid var(--ds-border);border-radius:var(--ds-r-lg);
  padding:var(--ds-s-lg) var(--ds-s-lg) var(--ds-s-lg) calc(var(--ds-s-lg) + 6px);
  overflow:hidden;break-inside:avoid;background:var(--ds-surface)}
.ds-offer::before{content:"";position:absolute;inset:0 auto 0 0;width:6px;background:var(--ds-primary)}
.ds-offer--circle{background:var(--ds-primary-soft);border-color:transparent}
.ds-offer--circle::before{background:var(--ds-primary)}
.ds-offer--retreat{background:var(--ds-green-soft);border-color:transparent}
.ds-offer--retreat::before{background:var(--ds-green)}
.ds-offer--intensive{background:var(--ds-rose-soft);border-color:transparent}
.ds-offer--intensive::before{background:var(--ds-rose)}
.ds-offer__head{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-s-md)}
.ds-offer__meta{font-family:var(--ds-font-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ds-ink-2)}
.ds-offer__title{font-family:var(--ds-font-head);font-weight:var(--ds-w-head);font-size:23px;
  line-height:1.2;color:var(--ds-ink);margin:0}
.ds-offer__text{font-family:var(--ds-font-body);font-size:var(--ds-t-small);line-height:1.65;
  color:var(--ds-text-2);margin:0}
.ds-offer__foot{display:flex;align-items:center;gap:var(--ds-s-md);margin-top:6px;
  padding-top:var(--ds-s-md);border-top:1px solid color-mix(in srgb,var(--ds-ink) 12%,transparent)}

/* ---- Section — Seitengliederung --------------------------- */
.ds-section{display:flex;flex-direction:column;gap:12px;max-width:60ch}
.ds-section__title{font-family:var(--ds-font-head);font-weight:var(--ds-w-head);
  font-size:var(--ds-t-h2);line-height:1.18;color:var(--ds-ink);margin:0}
.ds-section__intro{font-family:var(--ds-font-body);font-weight:var(--ds-w-body);
  font-size:var(--ds-t-body);line-height:1.7;color:var(--ds-text-2);margin:0}

/* ============================================================
   PRINT / PDF
   Es werden keine Effekte benutzt, die im PDF brechen. Nötig ist
   nur, dass Flächen und Verläufe mitgedruckt werden und Blöcke
   nicht umbrechen.
   ============================================================ */
@media print{
  .ds-card,.ds-offer,.ds-stat,.ds-quote,.ds-day{break-inside:avoid}
  .ds-btn,.ds-badge,.ds-chip,.ds-offer,.ds-card--green,.ds-rule,.ds-stat,.ds-quote,
  .ds-kicker::before,.ds-offer::before,.ds-logo--dark .ds-logo__row{
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .ds-card--elevated{box-shadow:none;border:1px solid var(--ds-border)}
  /* Verlaufs-Text zurück auf eine Volltonfarbe: background-clip:text
     druckt in manchen Rendern nicht zuverlässig. */
  .ds-gold-text,.ds-script--gold{background:none;color:var(--ds-gold);
    -webkit-text-fill-color:var(--ds-gold)}
}