/* ===================================================================
   FRAH PARFUMS — Stylesheet (Prelaunch-/Entwicklungsseite)
   Farbwerte nach Website-Briefing Abschnitt 3. Typo- und Abstandsskala
   im Sep. 2026 vereinheitlicht: alle Größen und Abstände kommen aus den
   Tokens unten, keine Einzelwerte in den Komponenten. Kein Framework.

   SCHRIFTEN — vor dem Livegang selbst hosten (KVKK/DSGVO):
   1. woff2-Dateien (latin + latin-ext) nach assets/fonts/ legen:
      cormorant-garamond-500.woff2, manrope-400.woff2, manrope-600.woff2
   2. Den @font-face-Block direkt hierunter einkommentieren.
   3. In jeder HTML-Datei den Block zwischen <!-- FONTS:START --> und
      <!-- FONTS:END --> löschen.
   4. Çerez politikası, Abschnitt „Yazı tipleri“, anpassen lassen.
   =================================================================== */

/*
@font-face{ font-family:"Cormorant Garamond"; font-style:normal; font-weight:500; font-display:swap;
  src:url("./fonts/cormorant-garamond-500.woff2") format("woff2"); }
@font-face{ font-family:"Manrope"; font-style:normal; font-weight:400; font-display:swap;
  src:url("./fonts/manrope-400.woff2") format("woff2"); }
@font-face{ font-family:"Manrope"; font-style:normal; font-weight:600; font-display:swap;
  src:url("./fonts/manrope-600.woff2") format("woff2"); }
*/

:root{
  /* Farben */
  --bg:        #F7F6F2;   /* Hauptfläche */
  --text:      #202824;   /* Fließtext */
  --brand:     #20374B;   /* Primäraktion und Konzeptfläche, auf den Navy-Flakon abgestimmt */
  --brand-hi:  #2C4A64;
  --surface-2: #EBE9E2;   /* ruhige Flächenabstufung */
  --metal:     #9C8357;   /* nur Dekordetail (™) — Kontrast 3,4:1, kein Lesetext */
  --line:      #D9DBD5;
  --muted:     #5C6661;   /* 5,4:1 auf --bg, 4,8:1 auf --surface-2 */
  --on-brand:        #F7F6F2;
  --on-brand-muted:  rgba(247,246,242,.78);  /* ≈ 7:1 auf --brand */
  --on-brand-line:   rgba(247,246,242,.2);
  --error:     #8F2F1F;

  /* Schriften */
  --ff-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --ff-body:    "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Typo-Skala */
  --fs-hero:  clamp(3rem, 1.9rem + 5vw, 6rem);         /* 48 → 96 */
  --fs-h2:    clamp(2rem, 1.6rem + 1.5vw, 2.875rem);   /* 32 → 46 */
  --fs-h3:    clamp(1.5rem, 1.4rem + .4vw, 1.75rem);   /* 24 → 28, Varianten und Prinzipien */
  --fs-lede:  clamp(1.0625rem, 1rem + .25vw, 1.1875rem); /* 17 → 19 */
  --fs-body:  1.0625rem;  /* 17 */
  --fs-small: .9375rem;   /* 15 */
  --fs-xs:    .875rem;    /* 14 — kleinste Lesegröße */
  --fs-label: .8125rem;   /* 13, nur Versalien-Labels */
  --lh-display: 1.04;
  --lh-head:    1.15;
  --lh-body:    1.6;
  --ls-label:   .16em;
  --ls-mark:    .22em;
  --measure:      62ch;
  --measure-lede: 36ch;

  /* Abstände: Basisskala 8 / 12 / 16 / 24 / 32 / 48 / 64 / 88 */
  --s1:8px; --s2:12px; --s3:16px; --s4:24px; --s5:32px; --s6:48px; --s7:64px; --s8:88px;
  --section:   clamp(72px, 3rem + 5vw, 128px);  /* oben/unten jeder Sektion */
  --head-gap:  var(--s3);                       /* Überschrift → Text */
  --block-gap: clamp(40px, 2rem + 2vw, 64px);   /* Sektionskopf → Inhalt */
  --col-gap:   clamp(32px, 5vw, 96px);          /* 5/7-Raster */
  --grid-x:    clamp(20px, 2.5vw, 32px);
  --grid-y:    clamp(36px, 4vw, 56px);

  --radius:     4px;
  --radius-ctl: 6px;
  --btn-h:      52px;

  --maxw: 1280px;
  --gutter: clamp(20px, 5vw, 64px);
  --hdr-h: 64px;
  --t: 180ms cubic-bezier(.4,0,.2,1);
}
@media (min-width: 900px){ :root{ --hdr-h:76px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr-h) + 8px); }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--ff-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; }
a{ color:inherit; }
h1,h2,h3,h4,p,figure{ margin:0; }

/* Muss vor allen display-Regeln stehen, sonst hebelt ein display:flex/grid
   das hidden-Attribut aus. */
[hidden]{ display:none !important; }

:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:2px; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:60;
  background:var(--brand); color:#fff; padding:var(--s2) var(--s4);
}
.skip:focus{ left:var(--gutter); top:var(--s1); }

/* Typografie ---------------------------------------------------------------- */
.sec-title{
  font-family:var(--ff-display); font-weight:500;
  font-size:var(--fs-h2); line-height:var(--lh-head); letter-spacing:.005em;
  text-wrap:balance;
}
.lede{ font-size:var(--fs-lede); line-height:1.55; color:var(--muted); max-width:var(--measure-lede); }
.label{
  font-family:var(--ff-body); font-weight:600;
  font-size:var(--fs-label); line-height:1.4; letter-spacing:var(--ls-label); text-transform:uppercase;
  color:var(--muted);
}
.sec-head{ display:grid; gap:var(--head-gap); max-width:40rem; }
.link{ color:var(--brand); text-underline-offset:.25em; }

/* Vorschauleiste — nur im internen Build, nie in der Kundenfassung ---------- */
.preview-bar{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:4px var(--s3);
  padding:6px var(--gutter);
  background:var(--brand); color:#fff;
  font-size:var(--fs-label); letter-spacing:.08em; text-transform:uppercase;
}
.preview-bar__toggle{
  min-height:28px; padding:2px var(--s2);
  background:none; color:inherit; border:1px solid rgba(255,255,255,.45); border-radius:999px;
  font:inherit; letter-spacing:inherit; text-transform:inherit; cursor:pointer;
}
.preview-bar__toggle[aria-pressed="true"]{ background:#fff; color:var(--brand); border-color:#fff; }
.preview-bar :focus-visible{ outline-color:#fff; }

/* Entwurfsmarkierungen: standardmäßig aus, über die Vorschauleiste einblendbar.
   taslak = Text ist Entwurf; todo = Angabe fehlt noch. */
.mark{ text-decoration:none; }
.show-marks .mark{ text-decoration:underline dotted rgba(32,55,75,.45); text-underline-offset:.26em; }
.show-marks .mark--todo{ text-decoration:underline dashed rgba(170,70,50,.7); }
.show-marks .concepts .mark{ text-decoration-color:rgba(247,246,242,.5); }

/* Kopfzeile ------------------------------------------------------------------ */
.hdr{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:40;
  background:var(--bg); border-bottom:1px solid var(--line);
}
.hdr__in{
  position:relative;
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
  height:var(--hdr-h); display:flex; align-items:center; gap:var(--s4);
}
.hdr__mark{
  font-family:var(--ff-display); font-size:22px; letter-spacing:var(--ls-mark);
  text-decoration:none; white-space:nowrap; padding-right:.22em;
}
.tm{ font-family:var(--ff-body); font-size:.42em; letter-spacing:0; vertical-align:.9em; margin-left:.2em; color:var(--metal); }
.hdr__nav{ display:none; gap:var(--s5); margin-left:auto; }
.hdr__nav a{
  font-size:var(--fs-small); text-decoration:none; color:var(--muted);
  padding:var(--s2) 0; transition:color var(--t);
}
.hdr__nav a:hover{ color:var(--text); }

.hdr__menu{
  margin-left:auto; min-height:44px; padding:0 var(--s3);
  background:none; border:1px solid var(--line); border-radius:var(--radius-ctl);
  font:inherit; font-size:var(--fs-small); color:var(--text); cursor:pointer;
  transition:border-color var(--t);
}
.hdr__menu:hover{ border-color:var(--brand); }
@media (max-width: 759px){
  .hdr__nav.is-open{
    display:grid; gap:0; margin:0;
    position:absolute; left:0; right:0; top:100%;
    background:var(--bg); border-bottom:1px solid var(--line);
    padding:var(--s1) var(--gutter) var(--s3);
  }
  .hdr__nav.is-open a{ padding:var(--s3) 0; font-size:var(--fs-body); color:var(--text); border-bottom:1px solid var(--line); }
  .hdr__nav.is-open a:last-child{ border-bottom:0; }
}
@media (min-width: 760px){
  .hdr__nav{ display:flex; }
  .hdr__menu{ display:none; }
}

/* Schaltflächen -------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--btn-h); padding:0 28px;
  background:var(--brand); color:#fff; border:1px solid var(--brand);
  border-radius:var(--radius-ctl); font:inherit; font-weight:600; font-size:var(--fs-body); line-height:1.2;
  text-decoration:none; cursor:pointer;
  transition:background var(--t), border-color var(--t);
}
.btn:hover{ background:var(--brand-hi); border-color:var(--brand-hi); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }

/* Hero: Claim links, Produkt rechts (5/7-Raster) ---------------------------- */
.hero__in{
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
  padding-block:clamp(40px, 1.5rem + 5vw, 120px) clamp(48px, 2rem + 5vw, 128px);
  display:grid; gap:var(--block-gap); align-items:center;
}
.hero__text{ container-type:inline-size; display:grid; justify-items:start; }
.hero__title{
  font-family:var(--ff-display); font-weight:500;
  font-size:var(--fs-hero);
  font-size:clamp(3rem, 20cqi, 6rem);   /* wächst mit der Textspalte, bleibt einzeilig */
  line-height:var(--lh-display); letter-spacing:0;
  text-wrap:balance;
}
.hero__lede{ margin-top:var(--s4); }
.hero__actions{ margin-top:var(--s6); }
.hero__media{ display:grid; gap:var(--s2); }
.hero__media img{
  display:block; width:100%; height:auto; aspect-ratio:3 / 2;
  border-radius:var(--radius); background:var(--surface-2);
}
.hero__cap{ font-size:var(--fs-xs); color:var(--muted); }
@media (min-width: 900px){
  .hero__in{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--col-gap); }
}

/* Tasarım konseptleri ------------------------------------------------------ */
.concepts{ background:var(--brand); color:var(--on-brand); padding-block:var(--section); }
.concepts :focus-visible{ outline-color:var(--on-brand); }
.concepts .sec-title{ color:#fff; }
.concepts .lede, .concepts .label{ color:var(--on-brand-muted); }

.concepts__group{ margin-top:var(--block-gap); display:grid; gap:var(--s4); }
.concepts__group + .concepts__group{ padding-top:var(--block-gap); border-top:1px solid var(--on-brand-line); }

.grid2{
  list-style:none; margin:0; padding:0;
  display:grid; gap:var(--grid-y) var(--grid-x); grid-template-columns:minmax(0,1fr);
}
@media (min-width: 640px){ .grid2{ grid-template-columns:repeat(2, minmax(0,1fr)); } }

.tile{ display:grid; gap:var(--s3); align-content:start; }
.tile img{
  display:block; width:100%; height:auto; aspect-ratio:3 / 2;
  border-radius:var(--radius); background:rgba(255,255,255,.06);
}
.tile__cap{ display:grid; gap:2px; }
.tile__name{ font-family:var(--ff-display); font-weight:500; font-size:var(--fs-h3); line-height:var(--lh-head); color:#fff; }
.tile__desc{ font-size:var(--fs-small); color:var(--on-brand-muted); }

.concepts__aside{ align-self:center; max-width:30ch; font-size:var(--fs-lede); color:var(--on-brand-muted); }
.concepts__note{ margin-top:var(--block-gap); max-width:70ch; font-size:var(--fs-xs); color:var(--on-brand-muted); }

/* Bild vergrößern */
.zoom{
  position:relative; display:block; width:100%; margin:0; padding:0;
  border:0; background:none; color:inherit; font:inherit; cursor:zoom-in; border-radius:var(--radius);
}
.zoom::after{
  content:""; position:absolute; right:12px; bottom:12px; width:34px; height:34px; border-radius:50%;
  background:rgba(32,55,75,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition:background-color var(--t);
}
.zoom:hover::after, .zoom:focus-visible::after{ background-color:rgba(32,55,75,.92); }
.zoom:focus-visible{ outline-offset:4px; }

.lb{ border:0; padding:0; margin:0; background:#0C1620; color:#fff; width:100%; height:100%; max-width:none; max-height:none; }
.lb::backdrop{ background:rgba(12,22,32,.94); }
.lb :focus-visible{ outline-color:#fff; }
.lb__box{ height:100%; display:grid; grid-template-rows:auto minmax(0,1fr); gap:var(--s3); padding:var(--s3) var(--gutter) var(--s4); padding-top:calc(var(--s3) + env(safe-area-inset-top, 0px)); }
.lb__bar{ display:flex; align-items:center; gap:var(--s3); }
.lb__cap{ font-family:var(--ff-display); font-size:var(--fs-h3); line-height:1.1; margin-right:auto; }
.lb__count{ font-size:var(--fs-xs); color:rgba(255,255,255,.7); font-variant-numeric:tabular-nums; }
.lb__x, .lb__nav{
  min-width:44px; min-height:44px; border:0; border-radius:50%;
  background:rgba(255,255,255,.14); color:#fff; font:inherit; cursor:pointer;
  transition:background var(--t);
}
.lb__x:hover, .lb__nav:hover{ background:rgba(255,255,255,.26); }
.lb__x{ font-size:28px; line-height:1; }
.lb__stage{ position:relative; min-height:0; display:grid; place-items:center; }
.lb__img{ display:block; max-width:100%; max-height:calc(100vh - 130px); max-height:calc(100dvh - 130px); width:auto; height:auto; border-radius:var(--radius); }
.lb__nav{ position:absolute; top:50%; transform:translateY(-50%); font-size:30px; line-height:1; padding:0 0 4px; }
.lb__prev{ left:0; } .lb__next{ right:0; }
@media (min-width: 900px){ .lb__prev{ left:var(--s3); } .lb__next{ right:var(--s3); } }

/* FRAH ile tanışın + Yaklaşımımız --------------------------------------------- */
.story{ padding-block:var(--section); }
.story__intro{ display:grid; gap:var(--head-gap); }
.story__text{ display:grid; gap:var(--s3); max-width:var(--measure); }
.story__text p{ font-size:var(--fs-lede); color:var(--muted); }
.story__values{ margin-top:var(--block-gap); display:grid; gap:var(--s4); }
.values{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s5); }
.value{ display:grid; gap:var(--s2); align-content:start; padding-top:var(--s4); border-top:1px solid var(--line); }
.value h4{ font-family:var(--ff-display); font-weight:500; font-size:var(--fs-h3); line-height:var(--lh-head); }
.value p{ color:var(--muted); max-width:40ch; }
@media (min-width: 900px){
  .story__intro{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--col-gap); align-items:start; }
  .values{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--grid-x); }
}

/* Haber ver ---------------------------------------------------------------------- */
.notify{ background:var(--surface-2); padding-block:var(--section); }
.notify__in{ display:grid; gap:var(--block-gap); align-items:start; }
.form{ display:grid; gap:var(--s3); max-width:560px; }
.form__row{ display:grid; gap:var(--s2); }
.form input[type="email"]{
  width:100%; min-height:var(--btn-h); padding:0 var(--s3);
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-ctl);
  font:inherit; font-size:var(--fs-body); color:var(--text);
}
.form input[type="email"]::placeholder{ color:var(--muted); }
.form input[type="email"]:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-color:var(--brand); }
.form input[aria-invalid="true"]{ border-color:var(--error); }
.check{ display:grid; grid-template-columns:auto 1fr; gap:var(--s2); align-items:start; font-size:var(--fs-xs); line-height:1.55; color:var(--muted); cursor:pointer; }
.check input{ width:22px; height:22px; margin:0; accent-color:var(--brand); }
.form__status{ min-height:1.5em; font-size:var(--fs-small); color:var(--text); }
.form__status[data-state="error"]{ color:var(--error); }
.form__legal, .form__note{ font-size:var(--fs-xs); color:var(--muted); }
@media (min-width: 720px){ .form__row{ grid-template-columns:1fr auto; } }
@media (min-width: 900px){ .notify__in{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--col-gap); } }

/* Rechtsseiten --------------------------------------------------------------------- */
.page{ padding-block:clamp(40px, 1.5rem + 4vw, 96px) var(--section); }
.back{ display:inline-block; margin-bottom:var(--s5); font-size:var(--fs-small); color:var(--muted); text-underline-offset:.25em; padding-block:var(--s1); }
.prose{ max-width:68ch; display:grid; gap:var(--s3); }
.prose h1{ font-family:var(--ff-display); font-weight:500; font-size:var(--fs-h2); line-height:var(--lh-head); margin-bottom:var(--s1); }
.prose h2{ font-family:var(--ff-body); font-size:var(--fs-body); font-weight:600; margin-top:var(--s4); }
.prose p{ color:var(--muted); }
.updated, .note{ font-size:var(--fs-xs); }

/* Fußzeile --------------------------------------------------------------------------- */
.ftr{ border-top:1px solid var(--line); }
.ftr__in{
  max-width:var(--maxw); margin-inline:auto; padding:var(--s7) var(--gutter) var(--s5);
  display:grid; gap:var(--s6) var(--grid-x); font-size:var(--fs-small); color:var(--muted);
}
.ftr__col{ display:grid; gap:var(--s1); align-content:start; }
.ftr__brand{ font-family:var(--ff-display); font-size:22px; letter-spacing:var(--ls-mark); color:var(--text); }
.ftr__col .label{ color:var(--text); margin-bottom:var(--s1); }
.ftr__col a{ text-decoration:none; padding-block:6px; overflow-wrap:anywhere; }
.ftr__col a:hover{ color:var(--text); text-decoration:underline; text-underline-offset:.25em; }
.ftr__col p{ padding-block:6px; }
.ftr__contact{ display:grid; }
.ftr__contact span{ font-size:var(--fs-xs); }
.ftr__contact a{ padding-block:2px !important; overflow-wrap:normal; }
.ftr__legal{ grid-column:1 / -1; padding-top:var(--s4); border-top:1px solid var(--line); font-size:var(--fs-xs); }
@media (max-width: 559px){ .ftr__col a{ padding-block:10px; } }
@media (min-width: 560px){ .ftr__in{ grid-template-columns:1fr 1fr; } }
@media (min-width: 900px){ .ftr__in{ grid-template-columns:minmax(0,4fr) minmax(0,2fr) minmax(0,2fr) minmax(0,3fr); } }

/* Passwort-Sichtschutz ------------------------------------------------------------- */
.gate{ display:none; }
html.locked .gate{
  display:grid; place-items:center; position:fixed; inset:0; z-index:100;
  background:var(--bg); padding:var(--s4) max(16px, var(--gutter));
}
html.locked .skip, html.locked .preview-bar, html.locked .hdr,
html.locked main, html.locked .ftr, html.locked .editbar{ display:none !important; }
.gate__box{ width:min(100%, 360px); display:grid; gap:var(--s3); }
.gate__mark{ font-family:var(--ff-display); font-size:26px; letter-spacing:var(--ls-mark); }
.gate__title{ font-family:var(--ff-display); font-size:var(--fs-h2); line-height:var(--lh-head); margin-top:var(--s3); }
.gate__text{ color:var(--muted); }
.gate__box input{
  width:100%; min-height:var(--btn-h); padding:0 var(--s3);
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-ctl);
  font:inherit; font-size:var(--fs-body); color:var(--text);
}
.gate__box input:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-color:var(--brand); }
.gate__box .btn{ width:100%; }
.gate__error{ color:var(--error); font-size:var(--fs-small); }

/* Bearbeiten-Modus (nur für Bearbeiter sichtbar) ------------------------------------ */
.editbar{
  position:fixed; z-index:45; right:16px; left:auto;
  bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  max-width:calc(100% - 32px);
  display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:var(--s1) var(--s2);
  padding:var(--s1); border-radius:12px;
  background:var(--text); color:#fff; box-shadow:0 6px 24px rgba(20,28,24,.25);
}
.editbar__status{ font-size:var(--fs-xs); padding-inline:var(--s2); max-width:34ch; }
.editbar__status:empty{ display:none; }
.editbar__btn{
  min-height:44px; padding:0 var(--s3); border-radius:var(--radius-ctl);
  border:1px solid rgba(255,255,255,.35); background:none; color:#fff;
  font:inherit; font-size:var(--fs-small); font-weight:600; cursor:pointer;
}
.editbar__btn:hover{ border-color:#fff; }
.editbar__btn--primary{ background:#fff; color:var(--text); border-color:#fff; }
.editbar__btn:disabled{ opacity:.5; cursor:wait; }
.editbar :focus-visible{ outline-color:#fff; }
.is-editable{ outline:1px dashed currentColor; outline-offset:4px; border-radius:2px; cursor:text; }
.is-editable:focus{ outline:2px solid var(--metal); }
html.is-editing main{ padding-bottom:96px; }