/* =====================================================================
   Knockout Marsch / Clean Up Your City - Brand-Layer ueber Bootstrap 5
   Bootstrap liefert Grid, Navbar, Buttons, Utilities (vorher geladen).
   Diese Datei: Marken-Variablen, Themes, Canvas-Hintergruende, Overrides.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) Marken- und Theme-Variablen (Quelle fuer Farben + Canvas-JS)
   --------------------------------------------------------------------- */
:root{
  --bg:#f4f5f7;
  --text:#111b1d;
  --muted:#5f6b70;
  --accent:#1b3f76;
  --accent-hover:#132d55;
  --border:#dce0e2;
  --card:#ffffff;
  --ring:none;
  --radius:16px;
  --panel-start:#ffffff;
  --panel-end:#ffffff;
  --panel-border:rgba(17,27,29,.12);
  --panel-shadow:transparent;
  --accent-soft-bg:rgba(27,63,118,.12);
  --particle-fill:rgba(45,122,196,.45);
  --particle-stroke:rgba(30,88,150,.30);
  --particle-opacity:.9;
  --blob-a:rgba(48,120,192,.28);
  --blob-b:rgba(60,60,60,.18);
  --blob-c:rgba(71,169,229,.22);
  --blob-d:rgba(20,53,101,.20);
  --wave-a:rgba(34,73,126,.55);
  --wave-b:rgba(10,23,50,.40);
  --wave-c:rgba(71,169,229,.30);
  --wave-d:rgba(19,45,85,.35);
  --waves-tree-overlay:rgba(245,244,243,.72);
  --flamongo-opacity:.28;
  --matrix-color:rgba(45,122,196,.9);
  --matrix-fade:rgba(7,15,34,.12);
  /* Herzschlag bleibt vorerst bewusst rot - nicht Teil des Farbwechsels. */
  --heartbeat-color:rgba(220,40,40,1);
  --heartbeat-glow:rgba(220,40,40,0.5);
  --header-bg:rgba(255,255,255,.90);
  --header-shadow:none;
  --text-glow:transparent;
  --hero-glow:transparent;
  --hero-overlay-image:none;
  --title-shadow:none;
  --btn-shadow:none;
  --btn-shadow-hover:none;
  --focus-outline:rgba(27,63,118,.45);
  --focus-ring-soft:transparent;
  --focus-ring-strong:transparent;
  --card-hover-shadow:transparent;
  --input-shadow:none;
  --input-focus-shadow:none;
  --panel-shadow-strong:none;
  --danger:#c7342b;
  --skip-text:#fff;
  --skip-border:rgba(255,255,255,.8);
  --motion-toggle-bg:rgba(255,255,255,.9);
  --motion-toggle-shadow:none;
  --motion-toggle-active-shadow:none;
}

html[data-theme="accessible"]{
  --bg:#f1f3f5;
  --text:#0b1516;
  --muted:#4d5a61;
  --accent:#17365f;
  --accent-hover:#102542;
  --border:#c8ccce;
  --ring:none;
  --panel-start:#fcfcfc;
  --panel-end:#fcfcfc;
  --panel-border:rgba(11,21,22,.12);
  --panel-shadow:transparent;
  --accent-soft-bg:rgba(23,54,95,.15);
  --particle-fill:rgba(23,54,95,.2);
  --particle-stroke:rgba(23,54,95,.14);
  --particle-opacity:.9;
  --blob-a:rgba(45,120,190,.28);
  --blob-b:rgba(55,55,55,.16);
  --blob-c:rgba(71,169,229,.22);
  --blob-d:rgba(19,45,85,.18);
  --wave-a:rgba(23,54,95,.2);
  --wave-b:rgba(55,55,55,.14);
  --wave-c:rgba(71,169,229,.12);
  --wave-d:rgba(13,30,58,.10);
  --waves-tree-overlay:rgba(242,240,239,.72);
  --flamongo-opacity:.26;
  --matrix-color:rgba(23,54,95,.85);
  --matrix-fade:rgba(242,240,239,.06);
  --header-bg:rgba(255,255,255,.90);
  --header-shadow:none;
  --text-glow:transparent;
  --hero-glow:transparent;
  --hero-overlay-image:none;
  --title-shadow:none;
  --btn-shadow:none;
  --btn-shadow-hover:none;
  --focus-outline:rgba(23,54,95,.45);
  --focus-ring-soft:transparent;
  --focus-ring-strong:transparent;
  --card-hover-shadow:transparent;
  --input-shadow:none;
  --input-focus-shadow:none;
  --panel-shadow-strong:none;
  --motion-toggle-bg:rgba(255,255,255,.94);
  --motion-toggle-shadow:none;
  --motion-toggle-active-shadow:none;
  --danger:#ff6b5f;
}

html[data-theme="night"]{
  --bg:#080f1a;
  --text:#eff3f8;
  --muted:#9aabaf;
  --accent:#3488cb;
  --accent-hover:#2a6eb1;
  --border:rgba(71,169,229,.25);
  --card:#08121f;
  --ring:none;
  --radius:16px;
  --panel-start:#0a1526;
  --panel-end:#0a1526;
  --panel-border:rgba(240,251,247,.10);
  --panel-shadow:transparent;
  --accent-soft-bg:rgba(52,136,203,.2);
  --particle-fill:rgba(52,136,203,.28);
  --particle-stroke:rgba(52,136,203,.22);
  --particle-opacity:.75;
  --matrix-color:rgba(52,136,203,.85);
  --matrix-fade:rgba(8,15,26,.12);
  --header-bg:rgba(3,8,12,.90);
  --header-shadow:none;
  --waves-tree-overlay:rgba(5,11,15,.60);
  --text-glow:transparent;
  --hero-glow:transparent;
  --hero-overlay-image:none;
  --title-shadow:none;
  --btn-shadow:none;
  --btn-shadow-hover:none;
  --focus-outline:rgba(52,136,203,.5);
  --focus-ring-soft:transparent;
  --focus-ring-strong:transparent;
  --card-hover-shadow:transparent;
  --input-shadow:none;
  --input-focus-shadow:none;
  --panel-shadow-strong:none;
  --skip-text:#04110d;
  --skip-border:rgba(71,169,229,.4);
  --motion-toggle-bg:rgba(8,13,18,.92);
  --motion-toggle-shadow:none;
  --motion-toggle-active-shadow:none;
}

/* ---------------------------------------------------------------------
   2) Bootstrap-Variablen auf die Marke mappen
   --------------------------------------------------------------------- */
:root{
  --bs-primary:#1b3f76;
  --bs-primary-rgb:27,63,118;
  --bs-body-bg:var(--bg);
  --bs-body-color:var(--text);
  --bs-body-font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";
  --bs-link-color:var(--accent);
  --bs-link-hover-color:var(--accent-hover);
  --bs-border-color:var(--border);
  --bs-emphasis-color:var(--text);
}

@view-transition{
  navigation:auto;
}

::view-transition-old(root),
::view-transition-new(root){
  animation-duration:180ms;
  animation-timing-function:ease;
}

/* ---------------------------------------------------------------------
   3) Basis-Layout + Sticky Footer + Canvas-Hintergrund
   --------------------------------------------------------------------- */
html,body{height:100%;}
html{
  scroll-behavior:smooth;
  scrollbar-gutter:stable;
  background-color:var(--bg);
}

@supports not (scrollbar-gutter: stable){
  html{overflow-y:scroll;}
}

body{
  margin:0;
  color:var(--text);
  font-family:var(--bs-body-font-family);
  background-color:var(--bg);
  background-attachment:fixed;
  background-repeat:no-repeat;
  overflow-x:hidden;
}

body.site[data-active-background-variant="waves"]{
  --card:rgba(255,255,255,.68);
  --panel-start:rgba(255,255,255,.68);
  --panel-end:rgba(255,255,255,.68);
}

html[data-theme="night"] body.site[data-active-background-variant="waves"]{
  --card:rgba(8,21,25,.72);
  --panel-start:rgba(11,25,30,.72);
  --panel-end:rgba(11,25,30,.72);
}

body.site[data-active-background-variant="waves"]::before{
  content:none;
}

body.site{
  min-height:100svh;
  display:flex;
  flex-direction:column;
}

body.site main.page-main{
  flex:1 0 auto;
  display:flex;
  flex-direction:column;
}

body.site footer{
  margin-top:auto;
}

:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0s !important;
    scroll-behavior:auto !important;
  }
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

canvas#particles{
  position:fixed;
  inset:0;
  z-index:5;
  mix-blend-mode:screen;
  opacity:var(--particle-opacity,.35);
  pointer-events:none;
}

main{
  position:relative;
  z-index:2;
  view-transition-name:main;
}

.page-section{
  flex:1 0 auto;
}

.skip-link{
  position:absolute;
  left:-999px;
  top:-999px;
  background:var(--accent);
  color:var(--skip-text);
  padding:10px 14px;
  border-radius:8px;
  border:1px solid var(--skip-border);
  font-weight:600;
  text-decoration:none;
  z-index:100;
}

.skip-link:focus-visible{
  left:20px;
  top:20px;
}

/* ---------------------------------------------------------------------
   4) Header / Navbar (Bootstrap-Navbar mit Marken-Look)
   --------------------------------------------------------------------- */
.site-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:1030;
  /* Marken-Grunge als Header-Hintergrund: cover = fuellt aus, ohne zu verzerren.
     Ausschnitt leicht nach oben (18%), damit die Nav-Links ueber der hellen
     Flaeche liegen und der rote Slash rechts/oben bleibt. */
  background:url("../img/header.webp") center 18% / cover no-repeat;
  border-bottom:1px solid var(--border);
  box-shadow:var(--header-shadow);
  view-transition-name:site-header;
  transition:box-shadow .3s ease, padding .3s ease;
}

/* Roter Akzentstrich am unteren Rand - erscheint beim Scrollen */
.site-header::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:2px;
  background:linear-gradient(90deg, transparent, #2a6eb1 25%, #1b3f76 75%, transparent);
  opacity:0;
  transition:opacity .3s ease;
}

.site-header.is-scrolled{
  box-shadow:0 10px 34px rgba(17,27,29,.14);
}
.site-header.is-scrolled::after{ opacity:1; }

.site-header .navbar{
  padding-top:.5rem;
  padding-bottom:.5rem;
  transition:padding .3s ease;
}
.site-header.is-scrolled .navbar{
  padding-top:.25rem;
  padding-bottom:.25rem;
}

.navbar-brand.brand{
  display:flex;
  gap:14px;
  align-items:center;
  color:var(--accent);
  text-decoration:none;
  font-weight:700;
  /* Emblem und Schriftzug haengen an derselben Hoehe. Beide Dateien sind eng
     beschnitten, also ergibt gleiche Bildhoehe auch optisch gleiche Hoehe -
     und weil beide in derselben zentrierten Flexzeile liegen, ist der Abstand
     nach oben und unten zwangslaeufig identisch. */
  --brand-h:76px;
  padding-top:0;
  padding-bottom:0;
}
.site-header.is-scrolled .navbar-brand.brand{ --brand-h:64px; }

.brand-emblem{
  height:var(--brand-h);
  width:auto;
  display:block;
  flex:0 0 auto;
  transition:transform .2s ease, height .3s ease;
}
.navbar-brand.brand:hover .brand-emblem{ transform:scale(1.04); }

.brand .logo{
  display:flex;
  align-items:center;
  justify-content:center;
}

.brand .logo img{
  width:auto;
  height:var(--brand-h);
  object-fit:contain;
  display:block;
  transition:transform .2s ease, height .3s ease;
  /* Der helle Rest-Hintergrund des Schriftzugs verschwindet so im hellen Header */
  mix-blend-mode:multiply;
}
.navbar-brand.brand:hover .logo img{ transform:scale(1.04); }

/* Nav-Links: fett, uppercase, mit animiertem rotem Underline */
.site-header .navbar-nav{
  gap:.35rem;
}
.site-header .nav-link{
  position:relative;
  color:var(--text);
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.07em;
  white-space:nowrap;
  padding:.5rem .35rem;
  /* heller Schimmer haelt die dunkle Schrift auch ueber dem roten Slash lesbar */
  text-shadow:0 0 7px rgba(255,255,255,.85), 0 1px 1px rgba(255,255,255,.6);
}
.site-header .nav-link::after{
  content:"";
  position:absolute;
  left:.35rem; right:.35rem; bottom:.15rem;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,#2a6eb1,#1b3f76);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .22s ease;
}
.site-header .nav-link:hover,
.site-header .nav-link:focus,
.site-header .nav-link.active{
  color:var(--accent);
}
.site-header .nav-link:hover::after,
.site-header .nav-link:focus::after,
.site-header .nav-link.active::after{
  transform:scaleX(1);
}

/* "Projekte" ausblenden, Login als Button hervorheben (wie bisher) */
.site-header .nav-link[href="/projekte"],
.site-header .nav-link[href="/projekte/"]{
  display:none;
}

.site-header .nav-link[href="/login"],
.site-header .nav-link[href="/login/"]{
  color:#fff;
  border:none;
  border-radius:999px;
  padding:.5rem 1.25rem;
  background:linear-gradient(135deg,#2a6eb1,#1b3f76);
  box-shadow:0 4px 16px rgba(27,63,118,.35);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.site-header .nav-link[href="/login"]::after,
.site-header .nav-link[href="/login/"]::after{ display:none; }

.site-header .nav-link[href="/login"]:hover,
.site-header .nav-link[href="/login/"]:hover,
.site-header .nav-link[href="/login"]:focus,
.site-header .nav-link[href="/login/"]:focus{
  color:#fff;
  background:linear-gradient(135deg,#2f78bd,#1d4685);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(27,63,118,.5);
}

/* Eingeloggt (Menue-Liste .is-authed): "Profil" ist ein normaler Nav-Link, kein Pill */
.site-header .navbar-nav.is-authed .nav-link[href="/login"],
.site-header .navbar-nav.is-authed .nav-link[href="/login/"]{
  color:var(--text);
  background:none;
  border-radius:0;
  box-shadow:none;
  padding:.5rem .35rem;
  transform:none;
}
.site-header .navbar-nav.is-authed .nav-link[href="/login"]::after,
.site-header .navbar-nav.is-authed .nav-link[href="/login/"]::after{
  display:block;
}
.site-header .navbar-nav.is-authed .nav-link[href="/login"]:hover,
.site-header .navbar-nav.is-authed .nav-link[href="/login/"]:hover,
.site-header .navbar-nav.is-authed .nav-link[href="/login"]:focus,
.site-header .navbar-nav.is-authed .nav-link[href="/login/"]:focus{
  color:var(--accent);
  background:none;
  box-shadow:none;
  transform:none;
}

.navbar-toggler{
  border-color:var(--border);
  padding:.25rem .6rem;
}

.navbar-toggler:focus{
  box-shadow:0 0 0 .2rem var(--accent-soft-bg);
}

.navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23c42a2a' stroke-width='2.5' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Aufgeklapptes Mobilmenue: voll deckendes Panel ueber die ganze Breite,
   damit der Header-Grunge (roter Slash) nicht durchblitzt. */
@media (max-width:991.98px){
  .site-header .navbar-collapse{
    background:var(--bg);
    /* Volle Breite ohne vw (kein horizontaler Ueberlauf): exakt das Container-Gutter
       negativ als Margin, gleiches Mass wieder als Padding. */
    margin-top:10px;
    margin-inline:calc(-.5 * var(--bs-gutter-x, 1.5rem));
    padding:12px calc(.5 * var(--bs-gutter-x, 1.5rem) + .25rem) 18px;
    border-top:1px solid var(--border);
    box-shadow:0 14px 26px rgba(17,27,29,.14);
  }
  .site-header .navbar-nav{
    gap:4px;
  }
  /* Groessere, gut lesbare Links; kein Schimmer (Text auf solidem Hintergrund) */
  .site-header .navbar-collapse .nav-link{
    text-shadow:none;
    display:block;
    font-size:1.1rem;
    padding:.7rem .25rem;
  }
  .site-header .navbar-collapse .nav-link::after{
    left:.25rem; right:auto; width:2.4rem;
  }
  .site-header .nav-link[href="/login"],
  .site-header .nav-link[href="/login/"]{
    display:inline-block;
    margin-top:12px;
    font-size:1.05rem;
    padding:.6rem 1.5rem;
  }
  /* Eingeloggt: "Profil" bleibt auch mobil normaler Link */
  .site-header .navbar-nav.is-authed .nav-link[href="/login"],
  .site-header .navbar-nav.is-authed .nav-link[href="/login/"]{
    display:block;
    margin-top:0;
    font-size:1.1rem;
    padding:.7rem .25rem;
  }
}

/* ---------------------------------------------------------------------
   5) Hero (Startseite + Unterseiten)
   --------------------------------------------------------------------- */
.hero{
  min-height:76svh;
  display:grid;
  align-items:center;
  text-align:center;
  padding:120px 20px 60px;
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

.hero .container{
  position:relative;
  z-index:1;
}

.hero-wip{
  min-height:100svh;
  padding:100px 20px 80px;
  background:linear-gradient(160deg,#0a1732 0%,#070f22 55%,#0b1a30 100%);
}

.hero-wip h1.title{
  color:#3488cb;
  text-shadow:0 0 60px rgba(52,136,203,.35);
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.hero-wip .lead{
  color:rgba(245,230,230,.75);
}

.hero-subpage{
  min-height:auto;
  /* padding-top haelt den Titel unter dem fixen Header (~97px) frei */
  padding:150px 20px 44px;
  background:linear-gradient(160deg,#0a1732 0%,#070f22 100%);
}

.hero-subpage h1.title{
  color:#3488cb; /* Fallback ohne background-clip */
  text-transform:uppercase;
  font-weight:900;
  letter-spacing:.06em;
}

/* Startseiten-Hero: dunkler Grunge-Verlauf, grosser Titel + Tagline */
.hero-home{
  min-height:64svh;
  padding:150px 20px 64px;
  background:linear-gradient(160deg,#0a1732 0%,#070f22 55%,#0b1a30 100%);
}
.hero-home h1.title{
  color:#3488cb; /* Fallback ohne background-clip */
  text-transform:uppercase;
  font-weight:900;
  letter-spacing:.03em;
  line-height:1.02;
}
.hero-home .lead{
  color:rgba(245,230,230,.82);
  max-width:760px;
}

/* Hi-Fi-Titel: vertikaler Rot-Verlauf (wie die Buttons) + weicher Glow.
   Nur wenn Text-Clipping unterstuetzt wird, sonst greift der Fallback oben. */
@supports ((-webkit-background-clip: text) or (background-clip: text)){
  .hero-subpage h1.title,
  .hero-home h1.title{
    background:linear-gradient(180deg,#8fd0f5 0%,#4f9fdd 45%,#2f78bd 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    filter:drop-shadow(0 4px 20px rgba(45,122,196,.38));
    /* line-height:.9 laesst die Umlaut-Punkte oben aus der Box ragen; der
       drop-shadow-Filter clippt die Box -> etwas Kopfraum, damit sie drin bleiben. */
    line-height:1;
    padding-top:.18em;
  }
}

h1.title{
  font-size:clamp(34px,7vw,88px);
  line-height:.9;
  margin:0;
  color:var(--accent);
  font-weight:700;
  letter-spacing:.04em;
}

.lead{
  max-width:720px;
  margin:12px auto 0;
  color:var(--text);
  font-size:clamp(16px,2.3vw,18px);
  line-height:1.6;
}

.cta{
  margin-top:18px;
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}

/* WIP-Glas-Karte auf dem Hero */
.wip-card{
  margin:28px auto 0;
  max-width:560px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(52,136,203,.25);
  border-radius:var(--radius);
  padding:24px 28px 22px;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.wip-kicker{
  margin:0 0 10px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#3488cb;
}

.wip-text{
  margin:0;
  color:rgba(245,230,230,.80);
  line-height:1.6;
}

.wip-list{
  margin:14px 0 0;
  padding-left:18px;
  color:rgba(245,230,230,.60);
  line-height:1.7;
  text-align:left;
}

/* ---------------------------------------------------------------------
   6) Buttons (Marken-Button auf Bootstrap-.btn-Basis)
   --------------------------------------------------------------------- */
.btn-brand{
  border:none;
  background:linear-gradient(135deg,#2a6eb1,#1b3f76);
  color:#fff;
  border-radius:8px;
  font-weight:800;
  letter-spacing:.10em;
  text-transform:uppercase;
  box-shadow:0 4px 20px rgba(27,63,118,.40);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.btn-brand:hover,
.btn-brand:focus{
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(27,63,118,.55);
  background:linear-gradient(135deg,#2f78bd,#1d4685);
}

.btn-brand:focus-visible{
  outline:3px solid var(--focus-outline);
  outline-offset:3px;
}

/* ---------------------------------------------------------------------
   7) Formulare (felogin / Kontakt)
   --------------------------------------------------------------------- */
form{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px;
}

form div{
  display:flex;
  flex-direction:column;
  gap:6px;
}

form div.full{
  grid-column:1/-1;
}

label{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--accent);
}

input,
textarea{
  background:var(--card);
  border:1px solid var(--panel-border);
  border-radius:12px;
  padding:12px;
  color:var(--text);
  font:inherit;
  box-shadow:var(--input-shadow);
}

input.is-invalid,
textarea.is-invalid{
  border-color:var(--danger);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--danger) 25%, transparent);
}

input:focus,
textarea:focus{
  outline:3px solid var(--focus-outline);
  outline-offset:2px;
  border-color:var(--accent);
  box-shadow:var(--input-focus-shadow);
}

textarea{
  min-height:140px;
  resize:vertical;
}

.note{
  display:inline-block;
  margin-left:12px;
  color:var(--muted);
  font-size:12px;
}

/* Verwaltungspanel-Formulare nutzen Bootstrap-Layout, nicht das felogin-Grid oben.
   Wichtig: die globale "form div{display:flex;flex-direction:column;gap:6px}" muss
   fuer die Bootstrap-.row zurueckgesetzt werden, sonst stapeln die Spalten. */
.km-panel form{
  display:block;
}
.km-panel form div{
  display:block;
  gap:0;
}
.km-panel form .row{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
}

/* Eventbilder bleiben auch dann im vorgesehenen Rahmen, wenn TYPO3 keine
   verkleinerte FAL-Variante erzeugen kann und das Original ausliefert. */
.km-event-image-preview{
  display:block;
  width:180px;
  height:180px;
  max-width:100%;
  object-fit:cover;
}

.km-event-image-thumb{
  display:block;
  width:56px;
  height:56px;
  max-width:none;
  object-fit:cover;
}

.km-event-image-card{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  object-fit:cover;
}

/* ---------------------------------------------------------------------
   7b) Login-/Registrierungs-Seite (felogin + sf-register)
   Die drei Content-Elemente (felogin_login, sfregister_create,
   sfregister_edit) werden als zentrierte Karten dargestellt. Ausserdem
   wird das globale "form{display:grid}" (Abschnitt 7) hier neutralisiert -
   sonst zerreisst es die Fieldsets/Bootstrap-Reihen (wie bei .km-panel).
   sf-register nutzt jetzt eigene Fluid-Overrides mit echtem Bootstrap-5-
   Markup (.row/.col/.form-check/.km-auth-form), hier nur noch Marken-Feinschliff.
   --------------------------------------------------------------------- */
/* Karten ohne Inhalt gar nicht erst zeigen. Die Plugins geben je nach
   Login-Zustand nichts aus, der Rahmen wird von TYPO3 aber immer gerendert -
   uebrig blieb sonst eine leere weisse Kachel. :empty greift hier nicht, weil
   der Rahmen Leerraum enthaelt, deshalb :has() auf den tatsaechlichen Inhalt. */
.frame-type-felogin_login:not(:has(form, .km-anmeldungen, p, h1, h2, h3)),
.frame-type-sfregister_create:not(:has(form, p, h1, h2, h3)),
.frame-type-sfregister_edit:not(:has(form, p, h1, h2, h3)),
.frame-type-kmverwaltung_meineanmeldungen:not(:has(.km-anmeldungen)){
  display:none;
}

.frame-type-felogin_login,
.frame-type-sfregister_create,
.frame-type-sfregister_edit,
.frame-type-kmverwaltung_meineanmeldungen,
.frame-type-kmverwaltung_newsletter{
  max-width:640px;
  margin:0 auto 28px;
  padding:30px 30px 34px;
  background:var(--card);
  border:1px solid var(--panel-border);
  border-radius:var(--radius);
  box-shadow:0 10px 30px rgba(17,27,29,.06);
}

/* Ueberschriften der Karten */
.frame-type-felogin_login h3,
.frame-type-sfregister_create header h2,
.frame-type-sfregister_edit header h2,
.frame-type-kmverwaltung_newsletter header h2{
  margin:0 0 6px;
  font-weight:800;
  letter-spacing:.01em;
}
.frame-type-kmverwaltung_newsletter header{
  margin-bottom:6px;
}
.frame-type-felogin_login > p{
  margin:0 0 20px;
  color:var(--muted);
}
.frame-type-sfregister_create header,
.frame-type-sfregister_edit header{
  margin-bottom:20px;
}

/* Globales form-Grid (Abschnitt 7) fuer diese Karten aufheben.
   Ohne das legt das Grid Name-, E-Mail-Feld und Schaltflaeche nebeneinander,
   und das Formular laeuft ueber die ganze Seitenbreite statt in der Karte. */
.frame-type-felogin_login form,
.km-auth-form,
.km-newsletter-form{
  display:block;
  gap:0;
}
.frame-type-felogin_login form > div{
  display:block;
  gap:0;
}

/* --- felogin --- */
.frame-type-felogin_login fieldset{
  border:none;
  margin:0;
  padding:0;
}
.frame-type-felogin_login legend{
  float:none;
  width:auto;
  margin:0 0 16px;
  padding:0;
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.frame-type-felogin_login fieldset > div{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:16px;
}
.frame-type-felogin_login input[type="text"],
.frame-type-felogin_login input[type="password"]{
  width:100%;
}
.frame-type-felogin_login input[type="submit"]{
  width:100%;
  margin-top:4px;
  border:none;
  cursor:pointer;
  padding:13px 16px;
  border-radius:8px;
  font-weight:800;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:#fff;
  background:linear-gradient(135deg,#2a6eb1,#1b3f76);
  box-shadow:0 4px 20px rgba(27,63,118,.40);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.frame-type-felogin_login input[type="submit"]:hover,
.frame-type-felogin_login input[type="submit"]:focus{
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(27,63,118,.55);
  background:linear-gradient(135deg,#2f78bd,#1d4685);
}
.frame-type-felogin_login .felogin-hidden{display:none;}
.frame-type-felogin_login > a{
  display:inline-block;
  margin-top:18px;
  font-size:13px;
  color:var(--muted);
  text-decoration:none;
}
.frame-type-felogin_login > a:hover{
  color:var(--accent);
  text-decoration:underline;
}

/* --- sf-register: echtes Bootstrap-5-Markup, nur globale Kollisionen fixen + Marken-Feinschliff --- */
.km-auth-form .row{
  flex-direction:row;   /* globales "form div{flex-direction:column}" auf der Reihe aufheben */
  gap:0;                /* BS5 nutzt eigene Gutter statt Flex-gap */
}
.km-auth-form .form-check{
  display:block;        /* BS5-form-check statt globalem flex-column (Checkbox neben Label) */
}
.km-auth-form .form-check-label{
  text-transform:none;
  letter-spacing:0;
  font-size:14px;
  color:var(--text);
}
.km-auth-form .form-check-input{
  padding:0;            /* globales input{padding:12px} wuerde die Checkbox aufblaehen */
  box-shadow:none;
  accent-color:var(--accent);
}

/* Felder im Marken-Look (weicher gerundet wie das felogin-Formular) */
.km-auth-form .form-control,
.km-auth-form .form-select{
  border-radius:12px;
  padding:12px;
  border:1px solid var(--panel-border);
  background:var(--card);
  color:var(--text);
}
.km-auth-form .form-control:focus,
.km-auth-form .form-select:focus{
  outline:3px solid var(--focus-outline);
  outline-offset:2px;
  border-color:var(--accent);
  box-shadow:none;
}
.km-auth-form #bargraph{width:100%;height:8px;margin-top:8px;}

/* Validierungsfehler dezent */
.tx_evoweb_sfregister .formerrors:empty{display:none;}
.tx_evoweb_sfregister .error{color:var(--accent);font-size:13px;}
.tx_evoweb_sfregister .mandatory{
  margin-top:12px;
  color:var(--muted);
  font-size:12px;
}

/* "To top"-Link unter der Registrierung dezenter */
.frame-type-sfregister_create + p,
.frame-type-sfregister_create p:last-child{
  text-align:center;
}

/* Profil-Karte im ausgeloggten Zustand */
.frame-type-sfregister_edit .tx_evoweb_sfregister{
  color:var(--muted);
}

/* ---------------------------------------------------------------------
   8) Footer
   --------------------------------------------------------------------- */
.site-footer{
  position:relative;
  z-index:2;
  padding:40px 0;
  background:rgba(255,255,255,.7);
  border-top:1px solid var(--panel-border);
}

.footer-content{
  color:var(--muted);
  font-size:12px;
  backdrop-filter:saturate(120%) blur(4px);
}

.footer-info{
  flex:1 1 260px;
}

.footer-legal{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

.footer-legal a{
  color:var(--muted);
  text-decoration:none;
  font-size:12px;
}

.footer-legal a:hover{
  color:var(--accent);
  text-decoration:underline;
}

.footer-credits a{
  color:var(--accent);
  text-decoration:none;
  font-weight:600;
}

.footer-credits a:hover{
  text-decoration:underline;
}

/* ---------------------------------------------------------------------
   9) Motion-Toggle (optional, per [data-motion-toggle] eingebunden)
   --------------------------------------------------------------------- */
.motion-control{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  margin-left:auto;
}

.motion-toggle{
  background:var(--motion-toggle-bg);
  color:var(--text);
  border:1px solid var(--panel-border);
  border-radius:999px;
  padding:8px 16px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:var(--motion-toggle-shadow);
  transition:background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.motion-toggle:hover{
  color:var(--accent);
  border-color:var(--accent);
}

.motion-toggle[aria-pressed="true"]{
  color:var(--accent);
  border-color:var(--accent);
  box-shadow:var(--motion-toggle-active-shadow);
}

/* Datenschutz-Einverstaendnis: praesenter Zustimmungs-Block mit groesserer
   Checkbox. Der Rahmen sitzt auf dem Spalten-Element (.privacy), nicht auf der
   form-check darin - siehe die gemeinsame Kachelregel weiter unten. */
.km-auth-form .km-privacy{
  display:flex;
  /* Richtung ausdruecklich setzen: die globale Regel "form div" stellt jedes
     div im Formular auf flex-direction:column. Ohne diese Zeile stuende das
     Kaestchen ueber seinem Text statt daneben - dieselbe Stolperstelle wie
     bei .km-newsletter-check weiter unten. */
  flex-direction:row;
  align-items:flex-start;
  gap:.7rem;
}
.km-auth-form .km-privacy-input.form-check-input{
  width:1.4rem;
  height:1.4rem;
  margin:.1rem 0 0 0;
  flex:0 0 auto;
  cursor:pointer;
  border-width:2px;
}
.km-auth-form .km-privacy-label{
  font-size:14px;
  line-height:1.45;
  cursor:pointer;
}
.km-auth-form .km-privacy-label a{
  color:var(--accent);
  font-weight:600;
  text-decoration:underline;
}

/* ==== Passwort-Anforderungen (Registrierung / Profil) ==== */
.km-pw-hints{
  margin-top:.45rem;
  line-height:1.45;
}
/* Nebenhinweis: grau, kleiner und in einer Zeile - er erklaert nur, was ein
   leeres Feld bedeutet, und soll die eigentlichen Anforderungen nicht
   ueberstrahlen.

   Der Hinweisblock steckt in der halbbreiten Passwortspalte. Damit der Satz
   dort ueberhaupt in eine Zeile passt, laeuft der Block ab mittlerer Breite
   ueber beide Spalten. Ihn per nowrap+ellipsis in die halbe Spalte zu zwingen
   war der erste Versuch - ein auf "...zu behal..." gekuerzter Satz ist aber
   schlechter als ein umbrochener. */
.km-pw-hints-note{
  color:var(--muted);
  font-weight:400;
  font-size:12px;
  margin:0 0 .3rem;
}
@media (min-width: 768px){
  /* Passwortfeld und Anforderungen nebeneinander: die Passwortspalte laeuft
     ueber die volle Breite und teilt sich intern in zwei Haelften - links das
     Feld, rechts die Liste. Die Passwortwiederholung ist die naechste Spalte
     und rutscht damit unter das Passwortfeld, statt daneben zu stehen. */
  /* Die Passwortspalte laeuft ueber die volle Breite; das Feld nimmt die linke
     Haelfte ein. Die Anforderungen stehen rechts daneben, aber ABSOLUT
     positioniert: im Fluss bestimmten sie die Zeilenhoehe, wodurch unter dem
     Passwortfeld eine Luecke klaffte und die Wiederholung weit darunter lag. */
  .km-auth-form .password{
    position:relative;
    flex:0 0 100%;
    max-width:100%;
  }
  .km-auth-form .password .km-pw-feld{
    width:calc(50% - .75rem);
  }
  .km-auth-form .password .km-pw-hints{
    position:absolute;
    top:0;
    left:calc(50% + .75rem);
    right:0;
    margin-top:0;
  }
  .km-pw-hints-note{
    white-space:nowrap;
  }
}
.km-pw-hints-liste{
  margin:0;
  padding-left:1rem;
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
}
.km-pw-hints-liste li{
  margin:0;
}
.km-pw-hints-liste li::marker{
  font-size:.7em;
}

/* ==== Jahr-Badge auf Event-Karten ==== */
.km-year-badge{
  position:absolute;
  top:.6rem;
  left:.6rem;
  background:var(--accent,#1b3f76);
  color:#fff;
  font-weight:700;
  font-size:.8rem;
  letter-spacing:.03em;
  padding:.2rem .55rem;
  border-radius:.5rem;
  box-shadow:0 2px 6px rgba(0,0,0,.28);
  z-index:1;
}

/* ==== Sponsoren / Partner (oeffentliche Seite) ==== */
.km-sponsoren{
  max-width:1100px;
}
.km-sponsor-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  background:var(--card,#fff);
  border:1px solid rgba(20,20,25,.08);
  border-radius:1.1rem;
  padding:1.6rem 1.4rem;
  box-shadow:0 1px 2px rgba(20,20,25,.05), 0 10px 30px rgba(20,20,25,.05);
  transition:transform .18s ease, box-shadow .18s ease;
}
.km-sponsor-card:hover{
  transform:translateY(-3px);
  box-shadow:0 4px 10px rgba(20,20,25,.08), 0 18px 40px rgba(20,20,25,.10);
}
.km-sponsor-card-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:110px;
  margin-bottom:1.1rem;
}
.km-sponsor-card-logo img{
  max-width:100%;
  max-height:110px;
  width:auto;
  height:auto;
  object-fit:contain;
}
.km-sponsor-card-noimg{
  font-family:var(--font-head,inherit);
  font-weight:800;
  font-size:1.35rem;
  letter-spacing:.02em;
  color:var(--accent,#1b3f76);
  text-transform:uppercase;
}
.km-sponsor-card-name{
  font-size:1.15rem;
  font-weight:800;
  margin:0 0 .55rem;
}
.km-sponsor-card-text{
  color:#4a4f57;
  font-size:.95rem;
  line-height:1.55;
  margin:0 0 1rem;
}
.km-sponsor-card-link{
  margin-top:auto;
  color:var(--accent,#1b3f76);
  font-weight:600;
  text-decoration:none;
}
.km-sponsor-card-link:hover{
  text-decoration:underline;
}

/* ---------------------------------------------------------------------
   Meine Anmeldungen (Profilseite /login)
   --------------------------------------------------------------------- */
/* Kein eigener Kartenrahmen: Hintergrund, Rand, Radius, Innenabstand und die
   Breitenbegrenzung liefert die gemeinsame .frame-type-*-Regel weiter oben,
   die auch Login-, Registrierungs- und Profilkarte gestaltet. Eine zweite
   Quelle dafuer wuerde frueher oder spaeter auseinanderlaufen. */
.km-anmeldungen-title{
  font-weight:800;
  letter-spacing:.02em;
  margin:0 0 1rem;
}

.km-anmeldungen-subtitle{
  font-size:1rem;
  font-weight:700;
  color:var(--muted);
  margin:1.5rem 0 .75rem;
}

.km-anmeldung-liste{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.75rem;
}

.km-anmeldung{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.85rem 1rem;
  border:1px solid var(--border);
  border-radius:12px;
}

.km-anmeldung-text{
  display:flex;
  flex-direction:column;
  gap:.15rem;
  min-width:0;
}

.km-anmeldung-name{
  font-weight:700;
  color:var(--accent);
  text-decoration:none;
}

.km-anmeldung-name:hover{
  text-decoration:underline;
}

.km-anmeldung-meta{
  font-size:.9rem;
  color:var(--muted);
}

.km-anmeldung-abgesagt{
  align-self:flex-start;
  font-size:.8rem;
  font-weight:700;
  color:var(--danger);
}

/* Historie tritt bewusst zurueck - sie ist Rueckblick, keine Handlung. */
.km-anmeldung-liste--historie .km-anmeldung{
  opacity:.75;
}

.km-anmeldung-leer{
  color:var(--muted);
  margin:0;
}

@media (max-width:576px){
  .km-anmeldung{
    flex-direction:column;
    align-items:stretch;
  }
}

/* ---------------------------------------------------------------------
   Teilnehmerliste im Panel: Status-Button + korrigierbare Zeit
   --------------------------------------------------------------------- */
/* Button und Uhrzeit untereinander - nebeneinander wuerde die Tabelle im auf
   760px begrenzten Panel seitlich scrollen. */
.km-zeit-zelle{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.35rem;
}

.km-zeit-form{
  display:flex;
  align-items:center;
  gap:.2rem;
}

/* Reine Uhrzeit - das Datum ergibt sich aus dem Veranstaltungstermin. */
.km-zeit-input{
  width:5.5rem;
  min-width:0;
  font-size:.8rem;
  padding:.2rem .35rem;
}

.km-zeit-ok{
  flex:0 0 auto;
  padding:.2rem .45rem;
  line-height:1;
}

/* Hinzufuegen links, Sammelstart rechts daneben. */
.km-teilnehmer-aktionen{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.75rem;
}

.km-teilnehmer-aktionen .km-bulk-form{
  margin-left:auto;
}

/* Statt des Abmeldebuttons, sobald die Veranstaltung laeuft. */
.km-anmeldung-hinweis{
  flex:0 0 auto;
  font-size:.85rem;
  font-weight:600;
  color:var(--muted);
  white-space:nowrap;
}

/* Eigene Start-/Zielzeit und Laufzeit in "Meine Anmeldungen". */
.km-anmeldung-zeiten{
  display:flex;
  flex-wrap:wrap;
  gap:.15rem .9rem;
  margin-top:.2rem;
  font-size:.85rem;
  color:var(--text);
}

.km-zeit-paar{
  display:inline-flex;
  align-items:baseline;
  gap:.3rem;
  font-variant-numeric:tabular-nums;
}

.km-zeit-label{
  font-size:.72rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--muted);
}

.km-zeit-dauer{
  font-weight:700;
  color:var(--accent);
}

/* Datumsfeld ueber der Uhrzeit in der Teilnehmerliste. */
.km-zeit-form{
  flex-wrap:wrap;
  justify-content:center;
}

.km-datum-input{
  width:8.5rem;
  min-width:0;
  font-size:.8rem;
  padding:.2rem .35rem;
  flex:0 0 100%;
  margin-bottom:.2rem;
}

/* ---------------------------------------------------------------------
   News: oeffentliches Archiv der versendeten Newsletter
   --------------------------------------------------------------------- */
.km-news{
  max-width:760px;
  margin:0 auto;
}
.km-news-eintrag{
  padding:0 0 28px;
  margin-bottom:28px;
  border-bottom:1px solid var(--border);
}
.km-news-eintrag:last-of-type{ border-bottom:0; }
.km-news-titel{
  font-weight:800;
  letter-spacing:.005em;
  margin-bottom:.25rem;
}
.km-news-datum{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:1rem;
}
.km-news-text{ line-height:1.8; }
.km-news-text ul{ padding-left:1.25rem; }
.km-news-text a{ color:var(--accent); }
.km-news-abo{
  margin-top:8px;
  padding:20px 24px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--card);
}

/* Startnummer: schmales Eingabefeld mit Haken daneben, wie die Zeitfelder
   in derselben Tabelle. */
.km-startnr-form{
  display:flex;
  align-items:center;
  gap:4px;
}
.km-startnr-input{
  width:64px;
  text-align:center;
}
/* Im Profil: eigene Zeile, gleiche Optik wie die Zeitangaben darunter */
.km-anmeldung-startnr{
  display:block;
  margin-top:.35rem;
  font-size:13px;
  color:var(--text);
}
.km-anmeldung-startnr .km-zeit-label{
  margin-right:.35rem;
}

/* Newsletter-Schalter in der Mitgliederliste */
.km-nl-form{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.km-nl-schalter{
  width:1.15rem;
  height:1.15rem;
  margin:0;
  cursor:pointer;
}

/* Notfallkontakt als eigene Kachel.

   Ueberschrift und die beiden Felder sind drei getrennte Spalten derselben
   Formularzeile - sie stammen aus verschiedenen Partials und lassen sich nicht
   gemeinsam umschliessen, ohne die Partials ineinander zu schachteln. Statt
   dessen tragen alle drei denselben Hintergrund und die Seitenlinien, und nur
   die erste bzw. letzte bekommt Rundung und Abschluss. Von aussen ist das eine
   Kachel, im Markup bleiben es drei unabhaengige Felder.

   Der eigene Abstand nach unten muss weg (Bootstrap mb-3), sonst klaffte
   zwischen den Teilen ein Spalt und die Kachel zerfiele in drei Streifen. */
.km-notfall-kopf,
.txKmverwaltungNotfallkontakt,
.txKmverwaltungNotfallnummer{
  background:var(--card);
  border-left:1px solid var(--panel-border);
  border-right:1px solid var(--panel-border);
  margin-bottom:0;
  padding-left:18px;
  padding-right:18px;
}
.km-notfall-kopf{
  margin-top:1.25rem;
  padding-top:16px;
  border-top:1px solid var(--panel-border);
  border-radius:12px 12px 0 0;
}
/* Luft zwischen den beiden Feldern - als Innenabstand, nicht als Aussenabstand:
   ein margin wuerde den durchgehenden Hintergrund aufreissen und die Kachel
   wieder in Streifen zerlegen. */
.txKmverwaltungNotfallkontakt{
  padding-bottom:14px;
}
.txKmverwaltungNotfallnummer{
  padding-bottom:16px;
  margin-bottom:1.25rem;
  border-bottom:1px solid var(--panel-border);
  border-radius:0 0 12px 12px;
}
.km-notfall-titel{
  font-size:1rem;
  font-weight:800;
  margin:0 0 .25rem;
}
.km-notfall-hinweis{
  color:var(--muted);
  font-size:14px;
  margin:0 0 .75rem;
}

/* Footer: Kontakt- und Social-Symbole */
.footer-social{
  display:flex;
  align-items:center;
  gap:14px;
}
.footer-social-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:8px;
  color:var(--muted);
  text-decoration:none;
  transition:color .15s ease, background-color .15s ease;
}
.footer-social-link:hover,
.footer-social-link:focus-visible{
  color:var(--accent);
  background:var(--accent-soft-bg);
}

/* Zustimmungs-Kacheln der Registrierung (Datenschutz und Newsletter).
   Beide Rahmen haengen am Spalten-Element, nicht an der form-check darin.
   Das ist keine Geschmacksfrage: das Raster gibt jeder Spalte ueber
   ".row > *" 0.75rem Innenabstand je Seite. Ein Rahmen eine Ebene tiefer
   sitzt dadurch 24px schmaler als einer auf der Spalte selbst - genau der
   Versatz, der die beiden Kacheln vorher unterschiedlich breit machte.
   Deshalb hier eine gemeinsame Regel: gleiche Ebene, gleiche Masse, und
   kein Weg, das eine zu aendern und das andere zu vergessen. */
.km-auth-form .privacy,
.txKmverwaltungNewsletter{
  background:var(--card);
  border:1px solid var(--panel-border);
  border-radius:12px;
  padding:16px 18px;
}

/* Newsletter-Einwilligung: Kaestchen und Text nebeneinander. */
.km-newsletter-check{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:.6rem;
  padding-left:0;
}
/* Zwei Klassen tief, weil Bootstrap das Kaestchen ueber
   ".form-check .form-check-input" mit margin-left:-1.5em nach links zieht - fuer
   das eingerueckte Standardlayout. Eine einfache Klasse verliert dagegen, und
   das Kaestchen haengt aus der Kachel heraus. */
.km-newsletter-check .km-newsletter-input{
  flex:0 0 auto;
  width:1.15rem;
  height:1.15rem;
  margin:0;
  float:none;
}
.km-newsletter-label{
  margin:0;
  line-height:1.35;
}

/* Nur der Abstand zur Kachel darueber - Rahmen, Hintergrund und Innenabstand
   stehen in der gemeinsamen Regel weiter oben. */
.txKmverwaltungNewsletter{
  margin-top:.25rem;
}
.txKmverwaltungNewsletter .form-text{
  margin-top:.5rem;
  margin-bottom:0;
}

/* ---------------------------------------------------------------------
   Rechts- und Textseiten (Teilnahmebedingungen, AGB, Cookies, Jobs)
   Eine gemeinsame Klasse statt eines Style-Blocks je Partial - Impressum
   und Datenschutz bringen ihren noch selbst mit, neue Seiten nutzen diese.
   --------------------------------------------------------------------- */
.km-rechtstext{
  max-width:760px;
  margin:0 auto;
}
.km-rechtstext h2{
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.005em;
  line-height:1.1;
  font-size:clamp(1.15rem,1rem + 1vw,1.5rem);
  margin:2.2rem 0 .9rem;
}
.km-rechtstext h2::after{
  content:"";
  display:block;
  width:48px;
  height:4px;
  border-radius:2px;
  margin-top:.55rem;
  background:linear-gradient(90deg,#2a6eb1,#1b3f76);
}
.km-rechtstext h2:first-child{ margin-top:0; }
.km-rechtstext h3{
  font-weight:700;
  font-size:1.05rem;
  margin:1.6rem 0 .5rem;
}
.km-rechtstext p,
.km-rechtstext li{
  line-height:1.8;
  color:#2a2f34;
}
.km-rechtstext p{ margin-bottom:1rem; }
.km-rechtstext ul,
.km-rechtstext ol{
  margin:0 0 1rem;
  padding-left:1.3rem;
}
.km-rechtstext a{
  color:var(--accent,#1b3f76);
  font-weight:600;
}
.km-rechtstext .km-stand{
  color:var(--muted);
  font-size:14px;
  margin-top:2.5rem;
}

/* ---------------------------------------------------------------------
   "Wir suchen dich!" - Aufbau wie die Vorlage, Farben aus der Marke
   --------------------------------------------------------------------- */
.km-jobs{
  max-width:860px;
  margin:0 auto;
}
.km-jobs h2{
  font-weight:800;
  letter-spacing:.005em;
  font-size:clamp(1.2rem,1rem + 1vw,1.6rem);
  margin:2.2rem 0 .9rem;
}
.km-jobs h3{
  font-weight:700;
  font-size:1.05rem;
  margin:0 0 .6rem;
}
.km-jobs p,
.km-jobs li{
  line-height:1.8;
  color:#2a2f34;
}
.km-jobs p{ margin-bottom:1rem; }
.km-jobs ul{ margin:0 0 1rem; padding-left:1.3rem; }
.km-jobs a{ color:var(--accent); font-weight:600; }

.km-jobs-anrede{
  font-size:1.05rem;
}
.km-jobs-anrede strong{ color:var(--accent); }

/* Der Balken der Vorlage, nur in Markenblau statt Rot */
.km-jobs-banner{
  background:linear-gradient(90deg,#2a6eb1,#1b3f76);
  color:#fff;
  text-align:center;
  font-size:clamp(1.15rem,1rem + 1vw,1.6rem);
  font-weight:700;
  padding:18px 20px;
  border-radius:10px;
  margin:1.8rem 0;
}
.km-jobs-intro{
  margin:2rem 0 1.5rem;
}
.km-jobs-intro h2{ margin:0; }
.km-jobs-intro-zweit{
  font-size:clamp(1.1rem,1rem + .8vw,1.45rem);
  color:var(--muted);
  margin:.35rem 0 0;
}
.km-jobs-spalten{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.5rem 2.5rem;
  margin-bottom:1rem;
}
.km-jobs-abschluss{
  text-align:center;
  color:var(--muted);
}

/* Zustimmung zu den Teilnahmebedingungen im Anmeldeformular */
.km-bedingungen{
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  margin-bottom:.9rem;
  text-align:left;
}
.km-bedingungen .form-check-input{
  flex:0 0 auto;
  width:1.15rem;
  height:1.15rem;
  margin:.15rem 0 0;
  float:none;
}
.km-bedingungen label{
  font-size:14px;
  line-height:1.45;
  color:var(--muted);
  margin:0;
}
.km-bedingungen a{ color:var(--accent); font-weight:600; }

/* Flash-Messages von Extbase. Der ViewHelper gibt eine <ul> aus, die sonst mit
   Aufzaehlungspunkten und Einzug dastuende - die Bootstrap-Klassen an den <li>
   passen dagegen bereits. */
ul.typo3-messages{
  list-style:none;
  margin:0 0 1.25rem;
  padding:0;
}
ul.typo3-messages > li{ margin-bottom:.75rem; }
ul.typo3-messages > li:last-child{ margin-bottom:0; }
ul.typo3-messages .alert-message{ margin:0; }

/* Kontaktformular (Seite uid 9). Zog aus dem frueheren Inline-<style> des
   Partials hierher, als das Formular ein Plugin wurde. */
.km-kontakt{ max-width:720px; margin:0 auto; }
.km-kontakt .km-kontakt-lead{
  font-size:1.15rem;
  line-height:1.6;
  color:#2a2f34;
  margin-bottom:1.8rem;
}
.km-kontakt form{ margin-bottom:1.25rem; }
/* Das Raster sitzt eine Ebene tiefer, damit die versteckten Felder von f:form
   keine Zelle belegen. Das globale "form{display:grid}" wird dafuer aufgehoben. */
.km-kontakt .km-kontakt-form{ display:block; }
.km-kontakt .km-kontakt-felder{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px;
}
/* Button-Zeile nicht strecken (globales form div{align-items:stretch}) */
.km-kontakt .km-kontakt-actions{ align-items:flex-start; }
.km-kontakt .km-kontakt-actions .btn{ align-self:flex-start; }
.km-kontakt .km-kontakt-fallback{ color:#5f6b70; font-size:.95rem; }
.km-kontakt .km-kontakt-fallback a{ color:var(--accent,#1b3f76); font-weight:600; }
/* Honigtopf: aus dem Blickfeld, aber im Formular. Bewusst nicht display:none -
   manche Skripte ueberspringen genau das und fallen dann nicht darauf herein. */
.km-honigtopf{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* Nachtraegliche Zustimmung: Seite hinter dem Link aus der Mail. Kein eigener
   Kachelrahmen - die Seite traegt hier nur diesen einen Inhalt. */
.km-zustimmung{
  max-width:640px;
  margin:0 auto;
}
.km-zustimmung-titel{
  font-size:clamp(1.35rem, 3vw, 1.75rem);
  margin-bottom:.75rem;
}
.km-zustimmung-nr{ font-size:1.05rem; }
.km-zustimmung-hinweis{
  font-size:14px;
  margin-top:1.25rem;
}
/* Zustimmungsspalte der Teilnehmerliste. Das Haekchen steht fuer sich, der
   Button ersetzt es, solange die Zustimmung aussteht. */
.km-zustimmung-ok{
  color:var(--ok, #1a7f37);
  font-size:1.1rem;
  font-weight:700;
}
.km-zustimmung-form{ display:inline; }

/* ---------------------------------------------------------------------
   Bildergalerie (oeffentlich) - Raster, Sprungauswahl und Blaetterfenster.
   Wird von der Galerieseite und der Event-Detailseite genutzt, deshalb
   haengt nichts davon an einer seitenspezifischen Klasse.
   --------------------------------------------------------------------- */
.km-galerie{ max-width:1200px; margin:0 auto; }

.km-gal-sprung{
  display:flex;
  align-items:center;
  gap:.6rem;
  flex-wrap:wrap;
  margin-bottom:1.5rem;
}
.km-gal-sprung label{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--muted);
  margin:0;
}
.km-gal-sprung select{ width:auto; min-width:150px; }

.km-gal-jahrgang{ margin-bottom:2.5rem; }
.km-gal-jahr{
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.005em;
  font-size:clamp(1.15rem, 1rem + 1vw, 1.6rem);
  margin:0 0 1rem;
  /* Damit die Sprungmarke nicht unter dem festen Kopf verschwindet. */
  scroll-margin-top:5rem;
}
.km-gal-jahr::after{
  content:"";
  display:block;
  width:44px;
  height:4px;
  border-radius:2px;
  margin-top:.5rem;
  background:linear-gradient(90deg,#2a6eb1,#1b3f76);
}

.km-gal-raster{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:1rem;
}
.km-gal-kachel{
  margin:0;
  background:var(--card);
  border:1px solid var(--panel-border);
  border-radius:12px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  scroll-margin-top:5rem;
}
/* Die Kachel ist eine Schaltflaeche, kein Link: sie fuehrt nirgendwohin,
   sondern oeffnet das Fenster auf derselben Seite. */
.km-gal-oeffnen{
  display:block;
  padding:0;
  border:0;
  background:none;
  cursor:zoom-in;
  line-height:0;
}
.km-gal-oeffnen img{
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  object-fit:cover;
  transition:transform .25s ease;
}
.km-gal-oeffnen:hover img,
.km-gal-oeffnen:focus-visible img{ transform:scale(1.04); }

.km-gal-unterschrift{
  padding:.7rem .85rem;
  display:flex;
  flex-direction:column;
  gap:.15rem;
  flex:1 1 auto;
}
.km-gal-titel{ font-weight:700; line-height:1.3; }
.km-gal-untertitel{ font-size:14px; color:var(--muted); line-height:1.35; }
.km-gal-likezeile{ margin-top:auto; padding-top:.5rem; }
.km-gal-likeform{ display:inline; }
.km-gal-like{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  border:1px solid var(--panel-border);
  border-radius:999px;
  background:none;
  padding:.2rem .6rem;
  font-size:14px;
  color:var(--muted);
  cursor:pointer;
}
.km-gal-like:hover{ border-color:#d33; color:#d33; }
.km-gal-like.ist-geliked{ border-color:#d33; color:#d33; font-weight:700; }
/* Gaesten wird dasselbe angezeigt, aber ohne Klickversprechen. */
.km-gal-like.ist-gast{ cursor:default; }
.km-gal-like.ist-gast:hover{ border-color:var(--panel-border); color:var(--muted); }

.km-gal-anmeldehinweis{ font-size:14px; color:var(--muted); margin-top:1rem; }
.km-gal-leer{ color:var(--muted); }

/* --- Blaetterfenster --- */
body.km-gal-offen{ overflow:hidden; }
.km-gal-overlay{
  position:fixed;
  inset:0;
  z-index:1080;
  background:rgba(8,12,20,.94);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem;
}
.km-gal-overlay[hidden]{ display:none; }
.km-gal-buehne{
  margin:0;
  max-width:min(1400px,100%);
  max-height:100%;
  display:flex;
  flex-direction:column;
  gap:.75rem;
}
.km-gal-buehne img{
  max-width:100%;
  /* Platz fuer die Bildangaben darunter freihalten. */
  max-height:calc(100vh - 11rem);
  object-fit:contain;
  margin:0 auto;
  border-radius:6px;
}
.km-gal-info{ text-align:center; color:#f2f5f8; }
.km-gal-info p{ margin:0 0 .2rem; }
.km-gal-info-titel{ font-weight:700; font-size:1.05rem; }
.km-gal-info-meta{ font-size:14px; color:#b9c3cf; }
.km-gal-dank{ font-size:14px; color:#8fd0ff; margin-top:.4rem; }
.km-gal-zaehler{ font-size:13px; color:#8b959f; }

.km-gal-schliessen,
.km-gal-nav{
  position:absolute;
  border:0;
  background:rgba(255,255,255,.1);
  color:#fff;
  cursor:pointer;
  border-radius:999px;
  line-height:1;
}
.km-gal-schliessen{
  top:1rem; right:1rem;
  width:2.75rem; height:2.75rem;
  font-size:1.8rem;
}
.km-gal-nav{
  top:50%;
  transform:translateY(-50%);
  width:3rem; height:3rem;
  font-size:2.2rem;
}
.km-gal-zurueck{ left:1rem; }
.km-gal-vor{ right:1rem; }
.km-gal-schliessen:hover,
.km-gal-nav:hover{ background:rgba(255,255,255,.22); }

@media (max-width:576px){
  /* Auf schmalen Geraeten wird gewischt; die Pfeile wuerden nur das Bild
     verdecken. Die Schliessen-Schaltflaeche bleibt, sonst sitzt man fest. */
  .km-gal-nav{ display:none; }
  .km-gal-buehne img{ max-height:calc(100vh - 13rem); }
}

/* ---------------------------------------------------------------------
   Zweistufige Hauptnavigation (Rueckblick -> Events / Bildergalerie)
   --------------------------------------------------------------------- */
.km-untermenue-pfeil{ font-size:.7em; opacity:.7; }

/* Bis zum Umbruchpunkt ist die Navigation eingeklappt und untereinander -
   dort steht das Untermenue einfach eingerueckt darunter. Das braucht kein
   Aufklappen und funktioniert auch ohne JavaScript und ohne Zielgenauigkeit
   am Touchscreen. */
.km-untermenue{
  list-style:none;
  margin:0 0 .25rem;
  padding:0 0 0 1rem;
}
.km-untermenue-link{
  display:block;
  padding:.3rem .5rem;
  color:var(--text);
  text-decoration:none;
  font-size:.95rem;
  opacity:.85;
}
.km-untermenue-link:hover,
.km-untermenue-link:focus-visible{ opacity:1; color:var(--accent); }
.km-untermenue-link.active{ color:var(--accent); font-weight:700; opacity:1; }

@media (min-width: 992px){
  /* Ab hier liegt die Navigation waagerecht: das Untermenue wird zur
     Klappkarte unter dem Elternpunkt. Sie oeffnet bei Hover UND bei
     Tastaturfokus irgendwo im Zweig - ohne focus-within waere sie mit der
     Tabulatortaste nicht erreichbar. */
  .km-hat-untermenue{ position:relative; }
  .km-untermenue{
    position:absolute;
    top:100%;
    left:0;
    min-width:13rem;
    margin:0;
    padding:.4rem;
    background:var(--card);
    border:1px solid var(--panel-border);
    border-radius:12px;
    box-shadow:0 10px 30px rgba(10,20,40,.14);
    opacity:0;
    visibility:hidden;
    transform:translateY(.35rem);
    transition:opacity .15s ease, transform .15s ease, visibility .15s;
    z-index:1050;
  }
  .km-hat-untermenue:hover > .km-untermenue,
  .km-hat-untermenue:focus-within > .km-untermenue{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }
  .km-untermenue-link{
    border-radius:8px;
    padding:.45rem .7rem;
    white-space:nowrap;
  }
  .km-untermenue-link:hover,
  .km-untermenue-link:focus-visible{ background:var(--accent-soft-bg); }
  /* Der Mauszeiger muss die Luecke zwischen Elternpunkt und Karte ueberbrücken
     koennen, sonst klappt sie beim Hinuntergehen zu. */
  .km-hat-untermenue::after{
    content:"";
    position:absolute;
    top:100%;
    left:0;
    right:0;
    height:.5rem;
  }
}

/* Nachlade-Marke am Ende der Galerie. Sie ist zugleich der Link fuer den Weg
   ohne JavaScript - deshalb sieht sie aus wie ein Link und nicht wie ein
   Ladebalken. */
.km-gal-weiter{ margin:1.5rem 0 0; text-align:center; }
.km-gal-weiter-link{
  display:inline-block;
  padding:.6rem 1.2rem;
  border:1px solid var(--panel-border);
  border-radius:999px;
  color:var(--accent);
  font-weight:600;
  text-decoration:none;
}
.km-gal-weiter-link:hover,
.km-gal-weiter-link:focus-visible{ background:var(--accent-soft-bg); }
/* Waehrend des Nachladens: der Link bleibt bedienbar, wird aber ruhiger. */
.km-gal-weiter.ist-ladend .km-gal-weiter-link{ opacity:.55; }
.km-gal-weiter.ist-ladend .km-gal-weiter-link::after{
  content:" …";
}

/* Hinweis auf der Veranstaltungsseite, solange nichts freigeschaltet ist.
   Bewusst mittig und mit Luft: es ist der einzige Inhalt der Seite. */
.km-keine-events{
  max-width:640px;
  margin:0 auto;
  text-align:center;
  padding:2rem 0;
}
.km-keine-events p{ line-height:1.7; color:var(--muted); margin-bottom:1rem; }
.km-keine-events-lead{
  font-size:1.15rem;
  font-weight:600;
  color:var(--text) !important;
}
.km-keine-events .btn{ margin-top:.5rem; }

/* Galerie im Startseiten-Teaser: gleiche Kacheln, nur ohne die
   Jahresabschnitte der grossen Galerie. */
.km-teaser-galerie{ margin-top:.5rem; }

/* ---------------------------------------------------------------------
   Ergebnisse: Bestenliste, Zeit-Einreichung, Urkunde
   --------------------------------------------------------------------- */
.km-ergebnisse{ max-width:900px; margin:0 auto; }
.km-erg-kategorie{ margin-bottom:3rem; }
.km-erg-kategorie-titel{
  font-weight:800;
  text-transform:uppercase;
  font-size:clamp(1.15rem, 1rem + 1vw, 1.6rem);
  margin:0 0 .25rem;
}
.km-erg-kategorie-titel::after{
  content:"";
  display:block;
  width:44px; height:4px;
  border-radius:2px;
  margin-top:.5rem;
  background:linear-gradient(90deg,#2a6eb1,#1b3f76);
}
.km-erg-anzahl{ font-size:14px; color:var(--muted); margin-bottom:1.25rem; }
.km-erg-block{ margin-bottom:1.75rem; }
.km-erg-titel{ font-size:1rem; font-weight:700; margin:0 0 .5rem; }
.km-erg-tabelle{ margin:0; }
.km-erg-tabelle th{ font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
/* Zahlenspalten mit gleichbreiten Ziffern - sonst tanzen die Zeiten. */
.km-erg-platz, .km-erg-nr, .km-erg-zeit{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.km-erg-platz{ width:4.5rem; font-weight:700; }
.km-erg-nr{ width:4rem; color:var(--muted); }
.km-erg-zeit{ width:7rem; text-align:right; font-weight:600; }
.km-erg-event{ font-size:14px; color:var(--muted); }
.km-erg-fuss{ font-size:13px; color:var(--muted); margin-top:2rem; }

/* Zeit-Einreichung im Profil */
.km-zeit-einreichung{ margin-top:.5rem; }
.km-zeit-status{ font-size:14px; margin:0 0 .35rem; }
.km-zeit-status.ist-pruefung{ color:#b4530a; }
.km-zeit-status.ist-frei{ color:#1a7f37; font-weight:600; }
.km-zeit-status.ist-abgelehnt{ color:#c7342b; }
.km-zeit-grund{ display:block; font-style:italic; }
.km-zeit-details summary{
  cursor:pointer;
  font-size:14px;
  color:var(--accent);
  font-weight:600;
}
.km-zeit-formular{ margin-top:.6rem; display:block; }
.km-zeit-zeile{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  gap:.4rem;
  margin-bottom:.4rem;
}
.km-zeit-zeile .km-zeit-label{ min-width:3.5rem; }
.km-zeit-zeile input[type=date]{ max-width:11rem; }
.km-zeit-zeile input[type=time]{ max-width:7rem; }
.km-zeit-hinweis{ font-size:13px; color:var(--muted); }

/* --- Urkunde: A4 hoch, nach der Vorlage --- */
.km-urkunde-huelle{ max-width:820px; margin:0 auto; }
.km-urkunde-aktion{ display:flex; gap:.5rem; margin-bottom:1.5rem; }

.km-urkunde{
  background:#fff;
  /* Seitenverhaeltnis A4 hoch - der Bildschirm zeigt, was der Drucker ausgibt. */
  aspect-ratio:210/297;
  padding:10mm;
  box-shadow:0 10px 40px rgba(10,20,40,.12);
  color:#16263f;
}
/* Doppelter Rahmen wie im Entwurf: aussen kraeftig, innen fein. */
.km-urkunde-rahmen{
  height:100%;
  border:2px solid #16263f;
  outline:1px solid #6fa8dc;
  outline-offset:-5px;
  padding:6% 7%;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.km-urkunde-kopf{ width:100%; }
.km-urkunde-wortmarke{ max-height:60px; margin:0 auto; display:block; }
/* Faellt die Bilddatei aus, traegt der Schriftzug die Marke weiter. */
.km-urkunde-wortmarke-text{
  font-weight:800;
  font-size:1.6rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin:.4rem 0 0;
  line-height:1;
}
.km-urkunde-wortmarke-text span{
  display:block;
  font-size:.62em;
  letter-spacing:.2em;
  margin-top:.25rem;
}
.km-urkunde-kopf::after{
  content:"";
  display:block;
  height:2px;
  background:#16263f;
  margin:.6rem 0 0;
}

.km-urkunde-jahr{
  font-size:1.1rem;
  font-weight:700;
  letter-spacing:.3em;
  color:#2a6eb1;
  margin:.9rem 0 0;
}
.km-urkunde-titel{
  font-size:clamp(2rem, 1rem + 4vw, 3rem);
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  margin:.1rem 0 .3rem;
}
.km-urkunde-reihe{
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#2a6eb1;
  margin:0 0 1.1rem;
}

.km-urkunde-text{ margin:0; color:#5f6b70; font-size:1rem; }
.km-urkunde-name{
  font-size:clamp(1.4rem, 1rem + 2vw, 2rem);
  font-weight:700;
  margin:.9rem 0 .3rem;
  min-height:1.4em;
}
.km-urkunde-linie{
  width:62%;
  border:0;
  border-top:1px solid #16263f;
  margin:0 0 1rem;
}
.km-urkunde-event{
  font-size:clamp(1.2rem, 1rem + 1.4vw, 1.7rem);
  font-weight:800;
  text-transform:uppercase;
  color:#2a6eb1;
  margin:.3rem 0 0;
}

.km-urkunde-karte{
  width:100%;
  flex:1 1 auto;
  min-height:0;
  margin:1rem 0;
  border:1px solid rgba(22,38,63,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:.5rem;
}
.km-urkunde-karte svg{ width:100%; height:100%; }
/* Die uebrigen Strecken bilden den Zusammenhang, ohne die eigene zu stoeren. */
.km-urkunde-karte .ist-andere{ stroke:#c9ced6; stroke-width:2.5; }
.km-urkunde-karte .ist-aktiv{ stroke:#1b3f76; stroke-width:5; }

.km-urkunde-werte{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  border:1px solid rgba(22,38,63,.14);
  margin:0;
}
.km-urkunde-werte > div{ flex:1 1 0; padding:.7rem .9rem; text-align:left; }
.km-urkunde-werte > div + div{ border-left:1px solid rgba(22,38,63,.14); }
.km-urkunde-werte dt{
  font-size:.6rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:#2a6eb1;
  font-weight:700;
  margin:0;
}
.km-urkunde-werte dd{
  margin:0;
  font-size:1.25rem;
  font-weight:800;
  font-variant-numeric:tabular-nums;
}
/* Spezifitaet mit ".km-urkunde-werte >" gleichziehen: sonst gewinnt die
   flex:1-Regel oben und das Emblem beansprucht ein Drittel der Leiste,
   statt schmal in der Mitte zu sitzen. */
.km-urkunde-werte > .km-urkunde-emblem{ flex:0 0 auto; text-align:center; padding:.45rem 1.1rem; }
.km-urkunde-werte > .km-urkunde-emblem img{ display:block; height:54px; width:auto; }

.km-urkunde-platz{ font-size:.85rem; color:#5f6b70; margin:.6rem 0 0; min-height:1.2em; }
.km-urkunde-schluss{ font-weight:700; margin:.5rem 0 0; font-size:.95rem; }
.km-urkunde-ort{ margin-top:auto; font-size:.8rem; color:#5f6b70; }
.km-urkunde-fehler{ max-width:600px; margin:2rem auto; text-align:center; color:var(--muted); }

/* --- Urkunde: Druck --- */
@media print{
  /* Alles ausser dem Blatt verschwindet - Kopf, Fuss, Navigation und die
     Schaltflaechen gehoeren nicht aufs Papier. */
  body.site > header,
  body.site > footer,
  /* Der Seitenkopf "URKUNDE" und die animierte Hintergrund-Leinwand gehoeren
     nicht aufs Blatt - beide standen im ersten Ausdruck ueber der Urkunde. */
  .hero,
  #particles,
  body.site > header,
  .km-nicht-drucken,
  .skip-link,
  #km-motion-toggle{ display:none !important; }

  @page{ size:A4 portrait; margin:0; }

  body.site, body{ background:#fff !important; }
  /* Ohne diese Zeile wirft der Browser beim Drucken Farben und Bilder weg -
     Emblem, Wortmarke und die hervorgehobene Strecke kaemen blass heraus. */
  .km-urkunde, .km-urkunde *{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .km-urkunde-huelle{ max-width:none; margin:0; }
  .km-urkunde{
    aspect-ratio:auto;
    width:210mm;
    height:297mm;
    padding:10mm;
    box-shadow:none;
  }
  /* Grautoene drucken sonst je nach Treiber zu blass, um den Zusammenhang
     zwischen den Strecken noch zu zeigen. */
  .km-urkunde-karte .ist-andere{ stroke:#b3b9c2; }
}

/* Erklaerender Satz unter einem Formularfeld. Kleiner und ruhiger als der
   Feldinhalt, aber nicht so blass, dass er uebersehen wird - er begruendet,
   warum eine Pflichtangabe verlangt wird. */
.km-feldhinweis{
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
  margin:.35rem 0 0;
}