/* =========================================================================
   Michael Dettmann — Private Homepage
   Ein Stylesheet, keine Fremdquellen. Farben, Abstände und Radien
   ausschließlich über die Merkmale hier unten — nie als Hex im Markup.
   ========================================================================= */

:root {
  /* Farben */
  --tinte:        #0e1c2b;
  --tinte-weich:  #4a5f75;
  --tinte-zart:   #62778f;
  --grund:        #ffffff;
  --grund-2:      #f4f7fa;
  --grund-3:      #eaf0f6;
  --linie:        #dde5ee;
  --linie-zart:   #eaeff5;

  --marke-900:    #0a1c2e;
  --marke-800:    #0f2c47;
  --marke-700:    #16496f;
  --marke-600:    #1c5f92;
  --marke-500:    #2b81ba;
  --marke-100:    #e5eff7;

  --akzent:       #a15b0d;
  --akzent-600:   #7f4909;
  --akzent-100:   #fbf0e1;

  /* Flächen, die immer weiße Schrift tragen — im Dunkelmodus eigens gesetzt,
     weil --marke-700 dort zu einem hellen Textton wird. */
  --fuellung:       #16496f;
  --fuellung-hover: #1c5f92;
  --verlauf-a:      #0a1c2e;
  --verlauf-b:      #16496f;

  /* Maße */
  --breite:       1140px;
  --radius:       14px;
  --radius-klein: 9px;
  --radius-gross: 22px;

  /* Schatten */
  --schatten-1: 0 1px 2px rgba(14,28,43,.06), 0 2px 8px rgba(14,28,43,.05);
  --schatten-2: 0 2px 6px rgba(14,28,43,.07), 0 12px 32px rgba(14,28,43,.09);
  --schatten-3: 0 20px 60px rgba(10,28,46,.18);

  /* Schrift */
  --schrift: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --schrift-zahl: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo,
                  Consolas, monospace;

  --uebergang: 180ms cubic-bezier(.4,0,.2,1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    --tinte:        #eaf1f8;
    --tinte-weich:  #a3b5c8;
    --tinte-zart:   #7e91a5;
    --grund:        #0c1219;
    --grund-2:      #111a24;
    --grund-3:      #17222e;
    --linie:        #22303e;
    --linie-zart:   #1a2531;

    --marke-900:    #061019;
    --marke-800:    #0b1b28;
    --marke-700:    #a9cfec;
    --marke-600:    #6fb1e0;
    --marke-500:    #4f9dd6;
    --marke-100:    #16293a;

    --akzent:       #e3a054;
    --akzent-600:   #f0b877;
    --akzent-100:   #2a2013;

    --fuellung:       #1d5c8c;
    --fuellung-hover: #2670a6;
    --verlauf-a:      #08161f;
    --verlauf-b:      #123c5c;

    --schatten-1: 0 1px 2px rgba(0,0,0,.4);
    --schatten-2: 0 2px 6px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.35);
    --schatten-3: 0 20px 60px rgba(0,0,0,.55);
    color-scheme: dark;
  }
}

:root[data-thema="dunkel"] {
    --tinte:        #eaf1f8;
    --tinte-weich:  #a3b5c8;
    --tinte-zart:   #7e91a5;
    --grund:        #0c1219;
    --grund-2:      #111a24;
    --grund-3:      #17222e;
    --linie:        #22303e;
    --linie-zart:   #1a2531;

    --marke-900:    #061019;
    --marke-800:    #0b1b28;
    --marke-700:    #a9cfec;
    --marke-600:    #6fb1e0;
    --marke-500:    #4f9dd6;
    --marke-100:    #16293a;

    --akzent:       #e3a054;
    --akzent-600:   #f0b877;
    --akzent-100:   #2a2013;

    --fuellung:       #1d5c8c;
    --fuellung-hover: #2670a6;
    --verlauf-a:      #08161f;
    --verlauf-b:      #123c5c;

    --schatten-1: 0 1px 2px rgba(0,0,0,.4);
    --schatten-2: 0 2px 6px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.35);
    --schatten-3: 0 20px 60px rgba(0,0,0,.55);
    color-scheme: dark;
  }

/* --- Grundlagen ---------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: clamp(1rem, .97rem + .16vw, 1.075rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.15;
  letter-spacing: -.021em;
  font-weight: 700;
  color: var(--tinte);
  text-wrap: balance;
}
h1 { font-size: clamp(2.15rem, 1.5rem + 3.1vw, 3.55rem); letter-spacing: -.03em; }
h2 { font-size: clamp(1.6rem, 1.25rem + 1.6vw, 2.3rem); letter-spacing: -.025em; }
h3 { font-size: clamp(1.13rem, 1.05rem + .38vw, 1.32rem); }
h4 { font-size: 1.02rem; }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

a { color: var(--marke-600); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--marke-500); }

img { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
li { margin-bottom: .35em; }

:focus-visible {
  outline: 2px solid var(--marke-600);
  outline-offset: 3px;
  border-radius: 4px;
}

.nur-lesegeraet {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.sprung {
  position: absolute; left: 12px; top: -100px; z-index: 200;
  background: var(--fuellung); color: #fff;
  padding: .7em 1.2em; border-radius: var(--radius-klein);
  font-weight: 600; text-decoration: none;
  transition: top var(--uebergang);
}
.sprung:focus { top: 12px; color: #fff; }

/* --- Layout -------------------------------------------------------------- */

.huelle {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, .6rem + 2.4vw, 2.5rem);
}
.huelle--schmal { max-width: 780px; }

.abschnitt { padding-block: clamp(3.4rem, 2rem + 5.5vw, 6.4rem); }
.abschnitt--getoent { background: var(--grund-2); }
.abschnitt--eng { padding-block: clamp(2.6rem, 1.8rem + 3.5vw, 4.4rem); }

.abschnitt-kopf { max-width: 62ch; margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.2rem); }
.abschnitt-kopf--mitte { margin-inline: auto; text-align: center; }

.vorzeile {
  display: inline-flex; align-items: center; gap: .55em;
  font-size: .74rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--akzent);
  margin-bottom: .95em;
}
.vorzeile::before {
  content: ""; width: 1.9em; height: 2px;
  background: currentColor; border-radius: 2px; opacity: .65;
}
.abschnitt-kopf--mitte .vorzeile::before { display: none; }

.fuehrung {
  font-size: clamp(1.02rem, .98rem + .3vw, 1.16rem);
  color: var(--tinte-weich);
  margin-top: 1.05em;
  max-width: 60ch;
}
.abschnitt-kopf--mitte .fuehrung { margin-inline: auto; }

/* --- Kopfzeile ----------------------------------------------------------- */

.kopf {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--grund) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--uebergang), box-shadow var(--uebergang);
}
.kopf[data-gescrollt="ja"] {
  border-bottom-color: var(--linie);
  box-shadow: var(--schatten-1);
}
.kopf-innen {
  display: flex; align-items: center; justify-content: flex-end;
  gap: clamp(.8rem, .4rem + 1.4vw, 1.8rem);
  min-height: 72px;
}
.kopf-innen > .marke { margin-right: auto; }

.marke {
  display: inline-flex; align-items: center; gap: .7rem;
  text-decoration: none; color: var(--tinte);
  font-weight: 700; letter-spacing: -.015em;
  flex-shrink: 0;
}
.marke-zeichen {
  width: 38px; height: 38px; flex: 0 0 38px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: linear-gradient(140deg, var(--verlauf-a), var(--fuellung-hover));
  color: #fff; font-size: .82rem; font-weight: 700; letter-spacing: .04em;
  box-shadow: var(--schatten-1);
}
.marke-text { display: flex; flex-direction: column; line-height: 1.18; }
.marke-name { font-size: 1.01rem; }
.marke-rolle {
  font-size: .69rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinte-zart);
}

.nav { display: flex; align-items: center; gap: clamp(.4rem, .1rem + 1vw, 1.4rem); }
.nav a {
  position: relative;
  padding: .5em .2em;
  font-size: .935rem; font-weight: 550;
  color: var(--tinte-weich);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--uebergang);
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .12em;
  height: 2px; border-radius: 2px; background: var(--akzent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--uebergang);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--tinte); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }

.nav-schalter {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--linie); border-radius: 11px;
  background: var(--grund); color: var(--tinte);
  cursor: pointer; padding: 0;
  align-items: center; justify-content: center;
}
.nav-schalter svg { width: 21px; height: 21px; }
.nav-schalter .kreuz { display: none; }
.nav-schalter[aria-expanded="true"] .balken { display: none; }
.nav-schalter[aria-expanded="true"] .kreuz { display: block; }

@media (max-width: 860px) {
  .nav-schalter { display: inline-flex; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--grund);
    border-bottom: 1px solid var(--linie);
    box-shadow: var(--schatten-2);
    padding: .5rem clamp(1.15rem, .6rem + 2.4vw, 2.5rem) 1.2rem;
    display: none;
  }
  .nav[data-offen="ja"] { display: flex; }
  .nav a { padding: .85em 0; border-bottom: 1px solid var(--linie-zart); font-size: 1rem; }
  .nav a:last-child { border-bottom: 0; }
  .nav a::after { display: none; }
  .kopf-innen { position: relative; }
}

/* --- Knöpfe -------------------------------------------------------------- */

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: .78em 1.5em;
  border-radius: var(--radius-klein);
  font-size: .95rem; font-weight: 650; letter-spacing: -.005em;
  text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transition: transform var(--uebergang), box-shadow var(--uebergang),
              background-color var(--uebergang), color var(--uebergang),
              border-color var(--uebergang);
}
.knopf svg { width: 17px; height: 17px; flex-shrink: 0; }
.knopf:hover { transform: translateY(-1px); }
.knopf:active { transform: translateY(0); }

.knopf--voll {
  background: var(--fuellung); color: #fff;
  box-shadow: var(--schatten-1);
}
.knopf--voll:hover { background: var(--fuellung-hover); color: #fff; box-shadow: var(--schatten-2); }

.knopf--rand {
  background: var(--grund); color: var(--tinte);
  border-color: var(--linie);
}
.knopf--rand:hover { border-color: var(--marke-600); color: var(--marke-600); }

.knopf-reihe { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

/* --- Held (Hero) --------------------------------------------------------- */

.held {
  position: relative;
  padding-block: clamp(2.8rem, 1.5rem + 6vw, 6rem) clamp(3rem, 1.8rem + 5vw, 5.5rem);
  overflow: hidden;
}
.held::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(900px 480px at 88% -8%, var(--marke-100), transparent 62%),
    radial-gradient(700px 420px at 2% 108%, var(--akzent-100), transparent 60%);
  opacity: .9;
}
.held-gitter {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(2.2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
@media (max-width: 900px) {
  .held-gitter { grid-template-columns: 1fr; gap: 2.6rem; }
}

.held-ort {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .42em .95em .42em .7em;
  border-radius: 999px;
  background: var(--grund);
  border: 1px solid var(--linie);
  box-shadow: var(--schatten-1);
  font-size: .8rem; font-weight: 600; color: var(--tinte-weich);
  margin-bottom: 1.5rem;
}
.held-ort svg { width: 15px; height: 15px; color: var(--akzent); }

.held h1 { margin-bottom: .5rem; }
.held-rolle {
  font-size: clamp(1.05rem, .95rem + .5vw, 1.28rem);
  font-weight: 600;
  color: var(--marke-600);
  margin-bottom: 1.15rem;
  letter-spacing: -.01em;
}
.held-text {
  font-size: clamp(1.02rem, .98rem + .3vw, 1.12rem);
  color: var(--tinte-weich);
  max-width: 56ch;
}

.marken-reihe {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-top: 1.8rem;
}
.marken-reihe .schild { margin: 0; }

.schild {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .38em .85em;
  border-radius: 999px;
  background: var(--grund-3);
  border: 1px solid var(--linie);
  font-size: .8rem; font-weight: 600; color: var(--tinte-weich);
  white-space: nowrap;
}
.schild--akzent { background: var(--akzent-100); border-color: transparent; color: var(--akzent); }
.schild--marke  { background: var(--marke-100);  border-color: transparent; color: var(--marke-600); }

/* Porträt */
.held-bild { position: relative; }
.portraet-huelle {
  position: relative;
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: clamp(10px, .5rem + .5vw, 14px);
  box-shadow: var(--schatten-3);
}
.portraet {
  position: relative;
  border-radius: calc(var(--radius-gross) - 9px);
  overflow: hidden;
  aspect-ratio: 1125 / 845;
  background: var(--grund-3);
}
.portraet picture { display: block; width: 100%; height: 100%; }
.portraet img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* --- Zahlenband ---------------------------------------------------------- */

.band {
  border-block: 1px solid var(--linie);
  background: var(--grund-2);
}
.band-gitter {
  display: grid;
  /* Vier Eckdaten, aber nie drei nebeneinander und eines allein darunter:
     entweder vier in einer Reihe oder zwei mal zwei. Die Grenzen stehen in
     em statt px — wer die Schrift vergrößert, bekommt dadurch von selbst
     weniger Spalten, statt dass das Band aus dem Bild ragt. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--linie);
}
@media (max-width: 21em) { .band-gitter { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 52em) { .band-gitter { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.band-feld { min-width: 0; }
.band-text, .band-zahl { overflow-wrap: anywhere; }
.band-feld {
  background: var(--grund-2);
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.3rem) clamp(1rem, .6rem + 1.2vw, 1.8rem);
  text-align: center;
}
.band-zahl {
  font-family: var(--schrift-zahl);
  font-size: clamp(1.7rem, 1.3rem + 1.7vw, 2.5rem);
  font-weight: 700; line-height: 1;
  color: var(--marke-600);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.band-text {
  margin-top: .6rem;
  font-size: .84rem; font-weight: 600;
  color: var(--tinte-weich);
  letter-spacing: .01em;
}

/* --- Kacheln ------------------------------------------------------------- */

.kachel-gitter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(1rem, .6rem + 1.4vw, 1.7rem);
}

.kachel {
  position: relative;
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem);
  transition: transform var(--uebergang), box-shadow var(--uebergang),
              border-color var(--uebergang);
}
.kachel:hover {
  transform: translateY(-3px);
  box-shadow: var(--schatten-2);
  border-color: color-mix(in srgb, var(--marke-600) 32%, var(--linie));
}
.kachel h3 { margin-bottom: .6rem; }
.kachel p { color: var(--tinte-weich); font-size: .96rem; }

.kachel-zeichen {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 13px;
  background: var(--marke-100);
  color: var(--marke-600);
  margin-bottom: 1.15rem;
}
.kachel-zeichen svg { width: 23px; height: 23px; }
.kachel-zeichen--warm { background: var(--akzent-100); color: var(--akzent); }

.kachel-liste { list-style: none; padding: 0; margin: 1.1rem 0 0; }
.kachel-liste li {
  position: relative;
  padding-left: 1.5em;
  font-size: .92rem;
  color: var(--tinte-weich);
  margin-bottom: .45em;
}
.kachel-liste li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--akzent);
}

/* --- Zeitstrahl ---------------------------------------------------------- */

.filter {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-bottom: 2.4rem;
}
.filter-knopf {
  padding: .5em 1.1em;
  border-radius: 999px;
  border: 1px solid var(--linie);
  background: var(--grund);
  color: var(--tinte-weich);
  font-family: inherit; font-size: .87rem; font-weight: 600;
  cursor: pointer;
  transition: all var(--uebergang);
}
.filter-knopf:hover { border-color: var(--marke-600); color: var(--marke-600); }
.filter-knopf[aria-pressed="true"] {
  background: var(--fuellung); border-color: var(--fuellung); color: #fff;
}

.strahl { position: relative; }
.strahl::before {
  content: ""; position: absolute;
  left: calc(132px + 1.35rem); top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(to bottom, var(--linie), var(--linie) 92%, transparent);
}

.punktzeit {
  position: relative;
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 0 2.7rem;
  padding-bottom: 2.1rem;
}
.punktzeit:last-child { padding-bottom: 0; }
.punktzeit[hidden] { display: none; }

.punktzeit-jahr {
  font-family: var(--schrift-zahl);
  font-size: .82rem; font-weight: 700;
  color: var(--tinte-weich);
  text-align: right;
  padding-top: .15rem;
  letter-spacing: -.02em;
  line-height: 1.45;
}
.punktzeit-jahr b { display: block; color: var(--tinte); font-size: 1.02rem; font-weight: 700; }

.punktzeit-inhalt {
  position: relative;
  padding-left: 0;
}
.punktzeit-inhalt::before {
  content: ""; position: absolute;
  left: -1.35rem; top: .42rem;
  transform: translateX(-50%) translateX(1px);
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--grund);
  border: 2px solid var(--marke-500);
  box-shadow: 0 0 0 4px var(--grund);
}
.punktzeit--laufend .punktzeit-inhalt::before {
  background: var(--akzent); border-color: var(--akzent);
}
.punktzeit h3 { font-size: 1.05rem; margin-bottom: .3rem; }
.punktzeit p { font-size: .94rem; color: var(--tinte-weich); margin-bottom: .5rem; }
.punktzeit-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }

.art {
  display: inline-block;
  padding: .2em .7em;
  border-radius: 999px;
  font-size: .71rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
}
.art--beruf     { background: var(--marke-100); color: var(--marke-600); }
.art--ehrenamt  { background: var(--akzent-100); color: var(--akzent); }
.art--bildung   { background: var(--grund-3); color: var(--tinte-weich); }
.art--eigen     { background: color-mix(in srgb, #22a06b 14%, var(--grund)); color: #1c7f55; }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) .art--eigen { color: #64c79b; }
}
:root[data-thema="dunkel"] .art--eigen { color: #64c79b; }

.verweis {
  font-size: .855rem; font-weight: 600;
  color: var(--marke-600);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: .3em;
}
.verweis:hover { text-decoration: underline; }
.verweis svg { width: 13px; height: 13px; opacity: .7; }

@media (max-width: 700px) {
  .strahl::before { left: 5px; }
  .punktzeit { grid-template-columns: 1fr; gap: .35rem; padding-left: 1.9rem; }
  .punktzeit-jahr { text-align: left; padding-top: 0; }
  .punktzeit-jahr b { display: inline; font-size: .95rem; margin-right: .4em; }
  .punktzeit-inhalt::before { left: -1.9rem; top: .3rem; transform: translateX(-50%); }
}

/* --- Jahresgruppen (Ehrenamt) -------------------------------------------- */

.jahrgruppe { margin-bottom: clamp(2.2rem, 1.6rem + 2vw, 3.4rem); }
.jahrgruppe:last-child { margin-bottom: 0; }

.jahrkopf {
  display: flex; align-items: center; gap: 1.1rem;
  margin-bottom: 1.4rem;
}
.jahrkopf h2 {
  font-family: var(--schrift-zahl);
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 1.95rem);
  letter-spacing: -.03em;
  color: var(--marke-600);
  flex-shrink: 0;
}
.jahrkopf::after {
  content: ""; flex: 1; height: 1px; background: var(--linie);
}
.jahrkopf .zaehler {
  font-size: .78rem; font-weight: 600; color: var(--tinte-zart);
  flex-shrink: 0;
}

.projektliste { display: grid; gap: .8rem; }
.projekt {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.1rem 1.3rem;
  background: var(--grund);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--akzent);
  border-radius: var(--radius-klein);
  transition: transform var(--uebergang), box-shadow var(--uebergang);
}
.projekt:hover { transform: translateX(3px); box-shadow: var(--schatten-1); }
.projekt-korper { flex: 1; min-width: 0; }
.projekt-titel { font-weight: 650; font-size: .99rem; margin-bottom: .2rem; }
.projekt-org { font-size: .88rem; color: var(--tinte-weich); }
.projekt-org a { color: var(--marke-600); text-decoration: none; }
.projekt-org a:hover { text-decoration: underline; }
.projekt-rolle {
  flex-shrink: 0;
  font-size: .73rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--tinte-zart);
  padding-top: .2rem;
}
@media (max-width: 620px) {
  .projekt { flex-direction: column; gap: .5rem; }
  .projekt-rolle { padding-top: 0; }
}

/* --- Zertifikate --------------------------------------------------------- */

.zert-gitter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 1rem;
}
.zert {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.25rem 1.35rem;
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  transition: transform var(--uebergang), box-shadow var(--uebergang),
              border-color var(--uebergang);
}
.zert:hover {
  transform: translateY(-2px); box-shadow: var(--schatten-2);
  border-color: color-mix(in srgb, var(--marke-600) 30%, var(--linie));
}
.zert-siegel {
  width: 40px; height: 40px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--marke-100); color: var(--marke-600);
}
.zert-siegel svg { width: 20px; height: 20px; }
.zert-titel { font-weight: 650; font-size: .97rem; line-height: 1.4; margin-bottom: .25rem; }
.zert-datum {
  font-family: var(--schrift-zahl);
  font-size: .78rem; font-weight: 600; color: var(--tinte-zart);
}

/* --- Kontakt ------------------------------------------------------------- */

.kontakt-block {
  background: linear-gradient(150deg, var(--verlauf-a), var(--verlauf-b));
  border-radius: var(--radius-gross);
  padding: clamp(2.2rem, 1.4rem + 3.4vw, 4rem);
  color: #fff;
  box-shadow: var(--schatten-3);
  position: relative;
  overflow: hidden;
}
.kontakt-block::before {
  content: ""; position: absolute; inset: auto -60px -90px auto;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.09), transparent 68%);
}
.kontakt-block h2, .kontakt-block .vorzeile { color: #fff; }
.kontakt-block .vorzeile { color: #f0c48a; }
.kontakt-block .fuehrung { color: rgba(255,255,255,.8); }

.kontakt-gitter {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  margin-top: 2.4rem;
  position: relative;
}
@media (min-width: 640px) {
  .kontakt-gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.kontakt-feld {
  display: flex; align-items: center; gap: .9rem;
  padding: 1.1rem 1.25rem;
  background: rgba(255,255,255,.075);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--radius);
  text-decoration: none; color: #fff;
  transition: background-color var(--uebergang), transform var(--uebergang);
}
.kontakt-feld:hover { background: rgba(255,255,255,.13); transform: translateY(-2px); color: #fff; }
.kontakt-feld svg { width: 20px; height: 20px; flex-shrink: 0; color: #f0c48a; }
.kontakt-feld .kf-label {
  display: block; font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.6); margin-bottom: .12rem;
}
.kontakt-feld .kf-wert { font-size: .95rem; font-weight: 600; word-break: break-word; }

/* --- Fließtextseiten (Impressum, Datenschutz) ---------------------------- */

.text-seite { }
.text-seite h2 {
  font-size: clamp(1.3rem, 1.15rem + .7vw, 1.6rem);
  margin-top: 2.6rem; margin-bottom: .85rem;
}
.text-seite h2:first-of-type { margin-top: 0; }
.text-seite h3 { margin-top: 1.7rem; margin-bottom: .5rem; }
.text-seite p, .text-seite li { color: var(--tinte-weich); }
.text-seite address {
  font-style: normal;
  background: var(--grund-2);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 1.4rem 1.6rem;
  line-height: 1.85;
}
.text-seite address strong { color: var(--tinte); }

.seitenkopf {
  padding-block: clamp(2.6rem, 1.8rem + 4vw, 4.6rem) clamp(1.6rem, 1.2rem + 2vw, 2.6rem);
  border-bottom: 1px solid var(--linie);
  background: var(--grund-2);
}

.brotkrumen {
  font-size: .82rem; color: var(--tinte-zart);
  margin-bottom: 1rem;
}
.brotkrumen a { color: var(--tinte-weich); text-decoration: none; }
.brotkrumen a:hover { color: var(--marke-600); text-decoration: underline; }
.brotkrumen span { margin-inline: .45em; opacity: .6; }

/* --- Fußzeile ------------------------------------------------------------ */

.fuss {
  background: var(--marke-900);
  color: rgba(255,255,255,.72);
  padding-block: clamp(2.6rem, 2rem + 2.4vw, 4rem) 1.8rem;
  font-size: .92rem;
}
.fuss-gitter {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
  gap: clamp(1.8rem, 1rem + 3vw, 3.4rem);
  padding-bottom: 2.2rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
@media (max-width: 760px) { .fuss-gitter { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .fuss-gitter { grid-template-columns: 1fr; } }

.fuss h2 {
  color: #fff; font-size: .76rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  margin-bottom: 1.05rem;
}
.fuss p { color: rgba(255,255,255,.62); max-width: 40ch; }
.fuss ul { list-style: none; padding: 0; margin: 0; }
.fuss li { margin-bottom: .6em; }
.fuss a { color: rgba(255,255,255,.78); text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; }
.fuss .marke { color: #fff; margin-bottom: 1.1rem; }
.fuss .marke-rolle { color: rgba(255,255,255,.5); }

.fuss-unten {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1rem;
  padding-top: 1.6rem;
  font-size: .84rem; color: rgba(255,255,255,.5);
}
.fuss-unten nav { display: flex; flex-wrap: wrap; gap: 1.3rem; }

/* --- Einblenden beim Scrollen -------------------------------------------- */

.zeigt {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms cubic-bezier(.2,.7,.3,1),
              transform 620ms cubic-bezier(.2,.7,.3,1);
}
.zeigt[data-sichtbar="ja"] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .zeigt { opacity: 1; transform: none; }
}

/* --- Druck --------------------------------------------------------------- */

@media print {
  /* Papier ist teuer und Farbe auch — gedruckt wird der Inhalt, nicht die
     Gestaltung. Ziel ist ein brauchbarer Lebenslauf auf wenigen Blättern. */
  .kopf, .fuss, .knopf-reihe, .filter, .nav-schalter, .kopf-werkzeuge,
  .suchschicht, .brotkrumen, .held-notiz, .anriss-pfeil, .kopf-jahr,
  .vcard, .koennen-anrisse { display: none !important; }

  html { font-size: 92%; }
  body { font-size: 10pt; line-height: 1.42; color: #000; background: #fff; }
  h1 { font-size: 20pt; margin-bottom: .2em; }
  h2 { font-size: 13pt; margin-top: 1.1em; }
  h3 { font-size: 11pt; }

  .abschnitt, .abschnitt--eng { padding-block: .6rem; }
  .seitenkopf { padding-block: 0 .5rem; border: 0; background: none; }
  .abschnitt-kopf { margin-bottom: .7rem; }
  .huelle, .huelle--schmal { max-width: none; padding-inline: 0; }

  /* Schmuck weg: Verläufe, Raster, Schatten kosten nur Toner */
  .held::before, .held::after, .bildband::before,
  .kontakt-block::before { display: none !important; }
  .held { padding-block: 0 .8rem; }
  .kachel, .projekt, .zert, .koennen, .verein, .hinweis, .chronik li,
  .anriss, .portraet-huelle, .kontakt-feld {
    box-shadow: none !important; break-inside: avoid;
  }
  .kachel, .projekt, .zert, .koennen, .verein, .anriss { border-color: #bbb; }

  /* Porträt auf Passbildgröße */
  .held-gitter { grid-template-columns: 1fr 150px; gap: 1.2rem; }
  .portraet-huelle { padding: 0; border: 1px solid #bbb; }
  .portraet { border-radius: 0; }

  /* Dunkle Flächen würden das Blatt volllaufen lassen */
  .kontakt-block, .bildband { background: none !important; color: #000; }
  .kontakt-block h2, .kontakt-block .fuehrung, .kontakt-feld,
  .bildband-innen, .bildband-innen h1, .bildband-innen .fuehrung { color: #000 !important; }
  .kontakt-feld { border-color: #bbb; }
  .kontakt-feld .kf-label { color: #555 !important; }
  .bildband > picture { display: none !important; }

  /* Auf Papier nützt ein Verweis nur mit ausgeschriebener Adresse */
  .aufsatz a[href^="http"]::after,
  .text-seite a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; }
  a { color: #000; text-decoration: none; }

  .jahrgruppe, .punktzeit, .schritte li { break-inside: avoid; }
  .jahrkopf { break-after: avoid; }
  .zeigt { opacity: 1 !important; transform: none !important; }
  .strahl::before { background: #ccc; }
}


/* =========================================================================
   Erweiterung: Kompetenzen, Bildband, Feinschliff
   ========================================================================= */

/* --- Feines Raster im Held-Hintergrund ----------------------------------- */

.held::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(var(--linie) 1px, transparent 1px),
    linear-gradient(90deg, var(--linie) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: .38;
  -webkit-mask-image: radial-gradient(760px 520px at 78% 8%, #000, transparent 72%);
          mask-image: radial-gradient(760px 520px at 78% 8%, #000, transparent 72%);
  pointer-events: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) .held::after { opacity: .55; }
}

/* --- Bildband mit Duoton ------------------------------------------------- */
/* Das zweite Porträt bringt kräftiges Orange und Türkis mit. Über Graustufe
   plus Markenfarbe im Multiplikationsmodus fügt es sich in die Palette ein. */

.bildband {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--verlauf-a);
}
.bildband > picture {
  position: absolute; inset: 0; z-index: -2;
  display: block; width: 100%; height: 100%;
}
.bildband-bild {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 62% 30%;
  filter: grayscale(1) contrast(1.08) brightness(.92);
}
.bildband::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(105deg,
      var(--verlauf-a) 4%,
      color-mix(in srgb, var(--verlauf-b) 92%, transparent) 46%,
      color-mix(in srgb, var(--verlauf-b) 46%, transparent) 78%,
      transparent 100%),
    linear-gradient(0deg, color-mix(in srgb, var(--verlauf-a) 55%, transparent), transparent 55%);
}
.bildband-innen {
  padding-block: clamp(3rem, 2rem + 5vw, 6rem);
  max-width: 62ch;
  color: #fff;
}
.bildband-innen h1,
.bildband-innen h2 { color: #fff; }
.bildband-innen .vorzeile { color: #f0c48a; }
.bildband-innen .fuehrung { color: rgba(255,255,255,.82); }
.bildband-innen .brotkrumen { color: rgba(255,255,255,.62); }
.bildband-innen .brotkrumen a { color: rgba(255,255,255,.82); }
.bildband-innen .brotkrumen a:hover { color: #fff; }
.bildband-innen .schild {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.2);
  color: rgba(255,255,255,.92);
}
@media (max-width: 780px) {
  /* Auf schmalen Bildschirmen bleibt der Verlauf allein — das Foto hat für
     ein hohes, schmales Band zu wenig Auflösung. */
  .bildband-bild, .bildband > picture { display: none; }
  .bildband::before {
    background: linear-gradient(170deg, var(--verlauf-a), var(--verlauf-b));
  }
}

/* --- Kompetenz-Karten ---------------------------------------------------- */

.koennen-gitter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: clamp(1rem, .6rem + 1.2vw, 1.5rem);
}

.koennen {
  display: flex; flex-direction: column;
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 1.1rem + .9vw, 1.9rem);
  transition: border-color var(--uebergang), box-shadow var(--uebergang),
              transform var(--uebergang);
}
.koennen:hover {
  transform: translateY(-3px);
  box-shadow: var(--schatten-2);
  border-color: color-mix(in srgb, var(--marke-600) 32%, var(--linie));
}

.koennen-kopf {
  display: flex; align-items: flex-start; gap: .9rem;
  margin-bottom: 1.15rem;
}
.koennen-zeichen {
  width: 42px; height: 42px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--marke-100); color: var(--marke-600);
}
.koennen-zeichen svg { width: 21px; height: 21px; }
.koennen-zeichen--warm { background: var(--akzent-100); color: var(--akzent); }
.koennen-kopf h3 { font-size: 1.06rem; margin-bottom: .12rem; }
.koennen-kopf .zaehler {
  font-size: .76rem; font-weight: 600; color: var(--tinte-zart);
  font-family: var(--schrift-zahl);
}

.wolke { display: flex; flex-wrap: wrap; gap: .42rem; }
.wolke li { margin: 0; }
.perle {
  display: inline-block;
  padding: .34em .78em;
  border-radius: 8px;
  background: var(--grund-2);
  border: 1px solid var(--linie-zart);
  font-size: .825rem; font-weight: 550;
  color: var(--tinte-weich);
  line-height: 1.35;
  transition: border-color var(--uebergang), color var(--uebergang),
              background-color var(--uebergang);
}
.koennen:hover .perle { border-color: var(--linie); }
.perle:hover { color: var(--tinte); border-color: var(--marke-600); background: var(--marke-100); }
.perle--stark {
  background: var(--marke-100);
  border-color: transparent;
  color: var(--marke-600);
  font-weight: 650;
}
.perle--warm {
  background: var(--akzent-100);
  border-color: transparent;
  color: var(--akzent);
  font-weight: 650;
}

/* Aufzählungen ohne Punkte in den Wolken */
ul.wolke { list-style: none; padding: 0; margin: 0; }

/* --- Arbeitsweise: nummerierte Schritte ---------------------------------- */

.schritte {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.2rem, .8rem + 1.4vw, 2.2rem);
  counter-reset: schritt;
  list-style: none; padding: 0; margin: 0;
}
@media (min-width: 620px) { .schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .schritte { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.schritte li {
  position: relative;
  counter-increment: schritt;
  padding-top: 3.1rem;
  margin: 0;
}
.schritte li::before {
  content: counter(schritt, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-family: var(--schrift-zahl);
  font-size: 1.55rem; font-weight: 700;
  color: var(--akzent);
  letter-spacing: -.04em;
}
.schritte li::after {
  content: ""; position: absolute; top: 2.35rem; left: 0;
  width: 2.1rem; height: 2px; border-radius: 2px;
  background: var(--linie);
}
.schritte h3 { font-size: 1.02rem; margin-bottom: .4rem; }
.schritte p { font-size: .93rem; color: var(--tinte-weich); margin: 0; }

/* --- Anriss-Kachel mit Verweis ------------------------------------------- */

.anriss {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.05rem 1.3rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--grund);
  text-decoration: none;
  transition: border-color var(--uebergang), transform var(--uebergang),
              box-shadow var(--uebergang);
}
.anriss:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--marke-600) 40%, var(--linie));
  box-shadow: var(--schatten-1);
}
.anriss-zeichen {
  width: 38px; height: 38px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--marke-100); color: var(--marke-600);
}
.anriss-zeichen svg { width: 19px; height: 19px; }
.anriss-text { flex: 1; min-width: 0; display: block; }
.anriss-titel {
  display: block; font-weight: 650; font-size: .97rem;
  color: var(--tinte); line-height: 1.35;
}
.anriss-mehr {
  display: block; margin-top: .1rem;
  font-size: .8rem; color: var(--tinte-zart);
  font-family: var(--schrift-zahl); letter-spacing: -.02em;
}
.anriss-pfeil { color: var(--tinte-zart); flex-shrink: 0; }
.anriss-pfeil svg { width: 17px; height: 17px; }
.anriss:hover .anriss-pfeil { color: var(--marke-600); }

/* Anrisse der Kompetenzbereiche auf der Startseite */
.koennen-anrisse {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: .9rem;
}
.anriss-zeichen--warm { background: var(--akzent-100); color: var(--akzent); }

/* Sprungziele in den Kompetenzkarten nicht unter der Kopfzeile verstecken */
.koennen[id] { scroll-margin-top: 96px; }

/* =========================================================================
   Erweiterung: Erzählseite (Gewerbe mit 16)
   ========================================================================= */

.aufsatz { max-width: 68ch; }
.aufsatz > p {
  font-size: clamp(1.03rem, .99rem + .3vw, 1.13rem);
  line-height: 1.75;
  color: var(--tinte-weich);
}
.aufsatz > h2 {
  font-size: clamp(1.3rem, 1.15rem + .75vw, 1.65rem);
  margin-top: clamp(2.4rem, 1.8rem + 2vw, 3.4rem);
  margin-bottom: .9rem;
}
.aufsatz > h2:first-child { margin-top: 0; }
.aufsatz > h2 .marke-jahr {
  display: block;
  font-family: var(--schrift-zahl);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--akzent);
  margin-bottom: .35rem;
}
.aufsatz strong { color: var(--tinte); font-weight: 650; }

/* Gesetzestext */
.gesetz {
  margin: 1.9rem 0;
  padding: 1.3rem 1.5rem;
  border-left: 3px solid var(--marke-500);
  border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
  background: var(--grund-2);
}
.gesetz p {
  margin: 0 0 .7rem;
  font-size: .97rem; line-height: 1.7;
  color: var(--tinte);
  font-style: italic;
}
.gesetz footer {
  font-family: var(--schrift-zahl);
  font-size: .8rem; font-weight: 600;
  color: var(--tinte-zart); font-style: normal;
}

/* Herausgestellter Satz */
.zitat {
  margin: clamp(2.4rem, 1.8rem + 2vw, 3.6rem) 0;
  padding: 0 0 0 clamp(1.2rem, .8rem + 1.4vw, 2rem);
  border-left: 4px solid var(--akzent);
}
.zitat p {
  margin: 0;
  font-size: clamp(1.22rem, 1.05rem + .8vw, 1.6rem);
  line-height: 1.42; font-weight: 600;
  letter-spacing: -.018em;
  color: var(--tinte);
  text-wrap: balance;
}

/* Hinweiskasten */
.hinweis {
  margin: clamp(2rem, 1.5rem + 1.6vw, 3rem) 0 0;
  padding: clamp(1.3rem, 1.1rem + .9vw, 1.8rem);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--grund-2);
}
.hinweis-kopf {
  display: flex; align-items: center; gap: .6rem;
  margin-bottom: .8rem;
}
.hinweis-kopf svg { width: 19px; height: 19px; color: var(--akzent); flex-shrink: 0; }
.hinweis-kopf h3 { font-size: 1rem; margin: 0; }
.hinweis p { font-size: .94rem; color: var(--tinte-weich); }
.hinweis p:last-child { margin-bottom: 0; }

/* Firmenchronik */
.chronik { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.chronik li {
  display: flex; align-items: baseline; gap: clamp(.9rem, .5rem + 1.4vw, 1.8rem);
  padding: 1rem 1.25rem;
  margin: 0;
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  background: var(--grund);
}
.chronik-jahr {
  flex: 0 0 auto; min-width: 4.6rem;
  font-family: var(--schrift-zahl);
  font-size: 1rem; font-weight: 700;
  color: var(--marke-600); letter-spacing: -.03em;
}
.chronik-name { font-weight: 650; color: var(--tinte); }
.chronik-was { display: block; font-size: .9rem; color: var(--tinte-weich); margin-top: .12rem; }
.chronik li:last-child { border-color: color-mix(in srgb, var(--akzent) 45%, var(--linie)); }
@media (max-width: 560px) {
  .chronik li { flex-direction: column; gap: .3rem; }
}

/* Großes Jahr im Seitenkopf */
.kopf-jahr {
  font-family: var(--schrift-zahl);
  font-size: clamp(4.5rem, 2rem + 12vw, 9rem);
  font-weight: 700; line-height: .82;
  letter-spacing: -.06em;
  color: transparent;
  -webkit-text-stroke: 2px color-mix(in srgb, var(--marke-600) 34%, transparent);
  margin-bottom: 1.2rem;
  user-select: none;
}

/* Geplante Projekte: gestrichelte Kontur, damit sie sich von den
   bereits gelaufenen unterscheiden */
.jahrkopf .schild { flex-shrink: 0; }
.jahrgruppe--geplant .projekt {
  border-style: dashed;
  border-left-style: solid;
  background: transparent;
}
.jahrgruppe--geplant .projekt-titel { color: var(--tinte); }

/* Kurzer Hinweis unter dem Einleitungstext: die Seite ist privat */
.held-notiz {
  margin-top: 1.15rem;
  padding-left: .95rem;
  border-left: 2px solid var(--linie);
  font-size: .92rem;
  line-height: 1.6;
  color: var(--tinte-zart);
  max-width: 52ch;
}
.kontakt-block .fuehrung a { color: #f0c48a; text-decoration-thickness: 1px; }
.kontakt-block .fuehrung a:hover { color: #fff; }

/* =========================================================================
   Erweiterung: Werkzeuge in der Kopfzeile, Suche, Vereine, Visitenkarte
   ========================================================================= */

/* --- Schaltflächen in der Kopfzeile -------------------------------------- */

.kopf-werkzeuge { display: flex; align-items: center; gap: .4rem; }

.werkzeug {
  width: 38px; height: 38px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  border: 1px solid var(--linie);
  border-radius: 11px;
  background: var(--grund);
  color: var(--tinte-weich);
  cursor: pointer;
  transition: color var(--uebergang), border-color var(--uebergang),
              background-color var(--uebergang);
}
.werkzeug:hover { color: var(--marke-600); border-color: var(--marke-600); }
.werkzeug svg { width: 18px; height: 18px; }
.werkzeug .aus { display: none; }
:root[data-thema="dunkel"] .werkzeug--thema .an,
:root[data-thema="hell"]   .werkzeug--thema .aus { display: none; }
:root[data-thema="dunkel"] .werkzeug--thema .aus,
:root[data-thema="hell"]   .werkzeug--thema .an { display: block; }

@media (max-width: 860px) {
  .kopf-werkzeuge { margin-left: auto; }
}

/* --- Suche --------------------------------------------------------------- */

.suchschicht {
  position: fixed; inset: 0; z-index: 300;
  display: none;
  padding: clamp(1rem, .5rem + 4vh, 5rem) 1rem 1rem;
  background: color-mix(in srgb, var(--marke-900) 62%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.suchschicht[data-offen="ja"] { display: block; }

.suchkasten {
  width: 100%; max-width: 640px;
  margin-inline: auto;
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten-3);
  overflow: hidden;
  display: flex; flex-direction: column;
  max-height: min(70vh, 640px);
}
.suchzeile {
  display: flex; align-items: center; gap: .7rem;
  padding: .9rem 1.1rem;
  border-bottom: 1px solid var(--linie);
  flex-shrink: 0;
}
.suchzeile svg { width: 19px; height: 19px; color: var(--tinte-zart); flex-shrink: 0; }
.suchzeile input {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: transparent;
  font-family: inherit; font-size: 1.02rem; color: var(--tinte);
}
.suchzeile input::placeholder { color: var(--tinte-zart); }
.suchzeile kbd {
  font-family: var(--schrift-zahl); font-size: .72rem;
  padding: .22em .5em; border-radius: 6px;
  border: 1px solid var(--linie); color: var(--tinte-zart);
  flex-shrink: 0;
}

.suchliste { overflow-y: auto; padding: .5rem; margin: 0; list-style: none; }
.suchliste li { margin: 0; }
.suchliste a {
  display: block;
  padding: .7rem .85rem;
  border-radius: var(--radius-klein);
  text-decoration: none;
  color: inherit;
}
.suchliste a:hover, .suchliste a:focus-visible,
.suchliste li[data-aktiv="ja"] a { background: var(--grund-2); }
.such-titel { display: block; font-weight: 650; font-size: .95rem; color: var(--tinte); line-height: 1.4; }
.such-titel mark { background: var(--akzent-100); color: var(--akzent); padding: 0 .12em; border-radius: 3px; }
.such-weg {
  display: block;
  font-size: .76rem; color: var(--tinte-zart);
  font-family: var(--schrift-zahl); letter-spacing: -.02em;
  margin-top: .15rem;
}
.such-text { display: block; font-size: .87rem; color: var(--tinte-weich); margin-top: .25rem; line-height: 1.5; }
.such-text mark { background: var(--akzent-100); color: var(--akzent); padding: 0 .12em; border-radius: 3px; }
.such-leer { padding: 2rem 1.1rem; text-align: center; color: var(--tinte-zart); font-size: .93rem; }

/* --- Vereins-Steckbriefe ------------------------------------------------- */

.verein {
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem);
  margin-bottom: clamp(1.2rem, .8rem + 1.4vw, 2rem);
}
.verein:last-of-type { margin-bottom: 0; }
.verein-kopf {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .6rem 1rem;
  margin-bottom: 1.1rem;
}
.verein-kopf h2 { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem); margin: 0; }
.verein-seit {
  font-family: var(--schrift-zahl); font-size: .8rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--akzent);
}
.verein-gitter {
  display: grid; gap: clamp(1.2rem, .8rem + 1.4vw, 2.2rem);
  grid-template-columns: 1fr;
}
@media (min-width: 820px) { .verein-gitter { grid-template-columns: 1.25fr 1fr; } }
.verein-gitter h3 {
  font-size: .78rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tinte-zart);
  margin-bottom: .7rem;
}
.verein p { color: var(--tinte-weich); font-size: .96rem; }
.verein-meine {
  background: var(--grund-2);
  border-radius: var(--radius-klein);
  padding: 1.1rem 1.25rem;
}
.verein-meine ul { list-style: none; padding: 0; margin: 0; }
.verein-meine li {
  position: relative; padding-left: 1.4em;
  font-size: .93rem; color: var(--tinte-weich); margin-bottom: .5em;
}
.verein-meine li:last-child { margin-bottom: 0; }
.verein-meine li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--akzent);
}
.verein-fuss {
  display: flex; flex-wrap: wrap; gap: .8rem;
  margin-top: 1.4rem; padding-top: 1.2rem;
  border-top: 1px solid var(--linie);
  align-items: center;
}

/* --- Visitenkarte -------------------------------------------------------- */

.vcard {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(1.1rem, .8rem + 1.2vw, 1.8rem);
  margin-top: 2rem;
  padding: clamp(1.1rem, .9rem + .8vw, 1.5rem);
  border-radius: var(--radius);
  background: rgba(255,255,255,.075);
  border: 1px solid rgba(255,255,255,.13);
}
.vcard-bild {
  width: 132px; height: 132px; flex-shrink: 0;
  padding: 9px; border-radius: 10px;
  background: #fff;
}
.vcard-bild svg { width: 100%; height: 100%; display: block; }
.vcard-text { flex: 1; min-width: 190px; }
.vcard-text strong { display: block; color: #fff; font-size: .97rem; margin-bottom: .25rem; }
.vcard-text p { color: rgba(255,255,255,.72); font-size: .87rem; margin: 0 0 .9rem; }
.vcard .knopf--rand {
  background: rgba(255,255,255,.12); color: #fff;
  border-color: rgba(255,255,255,.22);
}
.vcard .knopf--rand:hover { background: rgba(255,255,255,.2); color: #fff; border-color: rgba(255,255,255,.4); }

/* --- Zeitachse: zusätzliche Einfärbung ----------------------------------- */

.art--zertifikat { background: color-mix(in srgb, #7c5cd6 14%, var(--grund)); color: #5b3fb0; }
:root:not([data-thema="hell"]) .art--zertifikat,
:root[data-thema="dunkel"]     .art--zertifikat { color: #b4a0f0; }
@media (prefers-color-scheme: light) {
  :root:not([data-thema="dunkel"]) .art--zertifikat { color: #5b3fb0; }
}
.punktzeit--zertifikat .punktzeit-inhalt::before { border-color: #7c5cd6; }
.punktzeit--geplant .punktzeit-inhalt::before {
  background: var(--grund); border-style: dashed; border-color: var(--akzent);
}

/* Zeitachse: kompakte Gruppen, der Strich läuft nur innerhalb eines Jahres */
.strahl--kompakt { margin-top: .2rem; }
.strahl--kompakt .punktzeit { padding-bottom: 1.5rem; }
.strahl--kompakt .punktzeit:last-child { padding-bottom: 0; }
.jahrgruppe[hidden] { display: none; }
.jahrgruppe--geplant .punktzeit-inhalt h3 { color: var(--tinte); }

/* --- Hilfsklassen (ersetzen Inline-Angaben, damit eine strenge
       Inhaltsrichtlinie ohne 'unsafe-inline' möglich ist) ----------------- */
.mt-0    { margin-top: 0 !important; }
.mt-1    { margin-top: 1rem; }
a.verweis.mt-1 { display: inline-flex; }
.kachel .verweis.mt-1 { margin-top: 1rem; }
.mt-2    { margin-top: 2.2rem; }
.mittig  { text-align: center; }
.mittig .vorzeile,
.mittig .knopf-reihe { justify-content: center; }
.mittig .fuehrung { margin-inline: auto; }
.eng-mittig { max-width: 780px; margin-inline: auto; }
.starr   { cursor: default; }
.mitmach { margin: 0; font-size: .9rem; max-width: 44ch; }
.dreier  { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }

/* --- Aufklappbare Aufgabenliste an einer Station ------------------------- */

.mehr {
  margin: .75rem 0 .9rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  background: var(--grund-2);
}
.mehr > summary {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem .9rem;
  cursor: pointer;
  font-size: .87rem; font-weight: 650;
  color: var(--marke-600);
  list-style: none;
  border-radius: var(--radius-klein);
}
.mehr > summary::-webkit-details-marker { display: none; }
.mehr > summary::before {
  content: "";
  width: 8px; height: 8px; flex-shrink: 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  margin-left: .15em;
  transition: transform var(--uebergang);
}
.mehr[open] > summary::before { transform: rotate(45deg); }
.mehr > summary:hover { color: var(--marke-500); }
.mehr > summary:focus-visible { outline: 2px solid var(--marke-600); outline-offset: 2px; }
.mehr ul {
  list-style: none;
  margin: 0; padding: .1rem .95rem 1rem 1.05rem;
}
.mehr li {
  position: relative;
  padding-left: 1.15em;
  font-size: .9rem; line-height: 1.55;
  color: var(--tinte-weich);
  margin-bottom: .42em;
}
.mehr li:last-child { margin-bottom: 0; }
.mehr li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--akzent);
}
@media print {
  /* Auf Papier gibt es kein Aufklappen — alles zeigen */
  .mehr { border-color: #bbb; background: none; break-inside: avoid; }
  .mehr > summary { color: #000; }
  .mehr > summary::before { display: none; }
}

/* --- Fingerfreundliche Flächen auf Berührgeräten ------------------------ */
/* Ein Mauszeiger trifft 38 Pixel mühelos, ein Daumen nicht. Auf Geräten
   ohne feine Zeigereingabe wachsen die Schaltflächen auf 44 Pixel. */
@media (pointer: coarse) {
  .werkzeug, .nav-schalter { width: 44px; height: 44px; }
  .werkzeug svg { width: 20px; height: 20px; }
  .filter-knopf { padding: .8em 1.25em; min-height: 44px; }
  .marke { padding-block: .2rem; }
  .verweis { padding-block: .3rem; }
  .suchliste a { padding: .85rem .85rem; }
  .fuss li a, .fuss-unten nav a { display: inline-block; padding-block: .35rem; }
}

/* --- Hinweis auf mit KI erzeugte Bilder ---------------------------------- */
/* Bewusst zurückhaltend: Der Hinweis gehört dazu, soll das Bild aber nicht
   erschlagen. */
.bildhinweis {
  margin: .55rem .2rem 0;
  font-size: .72rem;
  line-height: 1.4;
  letter-spacing: .01em;
  color: var(--tinte-zart);
  text-align: right;
}
.bildhinweis--band {
  position: absolute;
  right: clamp(1.15rem, .6rem + 2.4vw, 2.5rem);
  bottom: .6rem;
  margin: 0;
  color: rgba(255,255,255,.55);
  z-index: 1;
}
@media (max-width: 780px) {
  .bildhinweis--band { color: rgba(255,255,255,.5); }
}
@media print {
  .bildhinweis { color: #555; font-size: 7.5pt; }
  .bildhinweis--band { display: none; }
}


/* --- Untergruppen innerhalb eines Kompetenzbereichs ---------------------- */
.untergruppe { margin-bottom: 1.05rem; }
.untergruppe:last-child { margin-bottom: 0; }
.untergruppe h4 {
  font-size: .72rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--tinte-zart);
  margin-bottom: .5rem;
}
.untergruppe[hidden] { display: none; }
.wolke li:has(> .perle[hidden]) { display: none; }
.perle[hidden] { display: none; }
.koennen[hidden] { display: none; }

/* --- Filter auf der Kompetenzseite --------------------------------------- */
.kfilter { margin-bottom: clamp(1.4rem, 1rem + 1.4vw, 2.2rem); }
.kfilter-feld {
  display: flex; align-items: center; gap: .7rem;
  max-width: 520px;
  padding: .72rem 1.05rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--grund);
  transition: border-color var(--uebergang), box-shadow var(--uebergang);
}
.kfilter-feld:focus-within {
  border-color: var(--marke-600);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--marke-600) 16%, transparent);
}
.kfilter-feld svg { width: 18px; height: 18px; color: var(--tinte-zart); flex-shrink: 0; }
.kfilter-feld input {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: transparent;
  font-family: inherit; font-size: .96rem; color: var(--tinte);
}
.kfilter-feld input::placeholder { color: var(--tinte-zart); }
.kfilter-meldung {
  margin: .6rem 0 0 1.1rem;
  font-size: .8rem; color: var(--tinte-zart);
  font-family: var(--schrift-zahl); letter-spacing: -.02em;
}
.perle mark {
  background: var(--akzent-100); color: var(--akzent);
  padding: 0 .1em; border-radius: 3px;
}
@media print { .kfilter { display: none; } }

/* --- Herausgehobenes Projekt innerhalb einer Vereinskarte ---------------- */
.leuchtturm {
  margin-top: clamp(1.4rem, 1rem + 1.4vw, 2.2rem);
  padding: clamp(1.4rem, 1.1rem + 1.4vw, 2.2rem);
  border-radius: var(--radius);
  background: linear-gradient(150deg, var(--verlauf-a), var(--verlauf-b));
  color: #fff;
  position: relative;
  overflow: hidden;
}
.leuchtturm::before {
  content: ""; position: absolute; inset: auto -70px -110px auto;
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.09), transparent 68%);
  pointer-events: none;
}
.leuchtturm > * { position: relative; }
.leuchtturm-kopf { margin-bottom: 1.3rem; }
.leuchtturm .vorzeile { color: #f0c48a; margin-bottom: .7em; }
.leuchtturm h3 {
  color: #fff;
  font-size: clamp(1.35rem, 1.15rem + .9vw, 1.85rem);
  margin-bottom: .35rem;
}
.leuchtturm-unter {
  margin: 0;
  font-family: var(--schrift-zahl);
  font-size: .8rem; letter-spacing: -.02em;
  color: rgba(255,255,255,.62);
}
.leuchtturm-gitter { display: grid; gap: clamp(1.2rem, .8rem + 1.4vw, 2rem); }
@media (min-width: 780px) { .leuchtturm-gitter { grid-template-columns: 1.15fr .85fr; } }
.leuchtturm p { color: rgba(255,255,255,.82); font-size: .95rem; }
.leuchtturm strong { color: #fff; }
.leuchtturm-fakten {
  background: rgba(255,255,255,.075);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--radius-klein);
  padding: 1.1rem 1.25rem;
}
.leuchtturm-fakten dl { margin: 0; }
.leuchtturm-fakten dt {
  font-size: .7rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: .2rem;
}
.leuchtturm-fakten dd {
  margin: 0 0 .9rem;
  font-size: .9rem; line-height: 1.5;
  color: rgba(255,255,255,.86);
}
.leuchtturm-fakten dd:last-of-type { margin-bottom: 1.2rem; }
.leuchtturm-fakten .knopf--rand {
  background: rgba(255,255,255,.12); color: #fff;
  border-color: rgba(255,255,255,.24);
}
.leuchtturm-fakten .knopf--rand:hover {
  background: rgba(255,255,255,.2); color: #fff; border-color: rgba(255,255,255,.42);
}
@media print {
  .leuchtturm { background: none !important; color: #000; border: 1px solid #bbb; }
  .leuchtturm::before { display: none; }
  .leuchtturm h3, .leuchtturm strong { color: #000; }
  .leuchtturm p, .leuchtturm-fakten dd { color: #333; }
  .leuchtturm-fakten { background: none; border-color: #bbb; }
  .leuchtturm-fakten dt { color: #555; }
}
.fuss-stand { display: inline-block; opacity: .8; }
@media (max-width: 520px) { .fuss-stand { display: block; margin-top: .25rem; } }

/* =========================================================================
   Kompetenzen: ruhige Darstellung
   Eine Spalte, Gruppenbezeichnung links, Einträge als Fließtext rechts.
   Die frühere Kachel-Darstellung mit 67 farbigen Pillen war unübersichtlich.
   ========================================================================= */

/* Eine Spalte statt drei: jeder Bereich bekommt die volle Breite. */
.koennen-gitter {
  display: block;
}
.koennen {
  padding: clamp(1.2rem, .9rem + 1vw, 1.7rem) clamp(1.3rem, 1rem + 1.4vw, 2.1rem);
  margin-bottom: clamp(.65rem, .45rem + .6vw, .95rem);
}
.koennen:last-child { margin-bottom: 0; }
.koennen:hover { transform: none; box-shadow: var(--schatten-1); }

/* Kopf der Karte: Name links, Anzahl rechts */
.koennen-kopf {
  display: flex; align-items: center; gap: .9rem;
  padding-bottom: .75rem;
  margin-bottom: .85rem;
  border-bottom: 1px solid var(--linie);
}
.koennen-kopf > div:last-child {
  flex: 1; display: flex; align-items: baseline;
  justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.koennen-kopf h3 { margin: 0; }
.koennen-kopf .zaehler { flex-shrink: 0; }

/* Untergruppe als Zeile: Bezeichnung links, Einträge rechts */
.untergruppe {
  display: grid;
  grid-template-columns: 1fr;
  gap: .15rem .5rem;
  padding-block: .42rem;
  margin: 0;
  border-bottom: 1px solid var(--linie-zart);
}
.untergruppe:last-child { border-bottom: 0; padding-bottom: 0; }
@media (min-width: 720px) {
  .untergruppe {
    grid-template-columns: minmax(150px, 190px) 1fr;
    gap: .5rem 1.6rem;
    align-items: baseline;
  }
}
.untergruppe h4 { margin: 0; padding-top: .1em; }

/* Einträge: schlichter Text statt Pillen, durch Mittelpunkte getrennt */
.untergruppe .wolke {
  display: block;
  font-size: .96rem;
  line-height: 1.7;
  color: var(--tinte-weich);
}
.untergruppe .wolke li { display: inline; margin: 0; }
.untergruppe .wolke li + li::before {
  content: "·";
  margin: 0 .5em;
  color: var(--tinte-zart);
}
.untergruppe .perle {
  display: inline;
  padding: 0; margin: 0;
  background: none;
  border: 0;
  border-radius: 0;
  font-size: inherit;
  font-weight: 500;
  color: var(--tinte-weich);
}
.koennen:hover .perle { border: 0; }
.untergruppe .perle:hover { background: none; color: var(--tinte); }

/* Hervorhebung nur noch durch Gewicht und Farbe, nicht durch Fläche */
.untergruppe .perle--stark { font-weight: 640; color: var(--tinte); }
.untergruppe .perle--warm  { font-weight: 640; color: var(--akzent); }

/* Ausgeblendete Einträge dürfen keinen Trenner hinterlassen */
.untergruppe .wolke li:has(> .perle[hidden])::before { content: none; }

/* Symbol etwas kleiner — es trägt hier weniger */
.koennen-zeichen { width: 38px; height: 38px; }
.koennen-zeichen svg { width: 19px; height: 19px; }

/* --- Lange deutsche Wörter auf schmalen Bildschirmen -------------------- */
/* „Datenschutzerklärung" passt bei 320 Pixeln nicht in eine Zeile und ragte
   aus dem Bild. Die Sprache steht im HTML, deshalb kann der Browser korrekt
   trennen; break-word greift nur, falls er es nicht kann. */
h1, h2, h3, .held-rolle, .projekt-titel, .zert-titel, .verein-kopf h2 {
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}
@media (min-width: 560px) {
  h1, h2, h3 { hyphens: manual; -webkit-hyphens: manual; }
}

/* --- Kopfzeile auf sehr schmalen Geräten -------------------------------- */
/* Bei 320 Pixeln passten Markenzeichen, Name und drei Schaltflächen nicht
   nebeneinander — das Logo wurde links aus dem Bild geschoben. Unter 380 px
   darf der Name schrumpfen und notfalls umbrechen. */
@media (max-width: 379px) {
  .kopf-innen { gap: .5rem; padding-inline: .8rem; }
  /* Der Name darf schrumpfen, die Schaltflächen nicht — sonst wandert das
     Markenzeichen aus dem Bild. min-width: 0 hebt die Schutzbreite auf, die
     ein Flex-Element sonst behält. */
  .marke { min-width: 0; flex: 0 1 auto; overflow: hidden; }
  .marke-text { min-width: 0; overflow: hidden; }
  .marke-name {
    min-width: 0;
    font-size: .9rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .marke-rolle {
    font-size: .6rem; letter-spacing: .06em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .kopf-werkzeuge { gap: .25rem; flex: 0 0 auto; }
}
@media (max-width: 339px) {
  .marke-rolle { display: none; }
}

/* --- Sehr große Schrift: nichts darf seitlich herausragen --------------- */
/* Bei 200 % Schriftgröße — von vielen Menschen so eingestellt — sprengten
   lange Wörter wie „Michael" oder „mail@michaeldettmann.de" den Rahmen.
   „anywhere" erlaubt dem Browser, die Mindestbreite kleiner zu rechnen; im
   normalen Betrieb ändert sich dadurch nichts. */
h1, h2, h3, h4,
.held-rolle, .zaehler, .perle, .projekt-titel, .zert-titel,
.chronik-name, .such-titel, .anriss-titel, .kf-wert,
.fuss a, .text-seite a, .aufsatz a, a[href^="mailto"], a[href^="tel"] {
  overflow-wrap: anywhere;
}

/* Raster- und Flexkinder dürfen unter ihre Inhaltsbreite schrumpfen —
   sonst schiebt ein einziges langes Wort die ganze Spalte auf. */
.huelle, .held-gitter > *, .held-bild, .koennen, .untergruppe,
.fuss-gitter > *, .koennen-kopf > div, .punktzeit-inhalt,
.verein-gitter > *, .leuchtturm-gitter > *, .kontakt-feld span {
  min-width: 0;
}

/* --- Extremfall: schmalstes Gerät und doppelte Schriftgröße ------------- */
/* Pillenförmige Elemente laufen normalerweise bewusst nicht um. Wenn aber
   320 Pixel Breite auf 200 % Schrift treffen, ist Umbrechen besser als
   Herausragen. */
@media (max-width: 400px) {
  .schild, .art, .zaehler, .vorzeile, .knopf, .filter-knopf {
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
  }
  .knopf, .filter-knopf { max-width: 100%; }
  .band-feld { min-width: 0; }
  .band-text, .band-zahl { overflow-wrap: anywhere; }
  .jahrkopf { flex-wrap: wrap; row-gap: .3rem; }
  .koennen-kopf > div:last-child { flex-direction: column; align-items: flex-start; gap: .2rem; }

  /* In der Fußzeile ist Platz für zwei Zeilen — dort darf der Name umbrechen
     statt gekürzt zu werden wie oben in der Kopfzeile. */
  .fuss .marke { flex-wrap: wrap; }
  .fuss .marke-text { overflow: visible; }
  .fuss .marke-name {
    white-space: normal; overflow: visible;
    text-overflow: clip; overflow-wrap: anywhere;
  }

  /* Lange Internetadressen in Verweisen und Kontaktfeldern umbrechen lassen */
  .verweis { flex-wrap: wrap; max-width: 100%; }
  .verweis, .kontakt-feld, .kf-wert, .anriss-mehr, .such-weg, .projekt-org {
    overflow-wrap: anywhere;
  }
  .kontakt-feld { flex-wrap: wrap; }
}

/* --- Lange deutsche Wörter in schmalen Spalten --------------------------- */
/* Wer die Schrift im Browser vergrößert, hat irgendwann Spalten, die schmaler
   sind als „Softwareverteilung" oder „Serverumgebungen". Dann wird nach
   deutschen Regeln getrennt (dafür steht lang="de" im <html>); break-word ist
   nur das Netz, falls der Browser keine Trennstelle kennt. */
p, li, dd, dt, figcaption, blockquote, .band-text, .kachel-liste li,
.projekt-text, .zert-text, .anriss-text, .verein p {
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}

/* --- Letzte Ecken, die bei sehr großer Schrift noch herausragten --------- */
/* Ein Raster ist nur so schmal wie das längste Wort darin, solange dieses
   Wort nicht umbrechen darf. „Produktionsassistenz" und „Herrenbergerstraße"
   haben deshalb ganze Listen aus dem Bild geschoben. */
.projekt-rolle, .punktzeit-jahr, address {
  overflow-wrap: anywhere;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.projekt, .projekt-korper, .punktzeit, .punktzeit-inhalt,
.projektliste > *, .strahl > * { min-width: 0; }
.projektliste, .chronik { grid-template-columns: minmax(0, 1fr); }

/* Die großen Schmuckzahlen dürfen nicht breiter werden als der Bildschirm. */
.kopf-jahr { font-size: min(clamp(4.5rem, 2rem + 12vw, 9rem), 24vw); }

/* --- Verweis auf die Firmenseite ---------------------------------------- */
/* Steht einmal im Hinweis unter der Einleitung und einmal im Fußbereich.
   Beide Male mitten im Fließtext — ohne Unterstreichung wäre der Verweis
   dort nicht als solcher zu erkennen. */
.held-notiz a {
  color: var(--marke-600);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.held-notiz a:hover { color: var(--akzent); }

.fuss-firma { margin-top: .75rem; }
.fuss-firma a {
  color: rgba(255,255,255,.9);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.fuss-firma a:hover { color: #fff; }

/* --- Drei Schwerpunkte auf der Ehrenamtsseite --------------------------- */
/* Verweise auf die ausführlichen Kästen bei den Vereinen. Zwischen 51
   gleich aussehenden Projektzeilen geht sonst unter, was Michael wichtig
   ist. */
.schwerpunkte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: .9rem;
  margin-bottom: clamp(1.8rem, 1.3rem + 1.6vw, 3rem);
}