/* Designvariante „Familie": hell, rund, warm. Überschriften Young Serif,
   Text Figtree. Erkennungszeichen: Themen als Wegweiser-Schilder. */
@font-face{font-family:"Young Serif";src:url(fonts/young-serif-latin.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Figtree";src:url(fonts/figtree-latin.woff2) format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"Figtree";src:url(fonts/figtree-italic-latin.woff2) format("woff2");font-weight:400 800;font-style:italic;font-display:swap}

.theme-familie{--sans:"Figtree",system-ui,sans-serif;--serif:"Figtree",system-ui,sans-serif;--display:"Young Serif",Georgia,serif;--radius:16px}
body.theme-familie{font:400 18px/1.65 var(--sans);background:var(--paper)}

/* Kopf */
.theme-familie .masthead{border-bottom:0;box-shadow:0 1px 0 var(--line)}
.theme-familie .brand{display:flex;align-items:center;gap:10px;color:var(--brand)}
.theme-familie .brand-sign{flex:0 0 auto;color:var(--ink)}
.theme-familie .brand-name{font:400 clamp(24px,3vw,34px)/1 var(--display);letter-spacing:-.01em;color:var(--ink)}
.theme-familie .brand-name b{font-weight:400;color:var(--brand)}
.theme-familie .brand-tag{border-left-color:var(--signal)}
.theme-familie .catnav{border-top:0}
.theme-familie .catnav ul{gap:4px 8px;padding-bottom:10px}
.theme-familie .catnav a{padding:8px 14px;border:0;border-radius:999px;font-weight:600}
.theme-familie .catnav a:hover,.theme-familie .catnav a[aria-current]{background:color-mix(in srgb,var(--brand) 10%,#fff);color:var(--brand)}

/* Überschriften */
.theme-familie h1,.theme-familie .arch-head h1,.theme-familie .post-head h1,.theme-familie .rubrik-head h2,.theme-familie .card-l .card-title,.theme-familie .notfound h1{font-family:var(--display);font-weight:400;letter-spacing:-.01em}
.theme-familie .rubrik-head{border-top:0;padding-top:0}
.theme-familie .rubrik-head h2{font-size:clamp(24px,2.6vw,32px)}
.theme-familie .prose h2,.theme-familie .prose h3{font-family:var(--display);font-weight:400}

/* Karten weicher */
.theme-familie .card,.theme-familie .post{border-radius:var(--radius);box-shadow:0 2px 14px rgba(20,40,40,.07)}
.theme-familie .card-media{background:var(--brand)}
.theme-familie .card-title{font-weight:700}
.theme-familie .rungs{background:
  linear-gradient(90deg,transparent calc(100% - 64px),color-mix(in srgb,var(--signal) 85%,transparent) calc(100% - 64px) calc(100% - 58px),transparent calc(100% - 58px) calc(100% - 26px),color-mix(in srgb,var(--signal) 85%,transparent) calc(100% - 26px) calc(100% - 20px),transparent calc(100% - 20px)),
  repeating-linear-gradient(180deg,transparent 0 30px,color-mix(in srgb,var(--signal) 55%,transparent) 30px 34px) calc(100% - 26px) 0/38px 100% no-repeat,
  var(--brand)}
.theme-familie .chips a{border-color:var(--brand);color:var(--brand)}
.theme-familie .chips a:hover{background:var(--brand);color:#fff}
.theme-familie .side-h{border-bottom-color:var(--signal)}

/* Slider */
.fw-hero{position:relative;background:var(--brand)}
.fw-slides{position:relative;height:clamp(340px,52vw,560px);overflow:hidden}
.fw-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .7s ease,visibility .7s}
.fw-slide.is-active{opacity:1;visibility:visible}
.fw-slide>.pic{position:absolute;inset:0}
.fw-slide>.pic img{width:100%;height:100%;object-fit:cover}
.fw-slide-wrap{position:relative;height:100%;display:flex;align-items:flex-end;padding-bottom:64px}
.fw-slide-panel{background:#fff;border-radius:var(--radius);padding:22px 26px 24px;max-width:560px;box-shadow:0 10px 40px rgba(0,0,0,.18)}
.fw-slide-panel .kicker{color:var(--brand)}
.fw-slide-panel h2{margin:8px 0 8px;font:400 clamp(24px,3vw,36px)/1.15 var(--display)}
.fw-slide-panel h2 a{color:var(--ink);text-decoration:none}
.fw-slide-panel h2 a:hover{text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:3px}
.fw-slide-panel p{margin:0;color:var(--muted);font-size:17px;line-height:1.5}
.fw-controls{position:absolute;left:0;right:0;bottom:16px;display:flex;align-items:center;gap:12px;justify-content:flex-end}
.fw-prev,.fw-next{width:40px;height:40px;border-radius:50%;border:0;background:#fff;color:var(--ink);font:400 26px/1 var(--sans);cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.2)}
.fw-dots{display:flex;gap:8px}
.fw-dot{width:11px;height:11px;border-radius:50%;border:2px solid #fff;background:transparent;padding:0;cursor:pointer}
.fw-dot.is-active{background:var(--signal);border-color:var(--signal)}
.fw-hero .pic-credit{bottom:auto;top:12px}

/* Suche auf dem Slider */
.fw-search{position:relative;z-index:3;margin:-28px auto 0;max-width:760px;background:#fff;border-radius:var(--radius);padding:18px 20px 20px;box-shadow:0 10px 34px rgba(20,40,40,.14)}
.fw-search label{display:block;font:400 20px/1.2 var(--display);margin-bottom:10px}
.fw-search-row{display:flex;gap:10px}
.fw-search input{flex:1;min-width:0;font:400 17px/1.2 var(--sans);padding:14px 16px;border:2px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink)}
.fw-search input:focus{border-color:var(--brand);outline:none}
.fw-search button{font:700 16px/1 var(--sans);padding:0 22px;border:0;border-radius:12px;background:var(--brand);color:#fff;cursor:pointer}

/* Wegweiser-Schilder */
.fw-signs{padding-block:44px 8px}
.fw-signs h2{font:400 clamp(24px,2.6vw,32px)/1.15 var(--display);margin:0 0 18px}
.fw-signs ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.fw-sign{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;padding:16px 34px 16px 18px;background:color-mix(in srgb,var(--c) 10%,#fff);color:var(--ink);text-decoration:none;border-radius:12px 0 0 12px;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 50%,calc(100% - 22px) 100%,0 100%);transition:background .2s,transform .2s}
.fw-sign svg{grid-row:1/3;color:var(--c)}
.fw-sign-name{font:700 18px/1.2 var(--sans)}
.fw-sign-n{font:500 13px/1.3 var(--sans);color:var(--muted)}
.fw-sign:hover,.fw-sign:focus-visible{background:color-mix(in srgb,var(--c) 20%,#fff);transform:translateX(3px)}

/* Farbige Themenkarten */
.fw-focus{padding-top:40px}
.fw-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.fw-tile{display:flex;flex-direction:column;border-radius:var(--radius);overflow:hidden;background:var(--brand);color:#fff;box-shadow:0 2px 14px rgba(20,40,40,.1)}
.fw-tile-media{display:block;aspect-ratio:16/10;overflow:hidden}
.fw-tile-media .pic,.fw-tile-media img{width:100%;height:100%;object-fit:cover}
.fw-tile-body{padding:18px 20px 22px;flex:1}
.fw-tile h3{margin:0 0 8px;font:400 22px/1.2 var(--display)}
.fw-tile h3 a{color:#fff;text-decoration:none}
.fw-tile h3 a:hover{text-decoration:underline;text-decoration-color:var(--signal)}
.fw-tile p{margin:0;font-size:16px;line-height:1.5;color:color-mix(in srgb,#fff 85%,var(--brand))}
.fw-tile .ad-label{background:#fff;color:var(--brand);margin-bottom:8px}

/* Fuß */
.theme-familie .foot{background:color-mix(in srgb,var(--brand) 92%,#000)}
.theme-familie .foot-brand{font:400 26px/1 var(--display)}
.theme-familie .foot-brand b{font-weight:400}

@media (max-width:1060px){.fw-signs ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.fw-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){
  .fw-slides{height:auto;aspect-ratio:auto;display:grid}
  .fw-slide{position:relative;grid-area:1/1}
  .fw-slide>.pic{position:relative;height:240px}
  .fw-slide-wrap{display:block;padding:0 var(--gutter) 70px;margin-top:-40px}
  .fw-slide-panel{padding:16px 18px}
  .fw-controls{justify-content:center}
  .fw-search{margin-top:16px}
  .fw-search-row{flex-direction:column}
  .fw-search button{padding:14px}
  .fw-tiles{grid-template-columns:1fr}
  .fw-signs ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .fw-sign{grid-template-columns:1fr;padding:12px 26px 12px 14px;row-gap:4px}
  .fw-sign svg{grid-row:auto;width:28px;height:28px}
  .fw-sign-name{font-size:16px}
}
@media (prefers-reduced-motion:reduce){.fw-slide{transition:none}}