/* ============================================================
   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; }

/* 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(1120px,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 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 button:hover,
#article-1000301 .horizontal_filter input[type="submit"]:hover{ background:var(--c-accent-600) !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:1160px; margin-inline:auto; padding-inline:1rem; 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; }