/* AMA-Werkzeug. Gestaltung: ruhiges Arbeitsblatt, Haarlinien, eine Akzentfarbe (Flaschengrün).
   Schrift: Ubuntu Sans (variabel in Breite und Stärke), schmal für Zahlen und Etiketten. */
@font-face { font-family: 'Ubuntu Sans'; src: url('fonts/UbuntuSans.ttf') format('truetype'); font-weight: 100 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: 'Ubuntu Sans Mono'; src: url('fonts/UbuntuSansMono.ttf') format('truetype'); font-weight: 400 700; font-display: swap; }

:root {
  --blatt: #f2f3ef; --flaeche: #fbfbf9; --tinte: #171b1a; --grau: #68706c; --hell: #9aa19c; --linie: #d5d8d1; --linie2: #e6e8e2;
  --gruen: #0e4f43; --gruen-hell: #e3ece8; --bernstein: #a8650a; --bernstein-hell: #f6ead4; --rot: #9c2a1f; --rot-hell: #f5e4e0;
  --f1: 8px; --f2: 13px; --f3: 21px; --f4: 34px; --f5: 55px; --f6: 89px;
  --schmal: 'Ubuntu Sans', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { font-size: 15px; }
body { margin: 0; background: var(--blatt); color: var(--tinte); font: 400 1rem/1.5 'Ubuntu Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gruen); outline-offset: 2px; }

.rahmen { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.leiste { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; border-right: 1px solid var(--linie); padding: var(--f3) 0 0; overflow: auto; }
.marke { display: block; padding: 0 var(--f3) var(--f3); text-decoration: none; }
.marke b { display: block; font-weight: 700; font-stretch: 75%; font-size: 2.4rem; line-height: 1; letter-spacing: .02em; color: var(--gruen); }
.marke span { color: var(--grau); font-size: .87rem; }

/* Die fünf Arbeitsschritte als Weg: eine senkrechte Haarlinie mit Stationen */
#nav { padding: var(--f2) 0 var(--f3); border-top: 1px solid var(--linie); }
#nav a { position: relative; display: grid; grid-template-columns: 34px 1fr auto; align-items: baseline; padding: 9px var(--f3) 9px var(--f3); text-decoration: none; color: var(--grau); }
#nav a::before { content: ''; position: absolute; left: calc(var(--f3) + 5px); top: 0; bottom: 0; width: 1px; background: var(--linie); }
#nav a:first-child::before { top: 50%; } #nav a:last-child::before { bottom: 50%; }
#nav a i { position: relative; width: 11px; height: 11px; border: 1px solid var(--hell); border-radius: 50%; background: var(--blatt); align-self: center; }
#nav a b { font-weight: 500; }
#nav a small { font-stretch: 80%; font-size: .8rem; color: var(--hell); font-variant-numeric: tabular-nums; }
#nav a:hover { color: var(--tinte); }
#nav a[aria-current] { color: var(--tinte); }
#nav a[aria-current] i { background: var(--gruen); border-color: var(--gruen); }
#nav a[aria-current] b { font-weight: 650; }

.werk { margin-top: auto; border-top: 1px solid var(--linie); padding: var(--f2) var(--f3) var(--f3); font-size: .87rem; }
.werk h2 { font-size: .8rem; font-weight: 600; color: var(--grau); margin-bottom: 6px; }
.werk dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; }
.werk dt { color: var(--grau); } .werk dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 550; }
.werk .jetzt { margin: 8px 0 0; padding: 0; list-style: none; color: var(--grau); }
.werk .jetzt li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.werk .jetzt li::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gruen); margin-right: 7px; animation: puls 1.6s ease-in-out infinite; }
@keyframes puls { 50% { opacity: .25; } }
.werk .zeile { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

main { padding: var(--f4) clamp(var(--f3), 3.4vw, var(--f5)) var(--f6); min-width: 0; }
main:focus { outline: none; }
.kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--f3); flex-wrap: wrap; padding-bottom: var(--f3); border-bottom: 1px solid var(--tinte); margin-bottom: var(--f3); }
.kopf h1 { font-size: 2.1rem; font-weight: 300; font-stretch: 88%; line-height: 1.1; letter-spacing: -.01em; }
.kopf p { color: var(--grau); max-width: 62ch; margin-top: 6px; }
.kopf .rechts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.knopf { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border: 1px solid var(--tinte); background: transparent; cursor: pointer; text-decoration: none; white-space: nowrap; font-weight: 500; transition: background .15s, color .15s; }
.knopf:hover { background: var(--tinte); color: var(--blatt); }
.knopf.voll { background: var(--gruen); border-color: var(--gruen); color: #fff; }
.knopf.voll:hover { background: #0a3d34; }
.knopf.leise { border-color: var(--linie); color: var(--grau); }
.knopf.leise:hover { background: transparent; color: var(--tinte); border-color: var(--tinte); }
.knopf.klein { height: 28px; padding: 0 10px; font-size: .87rem; }
.knopf[disabled] { opacity: .4; pointer-events: none; }

.feld { display: grid; gap: 4px; }
.feld > span { font-size: .8rem; color: var(--grau); font-weight: 500; }
input[type=text], input[type=search], input[type=date], input[type=number], select, textarea { height: 34px; padding: 0 10px; border: 1px solid var(--linie); background: var(--flaeche); border-radius: 0; min-width: 0; }
textarea { height: auto; padding: 10px; line-height: 1.55; resize: vertical; width: 100%; }
input:focus, select:focus, textarea:focus { border-color: var(--gruen); outline: none; }

.marke-klein { display: inline-block; padding: 1px 7px; font-size: .8rem; font-stretch: 85%; font-weight: 550; border: 1px solid currentColor; line-height: 1.45; white-space: nowrap; }
.s-hoch { color: var(--gruen); background: var(--gruen-hell); } .s-mittel { color: var(--bernstein); background: var(--bernstein-hell); } .s-gering, .s-offen { color: var(--grau); }
.s-fehler { color: var(--rot); background: var(--rot-hell); } .s-laeuft { color: var(--gruen); } .s-fertig { color: var(--gruen); background: var(--gruen-hell); }
.s-wartet, .s-uebersprungen { color: var(--hell); }
.leer { padding: var(--f5) 0; color: var(--grau); max-width: 56ch; }
.leer b { display: block; color: var(--tinte); font-size: 1.2rem; font-weight: 500; margin-bottom: 6px; }

/* ── Projekte */
.neu { display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr) auto; gap: var(--f2); align-items: end; padding: var(--f3); border: 1px solid var(--linie); background: var(--flaeche); margin-bottom: var(--f4); }
.projekte { display: grid; gap: 0; border-top: 1px solid var(--linie); }
.projekt { display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 2.618fr) auto; gap: var(--f3); align-items: center; padding: var(--f3) 0; border-bottom: 1px solid var(--linie); }
.projekt h2 { font-size: 1.35rem; font-weight: 500; }
.projekt h2 a { text-decoration: none; } .projekt h2 a:hover { color: var(--gruen); }
.projekt .unter { color: var(--grau); font-size: .87rem; margin-top: 2px; }
.zahlen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--f2); }
.zahlen div b { display: block; font-size: 1.6rem; font-weight: 300; font-stretch: 80%; line-height: 1.1; font-variant-numeric: tabular-nums; }
.zahlen div span { font-size: .8rem; color: var(--grau); }
.balken { grid-column: 1 / -1; height: 3px; background: var(--linie2); margin-top: 4px; position: relative; }
.balken i { position: absolute; inset: 0 auto 0 0; background: var(--gruen); transition: width .6s ease; }

/* ── Kandidaten */
.filter { display: flex; gap: var(--f2); flex-wrap: wrap; align-items: end; margin-bottom: var(--f3); }
.reiter { display: inline-flex; border: 1px solid var(--linie); }
.reiter button { height: 34px; padding: 0 13px; border: 0; border-right: 1px solid var(--linie); background: transparent; cursor: pointer; color: var(--grau); }
.reiter button:last-child { border-right: 0; }
.reiter button[aria-pressed=true] { background: var(--tinte); color: var(--blatt); }
.karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: var(--f3) var(--f3); }
.karte { position: relative; display: flex; flex-direction: column; background: var(--flaeche); border: 1px solid var(--linie); transition: border-color .15s; }
.karte.gewaehlt { border-color: var(--gruen); box-shadow: inset 0 0 0 1px var(--gruen); }
.karte .bild { position: relative; display: block; aspect-ratio: 1.618; overflow: hidden; background: var(--linie2); border-bottom: 1px solid var(--linie); cursor: zoom-in; }
.karte .bild > img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.karte .handy { position: absolute; right: 13px; bottom: -1px; width: 21%; aspect-ratio: .5; border: 1px solid var(--tinte); border-bottom: 0; background: #fff; overflow: hidden; }
.karte .handy img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.karte .text { padding: var(--f2) var(--f2) 0; display: grid; grid-template-columns: 1fr auto; gap: 4px var(--f2); }
.karte h3 { font-size: 1.07rem; font-weight: 600; line-height: 1.25; }
.karte .wo { grid-column: 1; color: var(--grau); font-size: .87rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.karte .punkte { grid-row: 1 / span 2; grid-column: 2; text-align: right; }
.karte .punkte b { display: block; font-size: 2.1rem; font-weight: 300; font-stretch: 78%; line-height: .95; font-variant-numeric: tabular-nums; }
.karte ul { grid-column: 1 / -1; margin: 6px 0 0; padding: 8px 0 0; list-style: none; border-top: 1px solid var(--linie2); font-size: .87rem; color: var(--grau); columns: 2; column-gap: var(--f2); }
.karte li { break-inside: avoid; padding-left: 10px; text-indent: -10px; }
.karte li::before { content: '·'; display: inline-block; width: 10px; text-indent: 0; }
.karte .fuss { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; padding: var(--f2); align-items: center; }
.karte .fuss .knopf { justify-content: center; flex: 1; } .karte .fuss .knopf:first-child { flex: 1 1 100%; }
.auswahlleiste { position: sticky; bottom: 0; z-index: 5; margin: var(--f4) calc(-1 * clamp(var(--f3), 3.4vw, var(--f5))) calc(-1 * var(--f6)); padding: var(--f2) clamp(var(--f3), 3.4vw, var(--f5)); background: var(--tinte); color: var(--blatt); display: flex; align-items: center; gap: var(--f3); justify-content: space-between; }
.auswahlleiste .knopf { border-color: var(--blatt); } .auswahlleiste .knopf:hover { background: var(--blatt); color: var(--tinte); }
.auswahlleiste .knopf.voll { background: #fff; color: var(--gruen); border-color: #fff; }
.seiten { display: flex; gap: 8px; align-items: center; margin-top: var(--f3); color: var(--grau); }

/* ── Rework */
.site { border-top: 1px solid var(--linie); padding: var(--f3) 0 var(--f3); }
.site:last-child { border-bottom: 1px solid var(--linie); }
.site > header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr) auto; gap: var(--f3); align-items: center; }
.site h2 { font-size: 1.35rem; font-weight: 500; }
.site .unter { color: var(--grau); font-size: .87rem; }
/* Fortschritt: fünf Stationen auf einer Haarlinie */
.weg { display: grid; grid-template-columns: repeat(5, 1fr); position: relative; }
.weg::before { content: ''; position: absolute; left: 10%; right: 10%; top: 6px; height: 1px; background: var(--linie); }
.weg div { position: relative; text-align: center; font-size: .8rem; color: var(--hell); }
.weg i { display: block; width: 13px; height: 13px; margin: 0 auto 6px; border-radius: 50%; border: 1px solid var(--hell); background: var(--blatt); position: relative; }
.weg .fertig { color: var(--tinte); } .weg .fertig i { background: var(--gruen); border-color: var(--gruen); }
.weg .laeuft { color: var(--gruen); font-weight: 600; } .weg .laeuft i { border-color: var(--gruen); box-shadow: 0 0 0 4px var(--gruen-hell); animation: puls 1.6s ease-in-out infinite; }
.weg .fehler { color: var(--rot); font-weight: 600; } .weg .fehler i { background: var(--rot); border-color: var(--rot); }
.weg .uebersprungen i { border-style: dashed; }
.site .mehr { margin-top: var(--f3); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); gap: var(--f4); }
table { width: 100%; border-collapse: collapse; font-size: .87rem; }
th { text-align: left; font-weight: 500; color: var(--grau); font-size: .8rem; padding: 0 8px 6px 0; border-bottom: 1px solid var(--linie); }
td { padding: 7px 8px 7px 0; border-bottom: 1px solid var(--linie2); vertical-align: top; }
td.eng { white-space: nowrap; width: 1%; }
.entwuerfe { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--f3); }
.entwurf { border: 1px solid var(--linie); background: var(--flaeche); display: flex; flex-direction: column; }
.entwurf.frei { border-color: var(--gruen); box-shadow: inset 0 0 0 1px var(--gruen); }
.entwurf .vorschau { position: relative; display: block; aspect-ratio: 1.6; overflow: hidden; border-bottom: 1px solid var(--linie); background: var(--linie2); }
.entwurf .vorschau img { width: 100%; display: block; }
.entwurf .vorschau .handy { position: absolute; right: 8px; bottom: 0; width: 20%; border: 1px solid var(--tinte); border-bottom: 0; }
.entwurf .innen { padding: 10px 12px 12px; display: grid; gap: 8px; }
.entwurf h3 { font-size: 1rem; font-weight: 600; }
.entwurf .reihe { display: flex; gap: 6px; flex-wrap: wrap; }
.h3 { font-size: .8rem; font-weight: 600; color: var(--grau); margin: 0 0 8px; }

/* ── Kontakt */
.zweispalt { display: grid; grid-template-columns: minmax(250px, 1fr) minmax(0, 2.618fr); gap: 0; border: 1px solid var(--linie); background: var(--flaeche); min-height: 60vh; }
.liste { border-right: 1px solid var(--linie); overflow: auto; max-height: calc(100vh - 200px); }
.liste button { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; width: 100%; text-align: left; padding: 11px var(--f2); border: 0; border-bottom: 1px solid var(--linie2); background: transparent; cursor: pointer; }
.liste button b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste button small { grid-column: 1 / -1; color: var(--grau); }
.liste button[aria-current] { background: var(--gruen-hell); box-shadow: inset 3px 0 0 var(--gruen); }
.detail { padding: var(--f3) var(--f4) var(--f4); display: grid; gap: var(--f3); align-content: start; }
.detail h2 { font-size: 1.6rem; font-weight: 400; }
.raster4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--f2); align-items: end; }
.variante { display: grid; gap: 8px; }
.faellig { color: var(--bernstein); font-weight: 600; }

/* ── Dialog, Hinweis */
dialog { border: 1px solid var(--tinte); padding: 0; background: var(--flaeche); max-width: min(1100px, 94vw); max-height: 92vh; }
dialog::backdrop { background: rgba(23, 27, 26, .55); }
dialog .dk { display: flex; justify-content: space-between; align-items: center; gap: var(--f3); padding: 10px var(--f2) 10px var(--f3); border-bottom: 1px solid var(--linie); position: sticky; top: 0; background: var(--flaeche); z-index: 1; }
dialog .di { padding: var(--f3); }
dialog img { max-width: 100%; display: block; }
dialog pre { font: 12px/1.5 'Ubuntu Sans Mono', monospace; white-space: pre-wrap; word-break: break-word; margin: 0; max-width: 900px; }
#hinweis { position: fixed; left: 50%; bottom: 21px; transform: translate(-50%, 20px); background: var(--tinte); color: var(--blatt); padding: 9px 16px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 20; }
#hinweis.an { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 900px) {
  .rahmen { grid-template-columns: 1fr; }
  .leiste { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--linie); padding-top: var(--f2); }
  .marke { padding-bottom: var(--f2); } .marke b { font-size: 1.8rem; display: inline; } .marke span { margin-left: 8px; }
  #nav { display: flex; overflow-x: auto; padding: 0; }
  #nav a { grid-template-columns: auto; padding: 10px 14px; white-space: nowrap; } #nav a::before, #nav a i, #nav a small { display: none; }
  #nav a[aria-current] { box-shadow: inset 0 -2px 0 var(--gruen); }
  .werk { margin: 0; }
  .neu, .projekt, .site > header, .site .mehr, .zweispalt { grid-template-columns: 1fr; }
  .liste { border-right: 0; border-bottom: 1px solid var(--linie); max-height: 240px; }
  .detail { padding: var(--f3) var(--f2); }
  .zahlen { grid-template-columns: repeat(3, 1fr); }
  .karten { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Nachbesserung nach Sichtung der Bildschirmfotos */
.weg .laeuft i { background: var(--gruen-hell); border-width: 2px; }
.auswahlleiste span { min-width: 0; }
@media (max-width: 900px) {
  .werk { padding: 8px var(--f2); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 13px; }
  .werk h2, .werk .jetzt { display: none; }
  .werk dl { display: flex; flex-wrap: wrap; gap: 2px 13px; flex: 1; }
  .werk dl dt::after { content: ':'; } .werk dl dd { margin-right: 4px; }
  .werk dl dt:nth-of-type(n+3), .werk dl dd:nth-of-type(n+3) { display: none; }
  .werk .zeile { margin: 0; }
  main { padding: var(--f3) var(--f2) var(--f6); }
  .kopf h1 { font-size: 1.7rem; }
  .filter .reiter { max-width: 100%; overflow-x: auto; } .reiter button { white-space: nowrap; }
  .filter .feld { flex: 1 1 140px; }
  .auswahlleiste { margin: var(--f4) calc(-1 * var(--f2)) calc(-1 * var(--f6)); padding: 10px var(--f2); flex-direction: column; align-items: stretch; gap: 8px; font-size: .87rem; }
  .auswahlleiste .knopf { justify-content: center; }
  .weg div { font-size: .72rem; }
  table { display: block; overflow-x: auto; }
}
.site .mehr.eins { grid-template-columns: 1fr; gap: var(--f3); }
.site .mehr.eins .entwuerfe { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
@media (max-width: 900px) { .werk dl { flex-wrap: nowrap; white-space: nowrap; align-items: baseline; } .werk dl dd { text-align: left; } }

/* Kontakt: Auswertung der drei Ansätze, Verlauf */
.ansaetze { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--linie); margin-bottom: var(--f3); background: var(--flaeche); }
.ansatz { padding: var(--f2) var(--f3); border-right: 1px solid var(--linie); display: grid; gap: 4px; align-content: start; }
.ansatz:last-child { border-right: 0; }
.ansatz b { font-size: 1.07rem; font-weight: 650; } .ansatz span { color: var(--grau); font-size: .87rem; }
.ansatz dl { display: grid; grid-template-columns: repeat(5, auto); gap: 0 var(--f2); margin: 8px 0 0; justify-content: start; }
.ansatz dt { grid-row: 2; font-size: .72rem; color: var(--grau); } .ansatz dd { grid-row: 1; margin: 0; font-size: 1.6rem; font-weight: 300; font-stretch: 80%; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ansatz dd small { font-size: .72rem; color: var(--grau); }
.mail { border-top: 1px solid var(--linie2); padding: 8px 0; } .mail summary { cursor: pointer; } .mail pre { font: inherit; white-space: pre-wrap; margin: 8px 0 0; padding: 13px; background: var(--blatt); border-left: 2px solid var(--linie); }
.mail.ein pre { border-left-color: var(--gruen); }
@media (max-width: 900px) { .ansaetze { grid-template-columns: 1fr; } .ansatz { border-right: 0; border-bottom: 1px solid var(--linie); } }

/* ═══════════ Auftritt AMA (Art-Media Agency): Schwarz und Weiß, sportlich, groß gesetzt ═══════════
   Haltung „adidas": harte Kontraste, enge fette Versalien, klare Kanten, eine feine Linie als Markenzeichen.
   Farbe kommt nur aus dem Inhalt (Bildschirmfotos, Entwürfe) und aus zwei Signalen (Rot für Fehler, Grün für fertig). */
:root {
  --blatt: #ffffff; --flaeche: #ffffff; --tinte: #000000; --grau: #6b6b6b; --hell: #a3a3a3; --linie: #000000; --linie2: #e4e4e4;
  --gruen: #000000; --gruen-hell: #f1f1f1; --bernstein: #000000; --bernstein-hell: #f1f1f1; --rot: #d40000; --rot-hell: #ffe9e9; --ok: #00a650;
}
body { font-weight: 400; letter-spacing: 0; }
::selection { background: #000; color: #fff; }

/* Leiste: schwarz, Logo weiß, Wegpunkte als große Versalien */
.rahmen { grid-template-columns: 264px minmax(0, 1fr); }
.leiste { background: #000; color: #fff; border-right: 0; padding-top: var(--f4); --logo-grund: #000; }
.marke { padding: 0 var(--f4) var(--f4); }
.marke .logo { width: 132px; height: auto; display: block; color: #fff; }
.marke span { display: block; margin-top: 10px; color: #8a8a8a; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; }
#nav { border-top: 1px solid #2a2a2a; padding: var(--f3) 0; }
#nav a { grid-template-columns: 1fr auto; padding: 11px var(--f4); color: #8a8a8a; transition: color .15s, padding-left .2s; }
#nav a::before, #nav a i { display: none; }
#nav a b { font-weight: 800; font-stretch: 75%; font-size: 1.5rem; line-height: 1; text-transform: uppercase; letter-spacing: .01em; }
#nav a small { color: #000; background: #fff; padding: 1px 6px; font-weight: 700; align-self: center; }
#nav a small:empty { display: none; }
#nav a:hover { color: #fff; padding-left: calc(var(--f4) + 6px); }
#nav a[aria-current] { color: #fff; box-shadow: inset 5px 0 0 #fff; }
#nav a[aria-current] b { font-weight: 800; }
.werk { border-top: 1px solid #2a2a2a; padding: var(--f3) var(--f4) var(--f4); }
.werk h2 { color: #8a8a8a; text-transform: uppercase; letter-spacing: .18em; font-size: .68rem; }
.werk dt { color: #8a8a8a; } .werk dd { color: #fff; }
.werk .jetzt { color: #bdbdbd; } .werk .jetzt li::before { background: #fff; }
.werk .knopf { border-color: #3a3a3a; color: #bdbdbd; } .werk .knopf:hover { background: #fff; color: #000; border-color: #fff; }

/* Kopf jeder Seite: Titel als Plakatzeile */
main { padding: var(--f5) clamp(var(--f3), 4vw, var(--f6)) var(--f6); }
.kopf { border-bottom: 5px solid #000; padding-bottom: var(--f3); margin-bottom: var(--f4); align-items: flex-end; }
.kopf h1 { font-weight: 800; font-stretch: 75%; font-size: clamp(3rem, 7vw, 6.2rem); line-height: .86; text-transform: uppercase; letter-spacing: -.01em; }
.kopf p { color: #000; max-width: 58ch; margin-top: var(--f2); font-size: 1.02rem; }
h2 { letter-spacing: -.005em; }
.h3 { text-transform: uppercase; letter-spacing: .16em; font-size: .68rem; color: #000; font-weight: 700; }

/* Knöpfe: schwarzer Block; beim Überfahren springt ein Rahmen als Schatten heraus */
.knopf { border: 2px solid #000; height: 40px; padding: 0 18px; font-weight: 700; font-stretch: 85%; text-transform: uppercase; letter-spacing: .06em; font-size: .82rem; background: #fff; color: #000; transition: transform .12s, box-shadow .12s, background .12s, color .12s; }
.knopf:hover { background: #fff; color: #000; transform: translate(-3px, -3px); box-shadow: 3px 3px 0 0 #000; }
.knopf:active { transform: none; box-shadow: none; }
.knopf.voll { background: #000; color: #fff; border-color: #000; }
.knopf.voll:hover { background: #000; color: #fff; box-shadow: 3px 3px 0 0 #9a9a9a; }
.knopf.leise { border: 2px solid var(--linie2); color: #000; background: transparent; } .knopf.leise:hover { border-color: #000; background: #fff; color: #000; }
.knopf.klein { height: 32px; padding: 0 12px; font-size: .74rem; }
.knopf[disabled] { opacity: .3; transform: none; box-shadow: none; }
input[type=text], input[type=search], input[type=date], input[type=number], input[type=password], select, textarea { height: 40px; border: 2px solid #000; background: #fff; }
textarea { height: auto; }
input:focus, select:focus, textarea:focus { border-color: #000; box-shadow: 3px 3px 0 0 #000; }
:focus-visible { outline: 3px solid #000; outline-offset: 3px; }
.feld > span { color: #000; font-weight: 600; }

/* Marken: Umriss = offen, Fläche = erreicht */
.marke-klein { border: 2px solid #000; font-weight: 800; font-stretch: 75%; text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; padding: 2px 7px; color: #000; background: #fff; }
.s-hoch, .s-fertig { background: #000; color: #fff; border-color: #000; }
.s-mittel { background: #fff; color: #000; }
.s-gering, .s-offen, .s-wartet, .s-uebersprungen { border-color: var(--hell); color: var(--grau); background: #fff; }
.s-laeuft { background: #fff; color: #000; animation: puls 1.4s ease-in-out infinite; }
.s-fehler { background: var(--rot); border-color: var(--rot); color: #fff; }

/* Projekte */
.neu { border: 2px solid #000; background: #fff; padding: var(--f3); }
.projekte { border-top: 0; } .projekt { border-bottom: 2px solid #000; padding: var(--f4) 0; }
.projekt h2 { font-weight: 800; font-stretch: 75%; font-size: 2.1rem; text-transform: uppercase; line-height: 1; }
.projekt h2 a:hover { color: #000; text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 6px; }
.zahlen div b { font-weight: 800; font-stretch: 75%; font-size: 2.6rem; }
.zahlen div span { color: #000; text-transform: uppercase; letter-spacing: .1em; font-size: .64rem; font-weight: 600; }
.balken { height: 6px; background: var(--linie2); } .balken i { background: #000; }

/* Kandidaten: Bildschirmfotos erst grau, in Farbe beim Überfahren; Punktzahl als Plakatziffer */
.reiter { border: 2px solid #000; } .reiter button { border-right: 2px solid #000; color: #000; font-weight: 700; font-stretch: 85%; text-transform: uppercase; letter-spacing: .05em; font-size: .78rem; height: 36px; }
.reiter button[aria-pressed=true] { background: #000; color: #fff; }
.karten { gap: var(--f4) var(--f3); }
.karte { border: 0; border-top: 5px solid #000; background: #fff; transition: transform .18s; }
.karte:hover { transform: translateY(-4px); }
.karte.gewaehlt { box-shadow: none; border-top-color: #000; outline: 3px solid #000; outline-offset: 6px; }
.karte .bild { border: 0; aspect-ratio: 1.618; }
.karte .bild > img, .karte .handy img { filter: grayscale(1) contrast(1.05); transition: filter .35s; }
.karte:hover .bild > img, .karte:hover .handy img, .karte.gewaehlt .bild > img { filter: none; }
.karte .handy { border: 3px solid #000; border-bottom: 0; right: var(--f2); }
.karte .text { padding: var(--f2) 0 0; }
.karte h3 { font-weight: 800; font-stretch: 75%; font-size: 1.5rem; text-transform: uppercase; line-height: 1.02; }
.karte .punkte b { font-weight: 800; font-stretch: 75%; font-size: 3.4rem; line-height: .8; }
.karte .wo { color: #000; }
.karte ul { border-top: 1px solid #000; color: #000; }
.karte .fuss { padding: var(--f2) 0 0; }
.auswahlleiste { background: #000; border-top: 0; } .auswahlleiste .knopf.voll { background: #fff; color: #000; border-color: #fff; } .auswahlleiste .knopf.voll:hover { box-shadow: 3px 3px 0 0 #777; }

/* Rework: Stationen als Balken */
.site { border-top: 2px solid #000; } .site:last-child { border-bottom: 2px solid #000; }
.site h2 { font-weight: 800; font-stretch: 75%; font-size: 1.9rem; text-transform: uppercase; line-height: 1; }
.site .unter { color: #000; }
.weg::before { display: none; } .weg { gap: 4px; }
.weg div { text-align: left; color: var(--hell); text-transform: uppercase; letter-spacing: .08em; font-size: .64rem; font-weight: 700; border-top: 6px solid var(--linie2); padding-top: 6px; }
.weg i { display: none; }
.weg .fertig { color: #000; border-color: #000; } .weg .laeuft { color: #000; border-color: #000; animation: puls 1.4s ease-in-out infinite; } .weg .fehler { color: var(--rot); border-color: var(--rot); }
.weg .uebersprungen { border-top-style: dashed; }
th { color: #000; text-transform: uppercase; letter-spacing: .1em; font-size: .64rem; border-bottom: 2px solid #000; } td { border-bottom: 1px solid var(--linie2); }
.entwurf { border: 2px solid #000; transition: transform .15s, box-shadow .15s; } .entwurf:hover { transform: translate(-4px, -4px); box-shadow: 4px 4px 0 0 #000; }
.entwurf.frei { box-shadow: 0 0 0 4px #000; } .entwurf .vorschau { border-bottom: 2px solid #000; }
.entwurf h3 { font-weight: 800; font-stretch: 75%; text-transform: uppercase; font-size: 1.15rem; }

/* Kontakt */
.ansaetze { border: 2px solid #000; } .ansatz { border-right: 2px solid #000; } .ansatz b { font-weight: 800; font-stretch: 75%; font-size: 1.5rem; text-transform: uppercase; }
.ansatz span { color: #000; } .ansatz dd { font-weight: 800; font-stretch: 75%; font-size: 2.2rem; } .ansatz dt { text-transform: uppercase; letter-spacing: .08em; font-size: .6rem; color: #000; font-weight: 600; }
.zweispalt { border: 2px solid #000; } .liste { border-right: 2px solid #000; }
.liste button { border-bottom: 1px solid var(--linie2); } .liste button[aria-current] { background: #000; color: #fff; box-shadow: none; }
.liste button[aria-current] small { color: #bdbdbd; } .liste button[aria-current] .marke-klein { border-color: #fff; }
.detail h2 { font-weight: 800; font-stretch: 75%; font-size: 2.4rem; text-transform: uppercase; line-height: 1; }
.faellig { color: var(--rot); }
.mail pre { background: #f4f4f4; border-left: 5px solid var(--linie2); } .mail.ein pre { border-left-color: #000; }
.leer b { font-weight: 800; font-stretch: 75%; font-size: 1.9rem; text-transform: uppercase; }

/* Dialog, Hinweis, Anmeldung */
dialog { border: 3px solid #000; } dialog .dk { border-bottom: 2px solid #000; } dialog .dk b { font-weight: 800; font-stretch: 75%; text-transform: uppercase; font-size: 1.2rem; }
dialog::backdrop { background: rgba(0, 0, 0, .7); }
#hinweis { background: #000; font-weight: 600; border: 2px solid #fff; }
body.anmeldung { background: #000; color: #fff; --logo-grund: #000; }
body.anmeldung p { color: #8a8a8a; letter-spacing: .22em; text-transform: uppercase; font-size: .72rem; }
body.anmeldung img { filter: invert(1); }
body.anmeldung .feld > span { color: #fff; } body.anmeldung input { border-color: #fff; background: #000; color: #fff; }
body.anmeldung .knopf.voll { background: #fff; color: #000; border-color: #fff; }
.ama-k-knopf { font-weight: 700 !important; text-transform: uppercase; letter-spacing: .06em !important; }

@media (max-width: 900px) {
  .rahmen { grid-template-columns: 1fr; }
  .leiste { padding-top: var(--f2); border-bottom: 0; }
  .marke { padding: 0 var(--f2) var(--f2); display: flex; align-items: center; gap: var(--f2); } .marke .logo { width: 84px; } .marke span { margin: 0; }
  #nav a { padding: 12px 14px; } #nav a b { font-size: 1.05rem; } #nav a[aria-current] { box-shadow: inset 0 -4px 0 #fff; }
  .werk { border-top: 1px solid #2a2a2a; }
  .kopf h1 { font-size: 2.9rem; }
  .ansatz { border-right: 0; border-bottom: 2px solid #000; } .liste { border-right: 0; border-bottom: 2px solid #000; }
}
.werk .knopf, .werk .knopf.leise { background: transparent; color: #fff; border: 2px solid #4a4a4a; } .werk .knopf:hover, .werk .knopf.leise:hover { background: #fff; color: #000; border-color: #fff; box-shadow: none; transform: none; }
.werk dd[style*="rot"] { color: #ff5a5a !important; }

/* Navigation in Gruppen; Bildschirmfotos der Kandidaten wieder in Farbe (Schwarz-Weiß war unübersichtlich) */
#nav .gruppe { margin: var(--f3) var(--f4) 6px; padding-top: var(--f2); border-top: 1px solid #2a2a2a; color: #6f6f6f; font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; }
#nav .gruppe:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
#nav a { padding-top: 7px; padding-bottom: 7px; } #nav a b { font-size: 1.3rem; }
.karte .bild > img, .karte .handy img { filter: none; }
.karte .fuss .knopf { flex: 1 1 auto; }
@media (max-width: 900px) { #nav .gruppe { display: none; } }
.werk .klick { background: none; border: 0; border-bottom: 1px solid #777; color: #fff; font: inherit; font-weight: 550; cursor: pointer; padding: 0; }
.werk .klick:hover { border-color: #fff; }
.ama-k-knopf { bottom: 76px !important; }
.heute { display: grid; grid-template-columns: 1fr 1fr; gap: var(--f3); margin-bottom: var(--f3); } .heute > div { border: 2px solid #000; padding: var(--f2) var(--f3); }
.nachfass { border-top: 5px solid #000; padding-top: var(--f2); }
@media (max-width: 900px) { .heute { grid-template-columns: 1fr; } }
/* Leiste: mit vier Gruppen kompakter, damit die Werkbank ohne Scrollen sichtbar bleibt */
#nav a b { font-size: 1.12rem; } #nav a { padding-top: 5px; padding-bottom: 5px; } #nav .gruppe { margin-top: var(--f2); }
.karte .eignung { display: flex; gap: 4px; margin-top: 8px; }