/* Störkoch Catering — Website-Stile. Farben und Maße zentral hier ändern. */

/* Schriften vom eigenen Server — keine Verbindung zu Google. Dateien in assets/fonts/ */
@font-face{font-family:Anton; font-style:normal; font-weight:400; font-display:swap;
  src:url(assets/fonts/anton-400-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:Anton; font-style:normal; font-weight:400; font-display:swap;
  src:url(assets/fonts/anton-400-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Inter Tight"; font-style:italic; font-weight:400; font-display:swap;
  src:url(assets/fonts/inter-tight-400-italic-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Inter Tight"; font-style:italic; font-weight:400; font-display:swap;
  src:url(assets/fonts/inter-tight-400-italic-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Inter Tight"; font-style:normal; font-weight:300; font-display:swap;
  src:url(assets/fonts/inter-tight-300-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Inter Tight"; font-style:normal; font-weight:300; font-display:swap;
  src:url(assets/fonts/inter-tight-300-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Inter Tight"; font-style:normal; font-weight:400; font-display:swap;
  src:url(assets/fonts/inter-tight-400-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Inter Tight"; font-style:normal; font-weight:400; font-display:swap;
  src:url(assets/fonts/inter-tight-400-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Inter Tight"; font-style:normal; font-weight:500; font-display:swap;
  src:url(assets/fonts/inter-tight-500-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Inter Tight"; font-style:normal; font-weight:500; font-display:swap;
  src:url(assets/fonts/inter-tight-500-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Inter Tight"; font-style:normal; font-weight:600; font-display:swap;
  src:url(assets/fonts/inter-tight-600-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Inter Tight"; font-style:normal; font-weight:600; font-display:swap;
  src:url(assets/fonts/inter-tight-600-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Inter Tight"; font-style:normal; font-weight:700; font-display:swap;
  src:url(assets/fonts/inter-tight-700-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Inter Tight"; font-style:normal; font-weight:700; font-display:swap;
  src:url(assets/fonts/inter-tight-700-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --gold:#C2922E; --gold-h:#D8A94A; --plum:#86005E; --plum-h:#A31274;
  --bg:#1A1815; --panel:#201D17; --deep:#131210;
  --cream:#F7F3EA; --text:#D8D1C3; --muted:#ABA294; --dim:#8A8274; --faint:#7E7669; --num:#6B6355;
  --line:#2E2A21; --line2:#3A3428; --line3:#332E24; --border:#4A4335;
  --pad:72px; --ease:cubic-bezier(0.22,1,0.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:78px}
body{margin:0; background:var(--bg); color:var(--cream);
  font-family:"Inter Tight",system-ui,-apple-system,Segoe UI,sans-serif; font-weight:300;
  -webkit-font-smoothing:antialiased}
img{max-width:100%; height:auto}
p{margin:0; text-wrap:pretty}
ul{margin:0; padding:0; list-style:none}
h1,h2,h3{margin:0; font-family:Anton,Impact,"Haettenschweiler",sans-serif; font-weight:400;
  text-transform:uppercase; line-height:1.05; letter-spacing:0.005em}
a{color:inherit; text-decoration:none}
a:hover{color:var(--gold)}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px}

.wrap{max-width:1280px; margin:0 auto; padding-left:var(--pad); padding-right:var(--pad)}
.sect{padding-top:96px; padding-bottom:96px; border-top:1px solid var(--line)}
.sect--panel{background:var(--panel)}
.eyebrow{font-family:"Inter Tight",sans-serif; font-size:12px; font-weight:600; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--gold)}
.lead{font-size:19px; line-height:1.62; color:var(--muted); max-width:47ch}
.note{font-size:16px; line-height:1.6; color:var(--muted); max-width:40ch}
.h-sect{font-size:52px; color:var(--cream)}
.head{display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:48px; flex-wrap:wrap}
.head__t{display:flex; flex-direction:column; gap:16px}

/* Navigation */
.nav{position:sticky; top:0; z-index:20; background:rgba(26,24,21,0.92); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.nav__in{display:flex; align-items:center; justify-content:space-between; gap:32px;
  max-width:1280px; margin:0 auto; padding:18px var(--pad)}
.nav__logo{height:36px; display:block}
.nav__links{display:flex; align-items:center; gap:34px; font-size:14px; font-weight:500;
  letter-spacing:0.04em; color:#C6BFB1}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; border-radius:6px;
  font-weight:600; transition:background 140ms var(--ease), border-color 140ms var(--ease), color 140ms var(--ease)}
.btn--wa{background:var(--plum); color:var(--cream); font-size:14px; padding:11px 20px}
.btn--wa:hover{background:var(--plum-h); color:var(--cream)}
.btn--big{font-size:16px; padding:16px 28px}
.btn--ghost{border:1px solid var(--border); color:var(--cream); font-weight:500}
.btn--ghost:hover{border-color:var(--gold); color:var(--gold)}
.nav__burger{display:none}

/* Hero */
.hero{display:grid; grid-template-columns:1.12fr 0.88fr; gap:72px; align-items:center;
  padding-top:104px; padding-bottom:96px}
.hero__t{display:flex; flex-direction:column; gap:28px}
.hero h1{font-size:88px; line-height:1.14; color:var(--cream)}
.hero h1 em{font-style:normal; color:var(--gold)}
.rule{display:inline-flex; align-items:center; gap:12px}
.rule::before{content:""; width:26px; height:1px; background:var(--gold)}
.btnrow{display:flex; gap:14px; flex-wrap:wrap; padding-top:8px}
.facts{display:flex; gap:14px 28px; flex-wrap:wrap; padding-top:18px; font-size:13px; letter-spacing:0.05em;
  color:var(--faint); text-transform:uppercase; font-weight:500}
.frame{border-radius:8px; overflow:hidden; border:1px solid var(--line2)}
.frame img{display:block; width:100%; object-fit:cover}
.caption{display:flex; align-items:baseline; gap:10px; font-size:13px; color:var(--faint); letter-spacing:0.04em; margin-top:14px}
.caption b{color:var(--gold); font-weight:600}

/* Karten-Raster (Leistungen, Räume, Partner) */
.tiles{display:grid; gap:1px; background:var(--line3); border:1px solid var(--line3);
  border-radius:8px; overflow:hidden}
.tiles--3{grid-template-columns:repeat(3,1fr)}
.tiles--2{grid-template-columns:repeat(2,1fr)}
.tile{background:var(--bg); padding:38px 34px; display:flex; flex-direction:column; gap:14px; min-height:210px}
.tile__n{font-size:12px; letter-spacing:0.16em; color:var(--num); font-weight:600}
.tile h3{font-size:23px; color:var(--cream)}
.tile p{font-size:15px; line-height:1.6; color:var(--muted)}

/* Speisekarte */
.menu{display:grid; grid-template-columns:1fr 1fr; gap:56px 72px; align-items:start}
.menu__col{display:flex; flex-direction:column; gap:52px}
.cat{display:flex; flex-direction:column; gap:22px}
.cat h3{font-size:26px; color:var(--gold); border-bottom:1px solid var(--line2); padding-bottom:12px}
.cat__head{display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  border-bottom:1px solid var(--line2); padding-bottom:12px}
.cat__head h3{border:0; padding:0}
.cat__head span{font-size:15px; color:var(--gold); font-weight:600; white-space:nowrap}
.dishes{display:flex; flex-direction:column; gap:16px}
.dish{display:flex; flex-direction:column; gap:3px}
.dish__l{display:flex; align-items:baseline; gap:12px}
.dish__n{font-size:17px; color:var(--cream); font-weight:400}
.dish__d{flex:1; align-self:flex-end; margin-bottom:6px; height:0; border-bottom:1px dotted var(--border)}
.dish__p{font-size:17px; color:var(--gold); font-weight:600; white-space:nowrap}
.dish__x{font-size:14px; line-height:1.5; color:var(--dim); max-width:52ch}
.cat p{font-size:15px; line-height:1.6; color:var(--muted)}
.picks{display:grid; grid-template-columns:1fr 1fr; gap:26px 32px}
.pick h4{margin:0 0 10px; font-family:"Inter Tight",sans-serif; font-size:13px; font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--faint)}
.pick li{font-size:15px; line-height:1.75; color:var(--text)}

/* Bildzäsur */
.band img{display:block; width:100%; aspect-ratio:2.7/1; object-fit:cover; object-position:50% 52%}

/* Über mich */
.about{display:grid; grid-template-columns:0.92fr 1.08fr; gap:72px; align-items:start}
.quote{font-size:24px; line-height:1.42; font-style:italic; color:var(--text); margin-top:26px}
.quote + span{display:block; font-size:14px; letter-spacing:0.04em; color:var(--faint); margin-top:10px}
.about__t{display:flex; flex-direction:column; gap:26px}
.about__t p{font-size:17px; line-height:1.7; color:var(--muted)}
.about__t p.big{font-size:19px; line-height:1.66; color:var(--text)}
.cv{display:flex; flex-direction:column; margin-top:14px; border-top:1px solid var(--line)}
.cv div{display:grid; grid-template-columns:150px 1fr; gap:6px 24px; padding:16px 0; border-bottom:1px solid var(--line)}
.cv div:last-child{border-bottom:0}
.cv b{font-size:15px; color:var(--gold); font-weight:600}
.cv span{font-size:16px; color:var(--text)}

/* Ablauf */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:48px}
.step{display:flex; flex-direction:column; gap:12px; border-top:2px solid var(--gold); padding-top:20px}
.step__n{font-family:Anton,Impact,sans-serif; font-size:34px; color:var(--gold); line-height:1}
.step h3{font-family:"Inter Tight",sans-serif; font-size:19px; font-weight:600; text-transform:none; color:var(--cream)}
.step p{font-size:15px; line-height:1.6; color:var(--muted)}

/* Kontakt */
.contact{display:grid; grid-template-columns:1.15fr 0.85fr; gap:80px; align-items:start}
.contact h2{font-size:56px; color:var(--cream)}
.ways{display:flex; flex-direction:column; border-top:1px solid var(--line); margin-top:32px}
.way{display:flex; align-items:baseline; justify-content:space-between; gap:24px; padding:20px 0;
  border-bottom:1px solid var(--line); transition:color 140ms var(--ease)}
.way__k{font-size:13px; letter-spacing:0.14em; text-transform:uppercase; color:var(--faint)}
.way__v{font-size:22px; font-weight:500}
.info{display:flex; flex-direction:column; gap:28px; padding-top:8px}
.info__k{font-size:13px; letter-spacing:0.14em; text-transform:uppercase; color:var(--faint); margin-bottom:8px}
.info p{font-size:17px; line-height:1.65; color:var(--text)}
.box{border:1px solid var(--line2); border-radius:8px; padding:22px; background:var(--panel)}
.box p{font-size:15px; line-height:1.6; color:var(--muted)}

/* Unterseiten */
.page-head{background:var(--panel); border-bottom:1px solid var(--line);
  padding-top:72px; padding-bottom:44px; display:flex; flex-direction:column; gap:14px}
.page-head h1{font-size:64px; color:var(--cream)}
.page-head p{font-size:17px; line-height:1.6; color:var(--muted); max-width:64ch}
.doc{display:grid; grid-template-columns:340px 1fr; gap:72px; align-items:start;
  padding-top:64px; padding-bottom:80px}
.doc--toc{grid-template-columns:240px 1fr}
.side{display:flex; flex-direction:column; gap:22px; padding:28px; border:1px solid var(--line2);
  border-radius:8px; background:var(--panel)}
.side__k{font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--faint)}
.side p{font-size:17px; line-height:1.65; color:var(--cream)}
.side p span{color:var(--text); font-weight:300}
.side ul{display:flex; flex-direction:column; gap:10px; font-size:15px; line-height:1.5; color:var(--muted)}
.kv{display:grid; grid-template-columns:64px 1fr; gap:9px 14px; font-size:16px; color:var(--text)}
.kv dt{color:var(--faint)}
.kv dd{margin:0}
.prose{display:flex; flex-direction:column; gap:36px; max-width:74ch}
.prose section{display:flex; flex-direction:column; gap:10px}
.prose h2{font-family:"Inter Tight",sans-serif; font-size:20px; font-weight:600; text-transform:none;
  color:var(--cream); line-height:1.4}
.prose h2 span{color:var(--gold); margin-right:10px}
.prose p{font-size:17px; line-height:1.7; color:var(--muted)}
.prose a{color:var(--gold)}
.prose .sub{margin-top:6px; padding-left:20px; border-left:2px solid var(--line2);
  display:flex; flex-direction:column; gap:8px}
.prose .sub p{font-size:16px}
.prose .sub b{color:var(--gold); font-weight:600}
.stand{font-size:15px; color:var(--faint); border-top:1px solid var(--line); padding-top:22px}
.toc{position:sticky; top:100px; display:flex; flex-direction:column; gap:12px}
.toc__k{font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--faint);
  padding-bottom:6px; border-bottom:1px solid var(--line)}
.toc ul{display:flex; flex-direction:column; gap:9px; font-size:15px; line-height:1.4; color:var(--muted)}
.toc b{color:var(--gold); font-weight:600; margin-right:6px}
.rates{display:flex; flex-direction:column; border:1px solid var(--line2); border-radius:8px;
  overflow:hidden; background:var(--panel); margin-top:4px}
.rates div{display:grid; grid-template-columns:1fr auto; gap:10px 24px; padding:15px 22px;
  border-bottom:1px solid var(--line)}
.rates div:last-child{border-bottom:0}
.rates span{font-size:16px; color:var(--text)}
.rates b{font-size:16px; color:var(--gold); font-weight:600; white-space:nowrap}
.room{background:var(--bg); padding:22px 26px; display:flex; align-items:baseline; gap:16px; min-height:0}
.room b{font-size:13px; color:var(--num); font-weight:600; min-width:22px}
.room span{display:block; font-size:17px; color:var(--cream)}
.room small{display:block; font-size:14px; color:var(--dim); margin-top:3px}
.pcard{background:var(--bg); padding:26px; display:flex; flex-direction:column; gap:8px;
  min-height:0; transition:background 140ms var(--ease)}
a.pcard:hover{background:var(--panel); color:inherit}
.pcard b{font-size:18px; color:var(--cream); font-weight:400}
.pcard span{font-size:14px; color:var(--dim)}
.pcard em{font-style:normal; font-size:13px; color:var(--gold); margin-top:2px}
.pcard em.off{color:var(--num)}

/* Fußzeile */
.foot{border-top:1px solid var(--line); background:var(--deep)}
.foot__in{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  max-width:1280px; margin:0 auto; padding:40px var(--pad)}
.foot img{height:34px; display:block; opacity:0.85}
.foot__l{display:flex; align-items:center; gap:26px; flex-wrap:wrap; font-size:14px; color:var(--faint)}
.foot__l a[aria-current]{color:var(--gold)}

@media (max-width:1000px){
  :root{--pad:32px}
  .hero{grid-template-columns:1fr; gap:40px; padding-top:56px; padding-bottom:64px}
  .hero h1{font-size:clamp(44px,9vw,64px)}
  .h-sect{font-size:clamp(32px,6.5vw,44px)}
  .contact h2{font-size:clamp(36px,8vw,48px)}
  .page-head h1{font-size:clamp(40px,9vw,56px)}
  .sect{padding-top:64px; padding-bottom:64px}
  .tiles--3,.tiles--2{grid-template-columns:1fr}
  .tile{min-height:0; padding:28px 26px}
  .menu{grid-template-columns:1fr; gap:44px}
  .menu__col{gap:44px}
  .about,.contact,.doc,.doc--toc{grid-template-columns:1fr; gap:36px}
  .steps{grid-template-columns:1fr; gap:32px}
  .band img{aspect-ratio:4/3}
  .nav__links{display:none}
  .nav__burger{display:block}
  .toc{position:static}
  .cv div{grid-template-columns:1fr}
  .foot__in{flex-direction:column; align-items:flex-start}
}
@media (max-width:640px){
  :root{--pad:22px}
  .picks{grid-template-columns:1fr}
  .btnrow{flex-direction:column; align-items:stretch}
  .btn--big{padding:17px 24px; min-height:54px}
  .way__v{font-size:19px}
  .facts{gap:8px 18px; font-size:12px}
}

/* Mobiles Menü — reines HTML, ohne JavaScript */
.menuwrap{position:relative}
.menuwrap summary{list-style:none; cursor:pointer; display:inline-flex; align-items:center;
  justify-content:center; width:44px; height:44px; border:1px solid var(--line2); border-radius:6px}
.menuwrap summary::-webkit-details-marker{display:none}
.menuwrap ul{position:absolute; right:0; top:52px; background:var(--panel); border:1px solid var(--line2);
  border-radius:8px; padding:8px; min-width:200px; display:flex; flex-direction:column;
  box-shadow:0 18px 40px rgba(0,0,0,0.45)}
.menuwrap li a{display:block; padding:12px 14px; font-size:16px; color:var(--text)}
.menuwrap li a:hover{color:var(--gold)}

@media print{
  .nav,.btn--wa,.menuwrap{display:none}
  body{background:#fff; color:#1A1815}
}