/* ============================================================================
   ALENA DITTRICH PHOTOGRAPHY — Design System
   „Babyfotografie bei Alena D."
   Kern-Stylesheet: Fonts (self-hosted) · Design-Tokens · Basis-Komponenten
   Jede Design, die der Agent baut, erhält NUR den @import-Verbund dieser Datei.
   ============================================================================ */

/* ------------------------------------------------------------------ Fonts -- */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/cormorant-500.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic; font-weight: 500; font-display: swap;
  src: url("fonts/cormorant-italic-500.woff2") format("woff2");
}
@font-face {
  font-family: "Jost";
  font-style: normal; font-weight: 300; font-display: swap;
  src: url("fonts/jost-300.woff2") format("woff2");
}
@font-face {
  font-family: "Jost";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/jost-400.woff2") format("woff2");
}
@font-face {
  font-family: "Jost";
  font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/jost-500.woff2") format("woff2");
}
@font-face {
  font-family: "Parisienne";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/parisienne-400.woff2") format("woff2");
}

/* ----------------------------------------------------------------- Tokens -- */
:root {
  /* — Flächen / Surfaces — hell, „fast weißes Papier mit einem Hauch Wärme" */
  --paper:        #FAF8F4;  /* Seitenhintergrund — Grundfläche */
  --card:         #FFFEFC;  /* Karten, erhabene Flächen */
  --inset:        #F3EEE6;  /* eingelassene Felder, Quotes, Foto-Rahmen */
  --sand:         #E9DFD0;  /* dezente Füllung, seltene Flächenakzente */

  /* — Erdskala / Earth scale — */
  --clay:          #C3AE97;
  --mocha:         #9A8168;
  --espresso:      #5E4B3B;  /* HAUPT-AKZENT */
  --espresso-deep: #4A3A2C;

  /* — Tanne — natürlicher grüner Akzent — */
  --fir:           #4A5F50;  /* Tannengrün — Akzent-Buttons, Badges */
  --fir-deep:      #38493D;  /* Hover · Text auf Fir-Soft */
  --fir-soft:      #E4E9E1;  /* zarte grüne Tint-Fläche */

  /* — Blush — seltener femininer Akzent — */
  --blush:         #E8CFC1;
  --blush-deep:    #CBA491;

  /* — Text — */
  --ink:          #2E2620;  /* Headlines, Primärtext */
  --ink-soft:     #6E6154;  /* Fließtext */
  --ink-mute:     #9C9081;  /* Meta, Labels, Captions */
  --on-dark:      #FAF7F1;  /* Text auf dunklen (Espresso-)Flächen */
  --on-dark-soft: #D9CFC0;  /* Sekundärtext auf Dunkel */

  /* — Linien — haarfein, nie reines Schwarz — */
  --line:         #EAE3D8;  /* haarfeine Trennlinie */
  --line-strong:  #D5C9B8;  /* betonte Linie, Rahmen */

  /* — Typografie — */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Jost", "Helvetica Neue", Arial, sans-serif;
  --font-script:  "Parisienne", "Snell Roundhand", cursive;

  --fw-body:      300;   /* Jost Light — Fließtext */
  --fw-body-mid:  400;
  --fw-ui:        400;
  --fw-display:   500;   /* Cormorant Medium — Headlines */

  /* Type-Skala (Desktop-Basis) */
  --fs-eyebrow:   0.72rem;
  --fs-caption:   0.82rem;
  --fs-body:      1.02rem;
  --fs-lead:      1.18rem;
  --fs-h4:        1.5rem;
  --fs-h3:        2rem;
  --fs-h2:        2.7rem;
  --fs-h1:        3.6rem;
  --fs-display:   4.8rem;

  --lh-tight:     1.08;
  --lh-snug:      1.28;
  --lh-body:      1.62;

  --ls-eyebrow:   0.3em;   /* weit gesperrte Versalien */
  --ls-label:     0.22em;
  --ls-button:    0.2em;
  --ls-tight:     -0.01em;

  /* — Spacing-Skala (8er-Grid, ruhig, viel Weißraum) — */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* — Radien — 3–14px + Pill — */
  --radius-xs:   3px;
  --radius-sm:   6px;
  --radius-md:   9px;
  --radius-lg:   14px;
  --radius-pill: 999px;

  /* — Schatten — diffus, warm (Espresso-getönt, nie kühles Grau) — */
  --shadow-xs: 0 1px 2px rgba(74, 58, 44, 0.05);
  --shadow-sm: 0 4px 14px rgba(74, 58, 44, 0.06);
  --shadow-md: 0 10px 30px rgba(74, 58, 44, 0.08), 0 2px 6px rgba(74, 58, 44, 0.04);
  --shadow-lg: 0 24px 60px rgba(74, 58, 44, 0.12), 0 6px 16px rgba(74, 58, 44, 0.06);
  --shadow-inset: inset 0 1px 2px rgba(74, 58, 44, 0.05);

  /* — Bewegung — ruhig — */
  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:         320ms;
  --dur-fast:    180ms;

  /* — Layout — */
  --measure:     62ch;    /* ideale Lesebreite */
  --container:   1120px;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  color: var(--ink);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0 0 0.4em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); }

p { margin: 0 0 1em; max-width: var(--measure); }
a { color: var(--espresso); text-decoration-color: var(--line-strong); text-underline-offset: 3px; }

/* ---------------------------------------------------------- Text-Utilities - */
.display   { font-family: var(--font-display); font-weight: var(--fw-display);
             font-size: var(--fs-display); line-height: var(--lh-tight);
             letter-spacing: var(--ls-tight); color: var(--ink); }
.lead      { font-size: var(--fs-lead); line-height: var(--lh-snug); color: var(--ink-soft); }
.caption   { font-size: var(--fs-caption); color: var(--ink-mute); }
.script    { font-family: var(--font-script); font-weight: 400; color: var(--espresso);
             font-size: 1.9rem; line-height: 1; }

/* Eyebrow / Label — weit gesperrte Versalien */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--mocha);
}
.eyebrow--ink  { color: var(--ink-mute); }
.eyebrow--onDark { color: var(--on-dark-soft); }

/* ------------------------------------------------------------------ Button - */
.btn {
  --btn-bg: var(--espresso);
  --btn-fg: var(--on-dark);
  --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  font-family: var(--font-body); font-weight: 400;
  font-size: 0.8rem; letter-spacing: var(--ls-button); text-transform: uppercase;
  padding: 0.95em 1.9em;
  border-radius: var(--radius-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  cursor: pointer; text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
  box-shadow: var(--shadow-xs);
}
.btn:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.btn--primary   { --btn-bg: var(--fir);       --btn-fg: var(--on-dark); }
.btn--primary:hover { --btn-bg: var(--fir-deep); }
.btn--secondary { --btn-bg: transparent; --btn-fg: var(--espresso); --btn-bd: var(--line-strong); box-shadow: none; }
.btn--secondary:hover { --btn-bg: var(--inset); --btn-bd: var(--mocha); }
.btn--ghost     { --btn-bg: transparent; --btn-fg: var(--fir-deep); --btn-bd: transparent;
                  box-shadow: none; padding-inline: 0.6em; }
.btn--ghost:hover { --btn-bg: transparent; color: var(--fir); transform: none; }
.btn--ghost::after { content: "→"; transition: transform var(--dur) var(--ease); }
.btn--ghost:hover::after { transform: translateX(3px); }
.btn--onDark    { --btn-bg: var(--on-dark); --btn-fg: var(--espresso); }
.btn--onDark:hover { --btn-bg: #fff; }
/* Tannengrün — natürlicher Akzent-Button (sparsam einsetzen) */
.btn--fir       { --btn-bg: var(--fir); --btn-fg: var(--on-dark); }
.btn--fir:hover { --btn-bg: var(--fir-deep); }
.btn--firOutline { --btn-bg: transparent; --btn-fg: var(--fir-deep); --btn-bd: var(--fir); box-shadow: none; }
.btn--firOutline:hover { --btn-bg: var(--fir-soft); --btn-bd: var(--fir-deep); }

/* ------------------------------------------------------------------- Badge - */
.badge {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-body); font-weight: 400;
  font-size: 0.66rem; letter-spacing: var(--ls-label); text-transform: uppercase;
  padding: 0.5em 0.95em; border-radius: var(--radius-pill);
  background: var(--inset); color: var(--mocha);
  border: 1px solid var(--line);
}
.badge--solid  { background: var(--espresso); color: var(--on-dark); border-color: transparent; }
.badge--blush  { background: var(--blush); color: var(--espresso-deep); border-color: transparent; }
.badge--soft   { background: transparent; color: var(--ink-mute); border-color: var(--line-strong); }
.badge__dot    { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.7; }

/* -------------------------------------------------------------------- Card - */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}
.card--inset { background: var(--inset); box-shadow: var(--shadow-inset); border-color: transparent; }
.card--flat  { box-shadow: none; }

/* ----------------------------------------------------------------- Divider - */
.divider { display: flex; align-items: center; gap: var(--space-4); color: var(--line-strong); }
.divider::before, .divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
.divider__rhombus { width: 7px; height: 7px; transform: rotate(45deg);
  border: 1px solid var(--mocha); background: transparent; flex: none; }
.divider__rhombus--fill { background: var(--clay); border-color: var(--clay); }

/* ---------------------------------------------------- Foto-Platzhalter ----- */
.photo {
  position: relative; border-radius: var(--radius-md); overflow: hidden;
  background-color: var(--inset);
  background-image: repeating-linear-gradient(
      45deg, transparent 0, transparent 9px,
      rgba(154, 129, 104, 0.10) 9px, rgba(154, 129, 104, 0.10) 10px);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  min-height: 160px;
}
.photo__label {
  font-family: var(--font-body); font-weight: 400; font-size: 0.68rem;
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-mute);
  background: var(--card); padding: 0.5em 1em; border-radius: var(--radius-pill);
  border: 1px solid var(--line);
}

/* ------------------------------------------------------- Surfaces / Dunkel - */
.on-espresso {
  background: var(--espresso); color: var(--on-dark);
}
.on-espresso h1, .on-espresso h2, .on-espresso h3, .on-espresso h4 { color: var(--on-dark); }
.on-espresso .eyebrow { color: var(--on-dark-soft); }

/* ------------------------------------------ Instagram / Social Canvas ----- */
/* Maßstabsgetreue Bühnen. Post = 1080×1350 (4:5), Story = 1080×1920 (9:16).
   Innen-Padding & Type in % / em, damit 1:1 auf Exportgröße hochskalierbar. */
.ig {
  position: relative; overflow: hidden; box-shadow: var(--shadow-lg);
  background: var(--paper); color: var(--ink-soft);
  border-radius: 10px;
}
.ig--post  { width: 432px; height: 540px; }   /* 0.4× von 1080×1350 */
.ig--story { width: 320px; height: 569px; }    /* ~0.296× von 1080×1920 */
.ig--esp   { background: var(--espresso); color: var(--on-dark); }
.ig--inset { background: var(--inset); }
.ig__pad   { position: absolute; inset: 0; padding: 40px; display: flex; flex-direction: column; }
.ig--story .ig__pad { padding: 34px 30px; }
.ig__eyebrow { font-family: var(--font-body); font-weight: 400; font-size: 0.62rem;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--mocha); }
.ig--esp .ig__eyebrow { color: var(--on-dark-soft); }
.ig__h { font-family: var(--font-display); font-weight: 500; line-height: 1.06;
  letter-spacing: -0.01em; color: var(--ink); }
.ig--esp .ig__h { color: var(--on-dark); }
.ig__script { font-family: var(--font-script); color: var(--espresso); line-height: 1; }
.ig--esp .ig__script { color: var(--blush); }
.ig__wreath { background: var(--espresso);
  -webkit-mask: url(assets/wreath.png) center/contain no-repeat;
          mask: url(assets/wreath.png) center/contain no-repeat; }
.ig--esp .ig__wreath { background: var(--on-dark); }
.ig__pill { display: inline-flex; align-items: center; gap: 0.5em; align-self: flex-start;
  font-family: var(--font-body); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 0.85em 1.6em; border-radius: var(--radius-pill); background: var(--espresso); color: var(--on-dark); }
.ig--esp .ig__pill { background: var(--on-dark); color: var(--espresso); }
.ig__rh { width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid var(--clay); }
/* Foto-Fläche innerhalb einer Bühne */
.ig__photo { background-color: var(--sand);
  background-image: repeating-linear-gradient(45deg, transparent 0 11px, rgba(94,75,59,.09) 11px 12px);
  display: flex; align-items: center; justify-content: center; }
.ig__photo .photo__label { font-size: 0.6rem; }
/* Foto-Slide mit Text-Overlay (Karussell-Baukasten) */
.ig__bleed { position: absolute; inset: 0; }
.ig__bleed .ig__photo { position: absolute; inset: 0; }
.ig__scrim { position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(46,38,32,.78) 0%, rgba(46,38,32,.30) 34%, rgba(46,38,32,0) 62%); }
.ig__scrim--full { background: linear-gradient(to top, rgba(46,38,32,.66), rgba(46,38,32,.42)); }
.ig__scrim--top { background: linear-gradient(to bottom, rgba(46,38,32,.55), rgba(46,38,32,0) 40%); }
.ig__over { position: absolute; inset: 0; padding: 32px; display: flex; flex-direction: column; color: #fff; }
.ig__over .ig__h { color: #fff; }
.ig__over .ig__eyebrow { color: rgba(255,255,255,.82); }
.ig__num { position: absolute; top: 22px; right: 26px; font-family: var(--font-body);
  font-size: 0.64rem; letter-spacing: 0.16em; color: rgba(255,255,255,.9); }
.ig__dots { display: flex; gap: 5px; }
.ig__dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.45); }
.ig__dots i.on { background: #fff; width: 16px; border-radius: 3px; }

/* Reihe zum Präsentieren mehrerer Bühnen (Karussell) */
.ig-strip { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 22px; }
.ig-slidewrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ig-slidewrap .n { font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }

/* --------------------------------------------------- Design-System-Karten -- */
/* Rahmen für die Vorschau-Karten im Design-System-Pane (nicht Teil der Marke) */
.ds-frame { padding: 40px; background: var(--paper); font-family: var(--font-body); }
.ds-stack > * + * { margin-top: var(--space-5); }
.ds-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.ds-note { font-size: var(--fs-caption); color: var(--ink-mute); max-width: var(--measure); }
.ds-label { font-size: 0.64rem; letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: var(--space-2); display: block; }