/* Diese Datei wird erzeugt. Nicht bearbeiten — geändert werden
 * css/tokens.css, css/base.css, css/site.css,
 * danach  perl tools/adressen-und-cache.pl  aufrufen. */

/* ======================== css/tokens.css ======================== */
/* ===== niclas' Fotobox — design tokens ===== */
/* Colours: the Elementor global kit (elementor-kit-17), exact values from the live site */
:root{
--green-800:#1e2d16;
--cream-50:#fcf9f1;
--ink-900:#1b1b1b;
--sage-500:#939e83;

--green-900:#131f0e;
--green-700:#2b3d20;
--green-600:#4d6453;
--sage-300:#c0c6b6;
--cream-100:#f4eee1;
--cream-200:#e8dfcb;
--cream-a84:#fcf9f1d6;
--gold-500:#c79a4b;
--gold-400:#d8ac6a;
--oak-500:#b9793f;
--white:#ffffff;

--surface-page:var(--cream-50);
--surface-paper:var(--cream-100);
--surface-dark:var(--green-800);
--surface-dark-raised:var(--green-700);
--surface-card:var(--cream-50);
--surface-card-dark:var(--green-800);
--surface-active:var(--sage-500);
--surface-image-base:var(--ink-900);

--text-body:var(--ink-900);
--text-heading:var(--green-800);
--text-muted:rgba(27,27,27,.66);
--text-on-dark:var(--cream-50);
--text-on-dark-muted:rgba(252,249,241,.7);
--text-accent:var(--gold-500);
--link:var(--sage-500);
--link-hover:var(--ink-900);

--border-hairline:var(--ink-900);
--border-strong:var(--ink-900);
--border-on-dark:var(--cream-50);
--border-photo:var(--sage-500);

--action-primary-bg:var(--green-800);
--action-primary-fg:var(--cream-50);
--action-primary-bg-hover:var(--sage-500);
--action-secondary-bg:transparent;
--action-secondary-fg:var(--cream-50);
--action-secondary-border:var(--cream-50);
--action-invert-bg:var(--cream-50);
--action-invert-fg:var(--ink-900);
--action-invert-bg-hover:var(--cream-a84);
--focus-ring:var(--sage-500);

--scrim-hero:linear-gradient(90deg,#000 19%,#ffffff00 74%);
--scrim-hero-opacity:.8;
--scrim-cta:radial-gradient(at bottom center,#ffffff00 0%,var(--ink-900) 70%);
--scrim-cta-opacity:.5;
--scrim-band:var(--ink-900);
--scrim-band-opacity:.25;
--scrim-image:linear-gradient(90deg,rgba(27,27,27,.86) 0%,rgba(27,27,27,.55) 45%,rgba(27,27,27,0) 78%);
--scrim-image-bottom:linear-gradient(180deg,rgba(27,27,27,0) 0%,rgba(27,27,27,.75) 100%);

/* Type */
--font-display:"Instrument Serif",'Times New Roman',Times,serif;
--font-script:"Luxurious Script","Instrument Serif",cursive;
--font-marker:"SmoothStone","Luxurious Script",cursive;
--font-body:Arial,"Helvetica Neue",Helvetica,sans-serif;

--fw-serif:500;
--fw-body:400;
--fw-body-strong:700;

--fs-h1:4.5rem;   --lh-h1:4.2rem;
--fs-h2:4rem;     --lh-h2:3.5rem;
--fs-hero-script:6.2rem;
--fs-faq-lockup:10rem; --fs-faq-lockup-script:11.6rem; --ls-faq-script:-.04em;

--fs-fluid:clamp(1.8rem, 2.3vh, 3.5rem);
--lh-fluid:clamp(1.8rem, 2.3vh, 3.5rem);

--fs-display-xl:4.5rem; --lh-display-xl:4.2rem;
--fs-display-l:4rem;    --lh-display-l:3.5rem;
--fs-display-m:2rem;    --lh-display-m:1.15;
--fs-display-s:1.8rem;  --lh-display-s:1.8rem;
--fs-display-xs:1.35rem; --lh-display-xs:1.3;

--fs-accent:1.35rem; --ls-accent:.5px; --ls-button:1px;
--fs-step-title:1.7rem; --ls-step-title:.5px;
--fs-step-index:1.1rem;
--fs-accordion:2rem;

--fs-script-xl:6.4rem;
--fs-script-l:5.6rem;
--fs-script-m:3.4rem;
--fs-script-s:2.3rem;

--fs-body-l:1.1rem; --lh-body-l:1.6;
--fs-body-m:1rem;   --lh-body-m:1.5;
--fs-body-annotation:.955rem; --lh-body-annotation:1.1rem;
--fs-body-s:.875rem; --lh-body-s:1.5;

--fs-label:12px; --ls-label:.14em; --lh-label:1.3;
--fs-label-s:11px; --ls-label-s:.16em;
--ls-display:0em;
--ls-body:0em;

/* Spacing */
--space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
--space-6:30px; --space-7:40px; --space-8:50px; --space-9:80px; --space-10:100px;

--container-max:1140px;
--container-content:944px;
--container-faq:1200px;
--container-narrow:480px;
--container-annotation:27%;

--pad-section-process:180px;
--pad-section-process-end:100px;
--pad-section-package:25px;
--pad-section-package-end:100px;
--pad-faq:80px; --pad-faq-end:140px; --pad-faq-x:70px;
--pad-hero-x:70px;
--gutter:70px;
--col-gap:100px;
--gap-stack:30px;
--gap-tight:15px;
--divider-pad:30px;

--btn-pad-y:25px; --btn-pad-x:60px;
--btn-pad-y-sm:17px; --btn-pad-x-sm:40px;
--btn-pad-x-wide:100px;
--header-h:90px;

/* Borders / shadows */
--radius-none:0px;
--radius-photo:2px;
--radius-pill:999px;
--border-w:1px;
--border-w-strong:2px;
--shadow-none:none;
--shadow-print:0 18px 40px -18px rgba(30,45,22,.35);
--shadow-lifted:0 28px 60px -24px rgba(20,18,16,.45);

/* Motion */
--ease-entrance:cubic-bezier(0,.33,.07,1.03);
--ease-standard:cubic-bezier(.4,0,.2,1);
--ease-out-soft:cubic-bezier(.16,.84,.44,1);
--dur-entrance:1.25s;
--dur-entrance-fast:.75s;
--dur-motion:1s;
--dur-fast:.3s;
--dur-base:.4s;
--dur-slow:.42s;
--dur-reveal:1.25s;
--transition-hover:background-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),fill var(--dur-fast) var(--ease-standard),opacity var(--dur-fast) var(--ease-standard);
--transition-motion:transform var(--dur-motion) var(--ease-entrance),opacity var(--dur-motion) var(--ease-entrance);
}
@media (prefers-reduced-motion:reduce){:root{
--dur-entrance:.001s;
--dur-motion:.001s;
--dur-reveal:.001s;
}}

/* Fonts — alle Schnitte liegen lokal im Projekt, es geht keine Anfrage mehr an Google.
   Das spart die Verbindung zu einem Drittanbieter (und damit die Einwilligungsfrage) und ist
   schneller: woff2 statt ttf drückt Luxurious Script von 377 KB auf 37 KB.
   Die Aufteilung in latin / latin-ext stammt von Google: der Browser lädt den erweiterten
   Zeichensatz nur, wenn ein Zeichen daraus wirklich vorkommt — bei deutschem Text also nie.
   Alle Schnitte mit font-display:swap, damit Text nie unsichtbar ist. */
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;
 src:url("../assets/fonts/InstrumentSerif-Regular.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:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;
 src:url("../assets/fonts/InstrumentSerif-Regular-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:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;
 src:url("../assets/fonts/InstrumentSerif-Italic.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:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;
 src:url("../assets/fonts/InstrumentSerif-Italic-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:"Luxurious Script";font-style:normal;font-weight:400;font-display:swap;
 src:url("../assets/fonts/LuxuriousScript-Regular.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:"Luxurious Script";font-style:normal;font-weight:400;font-display:swap;
 src:url("../assets/fonts/LuxuriousScript-Regular-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:"SmoothStone";src:url("../assets/fonts/SmoothStone-Regular.woff") format("woff"),url("../assets/fonts/SmoothStone-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}

/* The brand kit only supplied desktop CSS (see readme.md) — these overrides are a reasonable
   mobile scale-down of the same tokens, not brand-supplied values. */
@media (max-width:768px){
  :root{
    --fs-h1:2.6rem; --lh-h1:1.15;
    --fs-h2:2.3rem; --lh-h2:1.15;
    --fs-hero-script:3.4rem;
    --fs-faq-lockup:4.2rem; --fs-faq-lockup-script:4.9rem;
    --fs-display-m:1.5rem; --lh-display-m:1.2;
    --fs-script-l:3rem; --fs-script-xl:3rem;
    --fs-accordion:1.3rem;
    --pad-hero-x:24px; --gutter:24px; --pad-faq-x:24px;
    --pad-faq:50px; --pad-faq-end:70px;
    --pad-section-process:70px; --pad-section-process-end:60px;
    --pad-section-package:40px; --pad-section-package-end:60px;
    --btn-pad-x:34px; --btn-pad-x-wide:48px;
  }
}


/* ======================== css/base.css ======================== */
/* ===== Reset & base ===== */
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--fs-body-m);line-height:var(--lh-body-m)}
img,video{max-width:100%}
/* width/height attributes on an image are presentational hints; without this they would beat an
   author aspect-ratio and stretch the image to its intrinsic pixel height */
img{height:auto}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--fw-serif);margin:0;line-height:1.1;text-wrap:pretty}
h1{font-size:var(--fs-h1);line-height:var(--lh-h1);color:var(--text-on-dark)}
h2{font-size:var(--fs-h2);line-height:var(--lh-h2);color:var(--text-on-dark)}
p{margin:0 0 .9rem;text-wrap:pretty}
a{color:var(--link);text-decoration:none;transition:var(--transition-hover)}
a:hover{color:var(--link-hover)}
::selection{background:var(--sage-500);color:var(--cream-50)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.nf-script{font-family:var(--font-script);font-weight:var(--fw-serif);line-height:.9}
/* Luxurious Script sits tight against the serif on both sides; its long exit strokes need
   real air after the word, otherwise the next word reads as glued on. */
.script{margin-left:.06em;margin-right:.2em}
.nf-label{font-family:var(--font-body);font-size:var(--fs-body-m);line-height:var(--lh-body-m)}
input,select,textarea{color:var(--ink-900)}
input:focus,select:focus,textarea:focus,
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;box-shadow:none}

/* ===== Accessibility helpers ===== */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ===== Scroll-reveal (JS toggles .is-shown on intersection) ===== */
.reveal{opacity:0;transform:translateY(40px);transition:opacity var(--dur-entrance) var(--ease-entrance),transform var(--dur-entrance) var(--ease-entrance);will-change:opacity,transform}
.reveal.is-shown{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{transition-duration:.001s}}

/* ===== Button ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);
 padding:var(--btn-pad-y) var(--btn-pad-x);border:1px solid transparent;border-radius:0;background:none;
 font-family:var(--font-display);font-weight:var(--fw-serif);font-size:var(--fs-accent);
 line-height:1;letter-spacing:var(--ls-button);text-align:center;text-decoration:none;
 cursor:pointer;transition:var(--transition-hover);box-shadow:none}
.btn--m{padding:var(--btn-pad-y-sm) var(--btn-pad-x-sm)}
.btn--wide{padding:var(--btn-pad-y) var(--btn-pad-x-wide)}
.btn--block{display:flex;width:100%}
.btn:disabled{cursor:not-allowed;opacity:.45}

.btn--primary{background:var(--action-primary-bg);color:var(--action-primary-fg);border-color:var(--action-primary-bg)}
/* the global a:hover colour would otherwise win over .btn and turn button labels ink — every
   variant states its own hover colour so the label only changes where the fill does */
.btn--primary:hover{background:var(--action-primary-bg-hover);border-color:var(--action-primary-bg-hover);color:var(--action-primary-fg)}

.btn--outline-accent{background:var(--action-primary-bg);color:var(--action-primary-fg);border-color:var(--sage-500)}
.btn--outline-accent:hover{background:var(--action-primary-bg-hover);border-color:var(--action-primary-bg-hover);color:var(--action-primary-fg)}

.btn--secondary{background:transparent;color:var(--ink-900);border-color:var(--ink-900)}
.btn--secondary:hover{background:var(--cream-50);color:var(--ink-900)}
.btn--secondary.btn--on-dark{color:var(--cream-50);border-color:var(--cream-50)}
.btn--secondary.btn--on-dark:hover{background:var(--cream-50);color:var(--ink-900)}

.btn--invert{background:var(--action-invert-bg);color:var(--action-invert-fg);border-color:var(--ink-900)}
.btn--invert:hover{background:var(--action-invert-bg-hover);color:var(--action-invert-fg)}

.btn--ghost{background:transparent;color:var(--ink-900);border-color:transparent}
.btn--ghost:hover{color:var(--link-hover)}
.btn--ghost.btn--on-dark{color:var(--cream-50)}

.btn__icon{width:20px;height:20px;display:block}
.btn__icon--invert{filter:brightness(0) invert(1)}

/* ===== Eyebrow label ===== */
.eyebrow{font-family:var(--font-body)}
.eyebrow--gold{color:var(--gold-500)}
.eyebrow--dark{color:var(--text-heading)}
.eyebrow--light{color:var(--text-on-dark)}
.eyebrow--muted{color:var(--text-muted)}
.eyebrow--tracked{font-size:var(--fs-label);letter-spacing:var(--ls-label);line-height:var(--lh-label);text-transform:uppercase}
.eyebrow--tracked.eyebrow--s{font-size:var(--fs-label-s);letter-spacing:var(--ls-label-s)}
.eyebrow--plain{font-size:var(--fs-body-m);line-height:var(--lh-body-m)}

/* ===== Section heading ===== */
.section-heading h2{color:var(--text-heading)}
.section-heading.on-dark h2{color:var(--text-on-dark)}
.section-heading--center{text-align:center}
.section-heading__eyebrow{margin-bottom:var(--gap-stack)}
.section-heading .script{font-family:var(--font-script);font-weight:var(--fw-serif);
 line-height:.82;letter-spacing:-.02em;display:inline-block;margin:0 .2em 0 .06em;color:inherit}
.section-heading--xl h2{font-size:var(--fs-h1);line-height:var(--lh-h1)}
.section-heading--xl .script{font-size:var(--fs-script-xl)}
.section-heading--l h2{font-size:var(--fs-h2);line-height:var(--lh-h2)}
.section-heading--l .script{font-size:var(--fs-script-l)}
.section-heading--m h2{font-size:var(--fs-display-m);line-height:var(--lh-display-m)}
.section-heading--m .script{font-size:var(--fs-script-m)}
.section-heading--s h2{font-size:var(--fs-display-s);line-height:var(--lh-display-s)}
.section-heading--s .script{font-size:var(--fs-script-s)}

/* ===== Rule label ===== */
.rule-label{display:flex;align-items:center;width:100%}
.rule-label__label{font-family:var(--font-body);font-size:var(--fs-body-m);color:var(--text-heading);white-space:nowrap}
.rule-label__line-wrap{flex:1;padding:var(--divider-pad) 0}
.rule-label__line{display:block;height:1px;background:var(--border-strong)}
.rule-label--on-dark .rule-label__label{color:var(--text-on-dark)}
.rule-label--on-dark .rule-label__line{background:var(--border-on-dark)}

/* ===== Step card (Der Ablauf) ===== */
.step-card{display:flex;flex-direction:column;gap:var(--space-3)}
.step-card__head{display:flex;align-items:center;gap:var(--space-3);min-height:100px;padding-left:var(--gap-tight)}
.step-card__index{flex:none;font-family:var(--font-display);font-weight:var(--fw-serif);font-size:var(--fs-step-index);letter-spacing:var(--ls-step-title);color:var(--text-on-dark)}
.step-card__title{flex:1;font-family:var(--font-display);font-weight:var(--fw-serif);font-style:italic;font-size:var(--fs-step-title);letter-spacing:var(--ls-step-title);line-height:1.1;color:var(--text-on-dark)}
.step-card__body{font-family:var(--font-body);font-size:var(--fs-body-m);line-height:var(--lh-body-m);color:var(--text-on-dark)}

/* ===== Feature list (In jedem Paket) ===== */
.feature-list{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border-hairline)}
.feature-list__nav{display:flex;flex-direction:column;border-right:1px solid var(--border-hairline)}
.feature-list__heading{margin:0;line-height:var(--lh-body-m);padding:18px 22px;font-family:var(--font-body);font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;font-weight:var(--fw-body-strong);color:var(--green-800)}
.feature-list__row{display:block;font-family:var(--font-body);font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;padding:18px 22px;text-align:left;width:100%;border:none;border-top:1px solid var(--border-hairline);transition:var(--transition-hover);cursor:pointer;background:transparent;color:var(--green-800)}
.feature-list__item{display:flex;flex-direction:column}
.feature-list__row:hover,.feature-list__item.is-active .feature-list__row{background:var(--surface-active)}
/* the inline explanation is a mobile affordance; the wide layout shows the detail pane instead */
.feature-list__panel{display:none}
.feature-list__detail{padding:var(--space-9) var(--space-7);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.feature-list__detail-title{font-family:var(--font-display);font-weight:var(--fw-serif);font-size:var(--fs-display-s);line-height:var(--lh-display-s);color:var(--text-heading);margin-bottom:var(--space-5)}
.feature-list__detail-body{font-family:var(--font-body);font-size:var(--fs-body-m);line-height:var(--lh-body-m);color:var(--text-body);max-width:42ch}

/* ===== Accordion (FAQ) ===== */
.accordion{display:flex;flex-direction:column;gap:var(--space-5);width:100%}
.accordion__item{border:1px solid var(--border-on-dark)}
.accordion__heading{margin:0;font-size:inherit;font-weight:inherit;line-height:inherit}
.accordion__trigger{display:flex;align-items:center;gap:25px;width:100%;padding:34px 40px;background:transparent;border:none;color:var(--text-on-dark);cursor:pointer;text-align:left;transition:var(--transition-hover)}
.accordion__icon{font-family:var(--font-body);font-size:20px;line-height:1;width:15px;flex:none;text-align:center}
.accordion__question{font-family:var(--font-display);font-weight:var(--fw-serif);font-size:var(--fs-accordion);line-height:1.05}
.accordion__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-fast) var(--ease-entrance);overflow:hidden}
.accordion__item.is-open .accordion__panel{grid-template-rows:1fr}
.accordion__panel-inner{overflow:hidden}
.accordion__answer{padding:0 40px 40px 80px;font-family:var(--font-body);font-size:var(--fs-body-annotation);line-height:1.5;color:var(--text-on-dark)}

/* ===== Doodle ===== */
.doodle{display:block;width:100%;height:auto;pointer-events:none}

/* ===== Site header ===== */
/* Haarlinie nach unten: trennt den klebenden Header vom Inhalt, der darunter durchläuft.
   Ohne sie verschwimmen cremefarbener Header und cremefarbene Sektionen ineinander. */
.site-header{display:flex;align-items:stretch;justify-content:space-between;background:var(--surface-page);height:var(--header-h);position:sticky;top:0;z-index:100;
 border-bottom:1px solid var(--border-hairline)}
.site-header__logo{display:flex;align-items:center;padding:0 var(--space-6) 0 var(--pad-hero-x)}
.site-header__logo img{height:78px;width:auto;display:block}
.site-header__nav{display:flex;align-items:center}
.site-header__link{position:relative;padding:13px 20px;font-family:var(--font-display);font-weight:var(--fw-serif);font-size:var(--fs-accent);letter-spacing:var(--ls-accent);color:var(--text-heading);transition:color var(--dur-base) cubic-bezier(.58,.3,.005,1)}
.site-header__link:hover{color:var(--link-hover)}
/* „Anfrage stellen“ steht auf dem Desktop schon als Knopf in der Leiste. Im ausgeklappten
   Menü fehlt es aber, weil dort nur die Navigationsliste zu sehen ist — deshalb dieser
   Eintrag, der ausschließlich unter 860px erscheint. */
.site-header__link--mobil{display:none}
.site-header__underline{position:absolute;left:20px;right:20px;bottom:4px;height:1px;background:var(--text-heading);opacity:0;transition:opacity var(--dur-fast) cubic-bezier(.58,.3,.005,1)}
.site-header__link:hover .site-header__underline,.site-header__link.is-active .site-header__underline{opacity:1}
.site-header__cta.btn{height:100%;padding:0 var(--btn-pad-x);margin-left:var(--space-7)}

.site-header__menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:0 var(--space-5);min-width:44px;min-height:44px;
 align-items:center;justify-content:center;font-family:var(--font-display);font-size:1.6rem;color:var(--text-heading)}

/* Below 860px the row of links becomes a full-screen overlay opened by the burger. It stays in
   the DOM and only toggles a class, so opening it is a compositor-side opacity/transform
   transition that never blocks the main thread (INP). */
@media (max-width:860px){
  .site-header__logo{padding:0 0 0 var(--space-4)}
  .site-header__logo img{height:56px}
  /* the panel is not slid in: it is unmasked downwards, and the items fade in behind it one
     after another once the surface has arrived */
  .site-header__nav{position:fixed;top:var(--header-h);left:0;right:0;bottom:0;
   flex-direction:column;align-items:stretch;justify-content:flex-start;
   background:var(--surface-page);z-index:99;overflow-y:auto;overscroll-behavior:contain;
   visibility:hidden;clip-path:inset(0 0 100% 0);
   transition:clip-path .34s var(--ease-standard),visibility 0s linear .34s}
  .site-header__nav.is-open{visibility:visible;clip-path:inset(0 0 0 0);
   transition:clip-path .34s var(--ease-standard),visibility 0s linear 0s}
  .site-header__link--mobil{display:block}
  .site-header__link{padding:20px var(--space-5);font-size:1.3rem;text-align:center;
   border-bottom:1px solid var(--border-hairline);
   opacity:0;transition:opacity .26s var(--ease-standard),color var(--dur-base) cubic-bezier(.58,.3,.005,1)}
  .site-header__nav.is-open .site-header__link{opacity:1}
  .site-header__nav.is-open .site-header__link:nth-child(1){transition-delay:.30s}
  .site-header__nav.is-open .site-header__link:nth-child(2){transition-delay:.38s}
  .site-header__nav.is-open .site-header__link:nth-child(3){transition-delay:.46s}
  .site-header__nav.is-open .site-header__link:nth-child(4){transition-delay:.54s}
  .site-header__link.is-active{background:var(--green-900);color:var(--cream-50)}
  .site-header__underline{display:none}
  /* a button that sits in the bar, not a slab filling its whole height */
  .site-header__cta.btn{height:auto;align-self:center;min-height:44px;padding:11px 20px;
   font-size:1.05rem;margin-left:auto}
  .site-header__menu-toggle{display:flex}
  body.nav-open{overflow:hidden}
}

/* ===== Category bar ===== */
.category-bar{display:grid;grid-template-columns:repeat(3,1fr);background:var(--surface-page);border-top:1px solid var(--border-hairline);border-bottom:1px solid var(--border-hairline)}
.category-bar__item{font-family:var(--font-display);font-weight:var(--fw-serif);font-size:var(--fs-accent);letter-spacing:var(--ls-accent);text-transform:uppercase;padding:30px var(--space-5);cursor:pointer;background:transparent;color:var(--text-heading);border:none;border-left:1px solid var(--border-hairline);transition:var(--transition-hover)}
.category-bar__item:first-child{border-left:none}
.category-bar__item:hover{background:var(--cream-100)}

/* ===== Site footer ===== */
.site-footer{background:var(--surface-dark);color:var(--text-on-dark);position:relative;overflow:hidden}
.site-footer__inner{max-width:var(--container-max);margin:0 auto;padding:var(--space-9) var(--gutter) var(--space-10);
 display:grid;grid-template-columns:minmax(200px,1.3fr) minmax(130px,1fr) minmax(150px,1fr) minmax(120px,.9fr);
 gap:clamp(20px,3vw,80px);position:relative;z-index:1}
.site-footer__brand{min-width:0}
.site-footer__logo{height:92px;width:auto;display:block;margin-bottom:var(--space-6)}
.site-footer__blurb{font-family:var(--font-body);font-size:var(--fs-body-m);line-height:var(--lh-body-m);max-width:34ch}
.site-footer__heading{font-family:var(--font-display);font-size:var(--fs-display-xs);color:var(--text-on-dark);text-decoration:underline;text-underline-offset:6px;margin-bottom:var(--space-5)}
.site-footer__list{display:flex;flex-direction:column;gap:var(--space-4)}
/* the footer link lists carry the sage accent; cream on hover keeps the state readable on the
   dark ground (sage on green-800 is 5.1:1, cream 12.9:1 — both clear AA) */
.site-footer__item{font-family:var(--font-display);font-size:var(--fs-display-xs);color:var(--text-on-dark);display:block}
a.site-footer__item:hover{color:var(--sage-500)}
/* Der Abstand über den Symbolen soll dem zwischen den Textzeilen darüber entsprechen.
   Nachgemessen von Textkasten zu Textkasten: zwischen E-Mail und Telefonnummer liegen
   20,4px auf dem Desktop und 36,4px auf dem Handy. Mit den urspruenglichen 16px war der
   Abstand zu den Symbolen jeweils gut 14px groesser; 2px treffen beide Breiten genau. */
.site-footer__social{display:flex;align-items:center;gap:var(--space-4);margin-top:2px}
.site-footer__social a{display:flex;align-items:center;opacity:.85;transition:var(--transition-hover)}
.site-footer__social a:hover{opacity:1}
.site-footer__social-icon{display:block;background:var(--text-on-dark)}
.site-footer__spacer{min-width:0}
.site-footer__sketch{position:absolute;right:max(var(--gutter),calc(50% - var(--container-max) / 2));bottom:-210px;height:clamp(520px,48vw,700px);width:auto;display:block;z-index:0;pointer-events:none}
.site-footer__bottom{position:relative;z-index:1;max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter) var(--space-7);
 display:grid;grid-template-columns:1fr auto 1fr;align-items:center;font-family:var(--font-body);font-size:var(--fs-body-s);color:var(--text-on-dark);opacity:.7}   /* the kit's .45 is 3.8:1 on the green (fails AA); .7 gives 7:1 */
.site-footer__legal{display:flex;gap:var(--space-7);justify-self:center}
.site-footer__legal a{color:inherit}

@media (max-width:820px){
  .site-footer__inner{grid-template-columns:1fr 1fr;gap:var(--space-7) var(--space-6)}
  .site-footer__sketch{display:none}
  .site-footer__bottom{grid-template-columns:1fr;gap:var(--space-3);text-align:center;justify-items:center}
}
@media (max-width:480px){
  .site-footer__inner{grid-template-columns:1fr}
}

/* ===== Einwilligung (Banner + Einstellungen) =====
   Wird komplett aus js/main.js erzeugt, nicht als Markup in den sieben Seiten gepflegt.
   Das ist hier nicht nur bequem, sondern richtig: ohne JavaScript lädt auch der Meta-Pixel
   nicht, dann gibt es nichts einzuwilligen und das Banner hat nichts zu suchen. */
.consent{position:fixed;left:var(--space-6);bottom:var(--space-6);z-index:1000;
 width:min(460px,calc(100vw - 2 * var(--space-6)));
 background:var(--cream-50);color:var(--ink-900);border-radius:12px;
 box-shadow:var(--shadow-lifted);padding:var(--space-6)}
.consent[hidden]{display:none}
/* h2 ist global auf Creme gesetzt, weil die meisten Überschriften auf dunklem Grund stehen.
   Auf dieser hellen Karte wäre die Überschrift damit unsichtbar. */
.consent__titel{margin:0 0 var(--space-4);font-family:var(--font-display);
 font-weight:700;font-size:1.25rem;line-height:1.25;color:var(--ink-900)}
.consent__text{margin:0 0 var(--space-6);font-size:.94rem;line-height:1.6}
.consent__text a{color:inherit;text-decoration:underline}
.consent__aktionen{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.consent__aktionen .btn{flex:1 1 auto;padding:10px 14px;font-size:.85rem;
 letter-spacing:normal;white-space:nowrap}
/* Wege zu Datenschutzerklärung und Impressum. Sie stehen im Einstellungsdialog, nicht
   im Banner: dort nahmen sie zu viel von der kleinen Karte weg. */
.consent__wege{margin:var(--space-4) 0 0;font-size:.8rem;line-height:1.5;opacity:.72}
.consent__wege a{color:inherit;text-decoration:underline}
.consent__wege a:hover{color:var(--sage-500)}

/* ---------- Einstellungen ---------- */
.consent-dialog{position:fixed;inset:0;z-index:1001;display:flex;align-items:center;
 justify-content:center;padding:var(--space-5);background:rgba(20,18,16,.55)}
.consent-dialog[hidden]{display:none}
.consent-dialog__karte{width:min(880px,100%);max-height:min(88vh,760px);background:var(--cream-50);
 color:var(--ink-900);border-radius:12px;box-shadow:var(--shadow-lifted);
 display:flex;flex-direction:column;overflow:hidden}
.consent-dialog__kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);
 padding:var(--space-6) var(--space-7);border-bottom:1px solid rgba(27,27,27,.14)}
.consent-dialog__titel{margin:0;font-family:var(--font-display);font-weight:700;font-size:1.3rem;color:var(--ink-900)}
.consent-dialog__schliessen{border:none;background:none;cursor:pointer;padding:6px;
 font-size:1.5rem;line-height:1;color:var(--ink-900);border-radius:4px}
.consent-dialog__koerper{padding:var(--space-6) var(--space-7);overflow-y:auto;flex:1 1 auto}
.consent-dialog__intro{margin:0 0 var(--space-6);font-size:.94rem;line-height:1.6}

.consent-gruppe{border-top:1px solid rgba(27,27,27,.14);padding:var(--space-5) 0}
.consent-gruppe:first-of-type{border-top:none}
.consent-gruppe__kopf{display:flex;align-items:center;gap:var(--space-4);width:100%}
/* Der Aufklapp-Pfeil ist ein Button, damit er per Tastatur erreichbar ist */
.consent-gruppe__schalter{display:flex;align-items:center;gap:var(--space-3);flex:1 1 auto;
 border:none;background:none;padding:0;cursor:pointer;text-align:left;
 font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--ink-900)}
.consent-gruppe__pfeil{display:inline-block;transition:transform var(--dur-fast) var(--ease-standard);
 font-size:.85em;opacity:.6}
.consent-gruppe.is-offen .consent-gruppe__pfeil{transform:rotate(90deg)}
.consent-gruppe__immer{font-family:var(--font-display);font-weight:700;font-size:.9rem;
 color:var(--sage-500);white-space:nowrap}
.consent-gruppe__text{margin:var(--space-3) 0 0;font-size:.9rem;line-height:1.6}
.consent-gruppe__detail{margin:var(--space-4) 0 0;padding:var(--space-4) var(--space-5);
 background:rgba(147,158,131,.16);border-radius:8px;font-size:.86rem;line-height:1.6}
.consent-gruppe__detail[hidden]{display:none}
.consent-gruppe__detail dt{font-weight:700;margin-top:var(--space-3)}
.consent-gruppe__detail dt:first-child{margin-top:0}
.consent-gruppe__detail dd{margin:2px 0 0}

/* Umschalter — bewusst gross genug zum Antippen (44px Zielflaeche) */
.consent-schalter{position:relative;flex:0 0 auto;width:46px;height:26px;cursor:pointer}
.consent-schalter input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.consent-schalter__spur{position:absolute;inset:0;border-radius:999px;background:rgba(27,27,27,.22);
 transition:background var(--dur-fast) var(--ease-standard);pointer-events:none}
.consent-schalter__knopf{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
 background:var(--cream-50);transition:transform var(--dur-fast) var(--ease-standard);pointer-events:none}
.consent-schalter input:checked ~ .consent-schalter__spur{background:var(--green-800)}
.consent-schalter input:checked ~ .consent-schalter__knopf{transform:translateX(20px)}
.consent-schalter input:focus-visible ~ .consent-schalter__spur{outline:2px solid var(--focus-ring);outline-offset:2px}

.consent-dialog__fuss{display:flex;flex-wrap:wrap;gap:var(--space-3);
 padding:var(--space-5) var(--space-7);border-top:1px solid rgba(27,27,27,.14)}
.consent-dialog__fuss .btn{flex:1 1 200px;padding:11px 18px;font-size:.95rem}

@media (max-width:600px){
  .consent{left:var(--space-4);right:var(--space-4);bottom:var(--space-4);
   width:auto;padding:var(--space-6)}
  .consent__aktionen .btn,.consent-dialog__fuss .btn{flex:1 1 100%}
  .consent-dialog__kopf,.consent-dialog__koerper,.consent-dialog__fuss{padding-left:var(--space-5);padding-right:var(--space-5)}
}
@media (prefers-reduced-motion:reduce){
  .consent-gruppe__pfeil,.consent-schalter__spur,.consent-schalter__knopf{transition-duration:.001s}
}

/* Platzhalter für den Terminkalender, solange nicht zugestimmt wurde. Ohne ihn stünde dort
   eine Lücke und man wüsste nicht, dass etwas fehlt. */
.calendly-platzhalter{background:var(--cream-50);color:var(--ink-900);border:1px solid rgba(27,27,27,.18);
 border-radius:12px;padding:var(--space-7);text-align:center;display:flex;flex-direction:column;
 align-items:center;gap:var(--space-4)}
.calendly-platzhalter__text{margin:0;max-width:46ch;font-size:.94rem;line-height:1.6}

/* ======================== css/site.css ======================== */
/* ===== 1. Hero (Home) ===== */
.hero{position:relative;min-height:calc(100vh - var(--header-h));display:flex;flex-direction:column;justify-content:center;background:var(--surface-page);overflow:hidden}
/* Art direction is done in CSS rather than with <picture>: only the matching file is ever
   fetched, both variants are preloaded with a media condition in the page head, and the layer
   cannot shift anything because it is taken out of flow. */
.hero__pic{position:absolute;inset:0;background:url("../assets/imagery/party-01.webp") 0 0/cover no-repeat}
.hero__scrim{position:absolute;inset:0;background:var(--scrim-hero);opacity:var(--scrim-hero-opacity)}
.hero__content{position:relative;z-index:10;padding:0 0 0 var(--pad-hero-x);margin-bottom:var(--space-8);display:flex;flex-direction:column;gap:var(--gap-stack)}
.hero__headline{margin:-20px 0 0;max-width:900px}
/* No font-style here on purpose: Luxurious Script has no italic cut, so the browser would
   slant it synthetically and the word stops being readable. The reference site sets the same
   values upright (6.2rem / -.04em). */
.hero__headline .script{font-family:var(--font-script);font-size:var(--fs-hero-script);line-height:.73;letter-spacing:-.04em;display:inline-block}
.hero__lead{width:var(--container-narrow);max-width:100%;color:var(--text-on-dark);font-size:var(--fs-body-m);line-height:var(--lh-body-m);margin:0}
.hero__actions{position:relative;display:flex;gap:var(--space-5);align-self:flex-start}
.hero__actions .btn{position:relative}

/* ===== 2. Annotated product diagram ===== */
.product{position:relative;background:var(--surface-page);height:max(85vh,860px);z-index:2;scroll-margin-top:var(--header-h);
 --half-box:calc(0.2184 * (max(85vh,860px) + 110px));
 --gutter-w:calc(50% - var(--half-box) - 28px - var(--space-6))}
.product__render-wrap{position:absolute;bottom:0;left:50%;transform:translateX(-50%);height:calc(100% + clamp(40px,4vw,110px));z-index:10;pointer-events:none}
.product__render-wrap[data-side="front"]{aspect-ratio:1560/1950}
.product__render-wrap[data-side="back"]{aspect-ratio:1147/1920}
/* The back render sits 0.8% of its height further right inside its own file than the front one
   does, so turning the box would visibly nudge it sideways; measured off both alpha channels
   and compensated here. Body outline and screen cut-out disagree on the exact amount (1.34% vs .87% of
   the wrapper width), so this sits between the two. */
.product__render-wrap[data-side="back"]{transform:translateX(calc(-50% - 0.9%))}
/* ink behind the cut-out: reads as a switched-off screen until the lazily attached loop starts,
   and stays that way on phones, where the 9 MB file is never requested */
.product__video{position:absolute;object-fit:cover;z-index:1;border:none;background:var(--ink-900)}
.product__render{position:relative;z-index:2;display:block;width:100%;height:100%}

.product__note{position:absolute;z-index:2;pointer-events:auto;white-space:nowrap;width:max-content;
 font-family:var(--font-display);font-weight:var(--fw-serif);font-size:clamp(1.15rem,2.2vw,2.2rem);
 line-height:1.25;color:var(--ink-900)}
/* the script word needs more air after a short preposition than the shared .script rule gives */
.product__note .script{font-family:var(--font-script);font-size:clamp(1.6rem,3vw,3rem);line-height:.8;color:var(--ink-900);margin-left:clamp(12px,.55em,18px)}
.punkt{display:none}   /* the bullet mark only appears in the stacked mobile list */
/* Each note lives INSIDE its doodle's box and is pinned to the point where that ink stroke's
   brush tip ends — the percentages below are of the doodle image itself, so the pairing holds at
   any viewport size. translateY(-50%) centres the whole text block on the tip, not its first line. */
.product__note--handgefertigt{right:calc(100% + 10px);top:10.4%;transform:translateY(-50%);text-align:right}
.product__note--oled{right:calc(100% + 10px);top:16%;transform:translateY(-50%);text-align:right}
.product__note--studiolicht{left:calc(100% + 10px);top:79.9%;transform:translateY(-50%)}
.product__note--canon{left:calc(100% + 10px);top:53.6%;transform:translateY(-50%)}
.product__note--eventscreen{right:calc(100% + 10px);top:19.4%;transform:translateY(-50%);text-align:right}

/* Der Pfeil zeichnet sich beim Hereinscrollen selbst: eine weiche, weichgezeichnete Kante
   wandert als SVG-Maske über die Linie (die Richtung steckt im jeweiligen <animate>).
   Danach blendet die Pfeilspitze auf, zuletzt die Beschriftung — dieselbe Abfolge wie auf
   der Referenzseite. Startzeitpunkt je Pfeil: --doodle-delay, per JS gelesen. */
/* Die Pfeilspitze wird bewusst NICHT über CSS gesteuert: weder Übergänge noch
   Keyframe-Animationen laufen in diesen Inline-SVGs zuverlässig — die Spitze sprang dadurch
   beim Drehen sofort auf sichtbar. Sie hängt jetzt an einem eigenen <animate> im SVG, das
   erst 0,3 s wartet und dann aufblendet. Deshalb steht hier auch keine Regel für ihre
   Deckkraft: eine CSS-Angabe würde den animierten Attributwert überstimmen. */
.product__note{opacity:0;transition:opacity var(--dur-entrance-fast) var(--ease-entrance)}
.product__doodle.is-drawn .product__note{opacity:1}
/* Turning the box swaps the tablet annotation and drops the camera one (the lens is only on the
   front). The fade sits on the children so each doodle keeps its own scroll-entrance. */
.product__note--oled,.product__note--eventscreen,
.product__doodle--unten-links .doodle,.product__doodle--eventscreen .doodle,
.product__doodle--rechts .doodle,.product__note--canon{transition:opacity var(--dur-fast) var(--ease-standard)}
.product[data-side="front"] .product__note--eventscreen,
.product[data-side="front"] .product__doodle--eventscreen .doodle,
.product[data-side="back"] .product__note--oled,
.product[data-side="back"] .product__doodle--unten-links .doodle,
.product[data-side="back"] .product__doodle--rechts .doodle,
.product[data-side="back"] .product__note--canon{opacity:0;visibility:hidden}

/* Die Beschriftung kommt erst, wenn Strich und Spitze stehen. Steht bewusst nach dem
   Flip-Block: dessen transition-Kurzschreibweise würde die Verzögerung sonst
   überschreiben. Beim Drehen nimmt das JS .is-drawn kurz weg, damit die verschwindende
   Beschriftung ohne Verzögerung ausblendet. */
.product__doodle.is-drawn .product__note{transition-delay:.34s}

/* Zurücksetzen beim Drehen: die Beschriftung muss ohne Übergang verschwinden, sonst liefe ihr
   Ausblenden — das 0,34 s Vorlauf hat — noch, während schon neu gezeichnet wird.
   Muss nach der Regel darüber stehen, sonst gewinnt deren transition-delay. */
.product__doodle.is-resetting .product__note{transition:none}

/* Und der Pfeil selbst bleibt zwei Bilder lang unsichtbar. Grund: beginElement() setzt die
   Zeichnung zwar zurück, SMIL übernimmt den neuen Wert aber erst beim nächsten Takt. Ohne
   dieses kurze Ausblenden zeigte der Browser dazwischen noch den fertigen Pfeil aus dem
   letzten Durchlauf — er blitzte beim Drehen kurz auf, bevor er von vorn begann. */
.product__doodle.is-blank .doodle{opacity:0}

@media (prefers-reduced-motion:reduce){
  .product__note,.product__doodle.is-drawn .product__note{transition-duration:.001s;transition-delay:0s}
}

/* Hand-drawn sketch circle around the back-side note: two elliptical arcs with a gap, tilted a
   couple of degrees against each other (your snippet, on the brand's sage accent). Each arc is
   wiped in from the left when the box is turned, so the loop reads as being drawn by hand. */
.circle-sketch-highlight{position:relative}
/* the note is already absolutely pinned to its arrow tip — keep that, the utility only needs
   the element to be a positioning context */
.product__note.circle-sketch-highlight{position:absolute}
.circle-sketch-highlight::before,
.circle-sketch-highlight::after{
  content:"";position:absolute;z-index:-1;box-sizing:content-box;
  width:103%;height:2.5em;padding:.1em .25em;
  border:2px solid var(--sage-500);border-radius:50%;opacity:.7;
  clip-path:inset(-12% 100% -12% 0)}
.circle-sketch-highlight::before{left:-.3em;top:0;border-right-color:transparent;transform:rotate(-2deg)}
.circle-sketch-highlight::after{left:-.2em;top:.2em;border-left-color:transparent;border-top-color:transparent;transform:rotate(-3deg)}
.product[data-side="back"] .circle-sketch-highlight::before{
  clip-path:inset(-12% -12% -12% 0);transition:clip-path .55s var(--ease-standard) .25s}
.product[data-side="back"] .circle-sketch-highlight::after{
  clip-path:inset(-12% -12% -12% 0);transition:clip-path .5s var(--ease-standard) .72s}
@media (prefers-reduced-motion:reduce){
  .circle-sketch-highlight::before,.circle-sketch-highlight::after{clip-path:inset(-12% -12% -12% 0)}
}


/* the wrapper only becomes a box in the two-column view; everywhere else it dissolves so the
   diagram can position the strokes against the section itself */
.product__col{display:contents}
.product__doodle{position:absolute;z-index:40;pointer-events:none}
/* Dieser Pfeil läuft hinter der Fotobox hindurch, wirkt also, als käme er aus ihr
   heraus. Der Render-Wrapper liegt auf z-index 10 — alles darunter verschwindet dahinter. */
.product__doodle--oben-links{z-index:5}
.product__doodle--oben-links{left:30%;top:17%;width:15%}
.product__doodle--unten-links{left:27%;top:56%;width:20%}
.product__doodle--eventscreen{left:27%;top:56%;width:20%}   /* back view: the two-loop stroke, tip lands on the same spot */
.product__doodle--oben-rechts{right:33%;top:18%;width:13%}
.product__doodle--rechts{right:34%;top:47%;width:17%}

.product__aside{position:absolute;z-index:40;left:calc(50% + var(--half-box) + 28px);bottom:calc(var(--space-7) + 20px);width:min(340px,var(--gutter-w));display:flex;flex-direction:column;gap:var(--gap-tight)}
.product__about{display:flex;flex-direction:column;gap:var(--gap-tight)}
.product__about p{margin:0;font-size:var(--fs-body-annotation);line-height:var(--lh-body-annotation);color:var(--text-body)}

@media (max-width:900px){
  .product{height:auto;min-height:820px}
  .product__doodle{position:static;width:auto;margin:0 0 var(--space-4)}
  .product__doodle .doodle{display:none}
  .product__note{position:static;transform:none;width:auto;white-space:normal;text-align:left}
  .product__aside{position:static;width:auto;margin-top:var(--space-6)}
  .product__render-wrap{position:relative;left:auto;transform:none;height:60vh;margin:0 auto}
}

/* ===== 3. Collage band ===== */
.collage{position:relative;min-height:max(40vh,420px);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--space-3);overflow:visible}
.collage__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}
.collage__scrim{position:absolute;inset:0;background:var(--scrim-band);opacity:var(--scrim-band-opacity)}
.collage__heading{position:relative;z-index:3;margin-top:clamp(-80px,-6vh,-20px);margin-bottom:var(--space-9);display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}
.collage__prints{position:absolute;bottom:-125px;left:50%;transform:translateX(-50%);width:800px;max-width:92vw;display:flex;justify-content:space-evenly;z-index:2}
.collage__print{width:200px;max-width:28vw}
.collage__print img{width:100%;height:250px;object-fit:cover;object-position:center center;border:1px solid var(--border-photo);display:block}

/* ===== 4. Der Ablauf ===== */
.ablauf{position:relative;background:var(--surface-dark);padding:var(--pad-section-process) 0 var(--pad-section-process-end);overflow:hidden}
.ablauf__edge{position:absolute;top:55px;z-index:5}
.ablauf__edge--left{left:max(var(--space-6),calc(50% - 600px))}
.ablauf__edge--right{right:max(var(--space-6),calc(50% - 600px))}
.ablauf__row{max-width:var(--container-content);margin:0 auto;display:flex;gap:var(--col-gap);padding:0 var(--space-5)}
.ablauf__col{width:33%;flex:1}
@media (max-width:820px){.ablauf__row{flex-direction:column;gap:var(--space-8)}.ablauf__col{width:100%}}

/* ===== 5. In jedem Paket ===== */
.paket{background:var(--surface-page);padding:var(--pad-section-package) var(--space-5) var(--pad-section-package-end);display:flex;flex-direction:column;align-items:center}
.paket__rule{width:100%;max-width:var(--container-content);margin-bottom:var(--space-9)}
.paket__list{width:100%;max-width:var(--container-content)}
.paket__row{width:100%;max-width:var(--container-content);display:flex;margin-top:var(--space-5)}
.paket__price,.paket__cta{width:50%;display:flex;align-items:center;justify-content:center}
.paket__price h3{text-align:center;font-size:var(--fs-display-s);line-height:var(--lh-display-s);color:var(--text-heading);margin:0}
@media (max-width:700px){.feature-list{grid-template-columns:1fr}.feature-list__nav{border-right:none;border-bottom:1px solid var(--border-hairline)}.paket__row{flex-direction:column;gap:var(--space-6)}.paket__price,.paket__cta{width:100%}}

/* ===== 6. Zum FAQ ===== */
/* Sprungziel für index.html#faq: Headerhöhe plus Puffer. Ohne den Puffer landet der
   Schriftzug direkt an der Unterkante des klebenden Headers und wirkt angeschnitten —
   die Schreibschrift ragt zusätzlich über ihre Zeilenbox hinaus. */
.faq-section{scroll-margin-top:145px}
.faq-section{background:var(--surface-dark);padding:var(--pad-faq) var(--pad-faq-x) var(--pad-faq-end);display:flex;flex-direction:column;align-items:center;gap:var(--space-8)}
.faq-section__inner{width:100%;max-width:var(--container-faq);display:flex;flex-direction:column;align-items:center;gap:var(--space-8)}
/* both words sit on a shared baseline — the script face has a much deeper descender, so
   centring them (or nudging by a fixed pixel amount) only lines up at one size */
.faq-section__lockup{display:flex;justify-content:center;align-items:baseline;flex-wrap:wrap;margin:0;line-height:1}
.faq-section__lockup-script{font-family:var(--font-script);font-weight:var(--fw-serif);font-size:var(--fs-faq-lockup-script);letter-spacing:var(--ls-faq-script);color:var(--text-on-dark);line-height:.9;margin-right:.16em}
.faq-section__lockup-word{font-family:var(--font-display);font-weight:var(--fw-serif);font-size:var(--fs-faq-lockup);color:var(--text-on-dark);line-height:.9}
.faq-section__intro{width:420px;max-width:100%;text-align:center;color:var(--text-on-dark);font-size:var(--fs-body-m);line-height:var(--lh-body-m)}
.faq-section__intro a{color:var(--text-on-dark);text-decoration:underline}
.faq-section__list{width:100%}
.faq-section__list .accordion{gap:0}
.faq-section__list .accordion__item{margin-top:var(--space-5)}
.faq-section__list .accordion__item:first-child{margin-top:0}
@media (max-width:600px){.faq-section__lockup-word{font-size:4.5rem}.faq-section__lockup-script{font-size:5.2rem}.accordion__trigger{padding:22px 20px}.accordion__answer{padding:0 20px 28px 45px}}

/* ===== 7. Closing CTA ===== */
.closing-cta{position:relative;min-height:70vh;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--space-3);overflow:hidden}
/* The inset is negative so the parallax drift never exposes an edge; background-size subtracts
   1.3x that bleed so the picture keeps exactly the brand's 130%-of-section scale. The position
   percentages place the starting crop down and right, on the print rather than the top corner. */
.closing-cta__bg{position:absolute;inset:-90px;background-position:55% 62%;background-size:calc(130% - 234px) auto;background-repeat:no-repeat;background-color:var(--ink-900);will-change:transform}
.closing-cta__scrim{position:absolute;inset:0;background:var(--scrim-cta);opacity:var(--scrim-cta-opacity)}
.closing-cta__inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--space-3);text-align:center}
.closing-cta__inner h2{max-width:1000px}
.closing-cta__inner .script{font-family:var(--font-script);font-size:var(--fs-script-l);line-height:.8;letter-spacing:-.03em;display:inline-block;color:inherit}
.closing-cta__sub{font-size:var(--fs-display-m);color:var(--text-on-dark);text-align:center;font-family:var(--font-display);font-weight:var(--fw-serif);margin:0}
.closing-cta__cta{margin-top:var(--space-7)}

/* ===== Foto-Vorlagen page ===== */
.vorlagen-hero{position:relative;background:var(--surface-paper)}
.vorlagen-hero img{display:block;width:100%;height:auto}
/* no scroll entrance here: the reveal would animate the rotation away and set the lettering
   straight, so it stays put at its angle */
.vorlagen-hero__title{position:absolute;left:14%;width:50%;top:8%;margin:0;text-align:center;color:var(--green-700);font-family:var(--font-marker);font-weight:400;font-size:clamp(2.5rem,5.8vw,7.2rem);line-height:1;letter-spacing:0;transform:rotate(-6deg);transform-origin:center center}
/* stops short of the taped print, whose left edge sits at 49.4% of the artwork */
.vorlagen-hero__lead{position:absolute;left:24%;right:52%;top:40%;margin:0;font-family:var(--font-body);font-size:clamp(10px,1.05vw,15px);line-height:1.6;color:var(--text-body)}
.vorlagen-divider{padding:var(--space-8) var(--pad-hero-x) 0}
.vorlagen-divider__inner{max-width:var(--container-content);margin:0 auto}
.vorlagen-claim{padding:var(--space-9) var(--pad-hero-x) var(--space-10)}
.vorlagen-claim__inner{max-width:var(--container-max);margin:0 auto}
.vorlagen-claim h2{text-align:center;color:var(--text-heading);margin:0}
.vorlagen-claim .script{font-family:var(--font-script);font-size:var(--fs-script-l);line-height:.8;letter-spacing:-.02em;display:inline-block;color:inherit}
.vorlagen-grid{max-width:700px;margin:var(--space-8) auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
.vorlagen-grid img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
/* under 1024px the artwork is too small to hold the intro inside it without running into the
   circled annotation, so the paragraph moves below the picture */
@media (max-width:1023px){
  .vorlagen-hero{padding-bottom:var(--space-5)}
  .vorlagen-hero__lead{position:static;padding:var(--space-5) var(--pad-hero-x) 0;
   font-size:var(--fs-body-m);line-height:var(--lh-body-m)}
}

/* ===== Anfrage page ===== */
.anfrage-intro{background:var(--surface-page);padding:var(--space-9) var(--pad-hero-x) var(--space-8);text-align:center}
.anfrage-intro h1{color:var(--text-heading);margin:0;line-height:.95}
.anfrage-intro h1 .script{font-family:var(--font-script);font-size:var(--fs-hero-script);line-height:.8;letter-spacing:-.03em;display:inline-block;color:inherit}
.anfrage-intro p{max-width:380px;margin:var(--space-8) auto 0;color:var(--text-body);font-size:var(--fs-body-m);line-height:var(--lh-body-m)}

.anfrage-split{display:grid;grid-template-columns:minmax(280px,42%) 1fr}
.anfrage-split__photo{background:var(--surface-image-base);min-height:640px}
.anfrage-split__photo img{width:100%;height:100%;object-fit:cover;display:block}
.anfrage-split__panel{background:var(--surface-dark);padding:var(--space-9) clamp(24px,5vw,90px)}

.anfrage-form{display:flex;flex-direction:column;gap:var(--space-6);max-width:900px}
/* the closing run of the form — message, notice, submit, legal — reveals as one block */
.anfrage-final{display:flex;flex-direction:column;gap:var(--space-6)}
.anfrage-field label{display:block;margin-bottom:10px;font-family:var(--font-display);font-weight:var(--fw-serif);font-size:var(--fs-accent);color:var(--text-on-dark)}
.anfrage-field .required{color:var(--gold-500);margin-left:8px}
.anfrage-field input,.anfrage-field select,.anfrage-field textarea{width:100%;padding:13px 16px;border:none;border-radius:0;background:var(--white);color:var(--ink-900);font-family:var(--font-body);font-size:var(--fs-body-m);box-sizing:border-box;outline:none;appearance:auto}
.anfrage-field input{max-width:430px}
.anfrage-field textarea{min-height:110px;resize:vertical}
.anfrage-note{margin:0;font-family:var(--font-body);font-style:italic;font-size:var(--fs-body-s);line-height:1.5;color:var(--text-on-dark)}
/* Bewusst ohne Hover-Wechsel: der Button soll in jedem Zustand gleich aussehen.
   Creme auf Salbei sind 2,7:1 und damit unter der WCAG-AA-Schwelle von 4,5:1 — auf Wunsch
   so gesetzt. Ein dunkleres Salbei (#67715a) käme auf 4,9:1 bei fast gleichem Eindruck.
   Die Tastatur-Bedienung bleibt über das globale :focus-visible sichtbar. */
.anfrage-submit{padding:var(--btn-pad-y-sm) var(--btn-pad-x-sm);border:none;border-radius:0;background:var(--sage-500);color:var(--text-on-dark);cursor:pointer;font-family:var(--font-display);font-weight:var(--fw-serif);font-size:var(--fs-accent);letter-spacing:var(--ls-button)}
.anfrage-legal{margin:0;font-size:12px;line-height:1.5;color:var(--text-on-dark);opacity:.72}
/* Honeypot: nicht display:none, sonst ignorieren manche Bots ihn — stattdessen aus dem Bild geschoben */
.anfrage-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.anfrage-error{margin:0 0 var(--space-6);padding:14px 16px;background:var(--white);
 color:var(--ink-900);font-size:var(--fs-body-m);line-height:var(--lh-body-m)}
.anfrage-legal a{color:inherit;text-decoration:underline}
.anfrage-success{max-width:560px}
.anfrage-success__title{font-family:var(--font-display);font-weight:var(--fw-serif);font-size:var(--fs-display-m);line-height:var(--lh-display-m);color:var(--text-on-dark);margin:0}
.anfrage-success p{color:var(--text-on-dark);font-size:var(--fs-body-m);line-height:var(--lh-body-m);margin-top:var(--space-5)}
@media (max-width:800px){.anfrage-split{grid-template-columns:1fr}.anfrage-split__photo{min-height:320px}}

/* ===== Rendering: skip layout/paint of far-below-the-fold sections until they approach ===== */
/* Only sections that already clip their own overflow — paint containment would otherwise cut off
   the collage prints hanging below their band and the render bleeding out of the product section. */
.ablauf,.paket,.faq-section,.closing-cta,.site-footer,.anfrage-split,.vorlagen-claim{content-visibility:auto}
.ablauf{contain-intrinsic-size:auto 560px}
.paket{contain-intrinsic-size:auto 820px}
.faq-section{contain-intrinsic-size:auto 1400px}
.closing-cta{contain-intrinsic-size:auto 700px}
.site-footer{contain-intrinsic-size:auto 620px}
.anfrage-split{contain-intrinsic-size:auto 900px}
.vorlagen-claim{contain-intrinsic-size:auto 700px}

/* ===== Widescreen / 4K =====
   Containers are already capped (1140 / 944 / 1200px). The two full-bleed compositions get a
   ceiling so their percentage-based geometry keeps the reference proportions, and the root size
   steps up a little on very large panels so rem-based type does not read as tiny. */
@media (min-width:1920px){
  .hero__content{width:100%;max-width:1800px;margin-inline:auto}
  .product{max-width:1800px;margin-inline:auto}
}
@media (min-width:2400px){html{font-size:17px}}
@media (min-width:3200px){html{font-size:18px}}

/* ===== Stacked product diagram (tablets and every portrait window) =====
   The annotated diagram needs a gutter either side of a render that is sized from the viewport
   HEIGHT, so it only holds together on wide landscape screens: below that the notes either run
   off the left edge or slide over the box. Everywhere else the same content stacks — points,
   copy, then the render sitting flush with the end of the section. */
@media (max-width:1199px),(orientation:portrait){
  .product{display:flex;flex-direction:column;height:auto;min-height:0;
   padding:var(--space-9) var(--pad-hero-x) 0}
  .product__doodle{order:1;position:static;width:auto;margin:0 0 var(--space-4)}
  .product__doodle .doodle{display:none}
  /* the desktop delays follow the diagram, not the stack — re-cascade them top to bottom */
  .product__doodle--oben-links{--doodle-delay:0ms}
  .product__doodle--unten-links{--doodle-delay:120ms}
  .product__doodle--eventscreen{--doodle-delay:240ms}
  .product__doodle--oben-rechts{--doodle-delay:360ms}
  .product__doodle--rechts{--doodle-delay:480ms}
  .product__note,.product__note.circle-sketch-highlight{position:relative;inset:auto;transform:none;
   width:auto;max-width:none;white-space:normal;text-align:left;font-size:1.3rem;line-height:1.35}
  /* the <br> shapes the two-line setting of the diagram; in a list each point runs on one line
     and only wraps when it really has to */
  .product__note br{display:none}
  /* Im Diagramm steht das Schreibschriftwort frei und verträgt viel Luft davor. In der
     gestapelten Liste beginnt jede Zeile am selben Rand — dort wirken die 18px wie eine
     Lücke mitten im Satz und kosten Platz, den die schmalere Zeile nicht mehr hat. */
  .product__note .script{font-size:1.7rem;margin-left:clamp(3px,.18em,6px)}
  /* „Handgefertigte“ ist das erste Wort des Punktes: davor steht nur das Anstrich-Zeichen
     mit seinem eigenen Leerzeichen, ein zusätzlicher Abstand hat dort nichts zu suchen. */
  .product__note--handgefertigt .script{margin-left:0}
  .punkt{display:inline;color:var(--sage-500)}
  /* every point is relevant here, so none of them are tied to the side being shown */
  .product[data-side] .product__note{opacity:1;visibility:visible}
  /* the sketch circle belongs to the annotated diagram */
  .circle-sketch-highlight::before,.circle-sketch-highlight::after{display:none}
  /* the copy keeps its own box so it fades in like everything else instead of sitting there
     statically while the note above animates over it */
  .product__aside{order:2;position:static;width:auto;margin:0}
  .product__about{transition-delay:600ms!important}
  .product__about p{margin:0;font-size:var(--fs-body-m);line-height:var(--lh-body-m)}
  .product__flip{order:3;display:flex;justify-content:flex-start;margin-top:var(--space-2)}
  .product__flip .btn{min-height:52px}
  /* fixed height, width follows the aspect ratio: turning the box no longer resizes the section
     (the back render is a narrower file than the front one) */
  .product__render-wrap{order:4;position:relative;left:auto;transform:none;
   height:min(52vh,460px);width:auto;margin:var(--space-7) auto 0}
  .product__render-wrap[data-side="back"]{transform:none}
}

/* ===== Product, two-column (tablets and portrait windows above phone width) =====
   Above phone width there is room to keep the render beside the copy: box on the left, running
   into the bottom edge as it does on the wide layout, and the text column on the right with the
   points below it and the flip button underneath. */
@media (min-width:668px) and (max-width:1199px),(min-width:668px) and (orientation:portrait){
  .product{--render-h:min(78vh,740px,calc((100vw - 190px) * .7));
   display:grid;grid-template-columns:minmax(0,35fr) minmax(0,65fr);
   column-gap:var(--space-8);align-items:end;padding:var(--space-9) var(--pad-hero-x) 0}
  /* The render file carries roughly 23% transparent margin either side of the box, so the box
     you see is much narrower than its column. It is centred on the narrow column and simply
     overhangs it — only the empty part of the file reaches into the text column. */
  .product__render-wrap{grid-column:1;grid-row:1;align-self:end;justify-self:center;
   height:var(--render-h);width:auto;margin:0}
  /* one cell holds the whole text column, so the tall render cannot stretch the rows apart */
  .product__col{display:flex;flex-direction:column;justify-content:center;
   grid-column:2;grid-row:1;align-self:stretch;padding:var(--space-8) 0}
  .product__aside{display:contents}
  .product__about{order:1;margin-bottom:var(--space-6)}
  .product__doodle{order:2;margin:0 0 var(--space-4)}
  .product__flip{order:3;margin-top:var(--space-4)}
}

/* ===== Product, stacked (phones only) =====
   Below 668px there is no room for the box beside the copy, so the section becomes the vertical
   stack: points, copy, flip button, then the render flush with the end of the section. */
@media (max-width:667px){
  .product{padding:var(--space-8) var(--pad-hero-x) 0}
  .product__note,.product__note.circle-sketch-highlight{font-size:1.15rem}
  .product__note .script{font-size:1.5rem}
  .product__flip{margin-top:var(--space-2)}
  .product__render-wrap{height:min(52vh,400px);margin-top:var(--space-6)}
}

/* ===== Mobile (<= 768px) =====
   Every phone / tablet-portrait adjustment lives in this one block; nothing above it changes
   for desktop. Multi-column layouts collapse to one column, tap targets are >= 44px, and
   nothing is allowed to overflow the viewport. */
@media (max-width:768px){
  body{overflow-x:hidden;overflow-x:clip}

  /* ---- Hero: portrait art-direction photo, content-sized box, stacked full-width CTAs ---- */
  /* header + hero add up to exactly one screen; svh keeps the CTAs visible while the browser
     chrome is expanded */
  .hero{min-height:calc(100vh - var(--header-h));min-height:calc(100svh - var(--header-h));
   justify-content:flex-end;padding:var(--space-6) 0 var(--space-7)}
  .hero__pic{background-image:url("../assets/imagery/party-02-mobil.webp");background-position:50% 50%}
  /* the kit's 90deg scrim only darkens the left edge. With the copy sitting at the bottom of a
     portrait crop it becomes a vertical ramp instead: the top third stays almost clear so the
     photograph reads, and it deepens from the middle down to carry the type. */
  .hero__scrim{background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.18) 32%,rgba(0,0,0,.62) 56%,rgba(0,0,0,.9) 100%);opacity:1}
  .hero__content{padding:0 var(--pad-hero-x);margin-bottom:0;gap:var(--space-5)}
  .hero__headline{margin:0;max-width:none}
  /* at 3.4rem the desktop tracking closes the script letterforms up — open it back out */
  .hero__headline .script{letter-spacing:-.01em}
  .hero__actions{flex-direction:column;align-self:stretch;gap:var(--space-3)}
  .hero__actions .btn{width:100%;min-height:52px}

  /* short phones (iPhone SE and friends): trim the hero so header + hero still fit one screen */
  @media (max-height:700px){
    .hero{padding:var(--space-4) 0}
    .hero__content{gap:var(--space-4)}
    .hero__headline{font-size:2.2rem}
    .hero__headline .script{font-size:2.9rem}
    .hero__actions .btn{min-height:48px}
  }


  /* ---- Collage band and the prints hanging into the next section ---- */
  .collage{min-height:360px}
  .collage__prints{bottom:-90px}
  .collage__print img{height:180px}
  .ablauf{padding-top:150px}
  .ablauf__edge--right{display:none}
  .ablauf__row{flex-direction:column;gap:var(--space-8)}
  .ablauf__col{width:100%}
  .step-card__head{min-height:0}

  /* ---- Rule label: the two ends stack with the hairline between them ---- */
  .rule-label{flex-direction:column;align-items:center;text-align:center;gap:var(--space-2)}
  .rule-label__label{white-space:normal}
  .rule-label__line-wrap{flex:none;width:100%;padding:var(--space-2) 0}
  .paket__rule{margin-bottom:var(--space-7)}

  /* ---- Package panel: each point opens its own explanation right where it was tapped,
       so the answer is never a scroll away from the question ---- */
  .feature-list{grid-template-columns:1fr}
  .feature-list__nav{border-right:none}
  .feature-list__detail{display:none}
  .feature-list__heading{padding:14px 18px}
  .feature-list__row{padding:15px 18px;min-height:48px}
  .feature-list__panel{display:grid;grid-template-rows:0fr;
   transition:grid-template-rows var(--dur-fast) var(--ease-entrance);
   background:var(--surface-page);border-top:1px solid var(--border-hairline)}
  .feature-list__item.is-active .feature-list__panel{grid-template-rows:1fr}
  .feature-list__panel-inner{overflow:hidden}
  .feature-list__panel p{margin:0;padding:14px 18px 18px;font-size:var(--fs-body-m);
   line-height:var(--lh-body-m);color:var(--text-body)}
  .paket__rule{margin-bottom:var(--space-6)}
  .paket__row{flex-direction:column;gap:var(--space-5);margin-top:var(--space-6)}
  .paket__price,.paket__cta{width:100%}
  .paket__price h3{font-size:1.35rem;line-height:1.3}

  /* ---- FAQ ---- */
  .accordion__trigger{padding:20px 18px;gap:16px}
  .accordion__answer{padding:0 18px 24px 49px}
  .faq-section__intro a{display:inline-block;padding:12px 0;margin:-12px 0}

  /* ---- Closing CTA ---- */
  .closing-cta{min-height:auto;padding:var(--space-10) var(--pad-hero-x)}
  .closing-cta__bg{background-size:cover;background-position:60% 50%}
  .closing-cta__inner h2{max-width:none;font-size:1.7rem;line-height:1.22}
  .closing-cta__inner .script{font-size:2.1rem;letter-spacing:-.01em}

  /* ---- Category bar: one row per category ---- */
  .category-bar{grid-template-columns:1fr}
  .category-bar__item{border-left:none;border-top:1px solid var(--border-hairline);padding:18px var(--space-5);min-height:56px}
  .category-bar__item:first-child{border-top:none}

  /* ---- Footer: single column, every link a full tap target ---- */
  .site-footer__inner{grid-template-columns:1fr;gap:var(--space-7)}
  .site-footer__spacer{display:none}
  .site-footer__item{padding:8px 0}
  .site-footer__social a{min-width:44px;min-height:44px;justify-content:center}
  .site-footer__legal a{padding:12px 6px}
  .site-footer__sketch{display:none}
  .site-footer__bottom{grid-template-columns:1fr;gap:var(--space-2);text-align:center;justify-items:center}

  /* ---- Foto-Vorlagen ---- */
  .vorlagen-hero__title{font-size:clamp(1.8rem,7.5vw,3.5rem)}
  .vorlagen-grid{grid-template-columns:1fr;max-width:420px}

  /* ---- Anfrage ---- */
  .anfrage-split{grid-template-columns:1fr}
  .anfrage-split__photo{min-height:300px}
  .anfrage-intro p{margin-top:var(--space-6)}
  .anfrage-field input{max-width:none}
  .anfrage-field input,.anfrage-field select,.anfrage-field textarea{padding:14px 16px;font-size:16px;min-height:48px}
  .anfrage-field textarea{min-height:190px}
  .anfrage-submit{width:100%;padding:16px;min-height:52px}
  .anfrage-legal a{display:inline-block;padding:14px 0;margin:-14px 0}
}

/* ===== Rechtsseiten (Impressum, Datenschutz) =====
   Reine Lesetypografie: eine Spalte auf Cremegrund, Zeilenlänge auf ~70 Zeichen begrenzt,
   Abschnitte durch die Haarlinie des Kits getrennt. */
.legal{background:var(--surface-page);padding:var(--space-9) var(--pad-hero-x) var(--space-10)}
.legal__inner{max-width:820px;margin:0 auto}
.legal h1{font-size:var(--fs-h2);line-height:var(--lh-h2);color:var(--text-heading);margin:0 0 var(--space-7)}
.legal h2{font-size:var(--fs-display-m);line-height:var(--lh-display-m);color:var(--text-heading);
 margin:var(--space-8) 0 var(--space-4);padding-top:var(--space-6);border-top:1px solid var(--border-hairline)}
.legal h3{font-size:var(--fs-display-xs);line-height:1.3;color:var(--text-heading);margin:var(--space-5) 0 var(--space-2)}
/* Vierte Ebene: die Frage-Zwischentitel im Überblicksteil. Ohne eigene Regel säßen sie
   direkt am Absatz darunter und wären von normalem Fließtext kaum zu unterscheiden. */
.legal h4{font-family:var(--font-body);font-weight:700;font-size:var(--fs-body-m);
 line-height:1.4;color:var(--text-heading);margin:var(--space-4) 0 var(--space-2)}
.legal p{margin:0 0 var(--space-4);color:var(--text-body);font-size:var(--fs-body-m);line-height:var(--lh-body-m);max-width:70ch}
.legal ul{margin:0 0 var(--space-4);padding-left:1.3em;color:var(--text-body);max-width:70ch}
.legal li{margin-bottom:var(--space-2);line-height:var(--lh-body-m)}
.legal address{font-style:normal;margin:0 0 var(--space-4);color:var(--text-body);line-height:var(--lh-body-m)}
.legal strong{font-weight:var(--fw-body-strong)}
.legal a{color:var(--link);text-decoration:underline;text-underline-offset:3px}
.legal a:hover{color:var(--link-hover)}
.legal__meta{display:flex;flex-wrap:wrap;gap:var(--space-5) var(--space-10);margin-bottom:var(--space-5)}
.legal__updated{margin-top:var(--space-8);font-size:var(--fs-body-s);color:var(--text-muted)}
@media (max-width:768px){
  .legal{padding:var(--space-8) var(--pad-hero-x) var(--space-9)}
  .legal h2{margin-top:var(--space-7)}
}

/* ---------- Dankesseite nach dem Absenden ---------- */
/* Eigene Seite statt einer Meldung im Formular: der Besucher landet nach dem Absenden direkt
   hier, ohne Zwischenschritt. Das Bild ist freigestellt und steht deshalb ohne Rahmen direkt
   auf dem dunklen Grund. */
.bestaetigt{background:var(--surface-dark);padding:var(--space-9) var(--pad-hero-x) 0;
 display:flex;flex-direction:column;align-items:center;gap:var(--space-8)}
.bestaetigt__inner{width:100%;max-width:1080px;display:flex;flex-direction:column;
 align-items:center;gap:var(--space-5);text-align:center}
.bestaetigt__eyebrow{margin:0;font-family:var(--font-display);font-weight:var(--fw-serif);
 font-size:var(--fs-body-m);letter-spacing:var(--ls-accent);color:var(--text-on-dark)}
.bestaetigt__title{margin:0;font-family:var(--font-display);font-weight:var(--fw-serif);
 font-size:var(--fs-display-l);line-height:var(--lh-display-l);color:var(--text-on-dark)}
.bestaetigt__text{margin:0;max-width:960px;color:var(--text-on-dark);
 font-size:var(--fs-body-m);line-height:var(--lh-body-m)}
.bestaetigt__text strong{font-weight:700}
.bestaetigt__bild{width:100%;max-width:720px;height:auto;display:block}

@media (max-width:768px){
  .bestaetigt{padding-top:var(--space-8);gap:var(--space-7)}
  .bestaetigt__title{font-size:2.4rem;line-height:1.05}
  .bestaetigt__bild{max-width:100%}
}

/* Hinweis „erstellt von webdesignbyniclas“: Logo als Maske, nimmt die Textfarbe an */
.site-footer__copy .wd-credit{display:inline-flex;align-items:center;gap:6px;font-size:13px;line-height:1.6;color:inherit;opacity:.85;white-space:nowrap;text-decoration:none;padding:0;margin:0}
.site-footer__copy .wd-credit:hover{opacity:1;text-decoration:none}
.site-footer__copy .wd-credit .wd-credit__von{font-size:11px}
.site-footer__copy .wd-credit .wd-credit__logo{flex:none;width:20px;height:20px;background:currentColor;-webkit-mask:url(../assets/logo/webdesignbyniclas-60.png) center/contain no-repeat;mask:url(../assets/logo/webdesignbyniclas-60.png) center/contain no-repeat}
.site-footer__copy{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
@media (max-width:820px){.site-footer__copy{align-items:center}}