/* ============================================================================
   CINEMA PARADISO CATERING
   Farbkonzept übernommen von der bestehenden Seite:
   warmes Espressobraun, Salbei-Beige, Elfenbein, Buttercreme, Olivgold.
   ALLE Farben stehen im Block "FARBEN" — nur dort ändern.
   ========================================================================== */

/* ─────────────────────────────── SCHRIFTEN ─────────────────────────────── */

@font-face{
  font-family:'Fraunces';
  src:url('../fonts/fraunces-latin-standard-normal.woff2') format('woff2-variations');
  font-weight:300 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Fraunces';
  src:url('../fonts/fraunces-latin-standard-italic.woff2') format('woff2-variations');
  font-weight:300 900; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Figtree';
  src:url('../fonts/figtree-latin-wght-normal.woff2') format('woff2-variations');
  font-weight:300 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Figtree';
  src:url('../fonts/figtree-latin-wght-italic.woff2') format('woff2-variations');
  font-weight:300 900; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Pinyon Script';
  src:url('../fonts/pinyon-script-latin-400-normal.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}


/* ──────────────────────────────── FARBEN ───────────────────────────────── */

:root{
  --espresso:#33230F;   /* dunkelster Grund — Formular, Fuß, Filmboden      */
  --bark:#3B2A1A;       /* Buttons, tiefe Schrift                           */
  --cocoa:#4B3826;      /* Fließtext auf hellem Grund                       */
  --sage:#E5E3D0;       /* Seitenhintergrund, das helle Salbei-Beige        */
  --sage-deep:#D5D3BC;  /* Salbei eine Stufe dunkler, für Kanten            */
  --ivory:#FCF8EC;      /* Karten, erhobene Flächen                         */
  --butter:#F8F0C2;     /* der leuchtende Schriftzug                        */
  --olive:#A28F52;      /* Olivgold — Akzent, Absende-Button                */
  --amber:#D9A441;      /* Sonnenlicht, Glanz                               */
  --leaf:#7E8C5A;       /* sonnenbeschienenes Laub, sparsam                 */
  --wa:#5F7538;         /* WhatsApp-Knopf: warmes Oliv-Grün statt Giftgrün  */
  --wa-deep:#4C5E2C;    /* dieselbe Farbe eine Spur dunkler (beim Hover)    */

  /* abgeleitet, nicht separat pflegen */
  --ink:var(--cocoa);
  --line:color-mix(in srgb, var(--cocoa) 18%, transparent);
  --line-light:color-mix(in srgb, var(--butter) 22%, transparent);

  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --script:'Pinyon Script', 'Bodoni Moda', cursive;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);

  --pad:clamp(1.25rem, 5vw, 5rem);
  --stack:clamp(4.5rem, 9vw, 9rem);
  --radius:18px;

  --head-h:74px;
}


/* ──────────────────────────────── BASIS ────────────────────────────────── */

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

html{ -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--head-h) + 14px); }

body{
  margin:0;
  background:var(--sage);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem, .95rem + .25vw, 1.125rem);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3{ margin:0; font-weight:400; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

::selection{ background:var(--amber); color:var(--espresso); }

:focus-visible{
  outline:2.5px solid var(--amber);
  outline-offset:3px;
  border-radius:4px;
}

.skip{
  position:fixed; top:-100px; left:1rem; z-index:200;
  background:var(--espresso); color:var(--butter);
  padding:.7rem 1.1rem; border-radius:0 0 10px 10px;
  text-decoration:none; font-weight:600;
  transition:top .25s var(--ease);
}
.skip:focus{ top:0; }

.wrap{
  width:100%; max-width:1080px; margin-inline:auto;
  padding-inline:var(--pad);
}
.wrap--wide{ max-width:1320px; }


/* ─────────────────────────────── TYPOGRAFIE ────────────────────────────── */

.eyebrow{
  font-size:.75rem; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--olive);
  margin:0 0 1.1rem;
}
.eyebrow--light{ color:var(--amber); }

.h2{
  font-family:var(--serif); font-weight:560;
  font-size:clamp(2.15rem, 1.3rem + 3.6vw, 4.2rem);
  line-height:1.06;
  letter-spacing:-.01em;
  color:var(--bark);
  margin:0 0 1.1rem;
  text-wrap:balance;
}
.h2--big{ font-size:clamp(2.4rem, 1.2rem + 4.6vw, 5rem); }
.h2--light{ color:var(--butter); }
.h2 em{ font-style:italic; color:var(--olive); }

.lede{
  font-size:clamp(1.06rem, 1rem + .45vw, 1.3rem);
  max-width:46ch; color:var(--cocoa);
  margin-bottom:0;
}


/* ──────────────────────────────── BUTTONS ──────────────────────────────── */

.btn{
  --btn-bg:var(--bark);
  --btn-fg:var(--butter);
  position:relative; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.95rem 1.85rem;
  background:var(--btn-bg); color:var(--btn-fg);
  border:0; border-radius:999px;
  font-family:var(--sans); font-size:.94rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; text-decoration:none;
  cursor:pointer; overflow:hidden;
  box-shadow:0 2px 0 rgba(0,0,0,.06), 0 14px 34px -18px rgba(51,35,15,.85);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .3s var(--ease);
}
.btn::after{                                   /* Lichtstreif beim Hover */
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg, transparent 20%,
             color-mix(in srgb, var(--amber) 55%, transparent) 50%, transparent 80%);
  transform:translateX(-120%);
  transition:transform .75s var(--ease);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 4px 0 rgba(0,0,0,.05), 0 22px 42px -20px rgba(51,35,15,.9); }
.btn:hover::after{ transform:translateX(120%); }
.btn:active{ transform:translateY(0); }

.btn svg{ width:1.15em; height:1.15em; flex:none; }
.btn--sm{ padding:.66rem 1.25rem; font-size:.8rem; }
.btn--lg{ padding:1.1rem 2.3rem; font-size:1rem; }
.btn--submit{ width:100%; --btn-bg:var(--olive); --btn-fg:var(--espresso); margin-top:.4rem; }
.btn--submit:hover{ --btn-bg:var(--amber); }

.btn--ghost{
  --btn-bg:transparent; --btn-fg:var(--butter);
  border:1.5px solid color-mix(in srgb, var(--butter) 45%, transparent);
  backdrop-filter:blur(6px);
  box-shadow:none;
}
.btn--ghost:hover{ --btn-bg:color-mix(in srgb, var(--butter) 14%, transparent); box-shadow:none; }

.btn--outline{
  --btn-bg:transparent; --btn-fg:var(--bark);
  border:1.5px solid var(--line);
  box-shadow:none; text-transform:none; letter-spacing:.01em;
}
.btn--outline:hover{ --btn-bg:var(--ivory); border-color:var(--olive); box-shadow:none; }

.iconbtn{
  display:grid; place-items:center;
  width:44px; height:44px; border-radius:50%;
  color:currentColor; text-decoration:none;
  border:1.5px solid color-mix(in srgb, currentColor 30%, transparent);
  transition:background .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.iconbtn svg{ width:19px; height:19px; }
.iconbtn:hover{
  background:color-mix(in srgb, currentColor 14%, transparent);
  border-color:currentColor; transform:translateY(-2px);
}


/* ─────────────────────────────── KOPFZEILE ─────────────────────────────── */

.head{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--head-h);
  display:flex; align-items:center; gap:clamp(1rem,3vw,2.5rem);
  padding-inline:var(--pad);
  color:var(--butter);
  transition:color .5s var(--ease);
}
.head::before{
  content:''; position:absolute; inset:0 0 auto 0; z-index:-1;
  height:210%; pointer-events:none;
  background:linear-gradient(to bottom, rgba(24,15,6,.62), rgba(24,15,6,0));
  transition:opacity .5s var(--ease);
}
.head.on-light{ color:var(--bark); }
.head.on-light::before{ opacity:0; }
.head.docked{ color:var(--bark); }
.head.docked::before{
  opacity:1; height:100%;
  background:color-mix(in srgb, var(--sage) 88%, transparent);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line);
}

.head__brand{
  display:flex; flex-direction:column; line-height:1;
  text-decoration:none; margin-right:auto;
  filter:drop-shadow(0 1px 10px rgba(0,0,0,.45));
  transition:filter .5s var(--ease);
}
.head.docked .head__brand,
.head.on-light .head__brand{ filter:none; }

.head__script{
  font-family:var(--script); font-size:1.35rem;
  color:currentColor; opacity:.92; margin-bottom:-.15em; margin-left:.15em;
}
.head__word{
  font-family:var(--serif); font-weight:500;
  font-size:.92rem; letter-spacing:.28em; text-transform:uppercase;
}

.head__nav{ display:flex; gap:clamp(.9rem,2vw,1.9rem); }
.head__nav a{
  position:relative;
  font-size:.86rem; font-weight:500; letter-spacing:.05em;
  text-decoration:none; padding:.3rem 0;
  text-shadow:0 1px 18px rgba(0,0,0,.5);
  transition:text-shadow .5s var(--ease);
}
.head.docked .head__nav a,
.head.on-light .head__nav a{ text-shadow:none; }
.head__nav a::after{
  content:''; position:absolute; left:0; bottom:0; height:1.5px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.head__nav a:hover::after{ transform:scaleX(1); transform-origin:left; }

.head__act{ display:flex; align-items:center; gap:.7rem; }
.head__act .btn{ --btn-bg:var(--butter); --btn-fg:var(--espresso); }
.head.docked .head__act .btn{ --btn-bg:var(--bark); --btn-fg:var(--butter); }


/* ════════════════════════════════ AUFTAKT ═══════════════════════════════
   Ein großes Bild, der Text darüber. Keine Bewegung beim Scrollen.
   ======================================================================== */

.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding:calc(var(--head-h) + 4vh) var(--pad) 10vh;
  background:var(--espresso);
  overflow:hidden;
}
.hero__bild{ position:absolute; inset:0; }
.hero__bild img{
  width:100%; height:100%;
  object-fit:cover; object-position:50% 52%;
}
.hero__schirm{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(100deg,
      rgba(10,6,2,.92) 0%, rgba(10,6,2,.84) 26%,
      rgba(10,6,2,.56) 46%, rgba(10,6,2,.18) 66%, transparent 82%),
    linear-gradient(to bottom, rgba(10,6,2,.48) 0%, transparent 22%),
    linear-gradient(to top, rgba(10,6,2,.46) 0%, transparent 28%);
}

.hero__inhalt{
  position:relative;
  width:100%; max-width:1320px; margin-inline:auto;
  color:var(--butter);
}
.hero__titel{ margin:0 0 1.4rem; line-height:1; }
.hero__script{
  display:block;
  font-family:var(--script);
  font-size:clamp(3rem, 1.6rem + 5.4vw, 6rem);
  color:var(--butter);
  margin-bottom:-.22em; margin-left:.06em;
  text-shadow:0 2px 46px rgba(0,0,0,.5);
}
.hero__word{
  display:block; white-space:nowrap;
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.18rem, .35rem + 2.55vw, 3rem);
  letter-spacing:.17em; text-transform:uppercase;
  color:var(--butter);
  text-shadow:0 2px 46px rgba(0,0,0,.5);
}
.hero__word .ch{ display:inline-block; will-change:transform; }
.hero__word .ch--space{ width:.34em; }

.hero__line{
  font-size:clamp(1.02rem, .96rem + .45vw, 1.26rem);
  color:color-mix(in srgb, var(--butter) 92%, white);
  text-shadow:0 1px 26px rgba(0,0,0,.7);
  max-width:42ch; margin-bottom:.7rem;
}
.hero__claim{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.3rem, 1rem + 1.1vw, 2rem);
  color:var(--amber);
  margin-bottom:1.9rem;
  text-shadow:0 1px 26px rgba(0,0,0,.6);
}
.hero__act{ display:flex; flex-wrap:wrap; gap:.85rem; }
.hero__meta{
  margin:1.9rem 0 0;
  font-size:.84rem; letter-spacing:.08em; text-transform:uppercase;
  color:color-mix(in srgb, var(--butter) 66%, transparent);
  text-shadow:0 1px 20px rgba(0,0,0,.7);
}


/* ═══════════════════════════════ ABSCHNITTE ═════════════════════════════ */

.sec{
  position:relative;
  padding-block:var(--stack);
  min-height:min(92vh, 900px);
  display:flex; align-items:center;
}

.sec--anlaesse{ background:var(--sage); }

.sec .wrap > *{
  opacity:0; transform:translateY(26px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.sec.in .wrap > *{ opacity:1; transform:none; }
.sec.in .wrap > *:nth-child(2){ transition-delay:.09s; }
.sec.in .wrap > *:nth-child(3){ transition-delay:.18s; }
.sec.in .wrap > *:nth-child(4){ transition-delay:.27s; }
.sec.in .wrap > *:nth-child(5){ transition-delay:.36s; }


/* ─────────────────────────────── ANLÄSSE ───────────────────────────────── */

.cards{
  display:grid; gap:clamp(.9rem,1.6vw,1.4rem);
  grid-template-columns:repeat(2, minmax(0,1fr));
  margin-top:clamp(2.5rem,5vw,4rem);
}
@media (min-width:1040px){ .cards{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
@media (max-width:620px){ .cards{ grid-template-columns:minmax(0,1fr); } }
.card{
  position:relative; isolation:isolate; overflow:hidden;
  padding:clamp(1.6rem,2.6vw,2.4rem);
  min-height:clamp(260px,26vw,330px);
  display:flex; flex-direction:column;
  background:var(--ivory);
  border:1px solid var(--line);
  border-radius:var(--radius);
  transition:transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease);
}
.card::before{                 /* Lichtkegel, der dem Zeiger folgt */
  content:''; position:absolute; inset:0; z-index:-1; opacity:0;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),
    color-mix(in srgb, var(--amber) 26%, transparent), transparent 68%);
  transition:opacity .45s var(--ease);
}
.card:hover{
  transform:translateY(-5px);
  border-color:color-mix(in srgb, var(--olive) 55%, transparent);
  box-shadow:0 30px 60px -34px rgba(51,35,15,.6);
}
.card:hover::before{ opacity:1; }

/* Alle vier Titel bekommen gleich viel Platz (die längste Überschrift geht
   über drei Zeilen), damit Text und Link in jeder Karte auf derselben Linie
   sitzen — auch bei ganz unterschiedlich langem Text. */
.card__title{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.5rem,1.15rem + 1.1vw,2.1rem);
  line-height:1.12; color:var(--bark);
  margin:0 0 .9rem;
  min-height:2.24em;
}
.card__text{ font-size:.98rem; color:var(--cocoa); margin:0 0 1.4rem; }
.card__link{
  align-self:flex-start;
  margin-top:auto;                 /* Link sitzt in jeder Karte ganz unten */
  font-size:.85rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--bark); text-decoration:none;
  border-bottom:1.5px solid var(--olive); padding-bottom:.2rem;
  transition:color .3s var(--ease);
}
.card__link:hover{ color:var(--olive); }


/* ──────────────────────────────── KÜCHE ────────────────────────────────── */

.sec--kueche{
  background:var(--ivory);
  flex-direction:column; align-items:stretch;
  padding-bottom:0;
}
.menu{ margin-top:clamp(2.5rem,5vw,4rem); border-top:1px solid var(--line); }
.menu__row{
  display:grid; gap:.4rem 3rem;
  grid-template-columns:minmax(180px, 22%) 1fr;
  padding:clamp(1.5rem,3vw,2.4rem) 0;
  border-bottom:1px solid var(--line);
  transition:background .45s var(--ease);
}
.menu__row:hover{ background:color-mix(in srgb, var(--sage) 45%, transparent); }
.menu__name{
  font-family:var(--serif); font-style:italic; font-weight:560;
  font-size:clamp(1.6rem,1.2rem + 1.4vw,2.5rem);
  color:var(--olive); line-height:1;
}
.menu__items{ font-size:clamp(1rem,.95rem + .3vw,1.15rem); color:var(--cocoa); margin:0; }

/* die einzelnen Gerichte, mit der deutschen Erklärung dahinter in gedämpfter Farbe */
.menu__list{
  list-style:none; margin:0; padding:0;
  font-size:clamp(1rem,.96rem + .28vw,1.12rem); color:var(--bark);
}
.menu__list li{ break-inside:avoid; margin:0 0 .6rem; line-height:1.35; }
.menu__list li:last-child{ margin-bottom:0; }
.menu__list li span{ color:color-mix(in srgb, var(--cocoa) 62%, transparent); }
/* lange Listen (Mezze, Yemekler) laufen ab mittlerer Breite in zwei Spalten */
@media (min-width:680px){
  .menu__list--wide{ columns:2; column-gap:clamp(1.5rem,3vw,3rem); }
  .menu__list--wide li{ margin-bottom:.7rem; }
}
.menu__note{
  margin:clamp(2.5rem,5vw,4rem) auto 0; max-width:30ch;
  text-align:center;
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(1.4rem,1.1rem + 1.4vw,2.1rem);
  line-height:1.25; color:var(--bark);
  text-wrap:balance;
}
.menu__allergene{
  margin:1.4rem auto 0; max-width:56ch;
  text-align:center;
  font-size:.9rem; line-height:1.5;
  color:color-mix(in srgb, var(--cocoa) 78%, transparent);
}

/* durchgehendes Bildband über die volle Breite */
.band{ margin:clamp(3rem,6vw,5rem) 0 0; }
.band picture{ display:block; }
.band img{
  width:100%; height:auto;
  aspect-ratio:2200/1000; object-fit:cover;
}
@media (max-width:860px){ .band img{ aspect-ratio:4/5; } }

.marquee{
  margin-top:0;
  padding-block:clamp(1.1rem,2vw,1.7rem);
  background:var(--espresso); color:var(--butter);
  overflow:hidden; white-space:nowrap;
}
.marquee__track{
  display:inline-flex; gap:1.6rem; align-items:center;
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.5rem,1.1rem + 1.6vw,2.6rem);
  will-change:transform;
}
.marquee__track span:nth-child(even){ color:var(--olive); }


/* ─────────────────────────────── FAMILIE ───────────────────────────────── */

.sec--familie{ background:var(--sage); }

/* Drei Bilder, eins pro Generation-Block: Ort, Familie, Essen. */
.story{
  display:grid; gap:clamp(2rem,3.5vw,3.5rem);
  grid-template-columns:repeat(3, minmax(0,1fr));
  margin-top:clamp(2.5rem,5vw,4rem);
}
@media (max-width:820px){ .story{ grid-template-columns:minmax(0,1fr); gap:clamp(2.5rem,6vw,3.5rem); } }

.story__bild{ margin:0 0 1.5rem; }
.story__bild img{
  width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 30%;
  border-radius:var(--radius);
  box-shadow:0 30px 60px -40px rgba(51,35,15,.75);
}
/* auch auf dem Handy Hochformat, damit die Gesichter vollständig bleiben */
@media (max-width:820px){ .story__bild img{ aspect-ratio:4/5; max-height:70vh; } }

.story__block{ display:flex; flex-direction:column; }
.story__title{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.3rem,1.1rem + .8vw,1.75rem);
  color:var(--bark); margin-bottom:.9rem; line-height:1.15;
  padding-top:1.2rem; border-top:2px solid var(--olive);
}
.story__block p{ font-size:1rem; color:var(--cocoa); }


/* ──────────────────────────────── ABLAUF ───────────────────────────────── */

.sec--ablauf{ background:var(--ivory); }

.ablauf__kopf{
  display:grid; gap:clamp(2rem,4vw,3.5rem);
  grid-template-columns:1fr;
  align-items:center;
}
@media (min-width:900px){
  .ablauf__kopf{ grid-template-columns:1fr .85fr; }
}
.ablauf__bild{ margin:0; }
.ablauf__bild picture{ display:block; }
.ablauf__bild img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--radius);
  box-shadow:0 34px 70px -40px rgba(51,35,15,.75);
}
.ablauf__bild figcaption{
  margin-top:.8rem;
  font-size:.82rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--olive);
}

/* Fünf Schritte in drei Spalten: 1-2-3 in der ersten Reihe, 4-5 links darunter,
   damit die Nummern in Lesereihenfolge Spalte für Spalte laufen. */
.steps{
  list-style:none; margin:clamp(3rem,6vw,4.5rem) 0 0; padding:0;
  display:grid; gap:clamp(2rem,4vw,3.2rem) clamp(1.6rem,3vw,3rem);
  grid-template-columns:repeat(3, minmax(0,1fr));
}
@media (max-width:760px){ .steps{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:520px){ .steps{ grid-template-columns:minmax(0,1fr); } }
.step{ position:relative; padding-top:3.6rem; }
.step__no{
  position:absolute; top:0; left:0;
  display:grid; place-items:center;
  width:44px; height:44px; border-radius:50%;
  background:var(--espresso); color:var(--butter);
  font-family:var(--serif); font-size:1.05rem;
}
.step__title{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.15rem,1.02rem + .5vw,1.42rem);
  line-height:1.2; color:var(--bark);
  margin-bottom:.6rem;
  text-wrap:balance;
}
/* zwei Zeilen Platz, damit die Fließtexte aller Schritte auf einer Linie
   beginnen, egal wie lang der Titel ist */
@media (min-width:561px){ .step__title{ min-height:2.4em; } }
.step p{ font-size:.98rem; color:var(--cocoa); }


/* ────────────────────────────── INSTAGRAM ──────────────────────────────── */

.sec--insta{
  background:var(--sage);
  flex-direction:column; align-items:stretch;
  min-height:auto;                       /* die Bilder tragen den Abschnitt */
}
.insta__head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:1.4rem;
}
.insta__head .h2{ margin-bottom:0; }
.insta__grid{
  display:grid; gap:clamp(.5rem,1vw,.9rem);
  grid-template-columns:repeat(2, minmax(0,1fr));
  margin-top:clamp(2rem,4vw,3rem);
}
@media (min-width:760px){ .insta__grid{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.insta__grid--invite{ display:block; }

.ig-invite{
  display:grid; gap:1.1rem; justify-items:start;
  padding:clamp(2rem,5vw,4rem);
  border:1px solid var(--line); border-radius:var(--radius);
  background:
    radial-gradient(120% 140% at 88% 8%, color-mix(in srgb, var(--amber) 20%, transparent), transparent 62%),
    var(--ivory);
  text-decoration:none; color:var(--cocoa);
  transition:border-color .45s var(--ease), transform .45s var(--ease);
}
.ig-invite:hover{ border-color:var(--olive); transform:translateY(-3px); }
.ig-invite__hand{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.5rem,1.1rem + 1.6vw,2.4rem);
  color:var(--bark);
}
.ig-invite__text{ max-width:46ch; font-size:1.02rem; }
.ig-invite__go{
  font-size:.85rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--bark); border-bottom:1.5px solid var(--olive); padding-bottom:.24rem;
}
.ig{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:4/5; border-radius:12px;
  background:var(--sage-deep);
  text-decoration:none; color:var(--butter);
}
.ig img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.ig:hover img{ transform:scale(1.06); }
.ig__cap{
  position:absolute; inset:auto 0 0 0; padding:2.4rem .9rem .8rem;
  font-size:.82rem; line-height:1.4;
  background:linear-gradient(to top, rgba(20,12,4,.85), transparent);
  opacity:0; transform:translateY(8px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.ig:hover .ig__cap{ opacity:1; transform:none; }
.ig--empty{
  display:grid; place-items:center; text-align:center;
  padding:1.2rem; color:var(--cocoa);
  background:
    repeating-linear-gradient(45deg, transparent 0 12px,
      color-mix(in srgb, var(--olive) 12%, transparent) 12px 24px),
    var(--ivory);
  border:1px solid var(--line);
  font-size:.86rem;
}


/* ─────────────────────────────── KONTAKT ───────────────────────────────── */

.sec--kontakt{ background:var(--espresso); color:var(--butter); }
.kontakt{
  display:grid; gap:clamp(2.4rem,5vw,5rem);
  grid-template-columns:1fr;
  align-items:start;
}
@media (min-width:900px){ .kontakt{ grid-template-columns:1fr minmax(420px,.9fr); } }

.kontakt__lede{
  max-width:38ch; margin:1.4rem 0 2.2rem;
  color:color-mix(in srgb, var(--butter) 78%, transparent);
}

.wa{
  display:flex; align-items:center; gap:1rem;
  padding:1.1rem 1.5rem;
  background:var(--wa); color:var(--butter);
  border-radius:999px; text-decoration:none;
  box-shadow:0 18px 40px -24px rgba(20,12,4,.9);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .3s var(--ease);
}
.wa:hover{ transform:translateY(-3px); background:var(--wa-deep);
  box-shadow:0 26px 50px -22px rgba(20,12,4,1); }
.wa__icon{
  display:grid; place-items:center; width:44px; height:44px; flex:none;
  border-radius:50%; background:color-mix(in srgb, var(--butter) 18%, transparent);
}
.wa__icon svg{ width:26px; height:26px; }
.wa__body{ display:flex; flex-direction:column; line-height:1.3; }
.wa__body strong{ font-size:1rem; letter-spacing:.01em; }
.wa__body small{ font-size:.85rem; opacity:.82; }

.kontakt__meta{ margin:2.4rem 0 0; display:grid; gap:1.2rem; }
.kontakt__meta div{ border-top:1px solid var(--line-light); padding-top:.8rem; }
.kontakt__meta dt{
  font-size:.7rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--olive); margin-bottom:.3rem;
}
.kontakt__meta dd{ margin:0; font-size:1.02rem; }
.kontakt__meta a{ text-decoration:none; border-bottom:1px solid var(--line-light); }
.kontakt__meta a:hover{ border-color:var(--amber); color:var(--amber); }

/* ---- Formular ---- */

.form{
  background:color-mix(in srgb, #1F1508 78%, transparent);
  border:1px solid var(--line-light);
  border-radius:var(--radius);
  padding:clamp(1.5rem,3vw,2.6rem);
  backdrop-filter:blur(10px);
}
.form__title{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.45rem,1.2rem + 1vw,2rem);
  color:var(--butter); margin-bottom:1.6rem;
}
.field{ margin-bottom:1.1rem; }
.field--row{ display:grid; gap:1.1rem; grid-template-columns:1fr 1fr; }
.field label,
.field--row label{
  display:block; margin-bottom:.42rem;
  font-size:.78rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:color-mix(in srgb, var(--butter) 72%, transparent);
}
.field input,
.field select,
.field textarea{
  width:100%; padding:.85rem 1rem;
  font-family:var(--sans); font-size:1rem;
  color:var(--butter);
  background:color-mix(in srgb, var(--butter) 7%, transparent);
  border:1px solid var(--line-light);
  border-radius:10px;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.field textarea{ resize:vertical; min-height:120px; }
.field select{ appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--olive) 50%),
                   linear-gradient(135deg,var(--olive) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
}
.field select option{ background:var(--espresso); color:var(--butter); }

/* Das Datumsfeld sieht ohne diese Zeilen auf dem Handy anders aus als die
   übrigen Felder (zentrierter Wert, andere Höhe, unsichtbares Kalender-Icon).
   Hier wird es an die restlichen Eingaben angeglichen. */
.field input[type="date"]{
  -webkit-appearance:none; appearance:none;
  text-align:left; min-height:3.35rem;
  position:relative;
}
.field input[type="date"]::-webkit-date-and-time-value{ text-align:left; margin:0; }
.field input[type="date"]::-webkit-datetime-edit{ padding:0; line-height:1.4; }
/* leeres Feld: Platzhalter in derselben gedämpften Farbe wie die anderen */
.field input[type="date"]:not(.has-value)::-webkit-datetime-edit{
  color:color-mix(in srgb, var(--butter) 40%, transparent);
}
/* Kalender-Icon (Chrome/Android) in Cremefarbe statt Schwarz, größer und klickbar */
.field input[type="date"]::-webkit-calendar-picker-indicator{
  filter:invert(88%) sepia(18%) saturate(360%) hue-rotate(3deg) brightness(103%);
  opacity:.75; cursor:pointer; width:1.15rem; height:1.15rem; padding:0;
}
.field input[type="date"]::-webkit-calendar-picker-indicator:hover{ opacity:1; }

.field input::placeholder,
.field textarea::placeholder{ color:color-mix(in srgb, var(--butter) 38%, transparent); }
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:var(--olive);
  background:color-mix(in srgb, var(--butter) 11%, transparent);
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"]{ border-color:#E0713F; }

.check{
  display:flex; gap:.7rem; align-items:flex-start;
  margin:1.3rem 0 .3rem;
  font-size:.86rem; line-height:1.5;
  color:color-mix(in srgb, var(--butter) 72%, transparent);
  cursor:pointer;
}
.check input{ margin-top:.25rem; accent-color:var(--olive); width:17px; height:17px; flex:none; }
.check a{ color:var(--butter); text-decoration:underline; text-underline-offset:2px; }
.check a:hover{ color:var(--amber); }

/* Die Bar ist ein Zusatz, den man aktiv wählt — also sichtbar machen. */
.check--bar{
  margin:.2rem 0 1.1rem;
  padding:.85rem 1.05rem;
  border:1px solid color-mix(in srgb, var(--olive) 55%, transparent);
  border-radius:12px;
  background:color-mix(in srgb, var(--olive) 12%, transparent);
  color:var(--butter);
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.check--bar:hover{
  border-color:var(--olive);
  background:color-mix(in srgb, var(--olive) 20%, transparent);
}

.form__status{ margin:1rem 0 0; font-size:.92rem; min-height:1.4em; }
.form__status[data-tone="ok"]{ color:#8FD9A8; }
.form__status[data-tone="err"]{ color:#F0A07A; }


/* ──────────────────────────────── FUSS ─────────────────────────────────── */

.foot{ background:#241808; color:var(--butter); padding-block:clamp(3rem,6vw,4.5rem); }
.foot__in{ display:grid; gap:2rem; }
@media (min-width:820px){
  .foot__in{ grid-template-columns:1fr auto auto; align-items:center; }
  .foot__legal{ grid-column:1/-1; }
}
.foot__brand{ display:flex; flex-direction:column; line-height:1; }
.foot__claim{
  font-family:var(--serif); font-style:italic;
  color:var(--olive); margin:.9rem 0 0; font-size:1.05rem;
}
.foot__nav{ display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; }
.foot__nav a{
  font-size:.88rem; text-decoration:none;
  color:color-mix(in srgb, var(--butter) 74%, transparent);
  transition:color .3s var(--ease);
}
.foot__nav a:hover{ color:var(--amber); }
.foot__social{ display:flex; gap:.6rem; }
.foot__legal{
  margin:1.4rem 0 0; padding-top:1.4rem;
  border-top:1px solid var(--line-light);
  font-size:.8rem; color:color-mix(in srgb, var(--butter) 54%, transparent);
}
.foot__legal a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.foot__legal a:hover{ color:var(--amber); }


/* ───────────────────────────── RECHTSSEITEN ────────────────────────────── */

.legal{ background:var(--sage); }
.legal__page{ padding-block:calc(var(--head-h) + clamp(3rem,7vw,6rem)) clamp(4rem,8vw,7rem); }
.legal__page .wrap{ max-width:760px; }
.legal__page h2{
  font-family:var(--serif);
  font-size:clamp(1.2rem,1.05rem + .65vw,1.55rem);
  color:var(--bark);
  margin:2.6rem 0 .7rem;
}
.legal__page p{ color:var(--cocoa); }
.legal__page a:not(.btn){ color:var(--bark); }
.legal__page .h2{ margin-bottom:1.6rem; }

/* Stellen, die nur die Inhaber ausfüllen können */
.legal__page .fill{
  padding:.9rem 1.1rem;
  border-left:3px solid var(--olive);
  background:color-mix(in srgb, var(--amber) 12%, var(--ivory));
  border-radius:0 10px 10px 0;
  font-size:.96rem;
}
.legal__note{
  margin-top:3rem; padding-top:1.4rem;
  border-top:1px solid var(--line);
  font-size:.9rem; font-style:italic;
}

/* ───────────────────────── schwebender WhatsApp-Knopf ──────────────────── */

.fab{
  position:fixed; z-index:95;
  right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem);
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.85rem 1.25rem;
  background:var(--wa); color:var(--butter);
  border-radius:999px; text-decoration:none;
  font-weight:700; font-size:.9rem;
  box-shadow:0 16px 36px -16px rgba(20,12,4,.7);
  opacity:0; transform:translateY(18px) scale(.94); pointer-events:none;
  transition:opacity .5s var(--ease), transform .5s var(--ease), box-shadow .4s var(--ease), background .3s var(--ease);
}
.fab.show{ opacity:1; transform:none; pointer-events:auto; }
.fab:hover{ background:var(--wa-deep); box-shadow:0 22px 44px -16px rgba(20,12,4,.8); }
.fab svg{ width:22px; height:22px; }
@media (max-width:560px){ .fab span{ display:none; } .fab{ padding:.95rem; } }


/* ────────────────────────────── RESPONSIV ──────────────────────────────── */

@media (max-width:1080px){
  .head__nav{ display:none; }
}

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

  .head__script{ font-size:1.05rem; }
  .head__word{ font-size:.68rem; letter-spacing:.2em; white-space:nowrap; }

  /* Auf dem Handy trägt der Schirm von unten, dort steht auch der Text. */
  .hero{ align-items:flex-end; padding-bottom:14vh; }
  .hero__schirm{
    background:linear-gradient(to top,
      rgba(10,6,2,.92) 0%, rgba(10,6,2,.88) 34%, rgba(10,6,2,.74) 52%,
      rgba(10,6,2,.44) 68%, rgba(10,6,2,.12) 86%, transparent 98%);
  }

  .menu__row{ grid-template-columns:1fr; gap:.5rem; }
  .field--row{ grid-template-columns:1fr; }
}

@media (max-width:420px){
  .hero__act{ flex-direction:column; align-items:stretch; }
  .hero__act .btn{ width:100%; }
}


/* ──────────────────── weniger Bewegung, wenn gewünscht ─────────────────── */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .sec .wrap > *{ opacity:1; transform:none; }
  .marquee__track{ transform:none !important; }
}

/* Für Menschen, die ohne JavaScript unterwegs sind, bleibt alles lesbar. */
.no-js .sec .wrap > *{ opacity:1; transform:none; }