/* Mr. Bell — Designsystem, uebernommen aus dem Brief (Farben + Satzbild) */
:root{
  --ink:#17171b; --muted:#73737d; --accent:#b84708; --accent-soft:#f0e2d6;
  --paper:#fcfcfb; --paper-2:#f4f4f2; --line:#e3e3df;
  --measure:38rem;
  --serif:Charter,"Bitstream Charter","Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:18px;line-height:1.62;
  font-feature-settings:"kern" 1;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:80rem;margin:0 auto;padding:0 48px}
.measure{max-width:var(--measure)}

/* Briefkopf — 1:1 wie auf dem Papier */
.head{display:flex;align-items:flex-end;gap:14px;padding-block:30px 0}
.head img{width:42px;height:42px;object-fit:contain;display:block}
.head .name{font-family:var(--sans);font-weight:700;font-size:21px;letter-spacing:-.01em;line-height:1}
.head .kicker{font-family:var(--sans);font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.head .right{margin-left:auto;font-size:15px;color:var(--muted)}
.rule{height:1px;background:var(--line);margin-top:22px}

h1{font-size:clamp(32px,4.8vw,58px);line-height:1.10;font-weight:600;letter-spacing:-.015em;margin:44px 0 0;text-wrap:balance}
h2{font-size:clamp(23px,2.6vw,31px);line-height:1.24;font-weight:600;letter-spacing:-.01em;margin:0;text-wrap:balance}
h3{font-size:19px;line-height:1.34;font-weight:600;margin:0}
p{margin:0}
em.a{font-style:normal;color:var(--accent)}
strong{font-weight:600}
a{color:var(--ink);text-underline-offset:3px;text-decoration-thickness:1px;transition:color .12s,border-color .12s}
a:hover{color:var(--accent)}

.lede{font-size:clamp(19px,2.5vw,21px);color:#34343b;margin-top:20px}
.stack>*+*{margin-top:18px}

section{padding-block:60px;border-top:1px solid var(--line)}
section:first-of-type{border-top:0}
.label{font-family:var(--sans);font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}

.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-size:15px;font-weight:600;
  padding:13px 20px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  text-decoration:none;border-radius:2px;cursor:pointer;transition:background .15s,color .15s}
.btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--accent);background:transparent;color:var(--accent)}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

.facts{width:100%;border-collapse:collapse;margin-top:22px;font-size:17px}
.facts td{padding:13px 0;border-top:1px solid var(--line);vertical-align:baseline}
.facts td:first-child{padding-right:24px;color:var(--muted);white-space:nowrap}
.facts tr:last-child td{border-bottom:1px solid var(--line)}
.num{font-variant-numeric:tabular-nums}

ul.plain{list-style:none;padding:0;margin:20px 0 0}
ul.plain li{padding-left:22px;position:relative;margin-top:10px}
ul.plain li::before{content:"";position:absolute;left:2px;top:.72em;width:7px;height:1px;background:var(--accent)}
ul.no li::before{background:var(--muted)}

footer{border-top:1px solid var(--line);padding-block:34px 54px;font-size:15px;color:var(--muted)}
footer a{color:var(--muted)}
footer nav{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px}

@media (max-width:640px){
  body{font-size:17px}
  .wrap{padding:0 20px}
  section{padding-block:42px}
  .head{padding-top:26px}
  .head .right{display:none}
}

/* --- WhatsApp-Aktion --- */
.wa{background:#128c7e;border-color:#128c7e;color:#fff}
.wa:hover{background:#0d6e63;border-color:#0d6e63;color:#fff}
.wa svg{width:18px;height:18px;flex:none;fill:currentColor}
.actions{margin-top:34px}
.actions .row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}
.wa-col{display:flex;flex-direction:column}
.actions .row+.row{margin-top:14px}
.wa-hint{display:none}
@media (min-width:641px){
  .wa-hint{display:block;margin-top:10px;font-size:14px;color:var(--muted);text-align:center}
  .wa-hint a{color:var(--muted);text-decoration:none}
  .wa-hint a:hover{color:#128c7e}
  .wa-hint .num{font-variant-numeric:tabular-nums;color:var(--ink)}
}

/* --- Dauerhafte Termin-Leiste auf der Partnerseite --- */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 20px;background:rgba(252,252,251,.94);backdrop-filter:blur(8px);
  border-top:1px solid var(--line)}
.sticky .sticky-t{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink)}
.sticky .btn{padding:10px 16px;font-size:14px}
body:has(.sticky:not([hidden])) footer{padding-bottom:96px}
@media (max-width:520px){ .sticky .sticky-t{display:none} .sticky{justify-content:center} }
.sticky[hidden]{display:none!important}


/* ================= Breites Layout ================= */

/* Startseite: fuellt den Bildschirm, Fusszeile unten */
body.home .wrap{min-height:100vh;display:flex;flex-direction:column}
body.home .hero{flex:1;align-content:center}

/* Startseite: Schlagzeile links, Text + Aktionen rechts */
.hero{border-top:0;padding-block:clamp(48px,9vh,104px) clamp(56px,11vh,120px)}
.hero h1{margin:0;max-width:none}
@media (min-width:980px){
  .hero{display:grid;grid-template-columns:1.1fr .9fr;gap:0 72px;align-items:center}
  .hero h1{grid-column:1;grid-row:1}
  .hero-right{grid-column:2;grid-row:1;max-width:32rem}
  .hero .lede{margin-top:0}
  .hero .actions{grid-column:1/-1;grid-row:2;margin-top:48px}
}

/* Inhaltsseiten: Rubrik in der linken Spalte, Text in der breiten rechten */
@media (min-width:980px){
  section:not(.hero){display:grid;grid-template-columns:13rem minmax(0,1fr);gap:0 64px;align-items:start}
  section:not(.hero) > .label{grid-column:1;grid-row:span 99;margin:0;padding-top:.55em}
  section:not(.hero) > :not(.label){grid-column:2}
  .measure{max-width:min(var(--measure),100%)}
}

/* Schloss: bewusst mittig, wie ein Schild an der Tuer */
.gate{max-width:46rem;margin-inline:auto;padding-block:clamp(56px,11vh,116px) clamp(64px,13vh,128px)}

/* Fusszeile ueber die volle Breite */
@media (min-width:980px){
  footer{display:flex;justify-content:space-between;align-items:baseline;gap:32px}
  footer nav{margin-top:0;justify-content:flex-end}
}

/* Termin-Leiste an denselben Satzspiegel andocken */
.sticky{padding-inline:max(48px, calc((100vw - 80rem)/2 + 48px))}
@media (max-width:640px){ .sticky{padding-inline:20px} }

/* Lange Abschnitte nutzen die Breite wirklich aus */
@media (min-width:1100px){
  .wide{max-width:none}
  .wide > h2, .wide > p{max-width:38rem}
  .wide .steps{columns:2;column-gap:64px;margin-top:26px}
  .wide .steps li{break-inside:avoid;margin:0 0 22px}
  .wide ul.plain{columns:2;column-gap:64px;margin-top:22px}
  .wide ul.plain li{break-inside:avoid;margin:0 0 13px}
  .wide .card{max-width:44rem}
}

/* Logo fuehrt zurueck zur Startseite */
.head .brand{display:flex;align-items:flex-end;gap:14px;text-decoration:none;color:inherit}
.head .brand:hover .name{color:var(--accent)}
.head .brand:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* Hover = Terracotta, ueberall wo etwas anklickbar ist */
a:hover, a:focus-visible{color:var(--accent)}
footer a:hover{color:var(--accent)}
.head .brand:hover .name, .head .brand:hover .kicker{color:var(--accent)}
.wa-hint a:hover, .wa-hint a:hover .num{color:var(--accent)}
.slot:hover{border-color:var(--accent);color:var(--accent)}
.codebox:hover{border-color:var(--accent)}
.codebox:hover .pfx{color:var(--accent)}
.btn.wa:hover{background:#0d6e63;border-color:#0d6e63;color:#fff}

/* Jedes einzelne Wort faerbt sich beim Hover - nur Farbe, nichts bewegt sich */
.w{transition:color .1s ease-out}
.w:hover{color:var(--accent)}
.card .w:hover, .label .w:hover, footer .w:hover{color:var(--accent)}


/* ===== Aufsteller: drehbares 3D-Modell ===== */
:root{ --navy:#141b33; --navy-2:#0d1226; --gold:#d9b96a; }
.stage3d{position:relative;max-width:30rem;margin-top:34px;height:340px;display:grid;place-items:center;perspective:1300px;
  perspective-origin:50% 42%;touch-action:none}
.tent3d{position:relative;width:204px;height:258px;transform-style:preserve-3d;
  transform:rotateX(-9deg) rotateY(var(--ry,-26deg));cursor:grab;outline:none}
.tent3d:active{cursor:grabbing}
.tent3d:focus-visible{outline:2px solid var(--accent);outline-offset:26px;border-radius:4px}

.t-face{position:absolute;inset:0;transform-origin:50% 0%;backface-visibility:hidden;
  background:var(--c-bg);
  border-radius:2px;padding:15px 14px 12px;text-align:center;color:var(--c-ink);
  display:flex;flex-direction:column;align-items:center;
  border-radius:2px;overflow:hidden}
.t-face>*{position:relative;z-index:1}
.t-front{transform:rotateX(9.46deg)}
.t-back {transform:rotateY(180deg) rotateX(9.46deg)}

.t-haus{font-family:var(--tent-font, var(--serif));font-size:13px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;line-height:1.2;text-wrap:balance;text-shadow:0 1px 3px rgba(0,0,0,.55)}
.t-rule{width:58%;height:1px;background:var(--c-acc);margin:7px 0 11px;opacity:.95}
.t-qr{width:82px;height:82px;display:block;border-radius:2px;image-rendering:pixelated;
  background:#fff;padding:4px;box-shadow:0 2px 10px rgba(0,0,0,.30)}
.t-head{font-family:var(--tent-font, var(--serif));font-size:15px;line-height:1.22;letter-spacing:.05em;
  text-transform:uppercase;margin-top:11px;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.t-head-de{text-transform:none;letter-spacing:0;font-size:16px}
.t-sub{font-family:var(--tent-font, var(--serif));font-size:9px;line-height:1.45;color:var(--c-acc);margin-top:7px}
.t-foot{font-family:var(--tent-font, var(--serif));font-size:8px;opacity:.68;margin-top:auto;letter-spacing:.03em}

.t-side{position:absolute;top:0;left:50%;width:85px;height:258px;margin-left:-42.5px;
  background:#f7f7f4;
  -webkit-clip-path:polygon(50% 0%, 48.74% 10%, 46.19% 20%, 42.68% 30%, 38.26% 40%, 33.50% 50%, 27.92% 60%, 21.74% 70%, 15.01% 80%, 7.76% 90%, 0% 100%, 100% 100%, 92.24% 90%, 84.99% 80%, 78.26% 70%, 72.08% 60%, 66.50% 50%, 61.74% 40%, 57.32% 30%, 53.81% 20%, 51.26% 10%);clip-path:polygon(50% 0%, 48.74% 10%, 46.19% 20%, 42.68% 30%, 38.26% 40%, 33.50% 50%, 27.92% 60%, 21.74% 70%, 15.01% 80%, 7.76% 90%, 0% 100%, 100% 100%, 92.24% 90%, 84.99% 80%, 78.26% 70%, 72.08% 60%, 66.50% 50%, 61.74% 40%, 57.32% 30%, 53.81% 20%, 51.26% 10%)}
.t-left {transform:translateX(-102px) rotateY(90deg)}
.t-right{transform:translateX(102px)  rotateY(90deg)}

.t-shadow{position:absolute;width:200px;height:22px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(23,23,27,.22),rgba(23,23,27,0) 72%);
  transform:translateY(146px);pointer-events:none}
.t-hint{font-family:var(--sans);font-size:10px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--muted);text-align:center;margin-top:4px;max-width:30rem}

.specs{display:flex;gap:0;flex-wrap:wrap;margin-top:34px;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);max-width:32rem}
.specs>div{flex:1 1 0;min-width:92px;padding:16px 0;text-align:center}
.specs>div+div{border-left:1px solid var(--line)}
.sv{display:block;font-family:var(--sans);font-size:21px;font-weight:700;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums}
.sl{display:block;font-family:var(--sans);font-size:10px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--muted);margin-top:5px}
.note{margin-top:24px;font-size:15px;color:var(--muted)}

@media (max-width:640px){
  .stage3d{height:300px;perspective:900px}
  .tent3d{width:176px;height:223px}
  .t-side{width:73px;height:223px;margin-left:-36.5px}
  .t-left{transform:translateX(-88px) rotateY(90deg)}
  .t-right{transform:translateX(88px) rotateY(90deg)}
  .t-qr{width:72px;height:72px}
}

/* Hausfarben je Hotel */
.tent3d{--c-bg:#141b33;--c-ink:#ffffff;--c-acc:#d9b96a}
.tent3d.font-sans{--tent-font:var(--sans)}
.tent3d.font-serif{--tent-font:var(--serif)}
.t-quelle{max-width:30rem;margin-top:14px;font-size:15px;color:var(--muted);text-align:center}
.t-quelle b{font-weight:600;color:var(--ink)}