/* =====================================================================
   Brillen Thomas - Website Design System
   Basiert auf BRAND_BOOK.html (Farben, Typo, Voice, Motion).
   Leitmotiv: "Die Dinge anders sehen" -> alles kommt in den Fokus.
   ===================================================================== */

/* Inter selbst gehostet (OFL, fonts/OFL.txt) - kein Abruf bei Google */
@font-face{font-family:"Inter"; font-style:normal; font-weight:300 800; font-display:swap;
  src:url(../fonts/inter-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Inter"; font-style:normal; font-weight:300 800; font-display:swap;
  src:url(../fonts/inter-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root {
  /* Moosgruen - Farbton an die gruene Leder-Matte im Hero-Video angepasst (#567465) */
  --moss-950:#111D17; --moss-900:#192921; --moss-800:#23382E;
  --moss-700:#395346; --moss-600:#436454; --moss-500:#517764;
  --moss-400:#6A9680; --moss-300:#91B3A2; --moss-200:#B7CEC3;
  /* Creme / Beige */
  --logo-bg:#E3E1CC; --logo-green:#0D3700;
  --cream:#EBE6D5; --cream-50:#F4F0E3; --cream-200:#DDD7C4;
  --sand-400:#CDC2A8; --sand-600:#B0A381; --sand-logo:#9A8C68;
  /* Terrakotta */
  --clay-700:#7A331D; --clay:#8F3C23; --clay-300:#A85539; --clay-100:#C98463;
  --clay-on-dark:var(--clay-100);
  /* Neutral */
  --ink-900:#20251A; --ink-600:#565C4C; --ink-400:#8C9182; --paper:#fff;

  /* Eine Familie fuer alles - Hierarchie nur ueber Gewicht und Groesse */
  --display:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
  --body:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;

  --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
body{
  margin:0; background:var(--cream); color:var(--ink-900);
  font-family:var(--body); font-size:18px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit;}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
.display{font-family:var(--display); font-weight:700; letter-spacing:-0.035em; line-height:0.98; margin:0;}
.kicker{font-family:var(--body); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.28em; color:var(--clay); margin:0 0 18px;}
.accent{color:var(--clay);}
.on-dark .kicker{color:var(--clay-on-dark);}
.on-dark .accent{color:var(--clay-on-dark);}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--body); font-weight:700; font-size:15px; letter-spacing:0.02em;
  padding:15px 26px; border-radius:999px; text-decoration:none; cursor:pointer;
  border:1.5px solid transparent; transition:transform .25s var(--ease), background .25s, color .25s, border-color .25s;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--clay); color:var(--cream-50);}
.btn-primary:hover{background:var(--clay-700);}
.btn-ghost{background:transparent; color:var(--moss-900); border-color:rgba(25,41,33,.32);}
.btn-ghost:hover{border-color:var(--clay); color:var(--clay);}
.on-dark .btn-ghost{color:var(--cream); border-color:rgba(235,230,213,.4);}
.on-dark .btn-ghost:hover{color:var(--clay-on-dark); border-color:var(--clay-on-dark);}
.btn .ar{transition:transform .25s var(--ease);}
.btn:hover .ar{transform:translateX(4px);}

/* ---------------- Header ---------------- */
/* Am Anfang sattes Dunkelgruen, beim Scrollen ausfaden - aber 30% Transparenz-Schleier bleibt durchgaengig */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:9px max(28px, calc((100% - var(--maxw)) / 2 + 28px));
  box-shadow:0 1px 0 rgba(13,22,18,.35);
  transition:box-shadow .5s, padding .35s;
}
/* Unschärfe auf eigener Ebene: Das fixierte Menü bleibt am Viewport ausgerichtet. */
.site-header::before{content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(25,41,33,.92); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:background .5s var(--ease);}
.site-header.scrolled{box-shadow:none; padding:5px max(28px, calc((100% - var(--maxw)) / 2 + 28px));}
.site-header.scrolled::before{background:rgba(25,41,33,.7);}
/* Ueber hellen Sektionen nimmt der Header deren Hintergrundfarbe an - gleiche 30% Transparenz */
.site-header.on-light{box-shadow:0 1px 0 rgba(25,41,33,.08);}
.site-header.on-light::before{background:rgba(235,230,213,.7);}
.site-header.on-light .nav a{color:var(--moss-900);}
.site-header.on-light .nav a.btn-primary{color:var(--cream-50);}
.site-header.on-light .nav a:not(.btn)::after{background:var(--clay);}
.site-header.on-light .nav-toggle{color:var(--moss-900);}
.site-header.on-light .brand .l-light{display:none;}
.site-header.on-light .brand .l-dark{display:block;}
.site-header .brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
.site-header .brand img{height:calc(58px - 7mm); width:auto; transition:height .35s var(--ease);}
.site-header.scrolled .brand img{height:calc((58px - 7mm) * 0.9);} /* nur 10% schrumpfen */
/* Header ist immer dunkelgruen -> immer das helle Logo */
.site-header .brand .l-dark{display:none;}
.nav{display:flex; align-items:center; gap:22px;}
/* Schrift hell ueber dunklem Hintergrund (Hero/Page-Hero), dunkelgruen ueber hellem (scrolled) */
.nav a{font-family:var(--body); font-weight:600; font-size:15px; text-decoration:none; color:var(--cream); position:relative; padding:4px 0; transition:color .3s var(--ease);}
.nav a:not(.btn)::after{content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--clay-300); transition:width .3s var(--ease);}
.nav a:not(.btn):hover::after, .nav a:not(.btn).active::after{width:100%;}
.nav .btn{padding:10px 18px;}
.nav a.btn-primary, .site-header.scrolled .nav a.btn-primary{color:var(--cream-50);} /* Termin-Button immer hell auf Terrakotta */
.nav-toggle{display:none; background:none; border:none; cursor:pointer; padding:6px; color:var(--cream); transition:color .3s var(--ease);}
.nav-toggle svg{width:26px; height:26px;}
@media (max-width:1080px){ .nav{gap:16px;} .nav a{font-size:14px;} .nav .btn{padding:9px 15px;} }

@media (max-width:880px){
  body.nav-open{overflow:hidden;}
  .nav{position:fixed; inset:0 0 auto auto; height:100vh; height:100dvh; width:min(82vw,340px); background:var(--moss-900); color:var(--cream);
    flex-direction:column; align-items:flex-start; justify-content:safe center; gap:26px; padding:70px 40px 40px; transform:translateX(100%);
    overflow-y:auto; overscroll-behavior:contain; visibility:hidden;
    transition:transform .4s var(--ease), visibility .4s; box-shadow:-20px 0 60px rgba(0,0,0,.3);}
  .nav.open{transform:translateX(0); visibility:visible;}
  .nav a{flex-shrink:0;}
  .site-header .nav a, .site-header.on-light .nav a{color:var(--cream); font-size:22px;}
  .site-header .nav a:not(.btn)::after{background:var(--clay-300);}
  .nav-toggle{display:inline-flex; z-index:60;}
  .nav-open .site-header .nav-toggle{color:var(--cream);}
}

/* ---------------- Hero ---------------- */
.hero{position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden;}
.hero__media{position:absolute; inset:0; z-index:0;}
.hero__media video, .hero__media img{width:100%; height:100%; object-fit:cover;}
.hero__media::after{content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(17,29,23,.86) 0%, rgba(17,29,23,.35) 42%, rgba(17,29,23,.15) 100%);}
.hero__inner{position:relative; z-index:1; width:100%; padding-bottom:clamp(64px,10vh,120px); padding-top:120px;}
.hero__claim{font-family:var(--display); font-weight:700; color:var(--cream);
  font-size:clamp(48px,9vw,118px); line-height:0.95; letter-spacing:-0.04em; margin:0 0 22px;}
.hero__claim .accent{color:var(--clay-on-dark);}
.hero__sub{color:var(--cream); font-size:clamp(16px,2.2vw,21px); max-width:540px; opacity:.95; margin:0 0 30px;}
.hero__cta{display:flex; gap:14px; flex-wrap:wrap;}
.hero__cta .btn-ghost{color:var(--cream-50); border-color:rgba(244,240,227,.55);}
.hero__cta .btn-ghost:hover{color:#fff; border-color:#fff;}
.hero__scroll{position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:1; color:var(--cream); opacity:.8;
  font-size:11px; text-transform:uppercase; letter-spacing:0.3em; display:flex; flex-direction:column; align-items:center; gap:8px;}
.hero__scroll span{width:1px; height:34px; background:var(--cream); animation:scrollPulse 2s var(--ease) infinite;}
@keyframes scrollPulse{0%,100%{opacity:.2; transform:scaleY(.5);}50%{opacity:1; transform:scaleY(1);}}

/* ---------------- Sections ---------------- */
section{position:relative;}
.section{padding:clamp(70px,11vw,150px) 0;}
.section--moss{background:var(--moss-900); color:var(--cream);}
.section--moss .display{color:var(--cream);}
.section--clay{background:var(--clay); color:var(--cream-50);}
.section--paper{background:var(--paper);}
.section-head{max-width:680px; margin:0 0 50px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.h2{font-family:var(--display); font-weight:700; font-size:clamp(34px,5.2vw,62px); line-height:1.0; letter-spacing:-0.035em; color:var(--moss-900); margin:0 0 20px;}
.section--moss .h2, .section--clay .h2{color:var(--cream);}
.lead{font-size:clamp(17px,2.2vw,21px); color:var(--moss-700); max-width:620px; margin:0;}
.section--moss .lead{color:var(--moss-300);}

/* ---------------- Eye chart (Sehprobe) ---------------- */
.chart{text-align:center; cursor:default; display:flex; flex-direction:column; align-items:center; gap:clamp(10px,1.8vw,22px);}
.chart .kicker{margin-bottom:clamp(14px,2.5vw,30px);}
.chart__row{font-family:var(--display); font-weight:700; color:var(--cream); line-height:1.05; letter-spacing:0.02em; margin:0; transition:filter .4s var(--ease), color .3s, transform .45s var(--ease); transform-origin:center;}
.chart__row .hl{color:var(--clay-on-dark);}
.chart__rule{width:clamp(80px,18vw,180px); height:2px; background:var(--clay-300); margin:0 auto clamp(12px,2.4vw,28px); opacity:.8;}
.chart .r1{font-size:clamp(46px,10vw,108px);}
.chart .r2{font-size:clamp(32px,6.6vw,68px);}
.chart .r3{font-size:clamp(23px,4.4vw,46px);}
.chart .r4{font-size:clamp(17px,3vw,31px);}
.chart .r5{font-size:clamp(12px,2vw,21px);}
.chart .r6{font-size:clamp(9px,1.4vw,14px);}
.chart__foot{margin-top:clamp(18px,3vw,34px); font-family:var(--body); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.3em; color:var(--moss-300);}
.chart__row:hover{color:var(--clay-on-dark);}

/* ---------------- Creed / Principles ---------------- */
.creed{list-style:none; margin:36px 0 0; padding:0; counter-reset:c;}
.creed li{display:grid; grid-template-columns:64px 1fr; gap:22px; padding:28px 0; border-top:1px solid rgba(145,179,162,.28);}
.creed li:last-child{border-bottom:1px solid rgba(145,179,162,.28);}
.creed .n{font-family:var(--display); font-weight:700; font-size:40px; color:var(--clay-on-dark); line-height:.8;}
.creed h3{font-family:var(--display); font-weight:700; font-size:clamp(20px,2.6vw,26px); margin:0 0 8px; letter-spacing:-0.02em; color:var(--cream);}
.creed p{margin:0; color:var(--moss-300); font-size:16px;}
.creed--light li{border-color:rgba(25,41,33,.14);}
.creed--light .n{color:var(--clay);}
.creed--light h3{color:var(--moss-900);}
.creed--light p{color:var(--ink-600);}

/* ---------------- Material tiles ---------------- */
.mat-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:10px;}
.mat{background:var(--paper); padding:34px; border:1px solid rgba(25,41,33,.1); border-radius:6px; transition:transform .35s var(--ease), box-shadow .35s;}
.mat:hover{transform:translateY(-6px); box-shadow:0 22px 50px rgba(17,29,23,.12);}
.mat .mn{font-family:var(--display); font-weight:700; font-size:15px; color:var(--clay); letter-spacing:.12em;}
.mat h4{font-family:var(--display); font-weight:700; font-size:22px; margin:14px 0 8px; color:var(--moss-900); letter-spacing:-0.01em;}
.mat p{margin:0; font-size:15px; color:var(--ink-600); line-height:1.55;}
@media (max-width:680px){ .mat-grid{grid-template-columns:1fr;} }

/* ---------------- Split (image + text) ---------------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,6vw,80px); align-items:center;}
.split--rev .split__media{order:2;}
.split__media{position:relative; border-radius:8px; overflow:hidden; aspect-ratio:4/5;}
.split__media video, .split__media img{width:100%; height:100%; object-fit:cover;}
@media (max-width:820px){ .split{grid-template-columns:1fr;} .split--rev .split__media{order:0;} }

/* ---------------- Laden-Galerie ---------------- */
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:10px;}
.gallery figure{margin:0;}
.gallery .ph{border-radius:8px; overflow:hidden; aspect-ratio:3/4;}
.gallery .ph img, .gallery .ph video{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease);}
.gallery figure:hover .ph img, .gallery figure:hover .ph video{transform:scale(1.05);}
.gallery figcaption{margin-top:12px; font-size:13.5px; color:var(--ink-600); letter-spacing:.01em;}
@media (max-width:680px){ .gallery{grid-template-columns:1fr;} }

/* ---------------- Beitraege (Events / News) ----------------
   Karten-Raster fuer Events und News. Eine Karte = ein Eintrag.
   Bild kann .png (Flyer), .webp/.jpg (Foto) oder ein Video sein. */
.posts{display:grid; grid-template-columns:repeat(2,1fr); gap:26px; margin-top:10px;}
.post{background:var(--paper); border:1px solid rgba(25,41,33,.1); border-radius:8px; overflow:hidden;
  display:flex; flex-direction:column; transition:transform .35s var(--ease), box-shadow .35s;}
.post:hover{transform:translateY(-6px); box-shadow:0 22px 50px rgba(17,29,23,.12);}
.post__media{aspect-ratio:16/10; overflow:hidden; background:var(--moss-900);}
.post__media img, .post__media video{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease);}
.post:hover .post__media img{transform:scale(1.04);}
/* Flyer oder Plakat als PNG: ganzes Bild zeigen, nichts abschneiden */
.post__media--flyer{aspect-ratio:auto; background:var(--cream-50);}
.post__media--flyer img{height:auto; object-fit:contain;}
.post__body{padding:28px 30px 30px; display:flex; flex-direction:column; gap:10px; flex:1;}
.post .post__date{font-family:var(--body); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.22em; color:var(--clay); margin:0;}
.post h3{font-family:var(--display); font-weight:700; font-size:clamp(21px,2.4vw,27px); letter-spacing:-0.02em; color:var(--moss-900); margin:0;}
.post p{margin:0; font-size:16px; color:var(--ink-600); line-height:1.6;}
.post__link{margin-top:auto; padding-top:8px; font-size:15px; font-weight:700; color:var(--clay); text-decoration:none;
  display:inline-flex; align-items:center; gap:8px; transition:color .25s var(--ease);}
.post__link:hover{color:var(--clay-700);}
.post__link .ar{transition:transform .25s var(--ease);}
.post__link:hover .ar{transform:translateX(4px);}
.post--wide{grid-column:1 / -1;}
.post--wide .post__media{aspect-ratio:21/9;}
.tag{align-self:flex-start; font-family:var(--body); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.18em;
  color:var(--moss-700); background:var(--cream-200); border-radius:999px; padding:5px 12px;}
@media (max-width:680px){ .posts{grid-template-columns:1fr;} .post--wide .post__media{aspect-ratio:16/10;} }

/* Noch kein Eintrag da */
.empty{background:var(--paper); border:1px dashed rgba(25,41,33,.22); border-radius:8px; padding:clamp(34px,6vw,56px); text-align:center;}
.empty h3{font-family:var(--display); font-weight:700; font-size:clamp(22px,3vw,30px); color:var(--moss-900); margin:0 0 10px; letter-spacing:-0.02em;}
.empty p{margin:0 auto 22px; color:var(--ink-600); max-width:460px;}

/* ---------------- Event-Seite (augengesundheit.html) ----------------
   Hero mit Augenpause: ein Punkt laeuft auf Klick ueber die liegende Acht,
   man folgt ihm nur mit den Augen. Waehrenddessen tritt der Text zurueck. */
.ev-hero{padding-bottom:clamp(60px,8vw,100px);}
.ev-hero__grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(30px,5vw,70px); align-items:end;}
.ev-hero__text{transition:filter .6s var(--ease), opacity .6s var(--ease);}
.ev-hero.is-running .ev-hero__text{filter:blur(4px); opacity:.45;}
.ev-title{font-family:var(--display); font-weight:800; color:var(--cream); font-size:clamp(52px,8vw,104px); line-height:.9; letter-spacing:-0.045em; margin:0 0 28px;}
.ev-title span{display:block;}
.ev-title .ev-title__verb{font-weight:300; color:var(--moss-300); letter-spacing:-0.03em; margin-top:.08em;}
.ev-when{font-size:clamp(17px,1.9vw,20px); font-weight:600; line-height:1.45; color:var(--clay-100); margin:0;}
.ev-pause{display:flex; flex-direction:column; gap:22px;}
.acht{width:100%; height:auto; overflow:visible;}
.acht__path{fill:none; stroke:var(--moss-400); stroke-width:3; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:1; animation:achtDraw 2.6s var(--ease) .4s forwards;}
.acht__dot{fill:var(--clay-300);}
.acht__halo{opacity:.22; transform-box:fill-box; transform-origin:center;}
.ev-hero.is-running .acht__path{stroke:var(--moss-300);}
.ev-hero.is-running .acht__halo{animation:achtHalo 1.8s var(--ease) infinite;}
@keyframes achtDraw{to{stroke-dashoffset:0;}}
@keyframes achtHalo{0%,100%{transform:scale(1);}50%{transform:scale(1.35);}}
.ev-pause__ctrl{display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
.ev-pause__ctrl .btn{flex:none;}
.ev-pause__msg{flex:1 1 260px; margin:0; font-size:15px; line-height:1.5; color:var(--moss-200);}
.btn:focus-visible{outline:2px solid var(--clay-100); outline-offset:3px;}
@media (max-width:880px){ .ev-hero__grid{grid-template-columns:1fr; align-items:start;} }
@media (prefers-reduced-motion: reduce){
  .acht__path{animation:none; stroke-dashoffset:0;}
  .ev-hero__text{transition:none;}
  .ev-hero.is-running .acht__halo{animation:none;}
}

/* Der Abend: Text links, Eckdaten rechts */
.ev-about{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(36px,6vw,90px); align-items:start;}
.ev-facts{margin:8px 0 0; border-top:1px solid rgba(25,41,33,.16);}
.ev-facts > div{display:grid; grid-template-columns:88px 1fr; gap:16px; padding:18px 0; border-bottom:1px solid rgba(25,41,33,.16);}
.ev-facts dt{font-weight:700; color:var(--moss-900); font-size:16px;}
.ev-facts dd{margin:0; color:var(--ink-600); font-size:16px; line-height:1.55;}
.ev-facts a{color:var(--clay); font-weight:600;}
@media (max-width:820px){ .ev-about{grid-template-columns:1fr;} }
.ev-cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}


/* Instagram-Streifen */
.insta{display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;}
.insta h2{margin-bottom:10px;}
.insta p{margin:0;}

/* ---------------- Brand marquee ---------------- */
.marquee{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.marquee__track{display:flex; gap:60px; width:max-content; animation:marquee 38s linear infinite;}
.marquee:hover .marquee__track{animation-play-state:paused;}
.marquee__track span{font-family:var(--display); font-weight:700; font-size:clamp(22px,3vw,34px); color:var(--moss-400); letter-spacing:-0.02em; white-space:nowrap;}
.section--moss .marquee__track span{color:var(--moss-300);}
@keyframes marquee{to{transform:translateX(-50%);}}
@media (prefers-reduced-motion: reduce){
  .marquee__track{animation:none; width:100%; flex-wrap:wrap; justify-content:center; gap:18px 30px;}
  .marquee__track span:nth-child(n+15){display:none;}
}

/* favrspecs-Module (Logo-Slider Startseite, Logo-Wall Nachhaltigkeit):
   Rueckfall (.marquee bzw. .favr-fallback) nur, bis das Script das Modul registriert hat */
.favr-slot{max-width:1200px; margin:0 auto; padding:0 clamp(16px,4vw,40px);}
.favr-slot :is(favr-brand-logo-slider, favr-brand-logo-wall){display:block;}
.favr-slot :is(favr-brand-logo-slider, favr-brand-logo-wall):not(:defined){display:none;}
.favr-slot:has(:is(favr-brand-logo-slider, favr-brand-logo-wall):defined) :is(.marquee, .favr-fallback, .extern-hint){display:none;}
favr-brand-logo-wall{--row-gap:4px; --grid-row-gap:4px;}
.favr-anprobe{text-align:center; margin:28px 0 0;}
.favr-slot.has-anprobe-tile .favr-anprobe{display:none;}

/* Externe Inhalte: Hinweis, Platzhalter, Einwilligungs-Banner */
.extern-hint{text-align:center; font-size:13px; color:var(--ink-600); margin:18px 0 0;}
.extern-hint button, .extern-ph .extern-link{font:inherit; color:var(--clay); background:none; border:0; padding:0; text-decoration:underline; cursor:pointer;}
.extern-ph{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; padding:28px; background:var(--cream-50); color:var(--ink-600); font-size:14px; filter:none;}
.extern-ph p{max-width:420px; margin:0;}
.consent{position:fixed; left:16px; right:16px; bottom:16px; z-index:200; max-width:720px; max-height:calc(100dvh - 32px); overflow-y:auto; margin:0 auto; background:var(--moss-950); color:var(--cream); border-radius:10px; padding:20px 22px; box-shadow:0 18px 50px rgba(17,29,23,.35); font-size:14px; line-height:1.5;}
.consent p{margin:0 0 14px;}
.consent a{color:var(--clay-100);}
.consent__btns{display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end;}
.consent .btn-ghost{color:var(--cream); border-color:rgba(235,230,213,.45);}
.consent .btn-ghost:hover{color:var(--clay-100); border-color:var(--clay-100);}

/* ---------------- Anniversary 40 ---------------- */
.anniv{text-align:center;}
.anniv__big{font-family:var(--display); font-weight:700; font-size:clamp(140px,28vw,300px); line-height:.8; color:var(--clay); letter-spacing:-0.05em; margin:0;}
.section--moss .anniv__big{color:var(--clay-on-dark);}

/* ---------------- Photo band (scroll zoom) ---------------- */
.band{position:relative; min-height:clamp(440px,68vh,680px); overflow:hidden; display:flex; align-items:center; padding:clamp(50px,8vw,90px) 0;}
.band--tall{min-height:clamp(520px,86vh,860px);}
.band__media{position:absolute; inset:0; z-index:0;}
.band__media video, .band__media img{width:100%; height:100%; object-fit:cover; transform:scale(var(--z,1.15)); transition:transform .2s linear;}
.band__media::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(13,22,18,.82), rgba(13,22,18,.3));}
.band__inner{position:relative; z-index:1; color:var(--cream);}
.band__inner .kicker{margin-bottom:16px;}
.band__inner h2{font-family:var(--display); font-weight:700; font-size:clamp(30px,5vw,58px); letter-spacing:-0.03em; margin:0 0 16px; color:var(--cream); line-height:1.02;}
.band__inner h2 .accent{color:var(--clay-on-dark);}
.band__inner p{margin:0;}

/* Section mit Video-Hintergrund (textreich, gute Lesbarkeit) */
.section.has-bg{position:relative; overflow:hidden;}
.section.has-bg .video-bg{position:absolute; inset:0; z-index:0;}
.section.has-bg .video-bg video, .section.has-bg .video-bg img{width:100%; height:100%; object-fit:cover;}
.section.has-bg .video-bg::after{content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(18,30,24,.9) 0%, rgba(18,30,24,.74) 55%, rgba(18,30,24,.6) 100%);}
.section.has-bg > .wrap{position:relative; z-index:1;}

/* ---------------- Page hero (subpages) ---------------- */
.page-hero{background:var(--moss-900); color:var(--cream); padding:160px 0 80px;}
.page-hero .h2{color:var(--cream); font-size:clamp(40px,6vw,76px);}
.page-hero .lead{color:var(--moss-300);}
.breadcrumb{font-size:13px; text-transform:uppercase; letter-spacing:.2em; color:var(--moss-300); margin-bottom:22px;}
.breadcrumb a{color:var(--clay-on-dark); text-decoration:none;}

/* ---------------- Contact ---------------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px;}
.contact-grid h4{font-family:var(--body); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.24em; color:var(--clay); margin:0 0 12px;}
.contact-grid p{font-family:var(--display); font-weight:700; font-size:22px; line-height:1.4; color:var(--moss-900); margin:0 0 30px; letter-spacing:-0.01em;}
.hours dl{margin:0;} .hours dt{font-weight:700; color:var(--ink-900); margin-top:10px;} .hours dd{margin:0; color:var(--ink-600);}
.map-embed{border:0; width:100%; height:100%; min-height:340px; border-radius:8px; filter:grayscale(.3) sepia(.1);}
.map-grid{display:grid; grid-template-columns:1fr 1.4fr; gap:20px; align-items:stretch;}
@media (max-width:820px){ .map-grid{grid-template-columns:1fr;} }
@media (max-width:820px){ .contact-grid{grid-template-columns:1fr; gap:36px;} }

/* ---------------- Footer ---------------- */
.site-footer{background:var(--moss-950); color:var(--cream); padding:70px 0 40px;}
.site-footer .cols{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px;}
.site-footer img.logo{height:calc(58px - 5mm); width:auto; margin-bottom:18px;}
.site-footer h5{font-size:13px; text-transform:uppercase; letter-spacing:.2em; color:var(--moss-300); margin:0 0 14px;}
.site-footer a{color:var(--cream); text-decoration:none; opacity:.85; display:block; padding:5px 0; font-size:15px;}
.site-footer a:hover{opacity:1; color:var(--clay-on-dark);}
.site-footer .legal{margin-top:46px; padding-top:22px; border-top:1px solid rgba(145,179,162,.2); display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; font-size:13px; color:var(--moss-300);}
@media (max-width:820px){ .site-footer .cols{grid-template-columns:1fr; gap:30px;} }

/* ---------------- Legal prose ---------------- */
.prose{max-width:760px;}
.prose h2{font-family:var(--display); font-weight:700; font-size:24px; letter-spacing:-0.02em; color:var(--moss-900); margin:34px 0 10px;}
.prose h3{font-family:var(--display); font-weight:700; font-size:18px; color:var(--moss-900); margin:22px 0 8px;}
.prose p{margin:0 0 14px; color:var(--ink-600); font-size:16px; line-height:1.7;}
.prose a{color:var(--clay); text-decoration:underline;}
.prose .note{background:var(--cream-50); border-left:3px solid var(--clay); padding:14px 18px; border-radius:4px; font-size:14px; color:var(--ink-900);}

/* ---------------- Motion: focus-in reveal ---------------- */
.reveal{transition:opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease);}
.reveal.reveal-pending{opacity:0; transform:translateY(26px); filter:blur(9px);}
.reveal.in{opacity:1; transform:none; filter:blur(0);}
.reveal.d1{transition-delay:.08s;} .reveal.d2{transition-delay:.16s;} .reveal.d3{transition-delay:.24s;} .reveal.d4{transition-delay:.32s;}

/* Hero load focus */
.hero-loading .hero-focus{filter:blur(16px) saturate(.6); transform:scale(1.04);}
.hero-ready .hero-focus{filter:blur(0) saturate(1); transform:none; transition:filter 1.3s var(--ease), transform 1.3s var(--ease);}

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal.reveal-pending{opacity:1; transform:none; filter:none; transition:none;}
  .hero-loading .hero-focus, .hero-ready .hero-focus{filter:none; transform:none; transition:none;}
  .hero__scroll span{animation:none;}
  .band__media video, .band__media img{transform:none; transition:none;}
  .btn, .btn .ar, .mat, .post, .gallery .ph img, .gallery .ph video, .post__media img, .chart__row, .nav{transition:none;}
  .btn:hover, .btn:hover .ar, .mat:hover, .post:hover, .gallery figure:hover .ph img, .gallery figure:hover .ph video, .post:hover .post__media img{transform:none;}
}

/* Kleine Steuerung für dekorative Videos; kein Einfluss auf das Layout. */
.gallery .ph, .post__media{position:relative;}
.video-toggle{position:absolute; left:14px; bottom:14px; z-index:2; display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; padding:0; border:1px solid rgba(244,240,227,.55); border-radius:50%;
  background:rgba(25,41,33,.85); color:var(--cream-50); cursor:pointer;}
.video-toggle[hidden], .video-toggle__play, .video-toggle.is-paused .video-toggle__pause{display:none;}
.video-toggle.is-paused .video-toggle__play{display:block;}
.video-toggle:focus-visible, .nav-toggle:focus-visible{outline:2px solid var(--clay-on-dark); outline-offset:3px;}

/* ---------------- Loupe cursor (desktop) ---------------- */
.loupe{position:fixed; top:0; left:0; width:120px; height:120px; border-radius:50%; pointer-events:none; z-index:80;
  border:1.5px solid rgba(143,60,35,.55); box-shadow:0 0 0 1px rgba(235,230,213,.4) inset, 0 10px 30px rgba(17,29,23,.18);
  overflow:hidden; background:var(--moss-900);
  transform:translate(-50%,-50%) scale(0); transition:transform .25s var(--ease); mix-blend-mode:normal;}
/* Echte Vergroesserung: Klon der Sehtafel, skaliert und gegenlaeufig verschoben */
.loupe__inner{position:absolute; left:0; top:0; transform-origin:0 0; will-change:transform; pointer-events:none;}
.loupe.show{transform:translate(-50%,-50%) scale(1); animation:loupeBreath 2.4s var(--ease) infinite;}
@keyframes loupeBreath{0%,100%{transform:translate(-50%,-50%) scale(1);}50%{transform:translate(-50%,-50%) scale(1.07);}}
@media (prefers-reduced-motion: reduce){ .loupe.show{animation:none;} }
@media (max-width:980px), (prefers-reduced-motion: reduce){ .loupe{display:none;} }

/* ---------------- WhatsApp-Knopf (reiner Link auf wa.me) ---------------- */
.wa-float{position:fixed; right:18px; bottom:calc(18px + env(safe-area-inset-bottom, 0px)); z-index:150; display:inline-flex; align-items:center; gap:9px; padding:13px 18px; border-radius:999px; background:var(--moss-900); color:var(--cream-50); font-family:var(--body); font-weight:700; font-size:14px; letter-spacing:.02em; text-decoration:none; box-shadow:0 10px 30px rgba(17,29,23,.3); transition:transform .25s var(--ease), background .25s;}
.wa-float:hover{background:var(--clay); transform:translateY(-2px);}
.wa-float svg{flex:none;}
body:has(.consent) .wa-float{display:none;} /* Einwilligungs-Banner nicht verdecken */
@media (max-width:600px){ .wa-float span{display:none;} .wa-float{padding:14px;} }
@media (prefers-reduced-motion: reduce){ .wa-float{transition:none;} .wa-float:hover{transform:none;} }