/* ============================================================
   LORENTO — Haupt-Stylesheet
   Webseiten und E-Commerce-Beratung, Rosenheim
   ------------------------------------------------------------
   Aufbau:
   1. Schriften (selbst gehostet, DSGVO-konform)
   2. Design-Tokens
   3. Basis / Reset
   4. Layout-Helfer
   5. Typografie
   6. Buttons & Links
   7. Header & Navigation
   8. Sektionen (Hero, Leistungen, Ausgangslagen, Warum, Ablauf,
      Referenzen, FAQ, CTA, Kontakt, Über mich)
   9. Footer
   10. Blog / Inhaltsseiten / WordPress-Klassen
   11. Animationen & Reduced Motion
   …
   20. Apple-Prinzipien: Federn, Material, Feedback, Barrierefreiheit
   ============================================================ */

/* ---------- 1. Schriften ---------- */
@font-face{
  font-family:"Bricolage Grotesque";
  font-style:normal;font-weight:400 800;font-display:swap;
  src:url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter Fallback";
  src:local("Arial");
  size-adjust:105.15%;line-gap-override:0%;
}
@font-face{
  font-family:"Inter";
  font-style:normal;font-weight:400 700;font-display:swap;
  src:url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- 2. Tokens ---------- */
:root{
  --c-ink:#111827;
  --c-ink-2:#1B2335;
  --c-ink-3:#273044;
  --c-text:#1F2937;
  --c-muted:#5B6273;
  --c-muted-2:#8B92A3;
  --c-line:#DCDFE8;
  --c-line-dark:rgba(255,255,255,.12);
  --c-paper:#EEF0F5;
  --c-paper-2:#E3E6EE;
  --c-white:#FFFFFF;
  --c-accent:#3B0A6B;
  --c-accent-dark:#2A0650;
  --c-accent-soft:#EFE7F9;
  --c-accent-text:#3B0A6B;
  --c-ok:#1F7A4D;
  --c-pop:#FF9030;
  --c-pop-dark:#E67A1A;
  --c-pop-soft:#FFE9D3;

  --ff-display:"Bricolage Grotesque","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ff-body:"Inter","Inter Fallback",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --fs-0:.8125rem;      /* 13px – Label, Kleingedrucktes */
  --fs-1:.9375rem;      /* 15px – Sekundärtext, Listen */
  --fs-2:1.0625rem;     /* 17px – Fließtext */
  --fs-label-s:.71875rem;/* 11.5px – Chips und Marken, nie darunter */
  --fs-3:clamp(1.125rem,1rem + .5vw,1.3125rem);
  --fs-h3:clamp(1.25rem,1.05rem + .8vw,1.625rem);
  --fs-h2:clamp(1.9rem,1.35rem + 2.4vw,3.1rem);
  --fs-h1:clamp(2.4rem,1.6rem + 4vw,4.6rem);
  --fs-price:clamp(2rem,1.5rem + 2vw,2.9rem);

  /* Satzparameter: eine Laufweite für alle Versallabel, ein Maß für Lesetext.
     Auf dunklen Flächen bekommt der Satz etwas mehr Luft (siehe .section--dark). */
  --track-label:.12em;
  --track-label-s:.14em;
  --lh-body:1.6;
  --track-body:var(--track-2);
  /* Laufweite je Schriftgrad (Inter „Dynamic Metrics“): je größer der Grad, desto enger.
     Kleine Schrift bekommt eher etwas mehr Luft, großer Lesetext etwas weniger. */
  --track-0:.005em;     /* 13px */
  --track-1:-.006em;    /* 15px */
  --track-2:-.011em;    /* 17px Fließtext */
  --track-3:-.015em;    /* 19–21px Lead */
  --measure:68ch;
  --measure-lead:60ch;

  --r-s:6px; --r-m:12px; --r-l:20px; --r-xl:28px;
  --shadow-s:0 1px 2px rgba(20,23,31,.06),0 2px 8px rgba(20,23,31,.05);
  --shadow-m:0 6px 24px rgba(20,23,31,.09),0 1px 3px rgba(20,23,31,.06);
  --shadow-l:0 24px 60px rgba(20,23,31,.16);

  --wrap:1180px;
  --wrap-narrow:820px;
  --pad:clamp(1.125rem,4vw,2.5rem);
  --sec:clamp(4rem,9vw,7.5rem);
  --gap:clamp(1rem,2.5vw,1.75rem);
  --header-h:76px;

  /* Easing: eigene Kurven, die eingebauten CSS-Easings sind zu schwach */
  --ease:cubic-bezier(.23,1,.32,1);           /* Alias = ease-out */
  --ease-out:cubic-bezier(.23,1,.32,1);       /* Ein-/Austritt, sofortiges Feedback */
  --ease-in-out:cubic-bezier(.77,0,.175,1);   /* Bewegung auf dem Screen */
  --ease-drawer:cubic-bezier(.32,.72,0,1);    /* iOS-artiges Panel */

  /* Dauern: UI bleibt unter 300ms */
  --dur-press:.14s;   /* Button-Press */
  --dur-fast:.16s;    /* Tooltip, Mikro-Feedback */
  --dur-pop:.18s;     /* Dropdown, Submenue */
  --dur:.22s;         /* Standard */
  --dur-card:.26s;    /* Karten-Hover */
  --dur-panel:.28s;   /* Panels, Mobile-Nav */

  /* Federn statt fester Kurven (Apple: Dämpfung + Response).
     Dämpfung 1.0 = kein Überschwingen – Standard für alles, was nicht „geworfen“ wird.
     Eine Feder hat keine echte Dauer; die Werte unten sind ihre Ausschwingzeit.
     Ohne linear()-Unterstützung greift die ease-out-Kurve (siehe @supports darunter). */
  --spring:var(--ease-out);
  --spring-drawer:var(--ease-drawer);
  --spring-s:.27s;        /* Response .2  – Press-Release, Icons */
  --spring-m:.4s;         /* Response .3  – Karten, Menüs, Akkordeon */
  --spring-l:.47s;        /* Response .35 – Panels, Banner, Einblenden */
  --spring-drawer-d:.38s; /* Dämpfung .8 / Response .3 – Apples Wert für Sheets */
  --press-in:70ms;        /* Eindrücken: sofort, ohne Feder */
}
@supports (transition-timing-function:linear(0,1)){
  :root{
    /* kritisch gedämpft (1.0) – Form identisch für alle Responses, nur die Dauer ändert sich */
    --spring:linear(0, .005 1.2%, .019 2.5%, .046 4%, .08 5.5%, .162 8.5%, .362 15%, .456 18.2%, .549 21.8%, .629 25.2%, .694 28.5%, .752 32%, .804 35.8%, .846 39.5%, .886 44%, .918 49%, .944 54.5%, .964 60.8%, .978 67.5%, .988 75.5%, 1);
    /* Dämpfung .8 – schwingt ~1,5 % über, nur für das Mobilmenü (Sheet) */
    --spring-drawer:linear(0, .007 1.5%, .025 3%, .059 4.8%, .103 6.5%, .2 9.8%, .427 16.5%, .531 19.8%, .632 23.2%, .714 26.5%, .779 29.5%, .838 32.8%, .885 36%, .926 39.5%, .958 43.2%, .983 47.5%, 1.001 52.2%, 1.011 57.5%, 1.015 68.5%, 1);
  }
}

/* ---------- 3. Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 1rem)}
body{
  margin:0;font-family:var(--ff-body);font-size:var(--fs-2);line-height:var(--lh-body);letter-spacing:var(--track-body);
  color:var(--c-text);background:var(--c-white);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
img,video,svg{max-width:100%;height:auto;display:block}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
ul,ol{margin:0 0 1em;padding-left:1.25em}
a{color:var(--c-accent-text);text-decoration-thickness:1px;text-underline-offset:.15em}
a:hover{color:var(--c-accent-dark)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
/* Kein Doppeltipp-Zoom auf Bedienelementen – der Tipp kommt ohne Wartezeit an */
a,button,summary,label,select{touch-action:manipulation}
:focus-visible{outline:3px solid var(--c-accent);outline-offset:3px;border-radius:2px}
::selection{background:var(--c-accent);color:#fff}
hr{border:0;border-top:1px solid var(--c-line);margin:2rem 0}
strong,b{font-weight:600}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:1rem;top:-100px;z-index:1000;background:var(--c-ink);color:#fff;padding:.6rem 1rem;border-radius:var(--r-s);text-decoration:none}
.skip-link:focus{top:1rem}

/* ---------- 4. Layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.wrap--narrow{max-width:var(--wrap-narrow)}
.section{padding-block:var(--sec)}
.section--tight{padding-block:calc(var(--sec) * .6)}
.section--paper{background:var(--c-paper)}
.section--dark{background:var(--c-ink);color:#E8E6E0}
.section--dark h2,.section--dark h3{color:#fff}
.section--dark .eyebrow{color:#FFB067}
.section-head{max-width:720px;margin-bottom:clamp(2rem,5vw,3.5rem)}
.section-head--center{margin-inline:auto;text-align:center}
.section-head--split{max-width:none;display:grid;gap:1.25rem 3rem;align-items:end}
@media(min-width:860px){.section-head--split{grid-template-columns:1.2fr 1fr}}
.grid{display:grid;gap:var(--gap)}
@media(min-width:640px){.grid--2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:860px){.grid--3{grid-template-columns:repeat(3,1fr)}.grid--4{grid-template-columns:repeat(4,1fr)}}
@media(min-width:640px) and (max-width:859px){.grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}}
.stack>*+*{margin-top:1rem}

/* ---------- 5. Typografie ----------
   Zwei Schriften, fünf Rollen: Display (Bricolage 700, eng), Lead, Fließtext,
   Label (Inter in Versalien) und Zahl. Größen kommen aus der Skala oben,
   nie aus Einzelwerten im Baustein. */
h1,h2,h3,h4,.h1,.h2,.h3{
  font-family:var(--ff-display);font-optical-sizing:auto;font-weight:700;line-height:1.05;
  letter-spacing:-.025em;color:var(--c-ink);margin:0 0 .5em;text-wrap:balance;
}
/* Deutsche Umlaute brauchen Platz: bei kleinem Grad offener, erst im großen
   Schaugrad so eng wie die Wortmarke. */
h1,.h1{font-size:var(--fs-h1);letter-spacing:-.035em;line-height:1.08}
h2,.h2{font-size:var(--fs-h2);line-height:1.12}
h3,.h3{font-size:var(--fs-h3);line-height:1.18;letter-spacing:-.015em}
h4{font-size:var(--fs-3);line-height:1.28;letter-spacing:-.015em}
p,li,dd{text-wrap:pretty}
.lead{font-size:var(--fs-3);line-height:1.55;letter-spacing:var(--track-3);color:var(--c-muted);max-width:var(--measure-lead)}
.section--dark .lead{color:#B7BAC3}

/* Label-Rolle: eine Laufweite, zwei Größen. Alles, was früher eigene Werte
   mitbrachte (Kind, Flag, Bildunterschrift, Fußzeilenüberschrift), hängt jetzt hier. */
.eyebrow,.label,.service__kind,.price-card__kind,.before-after figcaption,
.site-footer h4,.quote cite,.brand__sub,.consent__eyebrow,.service__flag,
.announce__tag,.check__kind,.check__progress,.ref-story__label,.ref-facts__title,.ref-facts dt{
  font-family:var(--ff-body);font-weight:600;line-height:1.35;letter-spacing:var(--track-label);
  text-transform:uppercase;text-wrap:balance;
}
.eyebrow,.label,.service__kind,.price-card__kind,.before-after figcaption,.site-footer h4,.quote cite,.check__kind,.check__progress,.ref-story__label,.ref-facts__title{
  font-size:var(--fs-0);
}
.brand__sub,.consent__eyebrow,.service__flag,.announce__tag,.ref-facts dt{
  font-size:var(--fs-label-s);letter-spacing:var(--track-label-s);
}
.eyebrow{
  display:inline-flex;align-items:flex-start;gap:.6rem;margin:0 0 1.1rem;
  color:var(--c-accent-text);max-width:52ch;
}
/* Der Strich sitzt auf der ersten Zeile, auch wenn das Label umbricht. */
.eyebrow::before{content:"";flex:none;width:22px;height:2px;margin-top:.62em;background:currentColor;border-radius:2px}
.section-head--center .eyebrow{justify-content:center}
.small{font-size:var(--fs-1);color:var(--c-muted)}
.muted{color:var(--c-muted)}
.accent{color:var(--c-accent)}

/* Zahlen laufen in Preisen, Tabellen und Fakten untereinander – gleiche Ziffernbreite. */
.service__price,.price-card__price,.price-card__facts,.compare,.step__time,
.detail-list li::before,.hero__meta,.mock__badge strong,.trust__item strong{
  font-variant-numeric:tabular-nums;
}
.mark{background:linear-gradient(transparent 62%,var(--c-pop-soft) 62%)}
.section--dark .mark{background:linear-gradient(transparent 62%,rgba(255,144,48,.45) 62%)}

/* Lesetext bekommt ein Maß, damit lange Absätze nicht über die volle Breite laufen. */
.seo-text p,.prose p,.prose li,.entry-content p{max-width:var(--measure)}

/* Helle Schrift auf dunklem Grund: etwas mehr Durchschuss und Laufweite,
   sonst wirkt sie gedrängt und die Punzen laufen zu. Überschriften behalten ihre eigene Laufweite. */
.section--dark,.cta,.site-footer{--lh-body:1.66;--track-body:-.003em;line-height:var(--lh-body);letter-spacing:var(--track-body)}

/* Deutsche Komposita brechen in schmalen Spalten sonst über den Rand. */
@media(max-width:700px){
  p,li,dd,.lead,.hero__lead{hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:9 4 4}
  h1,h2,h3,h4,.h1,.h2,.h3{hyphens:manual;-webkit-hyphens:manual}
}

/* Auch die Flächen, die der Browser stellt, gehören zum Satzbild. */
html{scrollbar-color:var(--c-muted-2) transparent}
body{caret-color:var(--c-accent)}
.section--dark ::selection,.cta ::selection,.site-footer ::selection{background:var(--c-pop);color:var(--c-ink)}
.compare-wrap::-webkit-scrollbar,.table-scroll::-webkit-scrollbar{height:8px}
.compare-wrap::-webkit-scrollbar-thumb,.table-scroll::-webkit-scrollbar-thumb{background:var(--c-muted-2);border-radius:999px}
.compare-wrap::-webkit-scrollbar-track,.table-scroll::-webkit-scrollbar-track{background:transparent}

/* ---------- 6. Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.95rem 1.5rem;border-radius:999px;border:1.5px solid transparent;
  font-weight:600;font-size:var(--fs-1);line-height:1;text-decoration:none;white-space:nowrap;
  --t-press:var(--spring-m) var(--spring);
  transition:background var(--dur) var(--ease-out),color var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),transform var(--t-press),box-shadow var(--dur) var(--ease-out);
}
/* Press-Feedback beim Drücken, nicht beim Loslassen: hinein ohne Verzögerung,
   zurück mit Feder – so fühlt sich der Knopf physisch an. */
.btn:active{transform:scale(.97);--t-press:var(--press-in) var(--ease-out)}
.btn svg{width:18px;height:18px;flex:none;transition:transform var(--dur-pop) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .btn:hover svg{transform:translateX(3px)}
}
.btn--primary{background:var(--c-accent);color:#fff;box-shadow:0 6px 18px rgba(59,10,107,.28)}
@media (hover:hover) and (pointer:fine){
  .btn--primary:hover{background:var(--c-accent-dark);color:#fff;transform:translateY(-1px);box-shadow:0 10px 24px rgba(59,10,107,.34)}
}
.btn--primary:active{transform:scale(.97);box-shadow:0 4px 12px rgba(59,10,107,.3)}
.btn--dark{background:var(--c-ink);color:#fff}
@media (hover:hover) and (pointer:fine){
  .btn--dark:hover{background:#000;color:#fff;transform:translateY(-1px)}
}
.btn--ghost{background:transparent;color:var(--c-ink);border-color:var(--c-line)}
.btn--ghost:hover{border-color:var(--c-ink);color:var(--c-ink);background:var(--c-white)}
.section--dark .btn--ghost{color:#fff;border-color:rgba(255,255,255,.3)}
.section--dark .btn--ghost:hover{border-color:#fff;background:transparent;color:#fff}
.btn--light{background:#fff;color:var(--c-ink)}
.btn--light:hover{background:var(--c-paper);color:var(--c-ink)}
.btn--sm{padding:.7rem 1.1rem;font-size:var(--fs-0)}
.btn--lg{padding:1.15rem 1.9rem;font-size:var(--fs-2)}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.link-arrow{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;color:var(--c-ink);text-decoration:none}
.link-arrow svg{width:18px;height:18px;transition:transform var(--dur-pop) var(--ease-out)}
.link-arrow:hover{color:var(--c-accent)}
@media (hover:hover) and (pointer:fine){
  .link-arrow:hover svg{transform:translateX(3px)}
}
.link-arrow:active svg{transform:translateX(5px)}

/* ---------- 7. Header ---------- */
/* Material statt Fläche: Der Header ist eine durchscheinende Ebene, unter der der
   Inhalt weiterläuft. Der Weichzeichner sitzt auf ::before – säße er auf dem Header
   selbst, würde der Header zur „Backdrop Root“ und Untermenü und Mobilmenü könnten
   nichts mehr hinter sich weichzeichnen. */
.site-header{position:sticky;top:0;z-index:100;height:var(--header-h)}
.site-header::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(255,255,255,.8);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  transition:background-color var(--dur-panel) var(--ease-out);
}
/* Scroll-Kante statt Trennlinie: ein weicher Verlauf erscheint nur dann,
   wenn wirklich Inhalt unter dem Header liegt. */
.site-header::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:18px;pointer-events:none;
  background:linear-gradient(180deg,rgba(17,24,39,.07),rgba(17,24,39,0));
  opacity:0;transition:opacity var(--dur) var(--ease-out);
}
.site-header.is-scrolled::after{opacity:1}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:100%}
.brand{display:inline-flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--c-ink);font-family:var(--ff-display);font-weight:700;font-size:1.35rem;letter-spacing:-.02em}
.brand img{height:36px;width:auto}
.brand__mark{width:36px;height:36px;flex:none}
.brand__name{line-height:1}
.brand__sub{display:block;color:var(--c-muted);margin-top:.3rem}
.nav-primary{display:none;align-items:center;gap:.25rem}
.nav-primary ul{list-style:none;margin:0;padding:0;display:flex;gap:.25rem}
.nav-primary a{
  display:inline-block;padding:.55rem .85rem;border-radius:999px;color:var(--c-text);
  font-weight:500;font-size:var(--fs-1);text-decoration:none;transition:background var(--dur-fast) ease,color var(--dur-fast) ease;
}
.nav-primary a:hover,.nav-primary .current-menu-item>a,.nav-primary .current_page_item>a,.nav-primary .current-menu-ancestor>a{background:var(--c-paper);color:var(--c-ink)}
.header-cta{display:none}
.nav-toggle{
  --t-press:var(--spring-m) var(--spring);
  transition:transform var(--t-press),background-color var(--dur-fast) var(--ease-out);
  display:inline-flex;align-items:center;gap:.6rem;min-height:44px;padding:.55rem 1rem;border-radius:999px;
  border:1.5px solid var(--c-line);font-weight:600;font-size:var(--fs-0);
}
.nav-toggle:active{transform:scale(.95);background-color:var(--c-paper);--t-press:var(--press-in) var(--ease-out)}
.nav-toggle__icon{width:18px;height:12px;position:relative;display:block}
.nav-toggle__icon::before,.nav-toggle__icon::after{content:"";position:absolute;left:0;right:0;height:2px;background:currentColor;border-radius:2px;transition:transform var(--dur) var(--ease-out),top var(--dur) var(--ease-out)}
.nav-toggle__icon::before{top:0}
.nav-toggle__icon::after{top:10px}
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before{top:5px;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after{top:5px;transform:rotate(-45deg)}
@media(min-width:960px){
  .nav-primary{display:flex}
  .header-cta{display:inline-flex}
  .nav-toggle{display:none}
}
.nav-mobile{
  /* Haengt am Header statt an einem festen Pixelwert: so sitzt das Panel auch
     dann direkt unter der Kopfzeile, wenn darueber die Aktions-Leiste steht. */
  position:absolute;top:100%;left:0;right:0;z-index:99;
  /* Großes Panel = dickeres Material: mehr Deckkraft, stärkerer Weichzeichner, tieferer Schatten */
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:saturate(180%) blur(30px);backdrop-filter:saturate(180%) blur(30px);
  border-radius:0 0 var(--r-xl) var(--r-xl);box-shadow:0 30px 60px rgba(17,24,39,.18);
  padding:.5rem var(--pad) 1.5rem;
  /* Passt immer auf den Bildschirm – auch auf kleinen Handys mit Aktionsleiste.
     main.js setzt --nav-max auf den tatsächlich freien Platz unter der Kopfzeile. */
  max-height:var(--nav-max,calc(100dvh - var(--header-h)));overflow-y:auto;overscroll-behavior:contain;
  display:block;visibility:hidden;pointer-events:none;
  /* Kommt aus der Kopfzeile und geht auf demselben Weg zurück */
  opacity:0;transform:translateY(-12px) scale(.98);transform-origin:50% 0;
  transition:opacity var(--dur-panel) var(--ease-out),transform var(--spring-drawer-d) var(--spring-drawer),visibility var(--dur-panel);
}
.nav-mobile.is-open{visibility:visible;pointer-events:auto;opacity:1;transform:none}
.nav-mobile ul{list-style:none;margin:0 0 1rem;padding:0}
.nav-mobile a{display:block;padding:.85rem 0;text-decoration:none;color:var(--c-ink);font-family:var(--ff-display);font-weight:600;font-size:1.35rem}
.nav-mobile .btn{width:100%}
/* Per Tastatur ausgeloest: ohne Animation, sonst fuehlt es sich verzoegert an */
.nav-mobile[data-instant]{transition-duration:0ms}
@media(min-width:960px){.nav-mobile{display:none!important}}
@media(prefers-reduced-motion:reduce){.nav-mobile{transform:none}}
body.nav-open{overflow:hidden}

/* ---------- 8. Sektionen ---------- */

/* Hero */
.hero{position:relative;overflow:hidden;background:var(--c-paper);padding-block:clamp(3.5rem,8vw,6.5rem) clamp(3rem,6vw,5rem)}
.hero::before{
  content:"";position:absolute;inset:auto -10% -40% auto;width:60vw;max-width:820px;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(59,10,107,.14),rgba(59,10,107,0));pointer-events:none;
}
.hero .wrap{position:relative;display:grid;gap:3rem;align-items:center}
@media(min-width:960px){.hero .wrap{grid-template-columns:1.05fr .95fr;gap:4rem}}
.hero__title{margin-bottom:1.25rem}
.hero__lead{font-size:var(--fs-3);letter-spacing:var(--track-3);color:var(--c-text);max-width:54ch;margin-bottom:2rem;text-wrap:pretty}
.hero__meta{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-top:2rem;padding:0;list-style:none;font-size:var(--fs-1);color:var(--c-muted)}
.hero__meta li{display:inline-flex;align-items:center;gap:.5rem}
.hero__meta svg{width:18px;height:18px;color:var(--c-ok);flex:none}

/* Browser-Mockup (rein CSS, keine Bilder nötig) */
.mock{
  position:relative;border-radius:var(--r-l);background:#fff;box-shadow:var(--shadow-l);
  border:1px solid rgba(20,23,31,.08);overflow:hidden;transform:rotate(-1.2deg);
  font-family:var(--ff-body);
}
@media(min-width:960px){.mock{margin-right:-1rem}}
.mock__bar{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;border-bottom:1px solid var(--c-line);background:#FAF9F6}
.mock__bar i{width:10px;height:10px;border-radius:50%;background:#D3D7E2}
.mock__bar i:first-child{background:var(--c-pop)}
.mock__url{margin-left:.75rem;flex:1;height:22px;border-radius:6px;background:#fff;border:1px solid var(--c-line);font-size:var(--fs-label-s);color:var(--c-muted);display:flex;align-items:center;padding-inline:.6rem;font-weight:500}
.mock__body{padding:1.25rem 1.5rem 1.5rem}
.mock__nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.6rem}
.mock__logo{font-family:var(--ff-display);font-weight:800;font-size:.95rem;color:var(--c-ink);letter-spacing:-.02em}
.mock__links{display:flex;gap:.5rem}
.mock__links i{display:block;width:34px;height:6px;border-radius:3px;background:#DCDFE8}
.mock__links i:last-child{width:52px;background:var(--c-pop)}
.mock__hero{display:grid;grid-template-columns:1.1fr .9fr;gap:1rem;align-items:center;margin-bottom:1.25rem}
.mock__h{font-family:var(--ff-display);font-weight:700;font-size:clamp(1.1rem,2.2vw,1.5rem);line-height:1.05;letter-spacing:-.03em;color:var(--c-ink);margin:0 0 .6rem}
.mock__p{height:6px;border-radius:3px;background:#DCDFE8;margin-bottom:.4rem}
.mock__p--short{width:70%}
.mock__btn{display:inline-block;margin-top:.7rem;padding:.42rem .8rem;border-radius:999px;background:var(--c-ink);color:#fff;font-size:.7rem;font-weight:600}
.mock__img{aspect-ratio:4/3;border-radius:10px;background:linear-gradient(135deg,#FFC48A,#3B0A6B 60%,#22053F);position:relative;overflow:hidden}
.mock__img::after{content:"";position:absolute;inset:auto 12% -30% 12%;height:70%;border-radius:50% 50% 0 0;background:rgba(255,255,255,.18)}
.mock__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.mock__card{border:1px solid var(--c-line);border-radius:8px;padding:.6rem}
.mock__card b{display:block;width:22px;height:22px;border-radius:6px;background:var(--c-accent-soft);margin-bottom:.5rem}
.mock__card i{display:block;height:5px;border-radius:3px;background:#DCDFE8;margin-bottom:.3rem}
.mock__card i:last-child{width:60%}
.mock__badge{
  position:absolute;right:-.6rem;bottom:1.6rem;transform:rotate(3deg);
  background:var(--c-ink);color:#fff;padding:.7rem .95rem;border-radius:var(--r-m);box-shadow:var(--shadow-m);
  font-size:.75rem;line-height:1.25;font-weight:500;max-width:170px;
}
.mock__badge strong{display:block;font-family:var(--ff-display);font-size:1.15rem;letter-spacing:-.02em;color:var(--c-pop)}
.hero__figure{position:relative;padding-bottom:1.5rem}
.hero__price-note{
  position:absolute;left:-.5rem;top:-1rem;background:#fff;border:1px solid var(--c-line);border-radius:999px;
  padding:.5rem .9rem;font-size:var(--fs-0);font-weight:600;box-shadow:var(--shadow-s);display:inline-flex;align-items:center;gap:.5rem;
}
.hero__price-note i{width:8px;height:8px;border-radius:50%;background:var(--c-ok);box-shadow:0 0 0 4px rgba(31,122,77,.15)}

/* Vertrauensleiste */
.trust{border-block:1px solid var(--c-line);background:#fff}
.trust .wrap{display:grid;gap:0}
@media(min-width:640px){.trust .wrap{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.trust .wrap{grid-template-columns:repeat(4,1fr)}}
.trust__item{padding:1.4rem 1.25rem 1.4rem 0;display:flex;gap:.9rem;align-items:flex-start;border-bottom:1px solid var(--c-line)}
@media(min-width:960px){.trust__item{border-bottom:0;border-right:1px solid var(--c-line);padding-inline:1.5rem}.trust__item:first-child{padding-left:0}.trust__item:last-child{border-right:0}}
@media(min-width:640px) and (max-width:959px){.trust__item:nth-child(odd){border-right:1px solid var(--c-line);padding-right:1.5rem}.trust__item:nth-child(even){padding-left:1.5rem}.trust__item:nth-last-child(-n+2){border-bottom:0}}
@media(max-width:639px){.trust__item:last-child{border-bottom:0}}
.trust__item svg{width:24px;height:24px;flex:none;color:var(--c-accent);margin-top:.15rem}
.trust__item strong{display:block;font-family:var(--ff-display);font-size:1.05rem;color:var(--c-ink);letter-spacing:-.01em}
.trust__item span{font-size:var(--fs-1);color:var(--c-muted)}

/* Ausgangslagen */
.situations{counter-reset:sit}
.situation{
  position:relative;padding:1.75rem 1.5rem 1.75rem;border:1px solid var(--c-line);border-radius:var(--r-l);background:#fff;
  transition:transform var(--spring-m) var(--spring),box-shadow var(--dur-card) var(--ease-out),border-color var(--dur-card) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .situation:hover{transform:translateY(-4px);box-shadow:var(--shadow-m);border-color:transparent}
}
.situation__num{display:block;font-family:var(--ff-display);font-weight:700;font-size:.9rem;font-variant-numeric:tabular-nums;letter-spacing:.04em;color:var(--c-accent);margin-bottom:1.2rem}
.situation h3{margin-bottom:.5rem}
.situation p{color:var(--c-muted);font-size:var(--fs-1)}
.situation__tag{display:inline-block;margin-top:1.1rem;padding:.35rem .7rem;border-radius:999px;background:var(--c-paper);font-size:var(--fs-0);font-weight:600;color:var(--c-ink)}

/* Leistungen / Preise */
.services{align-items:stretch}
.service{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--c-line);border-radius:var(--r-l);padding:1.75rem 1.5rem;
  transition:transform var(--spring-m) var(--spring),box-shadow var(--dur-card) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .service:hover{transform:translateY(-4px);box-shadow:var(--shadow-m)}
}
.service--featured{background:var(--c-accent);color:#E9E1F3;border-color:var(--c-accent);position:relative}
.service--featured h3,.service--featured .service__price{color:#fff}
.service--featured .service__desc{color:#CBBFDD}
.service--featured .service__list li{color:#E9E1F3;border-color:rgba(255,255,255,.16)}
.service--featured .service__list svg{color:var(--c-pop)}
.service__flag{position:absolute;top:1.25rem;right:1.25rem;background:var(--c-pop);color:var(--c-ink);font-weight:700;padding:.32rem .65rem;border-radius:999px}
.service__kind{color:var(--c-muted);margin-bottom:.9rem}
.service--featured .service__kind{color:#C4B5DB}
.service h3{margin-bottom:.35rem}
.service__price{font-family:var(--ff-display);font-weight:700;font-size:var(--fs-price);letter-spacing:-.03em;line-height:1;color:var(--c-ink);margin:.4rem 0 .35rem;display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap}
.service__price small{font-family:var(--ff-body);font-weight:500;font-size:var(--fs-1);letter-spacing:0;color:var(--c-muted)}
/* Wortpreise ("nach Aufwand") stehen im Grad einer Zwischenüberschrift, nicht im Zahlengrad. */
.service__price--words{font-size:var(--fs-h3);letter-spacing:-.02em;line-height:1.12}
.price-card__price--words{font-size:clamp(1.6rem,1.35rem + 1vw,2.1rem);line-height:1.12;letter-spacing:-.02em}
.service--featured .service__price small{color:#C4B5DB}
.service__desc{font-size:var(--fs-1);color:var(--c-muted);margin-bottom:1.25rem}
.service__list{list-style:none;margin:0 0 1.5rem;padding:0;flex:1}
.service__list li{display:flex;gap:.6rem;align-items:flex-start;padding:.5rem 0;border-top:1px solid var(--c-line);font-size:var(--fs-1)}
.service__list svg{width:18px;height:18px;flex:none;margin-top:.15rem;color:var(--c-accent)}
.service .btn{width:100%}
.services-note{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;font-size:var(--fs-1);color:var(--c-muted)}
.services-note li{display:inline-flex;gap:.45rem;align-items:center}
.services-note{list-style:none;padding:0}
.services-note svg{width:16px;height:16px;color:var(--c-ok)}

/* Warum Lorento */
.why .wrap{display:grid;gap:3rem}
@media(min-width:960px){.why .wrap{grid-template-columns:1fr 1.1fr;gap:5rem;align-items:start}}
@media(min-width:960px){.why__sticky{position:sticky;top:calc(var(--header-h) + 2rem)}}
.why__list{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.why__item{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;padding:1.5rem;border-radius:var(--r-l);background:var(--c-ink-2);border:1px solid var(--c-line-dark)}
.why__icon{width:46px;height:46px;border-radius:12px;background:rgba(255,144,48,.16);display:grid;place-items:center;color:var(--c-pop)}
.why__icon svg{width:22px;height:22px}
.why__item h3{margin-bottom:.35rem;font-size:1.25rem}
.why__item p{color:#B7BAC3;font-size:var(--fs-1)}
.quote{margin:2.5rem 0 0;padding:1.75rem;border-left:3px solid var(--c-pop);background:rgba(255,255,255,.04);border-radius:0 var(--r-m) var(--r-m) 0}
.quote p{font-family:var(--ff-display);font-size:1.25rem;line-height:1.35;color:#fff;letter-spacing:-.01em}
.quote cite{display:block;margin-top:.9rem;font-style:normal;color:#A8ACB6}

/* Ablauf */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:1.25rem;counter-reset:step}
@media(min-width:640px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{position:relative;padding:1.5rem 1.5rem 1.5rem;background:#fff;border:1px solid var(--c-line);border-radius:var(--r-l)}
.step__num{
  display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--c-accent);color:#fff;
  font-family:var(--ff-display);font-weight:700;font-size:.95rem;margin-bottom:1rem;
}
.step h3{font-size:1.2rem;margin-bottom:.35rem}
.step p{font-size:var(--fs-1);color:var(--c-muted)}
.step__time{display:inline-block;margin-top:.9rem;font-size:var(--fs-0);font-weight:600;color:var(--c-ink);background:var(--c-paper);padding:.3rem .65rem;border-radius:999px}

/* Referenzen */
.refs{align-items:stretch}
.ref{
  display:flex;flex-direction:column;border-radius:var(--r-l);overflow:hidden;background:#fff;border:1px solid var(--c-line);text-decoration:none;color:inherit;
  transition:transform var(--spring-m) var(--spring),box-shadow var(--dur-card) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .ref:hover{transform:translateY(-4px);box-shadow:var(--shadow-m);color:inherit}
}
.ref:active{transform:scale(.985);transition-duration:var(--press-in)}
.ref__media{aspect-ratio:4/3;background:var(--c-paper-2);overflow:hidden}
.ref__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .ref:hover .ref__media img{transform:scale(1.04)}
}
.ref__body{padding:1.25rem 1.35rem 1.4rem}
.ref__meta{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.6rem;font-size:var(--fs-0);color:var(--c-muted)}
.ref__meta span{background:var(--c-paper);padding:.25rem .6rem;border-radius:999px;font-weight:500}
.ref h3{font-size:1.2rem;margin-bottom:.3rem}
.ref p{font-size:var(--fs-1);color:var(--c-muted)}
.ref__placeholder{
  border:1.5px dashed var(--c-line);border-radius:var(--r-l);padding:clamp(2rem,5vw,3rem);text-align:center;background:#fff;
}
.ref__placeholder h3{margin-bottom:.5rem}
.ref__placeholder p{max-width:52ch;margin-inline:auto;color:var(--c-muted)}
.ref__placeholder .btn{margin-top:1.25rem}
.before-after{display:grid;gap:1rem;margin:1.5rem 0}
@media(min-width:640px){.before-after{grid-template-columns:1fr 1fr}}
.before-after figure{margin:0}
.before-after figcaption{color:var(--c-muted);margin-bottom:.5rem}
.before-after img{border-radius:var(--r-m);border:1px solid var(--c-line)}

/* Kundenstimme */
.testimonial{background:#fff;border:1px solid var(--c-line);border-radius:var(--r-l);padding:1.75rem}
.testimonial p{font-family:var(--ff-display);font-size:1.2rem;line-height:1.35;color:var(--c-ink)}
.testimonial footer{margin-top:1rem;font-size:var(--fs-1);color:var(--c-muted)}
.testimonial footer strong{color:var(--c-ink)}

/* FAQ */
.faq{max-width:var(--wrap-narrow);margin-inline:auto}
.faq details{border-bottom:1px solid var(--c-line)}
.faq details:first-of-type{border-top:1px solid var(--c-line)}
.faq summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.2rem 0;font-family:var(--ff-display);font-weight:600;font-size:1.15rem;color:var(--c-ink);letter-spacing:-.01em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--c-line);
  background:
    linear-gradient(currentColor,currentColor) center/10px 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) center/1.5px 10px no-repeat;
  transition:transform var(--spring-m) var(--spring),background var(--dur) var(--ease-out);
}
.faq details[open]:not([data-state="closed"]) summary::after,.faq details[data-state="open"] summary::after{transform:rotate(45deg);background-color:var(--c-paper)}
.faq summary:active::after{transform:scale(.88);transition-duration:var(--press-in)}
.faq details[data-state="open"] summary:active::after{transform:rotate(45deg) scale(.88)}
/* Abstand als Innenabstand des letzten Absatzes: so kann main.js die Höhe bis 0 animieren */
.faq details>div{color:var(--c-muted);max-width:62ch}
.faq details>div>:last-child{padding-bottom:1.4rem}
.faq details>div p{margin-bottom:.6em}

/* CTA-Band */
.cta{
  position:relative;overflow:hidden;background:var(--c-accent);color:#fff;
  padding-block:clamp(3.5rem,8vw,6rem);
}
.cta::before{content:"";position:absolute;inset:-40% auto auto -10%;width:50vw;max-width:700px;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.18),rgba(255,255,255,0))}
.cta .wrap{position:relative;display:grid;gap:2rem;align-items:center}
@media(min-width:860px){.cta .wrap{grid-template-columns:1.3fr 1fr}}
.cta h2{color:#fff;margin-bottom:.75rem}
.cta p{color:rgba(255,255,255,.88);font-size:var(--fs-3);max-width:50ch}
.cta .btn-row{justify-content:flex-start}
@media(min-width:860px){.cta .btn-row{justify-content:flex-end}}
.cta .btn--light{background:var(--c-pop);color:var(--c-ink)}
.cta .btn--light:hover{background:#FFA452;color:var(--c-ink)}
.cta .btn--light svg{color:var(--c-ink)}

/* Kontakt */
.contact-grid{display:grid;gap:3rem}
@media(min-width:960px){.contact-grid{grid-template-columns:1fr 1.25fr;gap:5rem}}
.contact-info{display:grid;gap:1.5rem;align-content:start}
.contact-info__item{display:flex;gap:1rem;align-items:flex-start}
.contact-info__item svg{width:22px;height:22px;color:var(--c-accent);flex:none;margin-top:.2rem}
.contact-info__item strong{display:block;color:var(--c-ink);margin-bottom:.15rem}
.contact-info__item a{color:var(--c-text);text-decoration:none}
.contact-info__item a:hover{color:var(--c-accent)}
.contact-steps{margin-top:1rem;padding:1.5rem;border-radius:var(--r-l);background:var(--c-paper)}
.contact-steps h3{font-size:1.05rem;margin-bottom:.75rem}
.contact-steps ol{margin:0;padding-left:1.2rem;font-size:var(--fs-1);color:var(--c-muted)}
.contact-steps li{margin-bottom:.35rem}
.contact-steps li::marker{color:var(--c-accent);font-weight:700}

.form{background:#fff;border:1px solid var(--c-line);border-radius:var(--r-l);padding:clamp(1.5rem,4vw,2.5rem);box-shadow:var(--shadow-s)}
.form__row{display:grid;gap:1rem;margin-bottom:1rem}
@media(min-width:640px){.form__row--2{grid-template-columns:1fr 1fr}}
.form label{display:block;font-weight:600;font-size:var(--fs-1);color:var(--c-ink);margin-bottom:.4rem}
.form label .opt{font-weight:400;color:var(--c-muted)}
.form input[type=text],.form input[type=email],.form input[type=tel],.form select,.form textarea{
  width:100%;font:inherit;font-size:var(--fs-2);color:var(--c-ink);background:#fff;
  border:1.5px solid var(--c-line);border-radius:var(--r-m);padding:.8rem 1rem;
  transition:border-color var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);
}
.form textarea{min-height:150px;resize:vertical}
.form select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23646B7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.6rem}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--c-accent);box-shadow:0 0 0 4px rgba(59,10,107,.12)}
.form .check{display:flex;gap:.7rem;align-items:flex-start;font-size:var(--fs-1);color:var(--c-muted);margin:1.25rem 0 1.5rem}
.form .check input{width:18px;height:18px;margin:.2rem 0 0;accent-color:var(--c-accent);flex:none}
.form .check label{font-weight:400;color:var(--c-muted);margin:0}
.form .hp{position:absolute;left:-9999px;top:-9999px;opacity:0;height:0;width:0;overflow:hidden}
.form__note{font-size:var(--fs-0);color:var(--c-muted);margin-top:1rem}
.form__legal{font-size:.78rem;line-height:1.5;color:var(--c-muted);margin-top:.6rem}
/* Cookie-Banner */
/* Paralleles, nicht blockierendes Panel → durchscheinendes Material ohne Abdunklung.
   Heller Rand oben = Licht, das auf die Kante fällt. */
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:1200;max-width:460px;
  background:rgba(255,255,255,.82);-webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px);
  border:1px solid rgba(255,255,255,.7);border-radius:var(--r-l);box-shadow:0 0 0 1px rgba(17,24,39,.06),var(--shadow-l);
  padding:1.2rem 1.4rem 1.25rem;font-size:var(--fs-1);color:var(--c-text);transform-origin:50% 100%;
  animation:consent-in var(--spring-l) var(--spring) both}
.consent.is-leaving{animation:consent-out .22s var(--ease-out) both;pointer-events:none}
.consent[hidden],.consent [hidden]{display:none!important}
.consent__eyebrow{margin:0 0 .35rem;font-weight:700;color:var(--c-accent-text)}
.consent__title{font-family:var(--ff-display);font-weight:700;font-size:1.2rem;line-height:1.2;margin:0 0 .45rem;color:var(--c-ink);letter-spacing:-.01em}
.consent p{margin:0 0 .9rem;color:#3F4656;line-height:1.5}
.consent__opts{display:grid;gap:.6rem;margin:0 0 1rem;padding:.85rem 1rem;background:var(--c-paper);border-radius:var(--r-m)}
.consent__opt{display:flex;gap:.7rem;align-items:flex-start;font-size:var(--fs-0);line-height:1.45;letter-spacing:var(--track-0);color:#4A5161;cursor:pointer}
.consent__opt input{margin:.15rem 0 0;accent-color:var(--c-accent);width:16px;height:16px;flex:none}
.consent__opt b{display:block;color:var(--c-ink);font-weight:600}
.consent__actions{display:flex;flex-wrap:wrap;gap:.5rem}
.consent__actions .btn{padding:.72rem 1.1rem;font-size:var(--fs-0);min-width:0;flex:1 1 auto}
.consent__links{margin:.85rem 0 0!important;font-size:.75rem;letter-spacing:.01em;color:#4A5161!important}
.consent__links a,.consent__links button{color:inherit;text-decoration:underline;margin-right:.9rem;background:none;border:0;padding:0;font:inherit;cursor:pointer}
.consent__links a:hover,.consent__links button:hover{color:var(--c-ink)}
@media (min-width:640px){.consent{left:24px;bottom:24px;right:auto}.consent__actions .btn{flex:0 0 auto}}
/* „Materialisieren“ statt nur einblenden: Unschärfe und Größe kommen gemeinsam an */
@keyframes consent-in{from{opacity:0;transform:translateY(16px) scale(.96);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes consent-out{to{opacity:0;transform:translateY(16px) scale(.96);filter:blur(6px)}}
@media (prefers-reduced-motion:reduce){.consent{animation:none}}
.form__legal a{color:inherit;text-decoration:underline}
.form .btn{min-width:200px}
.form .btn[disabled]{opacity:.65;cursor:progress;transform:none}
.grecaptcha-badge{visibility:hidden}
.notice{padding:1rem 1.25rem;border-radius:var(--r-m);margin-bottom:1.5rem;font-size:var(--fs-1);border:1px solid}
.notice--ok{background:#EAF6EF;border-color:#BFE3CE;color:#155A38}
.notice--error{background:#FDECEC;border-color:#F3C4C4;color:#8A1F1F}

/* Über mich */
.about{display:grid;gap:3rem;align-items:start}
@media(min-width:960px){.about{grid-template-columns:.9fr 1.1fr;gap:5rem}}
.about__media{position:relative}
.about__media img{border-radius:var(--r-xl);aspect-ratio:4/5;object-fit:cover;width:100%}
.about__placeholder{aspect-ratio:4/5;border-radius:var(--r-xl);background:linear-gradient(160deg,var(--c-paper-2),var(--c-paper));display:grid;place-items:center;text-align:center;padding:2rem;color:var(--c-muted);font-size:var(--fs-1);border:1.5px dashed var(--c-line)}
.about__facts{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:.75rem}
.about__facts li{display:flex;gap:.75rem;align-items:flex-start;padding:1rem 1.1rem;border:1px solid var(--c-line);border-radius:var(--r-m);background:#fff;font-size:var(--fs-1)}
.about__facts svg{width:20px;height:20px;color:var(--c-accent);flex:none;margin-top:.1rem}
.about__facts strong{color:var(--c-ink)}
@media(min-width:960px){.about__sticky{position:sticky;top:calc(var(--header-h) + 2rem)}}
.about .prose h3{margin-top:2rem}

/* Vergleichstabelle (Leistungen) */
.compare{width:100%;border-collapse:collapse;font-size:var(--fs-1);background:#fff;border:1px solid var(--c-line);border-radius:var(--r-l);overflow:hidden}
.compare-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-l)}
.compare th,.compare td{padding:.9rem 1.1rem;text-align:left;border-bottom:1px solid var(--c-line);vertical-align:top}
.compare th{font-family:var(--ff-display);font-weight:600;color:var(--c-ink);background:var(--c-paper);font-size:1rem}
.compare tbody tr:last-child td{border-bottom:0}
.compare td:first-child{font-weight:600;color:var(--c-ink)}
.compare svg{width:18px;height:18px;color:var(--c-ok)}
.compare .no{color:var(--c-muted-2)}

/* Nicht-im-Angebot / Hinweisbox */
.callout{display:grid;gap:1.25rem;padding:clamp(1.5rem,4vw,2.25rem);border-radius:var(--r-l);background:var(--c-paper);border:1px solid var(--c-line)}
@media(min-width:860px){.callout{grid-template-columns:1fr 1fr;gap:2.5rem}}
.callout h3{font-size:1.2rem;margin-bottom:.5rem}
.callout ul{margin:0;padding-left:1.2rem;color:var(--c-muted);font-size:var(--fs-1)}
.callout li{margin-bottom:.35rem}

/* Seitenkopf für Unterseiten */
.page-head{background:var(--c-paper);padding-block:clamp(3rem,7vw,5.5rem) clamp(2.5rem,6vw,4.5rem);position:relative;overflow:hidden}
.page-head::before{content:"";position:absolute;inset:auto -10% -60% auto;width:50vw;max-width:700px;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(59,10,107,.12),rgba(59,10,107,0));pointer-events:none}
.page-head .wrap{position:relative;max-width:var(--wrap)}
.page-head h1{max-width:18ch;margin-bottom:1rem}
.page-head .lead{max-width:60ch}
.breadcrumb{display:flex;gap:.5rem;flex-wrap:wrap;list-style:none;margin:0 0 1.5rem;padding:0;font-size:var(--fs-0);color:var(--c-muted)}
.breadcrumb a{color:var(--c-muted);text-decoration:none}
.breadcrumb a:hover{color:var(--c-accent)}
.breadcrumb li+li::before{content:"/";margin-right:.5rem;color:var(--c-line)}

/* ---------- 9. Footer ---------- */
.site-footer{background:var(--c-ink);color:#B7BAC3;padding-block:clamp(3rem,6vw,4.5rem) 2rem;font-size:var(--fs-1)}
.site-footer a{color:#D6D8DE;text-decoration:none}
.site-footer a:hover{color:#fff}
.footer-grid{display:grid;gap:2.5rem;padding-bottom:2.5rem;border-bottom:1px solid var(--c-line-dark)}
@media(min-width:640px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.footer-grid{grid-template-columns:1.6fr 1fr 1fr 1.2fr}}
.footer-brand .brand{color:#fff}
.footer-brand .brand__sub{color:#9DA1AC}
.footer-brand p{margin-top:1rem;max-width:36ch;color:#9DA1AC}
.site-footer h4{color:#fff;margin-bottom:1rem}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:.5rem}
.footer-bottom{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:space-between;align-items:center;padding-top:1.5rem;font-size:var(--fs-0);color:#8A909D}
.footer-bottom ul{display:flex;gap:1.25rem;flex-wrap:wrap}
.footer-bottom li{margin:0}
.footer-note{margin-top:1.5rem;font-size:var(--fs-0);color:#9AA0AC;max-width:var(--measure)}

/* ---------- 10. Inhaltsseiten / WordPress ---------- */
.prose{max-width:var(--wrap-narrow)}
.prose>*+*{margin-top:1.1em}
.prose h2{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.1rem);margin-top:2em}
.prose h3{margin-top:1.6em}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{margin-bottom:.35em}
.prose blockquote{margin:1.5em 0;padding:1rem 1.5rem;border-left:3px solid var(--c-accent);background:var(--c-paper);border-radius:0 var(--r-m) var(--r-m) 0;font-style:italic}
.prose img{border-radius:var(--r-m)}
.prose figure{margin:1.5em 0}
.prose figcaption{font-size:var(--fs-0);color:var(--c-muted);margin-top:.5em}
.prose table{width:100%;border-collapse:collapse;font-size:var(--fs-1)}
.prose th,.prose td{padding:.7rem .9rem;border-bottom:1px solid var(--c-line);text-align:left}
.prose th{background:var(--c-paper);color:var(--c-ink)}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;background:var(--c-paper);padding:.1em .35em;border-radius:4px}
.prose pre{background:var(--c-ink);color:#E8E6E0;padding:1.25rem;border-radius:var(--r-m);overflow:auto;font-size:.9em}
.prose pre code{background:none;padding:0;color:inherit}
.prose .wp-block-buttons .wp-block-button__link{border-radius:999px;background:var(--c-accent);color:#fff;font-weight:600}
.alignwide{max-width:var(--wrap);margin-inline:auto}
.alignfull{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw)}
.aligncenter{margin-inline:auto}
.alignleft{float:left;margin:.5rem 1.5rem 1rem 0}
.alignright{float:right;margin:.5rem 0 1rem 1.5rem}
.wp-caption{max-width:100%}
.wp-caption-text{font-size:var(--fs-0);color:var(--c-muted);margin-top:.5em}
.sticky{}
.bypostauthor{}
.gallery-caption{}

.post-list{display:grid;gap:var(--gap)}
@media(min-width:640px){.post-list{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.post-list{grid-template-columns:repeat(3,1fr)}}
.post-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--c-line);border-radius:var(--r-l);overflow:hidden;transition:transform var(--spring-m) var(--spring),box-shadow var(--dur-card) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-m)}
}
.post-card__media{aspect-ratio:16/10;background:var(--c-paper-2)}
.post-card__media img{width:100%;height:100%;object-fit:cover}
.post-card__body{padding:1.25rem 1.35rem 1.4rem;display:flex;flex-direction:column;flex:1}
.post-card__meta{font-size:var(--fs-0);color:var(--c-muted);margin-bottom:.5rem}
.post-card h2{font-size:1.25rem;margin-bottom:.4rem}
.post-card h2 a{color:var(--c-ink);text-decoration:none}
.post-card h2 a:hover{color:var(--c-accent)}
.post-card p{font-size:var(--fs-1);color:var(--c-muted)}
.post-card .link-arrow{margin-top:auto;padding-top:1rem;font-size:var(--fs-1)}
.entry-meta{font-size:var(--fs-1);color:var(--c-muted);margin-bottom:1.5rem}
.pagination{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-top:3rem}
.pagination .page-numbers{display:inline-grid;place-items:center;min-width:42px;height:42px;padding-inline:.75rem;border-radius:999px;border:1.5px solid var(--c-line);text-decoration:none;color:var(--c-ink);font-weight:600;font-size:var(--fs-1)}
.pagination .page-numbers.current,.pagination .page-numbers:hover{background:var(--c-ink);border-color:var(--c-ink);color:#fff}
/* 404 – das Lorento-Maskottchen sucht mit der Lupe (ab 1.1.1) */
.error-page{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(3rem,7vw,6rem)}
.error-page__wrap{display:grid;gap:2rem;align-items:center;text-align:center}
.error-page h1{margin-bottom:1rem}
.error-page .lead{max-width:48ch;margin-inline:auto}
.error-page .btn-row{justify-content:center;margin-top:2rem}
.error-page__links{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1.6rem;margin:2rem 0 0;padding:0;list-style:none}
.error-page__figur{position:relative;order:-1;justify-self:center;width:min(38vw,150px)}
.error-page__figur::before{content:"";position:absolute;z-index:-1;left:50%;top:46%;width:170%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(59,10,107,.13),rgba(59,10,107,0))}
.error-page__figur::after{content:"";position:absolute;z-index:-1;left:14%;right:14%;bottom:-2%;height:5%;border-radius:50%;background:radial-gradient(closest-side,rgba(20,23,31,.2),rgba(20,23,31,0))}
.error-page__figur img{display:block;width:100%;height:auto;animation:lupe-suchen 6s var(--ease-in-out) infinite}
@keyframes lupe-suchen{0%,100%{transform:none}50%{transform:translateY(-6px) rotate(-1.5deg)}}
@media (prefers-reduced-motion:reduce){.error-page__figur img{animation:none}}
@media(min-width:900px){
  .error-page__wrap{grid-template-columns:1.3fr .7fr;gap:4rem;text-align:left}
  .error-page .lead{margin-inline:0}
  .error-page .btn-row,.error-page__links{justify-content:flex-start}
  .error-page__figur{order:0;width:min(100%,290px)}
}

/* ---------- 11. Animationen ---------- */
.js .reveal{opacity:0;transform:translateY(12px);transition:opacity .42s var(--ease-out),transform var(--spring-l) var(--spring)}
.js .reveal.is-visible{opacity:1;transform:none}
.js .reveal[data-delay="1"]{transition-delay:.05s}
.js .reveal[data-delay="2"]{transition-delay:.10s}
.js .reveal[data-delay="3"]{transition-delay:.15s}
.js .reveal[data-delay="4"]{transition-delay:.20s}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}
  /* Bewegung entfaellt, weiche Farb-/Opazitaetswechsel bleiben verstaendlich */
  *,*::before,*::after{transition-property:opacity,color,background-color,border-color,box-shadow!important;transition-duration:.15s!important}
  .js .reveal{opacity:1;transform:none;transition:none}
}
@media print{
  .site-header,.nav-mobile,.cta,.site-footer .footer-grid{display:none}
  body{color:#000}
  a{color:#000;text-decoration:underline}
}

/* ---------- Ergänzungen ---------- */
a.situation__tag{text-decoration:none;transition:background var(--dur-fast) ease,color var(--dur-fast) ease}
a.situation__tag:hover{background:var(--c-accent);color:#fff}
.cta .cta__mail{color:#fff;border-color:rgba(255,255,255,.45)}
.cta .cta__mail:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.nav-primary ul,.nav-mobile ul{list-style:none;margin:0;padding:0}
.nav-mobile ul{margin-bottom:1rem}
.site-footer .footer-bottom ul{display:flex;gap:1.25rem;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.trust__item div{min-width:0}
.hero__figure{margin-top:.5rem}
@media(max-width:959px){.hero__figure{max-width:560px;margin-inline:auto}.mock{transform:none}}
.page-head .eyebrow{margin-bottom:.9rem}
.compare th:first-child{width:38%}

/* ---------- 12. Multipage: Navigation mit Untermenü ---------- */
.nav-primary li{position:relative}
.nav-primary .menu-item-has-children>a{padding-right:1.6rem}
.nav-primary .menu-item-has-children>a::after{
  content:"";position:absolute;right:.75rem;top:50%;width:6px;height:6px;margin-top:-5px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);opacity:.6;
}
.nav-primary .sub-menu{
  position:absolute;left:0;top:calc(100% + .5rem);min-width:240px;padding:.5rem;margin:0;list-style:none;
  background:rgba(255,255,255,.84);-webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px);
  border:1px solid rgba(17,24,39,.08);border-radius:var(--r-m);box-shadow:var(--shadow-m);
  display:flex;flex-direction:column;gap:.1rem;
  transform-origin:top left;
  opacity:0;visibility:hidden;transform:translateY(-6px) scale(.97);filter:blur(4px);
  transition:opacity var(--dur-pop) var(--ease-out),transform var(--spring-m) var(--spring),filter var(--dur-pop) var(--ease-out),visibility var(--dur-pop);
}
.nav-primary .sub-menu::before{content:"";position:absolute;left:0;right:0;top:-.6rem;height:.6rem}
.nav-primary li:hover>.sub-menu,.nav-primary li:focus-within>.sub-menu,.nav-primary li.is-open>.sub-menu{opacity:1;visibility:visible;transform:none;filter:none}
.nav-primary .sub-menu a{display:block;border-radius:8px;padding:.6rem .8rem;white-space:nowrap}
.nav-mobile .sub-menu{list-style:none;margin:0 0 .5rem;padding:0 0 0 1rem;border-left:2px solid var(--c-line)}
.nav-mobile .sub-menu a{font-family:var(--ff-body);font-weight:500;font-size:1rem;padding:.6rem 0;border-bottom:0;color:var(--c-text)}
/* Trennlinien zwischen den Einträgen statt unter den Links – sonst biegt sich die
   Linie mit der runden Hover-Fläche mit. */
.nav-mobile>ul>li+li{border-top:1px solid var(--c-line)}

/* Buttons: Orange Pop (auf Violett/Ink) */
.btn--pop{background:var(--c-pop);color:var(--c-ink);box-shadow:0 6px 18px rgba(255,144,48,.3)}
@media (hover:hover) and (pointer:fine){
  .btn--pop:hover{background:#FFA452;color:var(--c-ink);transform:translateY(-1px)}
}
.btn--pop svg{color:var(--c-ink)}
.service--featured .btn--pop{box-shadow:none}
.service__link{color:inherit;text-decoration:none}
.service__link:hover{color:var(--c-pop)}
.service--featured h3 a{color:#fff}
.service__actions{margin-top:auto}

/* Leistungs-Detailseite */
.service-hero{display:grid;gap:2.5rem;align-items:start}
@media(min-width:960px){.service-hero{grid-template-columns:1.25fr .75fr;gap:4rem}}
.page-head--service h1{max-width:16ch}
.price-card{background:#fff;border:1px solid var(--c-line);border-radius:var(--r-l);padding:1.75rem;box-shadow:var(--shadow-m);position:relative}
.price-card::before{content:"";position:absolute;inset:0 auto auto 0;width:100%;height:6px;border-radius:var(--r-l) var(--r-l) 0 0;background:linear-gradient(90deg,var(--c-accent),var(--c-pop))}
.price-card__kind{color:var(--c-muted);margin-bottom:.4rem}
.price-card__price{font-family:var(--ff-display);font-weight:700;font-size:clamp(2.4rem,2rem + 2vw,3.4rem);letter-spacing:-.03em;line-height:1;color:var(--c-ink);margin-bottom:1.25rem}
.price-card__facts{margin:0;display:grid;gap:.6rem}
.price-card__facts div{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-top:1px solid var(--c-line);font-size:var(--fs-1)}
.price-card__facts dt{color:var(--c-muted)}
.price-card__facts dd{margin:0;font-weight:600;color:var(--c-ink);text-align:right}
.price-card__note{display:flex;gap:.5rem;align-items:center;margin-top:1.25rem;padding:.6rem .85rem;border-radius:999px;background:var(--c-pop-soft);font-size:var(--fs-0);font-weight:600;color:var(--c-ink)}
.price-card__note i{width:8px;height:8px;border-radius:50%;background:var(--c-pop);flex:none}
.detail-grid{display:grid;gap:2.5rem;align-items:start}
@media(min-width:960px){.detail-grid{grid-template-columns:1fr 1fr;gap:4rem}}
.detail-list{list-style:none;margin:0;padding:0;counter-reset:dl}
.detail-list li{counter-increment:dl;display:flex;gap:1rem;align-items:flex-start;padding:.9rem 0;border-top:1px solid var(--c-line);font-size:var(--fs-2);color:var(--c-ink)}
.detail-list li:last-child{border-bottom:1px solid var(--c-line)}
.detail-list li::before{content:counter(dl,decimal-leading-zero);font-family:var(--ff-display);font-weight:700;color:var(--c-accent);font-size:.9rem;min-width:2ch;margin-top:.25rem}
.callout--stack{grid-template-columns:1fr;background:#fff}
.check-list{list-style:none;margin:0;padding:0}
.check-list li{display:flex;gap:.6rem;align-items:flex-start;padding:.35rem 0;font-size:var(--fs-1);color:var(--c-text)}
.check-list svg{width:18px;height:18px;flex:none;margin-top:.15rem;color:var(--c-accent)}

/* Ablauf-Teaser (Startseite) */
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:.75rem;position:relative}
@media(min-width:640px){.timeline{grid-template-columns:repeat(3,1fr)}}
@media(min-width:960px){.timeline{grid-template-columns:repeat(6,1fr)}}
.timeline li{display:flex;align-items:center;gap:.75rem;padding:1rem 1.1rem;border:1px solid var(--c-line);border-radius:var(--r-m);background:#fff;font-family:var(--ff-display);font-weight:600;color:var(--c-ink);font-size:1.05rem}
.timeline li span{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--c-accent);color:#fff;font-size:.85rem;flex:none}
.timeline li:last-child span{background:var(--c-pop);color:var(--c-ink)}

/* Referenzen-Teaser etc. */
.section--paper .callout{background:#fff}

/* ---------- 13. Mobile Menü: Hover/Aktiv in Orange mit weißer Schrift ---------- */
.nav-mobile>ul>li>a,.nav-mobile .sub-menu a{
  padding-inline:.75rem;margin-inline:-.75rem;border-radius:10px;
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.nav-mobile a:hover,.nav-mobile a:focus-visible,.nav-mobile .current-menu-item>a,.nav-mobile .current_page_item>a,.nav-mobile .current-menu-ancestor>a{
  background:var(--c-pop);color:#fff;border-color:transparent;
}
.nav-mobile .btn--primary:hover,.nav-mobile .btn--primary:focus-visible{background:var(--c-pop);color:#fff;box-shadow:0 8px 20px rgba(255,144,48,.35)}
.nav-mobile .btn--primary:hover svg{color:#fff}
.nav-primary .sub-menu a:hover,.nav-primary .sub-menu .current-menu-item>a{background:var(--c-pop);color:#fff}

/* ---------- 14. Shopify-Touch ---------- */
:root{--c-shopify:#96BF48;--c-shopify-dark:#5E8E3E;--c-shopify-soft:#EEF6E2}
.brand-tag{
  display:inline-flex;align-items:center;gap:.35rem;vertical-align:middle;margin-left:.35rem;
  padding:.2rem .55rem .2rem .45rem;border-radius:999px;font-size:.7rem;font-weight:700;letter-spacing:.02em;text-transform:none;
}
.brand-tag svg{width:14px;height:14px}
.brand-tag--shopify{background:var(--c-shopify-soft);color:var(--c-shopify-dark)}
.service--shopify{border-color:var(--c-shopify);box-shadow:inset 0 4px 0 var(--c-shopify)}
.service--shopify .service__list svg{color:var(--c-shopify-dark)}
.service--shopify .service__price{color:var(--c-shopify-dark)}
.service--shopify .btn--ghost{border-color:var(--c-shopify);color:var(--c-shopify-dark)}
.service--shopify .btn--ghost:hover{background:var(--c-shopify-dark);border-color:var(--c-shopify-dark);color:#fff}
.service--shopify .btn--ghost:hover svg{color:#fff}
.service--shopify .service__link:hover{color:var(--c-shopify-dark)}
.page-head--shopify::before{background:radial-gradient(closest-side,rgba(150,191,72,.28),rgba(150,191,72,0))}
.page-head--shopify .price-card::before{background:linear-gradient(90deg,var(--c-shopify-dark),var(--c-shopify))}
.page-head--shopify .price-card__price{color:var(--c-shopify-dark)}
.page-head--shopify .mark{background:linear-gradient(transparent 62%,var(--c-shopify-soft) 62%)}
.service-hero__aside{display:grid;gap:1.25rem}
.shop-mock{background:#fff;border:1px solid var(--c-line);border-radius:var(--r-l);overflow:hidden;box-shadow:var(--shadow-s);font-size:.72rem}
.shop-mock__bar{display:flex;justify-content:space-between;align-items:center;padding:.65rem .9rem;border-bottom:1px solid var(--c-line);background:#FAFBF7}
.shop-mock__logo{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--ff-display);font-weight:700;font-size:.85rem;color:var(--c-shopify-dark)}
.shop-mock__logo svg{width:16px;height:16px}
.shop-mock__cart{font-weight:600;color:var(--c-muted)}
.shop-mock__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;padding:.9rem}
.shop-mock__item{display:grid;gap:.35rem}
.shop-mock__img{display:block;aspect-ratio:1;border-radius:8px;background:linear-gradient(145deg,#E3E6EE,#F6F7FA)}
.shop-mock__img--2{background:linear-gradient(145deg,#DCE9C3,#EEF6E2)}
.shop-mock__img--3{background:linear-gradient(145deg,#EFE7F9,#F6F7FA)}
.shop-mock__item b{display:block;height:6px;width:70%;border-radius:3px;background:var(--c-line)}
.shop-mock__item span{font-weight:700;color:var(--c-ink)}
.shop-mock__item em{font-style:normal;display:block;text-align:center;padding:.3rem .4rem;border-radius:6px;background:var(--c-shopify-dark);color:#fff;font-weight:600;font-size:.62rem}
.shop-mock__foot{display:flex;justify-content:space-between;padding:.6rem .9rem;border-top:1px solid var(--c-line);color:var(--c-muted);background:#FAFBF7}

/* ---------- 15. Ablauf: scroll-gesteuerte Zeitleiste ---------- */
.journey{--journey-progress:0%;background:var(--c-white)}
.journey__grid{display:grid;gap:2.5rem;align-items:start}
@media(min-width:960px){.journey__grid{grid-template-columns:.8fr 1.2fr;gap:5rem}}
.journey__sticky{position:sticky;top:calc(var(--header-h) + 1.5rem)}
.journey__counter{display:flex;align-items:baseline;gap:.35rem;margin:0;font-family:var(--ff-display);font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--c-ink)}
.journey__num{display:inline-block;font-size:clamp(4rem,3rem + 6vw,8.5rem);color:var(--c-accent);transition:opacity var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out),filter var(--dur-fast) ease}
/* Blur ueberbrueckt den Crossfade: das Auge sieht eine Zahl, nicht zwei */
.journey__num.is-changing{opacity:0;transform:translateY(-.15em);filter:blur(4px)}
.journey__of{font-size:clamp(1.25rem,1rem + 1vw,1.75rem);color:var(--c-muted-2)}
.journey__current{font-family:var(--ff-display);font-weight:700;font-size:clamp(1.5rem,1.2rem + 1.4vw,2.2rem);letter-spacing:-.02em;color:var(--c-ink);margin:.25rem 0 1.25rem;min-height:1.2em}
.journey__bar{height:6px;border-radius:999px;background:var(--c-paper-2);overflow:hidden;max-width:320px}
/* Folgt der Scrollposition 1:1 – eine Transition würde hinterherziehen */
.journey__bar i{display:block;height:100%;width:var(--journey-progress);border-radius:999px;background:linear-gradient(90deg,var(--c-accent),var(--c-pop))}
.journey__hint{margin-top:1.25rem;font-size:var(--fs-1);color:var(--c-muted);max-width:32ch}
.journey__list{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:clamp(1.5rem,4vw,3rem)}
.journey__list::before,.journey__list::after{content:"";position:absolute;left:19px;top:20px;bottom:20px;width:2px;border-radius:2px}
.journey__list::before{background:var(--c-line)}
.journey__list::after{background:linear-gradient(180deg,var(--c-accent),var(--c-pop));height:calc(var(--journey-progress) * 1);bottom:auto;max-height:calc(100% - 40px)}
.journey__step{position:relative;display:grid;grid-template-columns:40px 1fr;gap:1.25rem;align-items:start}
.journey__rail{position:relative;z-index:1}
.journey__dot{
  display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;border:2px solid var(--c-line);
  font-family:var(--ff-display);font-weight:700;font-size:.95rem;color:var(--c-muted);
  transition:background var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out),transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);
}
.journey__step.is-visible .journey__dot{border-color:var(--c-accent);color:var(--c-accent)}
.journey__step.is-current .journey__dot{background:var(--c-pop);border-color:var(--c-pop);color:var(--c-ink);transform:scale(1.12);box-shadow:0 0 0 8px rgba(255,144,48,.18)}
.journey__card{
  background:#fff;border:1px solid var(--c-line);border-radius:var(--r-l);padding:1.5rem 1.6rem;
  transition:transform var(--spring-l) var(--spring),opacity .42s var(--ease-out),box-shadow var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out);
}
.js .journey__step .journey__card{opacity:.35;transform:translateY(24px) scale(.985)}
.js .journey__step.is-visible .journey__card{opacity:1;transform:none}
.journey__step.is-current .journey__card{box-shadow:var(--shadow-m);border-color:transparent}
.journey__time{display:inline-block;margin-bottom:.75rem;padding:.3rem .7rem;border-radius:999px;background:var(--c-paper);font-size:var(--fs-0);font-weight:600;color:var(--c-ink)}
.journey__step.is-current .journey__time{background:var(--c-pop-soft)}
.journey__card h3{font-size:1.35rem;margin-bottom:.4rem}
.journey__card p{color:var(--c-muted);font-size:var(--fs-1)}
.journey__facts{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}
.journey__facts li{display:inline-flex;gap:.4rem;align-items:center;font-size:var(--fs-0);font-weight:600;color:var(--c-ink)}
.journey__facts svg{width:16px;height:16px;color:var(--c-accent)}
@media(max-width:959px){
  .journey__side{position:sticky;top:var(--header-h);z-index:5;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);margin-inline:calc(var(--pad) * -1);padding:.75rem var(--pad);box-shadow:0 12px 16px -14px rgba(17,24,39,.35)}
  .journey__sticky{position:static;display:grid;grid-template-columns:auto 1fr;gap:.25rem 1rem;align-items:center}
  .journey__sticky .eyebrow{grid-column:1/-1;margin-bottom:0}
  .journey__num{font-size:2.4rem}
  .journey__of{font-size:1rem}
  .journey__current{margin:0;font-size:1.25rem;min-height:0}
  .journey__bar{grid-column:1/-1;max-width:none;height:4px}
  .journey__hint{display:none}
}
@media(prefers-reduced-motion:reduce){
  .js .journey__step .journey__card{opacity:1;transform:none}
  .journey__num.is-changing{opacity:1;transform:none}
}

/* Mobile Menü: Button-Styles gewinnen gegen die Link-Regeln des Menüs */
.nav-mobile a.btn{
  display:inline-flex;justify-content:center;align-items:center;width:100%;
  font-family:var(--ff-body);font-size:var(--fs-2);font-weight:600;
  padding:1rem 1.5rem;margin:1rem 0 0;border-bottom:0;border-radius:999px;color:#fff;
}
.nav-mobile a.btn--primary{background:var(--c-accent);color:#fff}
.nav-mobile a.btn--primary:hover,.nav-mobile a.btn--primary:focus-visible{background:var(--c-pop);color:#fff}
.nav-mobile a.btn svg{color:#fff}

/* ---------- 16. Ablauf-Zähler: Sticky braucht eine gestreckte Spalte ---------- */
@media(min-width:960px){
  .journey__grid{align-items:stretch}
  .journey__side{align-self:stretch}
  .journey__sticky{position:sticky;top:calc(var(--header-h) + 2rem)}
}

/* ---------- 17. Mehr Farbe: getönte Flächen, Icons, Karten ---------- */
:root{--c-tint:#F5F1FB;--c-tint-2:#EDE6F8}
.section--tint{background:var(--c-tint)}
.section--paper{background:linear-gradient(180deg,var(--c-tint) 0%,var(--c-paper) 100%)}
.trust{background:#fff;border-block:1px solid var(--c-line)}
.trust__item svg{width:44px;height:44px;padding:11px;border-radius:12px;background:var(--c-accent-soft);color:var(--c-accent);margin-top:0}
.trust__item:nth-child(2) svg{background:var(--c-pop-soft);color:var(--c-pop-dark)}
.trust__item:nth-child(4) svg{background:var(--c-shopify-soft);color:var(--c-shopify-dark)}
.service__kind{color:var(--c-accent)}
.service--featured .service__kind{color:#D9CCEB}
.eyebrow--dark{color:var(--c-ink)}

/* Aktionsleiste */
.announce{background:var(--c-accent);color:#fff;font-size:var(--fs-1)}
.announce .wrap{display:flex;align-items:center;gap:1rem;min-height:44px}
.announce__link{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;flex:1;padding:.5rem 0;color:#fff;text-decoration:none}
.announce__link:hover{color:#fff}
.announce__tag{display:inline-block;padding:.2rem .6rem;border-radius:999px;background:var(--c-pop);color:var(--c-ink);font-weight:700}
.announce__text strong{color:#FFC48A;font-weight:700}
.announce__more{display:inline-flex;align-items:center;gap:.3rem;font-weight:600;opacity:.9;margin-left:auto}
.announce__more svg{width:16px;height:16px}
.announce__link:hover .announce__more{text-decoration:underline}
.announce__close{width:44px;height:44px;margin-right:-6px;border-radius:50%;color:#fff;font-size:1.3rem;line-height:1;opacity:.75;flex:none;transition:transform var(--spring-m) var(--spring),opacity var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out)}
.announce__close:active{transform:scale(.88);transition-duration:var(--press-in)}
.announce__close:hover{opacity:1;background:rgba(255,255,255,.14)}
.announce.is-hidden{display:none}
@media(max-width:639px){.announce__more{display:none}.announce__text{font-size:var(--fs-0)}}

/* Laufband */
.marquee{overflow:hidden;background:var(--c-ink);color:#fff;padding:.9rem 0;border-block:1px solid var(--c-line-dark)}
.marquee__track{display:flex;align-items:center;gap:1.5rem;width:max-content;animation:marquee 32s linear infinite;font-family:var(--ff-display);font-weight:600;font-size:1.05rem;letter-spacing:-.01em;white-space:nowrap}
.marquee__track i{width:8px;height:8px;border-radius:50%;background:var(--c-pop);flex:none}
@media (hover:hover) and (pointer:fine){
  .marquee:hover .marquee__track{animation-play-state:paused}
}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee__track{animation:none;flex-wrap:wrap;width:auto;gap:.75rem 1.5rem}}

/* Hero: Parallax-Formen, Foto-Ebene, Sticker */
.hero{background:linear-gradient(160deg,var(--c-tint) 0%,var(--c-paper) 55%,#fff 100%)}
.hero::before{display:none}
.hero__blob{position:absolute;border-radius:50%;pointer-events:none;filter:blur(2px);will-change:transform}
.hero__blob--1{width:44vw;max-width:620px;aspect-ratio:1;right:-12%;top:-30%;background:radial-gradient(closest-side,rgba(59,10,107,.22),rgba(59,10,107,0))}
.hero__blob--2{width:30vw;max-width:420px;aspect-ratio:1;left:-10%;bottom:-25%;background:radial-gradient(closest-side,rgba(255,144,48,.3),rgba(255,144,48,0))}
.hero__blob--3{width:14vw;max-width:180px;aspect-ratio:1;left:48%;top:8%;background:radial-gradient(closest-side,rgba(255,144,48,.35),rgba(255,144,48,0))}
.hero__figure{position:relative;padding:2rem 0 2.5rem 2.5rem}
.hero__photo{position:absolute;left:0;top:0;width:58%;aspect-ratio:4/3;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-m);transform:rotate(-4deg);border:6px solid #fff;will-change:transform}
.hero__photo img{width:100%;height:100%;object-fit:cover}
.hero__figure .mock{position:relative;margin-left:auto;width:86%;transform:none;will-change:transform}
.hero__price-note{z-index:2;left:auto;right:0;top:.25rem}
.hero__sticker{
  position:absolute;left:-.5rem;bottom:.5rem;z-index:3;width:118px;height:118px;border-radius:50%;
  background:var(--c-pop);color:var(--c-ink);text-decoration:none;display:grid;place-content:center;text-align:center;
  font-size:.7rem;font-weight:600;line-height:1.25;transform:rotate(-8deg);box-shadow:0 12px 30px rgba(255,144,48,.45);
  transition:transform var(--dur) var(--ease-out);will-change:transform;
}
.hero__sticker b{display:block;font-family:var(--ff-display);font-size:1.15rem;line-height:1.1;letter-spacing:.04em;text-transform:uppercase}
@media (hover:hover) and (pointer:fine){
  .hero__sticker:hover{transform:rotate(-2deg) scale(1.05);color:var(--c-ink)}
}
@media(max-width:959px){.hero__figure{padding-left:1.5rem;padding-top:2.5rem}.hero__photo{width:60%;top:.5rem}.hero__sticker{width:100px;height:100px;left:0}}

/* Ausgangslagen mit Foto */
.situation--photo{padding:0;overflow:hidden;display:flex;flex-direction:column}
.situation__media{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--c-tint-2)}
.situation__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .situation--photo:hover .situation__media img{transform:scale(1.05)}
}
.situation__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,24,39,0) 50%,rgba(17,24,39,.45) 100%)}
.situation__branch{position:absolute;left:1rem;bottom:1rem;z-index:1;padding:.3rem .7rem;border-radius:999px;background:rgba(255,255,255,.92);font-size:var(--fs-0);font-weight:700;color:var(--c-ink)}
.situation--photo .situation__num{position:absolute;right:1rem;top:1rem;z-index:1;margin:0;width:38px;height:38px;border-radius:50%;background:var(--c-pop);color:var(--c-ink);display:grid;place-items:center;font-size:.85rem}
.situation__body{padding:1.5rem 1.5rem 1.6rem;display:flex;flex-direction:column;flex:1}
.situation__body .situation__tag{margin-top:auto;align-self:flex-start;padding-top:.35rem}
.situation__body p{margin-bottom:1rem}

/* Warum: Foto-Hintergrund mit Violett-Duotone */
.why{position:relative;overflow:hidden;background:var(--c-accent-dark)}
.why__bg{position:absolute;inset:-15% 0;z-index:0;pointer-events:none}
.why__bg img{width:100%;height:100%;object-fit:cover;opacity:.22;filter:grayscale(1) contrast(1.1);will-change:transform}
.why__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(42,6,80,.92) 0%,rgba(59,10,107,.78) 55%,rgba(17,24,39,.9) 100%)}
.why .wrap{position:relative;z-index:1}
.why__item{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.why .quote{background:rgba(0,0,0,.18)}

/* Aktionsblock */
.aktion{position:relative;overflow:hidden;background:var(--c-pop);color:var(--c-ink);padding-block:clamp(3.5rem,8vw,6.5rem)}
.aktion__shape{position:absolute;border-radius:50%;pointer-events:none;will-change:transform}
.aktion__shape--1{width:52vw;max-width:760px;aspect-ratio:1;right:-18%;top:-40%;background:radial-gradient(closest-side,rgba(255,255,255,.35),rgba(255,255,255,0))}
.aktion__shape--2{width:34vw;max-width:460px;aspect-ratio:1;left:-12%;bottom:-40%;background:radial-gradient(closest-side,rgba(59,10,107,.22),rgba(59,10,107,0))}
.aktion__grid{position:relative;display:grid;gap:2.5rem;align-items:center}
@media(min-width:960px){.aktion__grid{grid-template-columns:.9fr 1.1fr;gap:4.5rem}}
.aktion__media{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:0 30px 70px rgba(17,24,39,.28);transform:rotate(-2deg);border:8px solid #fff;aspect-ratio:4/3}
.aktion__media img{width:100%;height:110%;object-fit:cover;will-change:transform}
.aktion__sticker{position:absolute;right:-.25rem;bottom:-.25rem;width:112px;height:112px;border-radius:50%;background:var(--c-accent);color:#fff;display:grid;place-content:center;text-align:center;font-size:.75rem;font-weight:600;line-height:1.1;transform:rotate(6deg);box-shadow:var(--shadow-m)}
.aktion__sticker b{display:block;font-family:var(--ff-display);font-size:2.4rem;color:var(--c-pop);letter-spacing:-.03em;line-height:1}
.aktion h2{color:var(--c-ink);margin-bottom:1rem}
.aktion__text{font-size:var(--fs-3);max-width:56ch;color:rgba(17,24,39,.85);margin-bottom:1.5rem;text-wrap:pretty}
.aktion__cols{display:grid;gap:1.25rem;margin-bottom:1.75rem}
@media(min-width:640px){.aktion__cols{grid-template-columns:1fr 1fr}}
.aktion__cols>div{background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.7);border-radius:var(--r-l);padding:1.1rem 1.25rem}
.aktion__cols h3{font-size:1rem;margin-bottom:.5rem;letter-spacing:.02em}
.aktion .check-list li{color:var(--c-ink)}
.aktion .check-list svg{color:var(--c-accent)}
.aktion .link-arrow{color:var(--c-ink)}
.aktion .link-arrow:hover{color:var(--c-accent)}
.aktion .btn--dark:hover{background:var(--c-accent)}

/* ---------- 18. Showcase: Laptop klappt beim Scrollen auf ---------- */
.showcase{position:relative;height:230vh;background:linear-gradient(180deg,#fff 0%,var(--c-tint) 100%)}
.showcase__sticky{position:sticky;top:var(--header-h);height:calc(100vh - var(--header-h));display:grid;align-items:center;overflow:hidden}
.showcase__head{text-align:center;max-width:720px;margin:0 auto 1.5rem}
.showcase__head h2{margin-bottom:0}
.laptop{--open:1;position:relative;width:min(760px,92%);margin:0 auto;perspective:1800px;perspective-origin:50% 30%}
.laptop__lid{
  position:relative;aspect-ratio:16/10;border-radius:16px 16px 4px 4px;background:#0F1420;padding:14px 14px 10px;
  transform-origin:50% 100%;transform:rotateX(calc((1 - var(--open)) * -88deg));
  box-shadow:0 30px 80px rgba(17,24,39,.35);backface-visibility:hidden;
  /* keine Transition: der Deckel hängt 1:1 an der Scrollposition */
}
.laptop__screen{position:relative;width:100%;height:100%;border-radius:8px;overflow:hidden;background:#fff;opacity:calc(0.15 + var(--open) * 0.85)}
.laptop__screen img{width:100%;height:100%;object-fit:cover;object-position:top}
.laptop__glare{position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.35) 0%,rgba(255,255,255,0) 40%);opacity:calc(var(--open) * .8);pointer-events:none}
.laptop__base{height:18px;border-radius:0 0 14px 14px;background:linear-gradient(180deg,#D7DBE6,#B9BFCC);position:relative;box-shadow:0 8px 24px rgba(17,24,39,.18)}
.laptop__base span{position:absolute;left:50%;top:0;width:120px;height:6px;margin-left:-60px;border-radius:0 0 6px 6px;background:#A5ACBD}
.laptop__shadow{height:14px;margin:0 6%;border-radius:50%;background:radial-gradient(closest-side,rgba(17,24,39,.35),rgba(17,24,39,0));transform:scaleX(calc(.6 + var(--open) * .4))}
/* Beispiel-Webseite im Laptop */
.laptop__site{position:absolute;inset:0;padding:5% 6%;background:#fff;font-size:clamp(.5rem,1.2vw,.8rem)}
.laptop__nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:6%}
.laptop__nav b{font-family:var(--ff-display);font-weight:800;color:var(--c-ink);font-size:1.3em}
.laptop__nav span{display:flex;gap:.5em}
.laptop__nav i{width:3em;height:.55em;border-radius:1em;background:var(--c-line)}
.laptop__nav i:last-child{width:4.5em;background:var(--c-accent)}
.laptop__hero{display:grid;grid-template-columns:1.1fr .9fr;gap:6%;align-items:center;margin-bottom:6%}
.laptop__hero em{display:block;font-style:normal;font-family:var(--ff-display);font-weight:700;font-size:2.6em;line-height:1.05;letter-spacing:-.03em;color:var(--c-ink);margin-bottom:.5em}
.laptop__hero i{display:block;height:.6em;border-radius:1em;background:var(--c-line);margin-bottom:.45em}
.laptop__hero i.l1{width:90%}.laptop__hero i.l2{width:65%}
.laptop__hero u{display:inline-block;text-decoration:none;margin-top:.8em;padding:.5em 1em;border-radius:2em;background:var(--c-pop);color:var(--c-ink);font-weight:700;font-size:.9em}
.laptop__img{aspect-ratio:4/3;border-radius:.8em;background:linear-gradient(135deg,#EFE7F9,#3B0A6B 60%,#22053F);animation:laptopShift 6s ease-in-out infinite alternate}
@keyframes laptopShift{from{background-position:0 0}to{background-position:100% 100%}}
.laptop__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:4%}
.laptop__cards span{display:block;height:5em;border-radius:.8em;border:1px solid var(--c-line);background:linear-gradient(180deg,#fff,#F7F5FB)}
.showcase__captions{position:relative;height:2.2em;margin-top:1.5rem;text-align:center;font-family:var(--ff-display);font-weight:600;font-size:1.15rem;color:var(--c-ink)}
.showcase__caption{position:absolute;inset:0;margin:0;opacity:0;transform:translateY(8px);transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out)}
.showcase__caption.is-on{opacity:1;transform:none}
.showcase__video{width:min(960px,94%);margin:0 auto;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--shadow-l);background:var(--c-tint)}
.showcase__video[hidden]{display:none}
.showcase__video video{width:100%;height:auto;display:block}
/* Laeuft das Video, verschwindet die CSS-Animation – und umgekehrt. */
.showcase.hat-video .laptop{display:none}
@media(max-width:639px){.showcase{height:180vh}.showcase__head h2{font-size:1.5rem}.laptop{perspective:1200px}}
@media(prefers-reduced-motion:reduce){.showcase{height:auto}.showcase__sticky{position:static;height:auto;padding-block:var(--sec)}.laptop{--open:1!important}.laptop__img{animation:none}.showcase__caption{position:static;opacity:1;transform:none}.showcase__captions{height:auto}.showcase__caption:not(:last-child){display:none}}

/* ---------- Social-Links ---------- */
.social{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.social a{display:inline-flex;align-items:center;gap:.45rem;min-height:40px;padding:.45rem .9rem;border-radius:999px;border:1px solid var(--c-line);text-decoration:none;font-size:var(--fs-0);font-weight:600;color:var(--c-ink);transition:background var(--dur-fast) ease,color var(--dur-fast) ease,border-color var(--dur-fast) ease,transform var(--spring-m) var(--spring)}
.social a:active{transform:scale(.95);transition-duration:var(--press-in)}
.social svg{width:16px;height:16px}
.social a:hover{background:var(--c-accent);border-color:var(--c-accent);color:#fff}
.social--footer{margin-top:1rem}
.social--footer a{border-color:var(--c-line-dark);color:#D6D8DE}
.social--footer a:hover{background:var(--c-pop);border-color:var(--c-pop);color:var(--c-ink)}
.social--inline{margin-top:.35rem}

/* ---------- Mobil: keine „klebenden“ Spalten (Bild/Zitat würden den Text überlagern) ---------- */
@media(max-width:959px){
  .why__sticky,.about__sticky{position:static;top:auto}
  .why__sticky{margin-bottom:2rem}
  .about__media{max-width:420px}
}

/* ---------- Persönliche Notiz (ersetzt Icon-Leiste + Laufband) ---------- */
.note{background:#fff;border-block:1px solid var(--c-line)}
.note__grid{display:grid;gap:1.25rem 2.5rem;align-items:center;padding-block:1.75rem}
@media(min-width:900px){.note__grid{grid-template-columns:auto 1fr auto}}
.note__who{display:flex;align-items:center;gap:1rem;min-width:0}
.note__who strong{display:block;font-family:var(--ff-display);font-size:1.15rem;letter-spacing:-.01em;color:var(--c-ink);line-height:1.2}
.note__who span{display:block;font-size:var(--fs-0);color:var(--c-muted);margin-top:.2rem}
.note__photo{width:88px;height:88px;border-radius:50%;object-fit:cover;object-position:top;background:var(--c-paper);border:3px solid #fff;box-shadow:0 0 0 2px var(--c-pop);flex:none}
.note__text{margin:0;font-size:var(--fs-2);color:var(--c-text);max-width:62ch;text-wrap:pretty}
.note__link{white-space:nowrap}
@media(max-width:899px){.note__link{justify-self:start}}

/* Startseite ohne Zwischenband: Hero läuft direkt in „Für wen“ – etwas mehr Luft, feine Linie */
.is-front .hero{padding-bottom:clamp(3.5rem,7vw,6rem)}
.is-front .situations-section{border-top:1px solid var(--c-line)}

/* ---------- SEO-Textabschnitt (Startseite) ---------- */
.seo-text{background:var(--c-paper);border-top:1px solid var(--c-line)}
.seo-text__grid{display:grid;gap:1.5rem 4rem;align-items:start}
@media(min-width:960px){.seo-text__grid{grid-template-columns:.9fr 1.4fr}}
.seo-text h2{font-size:clamp(1.5rem,1.2rem+1.4vw,2.1rem);margin-bottom:0}
.seo-text .prose{max-width:none;font-size:var(--fs-1);color:var(--c-text)}
.seo-text .prose a{color:var(--c-accent-text);font-weight:600}

/* 17. Schnellcheck „Was passt zu mir?“ */
.check{padding-top:0}
.check__card{background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-xl);box-shadow:var(--shadow-m);overflow:hidden}
.check__head{padding:clamp(1.5rem,4vw,2.5rem) clamp(1.25rem,4vw,2.5rem) 0}
.check__head h2{font-size:var(--fs-h3);margin:.4rem 0 .5rem}
.check__head .lead{font-size:var(--fs-1);color:var(--c-muted);margin:0;max-width:58ch}
.check__body{padding:clamp(1.25rem,4vw,2.5rem)}
/* Vor = Inhalt kommt von rechts, Zurück = von links (main.js setzt --check-dx) */
.check__body.is-enter>*{animation:check-in var(--spring-m) var(--spring) both}
.check__body.is-enter>*:nth-child(2){animation-delay:.04s}
.check__body.is-enter>*:nth-child(3){animation-delay:.08s}
.check__body.is-enter>*:nth-child(4){animation-delay:.12s}
@keyframes check-in{from{opacity:0;transform:translate(var(--check-dx,0px),var(--check-dy,8px))}to{opacity:1;transform:none}}
.check__progress{display:flex;align-items:center;justify-content:space-between;gap:1rem;color:var(--c-muted);margin-bottom:1rem}
.check__progress i{display:flex;gap:6px}
.check__progress b{width:22px;height:4px;border-radius:999px;background:var(--c-paper-2)}
.check__progress b.done{background:var(--c-accent)}
.check__progress b.now{background:var(--c-pop)}
.check__q{font-family:var(--ff-display);font-size:clamp(1.3rem,1.1rem+1vw,1.7rem);letter-spacing:-.01em;margin:0 0 1.1rem}
.check__opts{display:grid;gap:.75rem;grid-template-columns:1fr}
@media(min-width:720px){.check__opts{grid-template-columns:repeat(3,1fr)}}
.check__opt{--t-press:var(--spring-m) var(--spring);display:flex;gap:.9rem;align-items:flex-start;text-align:left;background:var(--c-paper);border:1.5px solid transparent;border-radius:var(--r-l);padding:1rem 1.1rem;font:inherit;color:var(--c-ink);cursor:pointer;transition:border-color var(--dur-fast) ease,background var(--dur-fast) ease,transform var(--t-press),box-shadow var(--dur) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .check__opt:hover{border-color:var(--c-accent);background:#fff;transform:translateY(-2px);box-shadow:var(--shadow-m)}
}
.check__opt:active{transform:scale(.98);--t-press:var(--press-in) var(--ease-out)}
.check__opt:focus-visible{outline:none;border-color:var(--c-accent);box-shadow:0 0 0 4px rgba(59,10,107,.15)}
.check__opt.is-selected{border-color:var(--c-accent);background:var(--c-accent-soft)}
.check__opt b{display:block;font-weight:600;font-size:var(--fs-2);line-height:1.3;margin-bottom:.25rem}
.check__opt small{display:block;font-size:var(--fs-0);color:var(--c-muted);line-height:1.45}
.check__ico{flex:none;width:36px;height:36px;border-radius:10px;background:#fff;display:grid;place-items:center;color:var(--c-accent);box-shadow:var(--shadow-s)}
.check__ico svg{width:18px;height:18px}
.check__back{background:none;border:0;padding:0;margin-top:1.1rem;font:inherit;font-size:var(--fs-0);font-weight:600;color:var(--c-muted);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.check__back:hover{color:var(--c-ink)}
.check__rec{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:flex-start;justify-content:space-between;margin:.6rem 0 1rem}
.check__rec>div:first-child{flex:1 1 320px}
.check__rec h3{font-family:var(--ff-display);font-size:clamp(1.6rem,1.2rem+1.6vw,2.2rem);letter-spacing:-.02em;margin:.1rem 0 .4rem}
.check__rec p{margin:0;color:var(--c-muted)}
.check__kind{color:var(--c-muted)}
.check__price{flex:none;text-align:right}
.check__price strong{display:block;font-family:var(--ff-display);font-size:var(--fs-price);line-height:1;letter-spacing:-.02em;color:var(--c-accent)}
.check__price span{display:block;font-size:var(--fs-0);color:var(--c-muted);margin-top:.35rem}
.check__note{background:var(--c-accent-soft);border-left:3px solid var(--c-pop);border-radius:0 var(--r-m) var(--r-m) 0;padding:.85rem 1rem;font-size:var(--fs-1);color:var(--c-accent-dark);margin:0 0 1.1rem}
.check__list{list-style:none;margin:0 0 1.4rem;padding:0;display:grid;gap:.45rem;grid-template-columns:1fr}
@media(min-width:640px){.check__list{grid-template-columns:1fr 1fr}}
.check__list li{display:flex;gap:.6rem;align-items:flex-start;font-size:var(--fs-1);color:var(--c-text)}
.check__list svg{width:18px;height:18px;flex:none;color:var(--c-ok);margin-top:.15rem}
.check__actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.check__actions .check__back{margin:0 0 0 auto}
.check__fine{font-size:.78rem;color:var(--c-muted-2);margin:1.2rem 0 0}

/* ---------- 19. Empfehlungsprämie (/empfehlen/) ---------- */
.page-head--empfehlen h1{max-width:14ch}
.praemie-card{
  position:relative;overflow:hidden;border-radius:var(--r-xl);padding:clamp(1.5rem,4vw,2.25rem);
  background:linear-gradient(150deg,var(--c-accent) 0%,var(--c-accent-dark) 58%,var(--c-ink) 100%);
  color:#E9E1F3;box-shadow:var(--shadow-l);
}
.praemie-card::before{content:"";position:absolute;width:280px;aspect-ratio:1;right:-100px;top:-120px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,144,48,.4),rgba(255,144,48,0));pointer-events:none}
.praemie-card>*{position:relative}
.praemie-card__zahl{margin:0 0 .6rem;font-family:var(--ff-display);font-weight:800;font-size:clamp(4.5rem,3.4rem + 4.6vw,7rem);line-height:.88;letter-spacing:-.045em;color:var(--c-pop);font-variant-numeric:tabular-nums}
.praemie-card__prozent{margin-left:.1em}
.praemie-card__text{margin:0 0 1.5rem;max-width:18ch;font-family:var(--ff-display);font-weight:600;font-size:var(--fs-3);line-height:1.25;letter-spacing:-.01em;color:#fff}
.praemie-card__beispiel{background:#fff;color:var(--c-ink);border-radius:var(--r-l);padding:1rem 1.15rem 1.1rem}
.praemie-card__beispiel .label{margin:0 0 .45rem;color:var(--c-muted)}
.praemie-card__rechnung{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .7rem;font-size:var(--fs-1);color:var(--c-muted);font-variant-numeric:tabular-nums}
.praemie-card__rechnung strong{color:var(--c-ink);font-weight:600}
.praemie-card__rechnung svg{width:18px;height:18px;flex:none;color:var(--c-pop-dark)}
.praemie-card__rechnung .praemie-card__betrag{font-family:var(--ff-display);font-weight:700;font-size:1.5rem;letter-spacing:-.02em;color:var(--c-accent)}
.praemie-card__fakten{list-style:none;margin:1.25rem 0 0;padding:0;display:grid;gap:.45rem;font-size:var(--fs-1);color:#E9E1F3}
.praemie-card__fakten li{display:flex;gap:.55rem;align-items:center}
.praemie-card__fakten svg{width:18px;height:18px;flex:none;color:var(--c-pop)}

.empfehlen-tipp{display:flex;gap:.75rem;align-items:flex-start;max-width:760px;margin:1.75rem 0 0;padding:1rem 1.25rem;border-radius:var(--r-l);background:var(--c-pop-soft);color:var(--c-ink);font-size:var(--fs-1)}
.empfehlen-tipp i{flex:none;width:10px;height:10px;margin-top:.45em;border-radius:50%;background:var(--c-pop)}
.empfehlen-offen{margin-bottom:0}
.empfehlen-offen p:last-child{margin-bottom:0;max-width:var(--measure)}
.empfehlen-notes{margin-top:1.5rem;font-size:var(--fs-1);color:var(--c-muted)}
.empfehlen-notes p{margin:0;max-width:var(--measure)}
.compare--praemie th:first-child{width:auto}
.compare--praemie .compare__betrag{white-space:nowrap}
.compare--praemie .compare__zusatz{display:block;font-size:var(--fs-0);color:var(--c-muted)}
@media(max-width:639px){.compare--praemie th,.compare--praemie td{padding:.75rem .7rem}}
.compare--praemie td:first-child a{color:var(--c-ink);text-decoration:none}
.compare--praemie td:last-child strong{font-family:var(--ff-display);font-weight:700;font-size:1.1rem;letter-spacing:-.01em;color:var(--c-accent)}
@media (hover:hover) and (pointer:fine){
  .compare--praemie td:first-child a:hover{color:var(--c-accent)}
}

.terms{margin:0;border-top:1px solid var(--c-line)}
.terms__row{display:grid;gap:.4rem 3rem;padding:1.35rem 0;border-bottom:1px solid var(--c-line)}
@media(min-width:860px){.terms__row{grid-template-columns:minmax(0,1fr) minmax(0,2.2fr)}}
.terms dt{font-family:var(--ff-display);font-weight:700;font-size:1.15rem;line-height:1.3;letter-spacing:-.015em;color:var(--c-ink)}
.terms dd{margin:0;color:var(--c-text)}
.terms dd p,.terms dd li{max-width:var(--measure)}
.terms dd p{margin:0}
.terms ul{margin:0;padding-left:1.2em}
.terms li{margin-bottom:.55em}
.terms li:last-child{margin-bottom:0}
.terms li::marker{color:var(--c-accent)}

.cta .cta__nebenbei{margin-top:1rem;font-size:var(--fs-1);color:rgba(255,255,255,.8)}
.cta .cta__nebenbei a{color:#fff;font-weight:600;text-underline-offset:3px}

/* Feld „Empfohlen von“ im Kontaktformular, Link im Footer */
.form__hint{margin:.45rem 0 0;font-size:var(--fs-0);color:var(--c-muted)}
.footer-brand .footer-empfehlen{margin-top:1rem}
.footer-brand .footer-empfehlen a{color:#FFB067;font-weight:600}
.footer-brand .footer-empfehlen a:hover{color:#fff}

/* ============================================================
   20. Apple-Prinzipien: Federn, Material, Feedback, Barrierefreiheit
   ------------------------------------------------------------
   Grundlage: Apples WWDC-Talks („Designing Fluid Interfaces“,
   „The Details of UI Typography“), übertragen aufs Web.
   - Reaktion beim Drücken, nicht beim Loslassen
   - Federn statt fester Kurven; Bewegung startet vom aktuellen Wert
   - Was auf einem Weg kommt, geht auf demselben Weg
   - Materialien zeigen Ebenen; Abdunkeln nur, wo der Fokus hin soll
   - Nutzereinstellungen (Bewegung, Transparenz, Kontrast) haben Vorrang
   ============================================================ */

/* Abdunkelung hinter dem Mobilmenü: lenkt den Blick, Tipp daneben schließt */
.nav-scrim{
  position:fixed;inset:0;z-index:-2;background:rgba(17,24,39,.38);
  opacity:0;visibility:hidden;
  transition:opacity var(--dur-panel) var(--ease-out),visibility var(--dur-panel);
}
.nav-open .nav-scrim{opacity:1;visibility:visible}
/* Kopfzeile und Panel werden eine Fläche, solange das Menü offen ist */
.nav-open .site-header::before{background:rgba(255,255,255,.92)}
@media(min-width:960px){.nav-scrim{display:none}}

/* Press-Zustände für Navigation und Textknöpfe: sofort sichtbar */
.nav-primary a:active{background:var(--c-paper-2);transition-duration:0s}
.nav-mobile>ul>li>a:active,.nav-mobile .sub-menu a:active{background:var(--c-pop-soft);color:var(--c-ink);transition-duration:0s}
.check__back,.consent__links a,.consent__links button,.breadcrumb a,.link-arrow{transition:opacity var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.check__back:active,.consent__links a:active,.consent__links button:active,.breadcrumb a:active,.link-arrow:active{opacity:.55;transition-duration:0s}
.hero__sticker:active{transform:rotate(-8deg) scale(.95);transition-duration:var(--press-in)}
.hero__sticker{transition:transform var(--spring-m) var(--spring)}

/* Kleine Schrift (13px) bekommt etwas mehr Laufweite statt der engeren Fließtext-Laufweite */
.small,.form__note,.form__hint,.form__legal,.breadcrumb,.ref__meta,.post-card__meta,.footer-bottom,.footer-note,
.hero__price-note,.situation__tag,.step__time,.journey__time,.journey__facts li,.price-card__note,.check__opt small,
.check__back,.check__fine,.note__who span,.social a,.btn--sm,.consent__actions .btn,.services-note,.hero__meta,.situation__branch,.form__error{
  letter-spacing:var(--track-0);
}
.service__desc,.situation p,.step p,.ref p,.why__item p,.journey__card p,.service__list li,.contact-steps ol,.trust__item span{letter-spacing:var(--track-1)}

/* Fokusring auf dunklen und violetten Flächen: Violett auf Violett wäre unsichtbar */
.section--dark :focus-visible,.cta :focus-visible,.site-footer :focus-visible,.why :focus-visible,
.announce :focus-visible,.service--featured :focus-visible,.praemie-card :focus-visible,.nav-mobile a.btn:focus-visible{
  outline-color:var(--c-pop);
}
/* Programmatischer Fokus (Schnellcheck) braucht keinen Ring – der Screenreader liest die Überschrift */
[data-focus-target]:focus{outline:none}

/* Formular: Fehler erst nach der Eingabe zeigen, nicht beim ersten Tippen */
:root{--c-error:#B42318;--c-error-soft:#FEF3F2}
.form input:user-invalid,.form textarea:user-invalid,.form select:user-invalid,
.form .is-invalid:is(input,textarea,select){border-color:var(--c-error);background-color:var(--c-error-soft)}
.form .is-invalid:is(input,textarea,select):focus{box-shadow:0 0 0 4px rgba(180,35,24,.14)}
.form .check input.is-invalid{outline:2px solid var(--c-error);outline-offset:2px}
.form__error{display:flex;gap:.45rem;align-items:flex-start;margin:.45rem 0 0;font-size:var(--fs-0);line-height:1.4;font-weight:500;color:var(--c-error)}
.form__error::before{content:"!";flex:none;display:grid;place-items:center;width:16px;height:16px;margin-top:.05rem;border-radius:50%;background:var(--c-error);color:#fff;font-size:.68rem;font-weight:700}
.form__error[hidden]{display:none}
.form .check+.form__error{margin:-.9rem 0 1.25rem}
/* Status beim Absenden: der Knopf zeigt, dass gearbeitet wird */
.btn[aria-busy="true"]{pointer-events:none}
.btn[aria-busy="true"] svg{display:none}
.btn[aria-busy="true"]::after{content:"";width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:lorento-spin .7s linear infinite}
@keyframes lorento-spin{to{transform:rotate(360deg)}}

/* Seitenwechsel: Kopfzeile bleibt stehen, der Inhalt blendet weich über.
   Nur in Browsern, die das können (Chrome, Edge, Safari 18.2+) – sonst normaler Seitenwechsel. */
@media(prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
}
/* Name nur während des Übergangs: ein dauerhafter view-transition-name macht den
   Header zur „Backdrop Root“ – dann könnten Header, Untermenü und Mobilmenü
   nichts mehr hinter sich weichzeichnen. */
:root:active-view-transition .site-header{view-transition-name:site-header}
::view-transition-old(root){animation:.18s var(--ease-out) both lorento-vt-out}
::view-transition-new(root){animation:var(--spring-l) var(--spring) both lorento-vt-in}
::view-transition-group(site-header){animation-duration:var(--spring-l);animation-timing-function:var(--spring)}
@keyframes lorento-vt-out{to{opacity:0}}
@keyframes lorento-vt-in{from{opacity:0;transform:translateY(8px)}}

/* Weniger Transparenz gewünscht: Materialien werden zu festen Flächen */
@media(prefers-reduced-transparency:reduce){
  .site-header::before,.nav-mobile,.nav-primary .sub-menu,.consent,.journey__side{
    background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;
  }
  .site-header.is-scrolled::before{box-shadow:0 1px 0 var(--c-line)}
  .why__item{background:var(--c-ink-2);-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav-primary .sub-menu{filter:none}
}

/* Mehr Kontrast gewünscht: feste Flächen, klare Kanten, dunklerer Sekundärtext */
@media(prefers-contrast:more){
  :root{--c-muted:#3A4150;--c-line:#9AA1B2}
  .site-header::before,.nav-mobile,.nav-primary .sub-menu,.consent,.journey__side{
    background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;
  }
  .site-header::before{box-shadow:0 1px 0 var(--c-ink)}
  .site-header::after{display:none}
  .nav-mobile,.nav-primary .sub-menu,.consent{border:1.5px solid var(--c-ink)}
  .btn--ghost{border-color:var(--c-ink)}
  /* Orange mit weißer Schrift ist zu schwach – hier dunkle Schrift */
  .nav-mobile a:hover,.nav-mobile a:focus-visible,.nav-mobile .current-menu-item>a,.nav-mobile .current_page_item>a,.nav-mobile .current-menu-ancestor>a,
  .nav-primary .sub-menu a:hover,.nav-primary .sub-menu .current-menu-item>a{color:var(--c-ink)}
  .consent p,.consent__opt,.consent__links{color:var(--c-text)!important}
}

/* Weniger Bewegung: Überblenden statt Schieben, keine Feder, kein Weichzeichner-Auftritt */
@media(prefers-reduced-motion:reduce){
  .nav-mobile,.nav-primary .sub-menu{transform:none!important;filter:none!important}
  .consent{animation:none}
  .check__body.is-enter>*{animation:none}
}

/* ---------- Referenz-Detailseite (ab 1.1.2) ---------- */
.page-head--ref:has(+ .ref-stage){padding-bottom:clamp(7rem,15vw,12rem)}
.page-head--ref h1{max-width:20ch;font-size:clamp(2rem,1.2rem + 4vw,4.6rem);overflow-wrap:break-word;hyphens:manual}
.ref-chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:1.5rem 0 0;padding:0}
.ref-chips li{background:#fff;border:1px solid var(--c-line);border-radius:999px;padding:.35rem .8rem;font-size:var(--fs-0);font-weight:500;color:var(--c-text)}
.ref-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.1rem;margin-top:1.75rem}
.ref-actions__domain{font-size:var(--fs-1);color:var(--c-muted)}

.ref-stage{position:relative;z-index:1;margin-top:clamp(-9.5rem,-12vw,-5rem)}
.ref-stage__figure{position:relative;margin:0 auto;max-width:1080px}
.ref-stage--handy .ref-stage__figure{padding-right:clamp(1.75rem,9vw,7.5rem);padding-bottom:clamp(1.5rem,4vw,3rem)}
.ref-browser{
  display:block;border-radius:var(--r-l);overflow:hidden;background:#fff;color:inherit;text-decoration:none;
  border:1px solid rgba(20,23,31,.08);box-shadow:var(--shadow-l);
  transition:transform var(--spring-m) var(--spring),box-shadow var(--dur-card) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  a.ref-browser:hover{transform:translateY(-4px);box-shadow:0 32px 70px rgba(20,23,31,.2);color:inherit}
}
a.ref-browser:active{transform:scale(.995)}
.ref-browser__screen{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--c-paper-2)}
.ref-browser__screen img{width:100%;height:100%;object-fit:cover;object-position:top center}
.ref-phone{
  position:absolute;right:0;bottom:0;width:clamp(96px,21%,220px);aspect-ratio:9/19.5;
  padding:clamp(4px,.7vw,8px);border-radius:clamp(16px,2.6vw,32px);background:var(--c-ink);
  box-shadow:var(--shadow-l),inset 0 0 0 1px rgba(255,255,255,.08);transform:rotate(3deg);
}
.ref-phone__screen{display:block;width:100%;height:100%;overflow:hidden;background:#fff;border-radius:clamp(12px,2vw,25px)}
.ref-phone__screen img{width:100%;height:100%;object-fit:cover;object-position:top center}

.ref-detail__grid{display:grid;gap:3rem}
@media(min-width:960px){.ref-detail__grid{grid-template-columns:minmax(0,1fr) 320px;gap:4.5rem;align-items:start}}
.ref-story__block+.ref-story__block,.ref-story .prose{margin-top:2.5rem}
.ref-story__label{color:var(--c-accent-text);margin:0 0 .7rem}
.ref-story__block p{font-size:var(--fs-3);line-height:1.6;color:var(--c-text);max-width:var(--measure);margin:0 0 .8em;text-wrap:pretty}
.ref-highlights{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
@media(min-width:640px){.ref-highlights{grid-template-columns:1fr 1fr}}
.ref-highlights li{display:flex;gap:.7rem;align-items:flex-start;background:#fff;border:1px solid var(--c-line);border-radius:var(--r-m);padding:.85rem 1rem;font-size:var(--fs-1);line-height:1.45}
.ref-highlights svg{width:22px;height:22px;flex:none;padding:4px;border-radius:7px;background:var(--c-accent-soft);color:var(--c-accent)}

.ref-facts{background:#fff;border:1px solid var(--c-line);border-radius:var(--r-l);padding:1.5rem 1.6rem;box-shadow:var(--shadow-s)}
@media(min-width:960px){.ref-detail__grid .ref-facts{position:sticky;top:calc(var(--header-h, 72px) + 1.5rem)}}
.ref-facts__title{color:var(--c-muted);margin:0 0 .75rem}
.ref-facts dl{margin:0}
.ref-facts dl>div{padding:.8rem 0;border-top:1px solid var(--c-line)}
.ref-facts dt{color:var(--c-muted);margin-bottom:.2rem}
.ref-facts dd{margin:0;font-weight:600;color:var(--c-ink)}
.ref-facts dd a{display:inline-flex;align-items:center;gap:.35rem;color:var(--c-accent-text);text-decoration:none}
.ref-facts dd a:hover{text-decoration:underline}
.ref-facts dd svg{width:15px;height:15px}
@media(min-width:760px){
  .ref-facts--row dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0 1.5rem}
}

.ref-quote{
  position:relative;margin:0 auto;max-width:900px;overflow:hidden;
  background:var(--c-accent);color:#fff;border-radius:var(--r-xl);padding:clamp(2rem,5vw,4rem) clamp(1.5rem,5vw,4.5rem);
}
.ref-quote::after{content:"";position:absolute;inset:-40% -20% auto auto;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(255,144,48,.35),rgba(255,144,48,0));pointer-events:none}
.ref-quote__mark{position:absolute;left:clamp(1rem,3vw,2.2rem);top:clamp(-.6rem,-1vw,-.2rem);font-family:var(--ff-display);font-size:clamp(6rem,14vw,10rem);line-height:1;color:var(--c-pop);opacity:.9}
.ref-quote blockquote{position:relative;margin:0}
.ref-quote blockquote p{font-family:var(--ff-display);font-size:clamp(1.35rem,1rem + 1.6vw,2.1rem);line-height:1.3;letter-spacing:-.02em;color:#fff;margin:0;text-wrap:pretty}
.ref-quote figcaption{position:relative;margin-top:1.5rem;font-weight:600;color:#E4D6F5}

.ref-more__back{margin:2rem 0 0}
@media (prefers-reduced-motion:reduce){a.ref-browser:hover{transform:none}}