/* ============================================================
   MyCMS · Frontend-Stylesheet  (assets/style.css)
   Neu aufgebaut 2026-08-02 (Original ging verloren, kein Backup).
   Design-Tokens aus WORKLOG: Schrift „Trueno", Akzent #B51414,
   Flächen #D3D3CB. Deckt Navigation, Hero, Blöcke, Bilder,
   Lightbox, Fotostapel-Grundlayout und Weinkatalog ab.
   ============================================================ */

/* ---------- Schrift: Trueno ---------- */
@font-face{font-family:'Trueno';font-weight:200;font-style:normal;font-display:swap;
  src:url('/assets/fonts/Trueno/TTFs/truenoultlt.ttf') format('truetype');}
@font-face{font-family:'Trueno';font-weight:300;font-style:normal;font-display:swap;
  src:url('/assets/fonts/Trueno/WOFF2/truenolt.woff2') format('woff2'),
      url('/assets/fonts/Trueno/WOFF/truenolt.woff') format('woff'),
      url('/assets/fonts/Trueno/TTFs/truenolt.ttf') format('truetype');}
@font-face{font-family:'Trueno';font-weight:400;font-style:normal;font-display:swap;
  src:url('/assets/fonts/Trueno/WOFF2/truenorg.woff2') format('woff2'),
      url('/assets/fonts/Trueno/WOFF/truenorg.woff') format('woff'),
      url('/assets/fonts/Trueno/TTFs/truenorg.ttf') format('truetype');}
@font-face{font-family:'Trueno';font-weight:400;font-style:italic;font-display:swap;
  src:url('/assets/fonts/Trueno/WOFF2/truenorgit.woff2') format('woff2'),
      url('/assets/fonts/Trueno/WOFF/truenorgit.woff') format('woff'),
      url('/assets/fonts/Trueno/TTFs/truenorgit.ttf') format('truetype');}
@font-face{font-family:'Trueno';font-weight:600;font-style:normal;font-display:swap;
  src:url('/assets/fonts/Trueno/WOFF2/truenosbd.woff2') format('woff2'),
      url('/assets/fonts/Trueno/WOFF/truenosbd.woff') format('woff'),
      url('/assets/fonts/Trueno/TTFs/truenosbd.ttf') format('truetype');}
@font-face{font-family:'Trueno';font-weight:700;font-style:normal;font-display:swap;
  src:url('/assets/fonts/Trueno/WOFF2/truenobd.woff2') format('woff2'),
      url('/assets/fonts/Trueno/WOFF/truenobd.woff') format('woff'),
      url('/assets/fonts/Trueno/TTFs/truenobd.ttf') format('truetype');}

/* ---------- Design-Tokens ---------- */
:root{
  --color-bg:        #ffffff;
  --color-nav-bg:    transparent;
  --color-footer-bg: transparent;
  --color-surface:   #F6F6F5;
  --color-text:      #373A3C;
  --color-head:      rgba(0,0,0,.6);
  --color-muted:     rgba(0,0,0,.42);
  --color-border:    #cbcbc6;
  --color-accent:    #B51414;
  --color-accent-dk: #8d0f0f;
  --max-width:       1180px;
  --font-head:       'Trueno', 'Helvetica Neue', Arial, sans-serif;
  --font-body:       'Trueno', 'Helvetica Neue', Arial, sans-serif;
  --nav-h:           62px;
}

/* ---------- Reset / Basis ---------- */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-body);
  font-weight:300;
  font-size:14px;
  color:var(--color-text);
  background:var(--color-bg);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{font-family:var(--font-head);font-weight:600;line-height:1.3;margin:0 0 .5em;}
h1{text-transform:uppercase;font-size:24px;line-height:1.6;color:var(--color-head);}
p{margin:0 0 1em;}

/* ============================================================
   NAVIGATION
   ============================================================ */
.site-nav{
  background:var(--color-nav-bg);
  position:sticky;top:0;z-index:200;
}
.nav-inner{
  max-width:var(--max-width);margin:0 auto;
  min-height:var(--nav-h);
  display:flex;align-items:center;gap:24px;
  padding:0 24px;position:relative;
}
.nav-links{
  list-style:none;margin:0;padding:0;
  display:flex;align-items:center;gap:26px;flex:1;
}
.nav-links > li{position:relative;}
.nav-links a{
  font-family:var(--font-head);font-weight:600;font-size:12px;letter-spacing:normal;text-transform:uppercase;
  color:rgba(0,0,0,.6);padding:6px 0;display:inline-block;transition:color .2s;
}
.nav-links a:hover,.nav-links a.active{color:rgba(0,0,0,.9);}
.nav-links li.has-children > a::after{content:" ▾";font-size:.7em;opacity:.5;}

.sub-nav{
  list-style:none;margin:0;padding:0;
  position:absolute;top:100%;left:0;min-width:190px;
  background:var(--color-nav-bg);
  display:none;z-index:210;box-shadow:0 8px 22px rgba(0,0,0,.12);
}
.nav-links li.has-children:hover > .sub-nav{display:block;}
.sub-nav li.has-children:hover > .sub-nav{display:block;}
.sub-nav .sub-nav{top:0;left:100%;}                 /* verschachtelte Menüs fliegen zur Seite auf */
.sub-nav li{position:relative;display:block;}
.sub-nav li.has-children > a::after{content:" \203A";opacity:.5;float:right;margin-left:10px;}
.sub-nav a{display:block;padding:5px 5px 5px 7px;letter-spacing:.08em;}

.wine-nav-item{font-size:1rem !important;filter:grayscale(1);opacity:.75;transition:filter .2s,opacity .2s;}
.wine-nav-item:hover,.wine-nav-item.active{filter:none;opacity:1;}
.admin-nav-item{font-size:.7rem !important;opacity:.5;}
.admin-nav-item:hover{opacity:1;}

.lang-switch{display:flex;gap:6px;align-items:center;font-size:.78rem;letter-spacing:.1em;}
.lang-switch a{padding:4px 6px;color:var(--color-muted);}
.lang-switch a.active{color:var(--color-text);font-weight:700;}

/* Desktop: Menü mittig, Sprachumschalter rechts fixiert */
@media (min-width:901px){
  .nav-links{justify-content:center;}
  .lang-switch{position:absolute;right:24px;top:50%;transform:translateY(-50%);}
}

/* Hamburger */
.nav-toggle{
  display:none;background:none;border:0;cursor:pointer;
  width:34px;height:30px;padding:5px;position:relative;z-index:220;
}
.nav-toggle span{
  display:block;height:2px;width:100%;background:var(--color-text);
  border-radius:2px;transition:transform .3s,opacity .3s;margin:5px 0;
}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ============================================================
   HERO
   ============================================================ */
/* Entwurf-Hinweis (nur für angemeldete Admins bei unveröffentlichten Seiten) */
.draft-banner{position:sticky;top:0;z-index:9999;background:#b8860b;color:#fff;
  padding:9px 16px;font-size:14px;line-height:1.4;text-align:center;
  box-shadow:0 2px 8px rgba(0,0,0,.25);}
.draft-banner a{color:#fff;text-decoration:underline;margin-left:8px;white-space:nowrap;}
body.has-hero{background:var(--color-bg);}
.hero-fullscreen{
  position:relative;width:100%;overflow:hidden;
  display:flex;flex-direction:column;
}
.hero-carousel{position:absolute;inset:0;z-index:0;}
/* Parallax: Bildebene bekommt Spielraum nach oben/unten, JS verschiebt sie
   langsamer als der Scroll. Overflow des Hero kappt die Ränder → lückenlos. */
.hero-parallax .hero-carousel{top:-24%;height:148%;will-change:transform;}
@media (prefers-reduced-motion: reduce){
  .hero-parallax .hero-carousel{top:0;height:100%;transform:none !important;}
}
.hero-slide{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;animation-timing-function:ease-in-out;animation-iteration-count:infinite;
}
.hero-slide-static{opacity:1;animation:none;}
.hero-carousel.bw .hero-slide{filter:grayscale(1);transition:filter .6s ease;}
.hero-fullscreen:hover .hero-carousel.bw .hero-slide{filter:none;}
.hero-nav{
  position:relative;z-index:3;background:var(--color-nav-bg);border-bottom:0;
}
/* Milchglas nur bei Bild-Hero (Lesbarkeit über Fotos); Farb-Hero bleibt transparent */
.has-hero-image .hero-nav{
  background:rgba(255,255,255,.4);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}

.hero-center{
  position:relative;z-index:2;margin:auto;padding:40px 24px;max-width:var(--max-width);width:100%;
}
.hero-center h1{
  font-size:24px;font-weight:600;text-transform:uppercase;color:inherit;margin:0;
  text-shadow:0 2px 10px rgba(0,0,0,.22);
}
.hero-center .subheadline{
  font-size:1rem;font-weight:300;margin-top:12px;
  text-shadow:0 1px 6px rgba(0,0,0,.25);
}
.hero-center .quote-source{margin-top:10px;font-size:13px;font-weight:300;font-style:normal;opacity:.85;}
.hero-content-image{margin-top:24px;}
.hero-content-image img{filter:grayscale(100%);transition:filter .5s;cursor:zoom-in;}
.hero-content-image:hover img,.hero-content-image.always-color img{filter:none;}
.hero-footer{
  position:relative;z-index:2;margin-top:auto;padding:16px 24px;
  text-align:center;color:var(--color-muted);font-size:.72rem;letter-spacing:.2em;
  background:var(--color-nav-bg);
}
.has-hero-image .hero-footer{
  color:rgba(0,0,0,.6);
  background:rgba(255,255,255,.4);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}

/* ============================================================
   HAUPTINHALT / BLÖCKE
   ============================================================ */
.site-main{max-width:var(--max-width);margin:0 auto;padding:40px 24px 64px;}
.page-title-bar{margin-bottom:28px;}
.page-title-bar h1{font-size:24px;font-weight:600;text-transform:uppercase;color:var(--color-head);}
.page-title-bar .subheadline{font-size:14px;font-weight:300;color:var(--color-muted);}
.page-title-bar .quote-source{font-style:normal;font-weight:300;font-size:13px;color:var(--color-muted);}

.page-blocks{display:flex;flex-direction:column;gap:8px;}
.cms-block{width:100%;}
.block-grid{
  display:grid;gap:20px;max-width:var(--max-width);margin:0 auto;align-items:start;
}
.block-grid.cols-1{grid-template-columns:1fr;}
.block-grid.cols-2{grid-template-columns:1fr 1fr;}
.block-grid.cols-3{grid-template-columns:1fr 1fr 1fr;}
.block-grid.layout-2-1{grid-template-columns:2fr 1fr;}
.block-grid.layout-1-2{grid-template-columns:1fr 2fr;}
.block-grid.layout-60-40{grid-template-columns:60fr 40fr;}
.block-grid.layout-40-60{grid-template-columns:40fr 60fr;}
.block-grid.layout-70-30{grid-template-columns:70fr 30fr;}
.block-grid.layout-30-70{grid-template-columns:30fr 70fr;}
/* Bild+Text: Bildspalte = Bildbreite, Text bekommt den Rest (bündig + 20px Abstand) */
.block-grid.imgcol-first{grid-template-columns:max-content 1fr;}
.block-grid.imgcol-last{grid-template-columns:1fr max-content;}

.text-cell h2{font-size:1.4rem;font-weight:600;margin-bottom:.4em;}
.text-cell .quote-source{font-style:normal;font-weight:300;font-size:13px;color:var(--color-muted);margin-top:.6em;}
.text-cell a{color:var(--color-accent);text-decoration:underline;text-underline-offset:2px;}
.text-cell a:hover{color:var(--color-accent-dk);}

.image-cell{display:flex;justify-content:center;}
.image-cell img{filter:grayscale(100%);transition:filter .5s;cursor:zoom-in;object-fit:cover;}
.image-cell:hover img,.image-cell.always-color img{filter:none;}
/* In mehrspaltigen Blöcken Bilder bündig zur äußeren Seitenkante ausrichten */
/* Horizontale Position des Bildes in seiner Spalte (responsive, ohne Padding) */
.image-cell.halign-left{justify-content:flex-start;}
.image-cell.halign-center{justify-content:center;}
.image-cell.halign-right{justify-content:flex-end;}
/* Vertikale Position des Bildes in der Spalte: oben (an Headline) oder mittig */
.image-cell.valign-top{align-self:start;}
.image-cell.valign-center{align-self:center;}
/* Bildunterschrift (Caption) unter Einzelbildern – auf Bildbreite begrenzt */
.img-figure{margin:0;width:fit-content;max-width:100%;}
.img-figure img{display:block;}
.img-figure .img-link{display:block;width:fit-content;max-width:100%;}
.img-caption{width:0;min-width:100%;box-sizing:border-box;margin-top:.55em;font-size:.82rem;line-height:1.4;color:var(--color-text);}
.img-caption a{color:var(--color-accent);text-decoration:underline;text-underline-offset:2px;}
/* Galerie (Mosaik) */
.gallery-title{max-width:var(--max-width);margin:0 auto .6em;}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:var(--max-width);margin:0 auto;}
.gallery-grid.bw .gallery-cell img{filter:grayscale(1);}
.gallery-grid.bw .gallery-cell:hover img{filter:none;}
.gallery-cell{grid-column:var(--c) / span var(--w);grid-row:var(--r) / span var(--h);overflow:hidden;background:#e7e4de;}
.gallery-cell img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in;}
.gallery-cell.gallery-text{display:flex;align-items:flex-start;justify-content:flex-start;text-align:left;padding:8px;background:#e7e4de;}
.gallery-text-inner{font-size:16px;line-height:1.4;overflow-wrap:break-word;word-break:break-word;max-width:100%;}
.gallery-text-inner a{color:inherit;text-decoration:underline;text-underline-offset:2px;}
@media (max-width:640px){
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .gallery-cell{grid-column:auto / span 1 !important;grid-row:auto !important;}
}

.video-cell{display:flex;justify-content:center;flex-direction:column;}
.video-cell video{width:100%;background:#000;border-radius:2px;}
.video-embed{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:2px;overflow:hidden;}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* ---------- Lightbox (per JS erzeugt) ---------- */
.lightbox-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:1000;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.lightbox-overlay.active{opacity:1;pointer-events:auto;}
.lightbox-overlay img{max-width:90vw;max-height:90vh;box-shadow:0 10px 40px rgba(0,0,0,.5);}
.lightbox-close{
  position:absolute;top:18px;right:28px;color:#fff;font-size:2.4rem;line-height:1;cursor:pointer;
}

/* ============================================================
   WEINKATALOG
   ============================================================ */
.wine-page{max-width:var(--max-width);margin:0 auto;}
.wine-filters{
  display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:16px;
}
.wine-filters input[type="text"],.wine-filters select{
  font-family:var(--font-body);font-size:.95rem;padding:10px 14px;
  border:1px solid var(--color-border);background:#fff;border-radius:4px;color:var(--color-text);
}
.wine-filters input[type="text"]{flex:1;min-width:220px;}
.wine-filters button{
  font-family:var(--font-body);font-size:.85rem;letter-spacing:.06em;
  padding:10px 22px;border:0;border-radius:4px;background:var(--color-accent);color:#fff;cursor:pointer;
  transition:background .2s;
}
.wine-filters button:hover{background:var(--color-accent-dk);}
.wine-reset{font-size:.85rem;color:var(--color-muted);text-decoration:underline;}
.wine-count{font-size:.85rem;color:var(--color-muted);margin-bottom:20px;letter-spacing:.03em;}
.wine-empty{color:var(--color-muted);text-align:center;padding:60px 0;}

.wine-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;
}
.wine-card{
  display:flex;flex-direction:column;background:var(--color-surface);
  border:1px solid #000;border-radius:4px;overflow:hidden;
  box-shadow:0 5px 15px rgba(0,0,0,.12);
}
.wine-card-image{background:#efefec;display:flex;align-items:center;justify-content:center;padding:18px;}
.wine-card-image img{max-height:320px;width:auto;cursor:zoom-in;}
.wine-card-placeholder{font-size:3.5rem;opacity:.35;padding:40px 0;}
.wine-card-body{padding:16px 18px 20px;position:relative;}
.wine-card-body::before{
  content:"";position:absolute;left:10px;top:0;width:2px;height:calc(100% - 20px);background:#A9A9A2;
}
.wine-card-name{font-size:1.35rem;font-weight:600;margin:0 0 2px;}
.wine-card-producer{font-size:.9rem;color:var(--color-muted);margin-bottom:6px;}
.wine-card-rating{color:var(--color-accent);letter-spacing:2px;margin-bottom:6px;font-size:1rem;}
.wine-card-rating .star{opacity:.28;}
.wine-card-rating .star.filled{opacity:1;}
.wine-card-meta{font-size:.85rem;color:var(--color-text);margin-bottom:4px;letter-spacing:.02em;}
.wine-card-origin{font-size:.85rem;color:var(--color-muted);margin-bottom:8px;}
.wine-card-website{font-size:.82rem;margin-bottom:8px;}
.wine-card-website a{color:var(--color-accent);}
.wine-card-website a:hover{text-decoration:underline;}
.wine-card-price{font-size:1.15rem;font-weight:700;margin:8px 0;}
.wine-card-description{font-size:.9rem;color:var(--color-text);}
.wine-card-notes{margin-top:10px;border-top:1px solid var(--color-border);padding-top:10px;}
.wine-card-notes-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--color-muted);margin-bottom:4px;}
.wine-card-notes p{font-size:.88rem;font-style:italic;margin:0;color:var(--color-text);}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  background:var(--color-footer-bg);
  text-align:center;padding:26px 24px;
}
.site-footer p{margin:0;font-size:.72rem;letter-spacing:.2em;color:var(--color-muted);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .nav-toggle{display:block;}
  .nav-inner{flex-wrap:wrap;}
  .nav-links{
    display:none;flex-direction:column;align-items:flex-start;gap:0;
    flex-basis:100%;order:3;padding:8px 0 12px;
  }
  .nav-inner.open .nav-links{display:flex;}
  .nav-links > li{width:100%;border-top:1px solid var(--color-border);}
  .nav-links a{display:block;padding:12px 4px;width:100%;}
  .sub-nav{position:static;display:none;border:0;box-shadow:none;padding:0 0 6px 14px;min-width:0;background:transparent;}
  .sub-nav .sub-nav{left:0;}
  .nav-links li.has-children.sub-open > .sub-nav,
  .sub-nav li.has-children.sub-open > .sub-nav{display:block;}
  .nav-links li.has-children:hover > .sub-nav,
  .sub-nav li.has-children:hover > .sub-nav{display:none;}
  .lang-switch{margin-left:auto;}
  .nav-inner.open .nav-links{background:var(--color-bg);padding-left:12px;padding-right:12px;}
}
@media (max-width:768px){
  .block-grid.cols-2,.block-grid.cols-3,
  .block-grid.layout-2-1,.block-grid.layout-1-2,
  .block-grid.layout-60-40,.block-grid.layout-40-60,
  .block-grid.layout-70-30,.block-grid.layout-30-70{grid-template-columns:1fr;}
}
@media (max-width:480px){
  .wine-grid{grid-template-columns:1fr;}
  .site-main{padding:28px 16px 48px;}
}

/* ============================================================
   DARK MODE — automatisch nach System-Einstellung des Besuchers
   (prefers-color-scheme: dark). Fotos bleiben unverändert;
   dunkel werden Flächen, Text, Navigation, Footer, leere Kacheln.
   Wichtig: Blöcke/Kacheln mit einer im Editor FEST gewählten Farbe
   behalten diese (bewusste Design-Entscheidung).
   ============================================================ */
@media (prefers-color-scheme: dark){
  :root{
    --color-bg:        #16171b;
    --color-surface:   #212227;
    --color-text:      #dadade;
    --color-head:      rgba(255,255,255,.74);
    --color-muted:     rgba(255,255,255,.46);
    --color-border:    #33343a;
  }

  /* Milchglas-Nav/Footer über Fotos: dunkel statt weiß */
  .has-hero-image .hero-nav,
  .has-hero-image .hero-footer{
    background:rgba(18,19,23,.45);
  }

  /* Farb-Hero (z.B. Startseite): weisser Hintergrund steht INLINE am Element
     und wird sonst nicht dunkel - hier gezielt ueberschreiben. */
  body.has-hero-color .hero-fullscreen{ background-color:var(--color-bg) !important; }
  body.has-hero-color .hero-center,
  body.has-hero-color .hero-center h1,
  body.has-hero-color .hero-center .subheadline,
  body.has-hero-color .hero-center .quote-source{ color:var(--color-text) !important; }

  /* Navigation im Dark Mode: weisse Menueschrift */
  .nav-links a{ color:rgba(255,255,255,.9); }
  .nav-links a:hover,
  .nav-links a.active{ color:#ffffff; }

  /* Leere Bild-Kacheln der Galerie (Text-Kacheln bleiben bewusst helle Karten) */
  .gallery-cell{ background:#25262b; }

  /* Weinkatalog */
  .wine-filters input[type="text"],
  .wine-filters select{ background:#212227; color:var(--color-text); }
  .wine-card{ border-color:var(--color-border); }
  .wine-card-image{ background:#1c1d21; }

  /* Standard-Textblöcke lesbar halten: dunkler Inline-Text wird hell.
     (Eine im Editor bewusst gesetzte Textfarbe wird dabei mit überschrieben.) */
  .text-cell,
  .text-cell h2,
  .text-cell h3,
  .text-cell p,
  .text-cell div{ color:var(--color-text) !important; }
}

/* ============================================================
   Floating-Textblock auf Hero-Seiten (Liquid Glass)
   Breite 450 px, Höhe nach Inhalt, 30 px Innenabstand, runde Ecken.
   --glass-a = Deckkraft des Glases (0 … .9), im Admin einstellbar.
   ============================================================ */
.hero-float{
  --glass-a:.35;
  width:450px; max-width:calc(100% - 32px); box-sizing:border-box;
  padding:30px; border-radius:28px; z-index:2;
  --glass-blur:22px;
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(160%);
  backdrop-filter:blur(var(--glass-blur)) saturate(160%);
  border:1px solid rgba(255,255,255,.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),      /* Lichtkante oben */
    inset 0 -1px 0 rgba(255,255,255,.12),
    0 18px 50px rgba(0,0,0,.22);
  position:relative; overflow:hidden;
}
/* weicher Glanz-Verlauf wie bei Glas */
.hero-float::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  /* Glanz skaliert mit der Deckkraft – bei sehr transparentem Glas nur ein Hauch */
  opacity:clamp(.12, calc(var(--glass-a) * 2.2), 1);
  background:linear-gradient(135deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,.06) 38%, rgba(255,255,255,0) 60%, rgba(255,255,255,.10) 100%);
}
.hero-float.tone-light{ background:rgba(255,255,255,var(--glass-a)); color:#141414; }
.hero-float.tone-dark { background:rgba(18,19,23,var(--glass-a)); color:#fff; border-color:rgba(255,255,255,.22); }
.hero-float.tone-dark .hero-float-inner{ text-shadow:0 1px 2px rgba(0,0,0,.25); }
.hero-float-inner{ position:relative; }
.hero-float h2{ margin:0 0 12px; font-size:22px; line-height:1.25; font-weight:700; color:inherit; }
.hero-float-text{ font-size:15px; line-height:1.6; font-weight:300; color:inherit; }

/* Desktop: schwebt im Hero, scrollt mit ihm */
.hero-float-desktop{ position:absolute; will-change:translate; }
.hero-float-desktop.pos-top-left,
.hero-float-desktop.pos-top-center,
.hero-float-desktop.pos-top-right{ top:110px; }
.hero-float-desktop.pos-bottom-left,
.hero-float-desktop.pos-bottom-center,
.hero-float-desktop.pos-bottom-right{ bottom:40px; }
.hero-float-desktop.pos-middle-left,
.hero-float-desktop.pos-middle-center,
.hero-float-desktop.pos-middle-right{ top:50%; transform:translateY(-50%); }
.hero-float-desktop[class*="-left"] { left:40px; }
.hero-float-desktop[class*="-right"]{ right:40px; }
.hero-float-desktop[class*="-center"]{ left:50%; transform:translateX(-50%); }
.hero-float-desktop.pos-middle-center{ transform:translate(-50%,-50%); }
.hero-float-mobile{ display:none; }

/* Handy / schmal: unter dem Hero als Glas-Karte */
@media (max-width:700px){
  .hero-float-desktop{ display:none; }
  .hero-float-mobile{ display:block; margin:16px auto; }
  /* unter dem Hero gibt es kein Foto zum Durchscheinen -> deckender, damit es lesbar bleibt */
  .hero-float-mobile.tone-light{ background:rgba(255,255,255,max(var(--glass-a), .85)); }
  .hero-float-mobile.tone-dark { background:rgba(18,19,23,max(var(--glass-a), .88)); }
}
/* Browser ohne backdrop-filter: etwas deckender, damit Text lesbar bleibt */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hero-float.tone-light{ background:rgba(255,255,255,max(var(--glass-a), .8)); }
  .hero-float.tone-dark { background:rgba(18,19,23,max(var(--glass-a), .8)); }
}
/* Dark Mode: Floating-Block behält seine eigenen Farben */
@media (prefers-color-scheme: dark){
  .hero-float.tone-light, .hero-float.tone-light h2, .hero-float.tone-light .hero-float-text{ color:#141414 !important; }
}

/* ============================================================
   Hero als Seitenhintergrund (pro Seite schaltbar)
   Bild/Farbe liegt fest hinter der ganzen Seite, Inhalt und Footer scrollen darüber.
   ============================================================ */
.page-bg{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.page-bg .hero-carousel{ position:absolute; left:0; right:0; top:0; height:100%; }
.page-bg-parallax .hero-carousel{ height:130%; will-change:transform; }
body.hero-fullpage{ background:var(--color-bg); }
body.hero-fullpage .hero-fullscreen,
body.hero-fullpage .site-main,
body.hero-fullpage .site-footer,
body.hero-fullpage .hero-float-mobile,
body.hero-fullpage .draft-banner{ position:relative; z-index:1; }
body.hero-fullpage .hero-fullscreen{ background:transparent; }
body.hero-fullpage .site-main{ background:transparent; }
/* Footer transparent, Schrift hell mit leichtem Schatten (lesbar auf Fotos) */
body.hero-fullpage .site-footer,
body.hero-fullpage .hero-footer{ background:transparent !important; backdrop-filter:none; -webkit-backdrop-filter:none; }
body.hero-fullpage.has-hero-image .site-footer p,
body.hero-fullpage.has-hero-image .hero-footer{ color:rgba(255,255,255,.9) !important; text-shadow:0 1px 3px rgba(0,0,0,.55); }
/* S/W-Hero: farbig, solange die Maus über dem Hero-Bereich ist */
.page-bg:has(~ .hero-fullscreen:hover) .hero-carousel.bw .hero-slide{ filter:none; }
@media (prefers-reduced-motion: reduce){
  .page-bg-parallax .hero-carousel{ height:100%; transform:none !important; }
}
@media (prefers-color-scheme: dark){
  body.hero-fullpage.has-hero-color .page-bg{ background-color:var(--color-bg) !important; }
}

/* Abstand-Block: leer, immer transparent; auf dem Handy halb so hoch */
.cms-spacer{ height:var(--sp, 80px); background:transparent !important; display:flex; flex-direction:column; justify-content:center; }
.cms-spacer-line{ width:100%; height:0; }
.cms-spacer-line.full{ width:100vw; margin-left:calc(50% - 50vw); }
html{ overflow-x:clip; }
@media (max-width:700px){ .cms-spacer{ height:calc(var(--sp, 80px) / 2); } }

/* Bildausschnitt (Zoom) bei Einzelbildern: der Rahmen kappt das vergrößerte Bild */
.img-crop{ display:block; overflow:hidden; max-width:100%; }
.img-crop img{ height:100%; }

/* Floating-Textblock: eigene Textfarbe (gilt auch im Dark Mode) */
.hero-float.has-color, .hero-float.has-color h2, .hero-float.has-color .hero-float-text{ color:var(--float-color) !important; }
.hero-float-text a, .hero-float h2 a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }

/* ── Beiträge (Blog-Block, Archiv, Beitragskopf) ─────────────── */
.post-meta{font-size:13px;color:var(--color-muted);letter-spacing:.02em;}
.post-meta-top{width:100%;max-width:var(--max-width);margin:0 auto 4px;}
.post-list-block,.post-archive{width:100%;max-width:var(--max-width);margin:0 auto;}
.post-grid{display:grid;gap:28px;}
.post-grid.cols-1{grid-template-columns:1fr;}
.post-grid.cols-2{grid-template-columns:repeat(2,1fr);}
.post-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.post-grid.cols-1 .post-card{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:24px;align-items:center;}
.post-card{display:block;color:inherit;text-decoration:none;}
.post-card-img{aspect-ratio:3/2;overflow:hidden;background:#e6e3dd;}
.post-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease;}
.post-card:hover .post-card-img img{transform:scale(1.03);}
.post-card-body{padding-top:12px;}
.post-card h3{font-size:1.15rem;font-weight:600;margin:4px 0 6px;line-height:1.3;}
.post-card p{font-size:15px;line-height:1.5;margin:0;color:var(--color-text);}
.post-card:hover h3{text-decoration:underline;text-underline-offset:3px;}
.post-more{margin-top:20px;text-align:right;}
.post-more a,.post-nav a{color:var(--color-accent);text-decoration:none;}
.post-more a:hover,.post-nav a:hover{text-decoration:underline;}
.post-empty{color:var(--color-muted);}
.post-filter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px;}
.post-filter button{font:inherit;font-size:14px;border:1px solid currentColor;background:transparent;color:inherit;border-radius:999px;padding:5px 14px;cursor:pointer;opacity:.6;}
.post-filter button.on{opacity:1;background:var(--color-text);color:var(--color-bg);border-color:var(--color-text);}
.archive-year{margin-bottom:28px;}
.archive-year h2{font-size:1.3rem;font-weight:600;margin:0 0 8px;}
.archive-year ul{list-style:none;margin:0;padding:0;}
.archive-year li a{display:grid;grid-template-columns:150px 1fr auto;gap:16px;padding:10px 0;border-top:1px solid rgba(0,0,0,.12);color:inherit;text-decoration:none;}
.archive-year li a:hover .archive-title{text-decoration:underline;}
.archive-date,.archive-cat{font-size:14px;color:var(--color-muted);}
.post-nav{width:100%;max-width:var(--max-width);margin:48px auto 0;padding-top:20px;border-top:1px solid rgba(0,0,0,.12);display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:start;}
.post-nav small{display:block;font-size:12px;color:var(--color-muted);}
.post-nav-next{text-align:right;}
.post-nav-all{font-size:14px;padding-top:2px;}
@media (max-width:900px){ .post-grid.cols-3{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){
  .post-grid.cols-2,.post-grid.cols-3{grid-template-columns:1fr;}
  .post-grid.cols-1 .post-card{grid-template-columns:1fr;gap:0;}
  .archive-year li a{grid-template-columns:1fr;gap:2px;}
  .post-nav{grid-template-columns:1fr 1fr;}
  .post-nav-all{grid-column:1 / -1;order:3;text-align:center;}
}

/* ── Block „Kacheln" (3×2 oder 2×2, Handy untereinander) ────── */
.tiles-grid{display:grid;grid-template-columns:repeat(var(--tc,3),minmax(0,1fr));gap:var(--tg,0px);max-width:var(--max-width);margin:0 auto;}
.tile{position:relative;height:var(--th,360px);overflow:hidden;display:flex;align-items:center;}
.tile-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.tile img.tile-media{cursor:zoom-in;}
.tile-embed{position:absolute;top:50%;left:50%;width:max(100%, calc(var(--th,360px) * 1.7778));height:max(100%, calc(100% * .5625));aspect-ratio:16/9;transform:translate(-50%,-50%);border:0;pointer-events:none;}
.tile-text{position:relative;width:100%;max-width:300px;}
.tile.align-left{justify-content:flex-start;padding-left:30px;padding-right:30px;}
.tile.align-right{justify-content:flex-end;padding-left:30px;padding-right:30px;}
.tile.align-right .tile-text{text-align:right;}
.tile.align-center{justify-content:center;padding:0 30px;}
.tile.align-center .tile-text{text-align:center;}
.tile-text h3{font-size:1.35rem;font-weight:600;line-height:1.25;margin:0 0 .5em;}
.tile-copy{font-size:16px;line-height:1.5;}
.tile-copy a{color:inherit;text-decoration:underline;text-underline-offset:2px;}
@media (max-width:700px){
  .tiles-grid{grid-template-columns:1fr;}
}

/* ---------- Scroll-Verhalten je Zelle (Kleben / Hereinlaufen) ---------- */
@media (min-width:769px){
  .block-grid > .mo-sticky{position:sticky;top:calc(var(--nav-h, 0px) + var(--mp, 15) * 1vh);align-self:start;z-index:1;}
}
/* Hereinlaufen: wird erst versteckt, wenn motion.js läuft (ohne JS bleibt alles sichtbar) */
.mo-in{transition:opacity var(--md, .9s) ease-out, transform var(--md, .9s) cubic-bezier(.2,.7,.2,1);}
.mo-in.mo-wait:not(.mo-shown){opacity:0;}
.mo-in.mo-up.mo-wait:not(.mo-shown){transform:translate3d(0,70px,0);}
.mo-in.mo-left.mo-wait:not(.mo-shown){transform:translate3d(-90px,0,0);}
.mo-in.mo-right.mo-wait:not(.mo-shown){transform:translate3d(90px,0,0);}
.mo-in.mo-init,.mo-in.mo-now{transition:none;}
@media (max-width:768px){
  .mo-in.mo-left.mo-wait:not(.mo-shown){transform:translate3d(-40px,0,0);}
  .mo-in.mo-right.mo-wait:not(.mo-shown){transform:translate3d(40px,0,0);}
}

/* ══ Ticker (Lauftext) · Startseite, Artikel und normale Seiten ══ */
.cms-ticker{display:block;overflow:hidden;width:100%;max-width:100%;contain:inline-size;box-sizing:border-box;background:var(--tk-bg,#c4161c);color:var(--tk-fg,#fff);text-decoration:none;font-weight:700;font-size:15px;line-height:1;padding:11px 0;white-space:nowrap;margin:10px 0}
a.cms-ticker:hover{color:var(--tk-fg,#fff)}
.cms-ticker .tk-track{display:flex;width:max-content;animation:cms-tk var(--tk-dur,30s) linear infinite}
.cms-ticker:hover .tk-track{animation-play-state:paused}
.cms-ticker .tk-run{display:flex;flex-shrink:0}
.cms-ticker .tk-seg{padding:0 2.5em}
.cms-ticker .tk-seg::after{content:"+++";margin-left:2.5em;opacity:.7}
@keyframes cms-tk{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){
  .cms-ticker{white-space:normal;padding:11px 16px;line-height:1.4}
  .cms-ticker .tk-track{animation:none;width:auto}
  .cms-ticker .tk-run[aria-hidden]{display:none}
  .cms-ticker .tk-run .tk-seg:not(:first-child){display:none}
  .cms-ticker .tk-seg{padding:0}.cms-ticker .tk-seg::after{content:none}
}
/* Ticker im Artikeltext: über die ganze Textbreite */
.m-rich .cms-ticker{clear:both;margin:18px 0}
body .cms-ticker, body .cms-ticker *{color:var(--tk-fg,#fff) !important;text-decoration:none !important}

/* Kacheln: Hereinlaufen nacheinander (Verzögerung je Spalte) */
.tile.mo-in{transition-delay:var(--mdl,0s)}