/* Familie Winter: gemeinsame Grundlagen aller Seiten. Seitenspezifisches steht im <style> der Seite. */
@font-face{font-family:"Urbanist";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/urbanist-400.woff2) format("woff2")}
@font-face{font-family:"Urbanist";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/urbanist-500.woff2) format("woff2")}
@font-face{font-family:"Urbanist";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/urbanist-600.woff2) format("woff2")}
@font-face{font-family:"Urbanist";font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/urbanist-800.woff2) format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/public-sans-400.woff2) format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/public-sans-600.woff2) format("woff2")}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#EFEBE4;color:#2B2724}
img{max-width:100%;height:auto} /* width/height am Bild halten nur das Seitenverhältnis frei, die Höhe kommt aus dem CSS */
[hidden],#mobil-menue[hidden]{display:none!important}
/* Buttons: bricht ein Text am Handy doch um, bleibt er mittig und hat Luft */
main a[style*="min-height:44px"]{box-sizing:border-box;text-align:center;padding-block:12px!important}

.skip{position:absolute;left:16px;top:-48px;z-index:10;padding:12px 16px;background:#2B2724;color:#F3EEE8;font-family:"Urbanist",sans-serif;text-decoration:none;border-radius:2px}
.skip:focus{top:16px}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Bewegung: dezent, nur wenn die Person sie nicht abgeschaltet hat. Ohne JS ist alles sichtbar. */
@media (prefers-reduced-motion:no-preference){
  a,button{transition:color .25s ease,background-color .25s ease,border-color .25s ease,opacity .25s ease,transform .3s ease}
  .fw-zoom{transition:transform 1.1s cubic-bezier(.2,.7,.2,1);will-change:transform}
  .fw-tile{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
  .fw-js .fw-reveal{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:var(--fw-delay,0ms)}
  .fw-js .fw-reveal.fw-in{opacity:1;transform:none}
}
/* Hover nur mit Maus, am Handy bliebe der Zustand nach dem Tippen hängen */
@media (prefers-reduced-motion:no-preference) and (hover:hover){
  .fw-btn:hover{transform:translateY(-2px)}
  .fw-zoom-host:hover .fw-zoom,.fw-zoom-host:focus-within .fw-zoom{transform:scale(1.045)}
  .fw-tile:hover{transform:translateY(-4px)}
  .fw-js .fw-btn.fw-in:hover{transform:translateY(-2px)}
  .fw-js .fw-tile.fw-in:hover{transform:translateY(-4px)}
}

/* Hinweisfenster (Termine 2027) */
.fw-dialog{width:min(560px,calc(100% - 32px));box-sizing:border-box;padding:0;border:0;border-radius:4px;background:#F8F6F2;color:#2B2724}
.fw-dialog::backdrop{background:rgba(43,39,36,.55)}
.fw-dialog-in{padding:40px}
@media (max-width:640px){.fw-dialog-in{padding:28px 24px}}
@media (prefers-reduced-motion:no-preference){
  .fw-dialog[open]{animation:fw-pop .35s cubic-bezier(.2,.7,.2,1)}
  .fw-dialog[open]::backdrop{animation:fw-fade .35s ease}
}
@keyframes fw-pop{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes fw-fade{from{opacity:0}to{opacity:1}}

/* lange Wörter und Links in Rechtstexten umbrechen */
main{overflow-wrap:break-word}

/* Einspaltig (Handy, Tablet): Hochformat-Bilder, die am Desktop neben dem Text stehen, im Querformat wie die Heros.
   Bilderpaare nebeneinander bleiben hoch, Porträts quadratisch. */
@media (max-width:900px){
  main img[style*="aspect-ratio:4/5"]{aspect-ratio:5 / 4!important}
  main div[style*="grid-template-columns:repeat(2"] > img[style*="aspect-ratio:4/5"]{aspect-ratio:4 / 5!important}
  main img[src*="klaus-winter-"],main img[src*="jasmin-schwabe-winter-"]{aspect-ratio:1 / 1!important;object-position:center 25%!important}
}

/* Kopf ohne Logo: schmale Navigationszeile, am Desktop mittig, am Handy nur das Menü rechts */
header .hdr{justify-content:center!important;min-height:52px!important;padding:4px 0!important}
@media (max-width:720px){header .hdr{justify-content:flex-end!important;min-height:48px!important;padding:2px 0!important}}

/* Handy: Kopfzeile ohne Trennlinie, der Hero schließt direkt an (Ella, 04.11.) */
@media (max-width:720px){
  header{border-bottom:0!important}
  main > section:first-child{padding-top:4px!important}
  main > section[class*="tex-"]:first-child{padding-top:16px!important} /* Struktur-Hintergrund: Kasten nicht direkt an die Kopfzeile */
}