@import url('fonts.css');

/* ---------- Design-Tokens ---------- */
:root{
  --ink:#0e1c2b;
  --ink-2:#16293c;
  --ink-3:#25405a;
  --blue:#008afc;
  --blue-deep:#0069c9;
  --blue-soft:#e8f3ff;
  --sand:#eaf1f8;
  --sand-2:#d8e6f4;
  --paper:#ffffff;
  --text:#1b2733;
  --muted:#5f6c7a;
  --line:#e4e2dd;
  --radius:4px;
  --radius-lg:10px;
  --shadow:0 18px 50px -20px rgba(14,28,43,.35);
  --shadow-sm:0 6px 24px -12px rgba(14,28,43,.4);
  --maxw:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
/* overflow-x:clip statt hidden, und auf html statt auf body. hidden auf body
   macht den body zum eigenen Rollbereich - das bricht position:sticky und
   kann Anker-Spruenge verschlucken. clip klemmt nur ab, ohne einen
   Rollbereich zu erzeugen. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
/* Der Kopfbereich ist fest angeheftet. Ohne diesen Abstand rutscht ein per
   Anker angesprungener Abschnitt darunter und die Ueberschrift ist verdeckt. */
section[id]{scroll-margin-top:96px}
@media(max-width:640px){section[id]{scroll-margin-top:76px}}
body{
  margin:0;background:var(--paper);color:var(--text);
  font-family:var(--sans);font-size:17px;line-height:1.7;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.15;margin:0;letter-spacing:-.01em}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 28px}
.narrow{max-width:760px}

/* ---------- Typo-Skala ---------- */
.eyebrow{
  font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--blue);margin:0 0 18px;display:block;
}
.eyebrow.on-dark{color:#9fd3ff;text-shadow:0 1px 12px rgba(0,0,0,.5)}
h1{font-size:clamp(2.6rem,6.4vw,5rem)}
h2{font-size:clamp(2rem,4.2vw,3.2rem)}
h3{font-size:clamp(1.25rem,2vw,1.55rem)}
.lead{font-size:clamp(1.05rem,1.5vw,1.2rem);color:var(--muted);line-height:1.75}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  padding:17px 34px;border-radius:var(--radius);text-decoration:none;border:1px solid transparent;
  cursor:pointer;transition:all .35s var(--ease);white-space:nowrap;
}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 10px 30px -12px rgba(0,138,252,.8)}
.btn-primary:hover{background:var(--blue-deep);transform:translateY(-2px);box-shadow:0 16px 36px -12px rgba(0,138,252,.9)}
.btn-ghost{border-color:rgba(255,255,255,.55);color:#fff;backdrop-filter:blur(6px);background:rgba(255,255,255,.06)}
.btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn-outline{border-color:var(--ink);color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:#fff}
.btn-sm{padding:12px 24px;font-size:12px}

.link-arrow{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);
}
.link-arrow svg{transition:transform .35s var(--ease)}
.link-arrow:hover svg{transform:translateX(6px)}

/* ---------- Header ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  padding:22px 0;transition:background .45s var(--ease),padding .45s var(--ease),box-shadow .45s var(--ease);
}
.site-header::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(14,28,43,.65),rgba(14,28,43,0));
  transition:opacity .45s var(--ease);
}
.site-header.solid{background:var(--ink);padding:12px 0;box-shadow:0 8px 30px -18px rgba(0,0,0,.8)}
.site-header.solid::before{opacity:0}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:28px;position:relative}
.logo img{height:52px;width:auto;transition:height .45s var(--ease)}
.site-header.solid .logo img{height:40px}

.nav{display:flex;align-items:center;gap:32px}
.nav a{
  text-decoration:none;color:#fff;font-size:12.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;position:relative;padding:6px 0;opacity:.88;
  transition:opacity .3s var(--ease);
}
.nav a::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--blue);
  transition:width .35s var(--ease);
}
.nav a:hover{opacity:1}
.nav a:hover::after,.nav a.active::after{width:100%}
.header-actions{display:flex;align-items:center;gap:14px}
.lang{display:flex;gap:6px;align-items:center;font-size:12px;letter-spacing:.12em;color:rgba(255,255,255,.75)}
.lang a{text-decoration:none;padding:4px 6px;transition:color .3s}
.lang a.on{color:#fff;border-bottom:1px solid var(--blue)}
.lang a:hover{color:#fff}
.lang span{opacity:.4}

.burger{display:none;background:none;border:0;cursor:pointer;padding:10px;width:44px;height:44px}
.burger span{display:block;height:1.5px;background:#fff;margin:5px 0;transition:transform .35s var(--ease),opacity .25s}
.burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{position:relative;height:100svh;min-height:620px;overflow:hidden;background:var(--ink)}
.hero-slides{position:absolute;inset:0}
.hero-slide{
  position:absolute;inset:0;opacity:0;transition:opacity 1.6s var(--ease);
}
.hero-slide.on{opacity:1}
.hero-slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);animation:kenburns 16s linear infinite alternate}
@keyframes kenburns{from{transform:scale(1.04)}to{transform:scale(1.16)}}
.hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to right,rgba(9,20,32,.86) 0%,rgba(9,20,32,.55) 42%,rgba(9,20,32,.12) 78%),
    linear-gradient(to bottom,rgba(9,20,32,.6) 0%,rgba(9,20,32,.1) 40%,rgba(9,20,32,.72) 100%);
}
.hero-content{
  position:relative;z-index:3;height:100%;display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:clamp(90px,14vh,150px);
}
.hero h1{color:#fff;max-width:15ch;text-shadow:0 2px 40px rgba(0,0,0,.4)}
.hero h1 em{font-style:italic;color:#8ecbff}
.hero-sub{color:rgba(255,255,255,.9);font-size:clamp(1.02rem,1.5vw,1.2rem);max-width:52ch;margin:26px 0 0;font-weight:300}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.hero-badges{
  display:flex;flex-wrap:wrap;gap:14px 34px;margin-top:44px;
  color:rgba(255,255,255,.82);font-size:13.5px;letter-spacing:.04em;
}
.hero-badges span{display:inline-flex;align-items:center;gap:9px}
.hero-badges svg{flex:none;opacity:.85}
.stars{color:#ffc107;letter-spacing:2px}

.scroll-hint{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:4;
  width:1px;height:52px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.7));
}
.scroll-hint::after{
  content:'';position:absolute;left:-2px;top:0;width:5px;height:5px;border-radius:50%;background:#fff;
  animation:drop 2.4s var(--ease) infinite;
}
@keyframes drop{0%{top:0;opacity:0}20%{opacity:1}80%{opacity:1}100%{top:48px;opacity:0}}

/* ---------- Buchungsleiste ---------- */
.bookbar-wrap{position:relative;z-index:20;margin-top:-46px}
.bookbar{
  background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow);
  display:grid;grid-template-columns:repeat(3,1fr) auto;gap:0;overflow:hidden;
  border:1px solid var(--line);
}
.bookbar .field{padding:20px 26px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:5px}
.bookbar .field:nth-child(3){border-right:0}
.bookbar label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:500}
.bookbar input,.bookbar select{
  border:0;padding:0;font-family:var(--sans);font-size:16px;color:var(--text);background:none;
  outline:none;width:100%;
}
.bookbar .submit{display:flex}
.bookbar .submit .btn{border-radius:0;height:100%;padding-inline:40px}

/* ---------- Sektionen ---------- */
section{position:relative}
.sec{padding:clamp(80px,11vw,140px) 0}
.sec-tight{padding:clamp(56px,7vw,88px) 0}
.sec-sand{background:var(--sand)}
.sec-ink{background:var(--ink);color:rgba(255,255,255,.82)}
.sec-ink h2,.sec-ink h3{color:#fff}

.sec-head{max-width:640px;margin-bottom:clamp(40px,5vw,64px)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head p{margin-top:20px}

/* Intro-Split */
.split{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(40px,6vw,86px);align-items:center}
.split .media{position:relative}
.split .media img{border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.split .media .float{
  position:absolute;right:-28px;bottom:-38px;width:52%;border-radius:var(--radius-lg);
  box-shadow:var(--shadow);border:6px solid #fff;
}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:42px;padding-top:34px;border-top:1px solid var(--line)}
.facts .n{font-family:var(--serif);font-size:2.1rem;color:var(--ink);line-height:1}
.facts .l{font-size:13px;color:var(--muted);margin-top:6px;letter-spacing:.03em}

/* ---------- Zimmer ---------- */
.rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,32px)}
.room{
  background:#fff;border-radius:var(--radius-lg);overflow:hidden;text-decoration:none;color:inherit;
  border:1px solid var(--line);display:flex;flex-direction:column;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.room:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.room .pic{position:relative;aspect-ratio:4/3;overflow:hidden}
.room .pic img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.room:hover .pic img{transform:scale(1.07)}
.room .tag{
  position:absolute;left:16px;top:16px;background:rgba(14,28,43,.82);color:#fff;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:8px 14px;border-radius:2px;
  backdrop-filter:blur(6px);
}
.room .body{padding:28px 28px 30px;display:flex;flex-direction:column;flex:1}
.room h3{margin-bottom:10px}
.room .desc{font-size:15px;color:var(--muted);margin-bottom:22px}
.room .foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding-top:20px;border-top:1px solid var(--line)}
.room .price small{display:block;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.room .price b{font-family:var(--serif);font-size:1.9rem;font-weight:400;color:var(--ink)}
.room .price b span{font-size:1rem;color:var(--muted)}

/* ---------- Services ---------- */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.service{background:#fff;padding:38px 32px;transition:background .4s var(--ease)}
.service:hover{background:var(--blue-soft)}
.service .ic{width:34px;height:34px;color:var(--blue);margin-bottom:20px}
.service h3{font-family:var(--sans);font-size:16px;font-weight:600;letter-spacing:.01em;margin-bottom:9px}
.service p{font-size:14.5px;color:var(--muted);line-height:1.65}
.service a{color:var(--blue);text-decoration:none;border-bottom:1px solid rgba(0,138,252,.35)}
.service a:hover{border-color:var(--blue)}

/* ---------- Check-in dunkel ----------
   Dieser Abschnitt wird per QR-Code an der Rezeption angesprungen. Der Gast
   steht dann mit dem Handy vor dem Safe, oft nachts, oft ratlos. Deshalb:
   grosse Schrift, kurze Saetze, und der Ausweichweg ganz oben statt versteckt
   in einem Schritt. */
.checkin-top{max-width:660px}
.checkin-lead{margin-top:20px;color:rgba(255,255,255,.72);font-size:1.05rem;line-height:1.7}

/* Ausweichweg fuer Gaeste ohne Code. Bewusst die einzige warme Farbe im
   dunklen Abschnitt - sie soll ins Auge springen, bevor irgendetwas anderes
   gelesen wird. */
.notfall{
  margin:40px 0 8px;padding:clamp(24px,3.5vw,34px);
  background:rgba(255,190,60,.10);
  border:1px solid rgba(255,190,60,.38);
  border-left:5px solid #ffbe3c;
  border-radius:var(--radius-lg);
  display:grid;grid-template-columns:1.35fr auto;gap:clamp(24px,3vw,44px);align-items:center;
}
.notfall h3{
  font-family:var(--serif);color:#ffd071;
  font-size:clamp(1.5rem,3vw,1.95rem);line-height:1.2;margin-bottom:12px;
}
.notfall p{color:rgba(255,255,255,.86);font-size:1rem;line-height:1.65;margin:0}
.notfall p b{color:#fff}
.notfall-tat{display:flex;flex-direction:column;align-items:stretch;gap:12px}

.btn-notfall{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  background:#ffbe3c;color:#26200c;
  padding:20px 32px;border-radius:var(--radius);
  font-size:16px;font-weight:700;letter-spacing:.02em;text-transform:none;
  white-space:nowrap;border:0;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);
  box-shadow:0 10px 30px -12px rgba(255,190,60,.6);
}
.btn-notfall:hover{background:#ffcb63;transform:translateY(-2px);box-shadow:0 16px 40px -14px rgba(255,190,60,.75)}

.checkin-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(40px,6vw,80px);align-items:center;margin-top:52px}
.steps{counter-reset:s;display:grid;gap:22px}
.step{display:flex;gap:20px;align-items:flex-start}
.step .num{
  flex:none;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.28);
  display:grid;place-items:center;color:#8ecbff;
  /* Groteske statt Serifenschrift: die Playfair-Ziffern wirken im Kreis
     duenn und schief. Wie auf checkin.html. */
  font-family:var(--sans);font-size:16px;font-weight:600;line-height:1;
}
.step h3{font-family:var(--sans);font-size:15.5px;font-weight:600;margin-bottom:5px}
.step p{font-size:14.5px;color:rgba(255,255,255,.66);margin:0}

/* Die drei Handgriffe am Safe: deutlich groesser als die uebrigen
   Schritt-Listen der Seite, weil sie am Geraet gelesen werden. */
.steps-gross{gap:30px}
.steps-gross .num{
  width:54px;height:54px;font-size:22px;
  border-color:rgba(142,203,255,.45);background:rgba(142,203,255,.08);
}
.steps-gross .step{gap:24px}
.steps-gross h3{font-size:1.25rem;margin-bottom:8px;font-weight:600}
.steps-gross p{font-size:1.02rem;line-height:1.6;color:rgba(255,255,255,.82)}
.steps-gross .step-wo{margin-top:6px;font-size:.92rem;color:rgba(255,255,255,.5)}
.checkin-media{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.checkin-media img{border-radius:var(--radius-lg);aspect-ratio:1;object-fit:cover;width:100%}
.checkin-media img:first-child{grid-column:span 2;aspect-ratio:16/10}

/* ---------- Bewertungen ---------- */
.rating-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(28px,5vw,72px);margin-bottom:52px}
.rating-big{text-align:center}
.rating-big .v{font-family:var(--serif);font-size:3.4rem;line-height:1;color:var(--ink)}
.rating-big .s{color:#ffc107;font-size:18px;letter-spacing:3px;margin:8px 0 4px}
.rating-big .c{font-size:13px;color:var(--muted)}
/* Offizielle Portal-Widgets. Sie bringen ihre eigenen, kraeftigen Farben mit
   und stehen deshalb in eigenen weissen Kacheln, damit sie als Auszeichnungen
   lesbar bleiben statt in der Sektion zu verschwimmen. */
.portals-echt{margin-top:54px;text-align:center}
.portals-head{
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin-bottom:24px;
}
.portals{display:flex;flex-wrap:wrap;gap:20px;align-items:stretch;justify-content:center}
.portals iframe{
  width:212px;height:212px;border:0;flex:0 0 auto;
  background:#fff;border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);padding:12px;
  box-sizing:content-box;
}
/* Handy: zwei Kacheln nebeneinander. 2 x (148 + 2 x 6) + 14 = 334 px passen
   in die 335 px, die .wrap bei 375 px Bildschirmbreite uebrig laesst.
   Die Widgets selbst schalten bei dieser Kachelbreite auf ihren kleinen
   Massstab um, siehe assets/bewertungen/. */
@media(max-width:640px){
  .portals{gap:14px}
  .portals iframe{width:148px;height:148px;padding:6px}
}

/* Elfsight bringt eigene Gestaltung mit. Von aussen setzen wir nur die
   Breite und den Abstand, alles andere kommt aus dem Widget. */
.google-reviews{margin-top:8px}

.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.review{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px}
.review .s{color:#ffc107;letter-spacing:2px;font-size:14px;margin-bottom:14px}
.review q{display:block;font-family:var(--serif);font-size:1.12rem;line-height:1.6;color:var(--ink);quotes:'„' '“'}
.review .who{margin-top:18px;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:10px}
.review .av{width:32px;height:32px;border-radius:50%;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;font-weight:600;font-size:13px}

/* ---------- Lage ---------- */
.loc{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(36px,5vw,70px);align-items:center}
.loc-list{display:grid;gap:0;margin-top:30px;border-top:1px solid var(--line)}
.loc-list div{display:flex;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid var(--line);font-size:15px}
.loc-list span{color:var(--muted)}
.map{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);background:var(--sand-2)}
.map iframe{display:block;width:100%;height:440px;border:0}
.map-placeholder{
  height:440px;display:grid;place-items:center;text-align:center;padding:40px;gap:14px;
  background:linear-gradient(135deg,var(--sand),var(--sand-2));color:var(--muted);
}

/* ---------- CTA-Band ---------- */
.cta-band{position:relative;padding:clamp(90px,12vw,150px) 0;overflow:hidden;text-align:center;color:#fff}
.cta-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cta-band::after{content:'';position:absolute;inset:0;background:linear-gradient(rgba(14,28,43,.72),rgba(14,28,43,.82))}
.cta-band .wrap{position:relative;z-index:2}
.cta-band h2{color:#fff;margin-bottom:20px}
.cta-band p{color:rgba(255,255,255,.82);max-width:56ch;margin:0 auto 34px}

/* ---------- Kontakt ---------- */
.contact{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(40px,6vw,80px)}
.contact-info dl{margin:30px 0 0;display:grid;gap:22px}
.contact-info dt{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.contact-info dd{margin:0;font-size:17px}
.contact-info a{text-decoration:none;border-bottom:1px solid var(--line);transition:border-color .3s}
.contact-info a:hover{border-color:var(--blue)}

form.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:20px}
form.contact-form .full{grid-column:1/-1}
.f{display:flex;flex-direction:column;gap:7px}
.f label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:500}
.f input,.f textarea{
  font-family:var(--sans);font-size:16px;padding:14px 16px;border:1px solid var(--line);
  border-radius:var(--radius);background:#fff;color:var(--text);transition:border-color .3s,box-shadow .3s;
}
.f input:focus,.f textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,138,252,.12)}
.f textarea{resize:vertical;min-height:140px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:rgba(255,255,255,.62);padding:70px 0 0;font-size:14.5px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:52px}
.site-footer img.flogo{height:46px;width:auto;margin-bottom:20px}
.site-footer h4{font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#fff;margin-bottom:18px;font-weight:600}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.site-footer a{text-decoration:none;transition:color .3s}
.site-footer a:hover{color:#fff}
.socials{display:flex;gap:12px;margin-top:20px}
.socials a{
  width:38px;height:38px;border:1px solid rgba(255,255,255,.2);border-radius:50%;
  display:grid;place-items:center;transition:all .35s var(--ease);
}
.socials a:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);padding:22px 0;display:flex;flex-wrap:wrap;
  justify-content:space-between;gap:14px;font-size:13px;
}
.footer-bottom nav{display:flex;gap:22px}

/* ---------- Chat-Bubble ---------- */
.chat-fab{
  position:fixed;right:24px;bottom:24px;z-index:90;width:58px;height:58px;border-radius:50%;
  background:var(--blue);color:#fff;display:grid;place-items:center;text-decoration:none;
  box-shadow:0 14px 34px -12px rgba(0,138,252,.9);transition:transform .35s var(--ease);
}
.chat-fab:hover{transform:scale(1.08)}

/* ---------- Scroll-Reveal ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.1s}.rv-d2{transition-delay:.2s}.rv-d3{transition-delay:.3s}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .hero-slide img{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- Responsive ---------- */
@media(max-width:1080px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .services{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:960px){
  .nav,.lang{display:none}
  .burger{display:block}
  .site-header .nav.open{
    display:flex;flex-direction:column;position:absolute;top:calc(100% + 18px);left:0;right:0;
    background:var(--ink);padding:26px;gap:20px;border-radius:var(--radius-lg);box-shadow:var(--shadow);
  }
  .split,.checkin-grid,.loc,.contact{grid-template-columns:1fr}
  /* Handy: der Ausweichweg wird einspaltig, der Knopf so breit wie der Kasten.
     Wer den QR-Code an der Rezeption scannt, sieht ihn dann als Erstes. */
  .notfall{grid-template-columns:1fr;gap:22px;margin:32px 0 0}
  .btn-notfall{width:100%;padding:22px 24px;font-size:17px}
  .checkin-grid{margin-top:40px}
  .checkin-media{order:2}
  .steps-gross .num{width:48px;height:48px;font-size:20px}
  .steps-gross h3{font-size:1.18rem}
  .split .media .float{display:none}
  .rooms,.reviews{grid-template-columns:1fr}
  .bookbar{grid-template-columns:1fr 1fr}
  .bookbar .field:nth-child(2){border-right:0}
  .bookbar .field:nth-child(3){grid-column:1/-1;border-top:1px solid var(--line);border-right:0}
  .bookbar .submit{grid-column:1/-1}
  .bookbar .submit .btn{width:100%;padding:20px}
}
@media(max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .logo img,.site-header.solid .logo img{height:34px}
  .header-actions .btn-sm{padding:11px 16px;letter-spacing:.1em}
  .hero{height:auto;min-height:0;padding:132px 0 60px}
  .hero-content{padding-bottom:0}
  h1{font-size:2.35rem}
  .hero-sub{margin-top:18px;font-size:1rem;line-height:1.6}
  .hero-cta{margin-top:26px;gap:10px}
  .hero-badges{margin-top:28px;gap:11px;font-size:13px}
  .hero-badges > span{width:100%}
  .hero-badges .stars{width:auto;flex:none}
  .scroll-hint{display:none}
  .bookbar-wrap{margin-top:-28px}
  .services{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr;gap:20px}
  form.contact-form{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .checkin-media{grid-template-columns:1fr}
  .checkin-media img:first-child{grid-column:auto}
  .hero-cta .btn{flex:1 1 100%}
}

/* ==========================================================
   Unterseiten
   ========================================================== */

/* ---------- Kompakter Seitenkopf ---------- */
.page-hero{position:relative;height:clamp(380px,58vh,560px);overflow:hidden;background:var(--ink)}
.page-hero .hero-slides{position:absolute;inset:0}
.page-hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to right,rgba(9,20,32,.84) 0%,rgba(9,20,32,.5) 46%,rgba(9,20,32,.14) 82%),
    linear-gradient(to bottom,rgba(9,20,32,.62) 0%,rgba(9,20,32,.14) 42%,rgba(9,20,32,.6) 100%);
}
.page-hero .wrap{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:clamp(42px,6vh,68px)}
.page-hero h1{color:#fff;font-size:clamp(2.1rem,4.6vw,3.6rem);max-width:18ch}
.page-hero p{color:rgba(255,255,255,.85);max-width:56ch;margin:18px 0 0;font-weight:300;font-size:clamp(1rem,1.4vw,1.14rem)}

.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:18px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.breadcrumb a{text-decoration:none;transition:color .3s}
.breadcrumb a:hover{color:#fff}
.breadcrumb span{opacity:.45}
.breadcrumb b{font-weight:500;color:#9fd3ff}

/* ---------- Zimmerseite: Inhalt + Infospalte ---------- */
.room-layout{display:grid;grid-template-columns:1fr 350px;gap:clamp(36px,5vw,68px);align-items:start}

.specbox{
  position:sticky;top:104px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:30px;box-shadow:var(--shadow-sm);
}
.specbox .pr{display:flex;align-items:flex-end;gap:8px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.specbox .pr small{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);padding-bottom:9px}
.specbox .pr b{font-family:var(--serif);font-size:2.4rem;font-weight:400;color:var(--ink);line-height:1}
.specbox .pr i{font-style:normal;font-size:13px;color:var(--muted);padding-bottom:8px}
.specbox dl{margin:20px 0 0;display:grid;gap:0}
.specbox dl > div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.specbox dt{color:var(--muted)}
.specbox dd{margin:0;text-align:right;font-weight:500}
.specbox .btn{width:100%;margin-top:24px}
.specbox .hint{font-size:12.5px;color:var(--muted);text-align:center;margin-top:14px;line-height:1.5}

/* ---------- Galerie ---------- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gallery button{
  padding:0;border:0;background:none;cursor:zoom-in;border-radius:var(--radius-lg);overflow:hidden;
  aspect-ratio:3/2;position:relative;display:block;
}
.gallery button:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
/* Galerien mit wenigen Bildern: kein Mosaik, alle Kacheln gleich gross */
.gallery.few{grid-template-columns:repeat(2,1fr)}
.gallery.few button:first-child{grid-column:auto;grid-row:auto;aspect-ratio:3/2}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.gallery button:hover img{transform:scale(1.05)}
.gallery button:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* ---------- Lightbox ---------- */
.lb{
  position:fixed;inset:0;z-index:200;background:rgba(9,20,32,.94);
  display:none;align-items:center;justify-content:center;padding:56px 20px;
}
.lb.open{display:flex}
.lb img{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--radius)}
.lb .close,.lb .prev,.lb .next{
  position:absolute;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);
  color:#fff;width:46px;height:46px;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  transition:background .3s var(--ease);
}
.lb .close:hover,.lb .prev:hover,.lb .next:hover{background:rgba(255,255,255,.24)}
.lb .close{top:20px;right:20px}
.lb .prev{left:20px;top:50%;transform:translateY(-50%)}
.lb .next{right:20px;top:50%;transform:translateY(-50%)}
.lb .count{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.7);font-size:13px;letter-spacing:.1em}

/* ---------- Ausstattung ---------- */
.amenities{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 26px;margin-top:26px}
.amenities li{
  list-style:none;display:flex;align-items:center;gap:11px;font-size:15px;
  padding:9px 0;border-bottom:1px solid var(--line);
}
.amenities svg{flex:none;color:var(--blue);opacity:.9}
.note-box{
  margin-top:30px;padding:18px 22px;background:var(--sand);border-left:2px solid var(--blue);
  border-radius:0 var(--radius) var(--radius) 0;font-size:14.5px;color:var(--muted);
}

/* ---------- Vergleichstabelle ---------- */
.compare-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff}
table.compare{width:100%;border-collapse:collapse;min-width:640px;font-size:15px}
table.compare th,table.compare td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--line)}
table.compare thead th{
  font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);font-weight:600;background:var(--sand);
}
table.compare tbody th{font-weight:500;color:var(--muted);font-family:var(--sans);font-size:14.5px}
table.compare tr:last-child th,table.compare tr:last-child td{border-bottom:0}
table.compare td.pricecell{font-family:var(--serif);font-size:1.3rem;color:var(--ink)}

/* ---------- Weitere Zimmer ---------- */
.other{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.4vw,30px)}

@media(max-width:960px){
  .room-layout{grid-template-columns:1fr}
  .specbox{position:static}
  .amenities{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .gallery{grid-template-columns:1fr 1fr}
  .gallery button:first-child{grid-column:span 2;grid-row:auto}
  .amenities{grid-template-columns:1fr}
  .other{grid-template-columns:1fr}
  .page-hero{height:auto;min-height:0;padding:120px 0 46px}
  .page-hero .wrap{padding-bottom:0}
}

/* ---------- Einstieg ins Anfrageformular ----------
   Hier stand bis zum 30.08.2026 das igumbi-Formular selbst. Es ist lang
   (Zeitraum, vier Zimmerkategorien, Anschrift, Bemerkung) und hat den
   Kontaktabschnitt beherrscht. Jetzt steht an seiner Stelle die Einladung,
   und das Formular oeffnet in der Ebene ueber der Seite - siehe .ebene-*.
   Die Kontaktspalte war frueher klebend (position:sticky), damit sie am
   langen Formular mitlief. Ohne das Formular gibt es nichts mehr, woran sie
   mitlaufen koennte; stattdessen stehen beide Spalten auf gleicher Hoehe. */
.anfrage-karte{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);padding:clamp(30px,4vw,44px);text-align:center;
}
.anfrage-karte h3{
  font-family:var(--serif);font-weight:400;font-size:1.6rem;color:var(--ink);
  line-height:1.25;
}
.anfrage-karte p{margin:14px auto 0;max-width:38ch;color:var(--text)}
.anfrage-karte .btn{margin-top:26px}

@media(min-width:961px){
  .contact{align-items:center}
}

/* ---------- Parken ---------- */
.park-intro{max-width:760px}
.park-intro p + p{margin-top:16px}

.parkgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
.parkcard{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:30px;height:100%;
}
.parkcard-head{margin-bottom:18px}
.parkcard h3{font-family:var(--serif);font-size:1.4rem;color:var(--ink);line-height:1.25}
.parkbadge{
  display:inline-block;margin-top:10px;padding:5px 12px;border-radius:100px;
  background:var(--blue-soft);color:var(--blue-deep);
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
}
.parkaddr{color:var(--text);line-height:1.65}
.parkaddr b{color:var(--ink)}
.parknote{margin-top:14px;font-size:14px;color:var(--muted)}
.parknote b{color:var(--ink)}

.parktarif{width:100%;border-collapse:collapse;margin-top:18px;font-size:15px}
.parktarif caption{
  text-align:left;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);padding-bottom:8px;
}
.parktarif th,.parktarif td{padding:9px 0;border-bottom:1px solid var(--line);text-align:left}
.parktarif th{font-weight:400;color:var(--text)}
.parktarif td{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600}
.parktarif tr:last-child th,.parktarif tr:last-child td{border-bottom:0}

/* Der kostenlose Stellplatz bekommt die Zahl, die die anderen als Tabelle haben */
.parkpreis{font-family:var(--serif);font-size:2rem;color:var(--ink);line-height:1.1;margin-bottom:16px}
.parkpreis span{display:block;font-family:var(--sans);font-size:13px;color:var(--muted);margin-top:6px}
.parkcard .link-arrow{margin-top:22px}

/* ---------- Parkleitsystem (fremder Rahmen) ----------
   pls.marburg.de liefert eine schlichte Tabelle mit fester Breite. Wir geben
   dem Rahmen genau die Groesse des Inhalts, damit keine Rollbalken entstehen,
   und verkleinern ihn auf schmalen Bildschirmen per JavaScript proportional.
   Von aussen gestalten laesst sich fremder Inhalt nicht. */
.pls{
  --pls-breite:560px; --pls-hoehe:390px;
  /* +2 px fuer die Rahmenlinie: clientWidth zaehlt sie nicht mit, sonst
     kaeme das Skript auf 558 von 560 und wuerde grundlos verkleinern. */
  width:100%;max-width:calc(var(--pls-breite) + 2px);margin:0 auto;
  height:var(--pls-hoehe);overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.pls iframe{
  width:var(--pls-breite);height:var(--pls-hoehe);
  border:0;display:block;transform-origin:top left;
}
.pls-quelle{
  text-align:center;margin-top:18px;font-size:13px;color:var(--muted);
}
.pls-quelle a{color:var(--blue-deep);text-decoration:underline;text-underline-offset:3px}

@media(max-width:960px){
  .parkgrid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .parkgrid{grid-template-columns:1fr;gap:18px}
  .parkcard{padding:24px}
}

/* ---------- Rechtstexte (Impressum, AGB, Datenschutz) ----------
   Diese Seiten haben kein Kopfbild. Der Kopfbereich ist deshalb von Anfang an
   dunkel, sonst staende die weisse Navigation auf weissem Grund. */
.legal-page .site-header{background:var(--ink);padding:12px 0}
.legal-page .site-header::before{opacity:0}
.legal-page .site-header .logo img{height:40px}

.legal-head{background:var(--ink);color:#fff;padding:128px 0 54px}
.legal-head .breadcrumb{margin-bottom:20px}
.legal-head h1{color:#fff;font-size:clamp(2.2rem,4.4vw,3.2rem);line-height:1.1}
.legal-head p{margin-top:16px;color:rgba(255,255,255,.72);max-width:640px}

/* Achtung: dieses Element traegt "wrap legal", die Klassen sitzen also auf
   demselben Kasten. Eine max-width auf .legal wuerde deshalb den ganzen
   Inhaltsrahmen verengen und ihn gegenueber der Ueberschrift im Kopfbereich
   verschieben. Stattdessen bekommen die Kindelemente die Zeilenbreite. */
.legal > *{max-width:780px}
.legal h2{
  font-family:var(--serif);font-size:1.55rem;color:var(--ink);line-height:1.3;
  margin:48px 0 16px;
}
.legal h2:first-of-type{margin-top:0}
.legal h3{
  font-family:var(--sans);font-size:1rem;font-weight:600;color:var(--ink);
  margin:30px 0 10px;
}
.legal p{margin-bottom:14px;line-height:1.75}
.legal ul{margin:0 0 16px 22px}
.legal li{margin-bottom:9px;line-height:1.7}
.legal code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.88em;background:var(--sand);padding:2px 6px;border-radius:3px;
  color:var(--ink-3);overflow-wrap:anywhere;
}
.legal a{color:var(--blue-deep);text-decoration:underline;text-underline-offset:3px}

.anschrift{line-height:1.8}
.anschrift b{color:var(--ink)}

.legal-dl{margin:0 0 16px}
.legal-dl > div{display:flex;gap:16px;padding:9px 0;border-bottom:1px solid var(--line)}
.legal-dl dt{min-width:110px;color:var(--muted);font-size:14px}
.legal-dl dd{margin:0}

.legal-tab{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:15px}
.legal-tab th,.legal-tab td{padding:11px 14px;border:1px solid var(--line);text-align:left}
.legal-tab thead th{background:var(--sand);color:var(--ink);font-weight:600;font-size:13px}

.legal-stand{margin-top:44px;padding-top:20px;border-top:1px solid var(--line);
  font-size:14px;color:var(--muted)}

/* Vorrang-Hinweis auf den englischen Rechtstexten. Bewusst zurueckhaltend:
   Er soll gelesen werden, aber nicht wie eine Warnung wirken - der Text
   darunter ist ja richtig, nur eben nicht der verbindliche Wortlaut. */
.legal-hinweis{
  margin:0 0 34px;padding:14px 18px;
  background:var(--sand);border-left:3px solid var(--line);
  border-radius:var(--radius);
  font-size:14.5px;color:var(--muted);
}
.legal-hinweis a{color:var(--blue-deep);text-decoration:underline;text-underline-offset:3px}

/* Hier standen bis zum 30.08.2026 .hinweis-offen und p.offen: gelbe Kaesten,
   die offene Stellen in den Rechtstexten markiert haben. Alle Stellen sind
   gefuellt, die Markierungen sind raus, die Regeln damit unbenutzt. Wenn
   wieder eine Stelle offenbleibt, lieber neu schreiben als hier totes CSS
   mitzuschleppen. */

@media(max-width:640px){
  .legal-head{padding:104px 0 40px}
  .legal-dl > div{flex-direction:column;gap:2px}
  .legal-tab{font-size:14px}
  .legal-tab th,.legal-tab td{padding:9px 10px}
}

/* Ausweichhinweis innerhalb eines Check-in-Schritts. Etwas abgesetzt, damit
   er als "falls etwas nicht klappt" lesbar ist und nicht als weiterer
   Handgriff, den jeder Gast machen muss. */
.step-fallback{
  margin-top:12px;padding-left:14px;
  border-left:2px solid rgba(255,255,255,.22);
  font-size:14.5px;color:rgba(255,255,255,.6);
}

/* ---------- Ebene ueber der Seite (Buchung, Anfrage) ----------
   Zwei igumbi-Bausteine laufen in einer Ebene ueber der Seite statt in einem
   neuen Tab: die Buchungsstrecke (seit 29.08.2026) und das Anfrageformular
   (seit 30.08.2026). Moeglich ist das, weil igumbi fuer beides ein
   JavaScript-Widget anbietet, das direkt ins DOM baut. Ein iframe ginge
   nicht: igumbi sendet X-Frame-Options: SAMEORIGIN, der Rahmen bliebe leer.
   Beide Widgets bringen ihr eigenes Aussehen mit - das Anfrageformular sogar
   im Shadow DOM, da kommt von aussen ohnehin nichts hinein. Wir umrahmen sie
   nur und fassen ihre Innereien bewusst nicht an, sonst bricht jede
   Aenderung auf igumbi-Seite unser Layout.
   Die Klassen heissen .ebene-*, weil sie beiden gehoeren; bis zum 30.08.2026
   hiessen sie .buchung-*. */
.ebene{
  position:fixed;inset:0;z-index:1000;display:none;
  background:rgba(14,28,43,.72);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .3s var(--ease);
}
.ebene.offen{display:block}
.ebene.sichtbar{opacity:1}

.ebene-fenster{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.985);
  width:min(940px,calc(100vw - 48px));
  height:min(860px,calc(100vh - 64px));
  background:var(--paper);border-radius:var(--radius-lg);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.6);
  display:flex;flex-direction:column;overflow:hidden;
  transition:transform .3s var(--ease);
}
.ebene.sichtbar .ebene-fenster{transform:translate(-50%,-50%) scale(1)}

.ebene-kopf{
  flex:none;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:16px 18px 16px 24px;
  background:var(--ink);color:#fff;
}
.ebene-kopf b{
  font-family:var(--serif);font-weight:400;font-size:19px;letter-spacing:-.01em;
}
.ebene-zu{
  flex:none;width:38px;height:38px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;
  display:grid;place-items:center;transition:background .25s var(--ease);
}
.ebene-zu:hover{background:rgba(255,255,255,.24)}
.ebene-zu:focus-visible{outline:2px solid #fff;outline-offset:2px}

.ebene-inhalt{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:22px 24px 34px;
}
/* Das Widget setzt eigene Schriften. Wir geben nur die Grundlinie vor. */
.ebene-inhalt{font-size:15px;color:var(--text)}

.ebene-laedt{
  display:grid;place-items:center;gap:14px;padding:70px 0;
  color:var(--muted);font-size:14.5px;text-align:center;
}
.ebene-laedt i{
  width:26px;height:26px;border:2px solid var(--sand-2);border-top-color:var(--blue);
  border-radius:50%;animation:ebene-dreh .8s linear infinite;
}
@keyframes ebene-dreh{to{transform:rotate(360deg)}}

/* Das Anfrageformular ist ein Formular, keine Suchmaske: schmaler gesetzt
   liest es sich besser, und die Felder werden nicht unnoetig breit.
   Die Bedingung ist noetig, obwohl weiter unten schon eine fuer das Handy
   steht: .ebene-formular .ebene-fenster ist staerker als .ebene-fenster und
   wuerde die Vollbild-Regel sonst schlagen - gemessen am 30.08.2026 mit
   327 statt 375 px Fensterbreite auf dem Handy. */
@media (min-width:701px){
  .ebene-formular .ebene-fenster{width:min(720px,calc(100vw - 48px))}
}

/* Steht immer unter dem Formular, nicht nur im Fehlerfall - warum, steht
   in main.js beim Baustein "Anfrageformular". */
.ebene-fuss{
  margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
  font-size:14.5px;color:var(--muted);text-align:center;
}
.ebene-fuss a{color:var(--blue-deep);text-decoration:underline;text-underline-offset:3px}

/* Auf dem Handy nimmt die Buchung den ganzen Bildschirm ein. */
@media (max-width:700px){
  .ebene-fenster{
    inset:0;left:0;top:0;transform:none;
    width:100%;height:100%;height:100dvh;max-width:none;border-radius:0;
  }
  .ebene.sichtbar .ebene-fenster{transform:none}
  .ebene-kopf{padding:14px 14px 14px 18px}
  .ebene-inhalt{padding:16px 14px 40px}

  /* Das Anfrageformular bringt eigene Innenabstaende mit; unsere kommen auf
     dem Handy oben drauf und schieben es aus dem Bild. Jeder Pixel Polster
     hier ist ein Pixel Querlauf dort - gemessen am 30.08.2026: 14 px Polster
     -> 27 px Ueberstand, 6 px -> 19 px, 0 px -> 13 px. Die letzten 13 px
     stammen aus der Rechnung im Shadow DOM des Widgets; da kommen wir von
     aussen nicht heran, und wir fassen es auch nicht an. Der Bereich laesst
     sich schieben, abgeschnitten wird nichts. */
  .ebene-formular .ebene-inhalt{padding-left:0;padding-right:0}
}
@media (prefers-reduced-motion:reduce){
  .ebene,.ebene-fenster{transition:none}
  .ebene-laedt i{animation:none}
}

/* --- Ein einziger Eingriff ins igumbi-Widget --- */

/* Das Widget bringt im Ergebnisbereich ein eigenes X mit. In der Ebene waeren
   das zwei Kreuze uebereinander, die Verschiedenes tun. Unseres im Kopf gilt.
   Faellt die igumbi-Klasse irgendwann weg, ist das X einfach wieder da -
   nichts geht kaputt.

   Hier stand bis zum 30.08.2026 noch einiges mehr: Floats raeumen, feste
   600-px-Breite loesen, Hoehe zuruecksetzen. Das war noetig, solange das
   Widget im Standard-Layout lief. Mit "?layout=wide2" (siehe main.js) bringt
   igumbi ein eigenes, responsives Layout mit - gemessen: Knopf sitzt im
   Kasten, kein Querscrollen, keine Ueberlappung. Die Eingriffe sind damit
   nicht nur ueberfluessig, sie arbeiten gegen das neue Layout. Deshalb raus. */
.ebene-inhalt .btnclose{display:none}