/* Unterseiten im Stil der Startseite, 28.09.2026.
   GOAT: "die unterseiten muessen genau so visuell ansprechend sein wie die
   homepage". Bausteine nach den Unterseiten von nordpixel.ch (aufgenommen am
   28.09.2026): dunkler Kopf mit Brotkrumen und Farbpunkt, Foto mit Zitat,
   Kartenraster mit Symbol, nummerierte Schritte im Gitter, dunkles Band mit
   nummerierten Zeilen, Kennzahlen, Chips, Abschlusskarte, grosser Fuss.
   Gilt unter body.start.unter und baut auf start.css auf (Farben, Knoepfe,
   Farbgruende, Fragen, Abschluss mit Wellen, Fuss). */

.unter { background: var(--weiss); }
.unter main { overflow-x: clip; }

/* --- Kopfzeile: auf allen Seiten gleich, beim Scrollen dunkles Glas ------- */
.start .kopfzeile { transition: background .3s ease, box-shadow .3s ease; }
.start .kopfzeile > .wort { color: var(--hell); }
.start.gescrollt .kopfzeile {
  background: rgb(11 13 20 / 78%); backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgb(255 255 255 / 8%);
}
.start .pille { position: relative; }
.start .pille nav a { color: var(--grau-hell); transition: color .2s ease; }
.start .pille nav a:hover, .start .pille nav a[aria-current="page"] { color: var(--hell); }
.start .pille nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--v-hell); text-underline-offset: 6px; text-decoration-thickness: 2px; }
.menue-knopf {
  all: unset; box-sizing: border-box; cursor: pointer; min-height: 44px; padding: 0 6px;
  display: inline-flex; align-items: center; gap: 8px; color: var(--hell); font-weight: 600; font-size: 15px;
}
.menue-knopf:focus-visible { outline: 2px solid var(--v-hell); border-radius: 10px; }
.menue-knopf i { display: grid; gap: 4px; width: 18px; }
.menue-knopf i::before, .menue-knopf i::after { content: ""; height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s ease; }
.pille[data-offen] .menue-knopf i::before { transform: translateY(3px) rotate(45deg); }
.pille[data-offen] .menue-knopf i::after { transform: translateY(-3px) rotate(-45deg); }
@media (max-width: 799px) {
  .start .pille[data-offen] nav {
    display: flex; flex-direction: column; gap: 4px; position: absolute; top: calc(100% + 10px); right: 0;
    min-width: 230px; padding: 10px; border-radius: 18px;
    background: rgb(11 13 20 / 94%); border: 1px solid rgb(255 255 255 / 12%); backdrop-filter: blur(14px);
    box-shadow: 0 30px 60px -30px rgb(0 0 0 / 70%);
  }
  .start .pille[data-offen] nav a { padding: 12px 14px; border-radius: 12px; min-height: 44px; display: flex; align-items: center; }
  .start .pille[data-offen] nav a:hover { background: rgb(255 255 255 / 6%); }
}
@media (min-width: 800px) { .menue-knopf { display: none; } }

/* --- Seitenkopf ------------------------------------------------------------ */
/* rendra.css setzt "main > section:first-of-type" auf padding 0, deshalb hier
   die hoehere Spezifitaet. Die Kopfzeile ist 88 px hoch und liegt darueber. */
.unter main > .u-kopf, .u-kopf {
  position: relative; isolation: isolate; overflow: hidden; margin-top: -88px;
  padding: calc(88px + clamp(40px, 7vw, 96px)) 0 clamp(64px, 9vw, 120px);
  color: var(--hell);
  background:
    radial-gradient(620px 460px at 88% 8%, rgb(155 140 255 / 24%), transparent 70%),
    radial-gradient(520px 440px at 0% 100%, rgb(91 76 240 / 22%), transparent 70%),
    radial-gradient(120% 80% at 50% 100%, #161b36 0%, var(--nacht) 70%);
}
/* Punktraster, das zum Rand hin ausblendet */
.u-kopf::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgb(255 255 255 / 11%) 1px, transparent 1.2px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 60% 70% at 72% 35%, #000 10%, transparent 75%);
}
/* Langsam wandernder Lichtfleck */
.u-kopf::after {
  content: ""; position: absolute; z-index: -1; width: 520px; height: 520px; border-radius: 50%;
  right: -120px; top: -160px; pointer-events: none;
  background: radial-gradient(circle, rgb(155 140 255 / 30%), transparent 65%);
  filter: blur(10px); animation: schweben 16s ease-in-out infinite alternate;
}
@keyframes schweben { to { transform: translate(-160px, 120px) scale(1.15); } }
.u-kopf .bahn { display: grid; gap: 48px; align-items: center; }
@media (min-width: 960px) {
  .u-kopf.mit-bild .bahn { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 64px; }
}
.u-krumen { display: flex; gap: 10px; align-items: center; margin: 0 0 26px; font-size: 14px; color: var(--grau-hell); }
.u-krumen a { color: var(--grau-hell); text-decoration: none; }
.u-krumen a:hover { color: var(--hell); }
.u-krumen span[aria-hidden] { opacity: .5; }
.u-kopf .s-braue { text-align: left; margin: 0 0 18px; }
.u-kopf h1 {
  font-size: clamp(2.6rem, 6vw, 4.7rem); font-weight: 800; line-height: 1.02; letter-spacing: -.045em;
  color: var(--hell); max-width: 14ch; margin: 0 0 24px; text-align: left;
}
.u-kopf h1 .punkt { color: var(--v-hell); }
.u-kopf h1 em { font-style: normal; color: transparent; -webkit-text-stroke: 1.5px var(--hell); }
.u-lead { font-size: clamp(17px, 1.6vw, 19px); line-height: 1.6; color: var(--grau-hell) !important; max-width: 48ch; margin: 0; }
.u-taten { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.u-kopf .s-knopf:not(.hell):not(.rand) { background: var(--v); border-color: transparent; box-shadow: 0 18px 40px -16px rgb(91 76 240 / 70%); }
.u-merkmale { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 30px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--grau-hell); }
.u-merkmale li { display: flex; align-items: center; gap: 8px; }
.u-merkmale .sym { width: 16px; height: 16px; color: var(--v-hell); }
.unter main > .u-kopf.klein { padding-bottom: clamp(48px, 7vw, 88px); }
.u-kopf.klein h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); }

/* Auftritt beim Laden */
@media (prefers-reduced-motion: no-preference) {
  .u-kopf .u-auftritt { animation: auftritt .8s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--d, 0) * 90ms); }
}
@keyframes auftritt { from { opacity: 0; transform: translateY(22px); } }

/* --- Bild im Kopf: Browserfenster mit schwebenden Messwerten ---------------- */
.u-fenster {
  position: relative; border-radius: 16px; overflow: hidden; background: #1a1c26;
  border: 1px solid rgb(255 255 255 / 12%); box-shadow: 0 50px 100px -40px rgb(0 0 0 / 80%), 0 0 0 8px rgb(255 255 255 / 3%);
  transform: perspective(1400px) rotateY(-8deg) rotateX(3deg); transition: transform .6s ease;
}
.u-fenster:hover { transform: perspective(1400px) rotateY(-2deg) rotateX(1deg); }
.u-fenster .leiste { display: flex; gap: 6px; padding: 11px 14px; background: #20222e; border-bottom: 1px solid rgb(255 255 255 / 8%); }
.u-fenster .leiste i { width: 10px; height: 10px; border-radius: 50%; background: rgb(255 255 255 / 18%); }
.u-fenster img { display: block; width: 100%; height: auto; }
.u-bildfeld { position: relative; }
.u-marke {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 14px; font-size: 14px; font-weight: 600; color: var(--tinte);
  background: rgb(251 251 253 / 94%); box-shadow: 0 24px 50px -20px rgb(0 0 0 / 60%);
  animation: wippen 5s ease-in-out infinite;
}
.u-marke b { font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--v); }
.u-marke .sym { width: 18px; height: 18px; color: var(--v); }
.u-marke.links { left: -22px; bottom: 16%; }
.u-marke.rechts { right: -14px; top: 12%; animation-delay: -2.5s; }
@keyframes wippen { 50% { transform: translateY(-8px); } }
@media (max-width: 600px) { .u-marke.links { left: 8px; } .u-marke.rechts { right: 8px; } }
@media (prefers-reduced-motion: reduce) { .u-marke, .u-kopf::after { animation: none; } .u-fenster { transform: none; } }

/* --- Abschnitte und Ueberschriften ----------------------------------------- */
.u-abschnitt, .unter .u-abschnitt.s-fragen { position: relative; isolation: isolate; padding-block: clamp(72px, 10vw, 128px); }
.u-abschnitt.s-licht {
  background:
    radial-gradient(520px 420px at 100% 0%, rgb(155 140 255 / 18%), transparent 70%),
    radial-gradient(420px 360px at 0% 100%, rgb(91 76 240 / 8%), transparent 70%),
    var(--licht);
}
.u-abschnitt.s-nacht {
  background:
    radial-gradient(480px 520px at 0% 20%, rgb(91 76 240 / 20%), transparent 70%),
    radial-gradient(480px 520px at 100% 90%, rgb(155 140 255 / 14%), transparent 70%),
    radial-gradient(120% 80% at 50% 100%, #161b36 0%, var(--nacht) 70%);
}
.u-abschnitt.zier::before {
  content: "\2726"; position: absolute; z-index: 0; right: 7%; top: 72px; font-size: 20px; line-height: 1;
  color: var(--v); opacity: .8; pointer-events: none;
}
.u-abschnitt.s-nacht.zier::before { color: var(--v-hell); left: 7%; right: auto; }
.u-titel { margin-bottom: clamp(40px, 5vw, 64px); }
.u-titel .s-braue { text-align: left; margin: 0 0 16px; }
.u-titel h2 { text-align: left; margin: 0; max-width: 18ch; font-size: clamp(2.1rem, 4.4vw, 3.6rem); letter-spacing: -.04em; }
.u-titel p { text-align: left; margin: 20px 0 0; max-width: 58ch; font-size: 17px; color: var(--grau); }
.u-abschnitt.s-nacht .u-titel p { color: var(--grau-hell); }
.u-titel.mitte { text-align: center; }
.u-titel.mitte .s-braue, .u-titel.mitte h2, .u-titel.mitte p { text-align: center; margin-inline: auto; }
.u-titel.zweispaltig { display: grid; gap: 24px; align-items: end; }
@media (min-width: 900px) { .u-titel.zweispaltig { grid-template-columns: 1fr 1fr; gap: 64px; } .u-titel.zweispaltig p { margin: 0; } }

/* --- Karten mit Symbol --------------------------------------------------- */
.u-karten { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.u-karte {
  position: relative; padding: 30px 28px 32px; border-radius: 22px; background: #fff;
  border: 1px solid rgb(14 17 22 / 8%); box-shadow: 0 1px 2px rgb(14 17 22 / 4%), 0 20px 40px -32px rgb(14 17 22 / 30%);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.u-karte:hover { transform: translateY(-6px); border-color: rgb(91 76 240 / 35%); box-shadow: 0 30px 60px -30px rgb(91 76 240 / 40%); }
.u-karte h3 { font-size: 20px; font-weight: 700; margin: 22px 0 10px; color: var(--tinte); letter-spacing: -.02em; }
.u-karte p { font-size: 15.5px; line-height: 1.6; color: var(--grau) !important; margin: 0; }
.u-symbol {
  width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: var(--v);
  background: linear-gradient(145deg, #efedff, #e2defd); box-shadow: inset 0 0 0 1px rgb(91 76 240 / 14%);
  transition: transform .3s ease;
}
.u-karte:hover .u-symbol { transform: rotate(-6deg) scale(1.06); }
.u-symbol .sym { width: 24px; height: 24px; }
.u-karte.dunkel { background: linear-gradient(160deg, #1b1d2b, #0f111a); border-color: rgb(155 140 255 / 22%); }
.u-karte.dunkel h3 { color: var(--hell); }
.u-karte.dunkel p { color: var(--grau-hell) !important; }
.u-karte.dunkel .u-symbol { background: rgb(155 140 255 / 14%); color: var(--v-hell); box-shadow: inset 0 0 0 1px rgb(155 140 255 / 24%); }
.u-karte .u-ecke { position: absolute; top: 24px; right: 24px; font-family: ui-monospace, "Cascadia Mono", monospace; font-size: 13px; color: rgb(14 17 22 / 30%); }
.u-karte.dunkel .u-ecke { color: rgb(255 255 255 / 30%); }

/* --- Nummerierte Schritte im Gitter ------------------------------------- */
.u-schritte {
  list-style: none; margin: 0; padding: 0; display: grid; border-radius: 24px; overflow: hidden;
  border: 1px solid rgb(14 17 22 / 10%); background: #fff;
}
@media (min-width: 800px) { .u-schritte { grid-template-columns: repeat(3, 1fr); } }
.u-schritte li { position: relative; padding: 36px 32px 40px; border-bottom: 1px solid rgb(14 17 22 / 10%); transition: background .3s ease; overflow: hidden; }
@media (min-width: 800px) { .u-schritte li { border-bottom: 0; border-right: 1px solid rgb(14 17 22 / 10%); } .u-schritte li:last-child { border-right: 0; } }
.u-schritte li:hover { background: #f6f5ff; }
.u-schritte .u-nr {
  display: inline-grid; place-items: center; min-width: 44px; height: 30px; padding: 0 10px; border-radius: 999px;
  font-family: ui-monospace, "Cascadia Mono", monospace; font-size: 13px; font-weight: 600;
  color: var(--v); background: #efedff;
}
.u-schritte h3 { font-size: 21px; font-weight: 700; margin: 22px 0 10px; color: var(--tinte); }
.u-schritte p { margin: 0; color: var(--grau) !important; font-size: 15.5px; line-height: 1.6; }
.u-schritte li::after {
  content: attr(data-nr); position: absolute; right: -6px; bottom: -34px; z-index: 0; pointer-events: none;
  font-size: 140px; font-weight: 800; line-height: 1; letter-spacing: -.06em;
  color: transparent; -webkit-text-stroke: 1.5px rgb(91 76 240 / 12%);
}
.u-schritte li > * { position: relative; z-index: 1; }

/* --- Dunkles Band mit nummerierten Zeilen -------------------------------- */
.u-zeilen { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie-dunkel); }
.u-zeilen li {
  display: grid; gap: 6px 32px; padding: 26px 4px; border-bottom: 1px solid var(--linie-dunkel);
  grid-template-columns: 48px 1fr; align-items: baseline; transition: background .3s ease;
}
@media (min-width: 900px) { .u-zeilen li { grid-template-columns: 64px minmax(0, 320px) 1fr; padding: 30px 12px; } }
.u-zeilen li:hover { background: rgb(255 255 255 / 3%); }
.u-zeilen .u-nr { font-family: ui-monospace, "Cascadia Mono", monospace; font-size: 13px; color: var(--v-hell); }
.u-zeilen h3 { margin: 0; font-size: 20px; font-weight: 700; color: var(--hell); transition: transform .3s ease, color .3s ease; }
.u-zeilen li:hover h3 { transform: translateX(6px); color: var(--v-hell); }
.u-zeilen p { margin: 0; grid-column: 2; color: var(--grau-hell) !important; font-size: 15.5px; line-height: 1.6; max-width: 60ch; }
@media (min-width: 900px) { .u-zeilen p { grid-column: 3; } }

/* --- Kennzahlen ----------------------------------------------------------- */
.u-zahlen { display: grid; gap: 1px; grid-template-columns: repeat(2, 1fr); background: rgb(14 17 22 / 10%); border-radius: 24px; overflow: hidden; border: 1px solid rgb(14 17 22 / 10%); }
@media (min-width: 900px) { .u-zahlen { grid-template-columns: repeat(4, 1fr); } }
.u-zahl { background: #fff; padding: 32px 26px; }
.u-zahl b {
  display: block; font-size: clamp(2.4rem, 4.6vw, 3.6rem); font-weight: 800; line-height: 1; letter-spacing: -.045em;
  background: linear-gradient(120deg, var(--tinte) 30%, var(--v)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.u-zahl span { display: block; margin-top: 12px; font-size: 14.5px; line-height: 1.5; color: var(--grau); }

/* --- Chips ---------------------------------------------------------------- */
.u-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.u-chips li {
  padding: 10px 18px; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--tinte);
  background: #fff; border: 1px solid rgb(14 17 22 / 10%); transition: all .25s ease;
}
.u-chips li:hover { color: var(--v); border-color: rgb(91 76 240 / 45%); transform: translateY(-2px); box-shadow: 0 12px 24px -16px rgb(91 76 240 / 60%); }

/* --- Zwei Spalten: Text neben Bild oder Karte ---------------------------- */
.u-zwei { display: grid; gap: 48px; align-items: center; }
@media (min-width: 960px) { .u-zwei { grid-template-columns: 1fr 1fr; gap: 80px; } .u-zwei.bild-rechts > :first-child { order: 2; } }
.u-zwei .u-titel { margin-bottom: 0; }
.u-text p { color: var(--grau); font-size: 17px; line-height: 1.7; max-width: 58ch; }
.u-zitat {
  position: relative; margin: 28px 0 0; padding: 22px 0 0 0; border-top: 1px solid rgb(14 17 22 / 10%);
  font-size: 19px; line-height: 1.5; font-weight: 600; color: var(--tinte); letter-spacing: -.01em; max-width: 46ch;
}
.u-zitat::before { content: "\201E"; position: absolute; left: -4px; top: -6px; transform: translateY(-50%); font-size: 64px; line-height: 1; color: var(--v); opacity: .35; }
.u-zitat cite { display: block; margin-top: 12px; font-style: normal; font-size: 14px; font-weight: 400; color: var(--grau); }
.u-haken { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.u-haken li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; color: var(--tinte); }
.u-haken .sym { flex: 0 0 22px; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: #efedff; color: var(--v); }
.s-nacht .u-haken li { color: var(--hell); }
.s-nacht .u-haken .sym { background: rgb(155 140 255 / 16%); color: var(--v-hell); }

/* Foto mit schraeg liegendem Rahmen und Plakette */
.u-foto { position: relative; max-width: 460px; margin-inline: auto; }
.u-foto::before {
  content: ""; position: absolute; inset: 18px -18px -18px 18px; border-radius: 28px; z-index: -1;
  background: linear-gradient(145deg, var(--v-hell), var(--v)); transform: rotate(3deg); opacity: .9;
}
.u-foto img { display: block; width: 100%; height: auto; border-radius: 28px; box-shadow: 0 40px 80px -40px rgb(14 17 22 / 55%); }
.u-plakette {
  position: absolute; left: -20px; bottom: 28px; display: flex; gap: 12px; align-items: center;
  padding: 14px 18px; border-radius: 18px; background: rgb(11 13 20 / 88%); color: var(--hell);
  border: 1px solid rgb(255 255 255 / 12%); backdrop-filter: blur(10px); box-shadow: 0 24px 50px -20px rgb(0 0 0 / 60%);
  animation: wippen 6s ease-in-out infinite;
}
.u-plakette .punkt-gruen { width: 10px; height: 10px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 5px rgb(61 220 132 / 20%); }
.u-plakette small { display: block; color: var(--grau-hell); font-size: 12.5px; }
.u-plakette b { font-size: 15px; }
@media (max-width: 600px) { .u-plakette { left: 10px; } }

/* --- Arbeiten: Projekte im Browserrahmen --------------------------------- */
.u-projekte { display: grid; gap: 28px; }
@media (min-width: 800px) { .u-projekte { grid-template-columns: 1fr 1fr; gap: 32px; } }
.u-projekt { margin: 0; }
.u-projekt .u-rahmen {
  border-radius: 18px; overflow: hidden; background: #1a1c26; border: 1px solid rgb(14 17 22 / 10%);
  box-shadow: 0 30px 60px -36px rgb(14 17 22 / 55%); transition: transform .4s ease, box-shadow .4s ease;
}
.u-projekt .leiste { display: flex; gap: 6px; padding: 10px 14px; background: #20222e; }
.u-projekt .leiste i { width: 9px; height: 9px; border-radius: 50%; background: rgb(255 255 255 / 18%); }
.u-projekt .u-bild { overflow: hidden; aspect-ratio: 1000 / 694; }
.u-projekt img { display: block; width: 100%; height: auto; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.u-projekt:hover .u-rahmen { transform: translateY(-6px); box-shadow: 0 40px 80px -36px rgb(91 76 240 / 45%); }
.u-projekt:hover img { transform: scale(1.05); }
.u-projekt figcaption { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 4px 0; }
.u-projekt figcaption b { font-size: 19px; font-weight: 700; color: var(--tinte); display: block; }
.u-projekt figcaption small { color: var(--grau); font-size: 14px; }
.u-projekt .u-kb {
  flex: 0 0 auto; padding: 6px 12px; border-radius: 999px; font-family: ui-monospace, "Cascadia Mono", monospace;
  font-size: 13px; color: var(--v); background: #efedff;
}

/* Zwei Geraete uebereinander */
.u-geraete { position: relative; max-width: 980px; margin: 0 auto; padding-bottom: 40px; }
.u-geraete .u-fenster { transform: none; }
.u-telefon {
  position: absolute; right: -8px; bottom: 0; width: clamp(130px, 22%, 210px); border-radius: 30px; padding: 8px;
  background: #0c0d12; border: 1px solid rgb(255 255 255 / 16%); box-shadow: 0 40px 80px -30px rgb(0 0 0 / 80%);
}
.u-telefon img { display: block; width: 100%; height: auto; border-radius: 22px; }

/* --- Formular (Seitencheck) --------------------------------------------- */
.u-formkarte {
  position: relative; padding: clamp(28px, 4vw, 40px); border-radius: 26px; background: var(--weiss); color: var(--tinte);
  box-shadow: 0 50px 100px -40px rgb(0 0 0 / 75%), 0 0 0 8px rgb(255 255 255 / 5%);
}
.u-formkarte h2 { text-align: left; font-size: 24px; font-weight: 700; margin: 0 0 6px; max-width: none; letter-spacing: -.02em; color: var(--tinte); }
.u-formkarte > p { margin: 0 0 22px; color: var(--grau); font-size: 15px; max-width: none; text-align: left; }
.u-feld { display: grid; gap: 7px; margin-bottom: 16px; }
.u-feld label { font-size: 14px; font-weight: 600; }
.u-feld input {
  font: inherit; font-size: 16px; min-height: 52px; padding: 0 16px; border-radius: 14px; color: var(--tinte);
  border: 1px solid rgb(14 17 22 / 16%); background: #fff; transition: border-color .2s ease, box-shadow .2s ease;
}
.u-feld input:focus { outline: none; border-color: var(--v); box-shadow: 0 0 0 4px rgb(91 76 240 / 16%); }
.u-formkarte .s-knopf { width: 100%; justify-content: center; background: var(--v); border: 0; margin-top: 6px; cursor: pointer; font: inherit; font-weight: 600; }
.u-klein { font-size: 13px !important; color: var(--grau) !important; margin: 14px 0 0 !important; }
.u-klein a { color: var(--grau); }
.u-honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.u-meldung { margin: 0 0 18px; padding: 14px 16px; border-radius: 14px; font-size: 15px; }
.u-meldung.gut { background: #e8f8ef; color: #0f5132; }
.u-meldung.schlecht { background: #fdecec; color: #842029; }

/* --- Rechtstexte ---------------------------------------------------------- */
.u-recht { display: grid; gap: 32px; align-items: start; }
@media (min-width: 960px) { .u-recht { grid-template-columns: 240px minmax(0, 1fr); gap: 56px; } }
.u-inhalt { position: sticky; top: 96px; padding: 22px; border-radius: 20px; background: #fff; border: 1px solid rgb(14 17 22 / 8%); }
.u-inhalt p { margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--grau); }
.u-inhalt ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; counter-reset: n; }
.u-inhalt a { display: flex; gap: 10px; padding: 8px 10px; border-radius: 10px; font-size: 14.5px; color: var(--tinte); text-decoration: none; }
.u-inhalt a::before { counter-increment: n; content: counter(n, decimal-leading-zero); font-family: ui-monospace, monospace; font-size: 12px; color: var(--v); padding-top: 2px; }
.u-inhalt a:hover { background: #f3f2ff; }
@media (max-width: 959px) { .u-inhalt { position: static; } }
.u-blatt {
  padding: clamp(28px, 5vw, 56px); border-radius: 26px; background: #fff; border: 1px solid rgb(14 17 22 / 8%);
  box-shadow: 0 30px 60px -44px rgb(14 17 22 / 40%);
}
.u-blatt section { padding: 0 0 28px; margin: 0 0 28px; border-bottom: 1px solid rgb(14 17 22 / 8%); scroll-margin-top: 100px; }
.u-blatt section:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.u-blatt h2 { text-align: left; max-width: none; margin: 0 0 14px; font-size: 22px; font-weight: 700; letter-spacing: -.02em; display: flex; gap: 12px; align-items: center; }
.u-blatt h2 .sym { width: 20px; height: 20px; color: var(--v); flex: 0 0 20px; }
.u-blatt p { max-width: 70ch; color: var(--grau); font-size: 16px; line-height: 1.7; margin: 0 0 12px; }
.u-blatt p:last-child { margin-bottom: 0; }
.u-blatt a { color: var(--v); }
.u-blatt b { color: var(--tinte); }
.u-stand { margin-top: 24px !important; font-size: 14px !important; }

/* --- Einblenden beim Scrollen (nur mit Skript, sonst sofort sichtbar) ------ */
@media (prefers-reduced-motion: no-preference) {
  .js [data-zeigen] { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--d, 0) * 90ms); }
  .js [data-zeigen].sichtbar { opacity: 1; transform: none; }
}

/* Abschlusskarte und Fuss aus start.css: Abstand zum letzten Abschnitt */
.unter .s-schluss { margin-top: 0; }

/* Fragen auf hellem Grund (Ueber mich): helle Kaesten statt dunkler */
.s-licht .fragen details { background: #fff; border-color: rgb(14 17 22 / 10%); }
.s-licht .fragen details[open] { border-color: rgb(91 76 240 / 40%); }
.s-licht .fragen summary { color: var(--tinte); }
.s-licht .fragen details p { color: var(--grau) !important; }
.s-licht .plus { background: #efedff; color: var(--v); }
.u-abschnitt .fragen { margin-top: 0; }

/* rendra.css zentriert jeden Absatz direkt nach einer h2. In Blatt, Karten und Text links. */
.u-blatt p, .u-karte p, .u-text p, .u-zeilen p, .u-schritte p { text-align: left; margin-inline: 0; }
.start .pille .tat { white-space: nowrap; }
@media (max-width: 420px) { .start .pille { gap: 8px; padding-left: 12px; } .start .pille .tat { padding-inline: 14px; font-size: 14px; } }

/* Ganze Seite ansehen (12.10.2026): Karte ist ein Link auf die lange Aufnahme, das Skript zeigt sie im Fenster */
.u-ganz { display: block; color: inherit; text-decoration: none; cursor: zoom-in; }
.u-ganz .u-bild, .projekt .u-ganz { position: relative; }
.projekt .u-ganz { overflow: hidden; border-radius: 18px; }
.u-ansehen {
  position: absolute; left: 50%; bottom: 16px; transform: translate(-50%, 8px); opacity: 0; white-space: nowrap;
  padding: 9px 16px; border-radius: 999px; background: rgb(14 17 22 / 82%); color: #fff; font-size: 14px; font-weight: 600;
  transition: opacity .25s ease, transform .25s ease; pointer-events: none;
}
.u-ganz:hover .u-ansehen, .u-ganz:focus-visible .u-ansehen { opacity: 1; transform: translate(-50%, 0); }
@media (hover: none) { .u-ansehen { opacity: 1; transform: translate(-50%, 0); font-size: 13px; padding: 7px 13px; bottom: 10px; } }
.g-fenster {
  position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center;
  padding: clamp(10px, 3vw, 36px); background: rgb(9 10 16 / 86%); backdrop-filter: blur(6px);
}
.g-fenster[hidden] { display: none; }
.g-kopf {
  width: min(100%, 1100px); display: flex; align-items: center; gap: 14px; padding: 11px 14px;
  background: #20222e; color: #fff; border-radius: 16px 16px 0 0; font-size: 15px; font-weight: 600;
}
.g-kopf i { width: 10px; height: 10px; border-radius: 50%; background: rgb(255 255 255 / 20%); flex: none; }
.g-kopf i + i { margin-left: -8px; }
.g-kopf span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 6px; }
.g-zu {
  flex: none; min-width: 44px; min-height: 44px; margin: -6px -6px -6px 0; border: 0; border-radius: 12px; cursor: pointer;
  background: rgb(255 255 255 / 12%); color: #fff; font: inherit; font-size: 14px; padding: 0 14px;
}
.g-zu:hover { background: rgb(255 255 255 / 22%); }
.g-rolle {
  width: min(100%, 1100px); flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  background: #fff; border-radius: 0 0 16px 16px;
}
.g-rolle img { display: block; width: 100%; height: auto; }
.g-laedt { padding: 60px 20px; text-align: center; color: var(--grau); }