/* ==========================================================================
   DOR DE CASĂ — DESIGNSYSTEM
   Markenfarben direkt aus dem Original-Logo entnommen (#871205 Bordeaux,
   #FAECCD Pergament). Typografie: Six Caps (Display) + Plus Jakarta Sans
   (Text) + Yellowtail (Schreibschrift-Akzent, angelehnt an den Logo-Schwung).
   ========================================================================== */

/* ── 1. TOKENS ─────────────────────────────────────────────────────────── */
:root{
  /* Marke */
  --cream:        #FAECCD;
  --cream-soft:   #F3E1BC;
  --cream-deep:   #E8D2A6;
  --ink:          #14100E;
  --ink-deep:     #0B0908;
  --ink-soft:     #241C18;
  --bordeaux:     #871205;
  --bordeaux-lit: #A5190A;
  --bordeaux-deep:#5C0B03;
  --brown:        #4D240A;
  --gold:         #C8A15A;
  --gold-lit:     #E3C88C;

  /* Rumänische Flaggen-Akzente – nur sparsam als Mikro-Detail */
  --ro-blue:#00319C; --ro-yellow:#FCD116; --ro-red:#CE1126;

  /* Semantisch */
  --bg:            var(--cream);
  --fg:            var(--ink);
  --fg-muted:      #5E5048;
  --rule:          rgba(20,16,14,.14);
  --rule-on-dark:  rgba(250,236,205,.18);

  /* Typo */
  --font-display:'Six Caps', 'Oswald', 'Arial Narrow', sans-serif;
  --font-body:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-script:'Yellowtail', 'Brush Script MT', cursive;

  /* Raster */
  --gutter: clamp(1.25rem, 4.5vw, 4rem);
  --maxw: 1360px;
  --maxw-text: 62ch;
  --radius: 2px;
  --radius-pill: 999px;

  /* Rhythmus */
  --section-y: clamp(4.5rem, 11vh, 9.5rem);
  --header-h: 74px;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur: .5s;
}

@media (max-width:860px){ :root{ --header-h:64px; } }

/* ── 2. RESET ──────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; overflow-x:clip; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 12px); }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--font-body); font-size:clamp(1rem,.96rem + .18vw,1.075rem);
  line-height:1.62; letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{ max-width:100%; height:auto; display:block; }
img{ background:var(--cream-deep); }
button,input,select,textarea{ font:inherit; color:inherit; }
a{ color:inherit; }
h1,h2,h3,h4,p,figure,blockquote{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
/* Muss nach den Komponenten greifen: display:grid/flex schlägt sonst [hidden] */
[hidden]{ display:none !important; }

:focus-visible{ outline:2.5px solid var(--bordeaux); outline-offset:3px; border-radius:2px; }
.on-dark :focus-visible, .sect--dark :focus-visible{ outline-color:var(--gold-lit); }

::selection{ background:var(--bordeaux); color:var(--cream); }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--bordeaux); color:var(--cream); padding:.9rem 1.4rem;
  font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em;
}
.skip-link:focus{ left:0; }

.visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ── 3. TYPOGRAFIE ─────────────────────────────────────────────────────── */

/* Display: Six Caps ist extrem schmal und hoch – daher sehr grosse Grade,
   negatives Tracking und eine sehr enge Zeilenhöhe. */
.display{
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  /* Gemessen: Six Caps erreicht mit Diakritika (Ă, Ü, Ö) 1.02x Versalhöhe
     bei 0 Unterlänge. Unter 1.02 berühren sich mehrzeilige Überschriften. */
  line-height:1.02; letter-spacing:-.008em; margin:0;
  font-size:clamp(3.2rem, 8.5vw, 9rem);
  text-wrap:balance;
}
.display--xl{ font-size:clamp(3.6rem, 10.5vw, 10.5rem); }
.display--l { font-size:clamp(3rem, 7.6vw, 8rem); }
.display--m { font-size:clamp(2.5rem, 5.6vw, 5.4rem); }
.display--s { font-size:clamp(2.1rem, 4vw, 3.4rem); letter-spacing:-.002em; }

/* Kleine Label-Typo („EYEBROW") – Plus Jakarta, gesperrt, versal */
.eyebrow{
  font-size:clamp(.66rem,.62rem + .14vw,.78rem); font-weight:700;
  text-transform:uppercase; letter-spacing:.24em; line-height:1.3;
  color:var(--bordeaux); margin:0 0 1.15rem;
  display:flex; align-items:center; gap:.7rem;
}
.eyebrow::before{ content:''; width:1.9rem; height:1px; background:currentColor; opacity:.55; flex:none; }
.eyebrow--center{ justify-content:center; }
.eyebrow--center::after{ content:''; width:1.9rem; height:1px; background:currentColor; opacity:.55; flex:none; }
.on-dark .eyebrow, .sect--dark .eyebrow{ color:var(--gold); }

/* Schreibschrift-Akzent (rumänischer Zusatz, Logo-Anmutung) */
.script{
  font-family:var(--font-script); font-weight:400; text-transform:none;
  letter-spacing:0; line-height:1.35; color:var(--bordeaux);
  font-size:clamp(1.35rem,1.05rem + 1.1vw,2.1rem);
}
.on-dark .script, .sect--dark .script{ color:var(--gold-lit); }

/* Fliesstext */
.lede{
  font-size:clamp(1.06rem,1rem + .42vw,1.32rem); line-height:1.58;
  letter-spacing:-.016em; color:var(--fg-muted); max-width:var(--maxw-text);
}
.on-dark .lede, .sect--dark .lede{ color:rgba(250,236,205,.76); }
.prose p + p{ margin-top:1.05em; }
.prose{ max-width:var(--maxw-text); }

/* Zweisprachigkeit: RO-Zeile unter DE-Zeile */
.alt-lang{
  display:block; font-size:.82em; font-style:italic;
  color:var(--fg-muted); opacity:.82; letter-spacing:-.005em; margin-top:.18em;
}
.on-dark .alt-lang,.sect--dark .alt-lang{ color:rgba(250,236,205,.6); }

/* ── 4. LAYOUT ─────────────────────────────────────────────────────────── */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.wrap--narrow{ max-width:920px; }
.wrap--wide{ max-width:1620px; }
.sect{ padding-block:var(--section-y); position:relative; }
.sect--tight{ padding-block:clamp(3rem,6vh,5rem); }
.sect--flush{ padding-block:0; }

.sect--dark{ background:var(--ink); color:var(--cream); }
.sect--deep{ background:var(--ink-deep); color:var(--cream); }
.sect--bordeaux{ background:var(--bordeaux-deep); color:var(--cream); }
.sect--soft{ background:var(--cream-soft); }
.sect--dark .lede, .sect--deep .lede{ color:rgba(250,236,205,.74); }

.grid{ display:grid; gap:clamp(1.5rem,3.5vw,3.25rem); }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }
.grid--split{ grid-template-columns:1.05fr .95fr; align-items:center; }
.grid--split-wide{ grid-template-columns:1fr 1.25fr; align-items:center; }
@media (max-width:1040px){
  .grid--4{ grid-template-columns:repeat(2,1fr); }
  .grid--split,.grid--split-wide{ grid-template-columns:1fr; gap:clamp(2rem,5vw,3rem); }
}
@media (max-width:760px){
  .grid--2,.grid--3{ grid-template-columns:1fr; }
}
.grid > *{ min-width:0; }
.stack > * + *{ margin-top:1.4rem; }
.center{ text-align:center; }
.center .eyebrow{ justify-content:center; }
.center .eyebrow::after{ content:''; width:1.9rem; height:1px; background:currentColor; opacity:.55; flex:none; }
.center .lede{ margin-inline:auto; }

/* ── 5. BUTTONS ────────────────────────────────────────────────────────── */
.btn{
  --btn-bg:var(--bordeaux); --btn-fg:var(--cream); --btn-bd:var(--bordeaux);
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:1.02rem 2.05rem; min-height:52px;
  background:var(--btn-bg); color:var(--btn-fg);
  border:1.5px solid var(--btn-bd); border-radius:var(--radius-pill);
  font-size:.795rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.13em; line-height:1; text-decoration:none; cursor:pointer;
  transition:background .34s var(--ease), color .34s var(--ease),
             border-color .34s var(--ease), transform .34s var(--ease);
  position:relative; overflow:hidden; white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn--solid:hover{ --btn-bg:var(--bordeaux-lit); --btn-bd:var(--bordeaux-lit); }

.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:rgba(20,16,14,.3); }
.btn--ghost:hover{ --btn-bg:var(--ink); --btn-fg:var(--cream); --btn-bd:var(--ink); }

.btn--light{ --btn-bg:transparent; --btn-fg:var(--cream); --btn-bd:rgba(250,236,205,.42); }
.btn--light:hover{ --btn-bg:var(--cream); --btn-fg:var(--ink); --btn-bd:var(--cream); }

.btn--gold{ --btn-bg:var(--gold); --btn-fg:var(--ink); --btn-bd:var(--gold); }
.btn--gold:hover{ --btn-bg:var(--gold-lit); --btn-bd:var(--gold-lit); }

.btn--wa{ --btn-bg:#1FA855; --btn-fg:#fff; --btn-bd:#1FA855; }
.btn--wa:hover{ --btn-bg:#178f47; --btn-bd:#178f47; }

.btn--sm{ padding:.72rem 1.35rem; min-height:42px; font-size:.7rem; letter-spacing:.12em; }
.btn--lg{ padding:1.18rem 2.5rem; min-height:58px; font-size:.84rem; }
.btn--block{ width:100%; }
.btn svg{ width:1.05em; height:1.05em; flex:none; }

.btn-row{ display:flex; flex-wrap:wrap; gap:.85rem; align-items:center; }
.btn-row--center{ justify-content:center; }

/* Textlink mit Unterstrich-Animation */
.link{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.79rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em;
  text-decoration:none; color:inherit; padding-bottom:.32rem; position:relative;
}
.link::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1.5px;
  background:currentColor; transform:scaleX(1); transform-origin:right;
  transition:transform .42s var(--ease-out);
}
.link:hover::after{ transform:scaleX(0); }
.link svg{ width:.95em; height:.95em; transition:transform .38s var(--ease); }
.link:hover svg{ transform:translateX(4px); }

/* ── 6. RUMÄNISCHES ORNAMENT (Trenner) ─────────────────────────────────── */
.ornament{
  display:block; width:clamp(150px,20vw,260px); height:14px; margin:1.5rem auto;
  color:var(--bordeaux); opacity:.5;
}
.on-dark .ornament,.sect--dark .ornament{ color:var(--gold); opacity:.6; }
.ornament svg{ width:100%; height:100%; }

/* Dünne Trikolore-Linie – Mikro-Detail, nie flächig */
.tricolor{ display:flex; width:44px; height:3px; border-radius:2px; overflow:hidden; }
.tricolor i{ flex:1; }
.tricolor i:nth-child(1){ background:var(--ro-blue); }
.tricolor i:nth-child(2){ background:var(--ro-yellow); }
.tricolor i:nth-child(3){ background:var(--ro-red); }

/* ── 7. BILDER ─────────────────────────────────────────────────────────── */
.media{ position:relative; overflow:hidden; background:var(--ink-soft); }
.media img{ width:100%; height:100%; object-fit:cover; display:block; }
.media--4x5{ aspect-ratio:4/5; }
.media--1x1{ aspect-ratio:1/1; }
.media--3x2{ aspect-ratio:3/2; }
.media--16x9{ aspect-ratio:16/9; }
.media--21x9{ aspect-ratio:21/9; }
.media--zoom img{ transition:transform 1.05s var(--ease-out); }
.media--zoom:hover img{ transform:scale(1.055); }

/* Warm-Filter, damit Fotos zur Markenwelt passen */
.media--warm img{ filter:saturate(1.04) contrast(1.03); }

.scrim{ position:absolute; inset:0; pointer-events:none; }
.scrim--bottom{ background:linear-gradient(to top, rgba(11,9,8,.9) 0%, rgba(11,9,8,.45) 38%, transparent 72%); }
.scrim--full{ background:linear-gradient(to top, rgba(11,9,8,.86) 2%, rgba(11,9,8,.36) 46%, rgba(11,9,8,.55) 100%); }
.scrim--soft{ background:linear-gradient(to top, rgba(11,9,8,.72), rgba(11,9,8,.12) 60%, transparent); }

/* Platzhalter, klar gekennzeichnet (§24 Briefing) */
.placeholder{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.5rem; background:
    repeating-linear-gradient(45deg, var(--cream-deep) 0 12px, var(--cream-soft) 12px 24px);
  color:var(--brown); text-align:center; padding:1.5rem; min-height:160px;
}
.placeholder span{
  font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.17em;
  border:1.5px dashed currentColor; padding:.5rem .9rem; border-radius:var(--radius-pill);
}

/* ── 8. SCROLL-REVEAL (dezent) ─────────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(26px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .85s var(--ease-out), transform .85s var(--ease-out);
  transition-delay:var(--d,0ms);
}
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1!important; transform:none!important; transition:none!important; }
  .media--zoom img{ transition:none; }
  *{ animation-duration:.001ms!important; animation-iteration-count:1!important; }
}

/* ── 9. UTILITIES ──────────────────────────────────────────────────────── */
.price{
  font-family:var(--font-body); font-weight:700; font-variant-numeric:tabular-nums;
  letter-spacing:-.02em; white-space:nowrap;
}
.badge{
  display:inline-flex; align-items:center; gap:.32rem;
  font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em;
  padding:.36rem .66rem; border-radius:var(--radius-pill); line-height:1;
  border:1px solid currentColor;
}
.badge--gold{ color:var(--brown); background:rgba(200,161,90,.2); border-color:rgba(200,161,90,.6); }
.badge--veg { color:#2C6B34; background:rgba(44,107,52,.1); border-color:rgba(44,107,52,.4); }
.badge--example{ color:#8A5A00; background:#FFE9AE; border-color:#C89A2A; }
.no-scroll{ overflow:hidden; }
.mt-0{margin-top:0!important;} .mb-0{margin-bottom:0!important;}