/* ============================================================
   HOTELFREUNDE, Unterseite /website
   Eigenständiges Stylesheet. Früher lag hier das Stylesheet der
   KI-Seite darunter und wurde überschrieben, daher kamen fünf
   Goldtöne, zwei Orangetöne und eckige Knöpfe, die es auf der
   Hauptseite nicht gibt. Jetzt gelten die Farben der Hauptseite:
   Ink, Papier, Flame, Sun. Eine dunkle Fläche (Preise), eine
   Flame-Fläche (Kontakt), sonst nur zwei helle Töne.
   ============================================================ */

@font-face{font-family:Archivo;src:url('../fonts/archivo-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Fraunces;src:url('../fonts/fraunces-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}

:root{
  --ink:#10181C; --ink-2:#48545B; --muted:#6B7479;
  --paper:#FFFFFF; --tint:#F6EFE4; --card:#FFFFFF;
  --flame:#F44316; --flame-deep:#B92B08; --sun:#FFD04A;
  --line:rgba(16,24,28,.12); --line-strong:rgba(16,24,28,.22);
  --dark-line:rgba(255,255,255,.14); --dark-muted:#B9C2C6;
  --shell:1240px; --side:40px; --r:10px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-family:Fraunces,Georgia,serif;font-weight:700;letter-spacing:-.035em;line-height:1.02;text-wrap:balance;font-variation-settings:"SOFT" 55,"WONK" 0}
p{margin:0}
h1 em,h2 em{font-style:normal;color:var(--flame)}
.shell{width:min(var(--shell),calc(100% - var(--side)*2));margin-inline:auto}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* hidden muss immer gewinnen. Vorher überschrieb .plan-gift{display:block}
   das Attribut, und „2 Monate geschenkt" stand auch bei monatlich da. */
[hidden]{display:none!important}

.skip-link{position:fixed;top:10px;left:15px;z-index:200;padding:12px 20px;border-radius:8px;background:var(--ink);color:#fff;transform:translateY(-180%)}
.skip-link:focus{transform:none}

/* ---------- Überzeile ---------- */
.eyebrow{display:block;margin-bottom:18px;color:var(--flame-deep);font-size:.74rem;font-weight:700;letter-spacing:.2em;line-height:1.5;text-transform:uppercase}

/* ---------- Knöpfe, wie auf der Hauptseite ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 24px;border:0;border-radius:5px;background:var(--flame);color:#fff;font:inherit;font-size:.95rem;font-weight:700;line-height:1.2;text-decoration:none;cursor:pointer;box-shadow:4px 4px 0 rgba(16,24,28,.24);transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.btn:hover{transform:translate(-1px,-2px);box-shadow:6px 6px 0 rgba(16,24,28,.28)}
.btn:focus-visible,.text-link:focus-visible,summary:focus-visible,.nav-links a:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.btn-hero{padding:17px 27px;box-shadow:5px 5px 0 var(--sun)}
.btn-hero:hover{box-shadow:8px 8px 0 var(--sun)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff;box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-small{padding:13px 22px;font-size:.98rem;box-shadow:3px 3px 0 rgba(16,24,28,.2)}
.btn-dark{background:var(--ink);box-shadow:4px 4px 0 var(--sun)}
.btn-dark:hover{box-shadow:6px 6px 0 var(--sun)}
.text-link{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--flame);text-decoration-thickness:2px;text-underline-offset:6px}

/* ---------- Kopfzeile ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line)}
.nav-shell{display:flex;align-items:center;gap:24px;max-width:1440px;margin:auto;padding:14px var(--side)}
.brand{font-family:Fraunces,Georgia,serif;font-size:1.6rem;font-weight:750;line-height:1;letter-spacing:-.045em;text-decoration:none;white-space:nowrap;font-variation-settings:"SOFT" 55,"WONK" 0}
.brand>span{color:var(--flame)}
.brand>b{color:var(--sun)}
/* Menüband seit 24.09.2026 ohne „Websites für Hotels" neben dem Logo,
   Links und Knopf größer (vorher .84rem und .82rem). */
.nav-links{display:flex;gap:34px;margin-left:auto}
.nav-links a{color:var(--ink-2);font-size:1.02rem;font-weight:600;text-decoration:none}
.nav-links a:hover{color:var(--flame-deep)}
/* Menüpunkt „Ratgeber“ mit Aufklappmenü (seit 12.10.2026, Martin: die Links zu Mieten und Kosten gehören ins Menü, nicht unter die Preise). Öffnet per Hover oder Fokus, ohne JS. Am Handy ist das ganze Menü ausgeblendet, dort stehen die Links im Footer. */
.nav-links{align-items:center}
.nav-drop{position:relative}
.nav-drop::after{content:"";position:absolute;left:-12px;right:-12px;top:100%;height:16px}
.nav-drop-btn{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;color:var(--ink-2);font:inherit;font-size:1.02rem;font-weight:600;line-height:inherit;cursor:pointer}
.nav-drop-btn span{font-size:.7rem}
.nav-drop-btn:hover,.nav-drop:hover .nav-drop-btn,.nav-drop:focus-within .nav-drop-btn,.nav-drop.aktiv .nav-drop-btn{color:var(--flame-deep)}
.nav-drop-btn:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.nav-drop-menu{position:absolute;left:50%;top:calc(100% + 12px);display:none;min-width:300px;padding:8px;border:1px solid var(--line-strong);border-radius:var(--r);background:#fff;box-shadow:0 18px 40px rgba(16,24,28,.14);transform:translateX(-50%)}
.nav-drop:hover .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu{display:block}
.nav-drop-menu a{display:block;padding:11px 14px;border-radius:6px;font-size:.98rem;white-space:nowrap}
.nav-drop-menu a:hover,.nav-drop-menu a[aria-current=page]{background:var(--tint);color:var(--ink)}
/* Handymenü (seit 12.10.2026, Martin: am Handy soll man auch ins Menü kommen und alle Seiten aufklappen können). Native details-Elemente, geht ohne JS. Ab 821 px ausgeblendet, dort gilt das Menü oben. */
.nav-mobil{display:none}
.nav-mobil>summary{display:grid;place-items:center;width:44px;height:44px;margin-right:-8px;border-radius:8px;list-style:none;cursor:pointer}
.nav-mobil>summary::-webkit-details-marker,.nav-mobil-sub>summary::-webkit-details-marker{display:none}
.nav-mobil>summary:focus-visible,.nav-mobil-sub>summary:focus-visible,.nav-mobil-panel a:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.nav-burger,.nav-burger::before,.nav-burger::after{display:block;position:relative;width:22px;height:2px;border-radius:2px;background:var(--ink);content:"";transition:transform .2s ease,background .2s ease,top .2s ease}
.nav-burger::before{top:-7px}
.nav-burger::after{top:5px}
.nav-mobil[open] .nav-burger{background:transparent}
.nav-mobil[open] .nav-burger::before{top:0;transform:rotate(45deg)}
.nav-mobil[open] .nav-burger::after{top:-2px;transform:rotate(-45deg)}
.nav-mobil-panel{position:absolute;left:0;right:0;top:100%;max-height:calc(100vh - 64px);overflow-y:auto;padding:6px var(--side) 22px;border-bottom:1px solid var(--line-strong);background:#fff;box-shadow:0 22px 40px rgba(16,24,28,.14)}
.nav-mobil-panel>a,.nav-mobil-sub>summary{display:flex;align-items:center;justify-content:space-between;min-height:52px;border-bottom:1px solid var(--line);color:var(--ink);font-size:1.12rem;font-weight:600;text-decoration:none;list-style:none;cursor:pointer}
.nav-mobil-sub>summary::after{content:"+";display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--flame);color:#fff;font-size:1.1rem;font-weight:700;line-height:1}
.nav-mobil-sub[open]>summary::after{content:"−"}
.nav-mobil-sub>a{display:block;padding:13px 0 13px 18px;border-bottom:1px solid var(--line);color:var(--ink-2);font-size:1.02rem;font-weight:500;text-decoration:none}
.nav-mobil-panel a[aria-current=page]{color:var(--flame-deep);font-weight:700}
@media(max-width:820px){.nav-mobil{display:block}.nav-shell .btn-small{margin-left:auto}}
.reading-progress{height:3px;background:var(--flame);transform:scaleX(0);transform-origin:left}

/* ---------- Abschnitte ---------- */
.section{padding-block:clamp(80px,9vw,128px)}
/* Seit 12.10.2026 (Martin: weiß statt zwei Beigetöne): Beige nur noch als weicher Verlauf von Weiß über Beige zurück zu Weiß, ohne harte Kante. */
.section-tint{background:linear-gradient(180deg,#FFFFFF 0,var(--tint) clamp(64px,9vw,140px),var(--tint) calc(100% - clamp(64px,9vw,140px)),#FFFFFF 100%)}
.section-dark{background:var(--ink);color:#fff}
.section-dark .eyebrow{color:var(--sun)}
.section-dark h2 em{color:var(--sun)}
.section-flame{background:var(--flame);color:var(--ink)}
.section-flame .eyebrow{color:#3a1206}
.section-flame h2 em{color:#fff}
.section-head{max-width:760px}
.section-head-center{max-width:940px;margin-inline:auto;text-align:center}
/* Preis-Überschrift: Bis 10.10.2026 war sie ein ganzer Satz und deshalb
   kleiner gesetzt (Martin, 24.09.2026). Seit 11.10.2026 ist sie kurz
   („Ein System, ein Preis"), der Agenturvergleich steht als Absatz darunter. */
#preise .section-head-center .section-intro{max-width:60ch;margin:18px auto 0;color:var(--dark-muted)}

.section-head h2{font-size:clamp(2.2rem,4.2vw,3.4rem)}
.section-head-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(40px,7vw,100px);align-items:end;max-width:none}
.section-intro{color:var(--ink-2);font-size:1.05rem;line-height:1.72}

/* ---------- 1. Hero ---------- */
/* Der Hintergrund liegt auf .hero-flow, das Hero und Probleme umschließt.
   Vorher saß er auf .hero::before mit orangem Strich unten, und der gelbe
   Schein wurde an der Hero-Kante abgeschnitten. Jetzt läuft er durch und
   endet unten in --paper, damit auch zur nächsten Sektion keine Kante bleibt. */
.hero-flow{background:radial-gradient(circle at 8% 110px,rgba(244,67,22,.12),transparent clamp(320px,30vw,600px)),radial-gradient(circle at 92% 34%,rgba(255,208,74,.3),transparent clamp(340px,34vw,680px)),linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 100%)}
/* Nur seitlich abschneiden. Nach unten muss der Schatten des Mockups
   auslaufen dürfen, sonst entsteht am Handy wieder eine Kante. */
.hero{position:relative;padding:clamp(56px,7vw,96px) 0 0;overflow-x:clip}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(40px,6vw,88px);align-items:center}
.hero-grid>*{min-width:0}
/* Seit 05.10.2026: Die Zeile über dem Slogan ist die H1 (Stichwort fürs Ranking, sieht aus wie eine Eyebrow), der Slogan ist ein Absatz im alten H1-Look. */
h1.eyebrow{font-family:inherit;font-variation-settings:normal;text-wrap:wrap}
/* Slogan seit 11.10.2026 (Martin): jeder der drei Sätze in genau einer
   Zeile. Die Größe hängt an der Breite der Textspalte (cqi), gemessen an
   der längsten Zeile „Mehr Zeit für deine Gäste." (Breite rund 11,5 × die
   Schriftgröße, 8,4cqi lässt etwas Luft, höchstens 3.2rem, damit es auf Tablets nicht größer wird als vorher). Vorher clamp(2.7rem,5.1vw,4.5rem),
   da brach die dritte Zeile um. Bei neuem Slogan neu messen. */
.hero-copy{container-type:inline-size}
.hero-slogan{font-family:Fraunces,Georgia,serif;font-weight:700;font-size:clamp(1.4rem,8.4cqi,3.2rem);line-height:.98;letter-spacing:-.045em;font-variation-settings:"SOFT" 55,"WONK" 0}
.hero-slogan em{font-style:normal;color:var(--flame)}
.hero .lead{max-width:40ch;margin-top:26px;color:var(--ink-2);font-size:clamp(1.06rem,1.35vw,1.2rem);line-height:1.62}
.hero-proof{display:flex;align-items:center;gap:16px;max-width:560px;margin-top:28px;padding:14px 18px;border:1px solid var(--line);border-radius:var(--r);background:rgba(255,255,255,.7)}
.proof-faces{display:flex;flex:0 0 auto}
.proof-faces img{width:46px;height:46px;border:3px solid #fff;border-radius:50%;object-fit:cover;object-position:center 22%;box-shadow:0 4px 12px rgba(16,24,28,.12)}
.proof-faces img+img{margin-left:-14px}
.proof-body{display:flex;min-width:0;flex-direction:column;gap:5px}
.proof-stars{color:var(--sun);font-size:.95rem;letter-spacing:.14em;line-height:1;text-shadow:0 1px 0 rgba(16,24,28,.14)}
.hero-proof p{color:var(--ink-2);font-size:.9rem;line-height:1.5}
.hero-proof strong{color:var(--ink);white-space:nowrap}
.hero-acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.hero-price{margin-top:18px;color:var(--ink-2);font-size:.92rem}
.hero-price strong{color:var(--ink)}

.hero-visual{position:relative;padding:20px 26px 40px 0}
.browser{overflow:hidden;border:1px solid var(--line-strong);border-radius:12px;background:#fff;box-shadow:14px 14px 0 var(--sun),0 30px 70px rgba(16,24,28,.14);transform:rotate(.5deg)}
.browser-bar{display:flex;align-items:center;gap:6px;padding:11px 14px;border-bottom:1px solid var(--line);background:#F7F3EC}
.browser-bar i{width:9px;height:9px;border-radius:50%;background:#D8D0C4}
.browser-bar span{margin-left:12px;padding:3px 12px;border-radius:20px;background:#fff;color:var(--muted);font-size:.68rem}
.browser-page{position:relative;display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:4/3.1;padding:20px 22px 26px;background-size:cover;background-position:center 55%;color:#fff}
.browser-page::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,26,32,.55),rgba(11,26,32,.1) 45%,rgba(11,26,32,.7))}
.mock-nav,.mock-copy{position:relative}
.mock-nav{display:flex;align-items:center;gap:16px;font-size:.62rem;letter-spacing:.12em}
.mock-nav b{margin-right:auto;font-size:.7rem}
.mock-nav em{padding:6px 10px;border-radius:4px;background:var(--flame);font-style:normal;font-weight:700;letter-spacing:.04em}
.mock-copy small{display:block;margin-bottom:10px;font-size:.62rem;letter-spacing:.16em}
.mock-copy strong{font-family:Fraunces,Georgia,serif;font-size:clamp(1.6rem,2.6vw,2.3rem);font-weight:600;line-height:1;letter-spacing:-.035em}
.float-card{position:absolute;border-radius:9px;background:#fff;box-shadow:0 18px 40px rgba(16,24,28,.18)}
.float-best{top:0;right:0;padding:9px 13px;background:var(--sun);font-family:Fraunces,Georgia,serif;font-size:.9rem;font-weight:700;transform:rotate(2deg)}
.hero .lead strong{color:var(--ink)}
/* Chat-Fenster über der Beispielseite (seit 11.10.2026): sieht aus wie das
   echte Chatfenster einer Hotelwebsite (Kopf mit Hotel, Verlauf, Eingabefeld)
   und trägt die Kennzeichnung „Gäste-Chatbot“. Die zwei Blasen kommen
   nacheinander, die Antwort mit etwas Abstand wie beim Tippen. */
.float-chat{right:-14px;bottom:-14px;width:min(310px,72%);overflow:visible;border:1px solid var(--line-strong);border-radius:14px;box-shadow:8px 8px 0 rgba(255,208,74,.65),0 22px 48px rgba(16,24,28,.22);transform:rotate(1deg)}
.fc-badge{position:absolute;top:-13px;left:14px;padding:5px 11px;border-radius:20px;background:var(--flame);color:#fff;font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;box-shadow:2px 2px 0 var(--sun)}
.fc-head{display:flex;align-items:center;gap:10px;padding:18px 14px 10px;border-bottom:1px solid var(--line)}
.fc-mark{flex:none;display:block;width:32px;height:32px;border-radius:50%;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--line-strong)}
.fc-mark svg{display:block;width:100%;height:100%}
.fc-head strong,.fc-head small{display:block}
.fc-head strong{font-size:.8rem;line-height:1.2}
.fc-head small{margin-top:1px;color:var(--muted);font-size:.64rem;font-weight:600;line-height:1.3}
.fc-head small i{display:inline-block;width:7px;height:7px;margin-right:4px;border-radius:50%;background:#3E9A5B}
.fc-body{display:flex;flex-direction:column;gap:7px;padding:12px 13px;background:#FBF8F3}
.fc-body p{max-width:88%;padding:8px 11px;border-radius:12px;font-size:.78rem;line-height:1.42;animation:fcIn .45s cubic-bezier(.22,1,.36,1) both}
.fc-guest{align-self:flex-end;border-bottom-right-radius:3px;background:#FFE7A3;color:#4A3503;animation-delay:.5s}
.fc-bot{align-self:flex-start;border-bottom-left-radius:3px;background:#EEEAE3;color:var(--ink);animation-delay:1.5s}
.fc-input{display:flex;justify-content:space-between;padding:10px 14px;border-top:1px solid var(--line);border-radius:0 0 13px 13px;background:#fff;color:var(--muted);font-size:.7rem}
.fc-input span{color:var(--flame)}
@keyframes fcIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- 2. Was Hoteliers uns am Telefon sagen ----------
   Fünf Zeilen, links das Zitat, rechts die Antwort. Zeilen statt Raster,
   weil jede Karte jetzt zwei Teile hat und fünf Karten in einem Dreier-
   raster ungleich aufgehen. Weiß auf dem Hero-Verlauf. Die Anführungs-
   zeichen kommen über quotes, damit sie deutsch sind („…“). Der Einflug
   ist pro Zeile leicht versetzt. */
.voices-head{max-width:900px;margin-inline:auto;text-align:center}
.voices-head .section-intro{max-width:62ch;margin:18px auto 0}
.voices{display:grid;gap:clamp(14px,1.6vw,18px);max-width:1040px;margin:clamp(40px,5vw,60px) auto 0}
.voice{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(24px,4vw,56px);align-items:center;margin:0;padding:clamp(24px,3vw,36px) clamp(24px,3.4vw,44px);border-radius:var(--r);background:var(--card);box-shadow:0 1px 3px rgba(16,24,28,.05),0 14px 34px rgba(89,63,35,.06)}
.voice blockquote{margin:0;color:var(--ink);font-family:Fraunces,Georgia,serif;font-size:clamp(1.3rem,2vw,1.65rem);font-weight:600;line-height:1.22;letter-spacing:-.02em;text-wrap:balance;quotes:"\201E" "\201C"}
.voice blockquote p::before{content:open-quote;color:var(--flame)}
.voice blockquote p::after{content:close-quote;color:var(--flame)}
.voice-answer{padding-left:clamp(20px,2.4vw,30px);border-left:2px solid rgba(244,67,22,.35);color:var(--ink-2);font-size:1rem;line-height:1.65;text-wrap:pretty}
.voice-answer a{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--flame);text-decoration-thickness:2px;text-underline-offset:4px}
.motion-enabled .voice:nth-child(2){transition-delay:.06s}
.motion-enabled .voice:nth-child(3){transition-delay:.12s}
.motion-enabled .voice:nth-child(4){transition-delay:.18s}
.motion-enabled .voice:nth-child(5){transition-delay:.24s}

/* ---------- 4. Hauptnutzen ---------- */
.benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:clamp(40px,5vw,60px)}
.benefit{position:relative;padding:30px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);box-shadow:0 12px 28px rgba(89,63,35,.06);transition:transform .25s ease,border-color .25s ease}
.benefit:hover{transform:translateY(-3px);border-color:rgba(244,67,22,.45)}
.num{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:6px;background:var(--flame);color:#fff;font-weight:700;font-size:.95rem;box-shadow:3px 3px 0 var(--sun)}
.benefit-kicker{margin-top:22px;color:var(--flame-deep);font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.benefit h3{margin-top:8px;font-size:clamp(1.45rem,2.1vw,1.8rem);line-height:1.1}
.benefit p:not(.benefit-kicker){margin-top:12px;color:var(--ink-2);font-size:1rem}
.benefit-tag{display:inline-block;margin-top:16px;padding:4px 10px;border-radius:20px;background:var(--tint);color:var(--ink-2);font-size:.76rem;font-weight:600}
/* Seit 11.10.2026: Ergebnis als kurze H3, die Unterzeile (kicker) darunter */
.benefit .num+h3{margin-top:22px}
.benefit h3+.benefit-kicker{margin-top:8px}


/* ---------- 2b. Übergang: Statement-Band (seit 12.10.2026) ----------
   Helles Band ohne eigene Farbe (wie die Sektionen davor und danach), Text zentriert und
   schwarz (Martin, 12.10.2026 abends, vorher dunkler Hintergrund mit weißem Text). Die Wörter
   werden von website.js einzeln in .wort verpackt und leuchten beim Scrollen von blass nach
   schwarz auf. Ohne JS gibt es keine .wort, der Text steht dann in voller Farbe da. */
.filter{padding-block:clamp(72px,9vw,128px)}
.filter-in{max-width:1040px;text-align:center}
.filter-text{color:var(--ink);font-family:Fraunces,Georgia,serif;font-size:clamp(1.7rem,3.7vw,3.1rem);font-weight:600;line-height:1.2;letter-spacing:-.03em;text-wrap:balance}
.filter-text+.filter-text{margin-top:clamp(40px,6vw,84px)}
.filter-text em{font-style:normal}
.filter .wort{opacity:.2}
.filter-pfeil{display:block;margin-top:clamp(34px,5vw,60px);color:var(--flame);font-size:2.6rem;line-height:1;animation:filterPfeil 1.9s ease-in-out infinite}
@keyframes filterPfeil{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}
.fit+.google-reveal{padding-top:clamp(80px,9vw,128px)}

/* ---------- 3. Google als Prüfstand ----------
   Direkt nach den Problemen, ohne Kante (gleiches --paper wie das Ende
   des Hero-Verlaufs), deshalb oben weniger Abstand. Zentriert, damit
   „Was du aber wissen musst“, die Zahl und der Satz als eine Aussage
   gelesen werden. Das schrittweise Einblenden steht unten bei .scrub. */
.google-reveal{padding-top:clamp(40px,5vw,72px)}
.google-stage{max-width:900px;text-align:center}
.google-lead{color:var(--ink);font-family:Fraunces,Georgia,serif;font-size:clamp(1.5rem,2.8vw,2.3rem);font-weight:600;letter-spacing:-.02em;line-height:1.15}
.google-stat{margin-top:clamp(18px,2.6vw,30px);font-size:clamp(1.7rem,3.4vw,2.8rem);line-height:1.12}
.google-num{display:block}
.google-num strong{display:block;color:var(--flame);font-size:clamp(5.5rem,16vw,12rem);line-height:.9;letter-spacing:-.06em;font-variant-numeric:tabular-nums;white-space:nowrap}
.google-stat-text{display:block;max-width:24ch;margin:16px auto 0}
.google-copy{max-width:640px;margin:clamp(28px,3.6vw,42px) auto 0}
.google-copy p{margin-top:16px;color:var(--ink-2);font-size:1.05rem;line-height:1.72}
.google-copy .google-intro{margin-top:0;color:var(--ink);font-size:1.15rem;font-weight:700}
/* Quellenangabe. Kleiner als der Fließtext, damit sie belegt ohne zu stören. */
.source{max-width:60ch;margin-top:18px;color:var(--muted);font-size:.8rem;line-height:1.55}
.google-copy .source{margin:20px auto 0}

/* ---------- 5. Designbeispiele ---------- */
/* Stilauswahl. Links eine Beispiel-Startseite im Browserrahmen, rechts
   sechs Stile als Vorschaubilder. Welcher Stil zu sehen ist, entscheidet
   der gewählte Radio-Knopf über :has(), deshalb geht es auch ohne JS.
   Innen ist alles in --u gemessen (1 % der Rahmenbreite), so skaliert die
   Beispielseite wie ein Screenshot mit. Auf schmalen Rahmen wird --u
   größer und die zweispaltigen Stile stapeln sich. */
.stile{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:clamp(28px,3.4vw,48px);align-items:center;margin-top:clamp(40px,5vw,60px)}
.stil-browser{overflow:hidden;border:1px solid var(--line-strong);border-radius:12px;background:#fff;box-shadow:10px 10px 0 var(--sun),0 30px 70px rgba(16,24,28,.14)}
.stil-screens{position:relative;aspect-ratio:16/10.5;overflow:hidden;container:stil/inline-size}
.stil-mock{--u:1cqi;position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;opacity:0;visibility:hidden;transform:scale(1.03);transition:opacity .55s ease,transform .7s cubic-bezier(.22,1,.36,1),visibility 0s .55s}
.stile:has(input[value=rustikal]:checked) .m-rustikal,
.stile:has(input[value=elegant]:checked) .m-elegant,
.stile:has(input[value=minimal]:checked) .m-minimal,
.stile:has(input[value=kreativ]:checked) .m-kreativ,
.stile:has(input[value=maritim]:checked) .m-maritim,
.stile:has(input[value=natuerlich]:checked) .m-natuerlich{opacity:1;visibility:visible;transform:none;transition:opacity .55s ease,transform .7s cubic-bezier(.22,1,.36,1),visibility 0s}
@supports not selector(:has(*)){.m-rustikal{opacity:1;visibility:visible;transform:none}}

/* gemeinsame Bausteine der Beispielseiten */
.sm-nav{position:relative;z-index:1;display:flex;align-items:center;gap:calc(var(--u)*2.6);padding:calc(var(--u)*2.6) calc(var(--u)*3.6);font-size:calc(var(--u)*1.4);line-height:1.2}
.sm-logo{margin-right:auto;font-size:calc(var(--u)*2.1);white-space:nowrap}
.sm-book{padding:calc(var(--u)*.9) calc(var(--u)*1.8);font-style:normal;font-weight:700;white-space:nowrap}
.sm-body{position:relative;flex:1;display:flex;flex-direction:column;min-height:0}
.sm-eyebrow{display:block;font-size:calc(var(--u)*1.25);letter-spacing:.18em;text-transform:uppercase}
.sm-title{display:block;font-size:calc(var(--u)*6.2);line-height:.98}
.sm-cta{display:inline-block;width:fit-content;font-size:calc(var(--u)*1.45);font-weight:700}
.sm-photo{background-size:cover;background-position:center}

/* Rustikal: Holz, Bernstein, weiche kräftige Serifen, Buchungsleiste */
.m-rustikal{background:linear-gradient(180deg,rgba(28,19,11,.35),rgba(28,19,11,.05) 30%,rgba(28,19,11,.72)),url('img/hotel-bergzeit.webp') center 60%/cover;color:#F6EBDD}
.m-rustikal .sm-logo{font-family:Fraunces,Georgia,serif;font-weight:800;font-variation-settings:"SOFT" 100,"WONK" 0}
.m-rustikal .sm-book{border-radius:calc(var(--u)*.6);background:#C77D32;color:#fff}
.m-rustikal .sm-body{justify-content:flex-end;padding:0 calc(var(--u)*3.6) calc(var(--u)*3)}
.m-rustikal .sm-title{margin-top:calc(var(--u)*1.2);font-family:Fraunces,Georgia,serif;font-weight:800;letter-spacing:-.03em;font-variation-settings:"SOFT" 100,"WONK" 0}
.m-rustikal .sm-cta{margin-top:calc(var(--u)*2);padding:calc(var(--u)*1.1) calc(var(--u)*2);border-radius:calc(var(--u)*.6);background:#C77D32;color:#fff}
.sm-bookbar{display:grid;grid-template-columns:repeat(3,1fr) auto;align-items:center;gap:calc(var(--u)*2);padding:calc(var(--u)*1.6) calc(var(--u)*3.6);background:#F3E7D6;color:#3A2A1C;font-size:calc(var(--u)*1.1)}
.sm-bookbar b{display:block;font-size:calc(var(--u)*1.5)}
.sm-bookbar em{padding:calc(var(--u)*1.1) calc(var(--u)*2);border-radius:calc(var(--u)*.6);background:#3A2A1C;color:#F3E7D6;font-size:calc(var(--u)*1.35);font-style:normal;font-weight:700}

/* Elegant: Nachtblau, Gold, feine Serifen, alles mittig */
.m-elegant{background:linear-gradient(rgba(12,18,32,.66),rgba(12,18,32,.66)),url('img/stil-elegant.webp') center/cover;color:#F4EFE6;text-align:center}
.m-elegant .sm-nav{justify-content:center;border-bottom:1px solid rgba(200,169,106,.35);font-size:calc(var(--u)*1.1);letter-spacing:.24em;text-transform:uppercase}
.m-elegant .sm-logo{margin:0 calc(var(--u)*2);font-family:Fraunces,Georgia,serif;font-size:calc(var(--u)*2.2);font-weight:300;letter-spacing:.14em;font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 0}
.m-elegant .sm-book{position:absolute;right:calc(var(--u)*3.6);border:1px solid #C8A96A;color:#C8A96A;font-weight:400}
.m-elegant .sm-body{align-items:center;justify-content:center;padding:calc(var(--u)*3)}
.m-elegant .sm-eyebrow{color:#C8A96A;letter-spacing:.34em}
.sm-line{display:block;width:calc(var(--u)*7);height:1px;margin:calc(var(--u)*2) 0;background:#C8A96A}
.m-elegant .sm-title{font-family:Fraunces,Georgia,serif;font-size:calc(var(--u)*6.8);font-weight:300;line-height:1.04;letter-spacing:-.01em;font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 0}
.m-elegant .sm-cta{margin-top:calc(var(--u)*3);padding:calc(var(--u)*1.2) calc(var(--u)*2.6);border:1px solid #C8A96A;color:#C8A96A;font-size:calc(var(--u)*1.1);font-weight:400;letter-spacing:.3em;text-transform:uppercase}

/* Minimal: Weiß, Schwarz, dünne Grotesk, viel Luft, Bild als halbe Fläche */
.m-minimal{background:#fff;color:#111}
.m-minimal .sm-nav{font-family:Archivo,Arial,sans-serif;letter-spacing:.02em}
.m-minimal .sm-logo{font-weight:700;letter-spacing:.34em}
.m-minimal .sm-book{padding:0 0 calc(var(--u)*.3);border-bottom:1.5px solid #111;font-weight:400}
.m-minimal .sm-body{display:grid;grid-template-columns:1fr 1fr}
.m-minimal .sm-text{display:flex;flex-direction:column;justify-content:center;padding:0 calc(var(--u)*4) calc(var(--u)*3) calc(var(--u)*3.6)}
.m-minimal .sm-title{font-family:Archivo,Arial,sans-serif;font-size:calc(var(--u)*5.2);font-weight:300;line-height:1.02;letter-spacing:-.04em}
.m-minimal .sm-sub{margin-top:calc(var(--u)*2);color:#777;font-size:calc(var(--u)*1.4)}
.m-minimal .sm-cta{margin-top:calc(var(--u)*3);padding-bottom:calc(var(--u)*.4);border-bottom:1.5px solid #111;font-weight:400}
.m-minimal .sm-photo{background-image:url('img/stadthotel-lumen.webp')}

/* Kreativ: Gelb, Pink, verspielte Serifen, schräges Foto mit Sticker */
.m-kreativ{background:#FFD84D;color:#2A1A4A}
.m-kreativ .sm-logo{font-family:Fraunces,Georgia,serif;font-size:calc(var(--u)*2.6);font-weight:900;font-variation-settings:"SOFT" 100,"WONK" 1}
.m-kreativ .sm-logo i{color:#FF4F8B;font-style:normal}
.m-kreativ .sm-book{border-radius:99px;background:#FF4F8B;color:#fff;transform:rotate(-3deg)}
.m-kreativ .sm-body{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:calc(var(--u)*3);padding:0 calc(var(--u)*3.6) calc(var(--u)*3)}
.m-kreativ .sm-title{font-family:Fraunces,Georgia,serif;font-size:calc(var(--u)*6);font-weight:900;line-height:.95;letter-spacing:-.03em;font-variation-settings:"SOFT" 100,"WONK" 1}
.m-kreativ .sm-cta{margin-top:calc(var(--u)*2.6);padding:calc(var(--u)*1.2) calc(var(--u)*2.4);border-radius:99px;background:#2A1A4A;color:#FFD84D;box-shadow:calc(var(--u)*.5) calc(var(--u)*.5) 0 #FF4F8B}
.m-kreativ .sm-photo{position:relative;height:88%;border:calc(var(--u)*.8) solid #fff;border-radius:calc(var(--u)*3);background-image:url('img/stil-kreativ.webp');box-shadow:calc(var(--u)*1.2) calc(var(--u)*1.2) 0 #FF4F8B;transform:rotate(3deg)}
.sm-sticker{position:absolute;top:calc(var(--u)*-3);left:calc(var(--u)*-3.5);display:grid;place-items:center;width:calc(var(--u)*11);height:calc(var(--u)*11);padding:calc(var(--u)*1.2);border-radius:50%;background:#FF4F8B;color:#fff;font-size:calc(var(--u)*1.3);font-weight:800;line-height:1.1;text-align:center;transform:rotate(-12deg)}

/* Maritim: Bild oben, helle Fläche unten, Streifen, Navy und Türkis */
.m-maritim{background:#fff;color:#0E3A5B}
.m-maritim .sm-top{flex:0 0 58%;background:linear-gradient(180deg,rgba(14,58,91,.45),rgba(14,58,91,0) 45%),url('img/stil-maritim.webp') center 70%/cover;color:#fff}
.m-maritim .sm-logo{font-family:Archivo,Arial,sans-serif;font-weight:800;letter-spacing:.02em}
.m-maritim .sm-book{border-radius:99px;background:#fff;color:#0E3A5B}
.m-maritim .sm-body{justify-content:center;padding:calc(var(--u)*2.4) calc(var(--u)*3.6);border-top:calc(var(--u)*1) solid transparent;border-image:repeating-linear-gradient(90deg,#0E3A5B 0 calc(var(--u)*2),#fff 0 calc(var(--u)*4)) 1}
.m-maritim .sm-eyebrow{color:#1C9BBF;font-weight:700}
.m-maritim .sm-title{margin-top:calc(var(--u)*.8);font-family:Archivo,Arial,sans-serif;font-size:calc(var(--u)*5);font-weight:800;letter-spacing:-.035em}
.m-maritim .sm-cta{position:absolute;right:calc(var(--u)*3.6);bottom:calc(var(--u)*3);padding:calc(var(--u)*1.2) calc(var(--u)*2.4);border-radius:99px;background:#0E3A5B;color:#fff}

/* Natürlich: Salbei, Oliv, weiche Serifen, Foto im Bogen */
.m-natuerlich{background:#E7EBDD;color:#2F3A2A}
.m-natuerlich .sm-logo{font-family:Fraunces,Georgia,serif;font-weight:500;font-variation-settings:"SOFT" 100,"WONK" 0}
.m-natuerlich .sm-book{border-radius:99px;background:#5E7250;color:#fff}
.m-natuerlich .sm-body{display:grid;grid-template-columns:1.1fr .9fr;gap:calc(var(--u)*3);padding:0 calc(var(--u)*3.6) 0}
.m-natuerlich .sm-text{display:flex;flex-direction:column;justify-content:center;padding-bottom:calc(var(--u)*3)}
.m-natuerlich .sm-eyebrow{color:#5E7250;font-weight:700}
.m-natuerlich .sm-title{margin-top:calc(var(--u)*1.2);font-family:Fraunces,Georgia,serif;font-size:calc(var(--u)*6);font-weight:500;letter-spacing:-.03em;font-variation-settings:"SOFT" 100,"WONK" 0}
.m-natuerlich .sm-cta{margin-top:calc(var(--u)*2.6);padding:calc(var(--u)*1.2) calc(var(--u)*2.4);border-radius:99px;background:#5E7250;color:#fff}
.m-natuerlich .sm-photo{align-self:end;height:94%;border-radius:999px 999px 0 0;background-image:url('img/stil-natuerlich.webp')}

/* schmaler Rahmen (Handy): größere Einheit, Stile untereinander */
@container stil (max-width:520px){
  .stil-mock{--u:1.75cqi}
  .sm-link{display:none}
  .sm-bookbar{grid-template-columns:1fr 1fr}
  .sm-bookbar span:nth-child(3){display:none}
  .sm-bookbar em{grid-column:1/-1;text-align:center}
  .m-elegant .sm-book{display:none}
  .m-minimal .sm-body,.m-natuerlich .sm-body{grid-template-columns:1fr;grid-template-rows:1fr auto}
  .m-minimal .sm-photo{order:-1}
  .m-minimal .sm-text{padding:calc(var(--u)*3) calc(var(--u)*3.6)}
  .m-natuerlich .sm-photo{order:-1;justify-self:center;width:70%;height:auto;aspect-ratio:1/1;align-self:stretch}
  .m-natuerlich .sm-text{padding:calc(var(--u)*2) 0 calc(var(--u)*3)}
  .m-kreativ .sm-body{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .m-kreativ .sm-photo{justify-self:center;width:78%;height:auto;min-height:0;aspect-ratio:4/3}
  .m-maritim .sm-cta{position:static;margin-top:calc(var(--u)*2)}
  .sm-chat{max-width:74%}
  .m-rustikal .sm-chat{bottom:calc(var(--u)*19.5)}
  .m-maritim .sm-chat{top:calc(var(--u)*22)}
}

/* Auswahl rechts */
.stil-frage{margin-bottom:16px;font-family:Fraunces,Georgia,serif;font-size:1.35rem;font-weight:700;letter-spacing:-.02em}
.stil-wahl{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stil-option{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:12px;padding:8px 12px 8px 8px;border:1.5px solid var(--line);border-radius:var(--r);background:var(--card);cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.stil-option input{position:absolute;opacity:0;pointer-events:none}
.stil-option img{width:48px;height:48px;border-radius:7px;object-fit:cover}
.stil-option b{display:block;font-size:.98rem;line-height:1.2}
.stil-option small{display:block;margin-top:2px;color:var(--muted);font-size:.74rem;line-height:1.3}
.stil-option:hover{border-color:rgba(244,67,22,.45)}
.stil-option:has(input:checked){border-color:var(--flame);box-shadow:4px 4px 0 var(--sun);transform:translate(-2px,-2px)}
.stil-option:has(input:checked) b{color:var(--flame-deep)}
.stil-option:has(input:focus-visible){outline:3px solid var(--sun);outline-offset:2px}
.stil-note{margin-top:18px;color:var(--ink-2);font-size:.92rem;line-height:1.6}
.stil-panel .text-link{margin-top:14px;font-size:.95rem}
/* Seit 11.10.2026: In jeder Beispielseite sitzt unten rechts der
   Gäste-Chatbot mit Begrüßung im Tonfall des Hauses. Farben und Schrift
   kommen pro Stil über --chat-*. Die Blase kommt kurz nach dem Wechsel. */
.sm-chat{position:absolute;right:calc(var(--u)*2.4);bottom:calc(var(--u)*2.4);z-index:2;display:flex;align-items:flex-end;gap:calc(var(--u)*1.1);max-width:52%;text-align:left}
.sm-chat-bubble{padding:calc(var(--u)*1.2) calc(var(--u)*1.6);border:var(--chat-border,0);border-radius:calc(var(--u)*1.6) calc(var(--u)*1.6) calc(var(--u)*.4) calc(var(--u)*1.6);background:var(--chat-bg,#fff);color:var(--chat-ink,#14181B);font-family:var(--chat-font,Archivo,Arial,sans-serif);font-size:calc(var(--u)*1.38);font-weight:var(--chat-weight,500);line-height:1.3;letter-spacing:0;text-transform:none;box-shadow:0 calc(var(--u)*.8) calc(var(--u)*2.6) rgba(0,0,0,.2)}
.sm-chat-btn{position:relative;flex:none;display:grid;place-items:center;width:calc(var(--u)*5.2);height:calc(var(--u)*5.2);border-radius:50%;background:var(--chat-accent,#F44316);box-shadow:0 calc(var(--u)*.6) calc(var(--u)*2) rgba(0,0,0,.25)}
.sm-chat-btn::before{content:"";width:46%;height:34%;border-radius:calc(var(--u)*.7);background:var(--chat-btn-ink,#fff)}
.sm-chat-btn::after{content:"";position:absolute;left:34%;top:58%;border:calc(var(--u)*.6) solid transparent;border-top-color:var(--chat-btn-ink,#fff);border-left-color:var(--chat-btn-ink,#fff)}
.m-rustikal{--chat-accent:#C77D32;--chat-bg:#FFF8EE;--chat-ink:#3A2A1C;--chat-font:Fraunces,Georgia,serif;--chat-weight:600}
.m-rustikal .sm-chat{bottom:calc(var(--u)*10.5)}
.m-elegant{--chat-accent:#C8A96A;--chat-bg:#0C1220;--chat-ink:#F4EFE6;--chat-border:1px solid #C8A96A;--chat-font:Fraunces,Georgia,serif;--chat-weight:300;--chat-btn-ink:#0C1220}
.m-minimal{--chat-accent:#111;--chat-bg:#fff;--chat-ink:#111;--chat-border:1.5px solid #111;--chat-weight:400}
.m-minimal .sm-chat-bubble{border-radius:0}
.m-kreativ{--chat-accent:#FF4F8B;--chat-bg:#fff;--chat-ink:#2A1A4A;--chat-font:Fraunces,Georgia,serif;--chat-weight:800}
.m-kreativ .sm-chat{transform:rotate(-2deg)}
.m-maritim{--chat-accent:#1C9BBF;--chat-bg:#0E3A5B;--chat-ink:#fff;--chat-weight:600}
.m-maritim .sm-chat{bottom:auto;top:calc(var(--u)*30)}
.m-natuerlich{--chat-accent:#5E7250;--chat-bg:#fff;--chat-ink:#2F3A2A;--chat-font:Fraunces,Georgia,serif}
.stile:has(input[value=rustikal]:checked) .m-rustikal .sm-chat-bubble,
.stile:has(input[value=elegant]:checked) .m-elegant .sm-chat-bubble,
.stile:has(input[value=minimal]:checked) .m-minimal .sm-chat-bubble,
.stile:has(input[value=kreativ]:checked) .m-kreativ .sm-chat-bubble,
.stile:has(input[value=maritim]:checked) .m-maritim .sm-chat-bubble,
.stile:has(input[value=natuerlich]:checked) .m-natuerlich .sm-chat-bubble{animation:fcIn .5s .75s cubic-bezier(.22,1,.36,1) both}
/* Satz zu Gestaltung und Tonfall des gewählten Stils */
.stil-detail{min-height:5.2em;margin-top:16px;padding:12px 15px;border-left:3px solid var(--flame);border-radius:0 var(--r) var(--r) 0;background:var(--card);color:var(--ink-2);font-size:.92rem;line-height:1.55}
.stil-detail b{color:var(--ink)}
.stil-detail p{display:none}
.stile:has(input[value=rustikal]:checked) [data-stil=rustikal],
.stile:has(input[value=elegant]:checked) [data-stil=elegant],
.stile:has(input[value=minimal]:checked) [data-stil=minimal],
.stile:has(input[value=kreativ]:checked) [data-stil=kreativ],
.stile:has(input[value=maritim]:checked) [data-stil=maritim],
.stile:has(input[value=natuerlich]:checked) [data-stil=natuerlich]{display:block;animation:fcIn .35s ease both}
@supports not selector(:has(*)){.stil-detail [data-stil=rustikal]{display:block}}

/* ---------- 6. Gästechat ---------- */
.chat-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.82fr);gap:clamp(48px,8vw,110px);align-items:center}
.chat-copy h2{font-size:clamp(2.2rem,4.2vw,3.4rem)}
.chat-lead{max-width:52ch;margin-top:22px;color:var(--ink-2);font-size:1.08rem;line-height:1.72}
.check-list{margin:26px 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.check-list li{position:relative;padding:12px 0 12px 30px;border-bottom:1px solid var(--line);font-size:.98rem}
.check-list li::before{content:"✓";position:absolute;left:4px;top:12px;color:var(--flame);font-weight:700}
/* ---------- 4b. Website-Check im Seitenverlauf ---------- */
.check-band{padding-block:clamp(40px,5vw,72px)}
.check-card{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,72px);align-items:center;padding:clamp(28px,4vw,52px);border:1.5px solid var(--ink);border-radius:var(--r);background:var(--card);box-shadow:8px 8px 0 var(--sun)}
.check-card h2{font-size:clamp(1.8rem,3.2vw,2.6rem)}
.check-card-copy p:not(.eyebrow){max-width:46ch;margin-top:16px;color:var(--ink-2)}
.check-card .check-list{margin-top:0}
@media(max-width:820px){.check-card{grid-template-columns:1fr}}
.note{max-width:56ch;margin-bottom:24px;padding-left:16px;border-left:3px solid var(--flame);color:var(--ink-2);font-size:.95rem;line-height:1.7}
.note strong{color:var(--ink)}
.chat-demo-wrap{position:relative;padding:10px 0 28px}
.chat-demo{overflow:hidden;border:1px solid var(--line-strong);border-radius:14px;background:#fff;box-shadow:14px 14px 0 rgba(255,208,74,.55)}
.chat-demo-head{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--line)}
.hotel-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--flame);color:#fff;font-family:Fraunces,Georgia,serif;font-size:1.2rem;font-weight:700}
.chat-demo-head>div{flex:1}
.chat-demo-head strong,.chat-demo-head small{display:block}
.chat-demo-head strong{font-size:.9rem}
.chat-demo-head small{color:var(--muted);font-size:.72rem}
.chat-demo-head small i{display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;background:#3E9A5B}
.chat-demo-head>b{color:var(--muted);font-weight:400}
.chat-demo-body{display:flex;flex-direction:column;gap:12px;min-height:380px;padding:22px 18px;background:#FBF8F3}
.bubble{max-width:84%;padding:11px 14px;border-radius:14px;font-size:.88rem;line-height:1.55}
.bubble.guest{align-self:flex-end;border-bottom-right-radius:3px;background:#FFE7A3;color:#4A3503}
.bubble.bot{align-self:flex-start;border-bottom-left-radius:3px;background:#EEEAE3;color:var(--ink)}
.chat-booking{display:grid;grid-template-columns:1fr auto;gap:2px 14px;align-items:center;margin-top:auto;padding:12px 14px;border-left:3px solid var(--flame);border-radius:6px;background:#FFF1EA}
.chat-booking small{color:var(--flame-deep);font-size:.72rem}
.chat-booking strong{font-size:.92rem}
.chat-booking b{grid-column:2;grid-row:1/3;color:var(--flame);font-size:1.2rem}
.chat-demo-input{display:flex;justify-content:space-between;padding:13px 18px;border-top:1px solid var(--line);color:var(--muted);font-size:.8rem}
.chat-demo-input span{color:var(--flame)}
/* Chat-Demo zum Anklicken (seit 11.10.2026). Ohne JS bleibt das feste
   Beispielgespräch stehen, Fragenknöpfe und Zähler sind dann versteckt. */
.chat-try{margin-bottom:12px;color:var(--flame-deep);font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.chat-demo-body{max-height:460px;overflow-y:auto;overscroll-behavior:contain}
.chat-chips{display:flex;flex-wrap:wrap;gap:8px;padding:12px 14px;border-top:1px solid var(--line);background:#fff}
.chat-chips button{padding:8px 12px;border:1.5px solid var(--flame);border-radius:99px;background:#fff;color:var(--flame-deep);font:inherit;font-size:.8rem;font-weight:700;line-height:1.25;cursor:pointer;transition:background .2s ease,color .2s ease}
.chat-chips button:hover{background:var(--flame);color:#fff}
.chat-chips button:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.chat-chips button:disabled{opacity:.45;cursor:default}
.chat-chips .chip-reset{border-color:var(--line-strong);color:var(--ink-2)}
.chat-chips .chip-reset:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.bubble.neu{animation:fcIn .35s ease both}
.chat-booking.neu{margin-top:0;animation:fcIn .35s ease both}
.bubble.tippt{display:flex;gap:5px;padding:14px 15px}
.bubble.tippt i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:tippen 1s infinite}
.bubble.tippt i:nth-child(2){animation-delay:.15s}
.bubble.tippt i:nth-child(3){animation-delay:.3s}
@keyframes tippen{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.chat-counter{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:24px;padding:12px 14px 12px 18px;border:1.5px solid var(--ink);border-radius:var(--r);background:var(--card);font-size:.9rem;font-weight:600;line-height:1.4;box-shadow:4px 4px 0 var(--sun)}
.chat-counter strong{flex:none;display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 10px;border-radius:6px;background:var(--flame);color:#fff;font-size:1.25rem;font-variant-numeric:tabular-nums}
.chat-counter.plus strong{animation:zaehler .5s ease}
@keyframes zaehler{40%{transform:scale(1.22)}}
/* Knopf zum echten Chatbot dieser Seite (Freddy) */
.freddy-btn{padding:0;border:0;background:none;color:var(--ink-2);font:inherit;font-size:1rem;line-height:1.6;text-align:left;cursor:pointer}
.freddy-btn b{color:var(--ink);text-decoration:underline;text-decoration-color:var(--flame);text-decoration-thickness:2px;text-underline-offset:5px}
.freddy-btn:hover b{color:var(--flame-deep)}
.freddy-btn span{color:var(--flame);font-weight:700}
.freddy-btn:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.freddy-hinweis{display:block;margin-top:8px;color:var(--flame-deep);font-size:.88rem}
.freddy-hinweis:empty{display:none}

/* ---------- 8. Preise (die eine dunkle Fläche) ---------- */
.section-dark .section-head h2{font-size:clamp(2.2rem,4.2vw,3.4rem)}
/* Lohnt-sich-Rechnung. Stand als zweiter Kasten neben der Überschrift
   und hat den Kopf des Abschnitts überladen. Jetzt eine ruhige Zeile
   unter den Karten, ohne Rahmen, damit sie nicht wie ein weiterer
   Kasten neben der Aktion wirkt. */
.payoff{max-width:74ch;margin:clamp(32px,4vw,44px) auto 0;color:var(--dark-muted);font-size:1rem;line-height:1.7;text-align:center;text-wrap:pretty}
.payoff strong{color:var(--sun)}
/* Seit 10.10.2026 ein einziges Produkt: eine breitere Karte in der Mitte. */
.plans{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:stretch;max-width:1120px;margin:clamp(44px,5vw,64px) auto 0}
.plan{position:relative;display:flex;flex-direction:column;padding:30px 26px;border:1px solid var(--dark-line);border-radius:var(--r);background:rgba(255,255,255,.03)}
.plan-featured{border-color:var(--sun);background:rgba(255,208,74,.07);box-shadow:0 0 0 1px var(--sun)}
.plan-badge{position:absolute;top:-13px;left:24px;padding:5px 12px;border-radius:20px;background:var(--sun);color:var(--ink);font-size:.72rem;font-weight:700;letter-spacing:.06em}
.plan-name{font-family:Fraunces,Georgia,serif;font-size:1.45rem;font-weight:700;line-height:1.15;letter-spacing:-.02em}
.plan-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:14px}
.plan-price strong{color:var(--sun);font-family:Fraunces,Georgia,serif;font-size:3rem;font-weight:700;line-height:1;letter-spacing:-.04em;white-space:nowrap}
.plan-price span{color:var(--dark-muted);font-size:.9rem;line-height:1.35}
.plan-for{margin-top:14px;color:#D2D9DB;font-size:.95rem;line-height:1.6}
.plan ul{flex:1;margin:20px 0 24px;padding:0;list-style:none;border-top:1px solid var(--dark-line)}
.plan li{position:relative;padding:10px 0 10px 26px;border-bottom:1px solid var(--dark-line);color:#E6EBEC;font-size:.92rem;line-height:1.45}
.plan li::before{content:"✓";position:absolute;left:2px;top:10px;color:var(--sun);font-weight:700}
.plan li.plan-all{color:#fff;font-weight:700}
.plan li.plan-all::before{content:"+"}
.btn-plan{width:100%}
.plan-featured .btn-plan{box-shadow:4px 4px 0 var(--sun)}

/* Breite Karte (seit 10.10.2026): links Preis und Knopf, rechts drei
   Leistungsgruppen nebeneinander statt einer langen Liste. */
.plans .plan-wide{display:grid;grid-template-columns:minmax(300px,.95fr) minmax(0,2.05fr);gap:0;padding:0}
.plan-main{display:flex;flex-direction:column;padding:34px 32px;border-right:1px solid var(--dark-line)}
.plan-main .btn-plan{margin-top:auto}
.plan-main .plan-for{margin-bottom:14px}
.plan-terms{margin-bottom:26px;color:var(--dark-muted);font-size:.82rem;line-height:1.55}
.plan-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;padding:34px 32px;align-content:start}
.plan-group h3{margin-bottom:12px;color:var(--sun);font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-size:.74rem;font-weight:700;letter-spacing:.16em;line-height:1.4;text-transform:uppercase}
.plan .plan-group ul{flex:none;margin:0;padding:0;border:0}
.plan .plan-group li{padding:8px 0 8px 24px;border-bottom:0;font-size:.92rem;line-height:1.45}
.plan .plan-group li::before{top:8px}
@media(max-width:1020px){
  .plans .plan-wide{grid-template-columns:1fr}
  .plan-main{border-right:0;border-bottom:1px solid var(--dark-line)}
}
@media(max-width:700px){
  .plan-main{padding:28px 22px}
  .plan-groups{grid-template-columns:1fr;gap:16px;padding:24px 22px}
  .plan-group h3{margin-bottom:6px}
  .plan .plan-group li{padding:5px 0 5px 24px;font-size:.9rem;line-height:1.4}
  .plan .plan-group li::before{top:5px}
  .plan-main .plan-for{margin-bottom:12px;font-size:.92rem}
  .plan-terms{margin-bottom:20px}
}
/* „2 Monate geschenkt" steht unter dem Preis und erscheint nur, wenn
   jährlich gewählt ist. Seit 24.09.2026 in eigener Zeile und als volle
   gelbe Plakette. Vorher saß es in der Preiszeile (dort erbte es über
   .plan-price span Farbe und Größe, war blass und brach um) und quetschte
   den Preis, sodass „83 €" umbrach. */
.plan-gift{display:inline-flex;align-items:center;justify-content:center;width:fit-content;margin-top:12px;padding:7px 13px;border-radius:99px;background:var(--sun);color:var(--ink);font-size:.8rem;font-weight:800;line-height:1;letter-spacing:.02em;box-shadow:3px 3px 0 var(--flame)}

/* Umschalter monatlich / jährlich. Zwei Radios, optisch als ein Schalter.
   Radios, weil Tastatur und Screenreader damit ohne Zusatzcode
   funktionieren. */
.billing{display:flex;align-items:center;justify-content:center;gap:14px;margin:clamp(34px,4vw,48px) 0 clamp(28px,3.4vw,40px);padding:0;border:0}
.billing-switch{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--dark-line);border-radius:99px;background:rgba(255,255,255,.06)}
.billing-switch label{position:relative;cursor:pointer}
.billing-switch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.billing-switch span{display:block;padding:9px 20px;border-radius:99px;color:var(--dark-muted);font-size:.87rem;font-weight:700;line-height:1.2;transition:background .18s ease,color .18s ease}
.billing-switch input:checked+span{background:var(--sun);color:var(--ink)}
.billing-switch input:focus-visible+span{outline:3px solid var(--sun);outline-offset:3px}
.billing-switch label:hover input:not(:checked)+span{color:#fff}
.billing-hint{padding:5px 11px;border-radius:99px;background:rgba(244,67,22,.18);color:var(--sun);font-size:.76rem;font-weight:700;letter-spacing:.04em}
.plan-price strong{transition:opacity .18s ease}
/* Aktionshinweis unter den Karten. Flame statt Sun, damit er sich vom
   gelben Schalter und den Aufzählungspunkten absetzt und nicht als
   weiterer Bestandteil der Pakete gelesen wird. */

/* ---------- 8b. In jedem Paket dabei ----------
   Zehn Karten im Viererraster. Die zwei hervorgehobenen (Ansprechpartner,
   ohne Pflicht-Werbebudget) sind dunkel und doppelt breit, so gehen zehn
   Karten in drei vollen Reihen auf. Die Kaffee-Karte ist die Scherzkarte,
   deshalb gestrichelt und ohne Hintergrund. dense füllt Lücken, wenn im
   Zweierraster eine breite Karte nicht mehr in die Reihe passt. */
.perks-head{max-width:760px;margin-inline:auto;text-align:center}
.perks-head .section-intro{max-width:54ch;margin:16px auto 0;text-wrap:balance}
.perks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:row dense;gap:16px;margin-top:clamp(40px,5vw,56px)}
.perk{display:flex;flex-direction:column;gap:10px;padding:26px 24px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.perk-icon{width:28px;height:28px;margin-bottom:6px;fill:none;stroke:var(--flame);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.perk h3{font-size:1.25rem;line-height:1.15}
.perk p{color:var(--ink-2);font-size:.95rem;line-height:1.55}
.perk-strong{grid-column:span 2;border-color:var(--ink);background:var(--ink);color:#fff;box-shadow:6px 6px 0 var(--sun)}
.perk-strong h3{font-size:clamp(1.45rem,2.2vw,1.8rem)}
.perk-strong p{color:#E6EBEC;font-size:1.02rem}
.perk-strong .perk-icon{stroke:var(--sun)}
.perk-joke{border:1.5px dashed var(--line-strong);background:transparent}
.perk-joke h3 span{color:var(--flame)}
.perk .perk-fine{color:var(--muted);font-size:.8rem;line-height:1.5}

/* ---------- 9. Wieso so günstig ---------- */
.value-grid{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1fr);gap:clamp(40px,7vw,100px);align-items:center}
.value-number{display:flex;align-items:flex-end;gap:18px}
.value-number strong{color:var(--flame);font-family:Fraunces,Georgia,serif;font-size:clamp(8rem,17vw,14rem);font-weight:700;line-height:.72;letter-spacing:-.07em}
.value-number span{padding-bottom:6px;font-size:.8rem;font-weight:700;letter-spacing:.14em;line-height:1.4;text-transform:uppercase}
.value-copy h2{font-size:clamp(2.1rem,3.8vw,3.1rem)}
.value-copy p:not(.eyebrow){max-width:62ch;margin-top:20px;color:var(--ink-2);font-size:1.05rem;line-height:1.72}

/* Kundenlogos, direkt an den Abschnitt darüber angehängt statt als
   eigene Sektion. Graustufig und zurückgenommen, damit fünf fremde
   Markenfarben die Seite nicht auseinanderreißen. */
.clients{margin-top:clamp(56px,7vw,86px);padding-top:clamp(30px,3.4vw,42px);border-top:1px solid var(--line)}
.clients-head{max-width:58ch;margin:0 auto clamp(28px,3.4vw,40px);color:var(--muted);font-size:.9rem;line-height:1.55;text-align:center}
/* Zentrierte Reihe statt Raster: bei fünf Logos (seit 24.09.2026, vorher
   acht) ließe ein Vierer-Raster eines allein in der zweiten Reihe stehen. */
.clients-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(28px,4vw,56px) clamp(28px,4.4vw,64px)}
.clients-row img{width:min(var(--w,180px),100%);height:auto;opacity:.72;transition:opacity .2s ease}
.clients-row img:hover{opacity:1}

/* ---------- 10. Ablauf ---------- */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:clamp(40px,5vw,56px)}
.step{padding:28px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.step h3{margin-top:20px;font-size:1.6rem}
.step p{margin-top:10px;color:var(--ink-2);font-size:1rem}

/* ---------- 11. Team ---------- */
.team-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,7vw,100px);align-items:center}
.team-portraits{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.team-portraits figure{margin:0}
.team-portraits figure:nth-child(2){margin-top:48px}
.team-portraits img{width:100%;height:auto;aspect-ratio:4/5;border-radius:12px;object-fit:cover;object-position:center 22%;box-shadow:-12px 12px 0 var(--flame)}
.team-portraits figure:nth-child(2) img{box-shadow:12px 12px 0 var(--sun)}
.team-portraits figcaption{margin-top:14px;color:var(--muted);font-size:.8rem}
.team-copy h2{font-size:clamp(2.1rem,3.8vw,3.1rem)}
.team-copy p:not(.eyebrow){max-width:58ch;margin-top:20px;color:var(--ink-2);font-size:1.05rem;line-height:1.72}
.team-copy .team-privat{color:var(--ink);font-weight:600}
.team-signature{display:block;margin-top:26px;color:var(--flame-deep);font-family:Fraunces,Georgia,serif;font-size:1.8rem;font-style:italic}

/* ---------- 12. Fragen ---------- */
.faq-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(40px,6vw,90px);align-items:start}
.faq{border-top:1px solid var(--line-strong)}
.faq details{border-bottom:1px solid var(--line-strong)}
.faq summary{position:relative;padding:20px 44px 20px 0;font-family:Fraunces,Georgia,serif;font-size:1.2rem;font-weight:600;letter-spacing:-.015em;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:50%;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--flame);color:#fff;font-family:Archivo,Arial,sans-serif;font-size:1.1rem;transform:translateY(-50%);transition:transform .2s ease}
.faq details[open] summary::after{content:"−"}
.faq details p{max-width:64ch;padding:0 44px 22px 0;color:var(--ink-2);font-size:1rem;line-height:1.7}
.faq details p a{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--flame);text-decoration-thickness:2px;text-underline-offset:4px}
/* Seit 30.09.2026 zeigt die Startseite nur die wichtigsten Fragen,
   alle anderen stehen auf /faq. */
.faq-more{margin-top:28px}

/* ---------- Unterseite /faq ----------
   Gleiche Bausteine wie die Startseite. Pro Thema links die Überschrift,
   rechts die aufklappbaren Fragen, damit die Seite trotz vieler Fragen
   kurz bleibt. Die Themen-Knöpfe oben springen direkt zum Thema. */
.page-head{padding:clamp(56px,7vw,96px) 0 clamp(40px,5vw,64px)}
.page-head h1{max-width:17ch;font-size:clamp(2.4rem,4.8vw,4rem);line-height:1;letter-spacing:-.045em}
.page-head .lead{max-width:60ch;margin-top:22px;color:var(--ink-2);font-size:clamp(1.04rem,1.3vw,1.15rem);line-height:1.65}
.page-head .lead a{color:var(--ink);font-weight:700;text-decoration-color:var(--flame);text-decoration-thickness:2px;text-underline-offset:4px}
.faq-chips{display:flex;flex-wrap:wrap;gap:10px;margin:30px 0 0;padding:0;list-style:none}
.faq-chips a{display:inline-block;padding:9px 16px;border:1.5px solid var(--line-strong);border-radius:99px;background:var(--card);color:var(--ink);font-size:.9rem;font-weight:600;text-decoration:none;transition:border-color .18s ease,background .18s ease}
.faq-chips a:hover{border-color:var(--ink);background:var(--sun)}
.faq-chips a:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.faq-groups{padding-bottom:clamp(56px,7vw,96px)}
.faq-group{padding-block:clamp(34px,4vw,52px);border-top:1px solid var(--line)}
.faq-group.faq-grid{row-gap:20px}
.faq-group>h2{padding-top:14px;font-size:clamp(1.6rem,2.6vw,2.2rem)}
.faq-end{padding-block:clamp(64px,7vw,96px)}
.faq-end .contact-inner h2{font-size:clamp(2rem,4vw,3rem)}
.faq-end-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:28px}

/* ---------- 7. Provisionsrechner ----------
   Gleiche Rechenlogik wie auf der Hauptseite, eigene Optik: links die
   Regler auf Weiß, rechts das Ergebnis auf Flame. Der Rechner steht
   direkt vor den Preisen, weil er der Anker für sie ist. */
.calc{display:grid;grid-template-columns:1fr 1fr;margin-top:clamp(36px,5vw,56px);border-radius:var(--r);overflow:hidden;background:var(--card);box-shadow:8px 8px 0 rgba(16,24,28,.2),0 24px 60px rgba(16,24,28,.09)}
.calc-in{display:flex;flex-direction:column;gap:20px;padding:clamp(26px,3.4vw,38px)}
.calc-out{display:flex;flex-direction:column;padding:clamp(26px,3.4vw,38px);background:var(--flame);color:#fff}
.calc-mark{font-size:.74rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.calc-in .calc-mark{margin-bottom:4px;color:var(--muted)}
.calc-out .calc-mark{color:var(--sun)}

.calc-field{display:flex;flex-direction:column;gap:9px}
.calc-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.calc-head label{color:var(--ink-2);font-size:.9rem;font-weight:600}
.calc-head output{font-family:Fraunces,Georgia,serif;font-size:1.22rem;font-weight:700;letter-spacing:-.02em}

.calc-field input[type=range]{width:100%;height:22px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.calc-field input[type=range]:focus-visible{outline:3px solid var(--sun);outline-offset:4px}
.calc-field input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:99px;background:var(--line)}
.calc-field input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;margin-top:-8.5px;border:3px solid #fff;border-radius:50%;background:var(--flame);box-shadow:0 2px 7px rgba(16,24,28,.3)}
.calc-field input[type=range]::-moz-range-track{height:5px;border-radius:99px;background:var(--line)}
.calc-field input[type=range]::-moz-range-thumb{width:16px;height:16px;border:3px solid #fff;border-radius:50%;background:var(--flame);box-shadow:0 2px 7px rgba(16,24,28,.3)}

.calc-sum{margin-top:10px;font-family:Fraunces,Georgia,serif;font-size:clamp(2.8rem,5.6vw,4.4rem);font-weight:700;line-height:1;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.calc-month{margin-top:12px;color:rgba(255,255,255,.88);font-size:.95rem;line-height:1.6}
.calc-shift{margin-top:auto;padding-top:22px;font-size:1.02rem;line-height:1.6}
.calc-shift strong{color:var(--sun)}
.calc-foot{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.25);color:rgba(255,255,255,.82);font-size:.8rem;line-height:1.55}

/* ---------- 13. Kontakt ---------- */
.contact-inner{max-width:860px;text-align:center}
.contact-inner h2{font-size:clamp(2.4rem,5vw,4rem)}
.contact-inner>p:not(.eyebrow){max-width:56ch;margin:22px auto 0;font-size:1.1rem;line-height:1.65}
.btn-contact{margin-top:6px;padding:18px 30px;font-size:1rem}
.contact-inner .contact-small{margin-top:22px;font-size:.92rem}
.contact-small a{color:var(--ink);font-weight:700;text-underline-offset:4px}

/* Formular. Weiße Karte, weil Eingabefelder direkt auf der Flame-Fläche
   weder ruhig aussehen noch genug Kontrast haben. */
.contact-form{max-width:620px;margin:36px auto 0;padding:clamp(24px,4vw,34px);border-radius:var(--r);background:var(--card);box-shadow:6px 6px 0 rgba(16,24,28,.26);text-align:left}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{color:var(--ink-2);font-size:.82rem;font-weight:700;letter-spacing:.02em}
.field .optional{margin-left:6px;color:var(--muted);font-size:.78rem;font-weight:600;text-transform:none;letter-spacing:0}
.field input,.field textarea{width:100%;padding:13px 14px;border:1.5px solid var(--line-strong);border-radius:6px;background:var(--paper);color:var(--ink);font:inherit;font-size:1rem}
.field textarea{resize:vertical;min-height:84px;line-height:1.55}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
.field input:focus,.field textarea:focus{border-color:var(--flame);outline:3px solid rgba(244,67,22,.22);outline-offset:0}
.field input:user-invalid{border-color:var(--flame-deep)}
.contact-form>.field{margin-bottom:16px}
.consent{display:flex;gap:11px;align-items:flex-start;margin:4px 0 20px;color:var(--ink-2);font-size:.86rem;line-height:1.55;cursor:pointer}
.consent input{flex:0 0 auto;width:19px;height:19px;margin:2px 0 0;accent-color:var(--flame)}
.consent a{color:var(--ink);font-weight:700;text-underline-offset:3px}
.contact-form .btn-contact{width:100%}
.form-status{margin-top:16px;font-size:.92rem;font-weight:600;line-height:1.5}
.form-status.schlecht{color:var(--flame-deep)}
.form-status.gut{color:#1F6B3A}

/* ---------- Fußzeile ---------- */
.site-footer{padding-block:38px;border-top:1px solid var(--line)}
.footer-in{display:flex;align-items:center;gap:24px}
.footer-in .brand{font-size:1.4rem}
.footer-in>p{color:var(--muted);font-size:.8rem}
.footer-in nav{display:flex;flex-wrap:wrap;gap:6px 22px;margin-left:auto}
.footer-in nav a{color:var(--ink-2);font-size:.8rem;text-decoration:none}
.footer-in nav a:hover{text-decoration:underline;text-underline-offset:4px}
.back-top{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--line-strong);border-radius:50%;text-decoration:none}
.footer-ai-note{margin-top:24px;padding-top:22px;border-top:1px solid var(--line);color:var(--muted);font-size:.78rem;line-height:1.65}
.footer-ai-note strong{color:var(--ink);font-weight:600}

/* ---------- Einwilligung (gleich wie auf der Hauptseite) ---------- */
/* Chat-Assistent (assets/chat-widget.js) ausblenden, solange der
   Cookie-Banner offen ist. Sonst liegt der Chat-Knopf am Handy über
   „Akzeptieren". Im Druck nie anzeigen. */
body:has(#einwilligung:not([hidden])) [data-hf-chat]{display:none}
@media print{[data-hf-chat]{display:none}}
.einwilligung{position:fixed;left:50%;bottom:14px;z-index:100;width:min(1120px,calc(100% - 28px));transform:translateX(-50%);border:1px solid rgba(16,24,28,.18);border-radius:10px;background:#fff;color:var(--ink);box-shadow:0 22px 70px rgba(16,24,28,.2)}
.einwilligung[hidden]{display:none}
.einw-in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 16px}
.einw-in p{color:var(--ink-2);font-size:.84rem;line-height:1.5}
.einw-in a{color:var(--flame-deep);white-space:nowrap;text-underline-offset:4px}
.einw-knoepfe{display:flex;flex:0 0 auto;gap:8px}
.einw-knoepfe button{min-width:108px;padding:11px 13px;border:1px solid rgba(16,24,28,.3);border-radius:5px;background:transparent;color:var(--ink);font:inherit;font-size:.8rem;font-weight:600;cursor:pointer}
.einw-knoepfe button:hover{background:#F5F2EC}
.einw-knoepfe .ja{border-color:var(--flame);background:var(--flame);color:#fff}
.einw-knoepfe .ja:hover{background:var(--flame-deep)}

/* ---------- 8c. Für wen geeignet, für wen nicht ----------
   Zwei Karten nebeneinander. Links die passenden Hotels mit Häkchen,
   rechts die nicht passenden mit Kreuz. Auf dem Handy untereinander. */
.fit{border-bottom:1px solid var(--line)}
.fit .section-intro{max-width:54ch;margin:16px auto 0;font-size:1.2rem;text-wrap:balance}
.fit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:stretch;max-width:1180px;margin:clamp(40px,4.6vw,60px) auto 0}
.fit-card{padding:36px 34px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.fit-yes{border-color:var(--ink);box-shadow:6px 6px 0 var(--sun)}
.fit-card h3{font-size:1.65rem;line-height:1.2;letter-spacing:-.02em}
.fit-list{margin:18px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
/* Schrift seit 11.10.2026 größer (Martin: „den Text insgesamt größer auf beiden Seiten“, vorher .97rem), am 12.10.2026 wieder etwas kleiner (Martin: Bulletpoints zu groß), jetzt 1.04rem */
.fit-list li{position:relative;padding:13px 0 13px 34px;border-bottom:1px solid var(--line);color:var(--ink);font-size:1.04rem;line-height:1.42}
.fit-list li:last-child{border-bottom:0;padding-bottom:0}
.fit-list li::before{position:absolute;left:2px;top:13px;font-size:1rem;font-weight:800}
.fit-yes .fit-list li::before{content:"✓";color:#1F6B3A}
.fit-no .fit-list li::before{content:"✕";color:var(--flame-deep)}

/* ---------- Einblenden beim Scrollen ---------- */
.motion-enabled .reveal{transition:opacity .6s ease,translate .6s ease}
.motion-enabled .reveal.awaiting{opacity:0;translate:0 22px}

/* Schleichend einblenden, an die Scrollposition gekoppelt statt einmal
   ausgelöst. website.js setzt pro Element --p von 0 bis 1, solange es
   vom unteren Rand bis zur Bildschirmmitte wandert. Die Klasse scrub-on
   setzt nur das Skript, ohne JavaScript bleibt alles sichtbar. */
.scrub-on .scrub{opacity:var(--p,1);translate:0 calc((1 - var(--p,1)) * 48px)}
.scrub-on .google-num strong{scale:calc(.82 + .18 * var(--p,1))}

/* ---------- Anpassungen für kleinere Bildschirme ---------- */
@media(max-width:1080px){
  :root{--side:30px}
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero-visual{max-width:620px;padding-left:26px}
  .section-head-split,.chat-grid,.value-grid,.team-grid,.faq-grid,.calc{grid-template-columns:1fr}
  .calc-shift{margin-top:24px}
  .plans{gap:26px}
  .perks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stile{grid-template-columns:1fr;max-width:760px;margin-inline:auto}
  .stil-wahl{grid-template-columns:repeat(3,minmax(0,1fr))}
  .chat-demo-wrap{max-width:520px}
  .float-chat{right:-6px}
}
@media(max-width:820px){
  .nav-links{display:none}
  .nav-shell{justify-content:space-between}
  .benefits,.steps{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr;max-width:620px}
  .fit-grid{grid-template-columns:1fr;max-width:680px}
  .voices{gap:12px}
  .voice{grid-template-columns:1fr;gap:14px;padding:22px 20px}
  .voice blockquote{font-size:1.25rem}
  .voice-answer{padding-left:16px}
  .stil-wahl{grid-template-columns:1fr 1fr}
  .chat-demo-body{min-height:0}
  .footer-in{flex-wrap:wrap}
  .footer-in>p{display:none}
  .footer-in nav{order:3;width:100%;margin:0}
  .back-top{margin-left:auto}
}
@media(max-width:560px){
  :root{--side:20px}
  body{font-size:16px}
  .btn-small{padding:9px 10px;font-size:.8rem;white-space:nowrap}
      .nav-shell{padding:12px 14px;gap:8px}
  .brand{font-size:clamp(1.18rem,6vw,1.4rem)}
  .hero-proof{align-items:flex-start;padding:12px 14px}
  .hero-proof strong{white-space:normal}
  .hero-acts .btn{width:100%}
  .hero-visual{padding:14px 12px 34px 16px}
  .float-best{font-size:.78rem}
  .float-chat{right:0;bottom:-6px;width:min(268px,80%)}
  .fc-body p{font-size:.72rem}
  .chat-chips button{padding:7px 10px;font-size:.76rem}
  .chat-counter{font-size:.84rem}
  .section{padding-block:64px}
  .fit-card{padding:26px 22px}
  .fit-card h3{font-size:1.4rem}
  .fit-list li{padding:12px 0 12px 30px;font-size:.98rem}
  .fit-list li::before{top:12px}
  .benefits,.steps{gap:12px}
  .benefit,.step,.plan{padding:22px 20px}
  .perks{grid-template-columns:1fr;gap:12px}
  .perk{padding:22px 20px}
  .perk-strong{grid-column:auto;box-shadow:4px 4px 0 var(--sun)}
  .benefit-kicker{margin-top:16px}
  .clients-row{gap:26px 30px}
  .clients-row img{width:min(calc(var(--w,180px)*.72),100%)}
  .stil-screens{aspect-ratio:4/5}
  .stil-browser{box-shadow:6px 6px 0 var(--sun),0 20px 44px rgba(16,24,28,.12)}
  .stil-option{grid-template-columns:40px minmax(0,1fr);gap:10px;padding:7px 10px 7px 7px}
  .stil-option img{width:40px;height:40px}
  .stil-option small{font-size:.7rem}
  .check-list li{padding-block:10px}
  .btn-contact{width:100%;padding:17px 18px}
  .form-row{grid-template-columns:1fr;gap:14px;margin-bottom:14px}
  .faq summary{font-size:1.08rem}
  .faq details p{padding-right:0}
  .faq-group>h2{padding-top:0}
  .faq-chips a{padding:8px 13px;font-size:.84rem}
  .einw-in{flex-direction:column;align-items:stretch;gap:12px;padding:13px}
  .einw-knoepfe{display:grid;grid-template-columns:repeat(3,1fr)}
  .einw-knoepfe button{min-width:0;padding:10px 6px}
  .einwilligung{bottom:8px;width:calc(100% - 16px)}
}
@media(max-width:360px){
  .einw-knoepfe{grid-template-columns:1fr}
  .float-best{display:none}
  .fc-head small{display:none}
}
/* ---------- Ratgeber-Unterseiten (seit 12.10.2026) ----------
   /hotel-website-mieten und /hotel-website-kosten. Gleiche Bausteine wie die
   Startseite und /faq, dazu Brotkrumen, eine Fließtext-Spalte, ein
   Kurzfassungs-Kasten, eine Vergleichstabelle (am Handy als Karten) und eine
   Karte „Weiterlesen“. */
.krume{margin-bottom:22px;color:var(--muted);font-size:.88rem;line-height:1.4}
.krume a{color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
.krume a:hover{color:var(--ink);text-decoration-color:var(--flame)}
.page-head-rg h1{max-width:20ch}
.page-acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.ratgeber{padding-block:clamp(48px,6vw,84px)}
.ratgeber-tint{background:linear-gradient(180deg,#FFFFFF 0,var(--tint) clamp(64px,9vw,140px),var(--tint) calc(100% - clamp(64px,9vw,140px)),#FFFFFF 100%)}
.rg-head{max-width:780px;margin-bottom:clamp(26px,3.2vw,40px)}
.rg-head h2{font-size:clamp(1.8rem,3.2vw,2.7rem);line-height:1.08}
.rg-head p{margin-top:14px;color:var(--ink-2);font-size:1.08rem;line-height:1.7}
.rg-text{max-width:72ch}
.rg-text p{margin-top:16px;color:var(--ink-2);font-size:1.08rem;line-height:1.75}
.rg-text p:first-child{margin-top:0}
.rg-text strong{color:var(--ink)}
.rg-text a,.benefit a{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--flame);text-decoration-thickness:2px;text-underline-offset:4px}
.rg-text-nach{margin-top:clamp(24px,3vw,36px)}
.rg-link{margin-top:clamp(22px,2.6vw,32px)}
.rg-schluss{padding-block:clamp(40px,5vw,72px)}
.rg-gruss{max-width:72ch;padding-top:clamp(28px,3.4vw,40px);border-top:1px solid var(--line-strong)}
.rg-gruss p{color:var(--ink-2);font-size:1.08rem;line-height:1.75}
.rg-gruss .rg-gruss-name{margin-top:22px;color:var(--ink);font-size:1.08rem;line-height:1.5}
.rg-gruss-name span{display:inline-block;margin-top:4px;color:var(--flame-deep);font-family:Fraunces,Georgia,serif;font-size:1.8rem;font-style:italic;line-height:1.15}
.rg-gruss .rg-stand{margin-top:16px;color:var(--muted);font-size:.84rem}
.rg-zwinker{margin-top:18px;color:var(--ink-2);font-size:.98rem;font-style:italic}
.kurz{max-width:860px;padding:clamp(24px,3vw,36px);border:1.5px solid var(--ink);border-radius:var(--r);background:var(--card);box-shadow:6px 6px 0 var(--sun)}
.kurz h2{font-size:clamp(1.5rem,2.4vw,1.9rem)}
.kurz ul{margin:18px 0 0;padding:0;list-style:none}
.kurz li{position:relative;padding:12px 0 12px 30px;border-top:1px solid var(--line);color:var(--ink-2);font-size:1.08rem;line-height:1.65}
.kurz li::before{content:"✓";position:absolute;left:4px;top:12px;color:var(--flame);font-weight:700}
.benefits-liste{margin-top:0}
.benefits-liste .benefit h3{font-size:clamp(1.3rem,1.9vw,1.6rem)}
.benefits-liste .benefit .check-list{margin:16px 0 0}
.benefits-liste .benefit .check-list li{font-size:.97rem}
.benefits-liste .benefit>p:first-of-type{margin-top:12px}
.kosten-grid{max-width:none;margin:0}
.kosten-grid .check-list{margin:18px 0 0}
.kosten-grid .check-list li{font-size:1.05rem}
.check-list.fragen li::before{content:"?"}
.vergleich-wrap{overflow-x:auto}
.vergleich{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--card);font-size:1rem;overflow:hidden}
.vergleich th,.vergleich td{padding:16px 18px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;line-height:1.5}
.vergleich tbody tr:last-child th,.vergleich tbody tr:last-child td{border-bottom:0}
.vergleich thead th{background:var(--ink);color:#fff;font-family:Fraunces,Georgia,serif;font-size:1.15rem;font-weight:700;letter-spacing:-.01em;vertical-align:bottom}
.vergleich thead th small,.vergleich tbody th small{display:block;margin-top:2px;font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-size:.78rem;font-weight:600;letter-spacing:.02em}
.vergleich thead th small{color:var(--dark-muted)}
.vergleich tbody th{width:22%;color:var(--ink);font-weight:700}
.vergleich tbody th small{color:var(--muted);font-weight:500}
.vergleich td{color:var(--ink-2)}
.vergleich .us{background:#FFF6DC;color:var(--ink)}
.vergleich thead .us{background:var(--flame);color:#fff}
.vergleich thead .us small{color:#fff}
.vergleich-schmal{max-width:760px}
.vergleich-schmal td{font-family:Fraunces,Georgia,serif;font-size:1.35rem;font-weight:700;color:var(--ink)}
.weiter{position:relative;display:grid;gap:8px;max-width:860px;padding:clamp(24px,3vw,34px) clamp(64px,7vw,88px) clamp(24px,3vw,34px) clamp(24px,3vw,34px);border:1.5px solid var(--ink);border-radius:var(--r);background:var(--card);color:var(--ink);text-decoration:none;box-shadow:6px 6px 0 var(--sun);transition:transform .2s ease,box-shadow .2s ease}
.weiter:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--sun)}
.weiter:focus-visible{outline:3px solid var(--sun);outline-offset:4px}
.weiter-label{color:var(--flame-deep);font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.weiter strong{font-family:Fraunces,Georgia,serif;font-size:clamp(1.4rem,2.2vw,1.8rem);font-weight:700;line-height:1.15;letter-spacing:-.025em}
.weiter span:not(.weiter-label):not(.weiter-pfeil){color:var(--ink-2);font-size:1.02rem;line-height:1.6}
.weiter-pfeil{position:absolute;right:clamp(22px,3vw,34px);top:50%;translate:0 -50%;color:var(--flame);font-size:1.8rem;font-weight:700}
@media(max-width:760px){
  .vergleich-wrap{overflow:visible}
  .vergleich{border:0;background:transparent;overflow:visible}
  .vergleich thead{display:none}
  .vergleich tbody,.vergleich tr,.vergleich th,.vergleich td{display:block;width:auto}
  .vergleich tbody tr{margin-bottom:14px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--card);overflow:hidden}
  .vergleich tbody th{width:auto;padding:13px 16px;border-bottom:1px solid var(--line);background:var(--tint)}
  .vergleich td{display:grid;grid-template-columns:104px minmax(0,1fr);gap:12px;padding:11px 16px;border-bottom:1px solid var(--line)}
  .vergleich tbody tr td:last-child{border-bottom:0}
  .vergleich td::before{content:attr(data-label);color:var(--muted);font-size:.8rem;font-weight:700;line-height:1.6}
  .vergleich .us::before{color:var(--flame-deep)}
  .vergleich-schmal td{font-size:1.2rem}
  .weiter{padding-right:56px}
  .page-acts .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .motion-enabled .reveal{transition:none}
  .motion-enabled .reveal.awaiting{opacity:1;translate:none}
  .btn,.benefit,.stil-mock,.stil-option{transition:none}
  .fc-body p,.sm-chat-bubble,.stil-detail p,.bubble.neu,.chat-booking.neu,.bubble.tippt i,.chat-counter.plus strong{animation:none!important}
}
@media print{
  .site-header,.einwilligung,.site-footer,.chat-demo-wrap,.hero-visual{display:none!important}
  .section-dark,.section-flame{background:#fff!important;color:#000!important}
  .scrub-on .scrub{opacity:1;translate:none}
  .filter-pfeil{animation:none}
}