/* ============================================================
   Ferienanlage Rügen – brand.css (konsolidiert)
   Marken-Angleich + Feinschliff. Im Layout NACH style.css laden.
   Nach Änderung: ?v-Nummer im Layout-<link> hochzählen!
   Contao 5: content-text / content-image / content-headline / content-hyperlink / content-youtube.
   Startseite nutzt rsce-Bausteine (usp/cards/section/region/cta) -> Styling aus style.css.
   ============================================================ */

/* ---------- 1) Farb-Tokens ---------- */
:root{
  --c-primary:     #4d98af !important;
  --c-primary-700: #006c8d !important;
  --c-primary-50:  #eef5f8 !important;
  --c-accent:      #ffbb05 !important;
  --c-accent-600:  #e0a600 !important;
  --c-accent-50:   #fff6db !important;
  --c-sea:         #006c8d !important;
  --c-sand:        #faf2dc !important;
  --c-foam:        #eef5f8 !important;
  --c-text:        #333333 !important;
  --c-line:        #e2e8ec !important;
}

/* ---------- 2) Schriften selbst hosten ---------- */
@font-face{ font-family:'Titillium Web'; font-style:normal; font-weight:400; font-display:swap; src:url('/files/layout/fonts/titillium-web-v15-latin-regular.woff2') format('woff2'); }
@font-face{ font-family:'Titillium Web'; font-style:normal; font-weight:600; font-display:swap; src:url('/files/layout/fonts/titillium-web-v15-latin-600.woff2') format('woff2'); }
@font-face{ font-family:'Titillium Web'; font-style:normal; font-weight:700; font-display:swap; src:url('/files/layout/fonts/titillium-web-v15-latin-700.woff2') format('woff2'); }
@font-face{ font-family:'Open Sans'; font-style:normal; font-weight:400; font-display:swap; src:url('/files/layout/fonts/open-sans-v29-latin-regular.woff2') format('woff2'); }
@font-face{ font-family:'Open Sans'; font-style:normal; font-weight:600; font-display:swap; src:url('/files/layout/fonts/open-sans-v29-latin-600.woff2') format('woff2'); }
@font-face{ font-family:'Open Sans'; font-style:normal; font-weight:700; font-display:swap; src:url('/files/layout/fonts/open-sans-v29-latin-700.woff2') format('woff2'); }
@font-face{ font-family:'Noto Serif'; font-style:normal; font-weight:400; font-display:swap; src:url('/files/layout/fonts/noto-serif-v21-latin-regular.woff2') format('woff2'); }

/* ---------- 3) Font-Tokens + Überschriften ---------- */
:root{
  --ff-sans:    'Titillium Web','Segoe UI',system-ui,-apple-system,Arial,sans-serif !important;
  --ff-display: 'Open Sans','Titillium Web',system-ui,sans-serif !important;
}
h1,h2,h3,h4,h5,.content-headline{ font-family:var(--ff-display) !important; font-weight:700 !important; }
.mod_article .content-headline{ color:var(--c-primary-700) !important; }
.site-footer h1,.site-footer h2,.site-footer h3,.site-footer h4,.site-footer h5{ color:#eaf3f6 !important; }

/* ---------- 4) Links: Petrol -> Gold ---------- */
a{ color:var(--c-primary); }
a:hover,a:focus{ color:var(--c-accent-600); }

/* ---------- 5) Header-Akzente + Lesbarkeit ---------- */
.st-quicklinks{ display:none !important; }                 /* mobil aus -> Burger-Menü */
@media (min-width:1000px){ .st-quicklinks{ display:flex !important; align-items:center; gap:2.5rem !important; } }
.st-quicklinks a{ color:var(--c-text) !important; font-weight:600; }

/* Desktop-Quicklink „Ferienhäuser" mit Aufklapp-Untermenü */
.st-quicklinks .st-ql-has-sub{ position:relative; display:inline-flex; align-items:center; gap:.3rem; }
.st-quicklinks .st-ql-has-sub__caret{ font-size:1.15em; line-height:1; color:var(--c-primary-700); }
.st-quicklinks .st-ql-has-sub::after{ content:""; position:absolute; top:100%; left:0; right:0; height:.7rem; } /* Hover-Brücke */
.st-quicklinks .st-ql-sub{
  position:absolute; top:100%; left:0; margin-top:.55rem; min-width:240px; padding:.4rem 0; list-style:none;
  background:#fff; border:1px solid var(--c-line); border-radius:12px; box-shadow:0 14px 30px rgba(0,0,0,.15);
  opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .15s ease, transform .15s ease; z-index:60;
}
.st-quicklinks .st-ql-has-sub:hover .st-ql-sub,
.st-quicklinks .st-ql-has-sub:focus-within .st-ql-sub{ opacity:1; visibility:visible; transform:translateY(0); }
.st-quicklinks .st-ql-sub li{ margin:0; }
.st-quicklinks .st-ql-sub a{ display:block; padding:.55rem 1.1rem; color:var(--c-text) !important; font-weight:600; white-space:nowrap; }
.st-quicklinks .st-ql-sub a::after{ display:none !important; } /* kein Gold-Unterstrich im Dropdown */
.st-quicklinks .st-ql-sub a:hover{ background:var(--c-foam); color:var(--c-primary-700) !important; }

/* Mobil: Hamburger sichtbar. .st-burger sitzt in .site-nav, die die Demo mobil
   ausblendet -> Nav mobil zeigen (Burger + Merkzettel), Demo-Toggle & CTA aus. */
@media (max-width:999px){
  .site-nav{ display:flex !important; align-items:center; gap:.5rem; }
  .site-nav__cta{ display:none !important; }
  .nav-toggle{ display:none !important; }
}

/* Off-Canvas-Menü über die ganze Höhe: Header darf KEIN Bezugsrahmen für
   position:fixed sein (backdrop-filter/filter/transform erzeugen genau das). */
.site-header, .site-header__inner, .site-nav{
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  filter:none !important; transform:none !important; perspective:none !important;
}
.st-oc{ position:fixed !important; inset:0 !important; height:100vh !important; }
.st-oc__panel{ top:0 !important; height:100vh !important; }
@supports (height:100dvh){ .st-oc, .st-oc__panel{ height:100dvh !important; } }
.site-nav a::after,.st-quicklinks a::after{ background:var(--c-accent) !important; }
.site-nav__cta{ background:var(--c-accent) !important; color:#1c1c1c !important; border-color:var(--c-accent) !important; }
.site-nav__cta:hover{ background:var(--c-accent-600) !important; border-color:var(--c-accent-600) !important; }

/* ---------- 6) Logo + Kopfhöhe ---------- */
.site-header__inner{ height:auto !important; min-height:88px !important; padding-top:6px; padding-bottom:6px; }
.site-header__logo img{ height:72px !important; width:auto !important; max-height:none !important; }
.footer-brand img{ height:64px !important; width:auto !important; max-height:none !important; }

/* ---------- 7) Footer in Seeblau ---------- */
.site-footer, footer, #footer, .footer, .page-footer{ background:var(--c-primary-700) !important; }

/* ============================================================
   8) Slider-Hero + Feinschliff Standard-Inhalte (Unterseiten)
   Die rsce-Bausteine der Startseite stylt style.css selbst.
   ============================================================ */

/* 8.0 GLOBALER Inhalts-Container: Standard-Inhaltselemente auf allen Seiten
   zentriert begrenzen (sonst laufen sie volle Fensterbreite). rsce-Bausteine
   und Seitenkopf bleiben bewusst full-width. */
.mod_article > .content-text,
.mod_article > .content-headline,
.mod_article > .content-image,
.mod_article > .content-gallery,
.mod_article > .ce_gallery,
.mod_article > .content-youtube,
.mod_article > .content-player,
.mod_article > .content-hyperlink,
.mod_article > .content-list,
.mod_article > .content-table,
.mod_article > .content-download,
.mod_article > .content-accordion,
.mod_article > .content-code{
  width:100%; max-width:var(--container,1200px); margin-inline:auto;
  padding-inline:var(--sp-4,1rem); box-sizing:border-box;
}
@media (min-width:700px){
  .mod_article > .content-text,
  .mod_article > .content-headline,
  .mod_article > .content-image,
  .mod_article > .content-gallery,
  .mod_article > .ce_gallery,
  .mod_article > .content-youtube,
  .mod_article > .content-player,
  .mod_article > .content-hyperlink,
  .mod_article > .content-list,
  .mod_article > .content-table,
  .mod_article > .content-download,
  .mod_article > .content-accordion,
  .mod_article > .content-code{ padding-inline:var(--sp-6,1.5rem); }
}

/* Kalender-Dialog: „Zurücksetzen" auf der blauen Leiste weiß */
.calendar-modal__footer .btn.btn--clear,
.calendar-modal__footer .btn.btn--clear.btn--ghost,
.calendar-modal__footer a{ color:#fff !important; text-decoration:underline; }

/* 8.1 Slider als Hero */
.mod_rocksolid_slider .rsts-view,
.mod_rocksolid_slider .rsts-crop,
.mod_rocksolid_slider .rsts-slide{ height:560px !important; }
.mod_rocksolid_slider .rsts-slide img{ width:100% !important; height:560px !important; object-fit:cover !important; object-position:center !important; }
@media (max-width:768px){
  .mod_rocksolid_slider .rsts-view,.mod_rocksolid_slider .rsts-crop,.mod_rocksolid_slider .rsts-slide,.mod_rocksolid_slider .rsts-slide img{ height:540px !important; }
}

/* 8.1b Slider-Navigation schöner (Pfeile seitlich rund, Punkte zentriert unten) */
.mod_rocksolid_slider{ position:relative; }
/* Pfeil-Buttons an den Seiten */
.mod_rocksolid_slider .rsts-prev,
.mod_rocksolid_slider .rsts-next{
  position:absolute !important; top:50% !important; transform:translateY(-50%) !important; z-index:6;
  width:48px !important; height:48px !important; margin:0 !important; border-radius:50% !important;
  background:rgba(0,0,0,.32) !important; box-shadow:none !important;
  display:flex !important; align-items:center; justify-content:center; transition:background .2s ease;
}
.mod_rocksolid_slider .rsts-prev{ left:18px !important; right:auto !important; }
.mod_rocksolid_slider .rsts-next{ right:18px !important; left:auto !important; }
.mod_rocksolid_slider .rsts-prev:hover,
.mod_rocksolid_slider .rsts-next:hover{ background:var(--c-accent) !important; }
.mod_rocksolid_slider .rsts-prev-label,
.mod_rocksolid_slider .rsts-next-label{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.mod_rocksolid_slider .rsts-prev::before{ content:""; width:11px; height:11px; border-left:3px solid #fff; border-bottom:3px solid #fff; transform:rotate(45deg); margin-left:5px; }
.mod_rocksolid_slider .rsts-next::before{ content:""; width:11px; height:11px; border-right:3px solid #fff; border-top:3px solid #fff; transform:rotate(45deg); margin-right:5px; }
/* Punkte (Bullets) zentriert unten */
.mod_rocksolid_slider .rsts-nav-bullets{ position:absolute !important; left:0 !important; right:0 !important; bottom:16px !important; top:auto !important; z-index:6; width:auto !important; text-align:center !important; }
.mod_rocksolid_slider .rsts-nav-bullets ul{ display:inline-flex !important; gap:10px; margin:0 !important; padding:0 !important; list-style:none; }
.mod_rocksolid_slider .rsts-nav-prev,
.mod_rocksolid_slider .rsts-nav-next{ display:none !important; }
.mod_rocksolid_slider .rsts-nav-item a{
  display:block !important; width:12px !important; height:12px !important; padding:0 !important;
  border-radius:50% !important; background:rgba(255,255,255,.55) !important; border:0 !important;
  text-indent:-9999px; overflow:hidden; transition:background .2s ease, transform .2s ease;
}
.mod_rocksolid_slider .rsts-nav-item a:hover{ background:#fff !important; }
.mod_rocksolid_slider .rsts-nav-item a.active{ background:var(--c-accent) !important; transform:scale(1.25); }

/* 8.1c Suche als schwebende Leiste ÜBER dem Slider (Hero-Suche) */
#article-1000301, .mod_article.slider{ position:relative; overflow:visible !important; }
#article-1000301 > .ce_form.horizontal_filter{
  position:absolute !important; z-index:20; margin:0 !important;
  left:50% !important; transform:translateX(-50%); bottom:34px;
  width:min(calc(var(--container,1200px) - 88px),94%);
  background:rgba(255,255,255,.96); border-radius:16px;
  box-shadow:0 14px 34px rgba(0,0,0,.20); padding:16px 18px;
}
#article-1000301 .horizontal_filter .formbody{ display:flex !important; flex-wrap:wrap; align-items:flex-end; gap:14px; }
#article-1000301 .horizontal_filter .formbody > .widget{ flex:1 1 210px; margin:0 !important; min-width:0; }
#article-1000301 .horizontal_filter .widget-submit{ flex:0 0 auto; }
#article-1000301 .horizontal_filter .widget-submit button,
#article-1000301 .horizontal_filter input[type="submit"],
#article-1000301 .horizontal_filter .submit{
  background:var(--c-accent) !important; color:#1c1c1c !important; font-weight:700;
  border:0 !important; border-radius:999px !important; padding:12px 28px !important; cursor:pointer;
}
#article-1000301 .horizontal_filter .widget-submit button:hover,
#article-1000301 .horizontal_filter input[type="submit"]:hover{ background:var(--c-accent-600) !important; }
/* Reisezeitraum und Personen: weiß wie das Ort-Feld, nur Suchen bleibt gelb */
#article-1000301 .horizontal_filter .widget:not(.widget-submit) button{
  background:#fff !important; color:#6b7280 !important; font-weight:400;
  border:1px solid #e2e8ec !important; border-radius:8px !important;
  padding:0 14px !important; cursor:pointer; box-shadow:none !important;
}
#article-1000301 .horizontal_filter .widget:not(.widget-submit) button:hover{ border-color:var(--color-primary, #4d98af) !important; }
#article-1000301 .horizontal_filter .widget:not(.widget-submit) button,
#article-1000301 .horizontal_filter .widget:not(.widget-submit) input[type="text"]{
  box-sizing:border-box !important; height:50px !important; width:100%; border-radius:8px !important;
}
#article-1000301 .horizontal_filter .widget:not(.widget-submit) > label{
  font-weight:400 !important; font-size:1rem !important; line-height:1.3 !important; margin:0 0 .35rem !important;
}
@media (max-width:900px){
  /* Suche liegt auch mobil ÜBER dem Slider (Felder gestapelt), Slider ist mobil höher */
  #article-1000301 > .ce_form.horizontal_filter{ bottom:16px; width:92%; padding:12px 14px; }
  #article-1000301 .horizontal_filter .formbody{ display:block !important; }
  #article-1000301 .horizontal_filter .formbody > .widget{ margin:0 0 .5rem !important; }
}

/* 8.1d Mobile-Feinschliff */
@media (max-width:768px){
  .mod_rocksolid_slider .rsts-prev,.mod_rocksolid_slider .rsts-next{ width:38px !important; height:38px !important; }
  .mod_rocksolid_slider .rsts-prev{ left:10px !important; }
  .mod_rocksolid_slider .rsts-next{ right:10px !important; }
  .mod_rocksolid_slider .rsts-nav-bullets{ bottom:10px !important; }
  .content-headline.stil-h1{ font-size:1.6rem !important; }
  .mod_article .content-headline{ font-size:1.4rem !important; }
  #article-1000196 > .content-headline,
  #article-1000196 > .content-text,
  #article-1000196 > .content-youtube,
  #article-1000196 > .content-image{ padding-inline:1rem; }
}

/* 8.2 Startseite: übrig gebliebene Standard-Elemente (H1/H2, Video, Banner)
       zentriert begrenzen; rsce-Bausteine bleiben bewusst full-width. */
#article-1000196 > .content-headline,
#article-1000196 > .content-text,
#article-1000196 > .content-youtube,
#article-1000196 > .content-image{ max-width:var(--container,1200px); margin-inline:auto; padding-inline:var(--sp-6,24px); box-sizing:border-box; }

/* 8.3 Überschriften-Größen */
.mod_article .content-headline{ font-size:1.55rem !important; line-height:1.25; }
h1.content-headline, .content-headline.stil-h1{ font-size:1.9rem !important; margin-bottom:.1rem; }
h2.content-headline.text-center{ color:var(--c-primary) !important; font-weight:600 !important; font-size:1.3rem !important; margin-top:0; }

/* 8.4 Check-Listen mit Gold-Haken */
.ul-check .rte ul{ list-style:none; padding-left:0; }
.ul-check .rte li{ position:relative; padding-left:1.8rem; margin:.35rem 0; }
.ul-check .rte li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--c-accent); font-weight:800; }

/* 8.5 Hyperlink als Gold-Button */
.content-hyperlink{ text-align:center; margin:1rem 0 1.5rem; }
.content-hyperlink a{ display:inline-block; background:var(--c-accent); color:#1c1c1c !important; font-weight:700; text-decoration:none; padding:12px 24px; border-radius:999px; transition:background .15s ease; }
.content-hyperlink a:hover{ background:var(--c-accent-600); }

/* 8.6 Bilder & Video */
.content-image img{ border-radius:12px; max-width:100%; height:auto; display:block; }
.content-image.img-full img{ width:100%; }
.content-youtube figure{ margin:0; }
.content-youtube iframe{ width:100% !important; height:auto !important; aspect-ratio:16/9; border-radius:12px; display:block; }

/* 8.7 Textfluss */
.content-text .rte{ line-height:1.7; }
.content-text .rte h3{ font-family:var(--ff-display); margin-top:1.5rem; }

/* ============================================================
   8.8) Legacy-Inhalts-Klassen wie alte Seite (automatisch, site-weit)
   Migrierte Inhalte tragen diese Klassen; hier ihr Styling.
   ============================================================ */

/* Contao-5 Inhalts-Galerie als Raster (Theme stylt nur die Reader-Galerie) */
.content-gallery ul{ list-style:none; margin:0; padding:0; display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
.content-gallery--cols-2 ul{ grid-template-columns:repeat(2,1fr); }
.content-gallery--cols-3 ul{ grid-template-columns:repeat(3,1fr); }
.content-gallery--cols-4 ul{ grid-template-columns:repeat(4,1fr); }
.content-gallery--cols-5 ul{ grid-template-columns:repeat(5,1fr); }
@media (max-width:640px){ .content-gallery ul{ grid-template-columns:repeat(2,1fr) !important; } }
.content-gallery li{ margin:0; }
.content-gallery figure{ margin:0; height:100%; }
.content-gallery a{ display:block; height:100%; }
.content-gallery img{ width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; display:block; border-radius:10px; }

/* Alte Galerie-/Bild-Optik (Kunden-Klassen) */
.gallery-grau{ padding:20px; background:#f1f3f4; border-radius:14px; }
.weisser-bilder-rahmen img{ border:4px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.12); }
.grau-andoken{ padding:0 20px 20px; background:#f1f3f4; border-radius:0 0 14px 14px; }

/* Text-mit-Bild (Contao-5 media). Bilder NICHT zwangsstrecken; Float respektieren. */
.content-text.media figure{ margin:0 0 1.1rem; }
.content-text.media img{ max-width:100%; height:auto; display:block; border-radius:12px; }
/* Bild OBEN/UNTEN gestapelt -> volle Spaltenbreite */
.content-text.media--above > figure img,
.content-text.media--below > figure img{ width:100%; }
.content-text.media--below{ display:flex; flex-direction:column; }
.content-text.media--below figure{ order:2; margin:1.1rem 0 0; }
/* Bild LINKS/RECHTS umflossen (kleine Thumbnails, floating=left/right) */
.content-text.media--left, .content-text.media--right{ overflow:hidden; }
.content-text.media--left > figure, .content-text .float_left, .content-text figure.float_left{
  float:left; max-width:min(45%,320px); margin:.2rem 1.4rem .6rem 0; }
.content-text.media--right > figure, .content-text .float_right, .content-text figure.float_right{
  float:right; max-width:min(45%,320px); margin:.2rem 0 .6rem 1.4rem; }
@media (max-width:560px){
  .content-text.media--left > figure, .content-text.media--right > figure,
  .content-text .float_left, .content-text .float_right{ float:none; max-width:100%; margin:0 0 1rem; }
}
.img-full, .img-full img{ width:100%; height:auto; }

/* YouTube-Box grau (Kunden-Klasse) */
.youtube-box-2{ background:#f1f3f4; padding:24px; border-radius:14px; margin:1.2rem 0; }

/* Check-Liste (breit gefasst, Gold-Haken) */
.ul-check ul{ list-style:none; padding-left:0; }
.ul-check li{ position:relative; padding-left:1.7rem; margin-bottom:.45rem; }
.ul-check li::before{ content:"✓"; position:absolute; left:0; top:.05em; color:var(--c-accent); font-weight:800; }

/* Hervorgehobene Button-Box */
.btn-hylight-box{ background:var(--c-foam); border:1px solid var(--c-line); border-radius:12px; padding:1rem 1.25rem; margin:1rem 0; }

/* Breadcrumb (Contao mod_breadcrumb) – dezent, im Content-Container */
.mod_breadcrumb{ max-width:var(--container,1200px); margin:0 auto; padding:.85rem var(--sp-4,1rem) 0; box-sizing:border-box; }
.mod_breadcrumb ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; font-size:.9rem; color:var(--c-text-muted,#5b6779); }
.mod_breadcrumb li{ display:inline-flex; align-items:center; gap:.5rem; }
.mod_breadcrumb li:not(:last-child)::after{ content:"/"; color:var(--c-line); }
.mod_breadcrumb a{ color:var(--c-primary); text-decoration:none; }
.mod_breadcrumb a:hover{ color:var(--c-accent-600); }
.mod_breadcrumb .active,.mod_breadcrumb strong{ color:var(--c-text); font-weight:600; }

/* Facebook/Instagram in der Kopfleiste */
.utility-bar .util-link.util-link--social{ padding:4px 6px; }
.utility-bar .util-link.util-link--social svg{ width:18px; height:18px; }

/* Suchleiste auf der Ferienwohnungen-Seite: Ort, Reisezeitraum, Personen gleich */
.search-box .widget:not(.widget-submit) > label,
.search-box .widget:not(.widget-submit) .pick__label{
  font-size:1rem !important; font-weight:400 !important; text-transform:none !important; letter-spacing:.01em !important; line-height:1.3 !important; margin:0 0 .35rem !important;
}
.search-box .widget:not(.widget-submit) input[type="text"],
.search-box .widget:not(.widget-submit) .pick__trigger{
  box-sizing:border-box !important; height:50px !important; border:1px solid #e2e8ec !important; border-radius:8px !important; box-shadow:none !important;
}

/* Startseite: ganze Karte klickbar (Bild und Text), der Link bleibt der Titel */
.cards .card{ position:relative; }
.cards .card .card__title a::after{ content:""; position:absolute; inset:0; z-index:1; }
.cards .card:hover .card__title a{ text-decoration:underline; }

/* Startseite-Slider: nicht groesser als die Bilder (1140 px), sonst wird hochskaliert und unscharf */
.mod_rocksolid_slider{ max-width:none; margin-left:auto; margin-right:auto; }

/* Footer: fuenf Spalten (Marke, Entdecken, Unternehmen, Downloads, Rechtliches) */
@media (min-width:1000px){ .footer-grid{ grid-template-columns:1.4fr 1fr 1fr 1fr 1fr !important; } }

/* Ausflugsziele: Rueckweg-Knopf und klickbare Ruegenkarte */
.hyperlink-btn-orange{ box-sizing:border-box; width:100%; max-width:var(--container,1200px); margin:1.5rem auto; padding:0 var(--sp-4,24px); }
.hyperlink-btn-orange a{ display:inline-flex; align-items:center; gap:.5rem; background:var(--c-accent); color:#1c1c1c !important; font-weight:700; text-decoration:none; padding:12px 24px; border-radius:999px; transition:background .15s ease; }
.hyperlink-btn-orange a:hover{ background:var(--c-accent-600); }
.hyperlink-btn-orange a::before{ content:""; width:9px; height:9px; border-left:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); }
.ruegen-map{ position:relative; max-width:720px; margin:1.5rem auto; }
.ruegen-map img{ display:block; width:100%; height:auto; }
.ruegen-map__pin{ position:absolute; left:var(--x); top:var(--y); width:6%; aspect-ratio:1; min-width:22px; transform:translate(-50%,-50%); border-radius:50%; }
.ruegen-map__pin:hover,.ruegen-map__pin:focus-visible{ outline:3px solid var(--c-accent); outline-offset:0; background:rgba(255,187,5,.25); }

.cards .card__media:has(img[src*="Vorschau"]){aspect-ratio:2/1}
.cards .card__media:has(img[src*="Vorschau"]) img{object-fit:contain}

.kauf-detail{max-width:var(--container,1200px);margin:2rem auto;padding:0 var(--sp-4,24px);box-sizing:border-box}
.kauf-detail .gallery{display:grid;grid-template-columns:2fr 1fr;gap:12px;margin-bottom:1.5rem}
.kauf-detail .gallery .image-big,.kauf-detail .gallery .image-small{overflow:hidden;border-radius:12px}
.kauf-detail .gallery figure{margin:0;height:100%}
.kauf-detail .gallery img{display:block;width:100%;height:100%;object-fit:cover}
.kauf-detail .gallery .image-big{aspect-ratio:3/2}
.kauf-detail .gallery .tile{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:min-content;align-content:start;gap:12px}
.kauf-detail .gallery .image-small{aspect-ratio:3/2}
.kauf-detail .more-images{grid-column:1/-1}
.kauf-detail .more-images .view_images{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.1rem;border:1px solid #e2e8ec;border-radius:999px;background:#fff;cursor:pointer;font-weight:500}
.kauf-detail .more-images__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:12px}
.kauf-detail .more-images__item{overflow:hidden;border-radius:10px;aspect-ratio:3/2}
.kauf-detail .more-images__item figure{margin:0;height:100%}
.kauf-detail .more-images__item img{display:block;width:100%;height:100%;object-fit:cover}
.kauf-detail .teaser .title h1{font-size:1.6rem;line-height:1.25;margin:0 0 1rem}
.kauf-detail .teaser .title .location{display:block;font-size:.9rem;font-weight:400;color:#5b6b75;margin-bottom:.25rem}
.kauf-detail .overview{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-bottom:1.5rem}
.kauf-detail .information-item{list-style:none;margin:0;padding:.9rem 1rem;border:1px solid #e2e8ec;border-radius:12px;background:#fff}
.kauf-detail .information-item li{list-style:none;margin:0;padding:0}
.kauf-detail .information-item .label{font-size:.85rem;color:#5b6b75}
.kauf-detail .information-item .value{font-size:1.15rem;font-weight:500;margin-top:.15rem}
.kauf-detail .description h2,.kauf-detail .features h2,.kauf-detail .ground-plan-images h2,.kauf-detail .location h2{font-size:1.35rem;margin:1.75rem 0 .75rem}
.kauf-detail .description-text h2,.kauf-detail .description-text h3,.kauf-detail .description-text h4{font-size:1.1rem;margin:1.25rem 0 .5rem}
.kauf-detail .description-text p{margin:0 0 .75rem}
.kauf-detail .ground-plan-images ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.kauf-detail .ground-plan-images img{max-width:100%;height:auto;border:1px solid #e2e8ec;border-radius:8px}
.kauf-detail .features-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.kauf-detail .feature .title{font-weight:500;margin-bottom:.35rem}
.kauf-detail .feature-list{margin:0;padding-left:1.1rem}
@media (max-width:768px){.kauf-detail .gallery{grid-template-columns:1fr}.kauf-detail .gallery .tile{grid-template-columns:1fr 1fr}.kauf-detail .teaser .title h1{font-size:1.35rem}}

/* ---------- Header: Button "Anfrage" neben "Jetzt buchen" ---------- */
.site-nav__cta{ white-space:nowrap; }
.site-nav__cta--inquiry{ margin:0; }
@media (min-width:1000px) and (max-width:1179px){
  .site-nav{ gap:.5rem; }
  .site-nav__cta{ padding:10px 16px !important; }
}

/* Off-Canvas: Anfrage-Button am Ende des Menues (die Kopfzeilen-Buttons sind mobil aus) */
.st-oc__actions{ margin-top:1.25rem; }
.st-oc__actions .st-oc__cta{ display:block; box-sizing:border-box; width:100%; padding:.8rem 1.25rem; border-radius:999px; background:var(--c-accent); color:#1c1c1c !important; border:1px solid var(--c-accent); font-weight:700; text-align:center; text-decoration:none; }
.st-oc__actions .st-oc__cta::after{ display:none !important; }
.st-oc__actions .st-oc__cta:hover{ background:var(--c-accent-600); border-color:var(--c-accent-600); }

/* ---------- Seitenmenue: klappbare Untermenues (nur mit Skript, sonst alles sichtbar) ---------- */
.st-oc__nav .mod_navigation{ width:100%; }
.st-oc__nav.is-accordion li.submenu{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; }
.st-oc__nav.is-accordion li.submenu > ul{ grid-column:1 / -1; display:none; }
.st-oc__nav.is-accordion li.submenu.is-open > ul{ display:block; }
.st-oc__toggle{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; margin:0; padding:0; border:0; border-radius:50%; background:transparent; color:var(--c-primary-700,#006c8d); cursor:pointer; }
.st-oc__toggle:hover{ background:var(--c-foam,#eef6f9); }
.st-oc__toggle:focus-visible{ outline:2px solid var(--c-primary-700,#006c8d); outline-offset:-2px; }
.st-oc__toggle svg{ transition:transform .2s ease; }
.st-oc__toggle[aria-expanded="true"] svg{ transform:rotate(180deg); }
@media (prefers-reduced-motion:reduce){ .st-oc__toggle svg{ transition:none; } }

.lb{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease}
.lb[hidden]{display:none}
.lb.is-open{opacity:1}
.lb__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.85)}
.lb__figure{position:relative;margin:0;max-width:92vw;max-height:92vh;display:flex;flex-direction:column;align-items:center}
.lb__img{display:block;max-width:92vw;max-height:80vh;width:auto;height:auto;border-radius:6px;background:#111;opacity:0;transform:scale(.97);transition:opacity .25s ease,transform .25s ease}
.lb__img.is-loaded{opacity:1;transform:none}
.lb__caption{margin-top:.75rem;color:#fff;font-size:.95rem;text-align:center;min-height:1.4em}
.lb__btn{position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;cursor:pointer}
.lb__btn:hover,.lb__btn:focus-visible{background:rgba(255,255,255,.3)}
.lb__close{top:16px;right:16px}
.lb__nav{top:50%;transform:translateY(-50%)}
.lb__prev{left:16px}
.lb__next{right:16px}
.lb--single .lb__nav{display:none}
html.lb-open{overflow:hidden}
@media (max-width:768px){.lb__nav{top:auto;bottom:16px;transform:none}.lb__img{max-height:72vh}}
@media (prefers-reduced-motion:reduce){.lb,.lb__img{transition:none}}

.liste-kaufobjekt{max-width:var(--container,1200px);margin:0 auto 1.5rem;padding:0 var(--sp-4,24px);box-sizing:border-box}
.liste-kaufobjekt .accommodation-inner>div{display:grid;grid-template-columns:minmax(240px,2fr) 3fr minmax(170px,1fr);gap:24px;align-items:stretch;padding:16px;border:1px solid #e2e8ec;border-radius:16px;background:#fff;box-shadow:0 2px 10px rgba(20,40,60,.06)}
.liste-kaufobjekt .images-box,.liste-kaufobjekt .image_container,.liste-kaufobjekt .image_container figure{height:100%;margin:0}
.liste-kaufobjekt .image_container{aspect-ratio:3/2;overflow:hidden;border-radius:12px}
.liste-kaufobjekt .image_container img{display:block;width:100%;height:100%;object-fit:cover}
.liste-kaufobjekt .block2{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.liste-kaufobjekt .location{display:inline-flex;align-items:center;gap:.35rem;font-size:.9rem;color:#5b6b75}
.liste-kaufobjekt h2{font-size:1.3rem;line-height:1.3;margin:0}
.liste-kaufobjekt h2 a{color:inherit;text-decoration:none}
.liste-kaufobjekt h2 a:hover{text-decoration:underline}
.liste-kaufobjekt .property ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:.25rem 0;padding:0}
.liste-kaufobjekt .property li{display:inline-flex;gap:.3rem;padding:.3rem .7rem;border:1px solid #e2e8ec;border-radius:999px;font-size:.9rem;background:#f7f9fa}
.liste-kaufobjekt .property .value{font-weight:500}
.liste-kaufobjekt .description{color:#3d4a52;font-size:.95rem}
.liste-kaufobjekt .description p{margin:0}
.liste-kaufobjekt .block3{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;gap:1rem;text-align:right}
.liste-kaufobjekt .price{display:block;font-size:1.5rem;font-weight:500}
.liste-kaufobjekt .block3 .button{display:inline-flex;align-items:center;justify-content:center;padding:.65rem 1.4rem;border-radius:999px;background:var(--accent,#f2b705);color:#1a1a1a;font-weight:500;text-decoration:none}
@media (max-width:900px){.liste-kaufobjekt .accommodation-inner>div{grid-template-columns:1fr}.liste-kaufobjekt .block3{flex-direction:row;align-items:center;text-align:left}}

.ce_form{max-width:var(--container,1200px);margin:2rem auto;padding:0 var(--sp-4,24px);box-sizing:border-box}
.ce_form>h2{font-size:1.5rem;margin:0 0 1rem}
.ce_form .formbody{padding:24px;border:1px solid #e2e8ec;border-radius:16px;background:#fff;box-shadow:0 2px 10px rgba(20,40,60,.06)}
.ce_form .row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
.ce_form .widget{margin-bottom:1rem}
.ce_form .widget label{display:block;margin-bottom:.35rem;font-size:.9rem;font-weight:400;color:#3d4a52}
.ce_form .widget label span.mandatory{color:#c0392b;margin-left:.2rem}
.ce_form input.text,.ce_form input.captcha,.ce_form select,.ce_form textarea{display:block;width:100%;box-sizing:border-box;height:50px;padding:0 14px;border:1px solid #e2e8ec;border-radius:8px;background:#fff;font:inherit;color:inherit}
.ce_form textarea{height:auto;min-height:140px;padding:12px 14px;resize:vertical}
.ce_form input.text:focus,.ce_form textarea:focus,.ce_form select:focus{outline:2px solid var(--accent,#f2b705);outline-offset:1px;border-color:transparent}
.ce_form .widget-checkbox fieldset{margin:0;padding:0;border:0}
.ce_form .widget-checkbox span{display:flex;align-items:flex-start;gap:.6rem}
.ce_form .widget-checkbox input{margin-top:.25rem;width:18px;height:18px;flex:none}
.ce_form .widget-checkbox label{margin:0}
.ce_form .widget-submit{margin:1.25rem 0 0}
.ce_form .widget-submit button,.ce_form .widget-submit input[type=submit]{display:inline-flex;align-items:center;justify-content:center;padding:.75rem 1.8rem;border:0;border-radius:999px;background:var(--accent,#f2b705);color:#1a1a1a;font:inherit;font-weight:500;cursor:pointer}
.ce_form .widget-submit button:hover{filter:brightness(.96)}
.ce_form .error,.ce_form p.error{color:#c0392b;font-size:.9rem}
@media (max-width:700px){.ce_form .row{grid-template-columns:1fr}.ce_form .formbody{padding:16px}.ce_form .widget-submit button{width:100%}}

#main .content-image{margin:0 auto 1.5rem}
#main .content-image figure{margin:0}
#main .content-image img{display:block;max-width:100%;height:auto;border-radius:8px}

:root{--container:1280px}
.mod_article:has(> .search-box--horizontal)>.search-box--horizontal{grid-column:content-start / content-end;width:100%;max-width:none;box-sizing:border-box;margin-left:0;margin-right:0}
.mod_article:has(> .search-box--horizontal){grid-template-columns:[full-start] minmax(24px,1fr) [content-start] 290px [main-start] minmax(0,calc(var(--container) - 290px - 48px)) [content-end] minmax(24px,1fr) [full-end]}
.mod_article:has(> .search-box--horizontal)>.search-box--horizontal{padding-left:0;padding-right:0}
.search-box--left{padding-left:0;padding-right:0}
.page-header__crumb nav{padding-left:0;padding-right:0}
.utility-bar__inner{padding-left:var(--sp-6,24px);padding-right:var(--sp-6,24px);box-sizing:border-box}
.search-box--horizontal .horizontal_filter .widget-submit{margin:0 0 16px}
.search-box--horizontal .horizontal_filter .widget-submit button{height:50px;box-sizing:border-box}
.search-box--horizontal .horizontal_filter .widget-text > label{margin-bottom:0 !important}
#main #article-1000196 > .content-youtube{width:min(calc(var(--container,1200px) - 2 * var(--sp-6,24px)),calc(100% - 2 * var(--sp-6,24px)));max-width:none;margin-left:max(var(--sp-6,24px),calc((100% - var(--container,1200px)) / 2 + var(--sp-6,24px)));margin-right:auto;padding:var(--sp-6,24px);box-sizing:border-box}
.youtube-box-2 .video_container{margin:0}
.youtube-box-2 iframe{display:block;width:100%;height:auto;aspect-ratio:16/9;border:0;border-radius:8px}
#main .mod_article > .content-text,
#main .mod_article > .content-headline,
#main .mod_article > .content-image,
#main .mod_article > .content-gallery,
#main .mod_article > .ce_gallery,
#main .mod_article > .content-youtube,
#main .mod_article > .content-player,
#main .mod_article > .content-hyperlink,
#main .mod_article > .content-list,
#main .mod_article > .content-table,
#main .mod_article > .content-download,
#main .mod_article > .content-accordion,
#main .mod_article > .content-code{padding-inline:var(--sp-6,24px)}
#article-1000196 > .content-image img{width:100%;height:auto}
.accommodation-card,.accommodation-row{position:relative}
.accommodation-card__cta,.accommodation-row__cta{position:static}
.accommodation-card__cta::after,.accommodation-row__cta::after{content:"";position:absolute;inset:0;z-index:1}
.accommodation-card:hover,.accommodation-row:hover{cursor:pointer}
.accommodation-card__fav{position:absolute;z-index:2}
.liste-kaufobjekt .accommodation-inner>div{position:relative}
.liste-kaufobjekt .block3 .button::after{content:"";position:absolute;inset:0;z-index:1}
.liste-kaufobjekt .accommodation-inner>div:hover{cursor:pointer}
main:has([class*="accommodation-detail__"]){padding-bottom:var(--sp-12,64px)}
#main .mod_article > hr{width:calc(100% - 48px);max-width:calc(var(--container,1200px) - 48px);margin:var(--sp-8,2rem) auto;border:0;border-top:1px solid #e2e8ec}
.section--sand .usp__icon{background:#fff;color:#1b6b87;box-shadow:0 1px 6px rgba(20,60,80,.18)}
.section--sand .usp__icon svg{stroke:#1b6b87}
.accommodation-list .accommodation-card:hover,.accommodation-list .accommodation-row:hover,.liste-kaufobjekt .accommodation-inner>div:hover{transform:none}
.accommodation-detail__ground-plan-item img{cursor:zoom-in}
.list-empty{grid-column:1 / -1;display:flex;flex-direction:column;align-items:center;gap:.5rem;box-sizing:border-box;width:100%;max-width:640px;margin:2rem auto;padding:3rem 1.5rem;border:1px solid #e2e8ec;border-radius:16px;background:#fff;box-shadow:0 2px 10px rgba(20,40,60,.06);text-align:center}
.list-empty__icon{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;margin-bottom:.5rem;border-radius:50%;background:#eef5f8;color:#1b6b87}
.list-empty__title{margin:0;font-size:1.35rem;line-height:1.3}
.list-empty__text{margin:0;max-width:34em;color:#5b6b75}

/* Startseite: Suchleiste mit einer Karte statt zwei ineinander */
.ce_form.horizontal_filter{ padding:20px 24px; }
.ce_form.horizontal_filter .formbody{ background:transparent; border:0; box-shadow:none; border-radius:0; padding:0; }