@font-face { font-family: "Schibsted Grotesk"; src: url("/fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("/fonts/schibsted-grotesk-latin-wght-italic.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }

:root {
  --stein: #5f625a;
  --strahl: #878a81;
  --strahl-hell: #cfd1c8;
  --nebel: #f0f1ec;
  --tinte: #24261f;
  --orange: #ff8e01;
  /* Hover-Orange für Text auf hellem Grund: reines Logo-Orange wäre dort zu kontrastarm */
  --hover: #ad5200;
  --haar: #c3c5bc;
  --grau-text: #54574f;
  --tempo: .2s;
  /* Sehr große Bildschirme: Inhalt bleibt in einem Bereich von 1920px, statt auseinanderzulaufen */
  --seite: min(100vw, 1920px);
  --rand: max(clamp(20px, 5vw, 96px), calc((100vw - 1760px) / 2));
  /* Radius: höchstens die halbe freie Höhe, damit der Kranz nie unter Kopf- oder Fußzeile ragt */
  --r: min(40vh, calc((var(--frei-unten) - var(--kopf)) / 2), calc(var(--seite) * .23));
  /* Mittelpunkt des Kranzes: hängt am rechten Bildschirmrand und ist dort leicht angeschnitten */
  --mx: calc(100vw - var(--r) * .13);
  /* Logo-Breite im Kopf; daraus folgt die Höhe der Kopfleiste (Seitenverhältnis 880:367 plus 2 x 10px Innenabstand) */
  --logo: clamp(8.5rem, 12vw, 10.5rem);
  --kopf: calc(var(--logo) * 367 / 880 + 20px);
  /* Abstand zwischen Kopfleiste und Inhalt; auf derselben Höhe bleibt beim Scrollen auch das Porträt stehen */
  --abstand-oben: clamp(40px, 8vh, 96px);
  /* Unteres Ende der freien Fläche für den Kranz: unterer Bildschirmrand oder, falls im Bild, die Oberkante der Fußzeile.
     Misst kranz.js beim Laden, Scrollen, Auf-/Zuklappen und bei Größenänderung; ohne JavaScript gilt der Bildschirmrand. */
  --frei-unten: 100vh;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; font-size: clamp(100%, calc(.5vw + .5rem), 120%); }
body { margin: 0; background: var(--nebel); color: var(--tinte); font: 400 1.125rem/1.6 "Schibsted Grotesk", Arial, sans-serif; overflow-wrap: break-word; display: flex; flex-direction: column; min-height: 100vh; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
img { display: block; max-width: 100%; height: auto; }
p { margin: 0 0 1em; }
h1, h2, h3 { font-weight: 500; margin: 0; letter-spacing: -.02em; line-height: 1.08; }
h1 { font-size: clamp(2.25rem, 3.4vw, 3rem); margin-bottom: .5em; }
h2 { font-size: clamp(1.5rem, 2.3vw, 2.125rem); margin: 1.5em 0 .6em; }
h3 { font-size: 1.25rem; line-height: 1.3; letter-spacing: -.005em; font-weight: 600; margin: 1.6em 0 .3em; }

/* Links wie auf der bisherigen Seite: ruhiger Farbwechsel beim Überfahren */
a { color: inherit; text-decoration: none; transition: color var(--tempo) ease-in-out; }
.sprung { position: absolute; left: -999px; top: 0; background: var(--tinte); color: #fff; padding: .5em 1em; z-index: 20; }
.sprung:focus { left: 8px; top: 8px; }
.versteckt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.symbol { width: 1em; height: 1em; margin-right: .45em; vertical-align: -.12em; fill: currentColor; }
.nur-schmal, .nur-handy { display: none; }

/* Kopf: auf allen Seiten gleich, bleibt beim Scrollen oben */
.kopf { position: sticky; top: 0; z-index: 3; background: var(--stein); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 8px clamp(20px, 3vw, 44px); padding: 10px var(--rand); }
.kopf__logo { flex: none; position: relative; display: block; }
/* Liegt exakt auf dem Kranz im Logo, der 41,9 % der Logobreite einnimmt */
.kranz-logo { display: none; position: absolute; left: 0; top: 0; width: 41.9%; height: 100%; overflow: visible; pointer-events: none; }
.kranz-logo .o { fill: var(--orange); opacity: 0; transition: opacity .2s linear; }
.kranz-logo .an .o { opacity: 1; }
.kopf img { width: var(--logo); }
.kopf nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 26px; font-size: 1.0625rem; }
.kopf nav a { position: relative; padding: 6px 0; }
/* Orange Linie läuft von links ein */
.kopf nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform var(--tempo) ease-out; }
.kopf nav a[aria-current]::after { transform: scaleX(1); }
.menue { display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 2px; font: inherit; font-size: 1.0625rem; color: #fff; background: none; border: 0; cursor: pointer; }
.menue i { position: relative; display: block; width: 20px; height: 12px; }
.menue i::before, .menue i::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform var(--tempo) ease-out, top var(--tempo) ease-out; }
.menue i::before { top: 1px; }
.menue i::after { top: 9px; }
.offen .menue i::before { top: 5px; transform: rotate(45deg); }
.offen .menue i::after { top: 5px; transform: rotate(-45deg); }

/* Kranz, auf allen Seiten an derselben Stelle: senkrecht mittig in der freien Fläche unter der Kopfleiste */
.hintergrund { position: fixed; top: var(--kopf); left: 0; right: 0; height: calc(var(--frei-unten) - var(--kopf)); z-index: 0; pointer-events: none; }
.kranz { position: absolute; left: calc(var(--mx) - var(--r)); top: calc(50% - var(--r)); width: calc(var(--r) * 2); height: calc(var(--r) * 2); overflow: visible; }
.kranz .g { fill: var(--strahl-hell); transition: opacity .2s linear; }
.kranz .o { fill: var(--orange); opacity: 0; transition: opacity .2s linear; }
.kranz .an .o { opacity: 1; }
.kranz .an .g { opacity: 0; }

/* Inhalt: gleiche Textkante und gleicher Abstand auf allen Seiten */
.inhalt { position: relative; z-index: 1; flex: 1 0 auto; width: min(54vw, 46rem); margin-left: var(--rand); padding: var(--abstand-oben) 0 clamp(48px, 10vh, 120px); }
.inhalt h2:first-child, .inhalt h1 + h2 { margin-top: 0; }
.inhalt a { text-decoration: underline 1px; text-underline-offset: .2em; }
.inhalt a.contact-link, .inhalt .video-link { text-decoration: none; }
.vorspann { font-size: clamp(1.1875rem, 1.7vw, 1.5rem); line-height: 1.42; }
.inhalt ul { padding: 0; margin: 0 0 1em; list-style: none; }
.inhalt li { padding: 3px 0 3px 1.1em; text-indent: -1.1em; }
.inhalt li::before { content: "–"; display: inline-block; width: 1.1em; text-indent: 0; color: var(--strahl); }
.inhalt blockquote { margin: 1.2em 0; font-size: 1.375rem; line-height: 1.36; font-weight: 500; letter-spacing: -.01em; }

/* Zitat auf Über uns: orange Anführungszeichen wie auf der bisherigen Seite */
.ueber__text blockquote::before { content: "»"; color: var(--orange); margin-right: .04em; }
.ueber__text blockquote::after { content: "«"; color: var(--orange); margin-left: .04em; }
/* Startseite: Zitat links (kursiv wie auf der bisherigen Seite), Porträt rechts, Angebote darunter */
.inhalt .zitat { margin: 0; }
.zitat p { font-size: clamp(1.5rem, 2.6vw, 2.75rem); line-height: 1.16; letter-spacing: -.02em; font-weight: 500; font-style: italic; margin: 0 0 .45em; }
.zitat footer { font-size: 1.125rem; font-weight: 400; letter-spacing: 0; }
.ueber--start .ueber__seite div { margin-top: .9em; }
.angebot { padding: clamp(24px, 4vh, 40px) 0; border-top: 1px solid var(--haar); }
.angebot:first-child { margin-top: clamp(40px, 22vh, 260px); }
.angebot h2, .ueber__text .angebot h2:first-child { margin-top: 0; }
.angebot p:last-child { margin-bottom: 0; }
/* Überschriften sind Links, zeigen das aber erst beim Überfahren */
.inhalt .angebot h2 a { text-decoration: none; background: linear-gradient(var(--orange), var(--orange)) no-repeat 0 100% / 0 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .16s ease-out; }

/* Text links, Porträt und Kontakt zusammen rechts, Kranz bleibt daneben frei */
.inhalt--breit { width: min(67vw, 64rem); }
.ueber { display: grid; grid-template-columns: minmax(0, 1fr) 17.5rem; grid-template-areas: "einstieg seite" "text seite"; grid-template-rows: auto 1fr; column-gap: clamp(32px, 3.5vw, 56px); }
.ueber__einstieg { grid-area: einstieg; }
.ueber__text { grid-area: text; }
.ueber__text h2:first-child { margin-top: 1.2em; }
.ueber__seite { grid-area: seite; font-size: 1rem; line-height: 1.5; }
.ueber__seite img { width: 100%; }
.ueber__seite h2 { font-size: clamp(1.375rem, 2vw, 1.75rem); margin: 1em 0 .5em; }
.ueber__seite p { margin-bottom: .6em; }
.kurzprofil { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 3.5vw, 56px); align-items: start; margin-top: clamp(32px, 6vh, 64px); padding-top: clamp(24px, 4vh, 40px); border-top: 1px solid var(--haar); }
.kurzprofil h2 { grid-column: 1 / -1; margin-top: 0; }
/* Trennt Beruf und Basketball; „am Stück“ hält Wörter zusammen, der Umbruch steht davor */
.kurzprofil .absatz { margin-top: 1em; }
.am-stueck { white-space: nowrap; }

/* Aufklappbare Gruppen wie auf der bisherigen Seite */
details { border-top: 1px solid var(--haar); }
details:last-of-type { border-bottom: 1px solid var(--haar); }
summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 16px; list-style: none; cursor: pointer; padding: 16px 0; font-size: clamp(1.125rem, 2vw, 1.625rem); font-weight: 500; letter-spacing: -.01em; line-height: 1.2; overflow-wrap: anywhere; transition: color var(--tempo) ease-out; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--strahl); transition: color var(--tempo) ease-in-out; }
details[open] summary::after { content: "–"; }
details ul { padding-bottom: .4em; }
.inhalt details li { padding-left: 0; text-indent: 0; }
.inhalt details li::before { content: none; }

/* Videos: Markup kommt unverändert aus tools/videos-update.py */
.video { display: grid; grid-template-columns: 200px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 20px; padding: 20px 0; border-top: 1px solid var(--haar); }
/* Der Link nutzt das Raster des Videos mit (subgrid): Bild und Titel stehen darin wie zuvor, der Link bleibt aber per Tab-Taste erreichbar */
.video-link { display: grid; grid-column: 1 / -1; grid-row: 1 / -1; grid-template-columns: subgrid; grid-template-rows: subgrid; }
.video-link img { grid-column: 1; grid-row: 1 / -1; width: 200px; height: auto; }
.video h3 { grid-column: 2; grid-row: 1; margin: 0 0 .25em; color: var(--tinte); transition: color var(--tempo) ease-in-out; }
/* Seitenwechsel unter der Liste, erzeugt tools/videos-update.py */
.video-pages { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; padding: 20px 0 0; border-top: 1px solid var(--haar); font-size: 1rem; }
.video-pages strong { color: var(--hover); }
/* Seitenzahl: große Klickfläche, auch auf dem Handy gut zu treffen */
.video-pages span a, .video-pages strong { display: inline-block; min-width: 2em; padding: .2em 0; text-align: center; }
.video-meta { grid-column: 2; grid-row: 2; margin: 0 0 .25em; font-size: 1rem; color: var(--grau-text); }
.video > p:not(.video-meta) { grid-column: 2; grid-row: 3; margin: 0; font-size: 1rem; line-height: 1.5; }

/* Aufbau beim Scrollen, gesetzt von aufbau.js: Text erscheint, Trennlinie zeichnet sich von links */
.auf { opacity: 0; transform: translateY(12px); transition: opacity .4s ease-out, transform .4s cubic-bezier(.2, .7, .2, 1); }
.auf.da { opacity: 1; transform: none; }
.auf--linie { position: relative; border-top-color: transparent; }
.auf--linie::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--haar); transform: scaleX(0); transform-origin: left; transition: transform .55s cubic-bezier(.2, .7, .2, 1); transition-delay: inherit; }
.auf--linie.da::before { transform: scaleX(1); }
@media print { .auf { opacity: 1; transform: none; } .auf--linie::before { transform: none; } }

/* Fuß wie auf der bisherigen Seite: Links untereinander, Copyright rechts */
.schluss { position: relative; z-index: 2; background: #4d5049; color: #fff; padding: 12px var(--rand); display: flex; justify-content: space-between; align-items: center; gap: 28px; font-size: .9375rem; line-height: 1.5; }
.schluss nav { flex: none; display: flex; flex-direction: column; align-items: flex-start; padding-left: 10px; border-left: 3px solid var(--strahl); }
/* Mindestgröße für Links nach WCAG 2.2 AA, auch auf dem Handy */
.schluss nav a { display: flex; align-items: center; min-height: 24px; }
.schluss p { margin: 0; text-align: right; }

@media (hover: hover) {
  .inhalt a:hover, .video-link:hover h3, summary:hover, summary:hover::after { color: var(--hover); }
  .schluss a:hover { color: #ffb566; }
  .kopf nav a:hover::after { transform: scaleX(1); }
  .inhalt .angebot h2 a:hover { color: inherit; background-size: 100% 2px; }
}

/* Touch-Geräte kennen keinen Hover: Links ohne anderes Erkennungszeichen werden unterstrichen */
@media (hover: none) {
  .inhalt a.link-klar { text-decoration: underline 1px; text-underline-offset: .2em; }
}

/* Porträt und Kontakt bleiben beim Lesen sichtbar, wenn der Bildschirm hoch genug ist.
   Sie halten genau auf ihrer Ausgangshöhe an, springen beim Scrollen also nicht nach oben. */
@media (min-width: 760px) and (min-height: 760px) {
  .ueber__seite { position: sticky; top: calc(var(--kopf) + var(--abstand-oben)); align-self: start; }
}

/* Niedrige Bildschirme: Kopf läuft mit, sonst bliebe zu wenig Platz für den Inhalt */
@media (max-height: 499px) {
  .kopf { position: relative; }
}

/* Unter 1000px oder bei Handys im Querformat: statt des großen Kranzes füllt sich der im Logo, Text über die volle Breite */
@media (max-width: 999px), (max-height: 499px) {
  :root { --abstand-oben: 32px; }
  .hintergrund { display: none; }
  .kranz-logo { display: block; }
  .inhalt, .inhalt--breit { width: auto; margin-left: var(--rand); margin-right: var(--rand); padding: var(--abstand-oben) 0 48px; }
}

/* Schmale Bildschirme: schmale Leiste mit Logo und Menü-Knopf */
@media (max-width: 859px) {
  :root { --logo: 7.5rem; --kopf: calc(var(--logo) * 367 / 880 + 16px); }
  html { scroll-padding-top: 84px; }
  .kopf { padding: 8px var(--rand); flex-wrap: wrap; }
  .js .menue { display: flex; }
  .js .kopf nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; flex-wrap: nowrap; gap: 0; padding: 0 var(--rand) 10px; background: var(--stein); box-shadow: 0 10px 18px rgba(36, 38, 31, .22); }
  .js .offen nav { display: flex; animation: aufklappen .14s ease-out; }
  .js .kopf nav a { padding: 13px 0; border-top: 1px solid var(--strahl); }
  .js .kopf nav a::after { display: none; }
  .js .kopf nav a[aria-current] { font-weight: 600; padding-left: 10px; box-shadow: inset 3px 0 var(--orange); }
}
@keyframes aufklappen { from { opacity: 0; transform: translateY(-6px); } }

/* Handy: Aufbau wie auf der bisherigen Seite */
@media (max-width: 759px) {
  .schluss { padding: 10px var(--rand); gap: 16px; font-size: .8125rem; line-height: 1.4; }
  .schluss span { display: block; }
  /* Reihenfolge wie auf der bisherigen Seite: Porträtkarte und Kontakt nach dem Text */
  .ueber { display: flex; flex-direction: column; }
  .ueber__einstieg { order: 1; }
  .ueber__text { order: 2; }
  .ueber__seite { order: 3; }
  .ueber__text { margin-top: 20px; padding-top: 4px; border-top: 1px solid var(--haar); }
  .ueber__text h2:first-child { margin-top: .8em; }
  .ueber__seite { margin-top: 24px; padding-top: 4px; border-top: 1px solid var(--haar); font-size: 1.0625rem; }
  .nur-breit { display: none; }
  .nur-handy { display: block; }
  .nur-schmal { display: block; float: left; width: 7rem; margin: 5px 16px 8px 0; }
  .ueber__text blockquote { clear: left; }
  .kurzprofil { display: block; }
  /* Startseite: Angebote direkt nach dem Zitat, Porträtkarte klein am Ende */
  .ueber--start .ueber__text { margin-top: 24px; padding-top: 0; border-top: 0; }
  .angebot:first-child { margin-top: 0; }
  .angebot { padding: 22px 0; }
  .ueber--start .ueber__seite { display: flex; align-items: center; gap: 16px; margin-top: 0; padding-top: 20px; }
  .ueber--start .ueber__seite img { flex: none; width: 7rem; }
  .ueber--start .ueber__seite div { margin: 0; }
  .ueber--start .ueber__seite p:last-child { margin-bottom: 0; }
  /* Referenzen: kleiner als der Fließtext, jeder Kunde durch eine Linie abgesetzt */
  .inhalt details ul { margin: 0; padding: 0; font-size: 1rem; line-height: 1.35; }
  .inhalt details li { padding: 8px 0; border-top: 1px solid var(--strahl-hell); }
  /* Gruppenwechsel: kräftigere Linie, oben und unten gleich viel Abstand */
  .inhalt details ul + ul { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--strahl); }
  .inhalt details ul + ul li:first-child { border-top: 0; }
  .inhalt details ul:last-child li:last-child { padding-bottom: 14px; }
  .ort { color: var(--grau-text); }
  .ort--kurz { white-space: nowrap; }
  .video, .video-link { display: block; }
  .video-link img { width: 100%; max-width: 360px; margin-bottom: 10px; }
}

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