/* funsports24: eigenes CSS ohne Framework. Layout über CSS Grid und fluide Größen. */
@font-face{font-family:"Cormorant Garamond";font-weight:500;font-display:swap;src:url(../fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:600;font-display:swap;src:url(../fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Raleway;font-weight:400;font-display:swap;src:url(../fonts/raleway-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Raleway;font-weight:600;font-display:swap;src:url(../fonts/raleway-latin-600-normal.woff2) format("woff2")}

:root{
	--blau:#0088d0;--blau-knopf:#0072b0;--blau-dunkel:#006ba5;--flaeche:#eef6fb;--flaeche-warm:#f7f7f5;
	--text:#202020;--grau:#6a6f76;--linie:#e3e6e9;
	--serif:"Cormorant Garamond",Georgia,serif;--sans:Raleway,system-ui,sans-serif;
	--rand:clamp(1rem,4vw,2.5rem);--abstand:clamp(3rem,7vw,5.5rem);
	--breit:1320px;--auflage:1200px;--text-breit:760px;--radius:6px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:6rem;-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--text);font:400 clamp(1rem,.96rem + .2vw,1.09rem)/1.75 var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:var(--blau-dunkel);text-decoration:none;transition:color .2s}
a:hover{color:var(--blau)}
h1,h2,h3,h4{margin:0 0 .6em;font-family:var(--serif);font-weight:500;line-height:1.15;letter-spacing:.01em;color:var(--text)}
h1{font-size:clamp(2.3rem,1.6rem + 3vw,3.6rem)}
h2{font-size:clamp(1.8rem,1.4rem + 1.6vw,2.6rem)}
h3{font-size:clamp(1.4rem,1.2rem + .8vw,1.85rem)}
.raster-breit{width:min(100% - 2*var(--rand),var(--breit));margin-inline:auto}
.raster-text{width:min(100% - 2*var(--rand),var(--text-breit));margin-inline:auto}
.abschnitt{padding-block:var(--abstand)}
.abschnitt-titel{text-align:center;margin-bottom:1.4em}
.unsichtbar,.sprungmarke:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.sprungmarke:focus{position:fixed;z-index:100;top:.5rem;left:.5rem;padding:.5rem 1rem;background:#fff}

/* Kopf: Menü links, Logo mittig, Suche rechts, wie in der Vorlage. */
.kopf{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);transition:box-shadow .25s}
.kopf.ist-unten{box-shadow:0 1px 0 var(--linie)}
.kopf-innen{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;padding-block:.9rem}
.logo{width:auto;height:clamp(46px,5vw,64px);transition:height .25s}
.kopf.ist-unten .logo{height:44px}
.marke{display:block}
.hauptmenue .menu{display:flex;flex-wrap:wrap;gap:.2rem 1.6rem;margin:0;padding:0;list-style:none}
.hauptmenue li{position:relative}
.hauptmenue a{display:block;padding:.3rem 0;color:var(--text);font-size:.88rem;font-weight:600;letter-spacing:.03em}
.hauptmenue a:hover,.hauptmenue .current-menu-item>a{color:var(--blau-dunkel)}
.hauptmenue .sub-menu{position:absolute;top:100%;left:-1rem;min-width:13rem;margin:0;padding:.5rem 1rem;list-style:none;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.08);border-radius:var(--radius);opacity:0;visibility:hidden;transform:translateY(6px);transition:.2s}
.hauptmenue li:hover>.sub-menu,.hauptmenue li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none}
.suche{justify-self:end}
.suche input{width:clamp(9rem,14vw,12rem);padding:.45rem .9rem;border:1px solid var(--linie);border-radius:99px;background:var(--flaeche-warm);font:inherit;font-size:.88rem}
.menu-knopf{display:none}

/* Kopffläche: Bild über die volle Breite, Inhalt ragt als Karte hinein. */
.held{position:relative;height:clamp(260px,38vw,500px);overflow:hidden;background:#27323a}
.held-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%}
.auflage{position:relative;z-index:2;width:min(100% - 2*var(--rand),var(--auflage));margin:clamp(-7rem,-9vw,-3.5rem) auto var(--abstand);padding:clamp(1.5rem,4vw,3.5rem);background:#fff;border-radius:calc(var(--radius) + 4px);box-shadow:0 18px 50px rgba(20,40,60,.12)}
.titel-kopf{margin-bottom:clamp(1.2rem,3vw,2rem);text-align:center}
.titel-kopf h1{max-width:22em;margin-inline:auto;margin-bottom:.3em;font-size:clamp(1.9rem,1.55rem + 1.5vw,2.75rem);line-height:1.18}
.titel-kopf .brotkrumen,.titel-kopf .brotkrumen a{color:var(--grau)}
.beitrag-meta{margin:0 0 1.6rem;text-align:center}
.inhalt>*:last-child{margin-bottom:0}
.brotkrumen{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;font-size:.84rem}
.startseite-inhalt{padding-block:clamp(1.5rem,4vw,3rem);border-block:1px solid var(--linie);margin-bottom:var(--abstand)}

/* Filter */
.filter{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;margin-bottom:clamp(1.8rem,4vw,3rem)}
.filter select{min-width:13rem;padding:.6rem 2.4rem .6rem 1.1rem;border:1px solid var(--linie);border-radius:99px;background:var(--flaeche);color:var(--text);font:600 .9rem var(--sans);cursor:pointer;transition:border-color .2s,box-shadow .2s}
.filter select:hover,.filter select:focus{border-color:var(--blau);box-shadow:0 0 0 3px rgba(0,136,208,.14);outline:0}

/* Suche mit Vorschlägen */
.suche{position:relative}
.vorschlaege{position:absolute;top:calc(100% + .4rem);right:0;z-index:30;width:min(24rem,90vw);margin:0;padding:.35rem;list-style:none;background:#fff;border-radius:var(--radius);box-shadow:0 14px 40px rgba(0,0,0,.14);animation:einblenden .18s ease both}
.vorschlaege[hidden]{display:none}
.vorschlaege a{display:block;padding:.5rem .7rem;border-radius:4px;color:var(--text);font-size:.9rem;line-height:1.35}
.vorschlaege a:hover,.vorschlaege [aria-selected=true] a{background:var(--flaeche);color:var(--blau-dunkel)}
.vorschlaege .leer{padding:.5rem .7rem;color:var(--grau);font-size:.88rem}
.meta{color:var(--grau);font-size:.86rem}

/* Karten */
.karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:clamp(1.8rem,3.5vw,3rem) clamp(1.2rem,2.5vw,2.2rem)}
.karte{display:flex;flex-direction:column}
.karte.neu{animation:einblenden .55s ease both}
@keyframes einblenden{from{opacity:0;transform:translateY(14px)}}
.karte-bild{display:block;aspect-ratio:3/2;overflow:hidden;border-radius:var(--radius);background:var(--flaeche)}
.karte-bild img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.karte:hover .karte-bild img{transform:scale(1.04)}
.karte-platzhalter{display:block;height:100%}
.karte-text{padding-top:1.1rem}
.karte-text p{margin:0 0 .4rem;font-size:.95rem}
.karte h2{margin:.25em 0 .35em;font-size:clamp(1.45rem,1.3rem + .5vw,1.75rem)}
.karte h2 a{color:var(--text)}
.karte h2 a:hover{color:var(--blau)}
.kategorie{font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.knopf{display:inline-block;padding:.7rem 1.8rem;border-radius:var(--radius);background:var(--blau-knopf);color:#fff;font-size:.9rem;font-weight:600;letter-spacing:.03em;transition:background .2s}
.knopf:hover{background:var(--blau-dunkel);color:#fff}
.mehr{margin-top:clamp(2rem,5vw,3.5rem);text-align:center}
.knopf[aria-busy=true]{opacity:.6;pointer-events:none}

/* Startseite */
.aufmacher{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);align-items:center;margin-bottom:clamp(2rem,5vw,3.5rem)}
.aufmacher-bild{display:block;aspect-ratio:16/10;overflow:hidden;border-radius:var(--radius);background:var(--flaeche)}
.aufmacher-bild img{width:100%;height:100%;object-fit:cover}
.aufmacher h2{font-size:clamp(1.9rem,1.5rem + 1.6vw,2.7rem)}
.aufmacher h2 a{color:var(--text)}

/* Beitrag */
.inhalt>*:first-child{margin-top:0}
.inhalt h2{margin-top:1.7em}
.inhalt h3{margin-top:1.5em}
.inhalt ul,.inhalt ol{padding-left:1.3em}
.inhalt img{border-radius:var(--radius)}
.inhalt figure{margin:2em 0}
/* Beitragsbild im Text: mittig beschnitten, nie höher als breit. */
.inhalt .fs24-foto img{width:100%;aspect-ratio:2/1;object-fit:cover;object-position:center}
.inhalt figcaption,.wp-caption-text{margin-top:.5em;color:var(--grau);font-size:.85rem}
.inhalt table{display:block;width:100%;max-width:100%;margin:1.5em 0;overflow-x:auto;border-collapse:collapse;font-size:.95rem}
.inhalt th,.inhalt td{padding:.6em .7em;border-bottom:1px solid var(--linie);text-align:left}
.inhalt th{background:var(--flaeche);color:var(--text);font-weight:600}
.inhalt figure.alignleft{float:left;width:min(42%,340px);margin:.4em 2rem 1rem 0}
.inhalt figure.alignright{float:right;width:min(42%,340px);margin:.4em 0 1rem 2rem}
.inhalt hr{clear:both;margin-block:clamp(2rem,5vw,3.5rem);border:0;border-top:1px solid var(--linie)}
.inhalt .wp-block-buttons{display:flex;padding-top:.6rem}
.inhalt .wp-block-button__link{display:inline-block;padding:.65rem 1.6rem;border-radius:var(--radius);background:var(--blau-knopf);color:#fff;font-size:.9rem;font-weight:600;transition:background .2s,transform .2s}
.inhalt .wp-block-button__link:hover{background:var(--blau-dunkel);color:#fff;transform:translateY(-2px)}
.aligncenter{margin-inline:auto}

/* Anzeigen */
.anzeige{margin:1.2rem 0 clamp(2rem,5vw,3rem);padding:1rem;border-radius:var(--radius);background:var(--flaeche-warm);text-align:center}
.anzeige img{display:inline-block;max-width:100%;border-radius:4px}
.anzeige-label{margin:0 0 .5rem;color:var(--grau);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase}

/* Fuß */
.fuss{padding-block:clamp(2.5rem,6vw,4rem);background:var(--flaeche-warm);font-size:.88rem;color:var(--grau)}
.fuss-innen{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem}
.fuss-menue{display:flex;flex-wrap:wrap;gap:.3rem 1.4rem;margin:0;padding:0;list-style:none}
.fuss-menue a{color:var(--grau)}
.fuss p{margin:0}

@media (max-width:900px){
	.kopf-innen{grid-template-columns:auto 1fr auto}
	.marke{justify-self:center}
	.menu-knopf{display:block;width:2.4rem;height:2.4rem;padding:0;border:0;background:none;cursor:pointer}
	.menu-knopf span:first-child{display:block;width:1.5rem;height:2px;margin:auto;background:var(--text);box-shadow:0 -7px var(--text),0 7px var(--text)}
	.hauptmenue{position:absolute;inset:100% 0 auto;display:grid;grid-template-rows:0fr;background:#fff;box-shadow:0 12px 24px rgba(0,0,0,.07);transition:grid-template-rows .3s}
	.hauptmenue.offen{grid-template-rows:1fr}
	.hauptmenue>*{overflow:hidden;min-height:0}
	.hauptmenue .menu{display:block;padding:0 var(--rand)}
	.hauptmenue .menu>li:last-child{padding-bottom:1rem}
	.hauptmenue .sub-menu{position:static;box-shadow:none;opacity:1;visibility:visible;transform:none;padding:0 0 0 1rem}
	.suche{grid-column:1/-1;justify-self:stretch}
	.suche input{width:100%}
	.vorschlaege{left:0;right:0;width:auto}
	.aufmacher{grid-template-columns:1fr}
	.inhalt figure.alignleft,.inhalt figure.alignright{float:none;width:100%;margin:1rem 0}
}
/* Seitenwechsel: Die neue Seite zieht wie ein Vorhang von unten über die alte, ein Kartenbild wächst zum Kopfbild.
   Browser ohne View Transitions bekommen trotzdem die Einstiegs-Animationen unten. */
@view-transition{navigation:auto}
::view-transition-group(root){animation-duration:.85s}
::view-transition-old(root){animation:alt-weg .85s cubic-bezier(.65,0,.2,1) both}
::view-transition-new(root){animation:neu-rein .85s cubic-bezier(.65,0,.2,1) both}
@keyframes alt-weg{to{transform:scale(.92) translateY(-3%);filter:brightness(.55);border-radius:18px}}
@keyframes neu-rein{from{clip-path:inset(100% 0 0 0 round 28px)}to{clip-path:inset(0 0 0 0 round 0)}}
::view-transition-group(fs24-bild){z-index:5;animation-duration:.85s;animation-timing-function:cubic-bezier(.65,0,.2,1);overflow:hidden;border-radius:8px}
::view-transition-old(fs24-bild),::view-transition-new(fs24-bild){height:100%;width:100%;object-fit:cover;animation-duration:.85s}

/* Einstieg: Kopfbild zoomt zurück, Titel steigt Wort für Wort auf, die Karte schiebt sich hoch. */
.fs24-js .held-bild{animation:held-zoom 1.8s cubic-bezier(.2,.7,.2,1) both}
@keyframes held-zoom{from{transform:scale(1.16);filter:saturate(.6) brightness(.8)}}
.wort{display:inline-block;overflow:hidden;vertical-align:bottom;padding-block:.08em;margin-block:-.08em}
.wort>span{display:inline-block;animation:wort-auf .9s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(.25s + var(--i)*.06s)}
@keyframes wort-auf{from{transform:translateY(110%) rotate(3deg)}}
.fs24-js .brotkrumen{animation:sanft .8s .8s ease both}
@keyframes sanft{from{opacity:0}}
.fs24-js .auflage{animation:hochschieben 1.1s .3s cubic-bezier(.16,1,.3,1) both}
@keyframes hochschieben{from{opacity:0;transform:translateY(90px) scale(.98)}}

/* Beim Scrollen: Bereiche erscheinen gestaffelt. */
.fs24-js .enthuellen{opacity:0;transform:translateY(34px);transition:opacity .8s ease,transform .9s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0)*70ms)}
.fs24-js .enthuellen.sichtbar{opacity:1;transform:none}
.fs24-js .karte-bild.enthuellen,.fs24-js .karte.enthuellen .karte-bild{clip-path:inset(0 0 100% 0);transition:clip-path 1s cubic-bezier(.65,0,.2,1);transition-delay:calc(var(--i,0)*70ms)}
.fs24-js .karte.enthuellen.sichtbar .karte-bild{clip-path:inset(0)}

@supports (animation-timeline:scroll()){
	/* Kopfbild bewegt sich langsamer als die Seite, Fortschritt oben im Beitrag. */
	.single .kopf::after{content:"";position:absolute;inset:auto 0 0;height:3px;background:var(--blau);transform-origin:left;animation:fortschritt linear both;animation-timeline:scroll(root)}
	@keyframes fortschritt{from{transform:scaleX(0)}}
}
.fs24-bearbeiten .enthuellen{opacity:1;transform:none;clip-path:none}

@media (prefers-reduced-motion:reduce){
	html{scroll-behavior:auto}
	*,*::before,*::after{animation:none!important;transition:none!important}
	@view-transition{navigation:none}
}

/* Infoboxen und Hinweise des Redaktions-Plugins im Design des Themes. */
.inhalt .fs24-box{background:var(--flaeche);color:var(--text)}
.inhalt .fs24-box::before{color:var(--blau-dunkel);font-family:var(--sans);font-weight:600}
.inhalt .fs24-box .fs24-box-titel{font-family:var(--serif);font-size:1.4em;font-weight:600}
.inhalt .fs24-box .fs24-box-wert{font-family:var(--serif);font-weight:600;color:var(--blau-dunkel)}
.inhalt .fs24-box .fs24-box-deko{font-family:var(--serif);color:var(--blau)}
.inhalt .fs24-box[class*="fs24-motiv-"]::after{background:var(--blau)}
.inhalt .fs24-box-tipp{background:var(--blau-dunkel);color:#fff}
.inhalt .fs24-box-tipp::before{color:#d9eefa}
.inhalt .fs24-box-tipp .fs24-box-deko{color:#fff}
.inhalt .fs24-box-tipp[class*="fs24-motiv-"]::after{background:#fff}
.inhalt .fs24-box-achtung{background:#fbf4e6}
.inhalt .fs24-box-achtung::before{color:#8a5f00}
.fs24-ki-hinweis,.fs24-quellen,.fs24-affiliate-hinweis{color:var(--grau)}