/* HAUSV Professional landing page. Section 1: masthead, hero copy, CTA, pipeline film.
   Colours, type and spacing follow the HAUSV Professional handout. */
:root{
  color-scheme:light dark;
  /* Brand tokens sampled from HAUSV-Professional_Handout */
  --paper:#f7f3ea;
  --card:#fffefb;
  --band-alt:#f1ece0;
  --green:#1c4032;
  --green-dark:#16342a;
  --green-ink:#172019;
  --green-soft:#5f6e62;
  --muted:#60695f;
  --gold:#8a7b3f;
  --gold-light:#e7c574;
  --rule:#dedcca;
  /* The animation follows the page theme; only the deep band stays deep. */
  --canvas-paper:var(--paper);
  --deep:#1c4032;
  --on-deep:#f7f3ea;
  --masthead-bg:#f7f3eaf2;
  --warranty-bg:#fdfbf4;
  --warranty-border:#8a7b3f55;
  --chrome:#f1eee4;
  --chrome-dot:#cfcdbd;
  --shot-a:#f6f3ea;
  --shot-b:#f1eee3;
  --shot-label:#a8ab9b;
  --loader-track:#c3c4b3;
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --sans:Arial,"Helvetica Neue",Helvetica,sans-serif;
  --gutter:clamp(22px,4.4vw,72px);
  font-family:var(--sans);
  color:var(--green);
  background:var(--paper);
}
/* consent-gate tokens (AGMCOM-15): the vendored bar and sheet draw from the
   page's tokens, light and dark alike. Mapped onto David's palette. */
:root{
  --ic-surface:var(--card);--ic-surface-soft:var(--paper);--ic-ink:var(--green);--ic-muted:var(--muted);
  --ic-line:var(--rule);--ic-accent:var(--gold);--ic-focus:var(--gold);--ic-radius:12px;--ic-radius-pill:999px;
  --ic-font:var(--sans);--ic-font-heading:var(--serif);--ic-shadow:0 12px 30px rgba(0,0,0,.12);--ic-shadow-dialog:0 28px 70px rgba(0,0,0,.34);
}
*{box-sizing:border-box}
html,body{margin:0;min-width:320px}
body{-webkit-font-smoothing:antialiased}
button,a,input{-webkit-tap-highlight-color:transparent}
button,input{font:inherit}
button,a{touch-action:manipulation}
button{color:inherit;background:none;border:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--green);outline-offset:4px}

/* ======================================================================
   In-page navigation. The masthead floats over the content, so targets
   keep a margin; readers who ask for less motion still get a plain jump.
   ====================================================================== */
@media(prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
section[id]{scroll-margin-top:clamp(72px,7vw,98px)}

/* ---------- Masthead: revealed on scroll ---------- */
.masthead{
  position:fixed;inset:0 0 auto;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:clamp(14px,1.5vw,20px) var(--gutter);
  background:var(--masthead-bg);border-bottom:1px solid var(--rule);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transform:translateY(-100%);opacity:0;pointer-events:none;
  transition:transform .4s cubic-bezier(.33,1,.68,1),opacity .3s ease;
}
body.scrolled .masthead{transform:none;opacity:1;pointer-events:auto}
/* Brand logotype from Brand/Augmentoring-logotype.svg, recoloured via currentColor. */
.wordmark{display:block;line-height:0;color:var(--green)}
.wordmark svg{display:block;height:clamp(14px,1.15vw,18px);width:auto}
.masthead-claim{
  margin:0;text-align:right;font-size:clamp(9.5px,.74vw,11.5px);font-weight:700;
  letter-spacing:.18em;line-height:1.4;color:var(--muted);text-transform:uppercase;
}

/* ---------- Hero ---------- */
.hero{padding:clamp(34px,4.2vw,62px) var(--gutter) 0;max-width:1760px;margin-inline:auto}
.next-up{
  min-height:70svh;display:grid;place-items:center;border-top:1px solid var(--rule);
}
.next-up p{margin:0;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.hero-inner{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,2.8vw,40px)}
.hero-copy{container-type:inline-size;width:100%;text-align:center}
.hero h1{
  font-family:var(--serif);font-weight:700;color:var(--green);margin:0;
  font-size:min(4.8cqw,60px);line-height:1.12;letter-spacing:-.02em;
  /* Two fixed lines, tied to the column width: nothing can re-flow
     mid-transition. The longer line measures 12.69x the font size. */
  white-space:nowrap;
  transition:font-size 1s cubic-bezier(.33,1,.68,1);
}
.hero h1 span{display:block}

/* Stage two: the copy the film has just earned. */
.hero-stage-two{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows 1s .1s cubic-bezier(.33,1,.68,1);
}
.hero-stage-two-inner{
  overflow:hidden;opacity:0;transform:translateY(10px);
  transition:opacity .6s .45s ease,transform .6s .45s ease;
}
body.film-complete .hero h1{font-size:min(3.6cqw,42px)}
body.film-complete .hero-stage-two{grid-template-rows:1fr}
body.film-complete .hero-stage-two-inner{opacity:1;transform:none}

.gold-rule{width:52px;height:2px;border:0;background:var(--gold);margin:clamp(20px,2vw,30px) auto 0}
.hero-lede{
  margin:clamp(14px,1.3vw,20px) auto 0;max-width:34ch;
  font-family:var(--serif);font-size:clamp(19px,1.72vw,28px);line-height:1.36;
  color:var(--green);letter-spacing:-.008em;text-wrap:balance;
}

/* ---------- Call to action ---------- */
.cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:13px;margin:clamp(22px,2.2vw,32px) 0 0}
.cta-primary,.cta-secondary{
  display:inline-flex;align-items:center;gap:11px;
  padding:15px 26px;border-radius:6px;text-decoration:none;cursor:pointer;
  font-size:clamp(13.5px,1vw,15px);font-weight:700;letter-spacing:.005em;white-space:nowrap;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.cta-primary{background:var(--green);color:var(--paper)}
.cta-primary:hover{background:var(--green-dark);transform:translateY(-1px)}
.cta-secondary{border:1px solid color-mix(in srgb,var(--green) 25%,transparent);color:var(--green)}
.cta-secondary:hover{border-color:var(--green);background:color-mix(in srgb,var(--green) 5%,transparent)}
.cta-primary svg,.cta-secondary svg,.cta-light svg{width:15px;height:15px;flex-shrink:0}

/* ---------- Film ---------- */
.film{position:relative;min-width:0}
.film-shell{position:relative;aspect-ratio:1800/690;isolation:isolate;overflow:hidden}
/* player.js keeps the shell ratio in sync with the scene it picks for this width. */
canvas{display:block;width:100%;height:100%}
.loading{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--canvas-paper);transition:opacity .3s;
}
.loading span{
  width:17px;height:17px;border:1.5px solid var(--loader-track);border-top-color:var(--deep);
  border-radius:50%;animation:spin 1s linear infinite;
}
.loaded .loading{opacity:0;pointer-events:none}

.player{
  display:flex;justify-content:center;
  margin:clamp(8px,1vw,16px) auto 0;padding:0 0 clamp(26px,3vw,44px);
  /* Offered only once there is something to replay. Space stays reserved. */
  opacity:0;pointer-events:none;transition:opacity .5s .45s ease;
}
/* Where the composition leaves room below the estate, the button moves in under it. */
.film[data-scene=desktop] .player,
.film[data-scene=tablet] .player{
  position:absolute;left:var(--focus-x);top:calc(var(--focus-y) + 14px);
  transform:translateX(-50%);margin:0;padding:0;
}
body.film-complete .player{opacity:1;pointer-events:auto}
.player button{
  display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  color:var(--green-soft);cursor:pointer;transition:background .18s ease,color .18s ease;
}
.player button:hover{background:#1c40320f;color:var(--deep)}
.player svg{width:19px;height:19px}
.hero-still{display:none}

/* ---------- The still hero (phones) ----------
   Where timeline.js stacks the scene into its 600x1040 layout, the film is
   replaced by its own end frame as one image. player.js sets data-hero, so
   the breakpoint lives in one place -- a media query here would be a second
   number that silently drifts from the scene's.

   It is the whole story in one look (requests, box, brain, estate, tickets,
   team) at ~105 kB instead of 1.25 MB of sprites, and it is there at once
   rather than after the film's nine seconds: on a phone the copy and the
   CTA no longer wait for an animation nobody can read at that size. */
:root[data-hero=still] .film-shell{aspect-ratio:auto;overflow:visible}
:root[data-hero=still] #scene,
:root[data-hero=still] .loading,
:root[data-hero=still] .player{display:none}
:root[data-hero=still] .hero-still{
  display:block;width:100%;height:auto;
}
/* theme-boot.js marks the still layout before the first paint; until the
   image is inserted, this keeps its place (same ratio as its width/height),
   and the copy below the headline is already open instead of growing into
   place. Either would otherwise push the whole page down after it painted. */
:root[data-hero=still] .film-shell:not(.has-still)::before{content:"";display:block;aspect-ratio:800/1387}
:root[data-hero=still] .hero-stage-two{grid-template-rows:1fr;transition:none}

/* ---------- Entrance ---------- */
.hero h1{opacity:0;transform:translateY(12px);filter:blur(3px)}
.loaded .hero h1{animation:reveal 1.2s .12s both}
@keyframes reveal{to{opacity:1;transform:none;filter:none}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Responsive ---------- */
@media(min-width:1000px){
  /* Section one holds the fold: headline, film and the earned copy below it. */
  .hero{
    padding-bottom:clamp(20px,2.2vw,34px);
    min-height:100svh;
    display:flex;flex-direction:column;justify-content:center;
  }
}
@media(max-width:1000px){
  .masthead-claim{display:none}
}
@media(max-width:600px){
  .masthead{padding-bottom:14px}
  .brand{gap:12px}
  .hero{padding-top:30px}
  .hero h1,body.film-complete .hero h1{font-size:min(7.3cqw,40px)}
  .hero-lede{font-size:20px}
  .cta{gap:10px}
  .cta-primary,.cta-secondary{width:100%;justify-content:center;padding:16px 20px}
  .player{padding-bottom:24px}
}
@media(prefers-reduced-motion:reduce){
  .hero h1{opacity:1;filter:none;transform:none;animation:none!important}
  .hero h1,.hero-stage-two,.hero-stage-two-inner,.player{transition:none}
  .loading span{animation:none}
  .loading{transition:none}
  .cta-primary:hover{transform:none}
}

/* ======================================================================
   Sections 2-8. Bands alternate paper / card / deep green for rhythm.
   ====================================================================== */
.band{padding:clamp(56px,7vw,120px) var(--gutter)}
.band-tight{padding-top:clamp(40px,4.5vw,76px)}
.band-paper{background:var(--paper)}
/* Zwei Bänder derselben Farbe brauchen eine Kante, sonst laufen sie ineinander. */
.band-paper + .band-paper{border-top:1px solid var(--rule)}
.band-card{background:var(--card);border-block:1px solid var(--rule)}
.band-alt{background:var(--band-alt)}
.band-deep{background:var(--deep);color:#eef0e6}
.wrap{max-width:1180px;margin-inline:auto}
.wrap-narrow{max-width:820px;text-align:center}

.kicker{
  margin:0 0 clamp(14px,1.4vw,20px);font-size:clamp(10px,.78vw,11.5px);font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
}
.band h2{
  font-family:var(--serif);font-weight:700;margin:0;
  font-size:clamp(28px,3.1vw,46px);line-height:1.14;letter-spacing:-.022em;text-wrap:balance;
}
.band-lede{
  margin:clamp(14px,1.4vw,20px) 0 0;max-width:60ch;
  font-size:clamp(15px,1.15vw,18px);line-height:1.6;color:var(--muted);
}
.band-deep .kicker{color:var(--gold-light)}
.band-deep .band-lede{color:#c8d2c4}
.wrap-narrow .band-lede{margin-inline:auto}
.band-cta{margin-top:clamp(28px,3vw,44px)}
/* Der Lösungstext soll auf zwei Zeilen kommen, nicht auf drei. */
#loesung .band-lede{max-width:82ch;text-wrap:balance}
/* Die Team-Zeile passt auf breiten Schirmen in eine Zeile. */
.cta-light{
  display:inline-flex;align-items:center;gap:11px;padding:15px 26px;border-radius:6px;
  background:var(--on-deep);color:var(--deep);text-decoration:none;font-weight:700;white-space:nowrap;
  font-size:clamp(13.5px,1vw,15px);transition:background .18s ease,transform .18s ease;
}
.cta-light:hover{background:#fff;transform:translateY(-1px)}

/* --- 2 · Quote ------------------------------------------------------- */
.quote-card{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,3vw,52px);align-items:start;
  margin:clamp(28px,3.2vw,44px) 0 0;padding:clamp(26px,3vw,44px);background:var(--card);
  border:1px solid var(--rule);border-radius:10px;
}
.quote-id{display:grid;gap:20px;justify-items:center;align-content:start;width:clamp(124px,11vw,164px)}
.quote-portrait{
  width:clamp(96px,8vw,120px);height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;
  border:1px solid var(--rule);
}
.quote-logo{width:100%;height:auto;opacity:.9}
.quote-body blockquote{
  margin:0;font-family:var(--serif);font-size:clamp(19px,1.85vw,30px);line-height:1.42;
  letter-spacing:-.01em;color:var(--green);text-wrap:pretty;
}
.quote-body blockquote::before{content:'\201E'}
.quote-body blockquote::after{content:'\201C'}
.quote-body figcaption{
  margin-top:clamp(18px,2vw,26px);padding-top:18px;border-top:1px solid var(--rule);
  display:grid;gap:5px;
}
.quote-body figcaption strong{font-size:clamp(13.5px,1vw,15px)}
.quote-body figcaption span{font-size:12.5px;color:var(--muted)}
.result-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:clamp(22px,2.4vw,34px) 0 0;
  background:var(--rule);border:1px solid var(--rule);border-radius:10px;overflow:hidden;
}
.result-row>div{
  background:var(--card);padding:clamp(24px,2.6vw,34px) clamp(20px,2.2vw,30px);
  display:grid;gap:clamp(12px,1.2vw,16px);
}
.result-row dt{
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
}
.result-row dd{margin:0;display:grid;gap:7px}
.result-figure{
  font-family:var(--serif);font-weight:700;color:var(--green);
  font-size:clamp(32px,3.4vw,50px);line-height:1;letter-spacing:-.025em;
}
.result-note{font-size:clamp(13px,.98vw,15px);line-height:1.45;color:var(--muted);text-wrap:balance}
/* ======================================================================
   Guide download (AGMLP-20): page previews left, the form right.
   ====================================================================== */
.guide{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,80px);align-items:center}
.guide-preview{position:relative;aspect-ratio:1/1;max-width:460px;width:100%;justify-self:center}
.guide-preview img{
  position:absolute;width:62%;height:auto;border-radius:4px;
  /* Paper keeps a light edge in both themes; the transparent outline and its
     own layer let the browser anti-alias the rotated edge instead of stepping it. */
  border:1px solid #e3ddcc;outline:1px solid transparent;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:#f7f3ea;box-shadow:0 18px 40px -22px #1c403259;
}
.guide-preview img:nth-child(1){left:36%;top:10%;transform:rotate(7deg)}
.guide-preview img:nth-child(2){left:22%;top:6%;transform:rotate(2deg)}
.guide-preview img:nth-child(3){left:6%;top:3%;transform:rotate(-4deg)}
.guide-copy .band-lede{max-width:52ch}
#guide-open{margin-top:clamp(22px,2.2vw,30px)}
.guide-form{display:grid;gap:16px;margin-top:clamp(20px,2.2vw,30px);max-width:520px}
.guide-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.guide-fields .field:nth-child(3){grid-column:1/-1}
.guide-form .field{display:grid;gap:6px;margin:0}
.guide-form label{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green-soft)}
.guide-form .req{color:var(--gold);letter-spacing:0}
.phone-row{display:grid;grid-template-columns:auto 1fr;gap:8px}
/* The closed picker shows flag and code only; the native list keeps the names. */
.cc{position:relative;display:flex}
.cc-label{
  display:flex;align-items:center;gap:6px;padding:12px 30px 12px 12px;border:1px solid var(--rule);border-radius:7px;
  background:var(--card);color:var(--green);font-size:15px;white-space:nowrap;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;background-size:5px 5px;background-repeat:no-repeat;
}
.guide-form select{position:absolute;inset:0;width:100%;opacity:0;cursor:pointer;font-size:15px}
.cc:focus-within .cc-label{border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 22%,transparent)}
.guide-form input[type=text],.guide-form input[type=email],.guide-form input[type=tel]{
  width:100%;padding:12px 13px;border:1px solid var(--rule);border-radius:7px;
  background:var(--card);color:var(--green);font-size:15px;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.guide-form input:focus-visible{outline:2px solid transparent;border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 22%,transparent)}
.guide-form input[aria-invalid=true]{border-color:#c0674f}
.guide-form .cta-primary{justify-self:start;border:0;font-family:inherit}
.guide-form .cta-primary[disabled]{opacity:.6;cursor:progress}
.guide-note{margin:0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.guide-note a{color:inherit}
.guide-status{margin:0;font-size:14px;line-height:1.5;color:var(--green)}
.guide-status:empty{display:none}
.guide-status.is-error{color:#b0543a}
.guide-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
/* The request form lives in a native dialog next to the guide's cover. */
.guide-dialog{
  width:min(880px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--rule);
  border-radius:14px;background:var(--paper);color:var(--green);overflow:auto;
  box-shadow:0 40px 90px -30px #0b1a1399;
}
/* The page behind stays put while the dialog is open; the reserved gutter
   keeps the layout from shifting where scrollbars take space. */
html:has(.guide-dialog[open]){overflow:hidden;scrollbar-gutter:stable}
.guide-dialog{overscroll-behavior:contain}
.guide-dialog::backdrop{background:#0b1a13a6;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.guide-dialog[open]{animation:guide-in .32s cubic-bezier(.2,.8,.2,1) both}
.guide-dialog[open]::backdrop{animation:guide-fade .32s ease both}
.guide-dialog.is-closing{animation:guide-out .2s ease both}
.guide-dialog.is-closing::backdrop{animation:guide-fade .2s ease reverse both}
@keyframes guide-in{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes guide-out{to{opacity:0;transform:translateY(8px) scale(.98)}}
@keyframes guide-fade{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.guide-dialog[open],.guide-dialog[open]::backdrop,.guide-dialog.is-closing,.guide-dialog.is-closing::backdrop{animation:none}}
.guide-dialog-body{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
/* Pages of the guide beside the form. The column takes the form's height;
   the third row runs out of view and fades, so more pages clearly follow. */
.guide-dialog-pages{position:relative;overflow:hidden;background:var(--band-alt);border-left:1px solid var(--rule)}
.guide-dialog-pages-grid{
  position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-content:start;
  padding:clamp(28px,3.2vw,44px) clamp(22px,2.6vw,34px) 0;
  -webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 98%);mask-image:linear-gradient(to bottom,#000 70%,transparent 98%);
}
.guide-dialog-pages img{width:100%;height:auto;display:block;border-radius:2px;border:1px solid var(--rule);box-shadow:0 6px 16px -10px #1c403266}
.guide-dialog-main{position:relative;padding:clamp(26px,3.4vw,44px)}
.guide-dialog-main h3{margin:0 40px 8px 0;font-family:var(--serif);font-size:clamp(22px,2vw,28px);line-height:1.2;text-wrap:balance}
.guide-dialog-lede{margin:0;font-size:14.5px;line-height:1.55;color:var(--muted)}
.guide-close{
  position:absolute;top:12px;right:12px;z-index:1;width:30px;height:30px;display:grid;place-items:center;
  border-radius:50%;color:var(--green-soft);cursor:pointer;transition:background .18s ease,color .18s ease;
}
.guide-close:focus-visible{outline:1.5px solid var(--gold);outline-offset:-1.5px}
.guide-close:hover{background:color-mix(in srgb,var(--green) 8%,transparent);color:var(--green)}
.guide-close svg{width:16px;height:16px}
.guide-dialog .guide-form{margin-top:22px;max-width:none}
@media(max-width:700px){
  .guide-dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border:0}
  .guide-dialog-body{grid-template-columns:1fr}
  .guide-dialog-pages{display:none}
}
/* hidden must win over the display rules above. */
.guide-form[hidden],.guide-done[hidden]{display:none}
/* Confirmation after a request: check mark, the address to double-check,
   and a way back to the form in case it was mistyped. */
.guide-done{
  margin-top:22px;padding:clamp(22px,2.4vw,30px);border:1px solid var(--rule);border-radius:10px;
  background:var(--card);animation:guide-in .32s cubic-bezier(.2,.8,.2,1) both;
}
.guide-done-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.guide-done-mark{width:26px;height:26px;flex:none;color:var(--green);display:block}
.guide-done h4{margin:0;font-family:var(--serif);font-size:21px;line-height:1.25;color:var(--green);outline:none}
.guide-done p{margin:0;font-size:15px;line-height:1.55;color:var(--green)}
.guide-done strong{overflow-wrap:anywhere}
.guide-done .guide-done-hint{margin-top:10px;font-size:13px;color:var(--muted)}
.guide-back{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:0;cursor:pointer;
  font-size:14px;font-weight:700;color:var(--green);text-decoration:underline;text-underline-offset:3px;
}
.guide-back svg{width:15px;height:15px}
@media(prefers-reduced-motion:reduce){.guide-done{animation:none}}
@media(max-width:820px){
  .result-row{grid-template-columns:1fr}
  .result-row>div{grid-template-columns:auto 1fr;align-items:center;gap:6px 22px}
  .result-row dt{grid-column:1/-1}
  .result-figure{font-size:clamp(30px,8vw,40px)}
  .guide{grid-template-columns:1fr}
  .guide-preview{max-width:320px}
  .guide-fields{grid-template-columns:1fr}
}

/* Screenshot left, the four points beside it. */
.solution{
  display:grid;grid-template-columns:minmax(0,2fr) minmax(230px,1fr);
  gap:clamp(24px,2.6vw,42px);align-items:center;
  margin:clamp(32px,3.6vw,52px) 0 0;
}
.shot{margin:0;min-width:0}
.shot-frame{
  border:1px solid var(--rule);border-radius:10px;overflow:hidden;background:var(--paper);
  box-shadow:0 24px 60px -30px #1c403238;
}
.shot-chrome{display:flex;gap:7px;padding:13px 16px;background:var(--chrome);border-bottom:1px solid var(--rule)}
.shot-chrome span{width:9px;height:9px;border-radius:50%;background:var(--chrome-dot)}
.shot-frame img{display:block;width:100%;height:auto}
.pillars{list-style:none;margin:0;padding:0;display:grid;gap:clamp(20px,2.2vw,30px)}
.pillars li{position:relative;padding-top:18px}
.pillars li::before{content:'';position:absolute;top:0;left:0;width:40px;height:2px;background:var(--gold)}
.pillars h3{margin:0 0 7px;font-size:clamp(15px,1.15vw,17px);line-height:1.35}
.pillars p{margin:0;font-size:clamp(13.5px,.98vw,15px);line-height:1.55;color:var(--muted)}
@media(max-width:900px){
  .solution{grid-template-columns:1fr;gap:clamp(24px,3vw,36px)}
  .pillars{grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,28px)}
}
@media(max-width:560px){.pillars{grid-template-columns:1fr}}

/* --- 5 · Security --------------------------------------------------- */
/* Copy on the left, the three seals beside it. */
.safety-head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(28px,3.4vw,60px);align-items:center;
}
.seals{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.2vw,16px);
}
.seals li{
  display:grid;justify-items:center;gap:9px;text-align:center;
  padding:clamp(18px,2vw,26px) clamp(10px,1.2vw,16px);
  border:1px solid var(--rule);border-radius:10px;background:var(--card);
}
.seal-art{width:clamp(44px,4.4vw,58px);height:auto;color:var(--gold);display:block}
.seal-name{font-size:clamp(12.5px,.95vw,14px);font-weight:700;line-height:1.3}
.seal-note{font-size:11.5px;line-height:1.45;color:var(--muted);text-wrap:balance}
@media(max-width:1000px){
  .safety-head{grid-template-columns:1fr;gap:clamp(24px,3vw,34px)}
}
@media(max-width:560px){
  .seals{grid-template-columns:1fr}
  .seals li{grid-template-columns:auto 1fr;justify-items:start;text-align:left;gap:4px 16px;align-items:center}
  .seal-art{grid-row:span 2;width:44px}
}

.warranty{
  margin:clamp(26px,3vw,40px) 0 0;padding:clamp(24px,2.8vw,40px);
  border:1px solid var(--warranty-border);border-radius:10px;background:var(--warranty-bg);
}
.warranty-label{
  display:inline-block;margin:0 0 16px;padding:7px 14px;border-radius:100px;
  background:var(--gold-light);color:#3b2f0c;
  font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
}
.warranty-claim{
  /* One line on desktop: the sentence measures 38.6x the font size and the card
     offers room for 28.5 at 1440px, so the cap sits at 26 with headroom. */
  margin:0;font-family:var(--serif);font-size:clamp(17px,1.9vw,26px);line-height:1.4;
  letter-spacing:-.01em;color:var(--green);text-wrap:balance;
}
.warranty-seal{width:.86em;height:.86em;margin-right:.4em;color:var(--gold);vertical-align:-.04em}
.warranty-note{margin:14px 0 0;font-size:13px;line-height:1.55;color:var(--muted)}

/* --- 6 · Austria map. Ported from hausverwaltung-demo-v3.html and recoloured:
       teal = free (the Augmentoring accent), gold = in conversation, muted = taken. --- */
#regionen{--at-open:#55d0c0;--at-pending:var(--gold-light);--at-taken:#7e8f83}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}
/* Copy on the left, a smaller map beside it. */
.regions-layout{
  display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(26px,3vw,48px);align-items:center;
}
.regions-cta{margin-top:clamp(24px,2.6vw,36px)}
.map-wrap{margin:0}
/* The map reaches past the centred wrap towards the right edge, using the slack
   the wrap leaves plus 24px of the gutter. min(0px,…) keeps it from pushing out
   again on narrower screens, where there is no slack to take. */
.regions-map{margin-right:min(0px,calc((100vw - var(--gutter) * 2 - 1180px) / -2 - 24px))}
@media(max-width:1000px){
  /* Stacked: headline, then the map, then the call to action. display:contents
     lets the two halves of the text block take their own place in that order. */
  .regions-layout{grid-template-columns:1fr;gap:clamp(20px,2.6vw,30px)}
  .regions-text{display:contents}
  .regions-copy{order:1}
  .regions-map{order:2;margin-right:0}
  .regions-cta{order:3;margin-top:0}
  .map-wrap{max-width:min(100%,520px);margin-inline:auto}
  .map-legend{justify-content:flex-start}
}
.at-map{display:block;width:100%;height:auto;overflow:visible}
.at-border{
  fill:#ffffff0d;stroke:#ffffff47;stroke-width:2.5;
  stroke-linejoin:round;stroke-linecap:round;
}
.city{cursor:pointer}
/* Nur die definierten Trefferflächen reagieren, nicht die Buchstaben selbst. */
.city > *{pointer-events:none}
.city-name{
  font-family:var(--sans);font-size:15px;font-weight:700;letter-spacing:-.01em;
  fill:#b7c3b4;transition:fill .2s ease;
  paint-order:stroke;stroke:var(--deep);stroke-width:3.5px;stroke-linejoin:round;
}
.city-dot{fill:#8fa08f;stroke:var(--deep);stroke-width:3}
.city[data-state=open] .city-dot{fill:var(--at-open)}
.city[data-state=open] .city-name{fill:#fff}
.city[data-state=pending] .city-name{fill:var(--at-pending)}
.city[data-state=taken] .city-name{fill:var(--at-taken)}
.city[data-state=taken] .city-dot,
.city[data-state=pending] .city-dot{display:none}
.city-icon{display:none}
.city[data-state=taken] .city-icon,
.city[data-state=pending] .city-icon{display:block}
.city[data-state=taken]{color:var(--at-taken)}
.city[data-state=pending]{color:var(--at-pending)}
/* A city whose label would sit on top of the one being read fades out for as
   long as the pointer stays. Only the ones that actually overlap. */
.city{transition:transform .22s cubic-bezier(.34,1.3,.64,1),opacity .18s ease}
.city[data-state]:hover{transform:scale(1.12)}
.city.is-covered{opacity:0;pointer-events:none}

/* Freie Plätze atmen leicht: Aufmerksamkeit ohne Zappeln. Unter dem Zeiger
   steht der Punkt still, sonst wandert er dem Cursor davon. */
@keyframes cityPulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.62;transform:scale(1.18)}
}
.city[data-state=open] .city-dot{
  transform-box:fill-box;transform-origin:center;
  animation:cityPulse 2.8s ease-in-out infinite;
}
.city[data-state=open]:nth-of-type(3n) .city-dot{animation-delay:-.9s}
.city[data-state=open]:nth-of-type(3n+1) .city-dot{animation-delay:-1.8s}
.city[data-state=open]:hover .city-dot{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
  .city{transition:none}
  .city[data-state=open] .city-dot{animation:none}
}
.city-halo{r:0;fill:currentColor;opacity:0;transition:r .2s ease,opacity .2s ease}
.city[data-state]:hover .city-halo{r:20;opacity:.22}
.city[data-state]:hover .city-name{fill:#fff}
.city-hint{
  font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.05em;
  opacity:0;transition:opacity .2s ease;
  paint-order:stroke;stroke:var(--deep);stroke-width:3.5px;stroke-linejoin:round;
}
.city[data-state]:hover .city-hint{opacity:1}
.city[data-state=open] .city-hint{fill:var(--at-open)}
.city[data-state=pending] .city-hint{fill:var(--at-pending)}
.city[data-state=taken] .city-hint{fill:var(--at-taken)}
.city-hit{fill:transparent;pointer-events:auto;cursor:pointer}
.map-legend{
  list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(14px,1.8vw,28px);margin:clamp(16px,1.8vw,24px) 0 0;padding:0;
}
.map-legend li{
  display:flex;align-items:center;gap:9px;font-size:11.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:#b7c3b4;
}
.lg-dot{width:10px;height:10px;border-radius:50%;background:#8fa08f}
.map-legend li[data-state=open] .lg-dot{background:var(--at-open)}
.lg-mark{width:17px;height:15px}
.map-legend li[data-state=pending] .lg-mark{color:var(--at-pending)}
.map-legend li[data-state=taken] .lg-mark{color:var(--at-taken)}
.territory-list.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;display:block;
}
.territory-list{
  list-style:none;margin:clamp(24px,2.6vw,36px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);column-gap:clamp(20px,2.4vw,40px);
}
.territory-list li{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:11px 0;border-bottom:1px solid #ffffff1a;
}
.t-city{font-size:14px;font-weight:700}
.territory-list li[data-state=taken] .t-city{color:var(--at-taken);text-decoration:line-through;text-decoration-thickness:1px}
.t-status{
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:4px 9px;border-radius:100px;border:1px solid #ffffff2b;color:#b7c3b4;white-space:nowrap;
}
.territory-list li[data-state=open] .t-status{background:var(--at-open);border-color:transparent;color:#0d3b34}
.territory-list li[data-state=pending] .t-status{background:var(--at-pending);border-color:transparent;color:#3b2f0c}
@media(max-width:900px){
  .territory-list{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
  .city-name,.city-hint{display:none}
  .city[data-state=taken] .city-name,
  .city[data-state=pending] .city-name{display:block;font-size:26px}
  .city-dot{r:11;stroke-width:4}
}
@media(max-width:560px){.territory-list{grid-template-columns:1fr}}

/* --- 7 · FAQ -------------------------------------------------------- */
.faq{margin:clamp(28px,3.2vw,44px) 0 0;border-top:1px solid var(--rule);max-width:900px}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  cursor:pointer;list-style:none;padding:clamp(18px,2vw,24px) 44px clamp(18px,2vw,24px) 0;
  position:relative;font-size:clamp(15px,1.15vw,17.5px);font-weight:700;line-height:1.4;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'';position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:1.8px solid var(--gold);border-bottom:1.8px solid var(--gold);
  transform:translateY(-70%) rotate(45deg);transition:transform .22s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq p{margin:0 0 clamp(20px,2.2vw,26px);max-width:none;font-size:clamp(14.5px,1.05vw,16px);line-height:1.65;color:var(--muted)}

/* --- 8 · Booking ---------------------------------------------------- */
.booking-chips{
  list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  margin:clamp(22px,2.4vw,32px) 0 0;padding:0;
}
.booking-chips li{
  padding:9px 16px;border:1px solid #ffffff33;border-radius:100px;
  font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#d3dccf;
}
.booking{
  position:relative;margin:clamp(26px,3vw,40px) 0 0;padding:clamp(28px,3.4vw,48px) clamp(20px,2.4vw,36px);
  min-height:clamp(280px,26vw,360px);display:grid;place-items:center;
  border:1px solid #ffffff26;border-radius:12px;background:#ffffff0a;overflow:hidden;
}
.booking-preview{position:absolute;inset:0;padding:20px 24px;opacity:.16}
.booking-head{font-family:var(--serif);font-size:17px;color:#cfd8cb;display:flex;align-items:center;gap:12px}
.booking-tag{
  padding:4px 10px;border:1px solid #ffffff33;border-radius:100px;
  font-family:var(--sans);font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
}
.booking-grid{
  margin-top:16px;height:calc(100% - 46px);
  display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:1fr;gap:8px;
}
.booking-grid i{border-radius:6px;background:#ffffff0f}
.booking-action{position:relative;display:grid;justify-items:center;gap:16px}
.booking-note{margin:0;max-width:46ch;font-size:12.5px;line-height:1.6;color:#b3bfb1}
.booking-note a{color:#e7ecdf}
.booking-direct{margin:clamp(22px,2.4vw,32px) 0 0;font-size:14px;color:#c8d2c4}
.booking-direct a{color:var(--on-deep);font-weight:700}

/* --- Footer --------------------------------------------------------- */
.site-footer{padding:clamp(34px,3.6vw,52px) var(--gutter);border-top:1px solid var(--rule);background:var(--paper)}
.footer-inner{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,2.4vw,40px);justify-content:space-between}
.sprite{display:none}
.footer-mark{display:block;line-height:0;color:var(--muted)}
.footer-mark svg{display:block;height:14px;width:auto}
.footer-mark:hover{color:var(--green)}
.footer-nav{display:flex;flex-wrap:wrap;gap:clamp(14px,1.8vw,28px)}
.footer-nav a{font-size:13px;color:var(--muted);text-decoration:none}
.footer-nav a:hover{color:var(--green)}
/* The privacy control is a button (it opens the consent sheet), styled as its sibling footer links. */
.footer-nav .consent-control{margin:0;padding:0;border:0;background:none;font:inherit;font-size:13px;color:var(--muted);cursor:pointer}
.footer-nav .consent-control:hover{color:var(--green)}
.footer-note{margin:0;font-size:12.5px;color:var(--muted)}

/* --- Masthead CTA --------------------------------------------------- */
.masthead-end{display:flex;align-items:center;gap:clamp(16px,2vw,32px)}
.masthead-cta{
  padding:10px 18px;border-radius:5px;background:var(--green);color:var(--paper);
  text-decoration:none;font-size:12.5px;font-weight:700;white-space:nowrap;
  transition:background .18s ease;
}
.masthead-cta:hover{background:var(--green-dark)}
.masthead-cta .cta-short{display:none}

@media(max-width:820px){
  .quote-card{grid-template-columns:1fr}
  .quote-id{width:auto;grid-template-columns:auto 1fr;justify-items:start;align-items:center;gap:22px}
  .quote-logo{width:clamp(120px,34vw,190px)}
  .result-row{grid-template-columns:1fr}
  .footer-inner{flex-direction:column;align-items:flex-start;gap:20px}
}
@media(max-width:600px){
  .masthead-claim{display:none}
  .band{padding-inline:var(--gutter)}
  .booking-preview{display:none}
}

/* ======================================================================
   Theme. The dark values live once in --dk-*; the two blocks below only map
   them, so the palettes can never drift apart. The film now follows the theme
   with dedicated dark glass renders; the deep band keeps its own colour.
   ====================================================================== */
:root{
  --dk-paper:#121a15;
  --dk-card:#19231c;
  --dk-band-alt:#171f1a;
  --dk-green:#e7eee3;
  --dk-green-dark:#ffffff;
  --dk-green-soft:#b2c0ae;
  --dk-muted:#9aa898;
  --dk-gold:#cfae67;
  --dk-rule:#2a352c;
  --dk-masthead-bg:#121a15f2;
  --dk-warranty-bg:#1a2318;
  --dk-warranty-border:#cfae6740;
  --dk-chrome:#202a22;
  --dk-chrome-dot:#3a463c;
  --dk-shot-a:#1b241d;
  --dk-shot-b:#18201a;
  --dk-shot-label:#6d7a6d;
}
/* System preference, unless the reader has explicitly chosen light. */
@media(prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --paper:var(--dk-paper);--card:var(--dk-card);--band-alt:var(--dk-band-alt);--green:var(--dk-green);
    --green-dark:var(--dk-green-dark);--green-soft:var(--dk-green-soft);--muted:var(--dk-muted);
    --gold:var(--dk-gold);--rule:var(--dk-rule);--masthead-bg:var(--dk-masthead-bg);
    --warranty-bg:var(--dk-warranty-bg);--warranty-border:var(--dk-warranty-border);
    --chrome:var(--dk-chrome);--chrome-dot:var(--dk-chrome-dot);
    --shot-a:var(--dk-shot-a);--shot-b:var(--dk-shot-b);--shot-label:var(--dk-shot-label);
  }
}
/* Explicit choice from the toggle wins in both directions. */
:root[data-theme=dark]{
  --paper:var(--dk-paper);--card:var(--dk-card);--band-alt:var(--dk-band-alt);--green:var(--dk-green);
  --green-dark:var(--dk-green-dark);--green-soft:var(--dk-green-soft);--muted:var(--dk-muted);
  --gold:var(--dk-gold);--rule:var(--dk-rule);--masthead-bg:var(--dk-masthead-bg);
  --warranty-bg:var(--dk-warranty-bg);--warranty-border:var(--dk-warranty-border);
  --chrome:var(--dk-chrome);--chrome-dot:var(--dk-chrome-dot);
  --shot-a:var(--dk-shot-a);--shot-b:var(--dk-shot-b);--shot-label:var(--dk-shot-label);
}
/* The dark film blends into the hero, with no light panel or frame. */
:root[data-effective=dark] .film-shell{border:0;border-radius:0}
:root[data-effective=dark] .player button:hover{background:#e7eee30d;color:var(--green)}
:root[data-effective=dark] .shot-frame{box-shadow:0 24px 60px -30px #00000066}
:root[data-effective=dark] .quote-portrait,
:root[data-effective=dark] .quote-logo{filter:brightness(.88)}
:root[data-effective=dark] .band-card{border-block-color:#243028}

/* --- Theme toggle: always reachable, also while the masthead is hidden --- */
.theme-toggle{
  position:fixed;z-index:30;top:clamp(13px,1.4vw,19px);right:var(--gutter);
  display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:var(--masthead-bg);border:1px solid var(--rule);color:var(--green);
  cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.theme-toggle:hover{border-color:color-mix(in srgb,var(--green) 45%,transparent)}
.theme-toggle svg{width:17px;height:17px}
.theme-toggle .icon-sun{display:none}
:root[data-effective=dark] .theme-toggle .icon-sun{display:block}
:root[data-effective=dark] .theme-toggle .icon-moon{display:none}
.masthead{padding-right:calc(var(--gutter) + 52px)}

/* ======================================================================
   Phones. Last block in the file so it wins over the section styles above:
   labels that stay legible, targets that stay tappable, a header that fits.
   ====================================================================== */
@media(max-width:900px){
  .kicker{font-size:11.5px}
  .result-row dt,.warranty-label{font-size:11.5px}
  .map-legend li{font-size:12px}
  .booking-chips li{font-size:12px}
  .theme-toggle{width:40px;height:40px}
  .faq summary{padding-block:20px}
  /* The calendar preview is hidden here, so the box should hug its button. */
  .booking{min-height:0;padding-block:clamp(26px,7vw,36px)}
  /* Stand-alone links need a hit area of their own, not just their text box. */
  .footer-nav a,.footer-nav .consent-control{display:inline-block;padding-block:7px}
  .wordmark,.footer-mark{padding-block:8px}
  /* The masthead is hidden at the top, but the theme toggle is not: start
     the headline below it so the two never overlap. */
  .hero{padding-top:calc(clamp(13px,1.4vw,19px) + 40px + 16px)}
  .guide-close{width:44px;height:44px;top:6px;right:6px}
}
@media(max-width:520px){
  .masthead-cta .cta-long{display:none}
  .masthead-cta .cta-short{display:inline}
  .masthead-cta{padding:12px 16px}
  .wordmark svg{height:12px}
  .masthead{padding-right:calc(var(--gutter) + 48px)}
}

/* ======================================================================
   Das Buchungsformular liegt im Kalenderrahmen, nicht in einem Dialog.
   ====================================================================== */
.booking-form{position:relative;display:grid;justify-items:center;gap:16px;width:min(100%,440px)}
.booking-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}
.booking-form .field{display:grid;gap:6px;margin:0;text-align:left}
.booking-form label{
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#b3bfb1;
}
.booking-form input{
  width:100%;padding:12px 13px;border:1px solid #ffffff2e;border-radius:7px;
  background:#ffffff12;color:#eef0e6;font-size:15px;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.booking-form input::placeholder{color:#8fa08f}
.booking-form input:focus-visible{
  /* Der transparente Umriss bleibt für erzwungene Farbmodi stehen. */
  outline:2px solid transparent;outline-offset:0;
  border-color:#e7c574b3;box-shadow:0 0 0 3px #e7c5741f;background:#ffffff1c;
}
.booking-form input:user-invalid{border-color:#e79a86}
.booking-form .cta-light{width:100%;justify-content:center}
@media(max-width:560px){
  .booking-fields{grid-template-columns:1fr}
}

/* ======================================================================
   Feature overview. Four that ship today in a 2x2 grid, the announced one
   set apart below so a date in the future never reads as available now.
   ====================================================================== */
.features{
  list-style:none;margin:clamp(30px,3.4vw,46px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:10px;overflow:hidden;
}
.features li{
  background:var(--card);padding:clamp(24px,2.6vw,34px);
  display:grid;grid-template-columns:auto 1fr;gap:6px clamp(16px,1.6vw,22px);align-content:start;
}
.feature-icon{width:26px;height:26px;color:var(--gold);grid-row:span 2;margin-top:2px}
.features h3{margin:0;font-size:clamp(15.5px,1.2vw,18px);line-height:1.3}
.features p{margin:0;font-size:clamp(13.5px,1vw,15px);line-height:1.6;color:var(--muted)}

.features-more{
  margin:clamp(12px,1.2vw,16px) 0 0;padding-left:clamp(24px,2.6vw,34px);
  font-family:var(--serif);font-style:italic;font-size:clamp(15px,1.15vw,17px);color:var(--muted);
}
.feature-ahead{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,1.6vw,24px);align-items:start;
  margin:clamp(14px,1.6vw,20px) 0 0;padding:clamp(22px,2.4vw,30px) clamp(24px,2.6vw,34px);
  border:1px dashed var(--warranty-border);border-radius:10px;background:transparent;
}
.feature-ahead .feature-icon{grid-row:auto;margin-top:1px}
.feature-flag{
  display:inline-block;margin-left:10px;padding:4px 11px;border-radius:100px;vertical-align:.12em;
  background:var(--gold-light);color:#3b2f0c;
  font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
}
.feature-ahead h3{margin:0 0 7px;font-size:clamp(15.5px,1.2vw,18px);line-height:1.45;text-wrap:balance}
.feature-ahead p{margin:0;font-size:clamp(13.5px,1vw,15px);line-height:1.6;color:var(--muted);max-width:60ch}

@media(max-width:760px){
  .features{grid-template-columns:1fr}
}

/* ======================================================================
   Wer im Gespräch gegenübersitzt, vor dem Kalender statt danach.
   ====================================================================== */
.hosts{display:grid;justify-items:center;gap:14px;margin:clamp(26px,3vw,38px) 0 0}
.host-faces{list-style:none;display:flex;margin:0;padding:0}
.host-faces li{margin-left:-16px}
.host-faces li:first-child{margin-left:0}
.host-faces img{
  display:block;width:clamp(58px,5.4vw,72px);height:auto;aspect-ratio:1;
  border-radius:50%;object-fit:cover;
  border:2px solid var(--deep);box-shadow:0 6px 18px -8px #0006;
}
.host-line{margin:0;font-size:clamp(13.5px,1vw,15px);color:#c8d2c4}
@media(max-width:520px){
  .host-faces li{margin-left:-12px}
  .host-line{font-size:13px;text-wrap:balance}
}

/* ======================================================================
   Produktbilder als Galerie. Pfeile erscheinen beim Überfahren, bleiben
   aber per Tastatur und auf Touch dauerhaft erreichbar.
   ====================================================================== */
.shot-frame{position:relative}
.shot-slides{list-style:none;margin:0;padding:0;position:relative;aspect-ratio:3/2}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .5s ease}
.slide.is-current{opacity:1}
.slide img{display:block;width:100%;height:100%;object-fit:cover}
.shot-arrow{
  position:absolute;top:calc(50% + 20px);transform:translateY(-50%);
  display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:#fffefbe6;color:var(--deep);cursor:pointer;
  opacity:0;transition:opacity .2s ease,background .2s ease;
  box-shadow:0 6px 20px -8px #0000004d;
}
.shot-arrow svg{width:19px;height:19px}
.shot-prev{left:14px}
.shot-next{right:14px}
.shot-frame:hover .shot-arrow,
.shot-arrow:focus-visible{opacity:1}
.shot-arrow:hover{background:#fff}
.shot-dots{display:flex;justify-content:center;gap:2px;margin-top:10px}
.shot-dot{
  /* Der Punkt bleibt 8px, die Trefferfläche ist 24px: background-clip malt
     die Farbe nur in den Inhaltsbereich. */
  width:24px;height:24px;padding:8px;border-radius:50%;cursor:pointer;
  background-color:color-mix(in srgb,var(--green) 22%,transparent);background-clip:content-box;
  transition:background .2s ease;
}
/* background-color, nicht background: die Kurzschreibweise würde
   background-clip zurücksetzen und den Punkt auf 24px aufblasen. */
.shot-dot[aria-current=true]{background-color:var(--gold)}
.shot-dot:hover{background-color:color-mix(in srgb,var(--green) 45%,transparent)}
@media(hover:none){.shot-arrow{opacity:1}}
@media(prefers-reduced-motion:reduce){.slide{transition:none}}

/* --- Buchung: beide Zustände liegen in derselben Rasterzelle, es wird nur
       überblendet. Dadurch bewegt sich kein Element, auch der Knopf nicht. --- */
.booking-swap{display:grid;width:100%}
.booking-swap > *{grid-area:1/1;margin:0;transition:opacity .26s ease,visibility .26s}
.booking-form[data-stage="1"] .booking-fields,
.booking-form[data-stage="2"] .consent{opacity:0;visibility:hidden;pointer-events:none}
.booking-form .label-then{display:none}
.booking-form[data-stage="2"] .label-first{display:none}
.booking-form[data-stage="2"] .label-then{display:inline}
.consent{
  display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;
  text-align:left;font-size:12.5px;line-height:1.5;color:#b3bfb1;align-self:center;
}
.consent input{
  width:20px;height:20px;margin:0;accent-color:var(--gold-light);cursor:pointer;flex-shrink:0;
}
.consent label{cursor:pointer;font:inherit;text-transform:none;letter-spacing:normal;color:inherit}
.consent a{color:#e7ecdf}

/* Ohne Haken keine Buchung: die Zeile stößt kurz an, statt einer Browser-Blase. */
@keyframes nudge{
  0%,100%{transform:translateX(0)}
  18%{transform:translateX(-6px)}
  38%{transform:translateX(6px)}
  58%{transform:translateX(-4px)}
  78%{transform:translateX(3px)}
}
.consent.is-nudged{animation:nudge .44s cubic-bezier(.36,.07,.19,.97)}
.consent.is-nudged label{color:var(--gold-light)}
@media(prefers-reduced-motion:reduce){
  .consent.is-nudged{animation:none}
  .consent.is-nudged label{transition:color .2s ease}
}

.booking-form .label-then{display:none}
.booking-form[data-stage="2"] .label-first{display:none}
.booking-form[data-stage="2"] .label-then{display:inline}

/* Schlusszeile der Funktionen: was fehlt, wird gebaut. */
.features-note{
  margin:clamp(18px,2vw,26px) 0 0;padding-left:clamp(16px,1.6vw,20px);
  border-left:2px solid var(--gold);
  font-size:clamp(15px,1.15vw,17.5px);line-height:1.5;color:var(--green);
}
.features-note strong{display:block;font-weight:700}
.features-note span{display:block;font-weight:400;color:var(--green-soft)}

/* --- Kalender im Kasten. Cal.com wird erst nach Zustimmung und Klick geladen,
       dann tritt die eigene Oberfläche ab und der Kasten gehört dem Embed. --- */
.booking-embed{width:100%}
.booking.is-embedded{
  min-height:0;padding:clamp(10px,1.2vw,16px);
  background:var(--card);border-color:var(--rule);
}
.booking.is-embedded .booking-preview,
.booking.is-embedded .booking-form{display:none}
/* Die Höhe deckeln: solange das Zeitraster in Cal.com auf 20 Minuten steht,
   sind es 48 Zeitfelder. Mit 60-Minuten-Raster bleibt der Kasten darunter. */
.booking.is-embedded .booking-embed{
  min-height:min(58svh,460px);max-height:min(74svh,660px);
  overflow:auto;overscroll-behavior:contain;border-radius:8px;
}
.booking-fallback{margin:14px 0 0;text-align:center;font-size:13.5px;color:#b3bfb1}
.booking-fallback a{color:var(--on-deep);font-weight:700}
.booking-embed iframe{border-radius:8px}

/* ======================================================================
   Letzter Block der Datei, damit diese Werte die Sektionsstile darüber
   schlagen: Beschriftungen bleiben lesbar, Ziele bleiben tippbar.
   ====================================================================== */
@media(max-width:900px){
  .feature-flag{font-size:11.5px}
  .booking-form label{font-size:11.5px}
  .booking-tag{font-size:11px}
  .booking-fallback a,.booking-direct a{display:inline-block;padding-block:6px}
  .consent a{padding-block:6px}
  /* Kein Scrollbereich im Scrollbereich: auf dem Handy wächst der Kalender
     einfach mit, die Seite scrollt wie gewohnt. */
  .booking.is-embedded .booking-embed{max-height:none;min-height:0;overflow:visible}
}

/* iOS Safari zooms into any field under 16px on focus. At the end of the
   file and as specific as the field rules, so it wins over both forms. */
@media(max-width:900px){
  .guide-form input[type=text],.guide-form input[type=email],.guide-form input[type=tel],
  .guide-form select,.booking-form input{font-size:16px}
}