/* Apeti: Stylesheet, 1:1 aus Entwurf 10 übernommen (_quelle/apeti-entwurf-10.html).
   Neu sind nur die lokalen Schriften oben und die Hilfsklassen unten,
   die die früheren style-Attribute ersetzen (wegen Content-Security-Policy). */

/* Schriften lokal, Lizenz: OFL (siehe OFL-Archivo.txt, OFL-Shrikhand.txt) */
@font-face{font-family:"Archivo"; src:url("/assets/fonts/archivo-var.woff2") format("woff2"); font-weight:400 900; font-stretch:62% 125%; font-style:normal; font-display:swap}
@font-face{font-family:"Shrikhand"; src:url("/assets/fonts/shrikhand.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap}

:root{
  --rot:#C62A22; --rot-tief:#9E1F19; --sand:#E6D8BF; --creme:#F4ECDD; --alu:#C3C7CB;
  --abend:#24232B; --abend-tief:#1C1B21; --led:#FFD69A; --espresso:#2B2620;
  --bg:var(--creme); --bg-2:var(--sand); --ink:var(--espresso); --muted:#5C554A; --line:#D8CCB4; --accent:var(--rot);
  --todo-bg:#FFF1C7; --todo-ink:#6A4B00;
  --logo:"Shrikhand", Georgia, serif;
  --sans:"Archivo", "Helvetica Neue", Arial, sans-serif;
  --head:72px;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:var(--abend); --bg-2:#2E2C35; --ink:var(--creme); --muted:#D7CDBB; --line:#45424D; --accent:var(--led);
    --todo-bg:#4A3B12; --todo-ink:#FFE3A1; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:var(--abend); --bg-2:#2E2C35; --ink:var(--creme); --muted:#D7CDBB; --line:#45424D; --accent:var(--led);
  --todo-bg:#4A3B12; --todo-ink:#FFE3A1; color-scheme:dark;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth; scroll-padding-top:calc(env(safe-area-inset-top,0px) + var(--head) + 8px)}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto} *{animation:none!important; transition:none!important}}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:1.0625rem; line-height:1.55}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:30; background:var(--bg)}
img,svg{max-width:100%; display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent); outline-offset:3px; border-radius:2px}
.wrap{width:min(1180px, 100% - 2.5rem); margin-inline:auto}
.todo{background:var(--todo-bg); color:var(--todo-ink); padding:.05em .4em; border-radius:3px; font-size:.85em; font-weight:600}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* Typo: Archivo breit und schwer für Headlines, Shrikhand nur im Logo */
h1,h2,h3{margin:0; font-family:var(--sans); letter-spacing:-.015em}
h2{font-size:clamp(2.2rem, 5vw, 4rem); line-height:.98; font-weight:900; font-variation-settings:"wdth" 125; max-width:16ch}
h3{font-size:1.35rem; line-height:1.15; font-weight:800; font-variation-settings:"wdth" 112}
p{margin:0 0 1rem; max-width:38em}
.lead{font-size:clamp(1.1rem, 1.5vw, 1.25rem); color:var(--muted); max-width:34em}
section{padding:clamp(4.5rem, 10vw, 8rem) 0}
.sec-head{display:grid; gap:1.2rem; margin-bottom:clamp(2.5rem,5vw,4rem)}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; font:inherit; font-weight:750; font-size:1rem; text-decoration:none; padding:.9em 1.5em; border-radius:999px; border:2px solid var(--rot); background:var(--rot); color:#fff; cursor:pointer; white-space:nowrap; transition:background .15s, color .15s, border-color .15s}
.btn:hover{background:var(--rot-tief); border-color:var(--rot-tief)}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink); color:var(--bg)}
.btn.small{padding:.55em 1.15em; font-size:.92rem}
.link{color:var(--accent); font-weight:700; text-underline-offset:.2em}

/* Header */
.site-head{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex; align-items:center; gap:1.5rem; height:var(--head)}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none}
.brand svg{width:34px; height:34px; border-radius:4px}
.brand span{font-family:var(--logo); color:var(--rot); font-size:1.9rem; line-height:1; padding-top:.12em}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .brand span{color:var(--creme)}}
:root[data-theme="dark"] .brand span{color:var(--creme)}
.site-head nav{margin-left:auto; display:flex; gap:1.5rem; align-items:center}
.site-head nav a{text-decoration:none; font-weight:600; font-size:.97rem}
.site-head nav a:not(.btn):hover{color:var(--accent)}
.menu-toggle{display:none}
@media (max-width:880px){
  .site-head nav a:not(.btn){display:none}
  .site-head nav.open{position:absolute; top:var(--head); left:0; right:0; flex-direction:column; align-items:stretch; background:var(--bg); padding:1rem 1.25rem 1.5rem; border-bottom:1px solid var(--line); gap:0}
  .site-head nav.open a:not(.btn){display:block; padding:.8rem 0; border-bottom:1px solid var(--line)}
  .site-head nav.open .btn{margin-top:1rem}
  .menu-toggle{display:inline-flex; margin-left:auto; background:none; border:2px solid var(--ink); color:var(--ink); border-radius:999px; padding:.45em 1em; font:inherit; font-weight:650; cursor:pointer}
  .site-head nav{margin-left:0}
}
@media (max-width:420px){.site-head .wrap{gap:.7rem} .site-head .btn.small{padding:.5em .9em; font-size:.85rem}}

/* Hero: Kabine in Kirschrot, Claim als das eine laute Element */
.hero{padding:0; background:var(--rot); color:var(--creme)}
.hero-in{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); min-height:min(calc(100svh - var(--head)), 820px)}
.hero .copy{display:flex; flex-direction:column; justify-content:flex-end; gap:2rem; padding:clamp(3rem,7vw,6rem) clamp(1.25rem,4vw,4rem) clamp(2.5rem,6vw,5rem) max(1.25rem, calc((100vw - 1180px)/2))}
.hero h1{font-size:clamp(3.4rem, 9.6vw, 9.2rem); line-height:.86; font-weight:900; font-variation-settings:"wdth" 125; letter-spacing:-.035em; max-width:none}
.hero h1 span{display:block}
.hero .sub{font-size:clamp(1.1rem,1.6vw,1.3rem); max-width:30em; margin:0; color:var(--creme); opacity:.92}
.hero .actions{display:flex; flex-wrap:wrap; gap:.8rem}
.hero .btn{background:var(--creme); border-color:var(--creme); color:var(--rot)}
.hero .btn:hover{background:#fff; border-color:#fff}
.hero .btn.ghost{background:transparent; color:var(--creme); border-color:var(--creme)}
.hero .btn.ghost:hover{background:var(--creme); color:var(--rot)}
.hero figure{margin:0; position:relative; overflow:hidden; background:var(--rot-tief)}
.hero figure img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:30% 60%}
.hero .fold{position:absolute; right:0; top:0; width:clamp(90px,12vw,150px); height:auto; z-index:2}
@media (max-width:880px){
  .hero-in{grid-template-columns:1fr; min-height:0}
  .hero figure{aspect-ratio:4/3.4; order:2}
  .hero .copy{padding:3rem 1.25rem 2.75rem; justify-content:flex-start}
}

/* Angebot: vier Wörter wie bei RAUM, darunter das jeweilige Detail */
.offer-tabs{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:2px solid var(--ink); border-bottom:1px solid var(--line)}
.offer-tabs button{appearance:none; background:none; border:0; border-left:1px solid var(--line); color:var(--ink); font:inherit; text-align:left; padding:1.6rem 1.25rem 1.4rem; cursor:pointer; display:grid; gap:.5rem; align-content:start}
.offer-tabs button:first-child{border-left:0; padding-left:0}
.offer-tabs .word{font-size:clamp(1.6rem,3vw,2.6rem); white-space:nowrap; font-weight:900; font-variation-settings:"wdth" 125; line-height:.95; letter-spacing:-.02em; transition:color .15s}
.offer-tabs .price{color:var(--muted); font-size:.98rem; font-weight:600}
.offer-tabs button[aria-selected="true"] .word, .offer-tabs button:hover .word{color:var(--accent)}
.offer-tabs button[aria-selected="true"]{box-shadow:inset 0 -5px 0 var(--accent)}
@media (max-width:760px){
  .offer-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .offer-tabs button:nth-child(3){border-left:0; padding-left:0}
  .offer-tabs button:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
.panel{padding-top:clamp(2rem,4vw,3rem)}
.panel[hidden]{display:none}
.panel-grid{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(2rem,5vw,5rem); align-items:start}
@media (max-width:860px){.panel-grid{grid-template-columns:1fr}}
.panel .facts{display:flex; flex-wrap:wrap; gap:.5rem; margin:1.4rem 0 1.8rem; padding:0; list-style:none}
.panel .facts li{border:1.5px solid var(--line); border-radius:999px; padding:.35em .9em; font-size:.92rem; font-weight:600}
.menu-list{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 2.5rem}
@media (max-width:560px){.menu-list{grid-template-columns:1fr}}
.menu-list h3{grid-column:1/-1; font-size:1.05rem; margin:1.6rem 0 .4rem; color:var(--accent)}
.menu-list h3:first-child{margin-top:0}
.menu-list dl{margin:0; display:contents}
.menu-list div{padding:.7rem 0; border-bottom:1px solid var(--line)}
.menu-list dt{font-weight:750}
.menu-list dd{margin:0; color:var(--muted); font-size:.95rem}
/* Bar-Panel im Abend-Modus, mit LED-Kante wie an der Klappe */
.panel.night{background:var(--abend); color:var(--creme); padding:clamp(2rem,4vw,3rem); margin-top:clamp(2rem,4vw,3rem); border-top:4px solid var(--led); border-radius:3px}
.panel.night .lead{color:#D7CDBB}
.panel.night .facts li{border-color:#45424D}
.panel.night .menu-list h3{color:var(--led)}
.panel.night .menu-list div{border-color:#45424D}
.panel.night .menu-list dd{color:#D7CDBB}
.panel.night .btn.ghost{color:var(--creme); border-color:var(--creme)}
.panel.night .btn.ghost:hover{background:var(--creme); color:var(--abend)}
.panel-actions{display:flex; flex-wrap:wrap; gap:.8rem}

/* Drei Säulen */
.pillars{background:var(--bg-2)}
.pillar-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.5rem,4vw,3.5rem)}
@media (max-width:860px){.pillar-grid{grid-template-columns:1fr}}
.pillar{border-top:2px solid var(--ink); padding-top:1.4rem}
.pillar h3{font-size:clamp(1.5rem,2.4vw,1.9rem); font-weight:900; font-variation-settings:"wdth" 120; margin-bottom:.8rem}
.pillar p{color:var(--muted); margin:0}

/* Anlässe als Zeilen */
.occ{list-style:none; margin:0; padding:0; border-top:2px solid var(--ink)}
.occ li{display:grid; grid-template-columns:12rem minmax(0,1fr) auto; gap:1.5rem; align-items:baseline; padding:1.5rem 0; border-bottom:1px solid var(--line)}
.occ .name{font-weight:700; color:var(--muted)}
.occ .hook{font-size:clamp(1.35rem,2.6vw,2.1rem); font-weight:850; font-variation-settings:"wdth" 115; line-height:1.08; letter-spacing:-.01em}
@media (max-width:760px){.occ li{grid-template-columns:1fr; gap:.4rem} .occ .link{justify-self:start}}

/* Preisrechner */
.calc{background:var(--bg-2)}
.calc-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,25rem); gap:clamp(2rem,5vw,5rem); align-items:start}
@media (max-width:900px){.calc-grid{grid-template-columns:1fr}}
fieldset{border:0; margin:0 0 2.2rem; padding:0; min-width:0}
legend{font-weight:800; font-size:1.05rem; margin-bottom:.8rem; padding:0}
.seg{display:flex; flex-wrap:wrap; gap:.5rem}
.seg label{position:relative}
.seg input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer}
.seg span{display:inline-block; padding:.65em 1.15em; border-radius:999px; border:2px solid var(--ink); font-weight:700; background:transparent; transition:background .15s, color .15s}
.seg input:checked + span{background:var(--ink); color:var(--bg)}
.seg input:focus-visible + span{outline:3px solid var(--accent); outline-offset:3px}
.seg small{font-weight:600; opacity:.75}
.guests{display:flex; align-items:baseline; gap:.8rem; margin-bottom:.6rem}
.guests output{font-size:clamp(3rem,7vw,5rem); font-weight:900; font-variation-settings:"wdth" 125; line-height:.9; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.guests span{font-weight:700; color:var(--muted)}
input[type=range]{width:100%; accent-color:var(--rot); height:2rem; cursor:pointer}
.range-scale{position:relative; height:1.2rem; color:var(--muted); font-size:.85rem; font-weight:600}
.range-scale span{position:absolute; transform:translateX(-50%)}
.range-scale span:first-child{transform:none}
.range-scale span:last-child{transform:translateX(-100%)}
.guest-num{display:flex; align-items:center; gap:.6rem; margin-top:1rem; font-size:.95rem; color:var(--muted)}
.guest-num input[type=number]{width:7rem; padding:.5rem .7rem}
.calc-hint{color:var(--muted); font-size:.95rem; margin-top:-1rem}

/* Der Bon */
.bon{background:#FBF7EF; color:var(--espresso); padding:1.8rem 1.6rem 2.2rem; position:relative; border-radius:3px 3px 0 0; font-variant-numeric:tabular-nums; position:sticky; top:calc(var(--head) + 1.5rem)}
.bon::after{content:""; position:absolute; left:0; right:0; bottom:-12px; height:12px; background:linear-gradient(135deg, #FBF7EF 6px, transparent 0) 0 0/12px 12px, linear-gradient(-135deg, #FBF7EF 6px, transparent 0) 0 0/12px 12px}
@media (max-width:900px){.bon{position:relative; top:0}}
.bon-head{display:flex; align-items:center; gap:.6rem; padding-bottom:1rem; border-bottom:2px dashed #CFC2AA; margin-bottom:.4rem}
.bon-head svg{width:30px; height:30px; border-radius:3px}
.bon-head b{font-family:var(--logo); font-weight:400; color:var(--rot); font-size:1.5rem; line-height:1; padding-top:.1em}
.bon-head span{margin-left:auto; font-size:.85rem; color:#5C554A; font-weight:600}
.bon-rows{list-style:none; margin:0; padding:0}
.bon-rows li{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1rem; padding:.75rem 0; border-bottom:1px dashed #DCD0BA}
.bon-rows .lbl{font-weight:700}
.bon-rows .det{display:block; font-size:.86rem; color:#5C554A; font-weight:500}
.bon-rows .amt{font-weight:700; text-align:right; white-space:nowrap}
.bon-rows .minus .amt{color:var(--rot)}
.bon-total{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:1.2rem 0 .3rem; border-top:2px solid var(--espresso); margin-top:.6rem}
.bon-total span{font-weight:800; flex:none}
.bon-total strong{white-space:nowrap; font-size:clamp(1.8rem,3.2vw,2.3rem); font-weight:900; font-variation-settings:"wdth" 120; letter-spacing:-.02em; line-height:1}
.bon-pp{text-align:right; color:#5C554A; font-size:.92rem; font-weight:600; margin:0 0 1.2rem}
.bon-note{font-size:.84rem; color:#5C554A; margin:0 0 .5rem}
.bon .btn{width:100%; margin-top:1rem}
.bon .flag{display:block; background:#FFF1C7; color:#6A4B00; font-size:.84rem; font-weight:600; padding:.5rem .7rem; border-radius:3px; margin:.8rem 0 0}
.bon .flag[hidden]{display:none}

.tab-note{margin:1rem 0 0; color:var(--muted); font-size:.95rem; font-weight:600}
.incl h3{font-size:1.05rem; margin-bottom:.7rem}
.incl ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem 1.5rem}
@media (max-width:560px){.incl ul{grid-template-columns:1fr}}
.incl li{position:relative; padding-left:1.7rem; font-weight:600; font-size:.97rem}
.incl li::before{content:""; position:absolute; left:0; top:.3em; width:1.05rem; height:1.05rem; border-radius:50%; background:var(--rot) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.6 2.5L12 5.4' fill='none' stroke='%23F4ECDD' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat}

/* Ablauf */
.steps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.5rem,4vw,3rem); list-style:none; margin:0; padding:0; counter-reset:s}
@media (max-width:860px){.steps{grid-template-columns:1fr}}
.steps li{counter-increment:s; border-top:2px solid var(--ink); padding-top:1.2rem}
.steps li::before{content:counter(s); display:block; font-size:2.6rem; font-weight:900; font-variation-settings:"wdth" 125; color:var(--accent); line-height:1; margin-bottom:.8rem}
.steps h3{margin-bottom:.5rem}
.steps p{color:var(--muted); margin:0}

/* Die Ape */
.ape{background:var(--abend); color:var(--creme); border-top:4px solid var(--led)}
.ape .lead{color:#D7CDBB}
.ape-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,5vw,5rem); align-items:start}
@media (max-width:860px){.ape-grid{grid-template-columns:1fr}}
.needs{list-style:none; margin:0; padding:0; border-top:1px solid #45424D}
.needs li{display:grid; grid-template-columns:8rem minmax(0,1fr); gap:1rem; padding:1.1rem 0; border-bottom:1px solid #45424D}
.needs b{color:var(--led)}
.needs span{color:#D7CDBB}

/* Über mich + Bilder */
.story-grid{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1fr); gap:clamp(2rem,5vw,5rem); align-items:center}
@media (max-width:860px){.story-grid{grid-template-columns:1fr}}
.shot{margin:0; overflow:hidden; border-radius:3px; background:var(--bg-2)}
.shot img{width:100%; height:100%; object-fit:cover}
.story .shot{aspect-ratio:4/5}
.story .sign{font-weight:700; margin-top:1.4rem}
.strip{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:clamp(280px,40vw,540px); gap:clamp(.5rem,1.2vw,1rem); margin-top:clamp(3rem,6vw,5rem)}
.strip .shot{position:relative}
.strip .shot img{position:absolute; inset:0}
.strip .shot.wide{grid-column:span 2}
@media (max-width:640px){.strip{grid-template-columns:1fr; grid-auto-rows:300px} .strip .shot.wide{grid-column:auto}}
.refs{margin-top:clamp(2.5rem,5vw,4rem); display:flex; flex-wrap:wrap; gap:.6rem 2.2rem; align-items:baseline; border-top:1px solid var(--line); padding-top:1.4rem}
.refs p{margin:0; color:var(--muted); font-weight:600; width:100%; max-width:none}
.refs span.r{font-size:clamp(1.1rem,1.8vw,1.4rem); font-weight:800; font-variation-settings:"wdth" 112}

/* FAQ */
.faq{background:var(--bg-2)}
.faq-grid{display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:clamp(2rem,5vw,5rem)}
@media (max-width:860px){.faq-grid{grid-template-columns:1fr}}
details{border-bottom:1px solid var(--line)}
details:first-child{border-top:2px solid var(--ink)}
summary{list-style:none; cursor:pointer; padding:1.15rem 2.5rem 1.15rem 0; font-weight:750; font-size:1.08rem; position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; position:absolute; right:.2rem; top:50%; transform:translateY(-50%); font-size:1.6rem; font-weight:500; color:var(--accent); transition:transform .2s}
details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
details p{color:var(--muted); padding-bottom:1.1rem; margin:0}

/* Anfrage */
.contact-grid{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(2rem,5vw,5rem); align-items:start}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}
.direct{margin-top:2rem; display:grid; gap:.4rem}
.direct a{font-size:clamp(1.3rem,2.4vw,1.8rem); font-weight:850; font-variation-settings:"wdth" 115; text-decoration:none}
.direct a:hover{color:var(--accent)}
.field{display:grid; gap:.35rem}
.field.full{grid-column:1/-1}
label.l{font-weight:700; font-size:.95rem}
input[type=text], input[type=email], input[type=tel], input[type=date], input[type=number], select, textarea{font:inherit; color:var(--ink); background:var(--bg); border:1.5px solid #9C907C; border-radius:4px; padding:.75rem .85rem; width:100%}
input:focus-visible, select:focus-visible, textarea:focus-visible{outline:3px solid var(--accent); outline-offset:1px}
textarea{min-height:7rem; resize:vertical}
.consent{display:flex; gap:.6rem; align-items:flex-start; font-size:.92rem; color:var(--muted)}
.consent input{margin-top:.25rem; accent-color:var(--rot); width:1.1rem; height:1.1rem; flex:none}
.form-msg{font-size:.92rem; color:var(--muted); margin:.9rem 0 0}
.form-msg.err{color:var(--rot); font-weight:700}

.portal{background:var(--bg-2); padding:clamp(1.4rem,3vw,2.2rem); border-radius:4px}
.ticket{background:#FBF7EF; color:var(--espresso); border-radius:3px; padding:1rem 1.1rem; border-left:6px solid var(--rot)}
.ticket-top{display:flex; justify-content:space-between; align-items:baseline; gap:1rem}
.ticket-top span{font-weight:800}
.ticket-top strong{font-size:1.5rem; font-weight:900; font-variation-settings:"wdth" 118; white-space:nowrap}
.ticket-chips{list-style:none; margin:.7rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem}
.ticket-chips li{background:var(--sand); border-radius:999px; padding:.25em .75em; font-size:.88rem; font-weight:650}
.progress{height:12px; margin:1.4rem 0 .5rem; background:color-mix(in srgb, var(--ink) 12%, transparent); border-radius:2px; overflow:hidden}
.progress-fill{height:100%; width:25%; background:repeating-linear-gradient(90deg, var(--rot) 0 12px, var(--sand) 12px 24px); transition:width .35s ease}
.step-count{margin:0 0 1.2rem; font-size:.88rem; font-weight:700; color:var(--muted)}
#anfrage-form{display:block}
.step{margin:0}
.step[hidden]{display:none}
.step-q{font-size:clamp(1.6rem,3vw,2.2rem); font-weight:900; font-variation-settings:"wdth" 120; letter-spacing:-.015em; line-height:1.05; margin-bottom:1.2rem; outline:none}
.stepper{display:flex; align-items:center; gap:.6rem; margin-top:1.4rem}
.stepper input[type=number]{width:6.5rem; text-align:center; font-size:1.6rem; font-weight:900; padding:.4rem}
.stepper .pm{width:3rem; height:3rem; border-radius:50%; border:2px solid var(--ink); background:transparent; color:var(--ink); font:inherit; font-size:1.5rem; font-weight:700; cursor:pointer; line-height:1}
.stepper .pm:hover{background:var(--ink); color:var(--bg)}
.stepper > span{font-weight:700; color:var(--muted)}
.cards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem}
@media (max-width:520px){.cards{grid-template-columns:1fr}}
.cards label{position:relative}
.cards label:last-child:nth-child(odd){grid-column:1/-1}
.cards input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer}
.cards span{display:grid; gap:.2rem; padding:1rem 1.1rem; border:2px solid var(--line); border-radius:6px; background:var(--bg); transition:border-color .15s, background .15s, transform .15s}
.cards b{font-size:1.15rem; font-weight:800; font-variation-settings:"wdth" 112}
.cards i{font-style:normal; color:var(--muted); font-size:.92rem}
.cards label:hover span{border-color:var(--ink)}
.cards input:checked + span{border-color:var(--rot); background:color-mix(in srgb, var(--rot) 10%, var(--bg)); transform:scale(.985)}
.cards input:focus-visible + span{outline:3px solid var(--accent); outline-offset:2px}
.two{display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.1rem}
@media (max-width:560px){.two{grid-template-columns:1fr}}
.field[hidden]{display:none}
.toggle{display:inline-flex; align-items:center; gap:.55rem; margin-top:1rem; font-weight:650; cursor:pointer}
.toggle input{accent-color:var(--rot); width:1.15rem; height:1.15rem}
input:disabled{opacity:.45}
.consent{margin-top:1.1rem}
.step-nav{display:flex; justify-content:space-between; gap:.8rem; margin-top:1.6rem}
.step-nav .btn:only-child{margin-left:auto}
.step-nav [data-back]{margin-right:auto}
.done{padding:1rem 0 .5rem; outline:none}
.done h3{font-size:clamp(1.6rem,3vw,2.2rem); font-weight:900; font-variation-settings:"wdth" 120; line-height:1.05; margin-bottom:1rem}
.done p{color:var(--muted)}
.form-msg[hidden]{display:none}

.wa-box{margin-top:2rem; padding-top:1.4rem; border-top:1px solid var(--line)}
.wa-box p{color:var(--muted); margin:0 0 .9rem}
.wa-box .btn{gap:.55rem}

/* Abend-Modus: Hero wird zur Ape bei Nacht */
.mode-toggle{appearance:none; background:none; border:1.5px solid var(--line); color:var(--ink); border-radius:999px; padding:.4em .95em; font:inherit; font-weight:650; font-size:.9rem; cursor:pointer; display:inline-flex; align-items:center; gap:.45em}
.mode-toggle::before{content:""; width:.65em; height:.65em; border-radius:50%; background:var(--led); box-shadow:0 0 0 3px color-mix(in srgb, var(--led) 35%, transparent)}
.mode-toggle:hover{border-color:var(--ink)}
@media (max-width:880px){.site-head nav .mode-toggle{display:none} .site-head nav.open .mode-toggle{display:inline-flex; align-self:flex-start; margin-top:1rem}}
:root[data-theme="dark"] .hero{background:var(--abend-tief); border-bottom:4px solid var(--led)}
:root[data-theme="dark"] .hero .btn{background:var(--rot); border-color:var(--rot); color:#fff}
:root[data-theme="dark"] .hero .btn:hover{background:var(--rot-tief); border-color:var(--rot-tief)}
:root[data-theme="dark"] .hero .btn.ghost{background:transparent; color:var(--creme); border-color:var(--creme)}
:root[data-theme="dark"] .hero .btn.ghost:hover{background:var(--creme); color:var(--abend)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .hero{background:var(--abend-tief); border-bottom:4px solid var(--led)}
  :root:not([data-theme="light"]) .hero .btn{background:var(--rot); border-color:var(--rot); color:#fff}
  :root:not([data-theme="light"]) .hero .btn:hover{background:var(--rot-tief); border-color:var(--rot-tief)}
  :root:not([data-theme="light"]) .hero .btn.ghost{background:transparent; color:var(--creme); border-color:var(--creme)}
  :root:not([data-theme="light"]) .hero .btn.ghost:hover{background:var(--creme); color:var(--abend)}
}
.hero{transition:background .4s}

/* Bon teilen */
.share{margin-top:.6rem; text-align:center}
.bon .share .btn{margin-top:0}
.bon .btn.ghost{background:transparent; color:var(--espresso); border-color:var(--espresso)}
.bon .btn.ghost:hover{background:var(--espresso); color:#FBF7EF}
.share-opts{display:flex; justify-content:center; flex-wrap:wrap; gap:.5rem 1.4rem; margin-top:.9rem}
.share-opts[hidden]{display:none}
.bon .link{color:var(--rot); background:none; border:0; padding:0; font:inherit; font-weight:700; cursor:pointer; text-decoration:underline; text-underline-offset:.2em}
.share-msg{font-size:.85rem; color:#5C554A; margin:.6rem 0 0; max-width:none}
.share-msg[hidden]{display:none}
.shared-note{background:var(--sand); color:var(--espresso); font-size:.86rem; font-weight:650; padding:.5rem .7rem; border-radius:3px; margin:.8rem 0 .2rem; max-width:none}
.shared-note[hidden]{display:none}

/* Vertrauensleiste, Hero-Zeile, Mini-Schritte, Formular-Extras */
.hero .trust{margin:0; font-size:.95rem; font-weight:650; opacity:.88}
.proof{border-bottom:1px solid var(--line)}
.proof .refs{margin-top:0; border-top:0; padding:1.3rem 0}
.proof .refs p{width:auto; margin-right:.6rem}
.mini-steps{list-style:none; counter-reset:m; margin:2rem 0 0; padding:0; display:grid; gap:.8rem}
.mini-steps li{counter-increment:m; position:relative; padding-left:2.4rem; color:var(--muted)}
.mini-steps li::before{content:counter(m); position:absolute; left:0; top:-.05em; width:1.7rem; height:1.7rem; border-radius:50%; background:var(--rot); color:#fff; font-weight:800; font-size:.9rem; display:grid; place-items:center}
.mini-steps b{color:var(--ink)}
.seg-sm span{padding:.55em 1em; font-size:.95rem}
button.link{background:none; border:0; padding:0; font:inherit; font-weight:700; cursor:pointer; text-decoration:underline; text-underline-offset:.2em; color:var(--accent)}
.add-msg{margin-top:1rem; display:inline-block}
.add-msg[hidden]{display:none}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.privacy{font-size:.88rem; color:var(--muted); margin:1rem 0 0}
:root[data-theme="dark"] .form-msg.err{color:var(--led)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .form-msg.err{color:var(--led)}}
@media (max-width:860px){
  #anfrage .contact-grid{display:flex; flex-direction:column; gap:1.4rem}
  #anfrage .contact-grid > div:first-child{display:contents}
  #anfrage-title{order:1}
  #anfrage .lead{order:2; margin-top:0!important}
  #anfrage .portal{order:3}
  #anfrage .mini-steps{display:none}
  #anfrage .direct{order:4; margin-top:.5rem}
  #anfrage .wa-box{order:5; margin-top:0}
}

/* Referenzen als Laufband */
.proof{border-bottom:1px solid var(--line); overflow:hidden}
.proof-in{display:flex; align-items:center; gap:2rem; padding:1.2rem 0}
.proof-label{margin:0; flex:none; color:var(--muted); font-weight:600}
.ticker{flex:1; min-width:0; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.ticker-track{display:flex; width:max-content; list-style:none; margin:0; padding:0; animation:apeti-tick 30s linear infinite}
.ticker-track li{display:flex; align-items:center; white-space:nowrap; font-size:clamp(1.1rem,1.8vw,1.4rem); font-weight:800; font-variation-settings:"wdth" 112}
.ticker-track li::after{content:""; flex:none; width:.45em; height:.45em; border-radius:50%; background:var(--accent); margin:0 2.2rem}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes apeti-tick{to{transform:translateX(-50%)}}
@media (max-width:760px){.proof-in{flex-direction:column; align-items:stretch; gap:.6rem}}
@media (prefers-reduced-motion: reduce){
  .ticker{-webkit-mask-image:none; mask-image:none}
  .ticker-track{width:auto; flex-wrap:wrap; row-gap:.4rem}
  .ticker-track li[aria-hidden="true"]{display:none}
}


/* ===== Name-Moment: Ape + Aperitif + Appetit = Apeti (Idee nach LAP Coffee) ===== */
section.name{padding:clamp(4rem,9vw,7.5rem) 0 clamp(3.5rem,8vw,6rem); border-bottom:1px solid var(--line); overflow:hidden; --logo-c:var(--rot)}
:root[data-theme="dark"] .name{--logo-c:var(--creme)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .name{--logo-c:var(--creme)}}
.name-kicker{max-width:none; display:flex; justify-content:space-between; gap:1rem; align-items:baseline; margin:0 0 1.2rem; font-weight:700; color:var(--muted)}
.name-kicker span:last-child{font-weight:600; font-size:.9rem}
.name-top{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:2px solid var(--ink)}
.name-top button{appearance:none; background:none; border:0; font:inherit; color:var(--muted); padding:1.1rem 0 0; font-size:clamp(1.05rem,2vw,1.6rem); font-weight:850; font-variation-settings:"wdth" 115; letter-spacing:-.01em; cursor:pointer; position:relative; text-align:left; transition:color .3s}
.name-top button:nth-child(2){text-align:center}
.name-top button:nth-child(3){text-align:right}
.name-top button::after{content:""; position:absolute; left:0; top:-2px; height:4px; width:100%; background:var(--accent); transform:scaleX(0); transform-origin:left}
.name-top button.on{color:var(--accent)}
.name-top button.done::after{transform:none}
.name-top button.run::after{animation:nm-bar var(--dur,2s) linear forwards}
@keyframes nm-bar{to{transform:none}}
.name-top button:hover{color:var(--ink)}
.name-stage{--fs:min(21vw, 16.5rem); position:relative; height:calc(var(--fs) * 1.12); margin:clamp(1.2rem,3.5vw,2.6rem) 0 clamp(1rem,3vw,2rem)}
.name-word{display:flex; font-size:var(--fs); font-weight:900; font-variation-settings:"wdth" 118; letter-spacing:-.035em; line-height:1; white-space:nowrap; transition:opacity .45s, filter .45s}
.name-word .l{display:inline-block; overflow:hidden; padding-bottom:.14em; margin-bottom:-.14em}
.name-word .c{display:inline-block}
.name-word .c.in{animation:nm-in .62s cubic-bezier(.2,.85,.2,1) both; animation-delay:var(--d,0ms)}
.name-word .c.out{animation:nm-out .26s cubic-bezier(.6,0,.8,.4) both; animation-delay:var(--d,0ms)}
@keyframes nm-in{from{transform:translateY(108%)} to{transform:none}}
@keyframes nm-out{to{transform:translateY(-108%)}}
.name-logo{position:absolute; left:0; top:0; height:100%; display:flex; align-items:center; gap:calc(var(--fs) * .14); opacity:0; transform:translateY(12%) scale(.94); transform-origin:left center; transition:opacity .5s, transform .7s cubic-bezier(.2,.85,.2,1); pointer-events:none}
.name-logo svg{width:calc(var(--fs) * .78); height:auto; flex:none; border-radius:calc(var(--fs) * .05); transform:rotate(-8deg) scale(.6); opacity:0; transition:transform .8s cubic-bezier(.3,1.6,.5,1) .15s, opacity .3s .15s}
.name-logo b{font-family:var(--logo); font-weight:400; color:var(--logo-c); font-size:calc(var(--fs) * .92); line-height:1; padding-top:.12em; letter-spacing:0}
.name.final .name-logo{opacity:1; transform:none}
.name.final .name-logo svg{transform:none; opacity:1}
.name.final .name-word{opacity:0; filter:blur(6px)}
.name-bottom{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; border-bottom:1px solid var(--line); padding-bottom:1.1rem}
.name-bottom p{margin:0; color:var(--muted); opacity:.5; font-size:clamp(.98rem,1.3vw,1.1rem); transition:opacity .3s, color .3s; max-width:none}
.name-bottom p:nth-child(2){text-align:center}
.name-bottom p:nth-child(3){text-align:right}
.name-bottom p.on{opacity:1; color:var(--ink)}
.name-cap-m{display:none}
.name-eq{display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem 2rem; margin-top:1.4rem; align-items:baseline}
.name-eq p{margin:0; max-width:none}
.name-eq .eq{font-weight:800; font-variation-settings:"wdth" 110; font-size:clamp(1.05rem,1.6vw,1.3rem)}
.name-eq .eq b{font-family:var(--logo); font-weight:400; color:var(--logo-c)}
.name-eq .link{white-space:nowrap}
@media (max-width:700px){
  .name-bottom{display:none}
  .name-kicker span:last-child{display:none}
  .name-cap-m{display:block; min-height:3.2em; margin:0; padding-bottom:1rem; border-bottom:1px solid var(--line); font-size:1.05rem; color:var(--ink)}
}

/* Bewegung: Hero kommt rein, Headlines tauchen beim Scrollen auf */
.hero h1 span{animation:hero-rise .9s cubic-bezier(.2,.85,.2,1) both}
.hero h1 span:nth-child(2){animation-delay:.08s}
.hero h1 span:nth-child(3){animation-delay:.16s}
.hero .sub,.hero .actions,.hero .trust{animation:hero-fade .8s ease-out .45s both}
.hero figure img{animation:hero-zoom 1.8s cubic-bezier(.2,.8,.2,1) both}
@keyframes hero-rise{from{opacity:0; transform:translateY(.35em)} to{opacity:1; transform:none}}
@keyframes hero-fade{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
@keyframes hero-zoom{from{transform:scale(1.08)} to{transform:none}}
.js .rv{opacity:0; transform:translateY(26px); transition:opacity .7s ease-out, transform .8s cubic-bezier(.2,.85,.2,1)}
.js .rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){.js .rv{opacity:1; transform:none}}

/* Rechtliches */
.legal{display:none; padding:clamp(3rem,7vw,5rem) 0; border-top:1px solid var(--line)}
.legal:target{display:block}
.legal .wrap{max-width:760px}
.legal h2{margin-bottom:1.6rem; font-size:clamp(2rem,4vw,2.8rem)}
.legal h3{font-size:1.1rem; margin:1.8rem 0 .5rem}
.legal p{color:var(--muted); margin:0 0 .8rem}
.legal-note{display:inline-block; background:var(--todo-bg); color:var(--todo-ink)!important; padding:.3rem .7rem; border-radius:3px; font-size:.9rem; font-weight:600}
.legal-stand{margin-top:2rem!important; font-size:.9rem}

/* Footer: Abend, ganz unten die Streifen wie die Sockelzone der Ape */
.site-foot{background:var(--abend); color:var(--creme); padding:clamp(3rem,6vw,4.5rem) 0 2rem}
.foot-grid{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2rem; align-items:end}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr}}
.foot-logo{font-family:var(--logo); font-size:clamp(3.5rem,8vw,6rem); line-height:.9; color:var(--creme)}
.foot-sub{display:block; margin-top:.6rem; font-size:.8rem; font-weight:700; letter-spacing:.24em; font-variation-settings:"wdth" 110; color:var(--led)}
.site-foot nav{display:flex; flex-wrap:wrap; gap:.4rem 1.4rem}
.site-foot nav a{text-decoration:none; font-weight:600; color:#D7CDBB}
.site-foot nav a:hover{color:var(--led)}
.site-foot small{display:block; margin-top:2.2rem; color:#A79E8E; font-size:.88rem}
.sockel{height:clamp(40px,6vw,64px); background:repeating-linear-gradient(90deg, var(--rot) 0 28px, var(--sand) 28px 56px)}

/* Mobile Schnellleiste */
.mobile-cta{display:none}
@media (max-width:760px){
  .mobile-cta{display:flex; gap:.5rem; position:fixed; left:0; right:0; bottom:0; z-index:25; padding:.65rem .8rem calc(.65rem + env(safe-area-inset-bottom,0px)); background:color-mix(in srgb, var(--bg) 95%, transparent); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-top:1px solid var(--line); transform:translateY(110%); transition:transform .25s}
  .mobile-cta.show{transform:none}
  .mobile-cta .btn{flex:1; padding:.75em 1em}
  body{padding-bottom:4.5rem}
}

/* Ersatz für die früheren style-Attribute (gleiche Werte, gleicher Vorrang) */
.mt-08{margin-top:.8rem!important}
.mt-13{margin-top:1.3rem!important}
.mt-14{margin-top:1.4rem!important}
.mb-1{margin-bottom:1rem!important}
.op-abend{object-position:50% 45%}

/* Rechtstexte und 404 als eigene Seiten (statt Sprungziel auf der Startseite) */
.legal.seite{display:block; border-top:0}
.legal h1{margin:0 0 1.6rem; font-family:var(--sans); letter-spacing:-.015em; font-size:clamp(2rem,4vw,2.8rem); line-height:.98; font-weight:900; font-variation-settings:"wdth" 125; max-width:16ch}
/* Zwischenüberschriften der Rechtstexte sind h2 (richtige Reihenfolge), sehen aber aus wie bisher die h3 */
.legal.seite h2{font-size:1.1rem; line-height:1.15; font-weight:800; font-variation-settings:"wdth" 112; max-width:none; margin:1.8rem 0 .5rem}

/* Fehlerkorrekturen nach dem Mobil-Check (29.10.2026) */
/* Fotoreihe: Bilder füllen ihre Zeile, statt per Seitenverhältnis in den nächsten Abschnitt zu ragen */
.strip .shot{aspect-ratio:auto}
/* Preisrechner am Handy: Bon direkt unter die Eingaben, "Das steckt drin" danach */
@media (max-width:900px){
  .calc-grid{display:flex; flex-direction:column; gap:0}
  .calc-grid > div:first-child{display:contents}
  .calc-grid .bon{order:5; margin:0 0 2.2rem}
  .calc-grid .incl{order:6}
  .calc-grid fieldset, .calc-grid .bon, .calc-grid .incl{width:100%}
}

/* ===================================================================
   Highlights (29.10.2026). Jedes lässt sich im CMS unter "Gestaltung" abschalten.
   Body-Klassen: fx-bons, fx-markise, fx-lichter
   =================================================================== */

/* 1. Bon-Stapel: die drei Punkte von "Gefaltet, nicht gerührt." als Kassenzettel */
.fx-bons .pillar-grid{gap:0; align-items:start; counter-reset:bon}
.fx-bons .pillar{--dreh:0deg; --slip:var(--creme); position:relative; counter-increment:bon; border:0; background:var(--slip); color:var(--espresso); padding:1.3rem 1.5rem 2rem; margin:0 0 14px; transform:rotate(var(--dreh))}
.fx-bons .pillar::before{content:"Nr. 0" counter(bon); display:block; font-size:.75rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; padding-bottom:.8rem; margin-bottom:1.1rem; border-bottom:1px dashed currentColor; opacity:.65}
.fx-bons .pillar::after{content:""; position:absolute; left:0; right:0; bottom:-12px; height:12px; background:linear-gradient(135deg, var(--slip) 6px, transparent 0) 0 0/12px 12px, linear-gradient(-135deg, var(--slip) 6px, transparent 0) 0 0/12px 12px}
.fx-bons .pillar h3{font-size:clamp(1.9rem,3.2vw,2.6rem); font-variation-settings:"wdth" 125; line-height:.95; letter-spacing:-.025em; margin-bottom:.9rem}
.fx-bons .pillar p{color:inherit; opacity:.82}
.fx-bons .pillar:nth-child(1){--dreh:-2.4deg; --slip:var(--rot); color:var(--creme)}
.fx-bons .pillar:nth-child(2){--dreh:1.6deg; --slip:var(--abend); color:var(--creme); margin-top:2.4rem}
.fx-bons .pillar:nth-child(2) h3{color:var(--led)}
.fx-bons .pillar:nth-child(3){--dreh:-1deg; --slip:#FBF7EF; margin-top:.8rem}
:root[data-theme="dark"] .fx-bons .pillar:nth-child(2){--slip:var(--led); color:var(--espresso)}
:root[data-theme="dark"] .fx-bons .pillar:nth-child(2) h3{color:var(--espresso)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .fx-bons .pillar:nth-child(2){--slip:var(--led); color:var(--espresso)}
  :root:not([data-theme="light"]) .fx-bons .pillar:nth-child(2) h3{color:var(--espresso)}
}
@media (max-width:860px){
  .fx-bons .pillar-grid{padding:0 .3rem}
  .fx-bons .pillar:nth-child(1){margin-right:1.2rem}
  .fx-bons .pillar:nth-child(2){margin:-.4rem 0 14px 1.4rem}
  .fx-bons .pillar:nth-child(3){margin:-.4rem .8rem 14px .3rem}
}
@media (min-width:861px){.fx-bons .pillar{margin-inline:-.35rem}}
/* Einflug beim Scrollen: die Bons landen mit leichtem Versatz auf dem Stapel */
.js .fx-bons .pillar.rv{opacity:0; transform:translateY(34px) rotate(0deg)}
.js .fx-bons .pillar.rv.in{opacity:1; transform:rotate(var(--dreh))}
.js .fx-bons .pillar.rv:nth-child(2){transition-delay:.12s}
.js .fx-bons .pillar.rv:nth-child(3){transition-delay:.24s}
@media (prefers-reduced-motion: reduce){.js .fx-bons .pillar.rv{opacity:1; transform:rotate(var(--dreh))}}

/* 2. Markisen-Kante: der Abschluss der Ape-Markise über Angebot und Anfrage */
.fx-markise #angebot, .fx-markise #anfrage{position:relative}
.fx-markise #angebot::before, .fx-markise #anfrage::before{content:""; position:absolute; left:0; right:0; top:0; height:40px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='40' viewBox='0 0 64 40'%3E%3Crect width='32' height='24' fill='%23C62A22'/%3E%3Crect x='32' width='32' height='24' fill='%23E6D8BF'/%3E%3Ccircle cx='16' cy='24' r='16' fill='%23C62A22'/%3E%3Ccircle cx='48' cy='24' r='16' fill='%23E6D8BF'/%3E%3C/svg%3E") repeat-x 0 0/64px 40px}
@media (max-width:760px){.fx-markise #angebot::before, .fx-markise #anfrage::before{height:30px; background-size:48px 30px}}

/* 3. Lichterkette: nur im Abend-Modus, über dem Startbereich und der Ape */
.lichter{display:none}
.fx-lichter .hero, .fx-lichter .ape{position:relative}
:root[data-theme="dark"] .fx-lichter .lichter{display:block}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .fx-lichter .lichter{display:block}}
.lichter{position:absolute; left:0; right:0; top:0; height:44px; z-index:3; pointer-events:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='44' viewBox='0 0 120 44'%3E%3Cpath d='M0 6 Q60 34 120 6' fill='none' stroke='%235C554A' stroke-width='1.2'/%3E%3Cg fill='%23FFD69A'%3E%3Ccircle cx='20' cy='21' r='9' opacity='.18'/%3E%3Ccircle cx='100' cy='21' r='9' opacity='.18'/%3E%3Ccircle cx='20' cy='21' r='4.5'/%3E%3Ccircle cx='100' cy='21' r='4.5'/%3E%3C/g%3E%3Cg fill='%235C554A'%3E%3Crect x='18.5' y='13' width='3' height='4'/%3E%3Crect x='98.5' y='13' width='3' height='4'/%3E%3C/g%3E%3C/svg%3E") repeat-x 0 0/120px 44px}
.lichter::after{content:""; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='44' viewBox='0 0 120 44'%3E%3Cg fill='%23FFD69A'%3E%3Ccircle cx='60' cy='27' r='9' opacity='.18'/%3E%3Ccircle cx='60' cy='27' r='4.5'/%3E%3C/g%3E%3Crect x='58.5' y='19' width='3' height='4' fill='%235C554A'/%3E%3C/svg%3E") repeat-x 0 0/120px 44px}
@media (prefers-reduced-motion: no-preference){.lichter::after{animation:lichtpuls 3.4s ease-in-out infinite}}
@keyframes lichtpuls{0%,100%{opacity:1} 50%{opacity:.4}}

/* 4. Karte am Handy: erst eine Gruppe, der Rest per Knopf */
.menu-list.kurz > :nth-child(n+3){display:none}
.karte-mehr{margin-top:1rem; font-weight:700}
.panel.night .karte-mehr{color:var(--led)}

/* 5. Crêpes-Pakete S, M, L: drei Karten, M hervorgehoben */
.seg[hidden]{display:none}
.paket-karten{grid-column:1/-1}
.pk-titel{margin:0 0 1rem; font-size:1.35rem; line-height:1.15; font-weight:800; font-variation-settings:"wdth" 112; letter-spacing:-.015em}
.pk-liste{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin:0; padding:0; list-style:none; align-items:stretch}
.paket-karte{display:flex; flex-direction:column; gap:.7rem; padding:1.4rem 1.3rem 1.3rem; border:2px solid var(--line); border-radius:4px; background:var(--bg)}
.paket-karte.hervor{border-color:var(--ink); background:var(--bg-2); box-shadow:6px 6px 0 var(--rot)}
.pk-kopf{display:flex; align-items:center; gap:.7rem; flex-wrap:wrap}
.pk-label{display:inline-grid; place-items:center; width:2.3rem; height:2.3rem; border-radius:50%; border:2px solid var(--ink); font-weight:900; font-size:1.05rem; line-height:1}
.hervor .pk-label{background:var(--rot); border-color:var(--rot); color:#fff}
.pk-name{margin:0; font-size:1.25rem; line-height:1.1; font-weight:850; font-variation-settings:"wdth" 112; letter-spacing:-.01em}
.pk-badge{margin-left:auto; padding:.25em .7em; border-radius:999px; background:var(--ink); color:var(--bg); font-size:.78rem; font-weight:750; text-transform:uppercase; letter-spacing:.06em}
.pk-text{margin:0; color:var(--muted)}
.pk-fakten{display:flex; flex-wrap:wrap; gap:.4rem; margin:0; padding:0; list-style:none}
.pk-fakten li{border:1.5px solid var(--line); border-radius:999px; padding:.25em .75em; font-size:.88rem; font-weight:600}
.hervor .pk-fakten li{border-color:var(--ink)}
.pk-unbegrenzt{margin:0; font-weight:700; font-size:.95rem}
.pk-preis{margin:auto 0 0; padding-top:.5rem; font-size:1rem}
.pk-preis b{font-size:1.9rem; font-weight:900; font-variation-settings:"wdth" 112; letter-spacing:-.02em}
.pk-klein{margin:-.4rem 0 0; color:var(--muted); font-size:.9rem}
.paket-karte .btn{margin-top:.4rem; white-space:normal; text-align:center}
@media (max-width:860px){
  .panel-grid > :first-child{order:-2}
  .paket-karten{order:-1}
  .pk-liste{grid-template-columns:1fr}
  .paket-karte.hervor{box-shadow:4px 4px 0 var(--rot)}
}
/* Größenwahl im Rechner: Kacheln mit kurzer Beschreibung, Empfehlung rot umrandet */
.groesse-optionen{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem}
@media (max-width:560px){.groesse-optionen{grid-template-columns:1fr}}
.go{position:relative; display:flex}
.go input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer}
.go-kachel{display:flex; flex-direction:column; gap:.3rem; width:100%; padding:.8rem .95rem; border:2px solid var(--ink); border-radius:14px; transition:background .15s, color .15s}
.go.hervor .go-kachel{border-color:var(--rot); box-shadow:4px 4px 0 var(--rot)}
.go input:checked + .go-kachel{background:var(--ink); color:var(--bg)}
.go input:focus-visible + .go-kachel{outline:3px solid var(--accent); outline-offset:3px}
.go-kopf{display:flex; align-items:baseline; gap:.35rem; flex-wrap:wrap}
.go-kopf b{font-weight:800}
.go-kopf small{font-weight:600; opacity:.75}
.go-badge{margin-left:auto; padding:.15em .6em; border-radius:999px; background:var(--rot); color:#fff; font-style:normal; font-size:.72rem; font-weight:750; text-transform:uppercase; letter-spacing:.06em}
.go-text{font-size:.9rem; line-height:1.3}
.go-fakten{font-size:.8rem; font-weight:600; opacity:.75}