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