/* Ferienwohnungen Schmid · neues statisches Website-Grundgerüst
   Designbasis: Garage-Seite. Keine externen Frameworks. */
:root{
  --ink:#13283f;
  --ink-soft:#2f4a66;
  --blue:#478ac9;
  --brass:#a6824c;
  --brass-soft:#c9af80;
  --ivory:#f6f2ea;
  --paper:#fffdf9;
  --line:#e3dccd;
  --text:#23211c;
  --muted:#6b6457;
  --ok:#3b6d4f;
  --danger:#b04646;
  --shadow:0 24px 60px -28px rgba(19,40,63,.35);
  --shadow-soft:0 18px 45px -34px rgba(19,40,63,.32);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  font-family:'Jost','Segoe UI',system-ui,-apple-system,sans-serif;
  /* gleicher Ivory-Ton, veredelt mit sanfter Leinen-/Papierstruktur. Unregelmäßig
     wie echtes Gewebe: Grundgitter (7px, etwas kräftiger) + dickere Fäden in
     teilerfremden Abständen (23/31px, addieren sich stellenweise) + helle Linien
     (43/53px), die das Gitter stellenweise ausdünnen. Durch die teilerfremden
     Perioden wiederholt sich das Gesamtbild praktisch nie sichtbar. */
  background:
    repeating-linear-gradient(0deg,rgba(255,253,249,.5) 0 1px,transparent 1px 43px),
    repeating-linear-gradient(90deg,rgba(255,253,249,.5) 0 1px,transparent 1px 53px),
    repeating-linear-gradient(0deg,rgba(19,40,63,.014) 0 1px,transparent 1px 23px),
    repeating-linear-gradient(90deg,rgba(19,40,63,.014) 0 1px,transparent 1px 31px),
    repeating-linear-gradient(0deg,rgba(19,40,63,.02) 0 1px,transparent 1px 7px),
    repeating-linear-gradient(90deg,rgba(19,40,63,.02) 0 1px,transparent 1px 7px),
    var(--ivory);
  color:var(--text);
  font-size:17px;
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
}
@media(min-width:1100px){body{font-size:18px}}
::selection{background:var(--brass);color:#fff}
a{color:inherit}button,input,textarea,select{font-family:inherit}
img{max-width:100%;display:block}
.eyebrow{font-size:.78rem;letter-spacing:.28em;text-transform:uppercase;font-weight:500;color:var(--brass)}
h1,h2,h3,h4{font-family:'Cormorant Garamond',serif;font-weight:600;color:var(--ink);line-height:1.1;letter-spacing:.005em}
p{max-width:72ch}.lead{font-size:clamp(1.08rem,2vw,1.28rem)}
.skip{position:absolute;left:-999px;top:0;background:#fff;color:var(--ink);padding:.8rem 1rem;z-index:200}
.skip:focus{left:1rem;top:1rem}
/* Header */
header.bar{position:sticky;top:0;z-index:80;background:repeating-linear-gradient(0deg,rgba(255,253,249,.5) 0 1px,transparent 1px 43px),repeating-linear-gradient(90deg,rgba(255,253,249,.5) 0 1px,transparent 1px 53px),repeating-linear-gradient(0deg,rgba(19,40,63,.016) 0 1px,transparent 1px 23px),repeating-linear-gradient(90deg,rgba(19,40,63,.016) 0 1px,transparent 1px 31px),repeating-linear-gradient(0deg,rgba(19,40,63,.024) 0 1px,transparent 1px 7px),repeating-linear-gradient(90deg,rgba(19,40,63,.024) 0 1px,transparent 1px 7px),rgba(246,242,234,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar-in{max-width:1180px;margin:0 auto;padding:.85rem 1.4rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;flex-direction:column;line-height:1.12;text-decoration:none;min-width:0;flex:none}
.brand b{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:600;color:var(--ink);letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand span{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--brass);font-weight:500}
.nav{display:flex;align-items:center;gap:.1rem;margin-left:auto}
.nav a{font-size:.88rem;color:var(--ink-soft);text-decoration:none;padding:.55rem .65rem;border-radius:999px;white-space:nowrap;transition:background .2s,color .2s}
.nav a:hover,.nav a[aria-current="page"]{background:rgba(166,130,76,.12);color:var(--ink)}
.bar-actions{display:flex;align-items:center;gap:.75rem;flex:none}
.lang{position:relative}.lang-btn{display:flex;align-items:center;gap:.5rem;background:#fff;border:1px solid var(--line);border-radius:999px;padding:.4rem .7rem;cursor:pointer;font-size:.85rem;color:var(--ink);min-height:40px}.lang-btn:hover{border-color:var(--brass)}.lang-btn .flag{border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.08);display:block}.lang-btn .chev{width:14px;height:14px;stroke:var(--muted);transition:transform .2s}.lang.open .chev{transform:rotate(180deg)}.lang-menu{position:absolute;right:0;top:calc(100% + 8px);background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:.4rem;min-width:176px;display:none;z-index:90}.lang.open .lang-menu{display:block}.lang-item{display:flex;align-items:center;gap:.7rem;width:100%;text-align:left;background:none;border:none;padding:.6rem .7rem;border-radius:8px;cursor:pointer;font-size:.95rem;color:var(--text);text-decoration:none}.lang-item:hover{background:var(--ivory)}.lang-item .flag{border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.08)}.lang-item[aria-current="true"]{color:var(--ink);font-weight:500}
.menu-btn{display:none;width:44px;height:44px;border:1px solid var(--line);background:#fff;border-radius:50%;cursor:pointer;place-items:center}.menu-btn svg{width:20px;height:20px;stroke:var(--ink)}
.book-pill{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;background:var(--ink);color:#fff;text-decoration:none;border-radius:999px;padding:.62rem .9rem;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500;white-space:nowrap;transition:background .22s,transform .12s}.book-pill:hover{background:#1d3b5d}.book-pill:active{transform:translateY(1px)}
@media(max-width:1040px){.menu-btn{display:grid}.nav{position:absolute;left:1rem;right:1rem;top:calc(100% + 8px);display:none;flex-direction:column;align-items:stretch;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:16px;padding:.8rem}.nav.open{display:flex}.nav a{border-radius:10px;padding:.75rem 1rem}.book-pill span{display:none}}
@media(max-width:640px){.bar-in{padding-left:1rem;padding-right:1rem}.brand b{font-size:1.25rem}.brand span{font-size:.58rem}.book-pill{display:none}}
/* Hero */
.hero{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 80% -10%, rgba(71,138,201,.18), transparent 60%),linear-gradient(180deg,var(--ink) 0%, #0f2236 100%);color:#eef2f6}
.hero::after{content:"";position:absolute;inset:0;opacity:.06;mix-blend-mode:overlay;background-image:repeating-linear-gradient(135deg,#fff 0 1px,transparent 1px 9px);pointer-events:none}
.hero-in{max-width:1180px;margin:0 auto;padding:5.4rem 1.4rem 5.2rem;position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.72fr);gap:3.2rem;align-items:center}.hero .eyebrow{color:var(--brass-soft)}.hero h1{color:#fff;font-size:clamp(2.8rem,7.5vw,5.3rem);margin:.65rem 0 .2rem}.hero h1 em{font-style:italic;color:var(--brass-soft);font-weight:500}.hero p.lead{color:#cdd8e2;margin-top:1.15rem}.rule{width:64px;height:2px;background:var(--brass);margin:1.7rem 0 0}.marks{display:flex;flex-wrap:wrap;gap:1rem 1.55rem;margin-top:2.3rem}.mark{display:flex;align-items:center;gap:.65rem;font-size:.95rem;color:#bccada}.mark svg{width:19px;height:19px;stroke:var(--brass-soft);flex:none}.hero-card{background:rgba(255,253,249,.08);border:1px solid rgba(255,255,255,.14);border-radius:22px;box-shadow:var(--shadow);padding:1.35rem;backdrop-filter:blur(8px)}.hero-photo{min-height:360px;border-radius:18px;overflow:hidden;position:relative;background:linear-gradient(135deg,rgba(201,175,128,.18),rgba(71,138,201,.18)),linear-gradient(160deg,#223a55,#0f2236 55%,#846a43)}.hero-photo::before{content:"";position:absolute;inset:10%;border:1px solid rgba(255,255,255,.16);border-radius:14px}.hero-photo::after{content:"Silberne Fischgasse 6";position:absolute;left:1.2rem;bottom:1.1rem;color:#fff;font-family:'Cormorant Garamond',serif;font-size:1.6rem}.hero-note{margin-top:1rem;color:#d5dee7;font-size:.95rem}.hero-actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;text-decoration:none;border-radius:999px;padding:.85rem 1.15rem;font-size:.86rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;border:1px solid transparent;transition:background .22s,border-color .22s,transform .12s}.btn:active{transform:translateY(1px)}.btn-primary{background:var(--brass);color:#fff}.btn-primary:hover{background:#b89160}.btn-secondary{border-color:rgba(255,255,255,.24);color:#fff}.btn-secondary:hover{background:rgba(255,255,255,.08)}.btn-dark{background:var(--ink);color:#fff}.btn-dark:hover{background:#1d3b5d}.btn-light{background:#fff;color:var(--ink);border-color:var(--line)}.btn-light:hover{border-color:var(--brass)}
@media(max-width:920px){.hero-in{grid-template-columns:1fr;padding-top:4rem}.hero-card{display:none}.hero p.lead{max-width:66ch}}
@media(max-width:640px){.hero-in{padding-left:1rem;padding-right:1rem}.hero-actions .btn{width:100%}.marks{gap:.8rem 1rem}}
/* Sections */
main{max-width:1180px;margin:0 auto;padding:0 1.4rem}.section{padding:2.6rem 0}.section.compact{padding:1.6rem 0}.section-head{display:flex;align-items:end;justify-content:space-between;gap:2rem;margin-bottom:1.5rem}.section-head h2{font-size:clamp(2.15rem,4vw,3.2rem);margin-top:.35rem}.section-head p{color:var(--muted);margin-top:.75rem}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}.card{background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-soft);overflow:hidden}.card.pad{padding:1.55rem}.card h3{font-size:1.75rem;margin:.45rem 0}.card p{color:var(--muted);font-size:.98rem}.card .meta{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}.chip{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--line);background:#fff;border-radius:999px;padding:.35rem .62rem;font-size:.8rem;color:var(--ink-soft)}.chip svg{width:14px;height:14px;stroke:var(--brass)}.card-top{height:160px;background:linear-gradient(135deg,rgba(19,40,63,.92),rgba(166,130,76,.7));position:relative}.card-top::after{content:"";position:absolute;inset:1rem;border:1px solid rgba(255,255,255,.18);border-radius:12px}.price{font-family:'Cormorant Garamond',serif;color:var(--ink);font-size:1.6rem}.quote-strip{background:var(--ink);border-radius:22px;color:#d5dee7;box-shadow:var(--shadow);padding:1.6rem;display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem}.quote{border-left:2px solid var(--brass);padding-left:1rem}.quote strong{display:block;color:#fff;font-family:'Cormorant Garamond',serif;font-size:1.35rem;margin-bottom:.25rem}.quote span{font-size:.95rem;color:#b9c7d5}.split{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;align-items:stretch}.feature-list{display:grid;gap:.85rem}.feature{display:flex;align-items:flex-start;gap:.8rem}.feature svg{width:22px;height:22px;stroke:var(--brass);margin-top:.2rem;flex:none}.feature b{display:block;color:var(--ink);line-height:1.25}.feature span{display:block;color:var(--muted);font-size:.95rem}.notice{background:#fff;border:1px solid var(--line);border-left:3px solid var(--brass);border-radius:14px;padding:1.05rem 1.2rem;color:var(--muted)}.notice b{color:var(--ink)}
@media(max-width:920px){.grid-3,.grid-2,.split,.quote-strip{grid-template-columns:1fr}.section-head{display:block}.section{padding:2rem 0}}
@media(max-width:640px){main{padding-left:1rem;padding-right:1rem}.card.pad{padding:1.25rem}}
/* Inquiry */
.form-card{background:var(--ink);color:#e9eef3;border-radius:20px;box-shadow:var(--shadow);padding:1.6rem}.form-card .eyebrow{color:var(--brass-soft)}.form-card h2,.form-card h3{color:#fff}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.field{margin-top:1rem}.field label{display:block;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:#b3c1d1;margin-bottom:.4rem}.field input,.field textarea,.field select{width:100%;padding:.88rem .9rem;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;border-radius:9px;font-size:1rem}.field select option{color:#111}.field textarea{min-height:110px;resize:vertical}.field input::placeholder,.field textarea::placeholder{color:#7e8b99}.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--brass-soft);background:rgba(255,255,255,.1)}.field.full{grid-column:1/-1}.form-help{font-size:.9rem;color:#9fb0c1;margin-top:.7rem}.form-message{min-height:1.2rem;font-size:.95rem;margin-top:.9rem;color:#c9af80}.legal-check{display:flex;gap:.65rem;align-items:flex-start;margin-top:1rem;color:#b3c1d1;font-size:.88rem}.legal-check input{margin-top:.35rem}.legal-check a{color:#fff;text-decoration:none;border-bottom:1px solid var(--brass-soft)}
@media(max-width:640px){.form-grid{grid-template-columns:1fr}}
/* Pages / Legal */
.page-hero{background:linear-gradient(180deg,var(--ink),#0f2236);color:#eef2f6}.page-hero .wrap{max-width:1180px;margin:0 auto;padding:4rem 1.4rem}.page-hero h1{color:#fff;font-size:clamp(2.4rem,6vw,4.2rem);margin-top:.4rem}.page-hero p{color:#cdd8e2;margin-top:1rem}.legal{max-width:900px;margin:0 auto}.legal h2{font-size:2rem;margin:2.2rem 0 .7rem}.legal h3{font-size:1.45rem;margin:1.5rem 0 .45rem}.legal p,.legal li{color:var(--muted)}.legal ul{padding-left:1.2rem}.placeholder{background:var(--paper);border:1px dashed var(--brass-soft);border-radius:18px;padding:2rem;color:var(--muted)}.placeholder strong{display:block;color:var(--ink);font-family:'Cormorant Garamond',serif;font-size:1.7rem;margin-bottom:.4rem}
/* Footer */
footer{margin-top:4.5rem;background:var(--ink);color:#aebccb}.foot-in{max-width:1180px;margin:0 auto;padding:3rem 1.4rem 2.2rem;display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:2rem}.foot-in .brand b{color:#fff}.foot-in address{font-style:normal;font-size:.96rem;line-height:1.85;margin-top:.8rem}.foot-links{display:flex;flex-direction:column;gap:.55rem;font-size:.95rem}.foot-links a{text-decoration:none;transition:color .2s}.foot-links a:hover{color:var(--brass-soft)}.copy{max-width:1180px;margin:0 auto;padding:1.3rem 1.4rem 2.4rem;font-size:.82rem;color:#788796;border-top:1px solid rgba(255,255,255,.08)}
@media(max-width:760px){.foot-in{grid-template-columns:1fr;padding-left:1rem;padding-right:1rem}.copy{padding-left:1rem;padding-right:1rem}}

/* ============================================================
   Verfügbarkeitsanzeige · zentrale, wiederverwendbare Komponente
   (gespeist live aus /assets/json/belegungen_*.json via belegung.js)
   ============================================================ */
.availability{background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-soft);padding:1.4rem 1.5rem}
.av-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:.2rem}
.av-head .eyebrow{margin-bottom:.1rem}
.av-title{font-family:'Cormorant Garamond',serif;font-size:1.7rem;color:var(--ink);line-height:1.1}
.av-note{font-size:.82rem;color:var(--muted)}
/* Veralteter Datenstand (Sync hängt / alte Daten) – dezent, aber für uns erkennbar */
.av-note.is-stale{color:#b25f00;font-weight:600;cursor:help}
.av-legend{display:flex;gap:1.1rem;margin:.7rem 0 1.1rem;font-size:.8rem;color:var(--muted);flex-wrap:wrap}
.av-legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:.4rem;vertical-align:-1px}
.av-legend .lf{background:rgba(59,109,79,.7)}
.av-legend .lb{background:rgba(176,70,70,.7)}
.av-legend .lt{background:linear-gradient(135deg,rgba(176,70,70,.7) 0 calc(50% - 0.5px),var(--paper) calc(50% - 0.5px) calc(50% + 0.5px),rgba(59,109,79,.7) calc(50% + 0.5px) 100%)}
.av-legend .lu{background:var(--av-unbookable,rgba(122,128,138,.45))}
.av-months{display:grid;grid-template-columns:repeat(auto-fit,minmax(208px,1fr));gap:1rem 1.3rem}
.av-month .mon{font-family:'Cormorant Garamond',serif;font-size:1.15rem;font-weight:600;color:var(--ink);margin-bottom:.45rem;text-align:center}
.av-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:3px}
.av-dow span{text-align:center;font-size:.6rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.av-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.av-day{aspect-ratio:1;display:grid;place-items:center;font-size:.74rem;border-radius:5px;color:var(--ink-soft)}
.av-day.empty{visibility:hidden}
.av-day.out{color:#cdc6b8}
.av-day.past{color:#cdc6b8}
/* --av-unbookable: helles Grau für zu kurze, nicht buchbare Lücken (zentral anpassbar). */
.av-day{--av-unbookable:rgba(122,128,138,.30)}
.av-day.free{background:rgba(59,109,79,.22);color:var(--ink)}
.av-day.booked{background:rgba(176,70,70,.14);color:#9c4040;text-decoration:line-through;text-decoration-color:rgba(176,70,70,.5)}
/* Wechseltage: Vormittag (links oben) = Vor-Nacht, Nachmittag (rechts unten) = heutige Nacht.
   turn-out = Abreisetag (vormittags belegt, nachmittags frei → Anreise möglich).
   turn-in  = Anreisetag (vormittags frei, nachmittags belegt → Abreise möglich). */
.av-day.turn{color:var(--ink);text-decoration:none}
.av-day.turn-out{background:linear-gradient(135deg,rgba(176,70,70,.18) 0 calc(50% - 0.5px),var(--paper) calc(50% - 0.5px) calc(50% + 0.5px),rgba(59,109,79,.28) calc(50% + 0.5px) 100%)}
.av-day.turn-in{background:linear-gradient(135deg,rgba(59,109,79,.28) 0 calc(50% - 0.5px),var(--paper) calc(50% - 0.5px) calc(50% + 0.5px),rgba(176,70,70,.18) calc(50% + 0.5px) 100%)}
/* Zu kurze Lücken (< Mindestaufenthalt): grüne Hälften durch helles Grau ersetzen.
   unbookable = beide Nächte frei aber unbuchbar (ganz grau);
   grey-pm/grey-am = nur die freie Hälfte eines Wechseltags grau. */
.av-day.unbookable{background:var(--av-unbookable);color:var(--ink-soft);text-decoration:none}
.av-day.turn-out.grey-pm{background:linear-gradient(135deg,rgba(176,70,70,.18) 0 calc(50% - 0.5px),var(--paper) calc(50% - 0.5px) calc(50% + 0.5px),var(--av-unbookable) calc(50% + 0.5px) 100%)}
.av-day.turn-in.grey-am{background:linear-gradient(135deg,var(--av-unbookable) 0 calc(50% - 0.5px),var(--paper) calc(50% - 0.5px) calc(50% + 0.5px),rgba(176,70,70,.18) calc(50% + 0.5px) 100%)}
.av-cta{margin-top:1.15rem}
.av-cta a{display:inline-flex;align-items:center;gap:.45rem;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--brass);padding-bottom:2px}
.av-cta a:hover{color:var(--brass)}
.av-empty{color:var(--muted);font-size:.95rem}
/* Kompakte Variante für die Wohnungsseiten – „viel kleiner“ als auf der Garage */
.availability.compact{padding:1.15rem 1.2rem}
.availability.compact .av-title{font-size:1.4rem}
.availability.compact .av-months{grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:.8rem 1rem}
.availability.compact .av-day{font-size:.66rem;border-radius:4px}
.availability.compact .av-month .mon{font-size:1.02rem}
@media(max-width:560px){
  .availability{padding:1.15rem 1rem}
  .av-months{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
}

/* ===== Verfügbarkeit: horizontal scrollbare Monate + Auswahl + Preisrechner ===== */
.av-info{display:flex;flex-wrap:wrap;gap:.3rem .9rem;margin-top:.4rem;font-size:.92rem;color:var(--muted)}
.av-info-pers{color:var(--ink-soft);font-weight:500}
.av-info-beds::before{content:"·";margin-right:.6rem;color:var(--brass)}
.av-scroll-wrap{position:relative;margin-top:.2rem}
.av-scroll{display:flex;gap:14px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--brass-soft) transparent}
.av-scroll.paged{display:flex;gap:18px;scroll-snap-type:x mandatory}
.av-scroll.paged .av-page{flex:0 0 100%;scroll-snap-align:start;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:auto;gap:.9rem 1rem}
.av-scroll.paged .av-month{width:auto}
.av-scroll::-webkit-scrollbar{height:8px}
.av-scroll::-webkit-scrollbar-thumb{background:var(--brass-soft);border-radius:8px}
.av-month{flex:0 0 auto;width:196px;scroll-snap-align:start}
.av-day{font-size:.8rem}
.availability.compact .av-month{width:176px}
.availability.compact .av-day{font-size:.7rem}
.av-arrow{position:absolute;top:44%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;display:grid;place-items:center;font-size:1.2rem;line-height:1;color:var(--ink);box-shadow:var(--shadow-soft);z-index:3;transition:border-color .2s,opacity .2s}
.av-arrow:hover:not(:disabled){border-color:var(--brass)}
.av-arrow:disabled{opacity:.25;cursor:default}
.av-arrow.prev{left:-8px}.av-arrow.next{right:-8px}
/* Auswahl im Buchungsmodus */
.av-day[data-d]{cursor:pointer}
.av-day[data-d]:hover{background:rgba(59,109,79,.28)}
/* Hover auf Wechseltagen den Split nicht plattbügeln, nur leicht verstärken */
.av-day.turn-out[data-d]:hover{background:linear-gradient(135deg,rgba(176,70,70,.28) 0 calc(50% - 0.5px),var(--paper) calc(50% - 0.5px) calc(50% + 0.5px),rgba(59,109,79,.28) calc(50% + 0.5px) 100%)}
.av-day.turn-in[data-d]:hover{background:linear-gradient(135deg,rgba(59,109,79,.28) 0 calc(50% - 0.5px),var(--paper) calc(50% - 0.5px) calc(50% + 0.5px),rgba(176,70,70,.28) calc(50% + 0.5px) 100%)}
/* Unbuchbare (graue) Hälften bleiben auch beim Hover grau – nicht grün aufleuchten */
.av-day.unbookable[data-d]:hover{background:var(--av-unbookable)}
.av-day.turn-out.grey-pm[data-d]:hover{background:linear-gradient(135deg,rgba(176,70,70,.28) 0 calc(50% - 0.5px),var(--paper) calc(50% - 0.5px) calc(50% + 0.5px),var(--av-unbookable) calc(50% + 0.5px) 100%)}
.av-day.turn-in.grey-am[data-d]:hover{background:linear-gradient(135deg,var(--av-unbookable) 0 calc(50% - 0.5px),var(--paper) calc(50% - 0.5px) calc(50% + 0.5px),rgba(176,70,70,.28) calc(50% + 0.5px) 100%)}
.av-day.in-range{background:rgba(71,138,201,.22);border-radius:0;color:var(--ink);text-decoration:none}
.av-day.edge{background:var(--ink);color:#fff;font-weight:500;border-radius:6px;text-decoration:none}
.av-day.edge.start{border-radius:6px 0 0 6px}
.av-day.edge.end{border-radius:0 6px 6px 0}
.av-day.edge.solo{border-radius:6px}
/* Auswahl (Anreise/Abreise/Zeitraum) hat Vorrang vor der Wechseltag-Optik – auch beim Hover */
.av-day.edge[data-d]:hover{background:var(--ink)}
.av-day.in-range[data-d]:hover{background:rgba(71,138,201,.22)}
.av-hint{font-size:.8rem;color:var(--muted);margin-top:.6rem}
.av-warn{font-size:.84rem;font-weight:500;color:#9c4040;margin-top:.5rem;display:flex;align-items:center;gap:.4rem;animation:avWarnIn .18s ease}
.av-warn::before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:#b04646}
@keyframes avWarnIn{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:none}}
/* Buchungslayout: Kalender links, Preisrechner rechts (4.-Monat-Platz) */
.av-book{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:1.6rem;align-items:start;margin-top:.7rem}
.av-cal{min-width:0}
@media(max-width:920px){.av-book{grid-template-columns:1fr}}
.av-calc{background:var(--ink);color:#e9eef3;border-radius:14px;padding:1.2rem 1.25rem}
.av-calc .eyebrow{color:var(--brass-soft)}
.av-calc-title{font-family:'Cormorant Garamond',serif;font-size:1.5rem;color:#fff;margin:.1rem 0 .8rem;line-height:1.1}
.av-calc-from{color:#cdd8e2;font-size:.95rem;margin:.1rem 0 .9rem}
.av-calc-from b{color:#fff;font-size:1.6rem;font-family:'Cormorant Garamond',serif}
.av-calc-from-sub{font-size:.82rem;color:#9fb0c1}
.av-calc-field{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:.3rem 0 .9rem}
.av-calc-field span{font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:#b3c1d1}
/* Eigener Messing-Pfeil statt des schwarzen System-Pfeils (passt zur dunklen Box) */
.av-calc-field select{appearance:none;-webkit-appearance:none;background-color:rgba(255,255,255,.08);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9af80' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right .55rem center;background-size:15px;color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:.5rem 2rem .5rem .65rem;font-size:1rem;cursor:pointer}
.av-calc-field select option{color:#111}
.av-calc-hint{font-size:.92rem;color:#9fb0c1;line-height:1.5}
.av-calc-rows{margin:.1rem 0 .9rem}
.av-row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.55rem 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:1.02rem;color:#cdd8e2}
.av-row b{color:#fff}
.av-row.disc span,.av-row.disc b{color:#8fe3a8} /* gewährte Rabatte in Grün */
.av-calc-rules{font-size:.86rem;color:#9fb0c1;margin:.1rem 0 .9rem;line-height:1.5}
.av-row.total{border-bottom:none;padding-top:.85rem}
.av-row.total span{font-family:'Cormorant Garamond',serif;font-size:1.3rem;color:#fff}
.av-row.total b{font-family:'Cormorant Garamond',serif;font-size:1.7rem;color:var(--brass-soft);font-weight:600}
.av-calc .btn{width:100%;margin-top:.2rem}
.av-calc-note{font-size:.78rem;color:#9fb0c1;margin-top:.7rem;line-height:1.5}
@media(max-width:560px){.av-arrow{display:none}.av-month{width:172px}.av-scroll.paged .av-page{grid-template-columns:repeat(2,1fr)}}

/* ===== Startseite: Bild-Kacheln für Garten & Garage ===== */
.card-photo{height:230px;background-size:cover;background-position:center}
.media-card{position:relative;border:none;min-height:300px;border-radius:18px;overflow:hidden;display:flex;align-items:flex-end;color:#fff;background-size:cover;background-position:center;box-shadow:var(--shadow)}
.media-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,28,42,.05) 0%,rgba(15,28,42,.55) 70%,rgba(15,28,42,.82) 100%)}
.media-card .media-body{position:relative;z-index:2;padding:1.5rem 1.5rem 1.4rem}
.media-card .eyebrow{color:var(--brass-soft)}
.media-card h2,.media-card h3{color:#fff}
.media-card p{color:#e7edf3}
.media-card .chip{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);color:#fff}
.media-card .chip svg{stroke:var(--brass-soft)}
.media-tag{position:absolute;z-index:2;top:1rem;left:1rem;background:rgba(166,130,76,.92);color:#fff;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;padding:.4rem .7rem;border-radius:999px}
.split.media-split{align-items:stretch}
@media(max-width:920px){.media-card{min-height:240px}}

/* ===== Regensburg-Banner (Startseite) ===== */
.banner{position:relative;border-radius:18px;overflow:hidden;min-height:220px;display:flex;align-items:center;background-size:cover;background-position:center;box-shadow:var(--shadow)}
.banner::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,28,42,.78) 0%,rgba(15,28,42,.5) 45%,rgba(15,28,42,.15) 100%)}
.banner-in{position:relative;z-index:2;padding:2rem 2.2rem;color:#fff;max-width:640px}
.banner-in .eyebrow{color:var(--brass-soft)}
.banner-in h2,.banner-in .banner-title{color:#fff;font-family:'Cormorant Garamond',serif;font-weight:600;line-height:1.1;font-size:clamp(1.9rem,4vw,2.8rem);margin:.3rem 0 .4rem}
.banner-in p{color:#e7edf3}
@media(max-width:640px){.banner{min-height:200px}.banner::after{background:linear-gradient(180deg,rgba(15,28,42,.35),rgba(15,28,42,.78))}.banner-in{padding:1.4rem}}

/* ===== Kontaktseite: Gastgeber-Vorstellung ===== */
.host{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:2rem;align-items:center}
.host-photo{border-radius:18px;overflow:hidden;box-shadow:var(--shadow);background:var(--line)}
.host-photo img{width:100%;height:100%;object-fit:cover;display:block}
.host-body .eyebrow{color:var(--brass)}
.contact-list{display:grid;gap:.9rem;margin:1.4rem 0 1.6rem}
.contact-row{display:flex;align-items:flex-start;gap:.85rem}
.contact-row svg{width:22px;height:22px;stroke:var(--brass);flex:none;margin-top:.15rem}
.contact-row .lbl{display:block;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.contact-row a,.contact-row span.val{color:var(--ink);text-decoration:none;font-size:1.05rem}
.contact-row a:hover{color:var(--brass)}
.contact-row .note{display:block;font-size:.92rem;color:var(--muted);margin-top:.1rem}
.contact-cols{grid-template-columns:1fr 1fr;gap:1.3rem 2rem;margin:1.8rem 0 1.6rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.contact-cols+.notice{margin-bottom:1.4rem;font-size:.97rem}
.host-photo img{aspect-ratio:4/3}
@media(max-width:760px){.host{grid-template-columns:1fr;gap:1.4rem}.contact-cols{grid-template-columns:1fr}}

/* ===== Hero kompakter + zentrale Foto-Kachel ===== */
.hero-in{padding-top:3.8rem;padding-bottom:3.8rem}
.hero h1{font-size:clamp(2.5rem,6vw,4.4rem)}
.hero-photo{background-size:cover;background-position:center;box-shadow:inset 0 -70px 70px -34px rgba(0,0,0,.6)}
.hero-photo::after{text-shadow:0 1px 8px rgba(0,0,0,.7);z-index:2}
.hero-photo::before{z-index:1}
@media(min-width:921px){.hero-photo{min-height:320px}}

/* ===== Wohnungs-Detailseiten ===== */
.facts{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem}
.facts .chip{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);color:#fff;font-size:.85rem}
.detail-lead{max-width:760px}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.gallery button{padding:0;border:none;background:none;cursor:pointer;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-soft);aspect-ratio:4/3}
.gallery img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.gallery button:hover img{transform:scale(1.05)}
.gallery button:first-child{grid-column:span 2;grid-row:span 2}
@media(max-width:760px){.gallery{grid-template-columns:repeat(2,1fr)}.gallery button:first-child{grid-column:span 2;grid-row:auto}}
.amenities{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem 1.6rem;margin-top:1.3rem}
.amenity{display:flex;align-items:flex-start;gap:.7rem}
.amenity svg{width:22px;height:22px;stroke:var(--brass);flex:none;margin-top:.15rem}
.amenity span{color:var(--text);font-size:.98rem;line-height:1.4}
@media(max-width:640px){.amenities{grid-template-columns:1fr}}
.detail-cta{background:var(--ink);color:#e9eef3;border-radius:20px;box-shadow:var(--shadow);padding:2rem;text-align:center}
.detail-cta .eyebrow{color:var(--brass-soft)}
.detail-cta h2{color:#fff;margin:.3rem 0 .5rem}
.detail-cta p{color:#cdd8e2;max-width:560px;margin:0 auto 1.3rem}
.detail-cta .hero-actions{justify-content:center}
/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(10,18,28,.92);display:none;align-items:center;justify-content:center;z-index:200;padding:2rem}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:84vh;border-radius:10px;box-shadow:0 30px 80px -20px rgba(0,0,0,.7)}
.lb-btn{position:absolute;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;width:52px;height:52px;border-radius:50%;font-size:1.6rem;cursor:pointer;display:grid;place-items:center;transition:background .2s}
.lb-btn:hover{background:rgba(255,255,255,.24)}
.lb-prev{left:2vw}.lb-next{right:2vw}.lb-close{top:2vh;right:2vw;width:46px;height:46px;font-size:1.3rem}
@media(max-width:640px){.lb-prev{left:.5rem}.lb-next{right:.5rem}.lb-btn{width:44px;height:44px}}

/* ============================================================
   Umbau-Anpassungen (Startseite)
   ============================================================ */

/* (#8) UNESCO-Banner über volle Breite zwischen Navigation und Hero */
.banner-full{width:100%}
.banner-full .banner{border-radius:0;min-height:210px}
.banner-full .banner-in{max-width:1180px;width:100%;margin:0 auto;padding:2rem 1.4rem}
.banner-full .banner-in p{max-width:560px}
@media(max-width:640px){.banner-full .banner-in{padding:1.4rem 1rem}}

/* (#4) Goldene Ellipse hinter „Silberne Fischgasse 6“ – bessere Lesbarkeit */
.hero-photo::after{
  padding:.55rem 1.4rem;
  border-radius:50% / 80%;
  background:radial-gradient(ellipse at center,
              rgba(166,130,76,.95) 0%,
              rgba(166,130,76,.85) 55%,
              rgba(166,130,76,0) 100%);
  color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,.55);
}

/* (#5) „Details ansehen“ markanter: goldener Button, nach rechts, etwas höher */
.grid-2 .card{position:relative;transition:box-shadow .25s,transform .25s}
.grid-2 .card:hover{transform:translateY(-3px);box-shadow:0 32px 72px -30px rgba(19,40,63,.5)}
/* Ganze Wohnungs-Box ist klickbar (führt zur Detailseite, siehe main.js) */
.card-clickable{cursor:pointer}
.card-cta{position:absolute;top:204px;right:1.1rem;margin:0;z-index:3}
.btn-detail{
  background:var(--brass);color:#fff;border-color:var(--brass);
  box-shadow:0 14px 30px -12px rgba(166,130,76,.95),0 2px 6px rgba(0,0,0,.18);
}
.btn-detail:hover{background:#b89160;border-color:#b89160}
@media(max-width:920px){
  /* gestapeltes Grid: Button bleibt rechts, sitzt am Foto-Unterrand */
  .card-cta{top:204px}
}

/* ============================================================
   Umbau 2 · Startseite (Buttons, Hero/Banner, Vertrauen)
   ============================================================ */

/* (1) „Details ansehen“ kompakter & sauber im Fluss – kein Überstand mehr */
.grid-2 .card{position:relative}
.card-cta{position:static;display:flex;justify-content:flex-end;margin-top:1rem}
.btn-detail{
  padding:.58rem .95rem;font-size:.76rem;letter-spacing:.09em;
  background:var(--brass);color:#fff;border-color:var(--brass);
  box-shadow:0 10px 22px -12px rgba(166,130,76,.9);
}
.btn-detail:hover{background:#b89160;border-color:#b89160}

/* (4) Hero schlanker; Foto „Silberne Fischgasse 6“ ragt in den Banner */
.hero{overflow:visible}
.hero-in{align-items:start;padding-top:2.4rem;padding-bottom:3rem}
.hero h1{margin-top:0}
@media(min-width:921px){
  .hero-card{margin-top:-7rem;position:relative;z-index:5}
  .hero-photo{min-height:300px}
}

/* (2) Vertrauen: Bewertungs-Highlights + breiteres Feature-Raster */
.trust-scores{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.8rem 1.6rem;margin:1.2rem 0 .2rem}
.tscore{display:flex;flex-direction:column;line-height:1.05}
.tscore b{font-family:'Cormorant Garamond',serif;font-size:1.8rem;color:var(--brass);font-weight:600}
.tscore span{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:.15rem}
.tscore-note{flex-basis:100%;font-size:.82rem;color:var(--muted);margin-top:.3rem}
.trust-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem 1.7rem;margin-top:1.5rem}
@media(max-width:560px){.trust-grid{grid-template-columns:1fr}}

/* ===== Erweiterungen: Anfrageseite, Apartment-CTA, kompaktere Ausstattung ===== */

/* Regeln in einer Zeile (Wohnung 1/2) */
.rules-line{
  display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;
  align-items:center;justify-content:center;
  margin:.6rem 0 .2rem;color:var(--ink-soft);font-size:.95rem;text-align:center;
}
.rules-line span{display:inline-block}

/* Markanter Button für Apartment-CTA */
.btn-prominent{
  font-size:.95rem;letter-spacing:.14em;
  padding:1.05rem 1.6rem;border-radius:999px;
  box-shadow:0 12px 28px -10px rgba(166,130,76,.55);
}
.cta-hint{
  margin-top:.9rem;color:var(--muted);font-size:.95rem;text-align:center;font-style:italic;
}

/* Ausstattung kompakter (mehrere Spalten) */
.card .amenities{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:.55rem .9rem;
}
.card .amenities .amenity{
  display:flex;align-items:flex-start;gap:.55rem;
  padding:.35rem .15rem;font-size:.95rem;line-height:1.35;
}
.card .amenities .amenity svg{width:18px;height:18px;stroke:var(--brass);flex:none;margin-top:.18rem}

/* ===== Anfrageseite ===== */
.inquiry-page{max-width:1180px;margin:0 auto;padding:1rem 1.4rem 3rem;display:flex;flex-direction:column;gap:1.4rem}
@media(max-width:640px){.inquiry-page{padding-left:1rem;padding-right:1rem}}

.status-card{display:flex;flex-direction:column;gap:.45rem}
.status-card h2{font-size:1.7rem;margin:.2rem 0}
.status-msg{font-weight:500;margin:0;font-size:1.06rem}
.status-prompt{color:var(--ink-soft);font-size:1.04rem;line-height:1.55;margin:.2rem 0 .3rem;max-width:60ch}
.status-msg.ok{color:var(--ok)}
.status-msg.ok::before{content:"✓ ";font-weight:600}
.status-msg.taken{color:var(--danger)}
.status-msg.taken::before{content:"✗ ";font-weight:600}
.status-meta{color:var(--muted);font-size:1.02rem;margin:0}

.garage-card{border-left:3px solid var(--brass)}
.garage-card h3{margin:.3rem 0 .35rem;font-size:1.45rem}
.garage-card p{color:var(--ink-soft);margin:0 0 .6rem}
.garage-card .legal-check{color:var(--ink);font-size:.98rem}
.garage-card .legal-check span{font-weight:500}

.pay-card .info-list,.cancel-card .info-list{margin:.4rem 0 0;padding-left:1.2rem;color:var(--ink-soft)}
.pay-card .info-list li,.cancel-card .info-list li{margin:.5rem 0;line-height:1.6;font-size:1.02rem}
.pay-card .info-list li b,.cancel-card .info-list li b{color:var(--ink)}
.pay-card h3,.cancel-card h3{margin:.3rem 0 .4rem;font-size:1.45rem}
.cancel-card .muted{color:var(--muted);font-size:.98rem;margin-top:.8rem;font-style:italic;line-height:1.55}

/* Erfolgs-Overlay */
.success-overlay{
  position:fixed;inset:0;background:rgba(19,40,63,.55);
  display:flex;align-items:center;justify-content:center;z-index:200;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  padding:1rem;
}
.success-overlay[hidden]{display:none}
.success-box{
  background:var(--paper);border-radius:18px;padding:2rem 1.8rem 1.7rem;max-width:440px;width:100%;
  text-align:center;box-shadow:var(--shadow);
}
.success-check{width:72px;height:72px;stroke:var(--ok);margin:0 auto .6rem;display:block;stroke-linecap:round;stroke-linejoin:round}
.success-box h2{color:var(--ink);margin:.2rem 0 .4rem;font-size:2rem}
.success-box p{color:var(--ink-soft);margin:0 0 1.2rem}


/* ===== Anfrageseite: prominente Auswahl-Karten (Zahlung & Garage) ===== */
.choice-card h3{margin:.2rem 0 .9rem;font-size:1.35rem}
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:.5rem}
@media(max-width:680px){.choice-grid{grid-template-columns:1fr}}
.choice{
  display:flex;align-items:flex-start;gap:.7rem;
  border:1.5px solid var(--line);border-radius:14px;padding:.85rem 1rem;
  background:var(--paper);cursor:pointer;transition:border-color .15s, box-shadow .15s, background .15s;
}
.choice:hover{border-color:var(--brass)}
.choice input[type=radio],.choice input[type=checkbox]{margin-top:.15rem;accent-color:var(--brass);width:18px;height:18px;flex:none}
.choice:has(input:checked){border-color:var(--brass);background:rgba(166,130,76,.06);box-shadow:0 4px 14px -8px rgba(166,130,76,.45)}
.choice-body{display:flex;flex-direction:column;gap:.15rem}
.choice-title{font-weight:600;color:var(--ink);font-size:1.06rem}
.choice-note{color:var(--muted);font-size:1rem;line-height:1.5}
.choice-toggle{max-width:520px}

.pay-details{margin-top:1rem;border-top:1px solid var(--line);padding-top:.7rem}
.pay-details summary{cursor:pointer;color:var(--ink-soft);font-weight:500;padding:.4rem 0}
.pay-details summary:hover{color:var(--ink)}
.pay-details .info-list{margin-top:.2rem}

/* Submit ausgegraut */
.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn[disabled]:hover{transform:none;filter:none}
.form-help[hidden]{display:none}

/* ===== Anfrageformular: Validierung, Status & Honeypot ===== */
/* Honeypot – für echte Nutzer unsichtbar, aber von Bots ausfüllbar */
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none}

/* Feldfehler innerhalb der dunklen Form-Card */
.field-msg{display:block;min-height:0;margin-top:.4rem;font-size:.85rem;line-height:1.35;color:#ffb4b4}
.field-msg:empty{margin-top:0}
.field.is-error input,.field.is-error textarea{border-color:#ff8a8a;background:rgba(255,90,90,.1)}
.field.is-error input:focus,.field.is-error textarea:focus{border-color:#ffb4b4}
.field.is-error label{color:#ffb4b4}
.legal-check.is-error{color:#ffb4b4}
.legal-check.is-error input{outline:2px solid #ff8a8a;outline-offset:2px;border-radius:3px}

/* Fehler-Banner (z. B. Netzwerk-/Serverfehler) */
.form-error{margin-top:1rem;padding:.8rem 1rem;border-radius:10px;font-size:.92rem;line-height:1.45;
  background:rgba(255,90,90,.14);border:1px solid rgba(255,120,120,.5);color:#ffd0d0}
.form-error[hidden]{display:none}

/* Sende-Button mit Spinner */
#iSubmit{position:relative}
.btn-spinner{display:none;width:18px;height:18px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:btnspin .7s linear infinite}
#iSubmit.is-loading .btn-spinner{display:inline-block}
#iSubmit.is-loading{opacity:1;cursor:progress}
@keyframes btnspin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.btn-spinner{animation:none}}

/* Vorgangsnummer im Erfolgs-Overlay */
.success-ref{margin:0 0 1.2rem;color:var(--ink-soft);font-size:.95rem}
.success-ref[hidden]{display:none}
.success-ref b{font-family:'Cormorant Garamond',serif;font-size:1.25rem;color:var(--brass);letter-spacing:.04em}

/* =====================================================================
   Design-Refresh: Typografische Veredelung, Filet, Eyebrow-Linie,
   Dunkel-Sektion, Zahlen-Streifen, Galerie 4:5, Lightbox, Monogramm
   ===================================================================== */

/* 1) Größere Display-Headlines mit Cormorant-Charakter */
.page-hero h1,
.section-head h2,
.card.pad > h2,
.detail-cta h2{
  font-size:clamp(2.0rem, 4.6vw, 3.6rem);
  letter-spacing:-.012em;
  line-height:1.05;
  font-weight:500;
}
.page-hero h1 em,
.section-head h2 em,
.card.pad > h2 em{font-style:italic;color:var(--brass);font-weight:500}

/* 2) Filet — Brass-Raute zwischen zwei Haarlinien, über Section-Überschriften */
.section-head > div > .eyebrow + h2::before,
.detail-cta .eyebrow + h2::before{
  content:"";
  display:block;
  width:88px;height:7px;
  margin:.4rem auto .85rem;
  background:
    linear-gradient(to right, transparent 0, var(--brass) 5%, var(--brass) 42%, transparent 42%, transparent 58%, var(--brass) 58%, var(--brass) 95%, transparent 100%) center/100% 1px no-repeat,
    radial-gradient(circle at 50% 50%, var(--brass) 0, var(--brass) 2px, transparent 2.5px);
  background-repeat:no-repeat;
}
.section-head{text-align:center}
.section-head > div{display:inline-block}
.detail-cta{text-align:center}

/* 3) Eyebrows: echt small-caps + animierte Brass-Linie rechts daneben */
.eyebrow{
  display:inline-flex;align-items:center;gap:.7rem;
  font-variant-caps:all-small-caps;
}
.eyebrow::after{
  content:"";
  display:inline-block;
  width:0;height:1px;
  background:var(--brass);
  transition:width .55s cubic-bezier(.25,.7,.3,1);
  opacity:.85;
}
.eyebrow.in-view::after{width:28px}
@media(prefers-reduced-motion: reduce){
  .eyebrow::after{width:28px;transition:none}
}

/* 4) Dezenter weicher Papierhintergrund + Zitate */
blockquote{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.4rem;color:var(--ink);
  border-left:2px solid var(--brass);padding:.2rem 0 .2rem 1.1rem;margin:1.2rem 0;line-height:1.4}
blockquote::before{content:"»";color:var(--brass);font-size:1.6em;line-height:0;vertical-align:-.18em;margin-right:.15em}
blockquote::after{content:"«";color:var(--brass);font-size:1.6em;line-height:0;vertical-align:-.18em;margin-left:.1em}

/* 5) Dunkel-Sektion (--dark) */
.section--dark{
  background:linear-gradient(180deg, #0f2236 0%, #13283f 100%);
  color:#e2e9f0;position:relative;
}
.section--dark::before,.section--dark::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  width:160px;height:1px;background:linear-gradient(90deg, transparent, var(--brass), transparent);
}
.section--dark::before{top:0}
.section--dark::after{bottom:0}
.section--dark h2,.section--dark h3{color:#fff}
.section--dark .eyebrow{color:var(--brass-soft)}
.section--dark a:not(.btn){color:#fff;border-bottom:1px solid var(--brass-soft)}
.section--dark .card{background:rgba(255,253,249,.04);border-color:rgba(255,255,255,.1);color:#dbe3eb}
.section--dark blockquote{color:#fff}

/* 6) Veredelter Zahlen-Streifen (aus .trust-scores) */
.trust-scores{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:0;
  margin:1.6rem 0 1.4rem;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:1.4rem 0;
}
.trust-scores .tscore{
  text-align:center;
  padding:.2rem .6rem;
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:.2rem;align-items:center;
}
.trust-scores .tscore:last-of-type{border-right:none}
.trust-scores .tscore b{
  font-family:'Cormorant Garamond',serif;
  font-weight:500;
  font-size:clamp(2rem, 4vw, 2.9rem);
  color:var(--brass);
  letter-spacing:-.01em;
  line-height:1;
}
.trust-scores .tscore span{
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);font-weight:500;
}
.trust-scores .tscore-note{
  grid-column:1/-1;
  text-align:center;font-size:.82rem;color:var(--muted);
  margin-top:1rem;padding-top:.9rem;border-top:1px dashed var(--line);
}
@media(max-width:680px){
  .trust-scores{grid-template-columns:repeat(2,1fr);gap:.2rem 0}
  .trust-scores .tscore{padding:.9rem .4rem;border-right:none;border-bottom:1px solid var(--line)}
  .trust-scores .tscore:nth-last-of-type(-n+2){border-bottom:none}
  .trust-scores .tscore:nth-of-type(odd){border-right:1px solid var(--line)}
}

/* 7) Galerie: einheitliches 4:5-Format + dezenter Hover-Zoom */
.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:1rem;
}
.gallery button{
  border:none;padding:0;background:none;cursor:zoom-in;
  border-radius:14px;overflow:hidden;
  aspect-ratio:4/5;
  position:relative;box-shadow:0 4px 16px -8px rgba(19,40,63,.18);
}
.gallery button img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .65s cubic-bezier(.22,.7,.3,1), filter .35s;
}
.gallery button:hover img{transform:scale(1.04);filter:brightness(.96)}
.gallery button::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 60%, rgba(19,40,63,.12) 100%);
  pointer-events:none;opacity:0;transition:opacity .3s;
}
.gallery button:hover::after{opacity:1}

/* 8) Lightbox polieren (gallery.js erzeugt .lightbox bereits) */
.lightbox{
  position:fixed;inset:0;background:rgba(8,18,31,.94);
  display:none;align-items:center;justify-content:center;z-index:300;
  padding:2.5rem;
}
.lightbox.open{display:flex;animation:lbFade .25s ease-out}
@keyframes lbFade{from{opacity:0}to{opacity:1}}
.lightbox img{max-width:min(96vw, 1400px);max-height:88vh;object-fit:contain;border-radius:4px;box-shadow:0 30px 70px -20px rgba(0,0,0,.6)}
.lb-btn{
  position:absolute;z-index:2;background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.14);
  width:48px;height:48px;border-radius:50%;font-size:1.6rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,border-color .2s;
}
.lb-btn:hover{background:rgba(166,130,76,.4);border-color:var(--brass)}
.lb-close{top:1.4rem;right:1.4rem}
.lb-prev{left:1.6rem;top:50%;transform:translateY(-50%)}
.lb-next{right:1.6rem;top:50%;transform:translateY(-50%)}
/* Handy: größere Tap-Flächen, Pfeile unten mittig statt am Bildrand (sonst
   liegen sie auf/unter dem fast bildschirmbreiten Foto und sind schwer/nicht
   bedienbar). Zusätzlich Wischgesten in gallery.js. */
@media(max-width:640px){
  .lightbox{padding:1rem}
  .lb-btn{width:54px;height:54px;background:rgba(8,18,31,.55)}
  .lb-close{top:.8rem;right:.8rem}
  .lb-prev,.lb-next{top:auto;bottom:calc(1rem + env(safe-area-inset-bottom,0px));transform:none}
  .lb-prev{left:calc(50% - 64px)}
  .lb-next{right:calc(50% - 64px)}
}

/* 9) Monogramm */
.monogram{
  display:inline-block;width:44px;height:44px;color:var(--brass);
  vertical-align:middle;
}
.monogram svg{width:100%;height:100%;display:block}

/* Trenner-Element: Haarlinie – Monogramm – Haarlinie */
.divider-monogram{
  display:flex;align-items:center;justify-content:center;gap:1.2rem;
  margin:2.5rem auto 2.2rem;max-width:520px;color:var(--brass);
}
.divider-monogram::before,.divider-monogram::after{
  content:"";height:1px;flex:1;background:linear-gradient(90deg, transparent, var(--brass) 50%, transparent);
  opacity:.55;
}
.divider-monogram .monogram{width:38px;height:38px}

/* Footer-Mark (kleines Monogramm im Footer als „Briefkopf-Stempel") */
footer .foot-in{position:relative}
footer .foot-mark{
  position:absolute;right:1.4rem;top:1.2rem;width:42px;height:42px;color:var(--brass);opacity:.7;
}
@media(max-width:820px){footer .foot-mark{position:static;margin:0 0 .5rem;opacity:.85}}

/* =====================================================================
   Design-Refresh 2: Eyebrow größer, Hero strukturierter, „Gut zu wissen"
   schöner, Kalender-Pfeile außer Reichweite, Seitenwechsel-Übergang
   ===================================================================== */

/* 1) Eyebrows deutlich größer – mehr Präsenz */
.eyebrow{
  font-size:1.06rem;
  letter-spacing:.22em;
  font-weight:500;
}
.page-hero .eyebrow{font-size:1.16rem}
.section-head > div > .eyebrow{font-size:1.14rem}

/* 2) Page-Hero: dezente Textur + warmes Streiflicht + weicher Übergang */
.page-hero{
  background:
    /* warmes Brass-Streiflicht oben rechts */
    radial-gradient(60% 80% at 85% -10%, rgba(166,130,76,.22), transparent 60%),
    /* kühles Streiflicht unten links */
    radial-gradient(50% 70% at 0% 110%, rgba(71,138,201,.18), transparent 60%),
    /* feine diagonale Goldstreifen */
    repeating-linear-gradient(135deg, rgba(255,253,249,.045) 0 1px, transparent 1px 9px),
    /* sehr leise vertikale Linien */
    repeating-linear-gradient(180deg, rgba(255,255,255,.025) 0 1px, transparent 1px 5px),
    /* Basis-Verlauf */
    linear-gradient(180deg, var(--ink) 0%, #0c1f33 100%);
  position:relative;
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), inset 0 -1px 0 rgba(0,0,0,.25);
}
/* feine Innenecken: Brass-Vignette an Ober- und Unterkante */
.page-hero::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg, transparent, var(--brass) 50%, transparent);
  opacity:.45;pointer-events:none;
}
.page-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:90px;
  background:linear-gradient(180deg, transparent, rgba(8,18,31,.65));
  pointer-events:none;
}
.page-hero .wrap{position:relative;z-index:1}

/* Section-Übergänge: weiche Schatten unter Karten und Hervorhebung */
.card.pad{
  box-shadow:0 18px 40px -28px rgba(19,40,63,.35), 0 2px 6px -3px rgba(19,40,63,.08);
  transition:box-shadow .3s;
}
.card.pad:hover{box-shadow:0 24px 50px -28px rgba(19,40,63,.4), 0 4px 10px -3px rgba(19,40,63,.1)}

/* 3) „Gut zu wissen" und Regeln-Zeile aufhübschen */
.card.pad:has(> h2[data-i18n="info_title"]){
  border-left:3px solid var(--brass);
  background:
    linear-gradient(180deg, rgba(166,130,76,.04), transparent 40%),
    var(--paper);
  position:relative;
}
.card.pad:has(> h2[data-i18n="info_title"])::before{
  content:"i";
  position:absolute;top:1.1rem;right:1.2rem;
  width:32px;height:32px;border-radius:50%;
  border:1px solid var(--brass);color:var(--brass);
  display:grid;place-items:center;
  font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.3rem;font-weight:500;
}
/* Regeln-Zeile als feine Chips mit dezenten Mini-Symbolen */
.rules-line{
  display:flex;flex-wrap:wrap;gap:.55rem;
  align-items:center;justify-content:flex-start;
  margin:.9rem 0 .2rem;color:var(--ink-soft);text-align:left;
}
.rules-line > span{
  display:inline-flex;align-items:center;gap:.45rem;
  background:rgba(166,130,76,.06);
  border:1px solid rgba(166,130,76,.22);
  padding:.4rem .75rem .4rem .65rem;border-radius:999px;
  font-size:.93rem;color:var(--ink);font-weight:500;
}
/* Trenner-Punkte zwischen Chips entfernen (das ' · ' Textknoten) */
.rules-line{font-size:0}
.rules-line > span{font-size:.93rem}
.rules-line > span::before{
  content:"";display:inline-block;width:16px;height:16px;flex:none;
  background-repeat:no-repeat;background-position:center;background-size:contain;opacity:.85;
}
.rules-line > span[data-i18n="rule_pets"]::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a6824c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='6.5' cy='10' r='1.6'/><circle cx='10.5' cy='6.5' r='1.6'/><circle cx='14' cy='6.5' r='1.6'/><circle cx='18' cy='10' r='1.6'/><path d='M12 12c-2.4 0-4.5 2-4.5 4S9.5 19 12 19s4.5-1 4.5-3S14.4 12 12 12Z'/></svg>");
}
.rules-line > span[data-i18n="rule_party"]::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a6824c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5 21l4-11 8 8-11 4-1-1Z'/><path d='M14 4l1.5 1.5M18 7l1.5 1.5M11 7l1 1M20 12l1 1'/></svg>");
}
.rules-line > span[data-i18n="rule_smoking"]::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a6824c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='13' width='14' height='3' rx='1'/><path d='M19 16v-3M17 8c0-2 2-2 2-4M21 8c0-2 1-2 1-3.5'/></svg>");
}

/* 4) Kalender-Pfeile: Platz schaffen, damit keine Tage verdeckt werden */
.av-scroll-wrap{padding:0 46px;margin-top:.2rem}
.av-arrow.prev{left:0}
.av-arrow.next{right:0}
.av-arrow{box-shadow:0 6px 18px -8px rgba(19,40,63,.35), 0 1px 3px rgba(19,40,63,.08)}
@media(max-width:560px){.av-scroll-wrap{padding:0}}

/* 5) Sanfter Seitenwechsel-Übergang (View Transitions API)
   - In modernen Browsern automatischer Cross-Document-Übergang.
   - Browser ohne Unterstützung ignorieren diese Regeln einfach. */
@view-transition{ navigation: auto; }
@keyframes vt-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes vt-fade-out{ from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-6px); } }
::view-transition-old(root){ animation: vt-fade-out .25s ease-in both; }
::view-transition-new(root){ animation: vt-fade-in .35s ease-out both; }
/* Header bleibt stehen, Main morpht */
header.bar{ view-transition-name: site-bar; }
::view-transition-old(site-bar),
::view-transition-new(site-bar){
  animation: none;
  mix-blend-mode: normal;
}
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),::view-transition-new(root){ animation: none; }
}

/* 6a) Design-Finessen: Hover-Lift mit tieferem Schatten für Karten und Tabs
   (nur echte Hover-Geräte), Gold-Glow auf Primär-Buttons, Header wirft beim
   Scrollen einen Schatten (Klasse is-scrolled aus main.js). */
@media (hover:hover) and (prefers-reduced-motion: no-preference){
  .card{transition:transform .25s ease,box-shadow .25s ease}
  .card:hover{transform:translateY(-3px);box-shadow:0 24px 48px -26px rgba(19,40,63,.38),0 4px 12px -6px rgba(19,40,63,.12)}
  .btn-primary:hover,.btn-gold:hover{box-shadow:0 12px 26px -10px rgba(166,130,76,.55)}
  .gallery button{transition:transform .25s ease,box-shadow .25s ease}
  .gallery button:hover{transform:translateY(-2px);box-shadow:0 18px 38px -22px rgba(19,40,63,.4)}
}
header.bar{transition:box-shadow .3s ease}
header.bar.is-scrolled{box-shadow:0 12px 32px -20px rgba(19,40,63,.4)}

/* 6) Sanfte Einblendungen beim Scrollen (Sektionen) und Richtungs-Slide beim
   Wohnungswechsel auf der Preisseite. Nur mit JS (main.js setzt sec-prep/sec-in)
   und nur ohne reduzierte Bewegung – sonst bleibt alles sofort sichtbar. */
@media (prefers-reduced-motion: no-preference){
  .sec-prep{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
  .sec-prep.sec-in{opacity:1;transform:none}
  .availability.pane-in-left{animation:pane-in-left .32s ease}
  .availability.pane-in-right{animation:pane-in-right .32s ease}
  @keyframes pane-in-left{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
  @keyframes pane-in-right{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
}

/* =====================================================================
   Design-Refresh 3: Dunkel-Flächen mit Textur (Footer, form-card,
   section--dark), Footer kompakter, alte Monogramm-Regeln neutralisiert
   ===================================================================== */

/* Monogramm-Reste aus früheren Runden inaktivieren (Doppelschutz, falls
   noch irgendwo Markup lauert) */
.monogram,.foot-mark,.divider-monogram{display:none !important}

/* Wiederverwendbare Dark-Textured-Schicht für dunkelblaue Bereiche */
footer,
.form-card,
.av-calc,
.page-hero,
.section--dark{
  position:relative;
  background:
    /* warmes Brass-Streiflicht oben rechts (sehr dezent) */
    radial-gradient(50% 70% at 90% -5%, rgba(166,130,76,.16), transparent 60%),
    /* kühles Streiflicht unten links */
    radial-gradient(50% 70% at 0% 110%, rgba(71,138,201,.14), transparent 60%),
    /* feine diagonale Goldstreifen */
    repeating-linear-gradient(135deg, rgba(255,253,249,.035) 0 1px, transparent 1px 9px),
    /* sehr leise vertikale Linien */
    repeating-linear-gradient(180deg, rgba(255,255,255,.02) 0 1px, transparent 1px 5px),
    /* Basis-Verlauf */
    linear-gradient(180deg, var(--ink) 0%, #0c1f33 100%);
}

/* Brass-Haarlinien oben/unten als Akzent (statt der Monogramm-Trenner) */
footer::before,
.form-card::before,
.av-calc::before,
.page-hero::before,
.section--dark::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg, transparent, var(--brass), transparent);
  opacity:.55;pointer-events:none;z-index:1;
}

/* Footer kompakter machen */
footer{margin-top:2.2rem}
footer .foot-in{padding:1.4rem 1.4rem .9rem;gap:1.2rem}
footer .foot-in address{margin-top:.4rem;line-height:1.55;font-size:.91rem}
footer .foot-links{gap:.28rem;font-size:.9rem}
footer .copy{padding:.55rem 1.4rem 1rem;font-size:.78rem}
@media(max-width:760px){
  footer{margin-top:1.6rem}
  footer .foot-in{padding:1.1rem 1rem .8rem;gap:.85rem}
  footer .copy{padding:.45rem 1rem .9rem}
}

/* form-card: Textur etwas geschmackvoller, Eckradius bleibt */
.form-card{
  overflow:hidden;  /* damit die Texturen nicht aus dem Rundungs-Rahmen lecken */
  border:1px solid rgba(255,255,255,.06);
}
.form-card::before{border-radius:20px 20px 0 0}

/* section--dark: bisherige Brass-Linie unten zurückholen */
.section--dark::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg, transparent, var(--brass), transparent);
  opacity:.55;pointer-events:none;z-index:1;
}

/* Stellt sicher, dass Inhalt über den Pseudo-Layern liegt */
footer .foot-in, footer .copy,
.form-card > *, .av-calc > *, .section--dark > *{position:relative;z-index:2}
.page-hero{overflow:hidden}
.page-hero .wrap{position:relative;z-index:2}

/* Preisrechner (.av-calc): gleiche texturierte Optik wie die Garage-Panels */
.av-calc{overflow:hidden;border:1px solid rgba(255,255,255,.06)}
.av-calc::before{border-radius:14px 14px 0 0}

/* Home- und Garage-Hero bekommen die diagonale Struktur als Akzent dazu */
.hero{
  background:
    radial-gradient(60% 80% at 85% -10%, rgba(166,130,76,.22), transparent 60%),
    radial-gradient(50% 70% at 0% 110%, rgba(71,138,201,.18), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,253,249,.04) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(180deg, rgba(255,255,255,.02) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, var(--ink) 0%, #0c1f33 100%);
}

/* =====================================================================
   Lage und Anreise — Layout für neue Sektionen
   ===================================================================== */

/* Adress-Block mit Übersichts-Karte */
.address-block{display:grid;grid-template-columns:1fr 1.4fr;gap:1.4rem;align-items:start;max-width:1180px;margin:0 auto;padding:0 1.4rem}
@media(max-width:880px){.address-block{grid-template-columns:1fr}}
.address-display{font-style:normal;font-size:1.05rem;line-height:1.7;color:var(--ink)}
.address-display strong{font-family:'Cormorant Garamond',serif;font-size:1.6rem;font-weight:500;color:var(--brass);display:block;margin-bottom:.35rem}
.poi-list{list-style:none;padding:0;margin:1.2rem 0 0;border-top:1px solid var(--line)}
.poi-list li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--line);font-size:.95rem}
.poi-list b{font-weight:500;color:var(--ink)}
.poi-list span{color:var(--muted);font-size:.88rem;white-space:nowrap}

/* Map/Video-Platzhalter — elegant gestylt */
.map-card,.travel-media{display:flex;flex-direction:column;gap:.7rem}
.map-placeholder,.video-placeholder{
  background:
    radial-gradient(60% 80% at 30% 30%, rgba(166,130,76,.06), transparent 60%),
    linear-gradient(180deg, var(--paper), #efe9de);
  border:1.5px dashed rgba(166,130,76,.55);
  border-radius:14px;
  aspect-ratio:16/10;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:1.5rem;color:var(--ink-soft);
}
.map-placeholder.small,.travel-media .map-placeholder,.travel-media .video-placeholder{aspect-ratio:4/3}
.map-placeholder p,.video-placeholder p{margin:.4rem 0 0;font-weight:500;font-size:1rem}
.map-placeholder .map-hint{font-size:.86rem;color:var(--muted);font-weight:400;max-width:32ch;line-height:1.5}
.map-icon,.video-icon{width:42px;height:42px;color:var(--brass);opacity:.7}
.map-caption{font-size:.78rem;color:var(--muted);text-align:right;letter-spacing:.04em}

/* Check-In / Check-Out Grid */
.checkinout-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;max-width:1180px;margin:0 auto;padding:0 1.4rem}
@media(max-width:760px){.checkinout-grid{grid-template-columns:1fr}}
.checkin-card,.checkout-card{position:relative}
.checkin-card{border-left:3px solid var(--brass)}
.checkout-card{border-left:3px solid #b3c1d1}
.time-row{display:flex;align-items:baseline;gap:.8rem;margin-bottom:.4rem;flex-wrap:wrap}
.time-row h3{margin:0;font-size:1.6rem;font-family:'Cormorant Garamond',serif;font-weight:500;color:var(--ink)}
.time-chip{
  background:var(--brass);color:#fff;font-weight:600;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.32rem .7rem;border-radius:999px;white-space:nowrap;
}
.checkout-card .time-chip{background:#5a738c}
.steps-list{list-style:none;counter-reset:step;padding:0;margin:1rem 0 0;display:flex;flex-direction:column;gap:.5rem}
.steps-list li{counter-increment:step;padding-left:2.4rem;position:relative;line-height:1.55;color:var(--ink-soft);font-size:.97rem}
.steps-list li::before{
  content:counter(step);
  position:absolute;left:0;top:-.05rem;
  width:1.7rem;height:1.7rem;border-radius:50%;
  background:rgba(166,130,76,.1);color:var(--brass);
  display:grid;place-items:center;font-family:'Cormorant Garamond',serif;font-size:1rem;font-weight:600;
  border:1px solid rgba(166,130,76,.35);
}

/* Drei Detail-Karten: Schlüsselkasten / Garagendrücker / Codekasten */
.key-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;max-width:1180px;margin:1.6rem auto 0;padding:0 1.4rem}
@media(max-width:880px){.key-grid{grid-template-columns:1fr;gap:.9rem}}
.detail-key{text-align:center}
.detail-key h4{font-size:1.25rem;font-family:'Cormorant Garamond',serif;font-weight:500;margin:.7rem 0 .35rem;color:var(--ink)}
.detail-key p{font-size:.95rem;line-height:1.55;color:var(--ink-soft)}
.icon-brass{width:56px;height:56px;margin:.3rem auto 0;border:1px solid var(--brass);border-radius:50%;display:grid;place-items:center;color:var(--brass);background:rgba(166,130,76,.05)}
.icon-brass svg{width:30px;height:30px}

/* Anreise: Bahn/Auto Grid */
.travel-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:1.4rem;max-width:1180px;margin:0 auto;padding:0 1.4rem;align-items:start}
@media(max-width:880px){.travel-grid{grid-template-columns:1fr}}
.travel-media{padding:0 1.4rem;max-width:1180px;margin:1.2rem auto 0;display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
@media(max-width:760px){.travel-media{grid-template-columns:1fr}}

/* Auto: vier Himmelsrichtungs-Karten */
.directions-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;max-width:1180px;margin:1.2rem auto;padding:0 1.4rem}
@media(max-width:980px){.directions-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.directions-grid{grid-template-columns:1fr}}
.direction-card{position:relative}
.dir-arrow{font-family:'Cormorant Garamond',serif;font-size:2.4rem;line-height:1;color:var(--brass);text-align:center;font-weight:500;margin-bottom:.2rem}
.direction-card h4{font-size:1.05rem;margin:.4rem 0 .5rem;color:var(--ink);font-weight:500;text-align:center}
.direction-card p{font-size:.92rem;color:var(--ink-soft);line-height:1.55;text-align:center;margin:0}

/* Hervorgehobene Garage-Info am Ende der Auto-Sektion */
.garage-info-card{border-left:3px solid var(--brass);max-width:1180px;margin:1.6rem auto 0}

/* Parkhaus-Liste */
.parking-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;max-width:1180px;margin:1.2rem auto 0;padding:0 1.4rem}
.parking-item h4{font-family:'Cormorant Garamond',serif;font-size:1.35rem;font-weight:500;margin:0 0 .35rem;color:var(--ink)}
.walk-meta{margin:.1rem 0 .7rem;font-size:.87rem;color:var(--muted);letter-spacing:.03em}
.walk-meta b{color:var(--brass);font-weight:600;font-size:.95rem}
.parking-item p{font-size:.93rem;line-height:1.55;color:var(--ink-soft);margin:0}

/* Generelle Anpassung: Sektionsabstände auf der Lage-Seite konsistent */
.address-block, .checkinout-grid, .key-grid, .travel-grid, .travel-media, .directions-grid, .parking-list{margin-top:1.4rem}


/* =====================================================================
   Leaflet-Karten (Übersicht + Mini-Karten auf der Lage-Seite)
   ===================================================================== */
.leaflet-map{
  aspect-ratio:16/10;
  border-radius:14px;
  overflow:hidden;
  border:none;
  background:#f3ede2;
  padding:0;
  box-shadow:0 6px 18px -8px rgba(19,40,63,.3);
}
.travel-media .leaflet-map{aspect-ratio:4/3}
.leaflet-container{font-family:'Jost',sans-serif !important;background:#f3ede2}
/* Mobil: Übersichtskarte sauber einbetten und ins Hochformat bringen,
   damit sie auf dem Handy nicht zu breit/flach wirkt */
@media(max-width:880px){
  .tourist-map .map-placeholder,
  .tourist-map .leaflet-map{aspect-ratio:3/4;width:100%;max-width:100%}
}

/* Brass-Marker: SVG-Pins mit weichem Schatten */
.brass-marker{background:none !important;border:none !important}
.brass-marker svg{display:block;filter:drop-shadow(0 2px 4px rgba(19,40,63,.4))}
.brass-marker.primary svg{filter:drop-shadow(0 4px 8px rgba(166,130,76,.6))}

/* Popups im Markenstil */
.leaflet-popup-content-wrapper{
  border-radius:10px !important;
  border-top:2px solid var(--brass);
  box-shadow:0 8px 24px -8px rgba(19,40,63,.3) !important;
}
.leaflet-popup-content{margin:.7rem .9rem !important;font-size:.92rem;line-height:1.5;color:var(--ink)}
.leaflet-popup-content b{
  color:var(--brass);
  font-family:'Cormorant Garamond',serif;
  font-size:1.2rem;font-weight:500;
  display:block;margin-bottom:.15rem;letter-spacing:.005em;
}
.leaflet-popup-tip{background:#fff !important;box-shadow:none}

/* Attribution dezent */
.leaflet-control-attribution{
  background:rgba(255,253,249,.84) !important;
  font-size:10px !important;
  padding:2px 6px !important;
  color:#5a6877 !important;
  border-radius:6px 0 0 0;
}
.leaflet-control-attribution a{color:var(--brass) !important;text-decoration:none}
.leaflet-control-attribution a:hover{text-decoration:underline}

/* Zoom-Buttons im Markenstil */
.leaflet-control-zoom a{
  background:#fff !important;color:var(--ink) !important;
  border:1px solid var(--line) !important;
  font-family:'Cormorant Garamond',serif !important;font-size:1.2rem !important;
}
.leaflet-control-zoom a:hover{border-color:var(--brass) !important;color:var(--brass) !important}

/* =====================================================================
   Preisrechner-Box strukturiert: „ab“-Preis-Highlight, Eckdaten-Liste,
   Zahlungswahl direkt in der dunklen Box, sowie Anfrage-Sonderzustände.
   ===================================================================== */
/* „ab“-Preis als hervorgehobener Block (Leerzustand des Rechners) */
.av-from-box{display:flex;flex-wrap:wrap;align-items:baseline;gap:.45rem;
  background:rgba(255,255,255,.05);border:1px solid rgba(201,175,128,.3);
  border-radius:12px;padding:.85rem 1rem;margin:.2rem 0 .9rem}
.av-from-box .av-from-k{font-size:.84rem;letter-spacing:.06em;text-transform:uppercase;color:#b3c1d1}
.av-from-box .av-from-v{font-family:'Cormorant Garamond',serif;font-size:2rem;color:#fff;line-height:1}
.av-from-box .av-from-u{font-size:.95rem;color:#cdd8e2}
.av-from-box .av-from-sub{flex-basis:100%;font-size:.86rem;color:#9fb0c1;margin-top:.1rem}
/* Eckdaten als saubere Zeilen statt loser Fließtext */
.av-calc-facts{margin:.2rem 0 .9rem;border-top:1px solid rgba(255,255,255,.1)}
.av-calc-facts .av-fact{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.5rem 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:1rem}
.av-calc-facts .av-fact span{color:#b3c1d1}
.av-calc-facts .av-fact b{color:#fff;font-weight:500}

/* Zahlungswahl in der dunklen Box (Anfrageseite) */
.av-pay{margin:.3rem 0 1rem;padding-top:.9rem;border-top:1px solid rgba(255,255,255,.12)}
.av-pay-label{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:#b3c1d1;margin-bottom:.55rem}
.av-pay-opt{display:flex;align-items:flex-start;gap:.6rem;cursor:pointer;
  border:1.5px solid rgba(255,255,255,.18);border-radius:11px;padding:.7rem .8rem;margin-bottom:.55rem;
  background:rgba(255,255,255,.04);transition:border-color .15s,background .15s}
.av-pay-opt:last-child{margin-bottom:0}
.av-pay-opt:hover{border-color:rgba(201,175,128,.6)}
.av-pay-opt input{margin-top:.2rem;accent-color:var(--brass-soft);width:18px;height:18px;flex:none}
.av-pay-opt.is-on{border-color:var(--brass-soft);background:rgba(201,175,128,.14)}
.av-pay-text{display:flex;flex-direction:column;gap:.15rem}
.av-pay-text b{color:#fff;font-weight:600;font-size:1rem;line-height:1.3}
.av-pay-text small{color:#9fb0c1;font-size:.88rem;line-height:1.4}


/* hidden auf flex-Container (z. B. Auswahl-Button) zuverlässig ausblenden */
.hero-actions[hidden]{display:none}

/* Garage: belegt im Zeitraum → nur Hinweis (kein Häkchen) */
.garage-card.is-taken{border-left-color:var(--danger)}
.garage-taken h3{margin:.3rem 0 .35rem;font-size:1.45rem;color:var(--ink)}
.garage-taken p{color:var(--ink-soft);font-size:1.02rem;line-height:1.55;margin:0}
.garage-taken h3::before{content:"✗ ";color:var(--danger);font-weight:700}

/* Buchungs-Zusammenfassung oben im Anfrageformular (dunkle form-card) */
.form-card .booking-recap{background:rgba(255,255,255,.05);border:1px solid rgba(201,175,128,.35);
  border-radius:12px;padding:1rem 1.2rem;margin:.4rem 0 1.4rem}
.form-card .booking-recap .recap-head{margin-bottom:.5rem}
.form-card .booking-recap .recap-head>span{font-family:'Cormorant Garamond',serif;font-size:1.35rem;color:#fff}
.form-card .booking-recap .recap-rows>div{display:flex;justify-content:space-between;align-items:baseline;
  gap:1rem;padding:.42rem 0;font-size:1.04rem;border-bottom:1px solid rgba(255,255,255,.08)}
.form-card .booking-recap .recap-rows>div:last-child{border-bottom:none}
.form-card .booking-recap .recap-rows .k{color:#b3c1d1}
.form-card .booking-recap .recap-rows .v{color:#fff;font-weight:500}
.form-card .booking-recap .empty-hint{margin:0;color:#9fb0c1;font-size:1rem}

/* =====================================================================
   Anfrage-Preisrechner: kompakter 2×2-Kalender, zweispaltiger Rechner,
   Garage direkt in der blauen Box integriert.
   ===================================================================== */
/* Anfrage-Layout: Kalender und (breiterer) Rechner nebeneinander, ~50/50 */
@media(min-width:921px){
  .av-inquiry .av-book{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.6rem}
}
@media(max-width:920px){
  .av-inquiry .av-book{grid-template-columns:1fr}
}
/* 2×2-Monatsraster pro Blätter-Seite (statt 3×2) */
.av-inquiry .av-scroll.paged .av-page{grid-template-columns:repeat(2,1fr)}

/* Wohnung oben im (zweispaltigen) Rechner */
.av-calc-apt{font-family:'Cormorant Garamond',serif;font-size:1.25rem;color:var(--brass-soft);margin:.05rem 0 .7rem;line-height:1.2}

/* Zweispaltiger Rechner: links Personen + Rechnung, rechts Garage/Zahlung + CTA */
.av-calc-cols{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.3rem;align-items:start}
.av-calc-cols .av-calc-bill{min-width:0}
.av-calc-cols .av-calc-bill > .av-calc-field{margin-top:0}
.av-calc-cols .av-calc-side{min-width:0;display:flex;flex-direction:column}
/* Erstes Element der rechten Spalte ohne Trennlinie/Abstand oben (bündig mit links) */
.av-calc-cols .av-calc-side > :first-child{margin-top:0;padding-top:0;border-top:none}
.av-calc-cols .av-calc-side .av-pay,
.av-calc-cols .av-calc-side .av-garage{margin-bottom:.9rem}
.av-calc-cols .av-cta-btn{margin-top:auto}
@media(max-width:560px){.av-calc-cols{grid-template-columns:1fr}}

/* Garage-Auswahl in der dunklen Box (gleiche Optik wie Zahlungswahl) */
.av-garage{margin:.3rem 0 1rem;padding-top:.9rem;border-top:1px solid rgba(255,255,255,.12)}
.av-garage-label{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:#b3c1d1;margin-bottom:.55rem}
.av-garage-opt{display:flex;align-items:flex-start;gap:.6rem;cursor:pointer;
  border:1.5px solid rgba(255,255,255,.18);border-radius:11px;padding:.7rem .8rem;
  background:rgba(255,255,255,.04);transition:border-color .15s,background .15s}
.av-garage-opt:hover{border-color:rgba(201,175,128,.6)}
.av-garage-opt input{margin-top:.2rem;accent-color:var(--brass-soft);width:18px;height:18px;flex:none}
.av-garage-opt.is-on{border-color:var(--brass-soft);background:rgba(201,175,128,.14)}
.av-garage-text{display:flex;flex-direction:column;gap:.15rem}
.av-garage-text b{color:#fff;font-weight:600;font-size:1rem;line-height:1.3}
.av-garage-text small{color:#9fb0c1;font-size:.88rem;line-height:1.4}
.av-garage-taken{margin:0;color:#f3b3a8;font-size:.96rem;line-height:1.5;
  border:1px solid rgba(224,116,106,.4);background:rgba(224,116,106,.1);border-radius:10px;padding:.65rem .8rem}
.av-garage-taken::before{content:"✗ ";font-weight:700}

/* Anrede-Auswahl im Anfrageformular: eigener Chevron, lesbare Optionen */
.form-card .field select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:2.2rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9af80' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8rem center;background-size:1.1rem}
.form-card .field select option{color:#13283f;background:#fff}