/* Bakerybench Design-Schicht 2026: Leinen, Milchglas, Eiche, Outfit. Wird nach style.css geladen. */
@font-face{font-family:"Outfit";font-style:normal;font-weight:200;font-display:swap;src:url("/fonts/Outfit-ExtraLight.woff") format("woff"),url("/fonts/Outfit-ExtraLight.ttf") format("truetype");}
@font-face{font-family:"Outfit";font-style:normal;font-weight:300;font-display:swap;src:url("/fonts/Outfit-Light.woff") format("woff"),url("/fonts/Outfit-Light.ttf") format("truetype");}
@font-face{font-family:"Outfit";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/Outfit-Regular.woff") format("woff"),url("/fonts/Outfit-Regular.ttf") format("truetype");}
:root{--oak:#C2985C;--weiss:#FFFDF8;--sans2:"Outfit","Public Sans",Arial,sans-serif;}
/* Leinen: feines Gewebe nur mit CSS, kein Bild */
body{background-color:var(--bg);background-image:repeating-linear-gradient(0deg,rgba(120,90,60,.045) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(120,90,60,.05) 0 1px,transparent 1px 4px);}
/* Milchglas-Kopfzeile, bleibt beim Scrollen oben */
header.site{background:rgba(246,241,231,.94);border-bottom:1px solid var(--oak);}
@media (min-width:900px){header.site{position:sticky;top:0;z-index:20;}}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
header.site{background:rgba(255,251,242,.58);-webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15);}
}
/* Outfit fuer Menue, Etiketten, Nummern, grosse Titel */
nav a,.eyebrow,.meta,.card::before{font-family:var(--sans2);}
nav a{font-weight:400;letter-spacing:.02em;}
.eyebrow{font-weight:400;letter-spacing:.22em;}
.card::before{font-weight:300;font-size:1rem;letter-spacing:.12em;}
.hero h1{font-family:var(--sans2);font-weight:200;font-size:clamp(2.4rem,6vw,4.1rem);letter-spacing:-.015em;line-height:1.08;max-width:18ch;}
.lede{font-weight:400;}
/* Baender im Wechsel: Weiss-Band fuer den Einstieg, Beige-Band fuer den ersten Beitrag */
.hero{position:relative;isolation:isolate;padding:2.5rem 0 2rem;margin-top:1.25rem;}
.hero::before,.feature::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;margin-left:-50vw;}
.hero::before{background:linear-gradient(rgba(110,76,36,.26),rgba(110,76,36,.34)),url("/images/hirnholz-band.webp") center/cover no-repeat,var(--weiss);}
.feature{position:relative;isolation:isolate;border-top:0;padding:1.75rem 0 1.5rem;margin-top:1.5rem;}
.feature::before{background:linear-gradient(rgba(234,223,204,.88),rgba(234,223,204,.88)),url("/images/leinen.webp") center/cover,var(--bg2);}
.feature h2{font-family:var(--sans2);font-weight:300;font-size:clamp(1.7rem,3.4vw,2.4rem);}
/* Eiche als Linienfarbe */
footer.site{border-top:1px solid var(--oak);background:linear-gradient(rgba(246,241,231,.90),rgba(246,241,231,.93)),url("/images/marmor.webp") center/cover;}
.card{border-color:var(--line);}
.card::before{border-bottom-color:var(--oak);}
@media (prefers-reduced-motion:reduce){header.site{position:static !important;}}

.layout{margin-top:2rem;}

/* Textband: laeuft langsam, steht bei reduzierter Bewegung still */
.band{overflow:hidden;border-bottom:1px solid var(--oak);background:rgba(255,253,248,.6);font-family:var(--sans2);font-weight:200;font-size:1.05rem;letter-spacing:.18em;text-transform:uppercase;color:var(--soft);white-space:nowrap;}
.band .run{display:inline-flex;gap:2.5rem;padding:.7rem 0;animation:bandlauf 48s linear infinite;}
.band span::after{content:"\00B7";margin-left:2.5rem;color:var(--oak);}
@keyframes bandlauf{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.band{white-space:normal;text-align:center;}.band .run{animation:none;flex-wrap:wrap;justify-content:center;padding:.7rem 1rem;}.band .run span[aria-hidden]{display:none;}}

body{overflow-x:clip;}
.feature::before{left:calc(-1 * (max(0px,(100vw - 1120px)/2) + 1.25rem));width:100vw;margin-left:0;}

/* dunkleres Hirnholz: Text im Band hell, Milchglas-Kopfzeile bleibt hell mit etwas Weiss */
.hero h1,.hero .lede{color:#FFFBF2;text-shadow:0 1px 16px rgba(43,33,24,.55),0 0 2px rgba(43,33,24,.35);}
.hero .eyebrow{color:#F3D9A8;}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
header.site{background:rgba(255,251,242,.42);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);}
}
/* groessere Schrift */
.hero h1{font-size:clamp(2.8rem,7vw,5rem);max-width:17ch;}
.lede{font-size:clamp(1.3rem,2.2vw,1.55rem);max-width:56ch;}
nav a{font-size:1.15rem;}
.eyebrow{font-size:1rem;}
.card h3{font-size:1.45rem;}
.card p{font-size:1.1rem;}
.card::before{font-size:1.1rem;}
.feature h2{font-size:clamp(2rem,4vw,2.8rem);}
.feature p{font-size:1.2rem;}
.band{font-size:1.2rem;}
aside p{font-size:1.1rem;}
.logo{font-size:2.2rem;}
.hero .eyebrow{color:#FFFBF2;font-weight:400;text-shadow:0 1px 10px rgba(43,33,24,.7),0 0 2px rgba(43,33,24,.5);}
/* Eiche (Laengsholz) statt Hirnholz: heller Schleier, dunkle Schrift, gut lesbar */
.hero::before{background:linear-gradient(rgba(255,250,238,.58),rgba(255,250,238,.66)),url("/images/eiche-band.webp") center/cover no-repeat,var(--weiss);}
.hero h1,.hero .lede{color:var(--ink);text-shadow:none;}
.hero .eyebrow{color:#7A3A14;font-weight:600;text-shadow:none;}
.hero::before{background:linear-gradient(rgba(255,248,232,.34),rgba(255,248,232,.44)),url("/images/eiche-band.webp") center/cover no-repeat,var(--weiss);}
/* dunkle Eiche: Maserung kommt kraeftig, Schrift hell */
.hero::before{background:linear-gradient(rgba(30,18,8,.12),rgba(30,18,8,.22)),url("/images/eiche-band.webp") center/cover no-repeat,#3a2614;}
.hero h1,.hero .lede{color:#FFFBF2;text-shadow:0 1px 16px rgba(20,12,4,.6);}
.hero .eyebrow{color:#F7DDAF;font-weight:600;text-shadow:0 1px 10px rgba(20,12,4,.7);}
/* Textband am unteren Rand des Holzbands, Milchglas-Kopfzeile liegt auf dem Holz */
.band{position:absolute;bottom:0;left:50%;width:100vw;margin-left:-50vw;border-bottom:0;border-top:1px solid rgba(247,221,175,.35);background:rgba(20,12,4,.38);color:#FFFBF2;}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){.band{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}}
.band span::after{color:#E3B978;}
.hero{padding-bottom:5.4rem;}
@media (min-width:900px){
header.site{margin-bottom:-97px;background:rgba(36,22,10,.30);border-bottom:1px solid rgba(247,221,175,.35);}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){header.site{background:rgba(36,22,10,.30);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);}}
header.site .logo,header.site nav a{color:#FFFBF2;text-shadow:0 1px 8px rgba(20,12,4,.5);}
header.site nav a:hover{color:#F7DDAF;}
.hero{margin-top:0;padding-top:calc(2.5rem + 97px);}
}
@media (min-width:900px){header.site .mark{background:#FFFBF2;border-radius:50%;}}
.hero::before{background:linear-gradient(rgba(25,14,5,.06),rgba(25,14,5,.16)),url("/images/eiche-band.webp") center/cover no-repeat,#3a2614;}

/* Laufband: Eintraege sind Links, Band haelt beim Darueberfahren an */
.band a{color:inherit;text-decoration:none;}
.band a:hover,.band a:focus-visible{color:#F7DDAF;text-decoration:underline;text-underline-offset:.3em;}
.band:hover .run,.band:focus-within .run{animation-play-state:paused;}