/* hilfmirmal v11 · Über uns (ueber-uns.html, Präfix uu-) und Kursübersicht (kurse.html, Präfix ku-). Paket ueber-uns.
   Setzt schale.css und seite.css voraus (Tokens, Schriften, .kicker, .say, .dm, .btn, .platzhalter, .autor,
   .erstgespraech). Farben nur über die Variablen aus seite.css, also aus designsystem/tokens.json; keine eigenen Hex-Werte.
   Bewegung nur ohne prefers-reduced-motion. Schmalste geprüfte Breite 320 px. */

/* ================= Über uns ================= */
/* Oktopus-Blase: breiter als die Standardblase (34rem), damit der Satz von 768 bis 1920 px in einer Zeile steht
   (vorher bei 1280 px und breiter „mir.“ allein); schmaler kein einzelnes Wort in der letzten Zeile (pretty, sonst balance) */
.uu-kopf .dm{margin-top:2rem;max-width:38rem}
.uu-kopf .dm-bubble{text-wrap:balance;text-wrap:pretty}

/* Eine Person: Bild und Text nebeneinander, Isabell gespiegelt. Unter 761 px untereinander, Bild zuerst. */
.uu-person{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,110px);align-items:start;padding-block:clamp(40px,8vh,96px)}
.uu-person+.uu-person{border-top:1px solid var(--line)}
.uu-isabell{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.uu-isabell .uu-bild{order:2;justify-self:end}
.uu-text{min-width:0;max-width:40rem}

/* Fotos: Eriks Strandfoto (896 x 1200) und Isabells Foto (720 x 960), beide 3:4. Ganz sichtbar, kein Beschnitt,
   nichts darauf, keine Bewegung. Das Bild bestimmt die Höhe. Rahmen (Rundung, Schatten) am Bild selbst, damit eine
   Bildunterschrift darunter stehen kann. */
.uu-bild{margin:0;width:100%;max-width:420px}
.uu-bild img{display:block;width:100%;height:auto;border-radius:28px;background:var(--sand);box-shadow:var(--card-shadow)}
/* Hinweis „Foto KI-bearbeitet“ (site.yml bilder.erik_strand.hinweis): klein und leise, rechtsbündig unter dem Foto
   wie auf der Startseite (17:00); ink-2 auf cream 7,9:1. */
.uu-bild-hinweis{margin-top:.7rem;font-size:.76rem;font-weight:500;line-height:1.4;letter-spacing:.04em;color:var(--ink-2);text-align:right}

.uu-name{font-family:var(--serif);font-size:clamp(2.3rem,1.4rem + 2.4vw,3.8rem);line-height:1.02;letter-spacing:-.01em;color:var(--ink)}
.uu-text .kicker{margin-bottom:.9rem}
.uu-blase{margin-top:1.6rem}
.uu-kurz{margin-top:1.4rem;font-size:var(--say);line-height:1.6;color:var(--ink-2);max-width:34em}
.uu-kurz+.uu-kurz{margin-top:.8em}

/* Stationen: Zeit links in Versalien, rechts Titel in der Serif */
.uu-stationen{list-style:none;margin:2.2rem 0 0;padding:0;max-width:36rem}
.uu-station{display:grid;grid-template-columns:8.6rem minmax(0,1fr);column-gap:1.2rem;padding:.95rem 0;border-top:1px solid var(--line)}
.uu-station:last-child{border-bottom:1px solid var(--line)}
.uu-zeit{grid-row:span 2;padding-top:.45rem;font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-deep)}
.uu-station-titel{font-family:var(--serif);font-size:clamp(1.35rem,1.1rem + .6vw,1.7rem);line-height:1.15;color:var(--ink)}
.uu-station-text{font-size:.95rem;color:var(--ink-2)}

/* Links zu Profilen: Konturpillen, 44 px hoch */
.uu-links{list-style:none;display:flex;flex-wrap:wrap;gap:.7rem;margin:2rem 0 0;padding:0}
.uu-links a{display:inline-flex;align-items:center;gap:.55rem;min-height:44px;padding:.6rem 1.15rem;border:1.5px solid var(--ink);border-radius:999px;color:var(--ink);font-weight:600;font-size:.95rem;line-height:1.2;text-decoration:none}
/* Pfeil nach rechts oben: fremde Website. Maske aus Inline-SVG (img-src data: ist im Live-CSP erlaubt) */
.uu-links a::after{content:"";flex:none;width:.85rem;height:.85rem;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17L17 7M9 7h8v8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17L17 7M9 7h8v8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.uu-links a:hover{background:var(--paper);border-color:var(--paper);color:var(--blue-deep)}
.uu-links a:focus-visible{border-radius:999px}

.uu-schluss{padding-top:clamp(24px,5vh,56px)}
.uu-schluss h2{margin-top:0}

/* ================= Kursübersicht ================= */
.ku-sprung ul{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;margin:2rem 0 0;padding:0}
.ku-sprung a{display:inline-flex;align-items:center;min-height:44px;padding:.55rem 1.1rem;border-radius:999px;background:var(--paper);color:var(--ink);font-weight:600;font-size:.95rem;text-decoration:none;box-shadow:var(--bubble-shadow)}
.ku-sprung a:hover{color:var(--blue-deep)}
.ku-sprung a:focus-visible{border-radius:999px}

.ku-liste{display:grid;gap:clamp(28px,5vh,56px);padding-bottom:clamp(40px,8vh,96px)}
/* Kurskarte im Ausweis-Stil: paper, weicher Schatten, Oberkante in sky-2 wie die Beispielkarten */
.ku-kurs{scroll-margin-top:5.5rem;min-width:0;padding:clamp(1.4rem,1rem + 2.4vw,3.2rem);border-radius:26px;background:linear-gradient(var(--sky-2),var(--sky-2)) top/100% 6px no-repeat,var(--paper);box-shadow:var(--card-shadow)}
.ku-kurs-kopf .kicker{margin-bottom:.9rem}
.ku-titel{font-family:var(--serif);font-size:clamp(2.3rem,1.4rem + 2.6vw,4rem);line-height:1;letter-spacing:-.01em}
.ku-titel a{color:var(--ink);text-decoration:none}
.ku-titel a:hover{color:var(--blue)}
.ku-text{margin-top:1rem;max-width:38em;font-size:var(--say);line-height:1.55;color:var(--ink-2)}

/* Merkmale: keine Waise in der letzten Reihe. ku-merkmale-<Anzahl> setzt die Vorlage. */
.ku-merkmale{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:1.4rem clamp(20px,3vw,40px);margin:2.2rem 0 0;padding:0}
@media (min-width:520px){.ku-merkmale-2,.ku-merkmale-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:700px){.ku-merkmale-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1000px){.ku-merkmale-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ku-merkmale li{display:grid;align-content:start;gap:.45rem;padding-top:1rem;border-top:1px solid var(--line)}
.ku-merkmal-titel{font-family:var(--serif);font-size:clamp(1.45rem,1.15rem + .8vw,1.9rem);line-height:1.08;color:var(--ink)}
.ku-merkmal-text{font-size:.95rem;line-height:1.45;color:var(--ink-2)}

.ku-inhalt{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));gap:1.6rem clamp(24px,4vw,56px);margin-top:2.4rem}
.ku-gruppe-titel{margin-bottom:.6rem;font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-deep)}
.ku-punkte{list-style:none;margin:0;padding:0}
.ku-punkte li{display:grid;grid-template-columns:6.4rem minmax(0,1fr);column-gap:.9rem;align-items:baseline;padding:.55rem 0;border-top:1px solid var(--line)}
.ku-nr{font-size:.74rem;font-weight:600;letter-spacing:.06em;color:var(--ink-3);white-space:nowrap}
.ku-punkt{color:var(--ink);line-height:1.35;overflow-wrap:break-word;hyphens:auto}

.ku-zugang{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:1rem;margin:2.2rem 0 0;padding:1.1rem 1.3rem;border-radius:18px;background:var(--sky-air)}
.ku-zugang dt{font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-deep)}
.ku-zugang dd{margin:.3rem 0 0;color:var(--ink)}
.ku-aktionen{margin-top:2rem}

/* So funktioniert der Zugang: drei Schritte mit großen Ziffern (Zähler, nur Schmuck) */
.ku-so{padding-bottom:clamp(40px,8vh,96px)}
.ku-so-titel{font-family:var(--serif);font-size:clamp(1.9rem,1.3rem + 1.8vw,2.9rem);line-height:1.08;max-width:16em}
.ku-schritte{list-style:none;counter-reset:ku-schritt;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:1.6rem clamp(20px,3vw,44px);margin:1.8rem 0 0;padding:0;max-width:64rem}
.ku-schritte li{counter-increment:ku-schritt;display:grid;align-content:start;gap:.45rem;padding-top:1rem;border-top:1px solid var(--line);color:var(--ink-2);font-size:.98rem;line-height:1.5}
.ku-schritte li::before{content:counter(ku-schritt);font-family:var(--serif);font-size:2.6rem;line-height:1;color:var(--blue)}
.ku-schritt-titel{font-weight:600;color:var(--ink)}

.ku-autor-reihe{padding-bottom:clamp(32px,6vh,72px)}
.ku-autor-reihe .autor-text a{color:var(--blue-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;display:inline-block;padding-block:.6rem}
.ku-schluss h2{margin-top:0}
.ku-schluss .dm{margin-top:1.4rem}
.ku-schluss .dm-bubble,.ku-schluss .erstgespraech,.uu-schluss .erstgespraech{hyphens:manual}

/* ================= Breiten ================= */
@media (max-width:1100px){
  .uu-person{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
  .uu-isabell{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
}
@media (max-width:760px){
  .uu-person{grid-template-columns:minmax(0,1fr);gap:2rem}
  .uu-isabell .uu-bild{order:0;justify-self:start}
  .uu-bild{max-width:420px}
  .uu-station{grid-template-columns:minmax(0,1fr)}
  .uu-zeit{grid-row:auto;padding-top:0}
  .ku-punkte li{grid-template-columns:4.9rem minmax(0,1fr);column-gap:.6rem}
  .ku-punkt{font-size:.98rem}
}
/* Unter 360 px etwas engere Pillen, damit „GoodLifeCode, Isabells Website“ einzeilig bleibt (bei 320 px 278 px Platz) */
@media (max-width:359px){
  .uu-links a{gap:.45rem;padding-inline:.9rem;font-size:.9rem}
}

/* ================= Bewegung ================= */
@media (prefers-reduced-motion:no-preference){
  .uu-links a,.ku-sprung a{transition:background-color .3s,border-color .3s,color .3s}
  .ku-kurs{transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
  .ku-kurs:hover{transform:translateY(-3px)}
}

@media print{
  .uu-bild,.ku-kurs{box-shadow:none}
  .uu-links a::after,.ku-sprung{display:none}
}