@font-face { font-family: Jakarta; src: url('jakarta-latin.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
/* Gemeinsame Gestaltungswerte; responsive Anpassungen stehen am Dateiende. */
:root {
  color-scheme: light;
  /* Coastal Sunset und funktionale Farben */
  --background: #fdf9f4; --surface: #fdfcfa; --surface-muted: #f1ede8; --surface-warm: #f2e4d1; --surface-tag: #f7f3ee; --surface-offer: #f7dfd34d;
  --text: #1c1c19; --muted: #55534f; --primary: #a64b2b; --primary-dark: #78351d; --on-primary: white; --soft: #f7dfd3; --outline: #e1bfb5;
  --sunset: #f0b39b; --sunset-rose: #e8b2ca; --surface-inverse: #31302d; --text-inverse: var(--background); --muted-inverse: #d3cbc3; --on-sunset: #3a0b00;
  --border: #e9e2d9; --border-card: #e6d9cf; --border-feature: #d9c7b0; --border-faq: #dfd4ca;
  --border-preview: #ede3db; --border-orbit: #e5cbbb; --border-receipt: #c9b9ae; --food-gold: #956011; --success: #35643f;
  /* Typografie: dieselben Rollen für Navigation, Karten und Rechtsseiten */
  --font-family: Jakarta, 'Avenir Next', system-ui, sans-serif;
  --font-body: .95rem; --font-copy: 1rem; --font-small: .85rem; --font-link: .8rem; --font-label: .75rem; --font-note: .7rem; --font-fine: .65rem;
  --font-nav: .82rem; --font-step: .83rem; --font-footer: .73rem; --font-button: .87rem; --font-button-small: .78rem; --font-button-mobile: .68rem;
  --font-h1: clamp(3rem, 4.8vw, 4.65rem); --font-h2: clamp(2rem, 3.4vw, 3rem); --font-h3: 1.15rem;
  --font-contact-title: clamp(2.6rem, 4vw, 3.5rem); --font-legal-title: clamp(2.5rem, 5vw, 3.8rem); --font-brand: 1.65rem;
  --weight-medium: 600; --weight-emphasis: 650; --weight-bold: 700; --weight-heading: 750; --weight-brand: 800;
  --leading-body: 1.75; --leading-heading: 1.16; --tracking-heading: -.035em; --tracking-subheading: -.02em; --tracking-label: .12em;
  /* Abstände, Rundungen und Effekte */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem;
  --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 5rem; --space-11: 6rem;
  --radius-xs: .3rem; --radius-sm: .5rem; --radius-md: .65rem; --radius-lg: .8rem; --radius-xl: 1rem; --radius-icon: .6rem; --radius-circle: 50%;
  --border-width: 1px; --focus-width: 3px; --focus-offset: 4px; --transition-duration: .2s;
  --shadow-phone: 12px 24px 48px #6c362b25; --shadow-receipt: 8px 14px 35px #6c362b20;
  --feature-icon-size: 1.4rem; --feature-badge-size: 2.7rem;
  /* Layoutrollen: Media Queries überschreiben Werte statt ganze Regeln. */
  --page-width: 76rem; --page-gutter: var(--space-7); --copy-width: 31rem; --section-padding: var(--space-11);
  --hero-padding-start: 5.7rem; --hero-padding-end: var(--space-10); --hero-gap: var(--space-7);
  --split-gap: var(--space-11); --heading-gap: var(--space-9); --faq-gap: var(--space-10);
  --contact-padding: var(--space-10); --contact-gap: 4.5rem; --steps-gap: 1.6rem; --step-padding: 1.8rem; --step-number-gap: 2.2rem; --card-padding: var(--space-7);
}

/* Basis, Kopfzeile und Navigation */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--space-6); }
body { margin: 0; color: var(--text); background: var(--background); font-family: var(--font-family); font-size: var(--font-body); line-height: var(--leading-body); }
/* Dekorative Überstände erzeugen keine zusätzliche horizontale Scrollachse. */
main { overflow-x: clip; }
a { color: var(--primary-dark); text-underline-offset: .25em; }
a:hover { color: var(--primary); }
:focus-visible { outline: var(--focus-width) solid var(--primary); outline-offset: var(--focus-offset); }
.wrap { width: min(calc(100% - 2 * var(--page-gutter)), var(--page-width)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 10; left: 1rem; top: 1rem; padding: var(--space-2) var(--space-4); background: var(--text); color: var(--on-primary); transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding-block: var(--space-5); border-bottom: var(--border-width) solid var(--border); }
.brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--text); font-size: var(--font-brand); font-weight: var(--weight-brand); letter-spacing: var(--tracking-heading); text-decoration: none; }
.brand img { border-radius: var(--radius-icon); }
.accent { color: var(--primary); }
.site-nav { display: flex; gap: var(--space-6); }
.site-nav a { color: var(--muted); font-size: var(--font-nav); font-weight: var(--weight-medium); text-decoration: none; }
.button { display: inline-flex; align-items: center; justify-content: center; padding: .9rem 1.4rem; min-height: 3rem; border: var(--border-width) solid var(--primary); border-radius: var(--radius-md); background: var(--primary); color: var(--on-primary); text-decoration: none; font-weight: var(--weight-emphasis); font-size: var(--font-button); transition: background var(--transition-duration), transform var(--transition-duration); }
.button:hover { background: var(--primary-dark); color: var(--on-primary); transform: translateY(-2px); }
.button-small { min-height: 2.6rem; padding: .6rem var(--space-4); font-size: var(--font-button-small); }

/* Einstieg und Typografie */
.hero { display: grid; grid-template-columns: 1.07fr 1fr; align-items: center; gap: var(--hero-gap); padding-block: var(--hero-padding-start) var(--hero-padding-end); }
.eyebrow { margin: 0 0 var(--space-5); color: var(--primary-dark); font-size: var(--font-note); font-weight: var(--weight-heading); letter-spacing: var(--tracking-label); text-transform: uppercase; }
h1, h2, h3 { line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); margin: 0; }
h1 { font-size: var(--font-h1); font-weight: var(--weight-heading); }
h2 { font-size: var(--font-h2); font-weight: var(--weight-bold); }
h3 { font-size: var(--font-h3); letter-spacing: var(--tracking-subheading); font-weight: var(--weight-bold); }
.hero-copy { max-width: var(--copy-width); margin: 1.9rem 0 0; font-size: var(--font-copy); color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; margin-block: var(--space-6) 1.2rem; }
.text-link { border: 0; background: none; padding: 0; color: var(--primary-dark); font-size: var(--font-link); font-weight: var(--weight-emphasis); text-decoration: underline; text-underline-offset: .4em; }
.hero-note { color: var(--muted); font-size: var(--font-note); }

/* Statische Produktillustration */
.product-scene { position: relative; min-height: 32rem; isolation: isolate; }
.sun-disc { position: absolute; width: 29rem; height: 29rem; max-width: 100%; left: 0; top: 1.5rem; z-index: -2; background: linear-gradient(145deg, var(--surface-warm), var(--sunset) 70%, var(--sunset-rose)); border-radius: var(--radius-circle); }
.scene-orbit { position: absolute; inset: 0 0 0 1rem; z-index: -1; border: var(--border-width) solid var(--border-orbit); border-radius: var(--radius-circle); transform: rotate(-28deg); }
.phone { position: absolute; top: 3rem; left: 2rem; width: 15.5rem; height: 26rem; padding: var(--space-6) .85rem var(--space-4); background: var(--surface); border: 7px solid var(--surface-inverse); border-radius: 2.3rem; box-shadow: var(--shadow-phone); transform: rotate(-7deg); }
.phone-camera { position: absolute; width: 4.5rem; height: .8rem; border-radius: var(--radius-xl); top: .6rem; left: calc(50% - 2.25rem); background: var(--surface-inverse); }
.phone-top { display: flex; justify-content: space-between; align-items: center; font-size: .6rem; }
.phone-top b { font-size: .95rem; color: var(--primary); letter-spacing: var(--tracking-heading); }
.phone-top span { padding: .15rem .45rem; background: var(--surface-muted); border-radius: var(--radius-xs); }
.phone-heading { display: grid; gap: .3rem; padding-block: 1.3rem var(--space-4); }
.phone-heading small { color: var(--primary); font-size: .48rem; font-weight: var(--weight-emphasis); letter-spacing: .06em; }
.phone-heading strong { font-size: 1.25rem; letter-spacing: -.05em; }
.phone-heading > span { font-size: .55rem; color: var(--muted); }
.menu-tabs { display: flex; gap: .4rem; margin-bottom: var(--space-4); font-size: .58rem; }
.menu-tabs span { padding: .35rem .8rem; border-radius: var(--radius-xl); background: var(--surface-muted); }
.menu-tabs span:first-child { color: var(--on-primary); background: var(--primary); }
.menu-product { display: flex; gap: var(--space-2); align-items: center; padding: .7rem 0; border-top: var(--border-width) solid var(--border-preview); }
.food-icon { width: 3rem; height: 3.4rem; display: grid; place-items: center; background: var(--soft); color: var(--primary-dark); font-size: 2rem; border-radius: var(--radius-icon); }
.food-icon.fries { background: var(--surface-warm); color: var(--food-gold); }
.menu-product div { flex: 1; }
.menu-product strong, .menu-product small, .menu-product b { display: block; font-size: .62rem; line-height: 1.9; }
.menu-product small { font-size: .5rem; color: var(--muted); }
.add-product { width: 1.4rem; height: 1.4rem; display: grid; place-items: center; border-radius: .4rem; background: var(--primary); color: var(--on-primary); font-size: .8rem; }
.phone-cart { margin-top: var(--space-4); display: flex; justify-content: space-between; padding: .6rem; border-radius: var(--radius-sm); background: var(--primary); color: var(--on-primary); font-size: .53rem; }
.receipt { position: absolute; width: 14rem; right: 0; top: 12rem; padding: 1.4rem; background: var(--surface); border-radius: var(--radius-sm) var(--radius-sm) 0 0; box-shadow: var(--shadow-receipt); transform: rotate(6deg); }
.receipt::after { content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: .7rem; background: linear-gradient(135deg, var(--surface) 25%, transparent 25%) -7px 0, linear-gradient(225deg, var(--surface) 25%, transparent 25%) -7px 0; background-size: 14px 14px; }
.receipt-icon { display: grid; place-items: center; height: 2.2rem; width: 2.2rem; border-radius: var(--radius-icon); background: var(--soft); color: var(--primary); font-size: 1.3rem; }
.receipt > p:first-of-type { font-size: .5rem; letter-spacing: var(--tracking-label); font-weight: var(--weight-bold); color: var(--primary); margin-top: var(--space-4); }
.receipt h3 { font-size: 1rem; margin-bottom: var(--space-4); }
.receipt-rule { border-top: var(--border-width) dashed var(--border-receipt); }
.receipt-row { display: flex; justify-content: space-between; margin-top: .65rem; font-size: .6rem; }
.receipt-item { font-size: .57rem; line-height: 2; }
.receipt-status { font-size: .5rem; display: block; color: var(--success); margin-top: .7rem; }
.scene-caption { position: absolute; bottom: -.5rem; left: 3rem; font-size: .58rem; color: var(--muted); }

/* Vorteile, Ablauf und Angebot */
.benefit-strip { background: var(--surface-muted); border-block: var(--border-width) solid var(--border); }
.benefit-strip .wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); padding-block: 1.6rem; color: var(--muted); font-size: var(--font-footer); }
.benefit-strip b { color: var(--primary); }
.section { padding-block: var(--section-padding); }
.section-heading { display: grid; grid-template-columns: 1.2fr 1fr; align-items: end; gap: var(--heading-gap); }
.section-heading > p { max-width: 26rem; color: var(--muted); margin: 0; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--steps-gap); margin-top: var(--space-8); }
.step { padding: var(--step-padding); border: var(--border-width) solid var(--border-card); border-radius: var(--radius-lg); background: var(--surface); }
.step-number { display: block; margin-bottom: var(--step-number-gap); color: var(--primary); font-size: 1.35rem; font-weight: var(--weight-medium); }
.step p { color: var(--muted); font-size: var(--font-step); margin-block: var(--space-4) 1.6rem; }
.step-tag { font-size: var(--font-fine); color: var(--primary-dark); padding: .4rem .65rem; border-radius: var(--radius-xs); background: var(--surface-tag); }
.club-section { padding-block: var(--section-padding); background: var(--surface-warm); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--split-gap); align-items: center; }
.split > div > p:not(.eyebrow) { max-width: var(--copy-width); color: var(--muted); margin-block: 1.8rem; }
.feature-list article { display: flex; gap: 1.2rem; padding-block: var(--space-5); border-bottom: var(--border-width) solid var(--border-feature); }
.feature-list article:last-child { border-bottom: 0; }
.feature-list p { color: var(--muted); font-size: var(--font-small); margin: var(--space-3) 0 0; }
.feature-list article > span { display: grid; place-items: center; flex: 0 0 var(--feature-badge-size); height: var(--feature-badge-size); border: var(--border-width) solid var(--border-feature); border-radius: var(--radius-md); color: var(--primary-dark); font-size: var(--feature-icon-size); line-height: 1; }
.feature-list svg { display: block; width: var(--feature-icon-size); height: var(--feature-icon-size); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pilot-card { padding: var(--card-padding); border-radius: var(--radius-xl); border: var(--border-width) solid var(--outline); background: var(--surface-offer); }
.pilot-card h3 { font-size: 2rem; }
.pilot-card p:not(.eyebrow) { color: var(--muted); font-size: var(--font-small); }
.pilot-card .button { margin-top: var(--space-4); }

/* Fragen und Kontakt */
.faq-grid { display: grid; grid-template-columns: .8fr 1.4fr; gap: var(--faq-gap); border-top: var(--border-width) solid var(--border); }
.faq-grid > div > p:not(.eyebrow) { color: var(--muted); }
.faq-list details { border-bottom: var(--border-width) solid var(--border-faq); }
summary { cursor: pointer; padding: 1.2rem 1.8rem 1.2rem 0; font-size: .9rem; font-weight: var(--weight-emphasis); position: relative; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; position: absolute; right: .2rem; top: 1rem; color: var(--primary); font-size: 1.2rem; }
details[open] summary::after { content: '−'; }
.faq-list p { padding-right: var(--space-4); color: var(--muted); font-size: var(--font-small); margin-top: 0; }
.contact-section { padding-block: var(--contact-padding); background: var(--surface-inverse); color: var(--text-inverse); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: var(--contact-gap); }
.contact-copy { padding-top: var(--space-5); }
.contact-copy .eyebrow { color: var(--sunset); }
.contact-copy h2 { font-size: var(--font-contact-title); }
.contact-copy > p:not(.eyebrow) { color: var(--muted-inverse); max-width: 27rem; }
.contact-person { display: flex; align-items: center; gap: var(--space-4); margin-block: var(--space-7); }
.person-monogram { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--radius-circle); background: var(--sunset); color: var(--on-sunset); font-size: var(--font-small); font-weight: var(--weight-bold); }
.contact-person strong, .contact-person div > span, .contact-person a { display: block; }
.contact-person div > span { color: var(--muted-inverse); font-size: var(--font-label); }
.contact-person a { color: var(--sunset); font-size: var(--font-link); margin-top: .4rem; }
.contact-legal { font-size: var(--font-note); }
.contact-card { padding: var(--card-padding); border-radius: var(--radius-xl); background: var(--surface); color: var(--text); }
.contact-card .eyebrow { margin-bottom: var(--space-4); }
.contact-card h3 { font-size: 1.7rem; }
.contact-card > p:not(.eyebrow) { color: var(--muted); }
.contact-card .button { margin-top: .8rem; }
.contact-card .contact-address { font-weight: var(--weight-emphasis); overflow-wrap: anywhere; }
.contact-card .contact-hint { font-size: var(--font-label); }

/* Footer und Rechtsseiten */
.site-footer { padding-block: var(--space-7) var(--space-5); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-6); }
.site-footer > div p { font-size: var(--font-label); color: var(--muted); margin: .4rem 0 0; }
.site-footer nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-5); font-size: var(--font-footer); }
.site-footer nav a { color: var(--muted); }
.footer-bottom { width: 100%; padding-top: var(--space-4); border-top: var(--border-width) solid var(--border); color: var(--muted); font-size: var(--font-fine); }
.legal-main { max-width: 49rem; padding-block: var(--space-9) var(--space-11); }
.legal-main h1 { overflow-wrap: anywhere; hyphens: auto; font-size: var(--font-legal-title); }
.legal-main h2 { font-size: 1.4rem; margin-top: var(--space-7); }
.legal-main p, .legal-main li { color: var(--muted); }
.legal-main address { font-style: normal; margin-top: var(--space-5); }
.legal-main .back-link { display: inline-block; margin-bottom: var(--space-6); }

/* Responsive Layouts und barrierearme Darstellung */
@media (max-width: 65rem) {
  :root { --page-gutter: var(--space-5); --hero-gap: var(--space-4); --hero-padding-start: var(--space-9); --hero-padding-end: var(--space-9); --split-gap: var(--space-8); --steps-gap: var(--space-4); --step-padding: 1.3rem; --contact-gap: var(--space-6); }
  .site-nav { gap: var(--space-4); }
  .product-scene { transform: scale(.85); transform-origin: center right; margin-left: calc(-1 * var(--space-6)); }
}
@media (max-width: 48rem) {
  :root { --font-h1: clamp(2.8rem, 8.3vw, 4.4rem); --hero-padding-start: var(--space-8); --hero-gap: var(--space-6); --section-padding: 3.5rem; --heading-gap: 1.8rem; --faq-gap: 1.8rem; --step-padding: 1.8rem; --step-number-gap: var(--space-5); --contact-padding: var(--space-8); }
  .site-header { gap: var(--space-4); flex-wrap: wrap; }
  .site-header .brand { font-size: 1.4rem; }
  .site-nav { order: 3; width: 100%; justify-content: space-between; padding-top: .3rem; }
  .site-nav a { font-size: var(--font-label); }
  .site-header > .button { margin-left: auto; font-size: var(--font-button-mobile); }
  .hero, .section-heading, .split, .faq-grid, .contact-grid { grid-template-columns: 1fr; }
  .scene-orbit { transform: none; }
  .product-scene { transform: none; width: min(100%, 29rem); min-height: 32rem; margin: 0 auto; }
  .steps { grid-template-columns: 1fr; }
  .contact-card { --card-padding: var(--space-5); }
  .pilot-card { --card-padding: 1.8rem; }
}
@media (max-width: 25rem) {
  :root { --page-gutter: var(--space-4); }
  .product-scene { min-height: 29rem; }
  .phone { left: .5rem; width: 14rem; height: 25rem; }
  .receipt { width: 12rem; top: 14rem; right: 0; padding: var(--space-4); }
  .sun-disc { height: 22rem; }
  .scene-caption { bottom: -1rem; left: 0; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .button { transition: none; } }
@media print { :root { --hero-padding-start: var(--space-6); --hero-padding-end: var(--space-6); --section-padding: var(--space-6); --contact-padding: var(--space-6); } .site-nav, .button, .product-scene, .skip-link { display: none; } .contact-section { background: var(--on-primary); color: var(--text); } .contact-copy > p:not(.eyebrow), .contact-person a, .contact-person div > span { color: var(--muted); } .steps, .split, .contact-grid { display: block; } .step, .pilot-card { break-inside: avoid; } }