/* =========================================================
   SV 09 Otzenrath – Ergänzungen für die Anbindung an die
   Datenbank (Laravel-Theme "version-2"). Alles, was der
   Entwurf in neu/ noch nicht hatte: Highlights, Info-Karten,
   Instagram, News-Archiv, Partner-Seite, Kontaktformular,
   3. Navigationsebene. Wird nach base/home/page.css geladen.
   ========================================================= */

.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}

/* ---------- Navigation: 3. Ebene + viele Einträge ---------- */
.sub a.sub-tief{padding-left:30px}
.sub a.sub-tief b{font-family:var(--body);font-weight:500;text-transform:none;font-size:15px;letter-spacing:0}
.sub a.sub-tief b::before{content:"→ ";opacity:.55}
.m-sub a.m-tief{padding-left:28px;font-size:23px}
/* Untermenues der letzten beiden Menuepunkte rechtsbuendig aufklappen - sonst ragen
   sie (min. 270px breit) ueber den rechten Bildschirmrand. Klebestreifen spiegeln. */
.nav-list > li.has-sub:nth-last-child(-n+2) .sub{left:auto;right:-20px;transform-origin:calc(100% - 24px) 0;transform:translateY(14px) rotate(2deg)}
.nav-list > li.has-sub.open:nth-last-child(-n+2) .sub{transform:none}
.nav-list > li.has-sub:nth-last-child(-n+2) .sub::after{left:auto;right:30px;rotate:5deg}
@media (max-width:1180px) and (min-width:821px){
  .nav-list{gap:12px}
  .nav .top{font-size:13px;letter-spacing:.03em}
}

/* ---------- Footer ---------- */
.f-grid{grid-template-columns:auto repeat(4,1fr)}
.f-grid .f-hilfe{margin-top:14px;font-size:15px}
.f-grid .f-hilfe a{display:inline;width:auto;font-weight:700}
.f-grid img.f-lsb{width:170px;margin-top:14px}  /* Buendnis-Banner: immer in Farbe */
@media (max-width:1100px){.f-grid{grid-template-columns:1fr 1fr 1fr}.f-grid > :first-child{grid-column:1/-1}}
@media (max-width:640px){.f-grid{grid-template-columns:1fr 1fr}.f-grid > :nth-child(2){grid-column:1/-1}}

/* ---------- Highlights (Karten wie "Ball / Freunde / Spaß") ---------- */
.highlights{padding-top:clamp(56px,7vw,100px)}  /* sitzt zwischen den dunklen Sektionen News und Spiel */
/* Spaltenzahl = Anzahl Karten (max. 4, --n kommt aus dem Template), auf
   mittleren Bildschirmen 2 Spalten statt einer unschoenen 3+1-Aufteilung. */
.three.hl{grid-template-columns:repeat(var(--n,3),minmax(0,1fr));margin-top:10px}
@media (max-width:1100px){.three.hl[style*="--n:4"]{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.three.hl{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .three.hl,.three.hl[style]{grid-template-columns:minmax(0,1fr)}
  .three.hl .card{min-height:0}
  .three.hl .hl-ico{margin-bottom:18px}
}
.three.hl .card{min-height:340px;min-width:0}
/* Lange Titel ("Sponsoringmöglichkeiten") duerfen nicht aus der Karte laufen:
   kleiner als bei Ball/Freunde/Spass + Silbentrennung (lang="de"). */
.three.hl .card h3{font-size:clamp(28px,2.5vw,42px);line-height:1;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
.three.hl .card p{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
.hl-ico{font-size:clamp(54px,5vw,76px);line-height:1;margin-bottom:auto}
.hl-link{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-family:var(--hand);font-weight:700;font-size:26px;text-decoration:none}
.hl-link svg{width:26px;transition:transform .4s}
.hl-link:hover svg{transform:translateX(6px)}

/* ---------- Schwarzes Brett ---------- */
.news .leer,.archiv-brett .leer{font-family:var(--hand);font-size:clamp(26px,2.4vw,36px);margin:0 0 20px}
.note-bild{display:block;width:100%;aspect-ratio:16/9;max-height:340px;object-fit:cover;margin:0 0 18px;border:2px solid var(--ink)}
/* News-Bilder immer in Farbe */
/* Lange Kurztexte: auf dem Brett nach ein paar Zeilen kuerzen (der volle Text
   steht hinter "Weiterlesen"), sonst wird eine Rasterzeile riesig und
   neben/unter dem grossen Zettel entsteht eine schwarze Luecke. */
.notes .paper p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;line-clamp:5;overflow:hidden}
.notes .note.feat .paper p{-webkit-line-clamp:7;line-clamp:7}
.notes .paper h3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
/* Der grosse Zettel fuellt seine zwei Rasterzeilen immer ganz aus. */
.notes .note.feat{align-self:stretch;display:flex}
.notes .note.feat .paper{flex:1;display:flex;flex-direction:column;align-items:flex-start}
.notes .note.feat .paper .meta{align-self:stretch}
.news-mehr{margin-top:clamp(40px,5vw,72px);display:flex;justify-content:center}

/* ---------- Info-Karten ("Mehr entdecken") – Zeilen wie bei den Terminen ---------- */
.entdecken .rows{margin-top:40px;border-top:2px solid var(--ink)}
.entdecken .row-e .when{display:block}
.row-bild{width:120px;height:80px;object-fit:cover;border:2px solid currentColor;filter:grayscale(1);transition:filter .4s}
.row-e:hover .row-bild{filter:none}
.verwandt{padding-top:0}
.verwandt .row-e h3{font-size:clamp(26px,3vw,48px)}

/* ---------- Instagram ---------- */
.insta-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(32px,4vw,56px)}
.insta-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,28px)}
.insta-post{position:relative;display:block;background:var(--paper);border:2px solid var(--ink);padding:10px 10px 44px;box-shadow:6px 6px 0 var(--ink);rotate:var(--r,0deg);text-decoration:none;transition:rotate .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.insta-post:hover{rotate:0deg;box-shadow:10px 12px 0 var(--ink)}
.insta-post img{width:100%;aspect-ratio:1;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:filter .4s}
.insta-post:hover img{filter:none}
.insta-zahlen{position:absolute;left:14px;bottom:10px;font-family:var(--hand);font-size:22px}
@media (max-width:900px){.insta-grid{grid-template-columns:repeat(2,1fr)}}

/* ---------- Partner-Laufband ---------- */
.sp-name{font-family:var(--display);text-transform:uppercase;font-size:clamp(18px,1.6vw,24px);line-height:1.05;text-align:center;white-space:normal}
.sp-logo{text-decoration:none}
.sp-row.inv .sp-logo img{background:var(--paper);padding:6px 10px;border-radius:4px}
.sp-mehr{padding:22px var(--gutter) 0;text-align:right}
.sp-mehr a{display:inline-flex;align-items:center;gap:8px;font-family:var(--hand);font-weight:700;font-size:26px;text-decoration:none}
.sp-mehr svg{width:26px;transition:transform .4s}
.sp-mehr a:hover svg{transform:translateX(6px)}

/* ---------- Chips (Filter, Seitenblättern) ---------- */
.chip{display:inline-flex;align-items:center;justify-content:center;min-width:44px;font:500 14px var(--body);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--ink);background:transparent;border:2px solid var(--ink);
  border-radius:255px 15px 225px 15px/15px 225px 15px 255px;padding:10px 18px;cursor:pointer;transition:background .3s,color .3s}
.chip.on,.chip:hover{background:var(--ink);color:var(--paper)}
.chip.is-aus{opacity:.3;cursor:default}
.chip.is-aus:hover{background:transparent;color:inherit}
[data-dark] .chip{color:var(--paper);border-color:var(--paper)}
[data-dark] .chip.on,[data-dark] .chip:hover{background:var(--paper);color:var(--ink)}
[data-dark] .chip.is-aus:hover{background:transparent;color:var(--paper)}

/* ---------- News-Archiv ---------- */
.archiv-filter{display:flex;flex-wrap:wrap;gap:18px 32px;align-items:center;padding-bottom:clamp(40px,5vw,70px)}
.archiv-suche,.archiv-datum{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.archiv-kats{display:flex;flex-wrap:wrap;gap:10px}
.archiv-filter input[type=text],.archiv-filter input[type=date]{font:inherit;font-size:16px;color:var(--ink);background:transparent;border:0;border-bottom:2px solid var(--ink);padding:8px 2px;min-width:0}
.archiv-filter input[type=text]{width:min(260px,60vw)}
.archiv-datum label{display:flex;align-items:center;gap:8px;font-family:var(--hand);font-size:22px}
.archiv-reset{font-family:var(--hand);font-weight:700;font-size:22px}
.archiv-brett{padding-top:clamp(70px,8vw,120px);padding-bottom:clamp(70px,8vw,120px)}
.archiv-brett .note:hover .paper{rotate:0deg}
.blaettern{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;margin-top:clamp(40px,5vw,72px)}
.blaettern-punkte{padding:0 6px}

/* ---------- News-Detail ---------- */
.prose .news-meta{font-size:14px;letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.prose .news-meta .tag{font-family:var(--hand);font-size:24px;letter-spacing:0;text-transform:none}
.prose figure.farbig img{filter:none}
.prose img{max-width:100%;height:auto}

/* ---------- Partner-Seite ---------- */
.partner-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:clamp(22px,3vw,40px)}
.partner-karte{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;border:2px solid var(--ink);padding:24px 20px;background:var(--paper);box-shadow:6px 6px 0 var(--ink);rotate:var(--r,0deg);transition:rotate .4s cubic-bezier(.2,.8,.2,1)}
.partner-karte:hover{rotate:0deg}
.partner-logo{height:110px;width:100%;display:grid;place-items:center}
.partner-logo img{max-height:100%;max-width:100%;object-fit:contain}
.partner-karte h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:22px;line-height:1.1;margin:0}
.partner-web{font-family:var(--hand);font-weight:700;font-size:22px}
.leer-hell{font-family:var(--hand);font-size:clamp(26px,2.4vw,36px)}

/* ---------- Formulare ----------
   Gilt fuer die Kontaktformular-Seite (.v2-*) UND fuer Formulare, die als
   Snippet im Seiteninhalt eingebettet sind (.kontaktformular-* aus
   resources/views/kontaktformular/embed.blade.php - deren Styles stehen in
   Version 1 in public/css/styles.css, die hier nicht geladen wird). */
.v2-form,.kontaktformular{display:flex;flex-direction:column;gap:22px;position:relative;margin:2em 0;max-width:680px}
.kontaktformular--box{border:2px solid var(--ink);padding:clamp(22px,3vw,40px);background:var(--paper);box-shadow:8px 8px 0 var(--ink);rotate:-.4deg}
.kontaktformular-titel{font-family:var(--display);text-transform:uppercase;font-size:clamp(28px,3vw,44px);line-height:1}
.kontaktformular-beschreibung{margin:-8px 0 0}
.v2-feld,.kontaktformular-feld{display:flex;flex-direction:column;gap:6px;margin:0}
.v2-feld label,.kontaktformular-feld label{font-family:var(--display);text-transform:uppercase;font-size:18px;letter-spacing:.02em;line-height:1.2}

.v2-feld :is(input,textarea,select),
.kontaktformular-feld :is(input,textarea,select),
.prose :is(input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],input[type=url],textarea,select){
  font:inherit;font-size:17px;line-height:1.4;color:var(--ink);background:transparent;border:2px solid var(--ink);
  border-radius:4px 10px 5px 12px/10px 4px 12px 5px;padding:12px 14px;width:100%;transition:box-shadow .25s}
.v2-feld textarea,.kontaktformular-feld textarea,.prose textarea{min-height:140px;resize:vertical}
:is(.v2-feld,.kontaktformular-feld,.prose) select:not([multiple]){appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1,1.5 L6,6.5 L11,1.5' fill='none' stroke='%230d0d0d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center/12px}
.v2-feld :is(input,textarea,select):focus,
.kontaktformular-feld :is(input,textarea,select):focus,
.prose :is(input,textarea,select):focus{outline:none;box-shadow:5px 5px 0 var(--ink)}

.v2-feld-checkbox,.kontaktformular-feld-checkbox{flex-direction:row;align-items:flex-start;gap:12px}
.v2-feld-checkbox input,.kontaktformular-feld-checkbox input[type=checkbox],.prose input[type=checkbox]{width:22px;height:22px;flex-shrink:0;margin:2px 0 0;padding:0;accent-color:var(--ink);box-shadow:none}
.v2-feld-checkbox label,.kontaktformular-feld-checkbox label{font-family:var(--body);text-transform:none;font-size:16px;letter-spacing:0;line-height:1.45}
.v2-pflicht,.kontaktformular-pflicht{font-family:var(--hand);font-size:22px;line-height:1;color:inherit}
.v2-fehler{font-family:var(--hand);font-weight:700;font-size:20px;color:#b3261e}

/* Absenden-Button: wie .btn.dark aus base.css */
.v2-form .btn{cursor:pointer;background:transparent;font-size:clamp(18px,1.6vw,24px);padding:16px 26px}
.kontaktformular button[type=submit],.kontaktformular .btn-mehr-news{align-self:flex-start;display:inline-flex;align-items:center;gap:12px;
  font-family:var(--display);text-transform:uppercase;font-size:clamp(18px,1.6vw,24px);letter-spacing:.03em;line-height:1;
  padding:16px 26px;border:2px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);cursor:pointer;transition:background .3s,color .3s,transform .3s}
.kontaktformular button[type=submit]::after{content:"→";font-family:var(--body);transition:transform .3s}
.kontaktformular button[type=submit]:hover{background:var(--ink);color:var(--paper)}
.kontaktformular button[type=submit]:hover::after{transform:translateX(5px)}
.kontaktformular button[type=submit]:disabled{opacity:.5;cursor:wait}

/* Rueckmeldung nach dem Absenden (eingebettete Formulare, per JS gesetzt) */
.kontaktformular-nachricht{display:none;max-width:680px;margin:0 0 2em;padding:18px 22px;border:2px solid var(--ink);font-family:var(--hand);font-weight:700;font-size:24px;line-height:1.2}
.kontaktformular-nachricht.ist-erfolg{background:var(--ink);color:var(--paper);box-shadow:6px 6px 0 var(--grey)}
.kontaktformular-nachricht.ist-fehler{color:#b3261e;border-color:#b3261e;box-shadow:6px 6px 0 #b3261e}

/* ---------- Teams: Satz neben der Ueberschrift mittig ausrichten ----------
   Der Satz ("Von den Allerkleinsten ...") steht zwischen dem Block "N Teams. Ein
   Trikot." und den Pfeil-Buttons: senkrecht mittig zur Hoehe des Blocks, waagerecht
   mittig in der verbleibenden Breite. Auf schmalen Bildschirmen rutscht er in eine
   eigene Zeile (flex-wrap), bleibt dort zentriert. */
.teams-head > div:first-child{flex:0 1 auto}
.teams-head > p.teams-note{flex:1 1 260px;align-self:center;margin:0 auto;text-align:center;transform-origin:50% 50%}

/* ---------- Fest im Kalender: beliebig lange Titel aus dem Kalender ----------
   Die Titel kommen aus dem Portal und koennen sehr lang sein (auch einzelne lange
   Woerter). 1) Spalte darf schrumpfen (minmax(0,1fr)), 2) lange Titel starten mit
   kleinerer Schrift (Klassen aus start.blade.php), 3) Woerter werden notfalls
   getrennt/umgebrochen, 4) home.js verkleinert die Schrift, bis auch das laengste
   Wort ohne Trennung passt (fitEventTitles), und rechnet bei jeder Groesse neu. */
.events .row-e{grid-template-columns:140px minmax(0,1fr) auto}
.events .row-e h3{min-width:0;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
.events .row-e .right{min-width:0}
.events .row-e h3.t-lang{font-size:clamp(26px,3.4vw,56px)}
.events .row-e h3.t-sehr-lang{font-size:clamp(22px,2.6vw,42px);line-height:1.02}
@media (max-width:820px){
  .events .row-e{grid-template-columns:minmax(0,1fr)}
  .events .row-e h3.t-lang{font-size:clamp(26px,7vw,44px)}
  .events .row-e h3.t-sehr-lang{font-size:clamp(22px,6vw,36px)}
}


/* Sponsoren-Logos in voller Deckkraft, damit ihre Farben unverfaelscht bleiben. */
.sp-logo{opacity:1}
.sp-row.inv .sp-logo img{background:#fff}

/* ---------- Mini-Spiel (links) + Rangliste (rechts) ---------- */
.board-play{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:stretch}
.board-play .gfield{min-width:0}
@media (max-width:900px){.board-play{grid-template-columns:minmax(0,1fr)}}

/* Zeit im Spielfeld (oben rechts) */
.gtimer{left:auto;right:20px;top:14px;z-index:1;text-align:right;pointer-events:none}
.gtimer small{display:block;font-family:var(--hand);font-size:22px;opacity:.8;line-height:1}
.gtimer span{display:block;font-family:var(--display);font-size:clamp(40px,4vw,64px);line-height:.9;font-variant-numeric:tabular-nums}
.gtimer.knapp span{color:#ff7a66}
.ghint{max-width:calc(100% - 40px)}

/* Ergebnis nach Ablauf der Zeit */
.gover{inset:0;width:100%;height:100%;display:grid;place-items:center;padding:16px;z-index:6;background:rgba(13,13,13,.97);text-align:center}
.gover[hidden]{display:none}
.gover-inner{width:100%;max-width:420px}
.gover-title{font-family:var(--display);text-transform:uppercase;font-size:clamp(56px,8vw,104px);line-height:.9}
.gover-ergebnis{margin:12px 0 18px;font-size:clamp(16px,1.3vw,19px)}
.gover-ergebnis b{font-family:var(--display);font-weight:400;font-size:1.5em;margin-right:.1em}
.gover-form label{display:block;font-family:var(--hand);font-size:24px;margin-bottom:6px}
.gover-zeile{display:flex;gap:10px;align-items:stretch;justify-content:center;flex-wrap:wrap}
.gover-zeile input{flex:1 1 150px;min-width:0;font:inherit;font-size:18px;color:var(--paper);background:transparent;border:2px solid var(--paper);border-radius:4px 10px 5px 12px/10px 4px 12px 5px;padding:10px 14px;-webkit-user-select:text;user-select:text}
.gover-zeile input::placeholder{color:rgba(243,241,236,.5)}
.gover-zeile input:focus{outline:none;box-shadow:4px 4px 0 var(--paper)}
.gover-zeile .btn{font-size:20px;padding:10px 22px;cursor:pointer;background:transparent}
.gover-msg{min-height:1.5em;margin:12px 0 4px;font-family:var(--hand);font-weight:700;font-size:26px;line-height:1.1}
.gover-nochmal{margin-top:6px;background:none;border:0;color:var(--paper);font:500 14px var(--body);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;padding:6px 0;border-bottom:2px solid transparent}
.gover-nochmal:hover,.gover-nochmal:focus-visible{border-bottom-color:currentColor;outline:none}

/* Rangliste */
.rangliste{display:flex;flex-direction:column;min-width:0;padding:clamp(18px,2vw,30px);border:2px solid rgba(243,241,236,.85);border-radius:8px 16px 6px 18px/16px 6px 18px 8px}
.rangliste:only-child{grid-column:1/-1}
.rl-titel{margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(36px,4vw,64px);line-height:.95}
.rl-sub{margin:6px 0 14px;font-family:var(--hand);font-size:clamp(20px,1.8vw,24px);line-height:1.1;opacity:.85;max-width:34ch}
.rl-tabelle{width:100%;border-collapse:collapse;font-size:15px}
.rl-tabelle th{padding:6px;text-align:right;font-family:var(--display);font-weight:400;font-size:15px;letter-spacing:.05em;text-transform:uppercase;border-bottom:2px solid rgba(243,241,236,.55)}
.rl-tabelle th:first-child,.rl-tabelle th:nth-child(2){text-align:left}
.rl-tabelle td{padding:8px 6px;text-align:right;border-bottom:1px solid rgba(243,241,236,.18);font-variant-numeric:tabular-nums}
.rl-tabelle td.rl-rang{width:2.4em;text-align:left;font-family:var(--hand);font-weight:700;font-size:24px;line-height:1}
.rl-tabelle td.rl-name{max-width:0;width:100%;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rl-tabelle tr:nth-child(-n+3) td.rl-rang{font-size:30px}
.rl-tabelle tr.neu td{background:rgba(243,241,236,.16)}
.rl-leer{margin:18px 0 0;font-family:var(--hand);font-size:28px;line-height:1.1}
.rl-leer[hidden]{display:none}
@media (max-width:520px){.rl-tabelle{font-size:14px}.rl-tabelle th{font-size:13px}.rl-tabelle th:last-child,.rl-tabelle td:last-child{display:none}}

/* ---------- "Vielfalt. Respekt. Fairness.": weicher Uebergang oben, Kante unten ----------
   Oben: die Schraffur beginnt mit einer geschwungenen, gerissenen Kante statt mit einem harten Strich
   (Maske nur im oberen Streifen). Unten: die schwarze Papierkante gehoert zu diesem Abschnitt
   (siehe start.blade.php) und liegt auf der Schraffur - kein heller Streifen davor. */
.values{
  --kante:clamp(40px,6vw,88px);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C70,14 150,50 250,30 C400,4 500,52 660,28 C820,6 920,54 1060,26 C1200,2 1320,46 1440,16 V60 H0 Z'/%3E%3C/svg%3E") top/100% var(--kante) no-repeat,linear-gradient(#000,#000) 0 var(--kante)/100% calc(100% - var(--kante)) no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C70,14 150,50 250,30 C400,4 500,52 660,28 C820,6 920,54 1060,26 C1200,2 1320,46 1440,16 V60 H0 Z'/%3E%3C/svg%3E") top/100% var(--kante) no-repeat,linear-gradient(#000,#000) 0 var(--kante)/100% calc(100% - var(--kante)) no-repeat;
}

/* Kein heller Haarstrich zwischen schwarzer Kante und schwarzem Bereich (Rundung auf Teilpixel). */
.values .edge.bottom{bottom:0}
.values + .join{margin-top:-1px}

/* ---------- Erste News auf der Startseite: voller Text ---------- */
.notes .note.feat .voll{font-size:clamp(17px,1.3vw,20px);line-height:1.6;min-width:0;align-self:stretch;overflow-wrap:break-word}
.notes .note.feat .voll > :first-child{margin-top:0}
.notes .note.feat .voll p{display:block;-webkit-line-clamp:none;line-clamp:none;overflow:visible;margin:0 0 1em}
.notes .note.feat .voll h2,.notes .note.feat .voll h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(24px,2.2vw,32px);line-height:1.05;margin:1.4em 0 .4em}
.notes .note.feat .voll img{max-width:100%;height:auto}
.notes .note.feat .voll ul,.notes .note.feat .voll ol{margin:0 0 1em;padding-left:1.3em}
.notes .note.feat .voll a{text-decoration-thickness:2px;text-underline-offset:4px}
.notes .note.feat .paper .more{margin-top:8px}

/* ---------- Kein seitliches Wischen auf dem Handy ----------
   Einblend-Animationen schieben Elemente vor dem Sichtbarwerden seitlich aus dem Bild
   (z. B. Termine/"Mehr entdecken" um 100px). overflow-x:hidden auf body reicht in
   mobilen Browsern (v. a. iOS Safari) nicht - clip schneidet ab, ohne einen eigenen
   Scroll-Container zu bilden (position:sticky z. B. im Inhaltsverzeichnis bleibt intakt). */
body > main, body > footer{overflow-x:clip}