/*
Theme Name: Bergwitztriathlon
Theme URI: https://www.bergwitztriathlon.de
Author: TriathlonFreunde Wittenberg e. V.
Description: Theme fuer die Website des Bergwitztriathlons. Kopf mit dem vorgeschriebenen Doppel-Logo, Klappmenue, Hero mit Keyvisual, Inhaltskarten, Sponsorenband. Inhalte werden als normale WordPress-Seiten im Block-Editor gepflegt.
Version: 2.26.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bergwitztriathlon
*/

:root{
  /* Offizielle Markenfarben des Bergwitztriathlons (Palette der Social-Media-Karten) */
  --lila:#550A72;
  --lila-tief:#3B0850;
  --beere:#6D123F;
  --orange:#FC860E;
  --amber:#E99A21;
  --creme:#EEE5DA;      /* Schrift auf dunklen Flaechen - NICHT der Seitengrund */
  --papier:#E9E7E3;     /* Grund unter dem Inhalt: entfaerbtes Papier, kein Beige */
  --text:#272C36;
  --anthrazit:#324044;
  --koralle:#E05B4C;
  --rosa:#F6B6A1;
  --mauve:#675E7C;
  --mauve-hell:#C7BFD3;
  --blau:#597684;
  --blau-tief:#324044;
  --blau-hell:#6094A7;
  --blau-licht:#A9CEDC;
  --gruen:#537054;
  --font:"Source Sans 3","Helvetica Neue",Arial,sans-serif;
  --font-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --breite:1100px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

/* Sanfter Übergang zwischen den Unterseiten (Browser, die es können). */
@view-transition{navigation:auto}
header.site{view-transition-name:bwt-kopf}
.bg{view-transition-name:bwt-grund}
@media(prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
body{
  font-family:var(--font);
  color:var(--text);
  background:var(--papier);
  line-height:1.6;
}
img{max-width:100%;height:auto}

/* ---------- Hintergrund ---------- */
.bg{
  position:fixed;inset:0;z-index:-2;
  background:var(--bwt-hero,none) center/cover no-repeat;
  background-color:var(--lila-tief);
}
.bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(59,8,80,.94) 0%,rgba(85,10,114,.82) 38%,rgba(109,18,63,.32) 62%,rgba(39,44,54,.06) 82%),
    linear-gradient(180deg,rgba(39,44,54,.05) 0%,rgba(39,44,54,.45) 100%);
}
/* Auf Unterseiten steht kein Hero davor - dann darf es dunkler sein. */
body:not(.home) .bg::after{
  background:
    linear-gradient(100deg,rgba(59,8,80,.96) 0%,rgba(85,10,114,.88) 45%,rgba(109,18,63,.5) 72%,rgba(39,44,54,.22) 90%),
    linear-gradient(180deg,rgba(39,44,54,.10) 0%,rgba(39,44,54,.55) 100%);
}

/* ---------- Sprungmarke ---------- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:60;
  background:var(--orange);color:var(--lila-tief);
  font-family:var(--font-display);font-weight:700;
  padding:.7rem 1.1rem;text-decoration:none;
}
.skip:focus{left:.6rem;top:.6rem}
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap;
}

/* ---------- Kopf ---------- */
header.site{
  position:sticky;top:0;z-index:20;
  background:rgba(85,10,114,.94);
  backdrop-filter:blur(6px);
  border-bottom:3px solid var(--orange);
}
.admin-bar header.site{top:32px}
@media(max-width:782px){.admin-bar header.site{top:46px}}
.nav-inner{
  position:relative;
  max-width:var(--breite);margin:0 auto;padding:.7rem 1.2rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.logo{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.logo .lockup{display:flex;align-items:center;gap:.9rem}
.logo .lockup img{display:block;width:auto}
.logo .l-haupt{height:5.4rem}
.logo .l-verein{height:7rem}
.logo .trenner{
  width:1px;align-self:stretch;margin:.35rem 0;
  background:rgba(238,229,218,.4);
}
.logo .lockup img.zeichen{display:none}
@media(max-width:1050px){
  .logo .lockup{gap:.7rem}
  .logo .l-haupt{height:2.9rem}
  .logo .lockup img.voll{display:none}
  .logo .lockup img.zeichen{display:block;height:2.9rem}
}
.aktionen{display:flex;align-items:center;gap:.7rem}
.burger{
  background:transparent;border:1px solid rgba(238,229,218,.45);
  border-radius:3px;padding:.6rem .65rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .18s,border-color .18s;
}
.burger:hover{background:rgba(238,229,218,.14);border-color:var(--creme)}
.striche{display:block;width:1.35rem;height:1rem;position:relative}
.striche i{
  position:absolute;left:0;right:0;height:2px;background:var(--creme);border-radius:2px;
  transition:transform .26s cubic-bezier(.2,.7,.3,1),opacity .16s linear;
}
.striche i:nth-child(1){top:0}
.striche i:nth-child(2){top:calc(50% - 1px)}
.striche i:nth-child(3){bottom:0}
.burger[aria-expanded="true"] .striche i:nth-child(1){transform:translateY(.44rem) rotate(45deg)}
.burger[aria-expanded="true"] .striche i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] .striche i:nth-child(3){transform:translateY(-.44rem) rotate(-45deg)}
.menu{
  position:absolute;top:calc(100% - .4rem);right:1.2rem;z-index:25;
  min-width:15rem;padding:.5rem;
  background:var(--lila-tief);
  border:1px solid rgba(238,229,218,.22);
  border-radius:5px;
  box-shadow:0 22px 50px rgba(20,10,12,.5);
  transform-origin:top right;
  transform:translateY(-.5rem) scale(.97);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:transform .22s cubic-bezier(.2,.7,.3,1),opacity .18s linear,visibility 0s linear .2s;
}
header.site.offen .menu{
  transform:none;opacity:1;visibility:visible;pointer-events:auto;
  transition-delay:0s;
}
.menu ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.1rem}
.menu a{
  font-family:var(--font-display);
  color:var(--creme);text-decoration:none;
  font-size:.85rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  padding:.7rem .9rem;border-radius:3px;
  display:flex;align-items:center;gap:.6rem;
  transition:background .16s,color .16s,padding-left .16s;
  opacity:0;transform:translateY(-.35rem);
}
header.site.offen .menu a{opacity:1;transform:none;transition:opacity .22s ease,transform .22s ease,background .16s,padding-left .16s}
header.site.offen .menu li:nth-child(1) a{transition-delay:.02s}
header.site.offen .menu li:nth-child(2) a{transition-delay:.05s}
header.site.offen .menu li:nth-child(3) a{transition-delay:.08s}
header.site.offen .menu li:nth-child(4) a{transition-delay:.11s}
header.site.offen .menu li:nth-child(5) a{transition-delay:.14s}
header.site.offen .menu li:nth-child(6) a{transition-delay:.17s}
header.site.offen .menu li:nth-child(7) a{transition-delay:.2s}
header.site.offen .menu li:nth-child(8) a{transition-delay:.23s}
header.site.offen .menu li:nth-child(9) a{transition-delay:.26s}
.menu a::before{
  content:"";width:.5rem;height:2px;background:rgba(238,229,218,.35);flex:none;
  transition:width .16s,background .16s;
}
.menu a:hover{background:rgba(238,229,218,.12);padding-left:1.1rem}
.menu a:hover::before{width:1rem;background:var(--orange)}
.menu .current-menu-item>a,
.menu .current_page_item>a,
.menu .current-menu-ancestor>a{background:var(--orange);color:var(--lila-tief)}
.menu .current-menu-item>a::before,
.menu .current_page_item>a::before{background:var(--lila-tief);width:1rem}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--orange);outline-offset:2px;
}

/* ---------- Hero ---------- */
.hero{
  min-height:clamp(24rem,58vh,38rem);
  display:flex;flex-direction:column;justify-content:flex-end;
  max-width:var(--breite);margin:0 auto;padding:1.8rem 1.2rem 3rem;
  color:var(--creme);
}
.hero.klein{min-height:26vh;padding:2rem 1.2rem 2rem}
.kicker{
  font-family:var(--font-display);
  display:inline-block;align-self:flex-start;
  background:var(--orange);color:var(--lila-tief);
  font-weight:700;letter-spacing:.18em;font-size:.75rem;text-transform:uppercase;
  padding:.35rem .8rem;margin-bottom:1rem;
}
.hero h1{
  font-family:var(--font-display);text-wrap:balance;
  font-size:clamp(2.3rem,6.5vw,4.4rem);
  line-height:1.03;font-weight:800;letter-spacing:-.02em;
  text-shadow:0 2px 24px rgba(0,0,0,.45);
}
.hero.klein h1{font-size:clamp(2rem,5vw,3.2rem)}
.hero .intro{
  margin-top:1rem;max-width:36rem;font-size:1.05rem;
  text-shadow:0 1px 12px rgba(0,0,0,.5);
}
.btn-row{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.8rem}
.btn{
  font-family:var(--font-display);
  display:inline-block;text-decoration:none;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;font-size:.85rem;
  padding:.85rem 1.6rem;border-radius:3px;transition:transform .2s,background .2s;
  background:var(--creme);color:var(--lila-tief);border:2px solid var(--creme);cursor:pointer;
}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--creme)}
.btn.ghost:hover{background:var(--creme);color:var(--lila-tief)}

/* ---------- Inhalt ---------- */
main{max-width:var(--breite);margin:0 auto;padding:0 1.2rem 4rem}
.card{
  background:var(--papier);border-radius:4px;
  padding:clamp(1.6rem,4vw,3rem);margin-top:2.5rem;
  box-shadow:0 18px 50px rgba(39,44,54,.35);
}
body:not(.home) main{padding-top:2.5rem}
body:not(.home) main>.card:first-child{margin-top:0}
.card>*+*{margin-top:.8rem}
h1.seitentitel,h2{
  font-family:var(--font-display);text-wrap:balance;
  font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800;letter-spacing:-.01em;
  color:var(--lila);margin-bottom:.2rem;
}
.sub{color:var(--blau);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.78rem;margin-bottom:1.6rem}
.card h2{margin-top:2rem}
.card>h2:first-child,.card>h1:first-child{margin-top:0}
h3{font-family:var(--font-display);font-size:1.15rem;margin:1.8rem 0 .5rem;color:var(--lila-tief)}
h4{font-family:var(--font-display);font-size:1rem;margin:1.4rem 0 .4rem;color:var(--lila-tief)}
p+p{margin-top:.8rem}
ul,ol{margin:.6rem 0 .6rem 1.2rem}
li{margin:.25rem 0}
a{color:var(--blau)}
a:hover{color:var(--lila)}
::selection{background:var(--blau);color:var(--creme)}
strong{font-weight:700}

/* Tabellen - auch die des Block-Editors */
.tablewrap,.wp-block-table{overflow-x:auto}
table{width:100%;border-collapse:collapse;margin-top:1rem;font-size:.95rem;font-variant-numeric:tabular-nums}
th{background:var(--lila);color:var(--creme);text-align:left;padding:.7rem .8rem;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-family:var(--font-display);border:0}
td{padding:.7rem .8rem;border:0;border-bottom:1px solid var(--mauve-hell)}
tbody tr:nth-child(even) td{background:rgba(199,191,211,.18)}
.wp-block-table figcaption{font-size:.85rem;color:var(--mauve);margin-top:.5rem}

/* Kacheln */
.grid,.wp-block-columns.bwt-kacheln{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));margin-top:1.2rem}
.wp-block-columns.bwt-kacheln{flex-wrap:wrap!important}
.tile,.wp-block-column.bwt-tile{
  background:linear-gradient(135deg,var(--lila),var(--lila-tief));
  color:var(--creme);padding:1.3rem;border-radius:4px;position:relative;
}
.tile b,.bwt-tile .wert{font-family:var(--font-display);display:block;font-size:1.45rem;letter-spacing:-.01em;line-height:1.15;font-weight:700}
.tile span,.bwt-tile .label{display:block;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;opacity:.85;margin:0}
.bwt-tile .wert{margin:.15rem 0 0}
.bwt-tile a{color:var(--creme)}

/* Galerie */
.gallery{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));margin-top:1.2rem}
.ph{
  aspect-ratio:4/3;border-radius:4px;position:relative;overflow:hidden;
  background:repeating-linear-gradient(45deg,var(--mauve-hell),var(--mauve-hell) 12px,#e2d9dc 12px,#e2d9dc 24px);
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:var(--lila-tief);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding:.6rem;
}
.ph img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.wp-block-gallery.has-nested-images figure.wp-block-image{border-radius:4px;overflow:hidden}
.wp-block-gallery.has-nested-images figure.wp-block-image img{aspect-ratio:4/3;object-fit:cover;width:100%}

/* Hinweiskasten */
/* Hinweiskasten: zurueckhaltendes Grau-Lila aus der Palette. Orange bleibt den
   Knoepfen, Zahlen und dem Fokusrahmen vorbehalten - so behaelt es seine Kraft.
   Der Balken steht bewusst kraeftiger als der Grund, sonst verliert der Kasten
   seine Kante. */
.note,.wp-block-group.is-style-bwt-note{
  border-left:4px solid var(--mauve);background:rgba(199,191,211,.32);
  padding:.9rem 1.1rem;margin-top:1.4rem;border-radius:0 3px 3px 0;font-size:.95rem;
}
.wp-block-group.is-style-bwt-note p{margin:0}
.wp-block-group.is-style-bwt-note p+p{margin-top:.6rem}
.hint{font-size:.85rem;color:var(--blau);margin-top:.8rem}

/* Download- und Kartenlinks */
.wp-block-buttons{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.2rem}
.wp-block-button__link{
  font-family:var(--font-display);background:var(--lila);color:var(--creme);
  border-radius:3px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  font-size:.85rem;padding:.85rem 1.6rem;text-decoration:none;transition:background .2s,transform .2s;
}
.wp-block-button__link:hover{background:var(--lila-tief);transform:translateY(-2px);color:var(--creme)}
.is-style-outline .wp-block-button__link{background:transparent;color:var(--lila);border:2px solid var(--lila)}
.is-style-outline .wp-block-button__link:hover{background:var(--lila);color:var(--creme)}

/* Formulare */
form.bwt{display:grid;gap:.9rem;max-width:520px;margin-top:1.2rem}
label{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--lila-tief)}
input,select,textarea{
  width:100%;padding:.7rem .8rem;border:1px solid var(--mauve-hell);
  border-radius:3px;font:inherit;background:#fff;color:var(--text);
}
button,input[type=submit]{
  font-family:var(--font-display);
  background:var(--lila);color:var(--creme);border:0;cursor:pointer;
  padding:.9rem 1.6rem;border-radius:3px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;font-size:.85rem;transition:background .2s;
}
button:hover,input[type=submit]:hover{background:var(--lila-tief)}

/* ---------- Der Moment ---------- */
.moment{
  position:relative;overflow:hidden;
  background:linear-gradient(155deg,var(--beere) 0%,var(--lila-tief) 45%,var(--lila) 100%);
  border-top:3px solid var(--orange);border-bottom:3px solid var(--orange);
  color:var(--creme);
  padding:clamp(2.6rem,6vw,4.6rem) 0;
}
.moment::before{
  content:"";position:absolute;inset:0;
  background:var(--bwt-hero,none) center/cover no-repeat;
  opacity:.22;filter:blur(2px) saturate(.35);transform:scale(1.06);
}
.moment-inner{position:relative;max-width:var(--breite);margin:0 auto;padding:0 1.2rem}
.moment-kicker{
  display:inline-block;font-family:var(--font-display);
  font-size:.72rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--orange);margin-bottom:1.1rem;
}
.moment-satz{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.025em;
  font-size:clamp(1.9rem,5.4vw,3.6rem);line-height:1.02;text-wrap:balance;
  color:var(--creme);margin:0;
}
.moment-satz span{display:block}
.moment-satz .hell{color:var(--orange)}
.moment-text{
  margin-top:1.4rem;max-width:44rem;font-size:1.05rem;line-height:1.6;
  color:rgba(238,229,218,.88);text-wrap:pretty;
}
.moment-zitat{
  margin:2.2rem 0 0;padding-left:1.4rem;border-left:3px solid var(--orange);
  max-width:40rem;
}
.moment-zitat blockquote{
  margin:0;font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.15rem,2.6vw,1.7rem);line-height:1.25;color:var(--creme);
}
.moment-zitat blockquote::before{content:"„"}
.moment-zitat blockquote::after{content:"“"}
.moment-zitat figcaption{
  margin-top:.6rem;font-size:.74rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--rosa);
}
.moment-zahlen{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;
  margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid rgba(238,229,218,.22);
}
.moment-zahl{display:flex;flex-direction:column;gap:.15rem}
.moment-zahl .zahl{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1.6rem,3.4vw,2.4rem);line-height:1;color:var(--orange);
  font-variant-numeric:tabular-nums;
}
.moment-zahl .label{
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(238,229,218,.72);
}
@media(max-width:620px){
  .moment-zahlen{grid-template-columns:repeat(2,1fr);gap:1.2rem}
}

/* Sanftes Auftauchen beim Scrollen */
/* Nur wenn JavaScript läuft - ohne JS bleibt alles sichtbar. */
.js [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.js [data-reveal].sichtbar{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none;transition:none}
}

/* ---------- Sponsoren ---------- */

/* Zeile im Hero: "Präsentiert von" + Logo in hellem Chip */
.sp-hero{
  display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
  margin-top:1.6rem;
}
.sp-hero-text{
  font-family:var(--font-display);
  font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(238,229,218,.8);
}
.sp-hero-logo{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--creme);border-radius:3px;padding:.5rem .8rem;
  transition:transform .2s ease;
}
.sp-hero-logo:hover{transform:translateY(-2px)}
.sp-hero-logo img{max-height:2.2rem;width:auto;display:block}

/* Block auf der Startseite */
.sponsoren-block{padding:2.5rem 0 .5rem}
.sp-inner{
  max-width:var(--breite);margin:0 auto;
  background:var(--papier);border-radius:4px;
  padding:clamp(1.6rem,4vw,3rem);
  box-shadow:0 18px 50px rgba(39,44,54,.35);
}
.sp-inner>h2{margin-top:0}
.sponsoren-block.im-inhalt{padding:0}
.sp-inner.blank{background:transparent;box-shadow:none;padding:0;border-radius:0;max-width:none}
.sp-inner.blank .sp-haupt{padding-top:0}
.sp-stufe{
  display:block;
  font-family:var(--font-display);
  font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--blau);
}

/* Hauptsponsor */
.sp-haupt{
  display:grid;gap:1.6rem 2.4rem;align-items:center;
  grid-template-columns:minmax(12rem,18rem) 1fr;
  padding:1.6rem 0 1.8rem;
  border-bottom:1px solid var(--mauve-hell);
  margin-bottom:1.8rem;
}
.sp-haupt-logo{
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--mauve-hell);border-radius:4px;
  padding:1.6rem 1.4rem;min-height:8rem;
}
.sp-haupt-logo img{max-height:4.6rem;width:auto;display:block}
.sp-haupt-text strong{
  display:block;font-family:var(--font-display);font-size:1.35rem;
  color:var(--lila-tief);margin:.25rem 0 .4rem;
}
.sp-haupt-text p{margin:0;max-width:34rem;text-wrap:pretty}
@media(max-width:720px){
  .sp-haupt{grid-template-columns:1fr;padding-top:1.2rem}
}

/* Partnerraster */
.sp-zwischen{
  font-family:var(--font-display);font-size:.7rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--blau);
  margin:0 0 1rem;
}
.sp-raster{
  display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
}
.sp-kachel{
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--mauve-hell);border-radius:4px;
  min-height:6.4rem;padding:1.1rem 1.2rem;
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
/* Breite Wortmarken laufen in die Breitenbegrenzung, hohe oder quadratische
   Logos duerfen dafuer hoeher werden - sonst wirken sie neben den Wortmarken
   verloren. */
.sp-kachel img{
  max-height:4rem;max-width:82%;width:auto;display:block;
  transition:transform .25s ease;
}
/* Quadratische Logos: gleiche optische Groesse wie eine breite Wortmarke. */
.sp-kachel img.kompakt{max-height:5rem;max-width:66%}
.sp-karte .sp-kachel img.kompakt{max-height:4.4rem}
a.sp-kachel:hover,a.sp-kachel:focus-visible{
  border-color:var(--blau-hell);transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(39,44,54,.16);
}
a.sp-kachel:hover img,a.sp-kachel:focus-visible img{transform:scale(1.04)}
.sp-kachel.hell{background:var(--lila-tief);border-color:var(--lila-tief)}
.sp-kachel.hell img{filter:none;opacity:.95}

/* Noch kein Logo geliefert: der Name trägt die Kachel, damit niemand fehlt. */
.sp-kachel.ohne-logo{background:var(--papier);text-align:center;text-decoration:none}
.sp-name{
  font-family:var(--font-display);font-weight:700;line-height:1.25;
  font-size:1rem;color:var(--blau-tief);text-wrap:balance;
  text-decoration:none;
}
a.sp-kachel.ohne-logo:hover .sp-name,
a.sp-kachel.ohne-logo:focus-visible .sp-name{color:var(--lila)}
.sp-haupt-logo .ohne-logo{border:0;background:transparent;padding:0;min-height:0}
.sp-haupt-logo .sp-name{font-size:1.5rem}

/* Partnerseite: Kachel mit Text */
.sp-karte{
  display:flex;flex-direction:column;gap:.6rem;
  background:#fff;border:1px solid var(--mauve-hell);border-radius:4px;padding:1.2rem;
}
/* Feste Logozeile: alle Namen einer Reihe starten auf derselben Linie. */
.sp-karte-logo{
  display:flex;align-items:center;justify-content:flex-start;
  height:3.4rem;margin-bottom:.2rem;
}
.sp-karte .sp-kachel{border:0;background:transparent;min-height:0;padding:0}
.sp-karte .sp-kachel img{max-height:3.4rem;max-width:100%}
.sp-karte strong{font-family:var(--font-display);color:var(--blau-tief)}
/* Telefon: das Partnerraster wird sonst zu einer endlosen Spalte. Zwei
   Spalten mit kleineren Kacheln kuerzen die Startseite um mehrere
   Bildschirmlaengen, ohne dass ein Logo unlesbar wird. */
@media(max-width:620px){
  .sp-raster{gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(8.6rem,1fr))}
  .sp-kachel{min-height:4.6rem;padding:.7rem .75rem;border-radius:3px}
  .sp-kachel img{max-height:2.6rem;max-width:88%}
  .sp-kachel img.kompakt{max-height:3.2rem;max-width:72%}
  .sp-name{font-size:.82rem}
  .sp-inner{padding-left:1.1rem;padding-right:1.1rem}
  /* Partnerseite: dort traegt jede Karte einen Text, die bleibt einspaltig. */
  .sp-raster:has(.sp-karte){grid-template-columns:1fr;gap:.8rem}
}


.sp-karte p{margin:0;font-size:.9rem;text-wrap:pretty}
.sp-raster:has(.sp-karte){grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}

/* Unterstützer */
.sp-unterstuetzer{
  margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--mauve-hell);
  font-size:.95rem;
}
.sp-unterstuetzer .sp-stufe{margin-bottom:.35rem}

/* Schmale Reihe in der Fußzeile */
.sp-fuss{
  max-width:var(--breite);margin:0 auto 1.8rem;
  padding-bottom:1.6rem;border-bottom:1px solid rgba(238,229,218,.18);
}
.sp-fuss .sp-stufe{color:rgba(238,229,218,.6);margin-bottom:.8rem}
.sp-fuss-reihe{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.sp-klein{
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(238,229,218,.92);border-radius:3px;padding:.4rem .6rem;
  transition:background .2s ease,transform .2s ease;
}
.sp-klein img{max-height:1.6rem;width:auto;display:block;opacity:.9;transition:opacity .2s}
a.sp-klein:hover{background:var(--creme);transform:translateY(-1px)}
a.sp-klein:hover img{filter:none;opacity:1}
.sp-klein.hell{background:rgba(39,44,54,.5)}
.sp-klein.hell img{filter:none;opacity:1}

/* Laufband - nur noch auf Wunsch */
.sponsoren{
  background:var(--papier);
  border-top:3px solid var(--orange);
  padding:1.6rem 0 1.8rem;
  overflow:hidden;
}
.sponsoren .titel{
  max-width:var(--breite);margin:0 auto .9rem;padding:0 1.2rem;
  font-family:var(--font-display);color:var(--mauve);
  font-size:.75rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
}
.lauf{
  position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.lauf-spur{
  display:flex;width:max-content;
  animation:bwt-lauf var(--dauer,40s) linear infinite;
}
.lauf:hover .lauf-spur,.lauf:focus-within .lauf-spur{animation-play-state:paused}
.lauf-spur .satz{display:flex;align-items:center;gap:3rem;padding-right:3rem}
.sp-lauf{display:flex;align-items:center;justify-content:center;height:4.6rem;flex:none}
.sp-lauf img{max-height:4.6rem;width:auto;transition:transform .25s}
a.sp-lauf:hover img{filter:none;opacity:1;transform:scale(1.04)}
.sp-lauf.hell{background:var(--lila-tief);border-radius:4px;padding:.5rem .9rem}
.sp-lauf.hell img{filter:none;opacity:.95}
.lauf-spur .platzhalter{
  display:flex;align-items:center;justify-content:center;
  height:4.6rem;min-width:11rem;flex:none;
  border:2px dashed var(--mauve-hell);border-radius:4px;
  color:var(--mauve);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
}
@keyframes bwt-lauf{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Ergebnisarchiv ---------- */
.jahre-block{margin-top:1.4rem}
.jahre{
  display:grid;gap:.9rem;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  margin-top:1rem;
}
.jahr-karte{
  display:flex;flex-direction:column;gap:.15rem;height:100%;
  background:#fff;border:1px solid var(--mauve-hell);border-left:4px solid var(--blau);
  border-radius:4px;padding:1rem 1.1rem 1.1rem;
}
.jahr-karte.kommend{border-left-color:var(--orange);background:rgba(252,134,14,.10)}
.jahr-zahl{
  font-family:var(--font-display);font-size:1.9rem;font-weight:800;
  line-height:1;color:var(--lila);letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.jahr-karte.kommend .jahr-zahl{color:var(--lila-tief)}
.jahr-nr{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blau)}
.jahr-datum{font-size:.9rem;font-variant-numeric:tabular-nums}
.jahr-notiz{font-size:.78rem;color:var(--mauve);text-wrap:pretty}
.jahr-btns{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:auto;padding-top:.8rem}
.jahr-btn{
  font-family:var(--font-display);text-decoration:none;
  background:var(--lila);color:var(--creme);
  font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:.45rem .8rem;border-radius:3px;transition:background .18s,transform .18s;
}
.jahr-btn:hover{background:var(--lila-tief);transform:translateY(-1px);color:var(--creme)}
.jahr-btn.still{background:transparent;color:var(--blau);border:1px solid var(--blau-hell)}
.jahr-btn.still:hover{background:var(--blau);color:var(--creme)}

/* Ergebnisliste auf der Seite - erst auf Klick */
.rr-box{margin-top:1.4rem}
.rr-platz{
  border:2px dashed var(--blau-hell);border-radius:4px;
  padding:1.4rem 1.5rem;background:rgba(74,144,168,.12);
}
.rr-titel{
  font-family:var(--font-display);font-size:1.1rem;font-weight:700;
  color:var(--blau-tief);margin:0 0 .4rem;
}
.rr-text{font-size:.9rem;max-width:44rem;margin:0}
.rr-knopf{margin-top:1rem}
.rr-alt{margin-top:.7rem;font-size:.82rem}
.rr-box iframe{
  width:100%;min-height:70vh;border:1px solid var(--mauve-hell);border-radius:4px;background:#fff;
}

/* ---------- Meinungen ---------- */
.meinungen{
  position:relative;
  background:linear-gradient(160deg,var(--beere) 0%,#4A0D2C 60%,var(--lila-tief) 100%);
  border-top:3px solid var(--orange);
  padding:2.2rem 0 2.6rem;
  overflow:hidden;
  color:var(--creme);
}
/* Foto im Hintergrund - Bild und Deckkraft setzt inc/galerie.php im Kopf. */
.meinungen::before{
  content:"";position:absolute;inset:0;opacity:0;
  background:none center/cover no-repeat;
  filter:blur(2px) saturate(.35);transform:scale(1.06);
  pointer-events:none;
}
.meinungen-inner{position:relative;max-width:var(--breite);margin:0 auto;padding:0 1.2rem}
.meinungen-kopf{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem;
}
.meinungen h2{color:var(--creme);margin:0}
.mein-alle{
  font-family:var(--font-display);color:var(--rosa);text-decoration:none;
  font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  border-bottom:1px solid rgba(246,182,161,.5);padding-bottom:.15rem;
}
.mein-alle:hover{color:var(--orange);border-color:var(--orange)}

/* Sterne */
.sterne{position:relative;display:inline-flex;line-height:1;white-space:nowrap;vertical-align:middle}
.sterne-grau,.sterne-gold{display:flex;gap:.12em}
.sterne svg{width:1.25em;height:1.25em;display:block;fill:currentColor}
.sterne-grau{color:rgba(238,229,218,.28)}
.sterne-gold{position:absolute;inset:0;overflow:hidden;color:var(--orange)}
.sterne.klein svg{width:.95em;height:.95em}

.sterne-banner{
  display:flex;flex-wrap:wrap;gap:1.6rem 2.6rem;align-items:center;
  background:rgba(238,229,218,.08);
  border:1px solid rgba(238,229,218,.18);
  border-radius:5px;padding:1.3rem 1.5rem;
}
.sterne-gross{display:flex;flex-direction:column;gap:.35rem;min-width:14rem}
.sterne-note{
  font-family:var(--font-display);font-size:3rem;font-weight:800;line-height:1;
  color:var(--orange);letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.sterne-von{
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(238,229,218,.7);margin-top:-.25rem;
}
.sterne-quelle{font-size:.76rem;color:rgba(238,229,218,.7);margin-top:.35rem;max-width:18rem}
.sterne-liste{display:grid;gap:.5rem;flex:1;min-width:16rem}
.sterne-zeile{display:flex;align-items:center;gap:.8rem}
.sterne-label{
  font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(238,229,218,.85);min-width:9rem;
}
.sterne-wert{font-size:.85rem;color:rgba(238,229,218,.75);font-variant-numeric:tabular-nums}

/* Laufband der Zitate */
.mein-lauf{margin-top:1.6rem}
.mein-lauf .lauf-spur .satz{display:flex;align-items:stretch;gap:1rem;padding-right:1rem}
.mein-karte{
  flex:none;width:min(23rem,78vw);
  display:flex;flex-direction:column;gap:.5rem;
  background:var(--papier);color:var(--text);
  border-radius:4px;padding:1.3rem 1.4rem 1.1rem;margin:0;
  box-shadow:0 14px 34px rgba(20,10,12,.32);
  position:relative;
}
.mein-marke{
  position:absolute;top:.35rem;right:.9rem;
  font-family:var(--font-display);font-size:3rem;line-height:1;
  color:rgba(252,134,14,.55);pointer-events:none;
}
.mein-karte blockquote{
  margin:0;padding-right:1.6rem;font-size:.98rem;line-height:1.5;text-wrap:pretty;
}
.mein-karte figcaption{
  margin-top:auto;padding-top:.6rem;
  font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blau-tief);
}
.mein-jahr{color:var(--blau);font-weight:600}

@media(max-width:620px){
  .sterne-banner{padding:1.1rem}
  .sterne-note{font-size:2.4rem}
  .sterne-label{min-width:7.5rem;font-size:.7rem}
}

/* ---------- Instagram ---------- */
.insta{
  position:relative;
  padding:2rem 0 2.8rem;
  background:linear-gradient(180deg,rgba(59,8,80,.25),rgba(59,8,80,.66));
}
.insta::before{
  content:"";position:absolute;inset:0;opacity:0;z-index:0;
  background:none center/cover no-repeat;
  filter:blur(2px) saturate(.35);transform:scale(1.06);
  pointer-events:none;
}
.insta-inner{position:relative;z-index:1;max-width:var(--breite);margin:0 auto;padding:0 1.2rem}
.insta-kopf{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem;
}
.insta h2{color:var(--creme);margin:0;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.insta-folgen{
  font-family:var(--font-display);
  color:var(--lila-tief);background:var(--orange);text-decoration:none;
  font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:.55rem 1rem;border-radius:3px;transition:transform .18s,background .18s;
}
.insta-folgen:hover{transform:translateY(-1px);background:#ff9a33}
.insta-grid{display:grid;gap:1rem;grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.insta-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){
  .insta-grid{grid-template-columns:1fr}
  .insta-grid .insta-kachel:nth-child(n+5){display:none}
}
.insta-kachel{
  display:flex;flex-direction:column;text-decoration:none;color:var(--text);
  background:var(--papier);border-radius:4px;overflow:hidden;
  box-shadow:0 12px 34px rgba(39,44,54,.3);
  transition:transform .22s ease,box-shadow .22s ease;
}
.insta-kachel:hover,.insta-kachel:focus-visible{
  transform:translateY(-3px);
  box-shadow:0 18px 44px rgba(39,44,54,.42);
}
.insta-bild{position:relative;display:block;aspect-ratio:1;background:var(--mauve-hell)}
.insta-bild img{width:100%;height:100%;object-fit:cover;display:block}
.insta-video{
  position:absolute;left:.6rem;top:.6rem;
  background:rgba(39,44,54,.78);color:var(--creme);
  font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:.22rem .5rem;border-radius:2px;
}
.insta-text{
  padding:.9rem 1rem .3rem;font-size:.92rem;line-height:1.45;text-wrap:pretty;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.insta-datum{
  padding:.35rem 1rem 1rem;margin-top:auto;
  color:var(--blau);font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.insta-stand{
  margin-top:1rem;color:rgba(238,229,218,.72);font-size:.76rem;max-width:46rem;
}
.insta .note{background:rgba(238,229,218,.92)}

/* ---------- Fuss ---------- */
footer.site{
  position:relative;overflow:hidden;
  background:var(--lila-tief);color:var(--mauve-hell);
  padding:2.2rem 1.2rem;font-size:.88rem;
}
footer.site::before{
  content:"";position:absolute;inset:0;opacity:0;
  background:none center/cover no-repeat;
  filter:blur(2px) saturate(.3);transform:scale(1.06);
  pointer-events:none;
}
.foot-inner{position:relative;max-width:var(--breite);margin:0 auto;display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.foot-meta{position:relative}
footer.site a{color:var(--rosa);text-decoration-color:rgba(246,182,161,.5)}
footer.site a:hover{color:var(--orange)}
.foot-rechts{text-align:right}
.foot-meta{margin-top:1.2rem;font-size:.8rem;opacity:.75}
.foot-meta ul{list-style:none;margin:0;padding:0;display:flex;gap:1rem;flex-wrap:wrap;justify-content:flex-end}

@media(max-width:620px){
  .hero{min-height:clamp(20rem,52vh,30rem)}
  .foot-inner{flex-direction:column}
  .foot-rechts{text-align:left}
  .foot-meta ul{justify-content:flex-start}
}
@media(max-width:520px){
  .menu{min-width:13rem}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .lauf-spur{animation:none!important;flex-wrap:wrap;width:auto;justify-content:center}
}
@media print{
  .bg,header.site,.sponsoren{display:none}
  body{background:#fff}
  .card{box-shadow:none;margin-top:0}
}

/* --- Rechtsseiten: Vorspann und Kleingedrucktes ------------------------ */
.card p.lead{
  font-size:1.1rem;line-height:1.6;color:var(--lila-tief);
  border-left:4px solid var(--orange);padding-left:1rem;margin-bottom:1.6rem
}
.card p.klein{
  font-size:.85rem;color:var(--blau);margin-top:2.2rem;
  padding-top:.9rem;border-top:1px solid var(--mauve-hell)
}
.card table th{white-space:nowrap}
@media(max-width:620px){
  .card table th{white-space:normal}
}

/* --- Landkarte, Streckenkarten und GPX -------------------------------- */
.strecken-block{margin:1.6rem 0}
.karte-rahmen{
  position:relative; margin:0 0 1.6rem;
  border:1px solid var(--mauve-hell); border-radius:3px; overflow:hidden; background:#FAF7F2;
}
.karte{height:clamp(20rem,52vh,30rem); width:100%; background:#EFE9E1}
.karte.wartet{display:none}
.karte-ersatz{padding:1rem}
.karte-ersatz svg{display:block;width:100%;max-width:22rem;height:auto;margin:0 auto}
.karte-vorhang{padding:1.2rem 1rem 1.4rem; text-align:center}
.karte-vorschau svg{display:block;width:100%;max-width:20rem;height:auto;margin:0 auto .9rem}
.karte-vorhang .hint{margin:.6rem 0 0; font-size:.82rem; color:var(--blau)}
.karte-fuss{
  display:flex; justify-content:space-between; align-items:center; gap:.8rem; flex-wrap:wrap;
  padding:.6rem .9rem; font-size:.78rem; color:var(--blau);
  border-top:1px solid var(--mauve-hell); background:#FAF7F2;
}
.karte-legende{display:flex; align-items:center; gap:.4rem; flex-wrap:wrap}
.karte-legende i{display:inline-block; border-radius:99px; flex:none}
.karte-legende .pkt-start{width:.75rem;height:.75rem;background:var(--orange);border:2px solid var(--lila-tief)}
.karte-legende .pkt-spur{width:1.4rem;height:.3rem;background:var(--lila);border-radius:2px;margin-left:.6rem}
.karte-quelle a{color:var(--blau)}
/* Leaflet-Bedienelemente an die Marke angleichen */
.karte .leaflet-control-zoom a{color:var(--lila-tief); font-weight:700}
.karte .leaflet-container{font-family:var(--font)}

.strecken-titel{
  font-family:var(--font-display); font-size:1.05rem; color:var(--lila);
  margin:1.8rem 0 .2rem;
}
.strecken-vorspann{margin:0 0 .9rem; color:var(--blau-tief); font-size:.94rem}
.strecken-karten{display:grid; gap:.8rem; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.strecke-karte{
  display:flex; flex-direction:column; gap:.35rem; text-decoration:none;
  background:#fff; border:1px solid var(--mauve-hell); border-radius:3px;
  padding:.9rem 1rem; color:var(--text); transition:border-color .18s, transform .18s;
}
.strecke-karte:hover{border-color:var(--lila); transform:translateY(-2px)}
.strecke-karte:focus-visible{outline:3px solid var(--orange); outline-offset:2px}
.sk-name{font-family:var(--font-display); font-weight:700; font-size:1rem; color:var(--lila)}
.sk-zahlen{display:flex; align-items:baseline; gap:.5rem}
.sk-zahlen b{font-family:var(--font-display); font-size:1.5rem; color:var(--text); line-height:1; white-space:nowrap}
.sk-zahlen i{font-style:normal; font-size:.8rem; color:var(--blau); white-space:nowrap}
.sk-zusatz{font-size:.85rem; color:var(--blau-tief)}
.sk-mehr{
  margin-top:.25rem; font-family:var(--font-display); font-size:.68rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--beere);
}
.strecken-gpx{margin-top:1.2rem; display:flex; align-items:center; gap:.8rem; flex-wrap:wrap}
.strecken-gpx .hint{font-size:.85rem; color:var(--blau)}
.card table .klein{font-size:.8rem; color:var(--blau); font-weight:400}
@media(max-width:620px){
  .karte{height:22rem}
  .karte-fuss{flex-direction:column; align-items:flex-start}
}
.karte-ersatz{padding:1.2rem 1rem; text-align:center}
.karte-ersatz p{margin:.7rem 0 0; font-size:.85rem; color:var(--blau)}
.sk-sport{
  font-family:var(--font-display); font-size:.6rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--blau); display:block;
}
.karte-legende .pkt-lauf{width:1.4rem;height:.3rem;background:var(--koralle);border-radius:2px;margin-left:.6rem}

/* --- Schwimmkurse ----------------------------------------------------- */
.schwimmkurse{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); margin:1.2rem 0}
.schwimmkurs{
  margin:0; background:#fff; border:1px solid var(--mauve-hell); border-radius:3px; overflow:hidden;
}
.schwimmkurs img{display:block; width:100%; height:auto; background:var(--blau-tief)}
.schwimmkurs figcaption{padding:.7rem .9rem .8rem; display:flex; flex-direction:column; gap:.15rem}
.sw-titel{font-family:var(--font-display); font-weight:700; font-size:1rem; color:var(--lila)}
.sw-distanz{font-family:var(--font-display); font-weight:700; font-size:1.35rem; color:var(--text); line-height:1.1}
.sw-weg{font-size:.85rem; color:var(--blau-tief)}
.sp-hero-paar{display:inline-flex;align-items:center;gap:.6rem;margin-right:1.6rem}
.sp-hero-paar:last-child{margin-right:0}
@media(max-width:620px){
  .sp-hero{flex-direction:column;align-items:flex-start;gap:.7rem}
  .sp-hero-paar{margin-right:0}
}

/* --- Bildergalerie ---------------------------------------------------- */
.galerie{margin:1.6rem 0 .4rem}
.g-raster{
  display:grid;gap:.6rem;
  grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));
  grid-auto-rows:9.5rem;
}
/* Hochformate bekommen zwei Reihen - sonst wird jedes Handyfoto beschnitten. */
.g-raster .g-kachel.hoch{grid-row:span 2}
.g-kachel{
  position:relative;display:block;padding:0;border:0;border-radius:3px;
  overflow:hidden;cursor:zoom-in;background:var(--mauve-hell);
  width:100%;height:100%;
}
.g-kachel img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
.g-kachel:hover img,.g-kachel:focus-visible img{transform:scale(1.05)}
.g-titel{
  position:absolute;left:0;right:0;bottom:0;
  padding:1.6rem .7rem .55rem;text-align:left;
  font-family:var(--font-display);font-size:.78rem;font-weight:600;
  color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6);
  background:linear-gradient(180deg,rgba(20,10,24,0) 0%,rgba(20,10,24,.72) 100%);
  opacity:0;transform:translateY(.4rem);
  transition:opacity .22s ease,transform .22s ease;
}
.g-kachel:hover .g-titel,.g-kachel:focus-visible .g-titel{opacity:1;transform:none}
@media(hover:none){.g-titel{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .g-kachel img,.g-titel{transition:none}
  .g-kachel:hover img{transform:none}
}

/* Lightbox */
.g-box{
  border:0;padding:0;max-width:100vw;max-height:100vh;
  /* Die Flaeche selbst dunkelt ab - auf ::backdrop allein ist kein Verlass. */
  background:rgba(20,8,24,.95);
  width:100%;height:100%;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:.4rem;
}
.g-box:not([open]){display:none}
.g-box::backdrop{background:rgba(20,8,24,.95)}
.g-box figure{
  margin:0;grid-column:2;justify-self:center;
  display:flex;flex-direction:column;align-items:center;gap:.7rem;
  max-height:100vh;padding:1rem 0;
}
.g-box img{
  max-width:100%;max-height:82vh;width:auto;height:auto;
  border-radius:3px;box-shadow:0 30px 70px rgba(0,0,0,.5);
}
.g-box figcaption{
  color:var(--creme);font-family:var(--font-display);font-size:.9rem;
  text-align:center;max-width:44rem;padding:0 1rem;
}
.g-pfeil,.g-zu{
  background:rgba(238,229,218,.12);border:1px solid rgba(238,229,218,.3);
  color:var(--creme);border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .18s,border-color .18s;
}
.g-pfeil:hover,.g-zu:hover{background:rgba(238,229,218,.26);border-color:var(--creme)}
.g-pfeil{width:3rem;height:3rem;font-size:2rem;line-height:1;margin:0 .6rem}
.g-pfeil.links{grid-column:1}
.g-pfeil.rechts{grid-column:3}
.g-zu{
  position:absolute;top:1rem;right:1rem;z-index:2;
  width:2.6rem;height:2.6rem;font-size:1.6rem;line-height:1;
}
@media(max-width:640px){
  .g-raster{grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));grid-auto-rows:8rem;gap:.4rem}
  .g-pfeil{width:2.4rem;height:2.4rem;font-size:1.5rem;margin:0 .2rem}
  .g-box img{max-height:70vh}
}

/* --- Bildband: ein breites Foto als Auftakt --------------------------- */
.bildband{
  margin:0 0 1.6rem;border-radius:4px;overflow:hidden;
  background:var(--mauve-hell);
}
.bildband img{display:block;width:100%;height:clamp(11rem,26vw,17rem);object-fit:cover}
.bildband figcaption{
  padding:.55rem .9rem;font-size:.82rem;color:var(--blau-tief);
  background:#fff;border-top:1px solid var(--mauve-hell);
}