/* ============================================================
   Schriften — lokal gehostet unter assets/fonts/
   Latin-Subset (deckt auch äöüß ab), keine Verbindung zu Google
   ============================================================ */
@font-face{
  font-family:"Prata";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("assets/fonts/prata-400.woff2") format("woff2");
}
@font-face{
  font-family:"Karla";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("assets/fonts/karla-variable.woff2") format("woff2");
}
@font-face{
  font-family:"Karla";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("assets/fonts/karla-variable.woff2") format("woff2");
}
@font-face{
  font-family:"Karla";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("assets/fonts/karla-variable.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("assets/fonts/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("assets/fonts/ibm-plex-mono-500.woff2") format("woff2");
}

/* ============================================================
   KARAM — Design-Token
   Reduzierte Palette: Tannengrün als einzige Akzentfarbe,
   viel Weißraum. Die Foodfotos tragen die Farbe, nicht das UI.
   ============================================================ */
:root{
  --pine:      #12251E;   /* Basis, einzige Marken-/Akzentfarbe */
  --pine-soft: #1B3229;   /* für dunkle Flächen (Footer, Beleg, Hero-Scrim) */
  --paper:     #EFEBE0;   /* warmes Papierweiß, Hauptgrund der meisten Sektionen */
  --paper-dim: #E4DFD1;   /* zweiter, ruhiger Ton für Sektions-Wechsel */
  --ink-soft:  #4E5C52;   /* gedämpfter Text auf hellem Grund */
  --on-dark:   #D8D2C3;   /* gedämpfter Text auf dunklem Grund (Footer, Beleg) */
  --line:      #D7D0BE;   /* neutrale Rahmen-/Trennlinie auf hellem Grund */
  --line-dark: rgba(239,235,224,.18); /* Rahmen auf dunklem Grund */
  --granate:   #8E2F39;   /* Granatapfel, nur für Fehlermeldungen */

  --display: "Prata", Georgia, serif;
  --body:    "Karla", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, monospace;

  --wrap: 1120px;
  --gap: clamp(3.5rem, 8vw, 7rem);
}

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

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--pine);
  font-family:var(--body);
  font-size:clamp(1rem,0.95rem + 0.2vw,1.075rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{ font-family:var(--display); font-weight:400; line-height:1.05; margin:0; color:var(--pine); }
h1{ font-size:clamp(2.9rem,1.6rem + 5.6vw,6rem); letter-spacing:-0.015em; }
h2{ font-size:clamp(2rem,1.4rem + 2.4vw,3.1rem); }
h3{ font-size:1.3rem; }
p{ margin:0 0 1rem; }
a{ color:inherit; }

.skip{
  position:absolute; left:-9999px; top:0; background:var(--pine);
  color:var(--paper); padding:.75rem 1rem; z-index:99;
}
.skip:focus{ left:0; }

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

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

/* ---------- Topbar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:1.5rem clamp(1.25rem,5vw,3rem);
  max-width:var(--wrap); margin:0 auto;
}
.wordmark{
  font-family:var(--display); font-size:1.35rem;
  letter-spacing:.24em; text-decoration:none;
}
.topnav{ display:flex; align-items:center; gap:clamp(.85rem,2.4vw,1.75rem); font-size:.88rem; }
.topnav a{ text-decoration:none; opacity:.72; }
.topnav a:hover{ opacity:1; }
.topnav .topnav-cta{
  opacity:1; border:1px solid var(--line);
  padding:.45rem 1rem; border-radius:999px; transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.topnav .topnav-cta:hover{ background:var(--pine); border-color:var(--pine); color:var(--paper); }
@media (max-width:760px){ .topnav a:not(.topnav-cta){ display:none; } }

/* ---------- Hero ---------- */
.hero{ position:relative; overflow:hidden; }
.hero-media{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
}
.hero-overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,
    rgba(18,37,30,.25) 0%,
    rgba(18,37,30,.55) 55%,
    rgba(18,37,30,.82) 100%);
}
.hero-content{
  position:relative; z-index:2;
  max-width:var(--wrap); margin:0 auto;
  padding:clamp(2.5rem,8vw,6rem) clamp(1.25rem,5vw,3rem) clamp(3rem,9vw,6rem);
}
.eyebrow{
  font-family:var(--mono); font-size:.76rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--pine); opacity:.7; margin-bottom:1.75rem;
}
.hero .eyebrow{ color:var(--paper); opacity:.85; }
.hero h1{ margin-bottom:1.5rem; color:var(--paper); }
.lede{
  max-width:34rem; font-size:clamp(1.05rem,1rem + .4vw,1.25rem);
  color:var(--paper);
}
.hero-actions{ margin-top:2.25rem; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; text-decoration:none; text-align:center;
  font-family:var(--body); font-size:.95rem; font-weight:700;
  padding:.85rem 1.6rem; border-radius:999px; border:1px solid transparent;
  cursor:pointer; transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--pine); color:var(--paper); }
.btn-primary:hover{ background:var(--pine-soft); }
.btn-ghost{ border-color:var(--line); color:var(--pine); }
.btn-ghost:hover{ border-color:var(--pine); }
.btn-block{ display:block; width:100%; }

/* ---------- Wiederkehrende CTAs ---------- */
.cta-repeat{ text-align:center; margin-top:3rem; }
.cta-note{
  margin:.85rem 0 0; font-family:var(--mono); font-size:.72rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);
}

/* ---------- Sektions-Grundgerüst ---------- */
.section{ padding:var(--gap) clamp(1.25rem,5vw,3rem); }
.section-inner{ max-width:var(--wrap); margin:0 auto; }
.section-head{ max-width:38rem; margin-bottom:3rem; }
.section-head h2{ margin-bottom:1rem; }
.section-head p{ margin:0; color:var(--ink-soft); }
.bg-paper{ background:var(--paper); }
.bg-dim{ background:var(--paper-dim); }

/* ---------- Vertrauenssäulen ---------- */
.pillars{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:2.5rem;
}
.pillar-icon{ width:2.5rem; height:2.5rem; margin-bottom:1.25rem; color:var(--pine); }
.pillar-icon svg{ width:100%; height:100%; display:block; }
.pillar h3{ margin-bottom:.5rem; font-size:1.15rem; }
.pillar p{ margin:0; font-size:.95rem; color:var(--ink-soft); }

/* ---------- Karten (Küchen, Speisen) ---------- */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:1.5rem; }
.card{
  border:1px solid var(--line); border-radius:4px;
  overflow:hidden; background:var(--paper); transition:border-color .2s ease;
}
.card:hover{ border-color:var(--pine); }
.card-media{ aspect-ratio:4/3; background:var(--pine-soft); }
.card-media img{ display:block; width:100%; height:100%; object-fit:cover; }
.card-body{ padding:1.5rem 1.6rem 1.75rem; }
.card h3{ display:flex; align-items:center; gap:.6rem; margin-bottom:.9rem; }
.card p{ margin:0; font-size:.95rem; color:var(--ink-soft); }
.card-tag{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--pine); background:transparent;
  border:1px solid var(--pine); padding:.2rem .5rem; border-radius:2px;
}
.dish-list{ list-style:none; margin:0; padding:0; font-size:.9rem; color:var(--ink-soft); }
.dish-list li{ padding:.3rem 0; border-bottom:1px dotted var(--line); }
.dish-list li:last-child{ border-bottom:0; }
.kuechen-note{
  margin-top:2.5rem; padding-left:1.25rem;
  border-left:2px solid var(--pine); color:var(--ink-soft); font-size:.95rem;
}

/* ============================================================
   Preispakete + Rechner — das Herzstück der Seite
   ============================================================ */
.pakete{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.5rem; margin-top:2.5rem;
}
.paket{
  border:1px solid var(--line); border-radius:4px;
  padding:1.75rem 1.6rem; background:var(--paper);
  display:flex; flex-direction:column;
}
.paket-name{ margin-bottom:.35rem; font-size:1.2rem; }
.paket-beschreibung{ font-size:.88rem; color:var(--ink-soft); margin-bottom:1.25rem; }
.paket-preis{ font-family:var(--display); font-size:2.1rem; color:var(--pine); margin-bottom:1.25rem; }
.paket-preis span{ font-family:var(--body); font-size:.82rem; color:var(--ink-soft); }
.paket-liste{ list-style:none; margin:0; padding:0; font-size:.88rem; }
.paket-liste li{ padding:.5rem 0; border-top:1px dotted var(--line); color:var(--ink-soft); }
.paket-liste li:first-child{ border-top:0; }
.pakete-hinweis{ max-width:40rem; margin:2rem 0 0; font-size:.9rem; color:var(--ink-soft); }

.calc{ margin-top:3.5rem; }
.calc-head p{ max-width:34rem; color:var(--ink-soft); margin:0; }
.calc-body{
  margin-top:2rem;
  display:grid; grid-template-columns:1.25fr .85fr; gap:clamp(2rem,5vw,4rem);
  align-items:start;
}
@media (max-width:880px){ .calc-body{ grid-template-columns:1fr; } }

.ctrl{ display:flex; align-items:baseline; justify-content:space-between; }
.ctrl-label{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-soft);
}
.ctrl-value{ font-family:var(--display); font-size:2.6rem; color:var(--pine); }

input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:2px;
  background:var(--line); margin:1rem 0 .5rem; cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:24px; height:24px; border-radius:50%;
  background:var(--pine); border:4px solid var(--paper);
  box-shadow:0 0 0 1px var(--pine); cursor:grab;
}
input[type=range]::-moz-range-thumb{
  width:24px; height:24px; border-radius:50%;
  background:var(--pine); border:4px solid var(--paper);
  box-shadow:0 0 0 1px var(--pine); cursor:grab;
}
.scale{
  display:flex; justify-content:space-between;
  font-family:var(--mono); font-size:.72rem; color:var(--ink-soft);
}

.tiers{ border:0; padding:0; margin:2.75rem 0 0; }
.tiers legend{ padding:0; margin-bottom:.9rem; }

.tier{
  display:grid; grid-template-columns:auto 1fr auto; align-items:start;
  gap:1rem; padding:1.15rem 1.25rem; margin-bottom:.6rem; cursor:pointer;
  border:1px solid var(--line); border-radius:4px; background:transparent;
  transition:border-color .15s ease, background .15s ease;
}
.tier:hover{ border-color:var(--pine); }
.tier:has(input:checked){ border-color:var(--pine); background:var(--paper-dim); }
.tier input{ margin-top:.45rem; accent-color:var(--pine); }
.tier-name{ display:block; font-weight:700; margin-bottom:.15rem; }
.tier-desc{ display:block; font-size:.9rem; line-height:1.5; color:var(--ink-soft); }
.tier-price{ font-family:var(--mono); font-size:1.05rem; white-space:nowrap; }

.extras{ list-style:none; margin:2rem 0 0; padding:0; }
.extras li{ padding:.45rem 0; border-bottom:1px dotted var(--line); }
.extras label{ display:flex; align-items:center; gap:.7rem; cursor:pointer; font-size:.95rem; }
.extras input{ accent-color:var(--pine); }
.extras em{ margin-left:auto; font-family:var(--mono); font-style:normal; font-size:.85rem; color:var(--ink-soft); }

/* Der Beleg — bewusst dunkel, wie ein echter Bon */
.ticket{
  background:var(--pine); color:var(--paper);
  padding:1.75rem 1.6rem 1.6rem; border-radius:4px;
  position:sticky; top:1.5rem;
}
@media (max-width:880px){ .ticket{ position:static; } }
.ticket-title{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--paper); opacity:.85; margin-bottom:1.25rem;
}
.ticket-lines{ margin:0 0 1.25rem; font-family:var(--mono); font-size:.85rem; }
.ticket-lines div{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.4rem 0; border-bottom:1px dotted var(--line-dark);
}
.ticket-lines dt{ color:var(--on-dark); }
.ticket-lines dd{ margin:0; white-space:nowrap; }

.ticket-total{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; padding-top:.75rem;
}
.ticket-total span{ font-family:var(--mono); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; }
.ticket-total strong{ font-family:var(--display); font-weight:400; font-size:2.3rem; color:var(--paper); }
.ticket-per{ font-family:var(--mono); font-size:.82rem; color:var(--on-dark); margin:.1rem 0 1.25rem; }
.ticket-note{ font-size:.78rem; line-height:1.55; color:var(--on-dark); opacity:.9; margin-bottom:1.25rem; }
.ticket .btn + .btn{ margin-top:.75rem; }

/* ---------- Ablauf ---------- */
.steps{
  list-style:none; margin:2.75rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:2rem;
}
.steps li{ padding-top:1.1rem; border-top:1px solid var(--line); }
.step-n{
  display:block; font-family:var(--mono); font-size:.78rem;
  color:var(--pine); margin-bottom:.75rem;
}
.steps h3{ margin-bottom:.5rem; }
.steps p{ margin:0; font-size:.93rem; color:var(--ink-soft); }

/* ---------- Referenzen ---------- */
.reviews{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.5rem; margin-top:2.5rem;
}
.review{
  border:1px dashed var(--line); border-radius:4px;
  padding:1.5rem 1.4rem; background:var(--paper);
}
.review-stars{
  font-family:var(--mono); font-size:.8rem; letter-spacing:.08em;
  color:var(--ink-soft); margin-bottom:.75rem;
}
.review p{ margin:0; font-size:.9rem; color:var(--ink-soft); }

/* ---------- Anfrage ---------- */
.anfrage-text{ max-width:34rem; }
.anfrage-text p{ color:var(--ink-soft); }

.anfrage-aktionen{
  display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem;
  margin-top:2rem;
}
.anfrage-mail{ font-family:var(--mono); font-size:.85rem; color:var(--ink-soft); text-decoration:underline; }
.anfrage-mail:hover{ color:var(--pine); }

.anfrage-checkliste{
  list-style:none; margin:2.25rem 0 0; padding:0;
  display:flex; flex-direction:column; gap:.5rem;
  font-family:var(--mono); font-size:.85rem; color:var(--ink-soft);
}
.anfrage-checkliste li{ padding-left:1.2rem; position:relative; }
.anfrage-checkliste li::before{ content:"–"; position:absolute; left:0; color:var(--pine); }

/* ---------- FAQ ---------- */
.faq-list{ max-width:42rem; margin-top:2.5rem; }
.faq-item{ border-top:1px solid var(--line); }
.faq-item:last-child{ border-bottom:1px solid var(--line); }
.faq-item summary{
  cursor:pointer; list-style:none; padding:1.25rem 0;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  font-weight:700; font-size:1rem; color:var(--pine);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; font-family:var(--mono); font-size:1.3rem; color:var(--pine);
  flex-shrink:0;
}
.faq-item[open] summary::after{ content:"–"; }
.faq-item p{ margin:0 0 1.5rem; color:var(--ink-soft); max-width:38rem; }

/* ---------- Rechtliche Seiten (Impressum, Datenschutz) ---------- */
.legal{
  max-width:var(--wrap); margin:0 auto;
  padding:clamp(2rem,6vw,4rem) clamp(1.25rem,5vw,3rem) var(--gap);
}
.legal h1{ font-size:clamp(2.2rem,1.6rem + 2.4vw,3.2rem); margin-bottom:2.5rem; }
.legal h2{ font-family:var(--display); font-weight:400; font-size:1.4rem; margin:2.75rem 0 1rem; }
.legal h2:first-of-type{ margin-top:0; }
.legal p, .legal li{ color:var(--ink-soft); max-width:42rem; }
.legal ul{ padding-left:1.25rem; margin:0 0 1rem; }
.legal li{ margin-bottom:.4rem; }
.legal a{ color:var(--pine); text-decoration:underline; }
.legal a:hover{ color:var(--pine-soft); }

.legal-back{
  margin:0 0 2.5rem; font-family:var(--mono); font-size:.85rem;
}
.legal-back a{ text-decoration:none; }
.legal-back a:hover{ text-decoration:underline; }

.platzhalter{
  display:inline-block; font-family:var(--mono); font-size:.85em;
  color:var(--pine); background:rgba(18,37,30,.06);
  border:1px dashed rgba(18,37,30,.4); border-radius:3px;
  padding:.1em .5em;
}

/* ---------- Footer ---------- */
.footer{
  background:var(--pine); color:var(--on-dark);
}
.footer-inner{
  max-width:var(--wrap); margin:0 auto;
  padding:2.5rem clamp(1.25rem,5vw,3rem) 3.5rem;
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem 2rem;
  font-size:.85rem;
}
.footer .wordmark{ margin:0; color:var(--paper); text-decoration:none; }
.footer nav{ display:flex; gap:1.5rem; }
.footer a{ text-decoration:none; opacity:.85; }
.footer a:hover{ opacity:1; }
.footer nav a[aria-current="page"]{ opacity:1; text-decoration:underline; text-underline-offset:.25em; }
.footer-note{ margin:0 0 0 auto; opacity:.65; }
.footer-social{ display:flex; gap:.75rem; }
.footer-social a, .footer-social span{
  display:flex; align-items:center; justify-content:center;
  width:2rem; height:2rem; border:1px solid var(--line-dark); border-radius:999px;
  opacity:.6;
}
.footer-social svg{ width:1rem; height:1rem; }
.footer-social span{ cursor:default; }
.footer-social a[aria-disabled="true"]{ pointer-events:none; opacity:.35; }

/* ---------- 404 ---------- */
.notfound{
  min-height:56vh; display:flex; flex-direction:column; justify-content:center;
  max-width:var(--wrap); margin:0 auto;
  padding:var(--gap) clamp(1.25rem,5vw,3rem);
}
.notfound p{ color:var(--ink-soft); max-width:32rem; }
.notfound-aktionen{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:1.5rem; }