
.u-kopf { padding-bottom: clamp(40px, 7vh, 84px); }
.uw-kopf-raster { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 28vw, 420px); gap: 40px; align-items: end; }
.u-pfad { font-size: 13px; font-weight: 500; letter-spacing: .01em; color: rgba(246,248,245,.66); margin-bottom: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.u-pfad a { text-decoration: none; color: rgba(246,248,245,.86); }
.u-pfad a:hover { text-decoration: underline; text-underline-offset: 4px; }
.u-titel { font-size: clamp(44px, 6.6vw, 118px); line-height: .94; max-width: none; }
.u-titel em { display: block; }
.uw-kopf-rechts { border-top: 1px solid rgba(246,248,245,.22); padding-top: 18px; }
.uw-kopf-rechts .u-unter { margin-top: 0; max-width: none; }
.uw-unterzeile { font-size: clamp(20px, 1.7vw, 26px) !important; font-weight: 500; letter-spacing: -.015em; line-height: 1.15; opacity: .95 !important; margin-bottom: 14px; }
.uw-kopf-rechts .u-unter + .u-unter { color: rgba(246,248,245,.74); opacity: 1; font-size: clamp(15px, 1.1vw, 17px); }
.uw-aufruf { margin-top: 26px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.uw-aufruf .klein { color: rgba(246,248,245,.66); }
.u-kopf .u-pfad, .u-kopf .u-kennung, .uw-kopf-rechts p, .uw-aufruf .klein { text-shadow: 0 1px 14px rgba(6,17,14,.7); }
.uw-h2 { font-size: var(--u-h2-mittel); font-weight: 600; letter-spacing: -.05em; line-height: .92; max-width: 1200px; margin-bottom: clamp(28px, 3.5vw, 52px); }
.uw-satz { font-size: var(--u-satz); font-weight: 500; letter-spacing: -.02em; line-height: 1.25; max-width: 760px; color: var(--graphit); }
.uw-knopfreihe { margin-top: clamp(40px, 5vw, 72px); }
.u-abschnitt .nr { color: var(--akzent); }
.uw-einstieg { padding-top: clamp(90px, 10vw, 170px); padding-bottom: clamp(60px, 7vw, 120px); }
.uw-zielgruppe { color: var(--schnee); font-weight: 500; }
.uw-einfaerben.einfaerben { margin: 0; max-width: 1120px; text-align: left; font-size: clamp(24px, 2.6vw, 40px); }
.uw-liefer { display: grid; grid-template-columns: minmax(200px, 3fr) 9fr; gap: clamp(32px, 5vw, 80px); align-items: start; padding-top: clamp(60px, 7vw, 120px); }
.uw-steckbrief { position: sticky; top: 135px; }
.uw-steckbrief dl { margin: 0; display: grid; gap: 26px; }
.uw-steckbrief dt { font-size: 17px; font-weight: 600; color: var(--graphit); }
.uw-steckbrief dd { margin: 4px 0 0; color: var(--grau); font-size: 17px; }
.uw-steckbrief dl > div { border-left: 1px solid var(--linie); padding-left: 16px; position: relative; }
.uw-steckbrief dl > div::before { content: ""; position: absolute; left: -1px; top: 0; width: 1px; height: 22px; background: var(--akzent); }
.uw-h2-linie { font-size: var(--u-h2-klein); font-weight: 600; letter-spacing: -.045em; line-height: .98; padding-bottom: 24px; border-bottom: 1px solid var(--linie); margin-bottom: 26px; }
.uw-schritte { list-style: none; margin: clamp(40px, 5vw, 72px) 0 0; padding: 0; }
.uw-schritte li { display: grid; grid-template-columns: clamp(120px, 13vw, 210px) 1fr; gap: 12px; padding: clamp(28px, 3.2vw, 48px) 0; border-top: 1px solid var(--linie); position: relative; align-items: start; }
.uw-linie { position: absolute; left: 0; top: -1px; height: 2px; width: 100%; background: var(--akzent); transform-origin: 0 50%; }
.uw-gross-nr { font-size: clamp(56px, 7vw, 120px); font-weight: 600; letter-spacing: -.05em; line-height: .85; color: var(--graphit); font-variant-numeric: tabular-nums; }
.uw-schritte h3 { font-size: var(--u-h3); font-weight: 600; letter-spacing: -.035em; line-height: 1.04; margin: 4px 0 12px; }
.uw-schritte p { color: var(--u-text-leise); max-width: 620px; }
.uw-schritte a, .uw-stufen a { color: var(--graphit); text-decoration-color: var(--akzent); text-underline-offset: 3px; }
.uw-pk-abschnitt { padding-top: clamp(60px, 7vw, 120px); }
.uw-pk-kopf { max-width: 1100px; }
.uw-pk-kopf .uw-h2 em { display: block; }
.uw-pk-raster { margin-top: clamp(48px, 6vw, 96px); display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.uw-stufen { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--linie); }
.uw-stufen li { position: relative; padding: 4px 0 0 clamp(20px, 2.4vw, 32px); min-height: 62vh; }
.uw-stufen li:last-child { min-height: 40vh; }
.uw-stufen li::before { content: ""; position: absolute; left: -1px; top: 0; width: 2px; height: 100%; background: var(--akzent); transform: scaleY(0); transform-origin: 50% 0; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.uw-stufen h3 { font-size: var(--u-h3); font-weight: 600; letter-spacing: -.035em; line-height: 1.04; margin: 10px 0 12px; color: var(--graphit); transition: color .4s; }
.uw-stufen p { color: var(--u-text-leise); max-width: 440px; }
.uw-stufen li.aktiv::before { transform: scaleY(1); }
.uw-stufen li.aktiv h3 { color: var(--akzent); }
.uw-pk-halter { position: sticky; top: max(120px, calc(50vh - 250px)); }
.u-protokoll {
  background: #fff; border: 1px solid var(--linie); border-radius: var(--u-radius-karte);
  box-shadow: 0 -12px 40px rgba(14,44,38,.07), 0 30px 60px -40px rgba(14,44,38,.35);
  padding: clamp(22px, 2.6vw, 38px);
}
.u-protokoll-kopf { display: flex; justify-content: space-between; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--graphit); color: var(--graphit); }
.uw-pk-punkte { display: flex; gap: 6px; }
.uw-pk-punkte i { width: 7px; height: 7px; border-radius: 50%; background: #C2CAC5; }
.uw-pk-punkte i:first-child { background: var(--akzent); }
.u-protokoll table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.u-protokoll th, .u-protokoll td { text-align: left; font-weight: 500; padding: 15px 10px 15px 0; vertical-align: bottom; }
.u-protokoll thead th { font-size: 13px; color: var(--grau); padding-top: 18px; transition: color .35s, font-weight .35s; }
.u-protokoll thead th:first-child { width: 40%; }
.u-protokoll tbody th { font-size: clamp(14px, 1.05vw, 16px); color: var(--graphit); line-height: 1.3; }
.u-protokoll tbody tr { position: relative; }
.u-protokoll tbody tr { background: linear-gradient(var(--linie), var(--linie)) 0 0 / calc(var(--zug, 1) * 100%) 1px no-repeat; transition: background-size .9s cubic-bezier(.2,.7,.2,1) calc(var(--z) * .08s); }
.u-feld { display: block; height: 22px; border-bottom: 2px solid #C2CAC5; transition: border-color .35s, background-color .35s; }
.u-protokoll-fuss { color: var(--grau); margin-top: 18px; }
.u-protokoll[data-stufe="1"] .s1 .u-feld, .u-protokoll[data-stufe="2"] .s2 .u-feld, .u-protokoll[data-stufe="3"] .s3 .u-feld { border-bottom-color: var(--akzent); background: linear-gradient(0deg, rgba(162,109,58,.12), rgba(162,109,58,0)); }
.u-protokoll[data-stufe="1"] thead .s1, .u-protokoll[data-stufe="2"] thead .s2, .u-protokoll[data-stufe="3"] thead .s3 { color: var(--graphit); font-weight: 700; }
.u-protokoll[data-stufe] .uw-pk-punkte i:first-child { background: #C2CAC5; }
.u-protokoll[data-stufe="1"] .uw-pk-punkte i:nth-child(1), .u-protokoll[data-stufe="2"] .uw-pk-punkte i:nth-child(2), .u-protokoll[data-stufe="3"] .uw-pk-punkte i:nth-child(3) { background: var(--akzent); }
.u-belege { position: relative; background: var(--nacht); color: var(--schnee); padding: var(--u-abstand-oben) var(--rand) var(--u-abstand-unten); overflow: hidden; }
.uw-belege-innen { position: relative; }
.u-belege .etikett { color: var(--akzent-hell); }
.uw-belege-titel { font-size: var(--u-h2-klein); font-weight: 600; letter-spacing: -.045em; line-height: .98; max-width: 1000px; }
.uw-belege-titel em { display: block; font-style: italic; font-weight: 300; letter-spacing: -.02em; }
.uw-belege-karten { margin-top: clamp(48px, 6vw, 88px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2vw, 28px); }
.u-beleg {
  display: flex; flex-direction: column; gap: 18px; padding: clamp(28px, 3.4vw, 52px);
  border: 1px solid rgba(246,248,245,.14); border-radius: var(--u-radius-karte);
  background: rgba(14,44,38,.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.u-beleg h3 { font-size: clamp(26px, 2.6vw, 42px); font-weight: 600; letter-spacing: -.03em; line-height: 1.06; max-width: 520px; }
.uw-hell { color: var(--akzent-hell); }
.uw-leise { color: rgba(246,248,245,.66); }
.u-beleg-wert { display: flex; align-items: baseline; gap: 16px; border-top: 1px solid rgba(246,248,245,.16); padding-top: 18px; margin-top: auto; position: relative; }
.u-beleg-wert::before { content: ""; position: absolute; left: 0; top: -1px; width: 120px; height: 1px; background: var(--akzent); }
.u-beleg-wert strong { font-size: clamp(48px, 5vw, 84px); font-weight: 600; letter-spacing: -.045em; line-height: 1; color: var(--schnee); font-variant-numeric: tabular-nums; }
.u-beleg .pfeil { align-self: start; }
.uw-leistungen .uw-belege-titel { margin: 0; }
.uw-leistung { gap: 14px; }
.uw-leistung .nr { color: var(--akzent-hell); }
.uw-leistung-satz { border-top: 1px solid rgba(246,248,245,.16); padding-top: 18px; margin-top: 10px; position: relative; color: rgba(246,248,245,.86); max-width: 560px;
  font-size: clamp(17px, 1.4vw, 22px); font-weight: 500; letter-spacing: -.012em; line-height: 1.38; }
.uw-leistung-link { align-self: start; color: var(--schnee); font-size: 15px; margin-top: 4px; }
.uw-leistung-satz::before { content: ""; position: absolute; left: 0; top: -1px; width: 120px; height: 1px; background: var(--akzent); }
.uw-drei { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); margin-top: clamp(24px, 3vw, 40px); }
.uw-drei article { border-top: 1px solid var(--linie); padding-top: 22px; position: relative; display: flex; flex-direction: column; gap: 14px; }
.uw-drei article::before { content: ""; position: absolute; left: 0; top: -1px; width: 120px; height: 1px; background: var(--akzent); }
.uw-drei h3 { font-size: clamp(24px, 2.25vw, 34px); font-weight: 500; letter-spacing: -.03em; line-height: 1.06; }
.uw-drei p { color: var(--u-text-leise); max-width: 400px; }
.uw-zusammen { padding-bottom: clamp(56px, 5vw, 80px); }
.uw-fragen { text-align: center; padding-top: clamp(64px, 6vw, 104px); }
.uw-fragen .uw-h2 { margin-left: auto; margin-right: auto; font-size: var(--u-h2-klein); letter-spacing: -.045em; line-height: .98; }
.uw-fragen-liste { max-width: 896px; margin: 0 auto; display: grid; gap: 12px; text-align: left; }
.uw-fragen-liste details { background: #fff; border: 1px solid var(--linie); border-radius: 14px; }
.uw-fragen-liste summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 24px; font-size: clamp(17px, 1.35vw, 20px); font-weight: 600; letter-spacing: -.015em; color: var(--graphit); }
.uw-fragen-liste summary::-webkit-details-marker { display: none; }
.uw-fragen-liste summary::after { content: "+"; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--akzent); color: var(--akzent); display: grid; place-items: center; font-weight: 400; font-size: 20px; line-height: 1; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.uw-fragen-liste details[open] summary::after { transform: rotate(45deg); }
.uw-fragen-liste details p { padding: 0 24px 24px; color: var(--u-text-leise); max-width: 720px; }
.uw-nachbarn { padding-top: clamp(40px, 5vw, 80px); }
.uw-nachbar-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.u-nachbar { display: flex; flex-direction: column; text-decoration: none; background: #fff; border: 1px solid var(--linie); border-radius: var(--u-radius-karte); overflow: hidden; transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s; }
.u-nachbar:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -30px rgba(14,44,38,.45); }
.uw-nachbar-bild { aspect-ratio: 16 / 9; background: var(--nacht); overflow: hidden; }
.uw-nachbar-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.u-nachbar:hover .uw-nachbar-bild img { transform: scale(1.04); }
.uw-nachbar-text { display: flex; align-items: flex-end; padding: 18px; background:
  repeating-linear-gradient(90deg, rgba(246,248,245,0) 0 18px, rgba(246,248,245,.06) 18px 20px, rgba(246,248,245,0) 20px 44px),
  linear-gradient(0deg, rgba(23,69,59,.9), var(--nacht)); }
.uw-nachbar-text .nr { color: var(--akzent-hell); }
.uw-nachbar-koerper { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.uw-nachbar-koerper h3 { font-size: clamp(20px, 1.6vw, 24px); font-weight: 600; letter-spacing: -.025em; line-height: 1.12; }
.uw-nachbar-koerper h3 em { font-style: italic; font-weight: 300; }
.uw-nachbar-koerper .pfeil { margin-top: auto; align-self: start; font-size: 15px; }
@media (max-width: 1180px) {
  .uw-nachbar-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .uw-pk-raster { grid-template-columns: 4fr 8fr; gap: 28px; }
  .u-protokoll { padding: 20px; }
  .u-protokoll thead th { font-size: 12px; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
  .u-protokoll thead th:first-child { width: 34%; }
}
@media (max-width: 900px) {
  .uw-kopf-raster { grid-template-columns: 1fr; gap: 26px; }
  .uw-liefer { grid-template-columns: 1fr; gap: 0; }
  .uw-kapitel { display: contents; }
  .uw-liefer .etikett { order: 1; } .uw-h2-linie { order: 2; } .uw-liefer .uw-satz { order: 3; }
  .uw-steckbrief { position: static; order: 4; margin-top: 32px; }
  .uw-schritte { order: 5; }
  .uw-steckbrief dl { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .uw-belege-karten { grid-template-columns: 1fr; }
  .uw-drei { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .u-kopf { padding-bottom: 32px; }
  .u-titel { font-size: clamp(40px, 11.5vw, 60px); }
  .uw-kopf-rechts { padding-top: 14px; }
  .uw-unterzeile { margin-bottom: 8px; }
  .uw-aufruf { margin-top: 18px; }
  .uw-einstieg { padding-top: 72px; padding-bottom: 24px; }
  .uw-liefer { padding-top: 56px; padding-bottom: 32px; }
  .uw-pk-abschnitt { padding-top: 56px; }
  .uw-schritte { margin-top: 32px; }
  .uw-schritte li { grid-template-columns: 1fr; gap: 10px; }
  .uw-gross-nr { font-size: 52px; }
  .uw-steckbrief dt, .uw-steckbrief dd { font-size: 15px; }
  .uw-steckbrief dl > div { padding-left: 10px; }
  .uw-pk-raster { grid-template-columns: 1fr; }
  .uw-stufen li, .uw-stufen li:last-child { min-height: 0; padding-bottom: 28px; }
  .uw-stufen li::before { transform: scaleY(1); height: 22px; }
  .uw-pk-halter { position: static; }
  .u-protokoll { padding: 18px; }
  .u-protokoll table, .u-protokoll thead, .u-protokoll tbody, .u-protokoll tr, .u-protokoll th, .u-protokoll td { display: block; width: auto; }
  .u-protokoll thead tr, .u-protokoll tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; }
  .u-protokoll thead th:first-child { display: none; }
  .u-protokoll thead th { padding: 14px 0 6px; font-size: 12px; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
  .u-protokoll tbody tr { padding: 10px 0 12px; }
  .u-protokoll tbody th { grid-column: 1 / -1; padding: 0 0 4px; font-size: 14px; }
  .u-protokoll tbody td { padding: 0; }
  .u-feld { height: 10px; }
  .uw-nachbar-raster { grid-template-columns: 1fr; }
  .uw-fragen-liste summary { padding: 18px; }
  .uw-fragen-liste details p { padding: 0 18px 20px; }
}
@media (max-width: 380px) {
  .u-protokoll thead th { font-size: 11px; }
}
html.ruhig .uw-stufen li, html.ruhig .uw-stufen li:last-child { min-height: 0; padding-bottom: 36px; }
html.ruhig .uw-pk-halter { position: static; }
html.ruhig .u-protokoll tbody tr, html:not(.js) .u-protokoll tbody tr { transition: none; }
html.ruhig .uw-stufen li::before { transition: none; }
