/* Layout: Startseite als durchgehende Bühne. Hero mit lebendigem "Abgleich" (Anfrage trifft Profil), dann Branchen, Ablauf, Live-Projekte, persönlicher Ansprechpartner, dunkler Abschluss. Bewusst eine feste Farbwelt (hell mit einem dunklen Band), unabhängig vom Systemmodus. */
:root {
  color-scheme: light;
  --papier: #faf7f8; --tinte: #1d1418; --grau: #6e5f66; --linie: #e8dfe3; --flaeche: #ffffff;
  --wein: #961e44; --tief: #240811; --rosa: #d24a8a; --rosa-hell: #f6dbe7;
  --display: 'Habibi', Georgia, 'Times New Roman', serif;
  --label: 'Strait', 'Arial Narrow', sans-serif;
  --text: 'Hanken Grotesk', 'Segoe UI', Helvetica, Arial, sans-serif;
  --daten: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}
* { box-sizing: border-box; }
body { background: var(--papier); color: var(--tinte); font: 17px/1.6 var(--text); }
.innen { max-width: 1160px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--rosa); outline-offset: 3px; }
.eyebrow { font: 400 14px/1 var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--wein); }
h1, h2 { font-family: var(--display); font-weight: 400; text-wrap: balance; margin: 0; }
h2 { font-size: clamp(30px, 4.2vw, 46px); line-height: 1.1; }

/* Kopfzeile mit neuer Wortmarke */
.kopf { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: rgb(250 247 248 / .9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linie); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--papier); }
.kopf .innen { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; }
.wm { display: inline-grid; gap: 3px; line-height: 1; color: var(--wein); text-decoration: none; }
.wm b { font: 400 25px/1 var(--display); letter-spacing: .03em; }
.wm small { display: flex; align-items: center; gap: 6px; font: 400 8.5px/1 var(--label); letter-spacing: .16em; text-transform: uppercase; }
.wm small::before, .wm small::after { content: ""; flex: 1; height: 1px; background: currentColor; }
.kopf nav { display: flex; align-items: center; gap: 26px; font-size: 15px; }
.kopf nav a { text-decoration: none; color: var(--grau); }
.kopf nav a:hover { color: var(--tinte); }
.knopf { display: inline-flex; align-items: center; gap: 8px; padding: 13px 20px; border-radius: 999px; font: 600 15px/1 var(--text); text-decoration: none; border: 1px solid transparent; transition: transform .15s ease, background .15s ease; }
.knopf:hover { transform: translateY(-1px); }
.knopf.voll { background: var(--wein); color: #fff; }
.knopf.voll:hover { background: #7d1838; }
.knopf.rand { border-color: var(--tinte); color: var(--tinte); }
.knopf.klein { padding: 10px 16px; font-size: 14px; }

/* Hero */
.hero { padding-block: 72px 88px; }
.hero .innen { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(42px, 6.4vw, 80px); line-height: 1.02; letter-spacing: -.01em; margin-block: 18px 22px; }
.hero h1 em { font-style: normal; color: var(--wein); position: relative; white-space: nowrap; }
.hero h1 em::after { content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: .09em; background: var(--rosa); opacity: .5; border-radius: 2px; }
.hero .unter { font-size: 19px; color: var(--grau); max-width: 50ch; margin: 0 0 30px; }
.hero .knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
.belege { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--linie); font-size: 14px; color: var(--grau); }
.belege b { color: var(--tinte); font-weight: 600; }

/* Signatur-Element: Anfrage trifft Profil */
.abgleich { position: relative; display: grid; gap: 14px; }
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 18px; padding: 20px 22px; box-shadow: 0 1px 2px rgb(36 8 17 / .04), 0 18px 40px -18px rgb(36 8 17 / .18); }
.karte .art { font: 500 11px/1 var(--daten); letter-spacing: .08em; text-transform: uppercase; color: var(--grau); display: flex; justify-content: space-between; gap: 10px; }
.karte h3 { font: 600 19px/1.3 var(--text); margin: 10px 0 4px; }
.karte .meta { font: 13px/1.5 var(--daten); color: var(--grau); margin: 0 0 12px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font: 500 12px/1 var(--daten); padding: 6px 9px; border-radius: 7px; background: #f3eef0; color: #4f4248; }
.tag.t { background: var(--rosa-hell); color: var(--wein); }
.profil { margin-left: 12%; }
.verbindung { display: flex; align-items: center; gap: 12px; margin-left: 6%; }
.verbindung .linie { flex: 1; height: 2px; background: linear-gradient(90deg, var(--rosa), var(--wein)); border-radius: 2px; transform-origin: left; }
.score { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--wein); color: #fff; font: 400 26px/1 var(--display); flex: none; box-shadow: 0 0 0 6px var(--rosa-hell); }
.verbindung p { margin: 0; font-size: 13px; color: var(--grau); max-width: 22ch; line-height: 1.4; }
.zustimmung { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1 var(--daten); color: #2f6b45; background: #e5f3ea; padding: 6px 9px; border-radius: 7px; margin-top: 12px; }
.beispiel { font: 11px var(--daten); color: var(--grau); text-align: right; margin: 0; }

@media (prefers-reduced-motion: no-preference) {
  .anim .karte.anfrage { animation: rein .6s ease both; }
  .anim .verbindung .linie { animation: zieh .7s .5s ease both; }
  .anim .score { animation: pop .5s 1.1s cubic-bezier(.3,1.6,.5,1) both; }
  .anim .karte.profil { animation: rein .6s .3s ease both; }
  .anim .tag.t { animation: treffer .5s ease both; }
  .anim .zustimmung { animation: rein .5s 1.5s ease both; }
}
@keyframes rein { from { opacity: 0; transform: translateY(14px); } }
@keyframes zieh { from { transform: scaleX(0); } }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }
@keyframes treffer { from { background: #f3eef0; color: #4f4248; } }

/* Abschnitte */
.abschnitt { padding-block: 88px; }
.abschnitt .titel { display: grid; gap: 14px; margin-bottom: 44px; max-width: 760px; }
.abschnitt .titel p { margin: 0; color: var(--grau); font-size: 18px; }

.branchen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--tinte); }
.branche { padding: 28px 28px 32px 0; display: grid; gap: 12px; align-content: start; }
.branche + .branche { padding-left: 28px; border-left: 1px solid var(--linie); }
.branche .nr { font: 400 15px/1 var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--wein); }
.branche h3 { font: 400 28px/1.15 var(--display); margin: 0; }
.branche p { margin: 0; color: var(--grau); font-size: 16px; }
.branche ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.branche li { font: 12px/1 var(--daten); padding: 6px 8px; border: 1px solid var(--linie); border-radius: 6px; color: #4f4248; }

.ablauf { background: var(--flaeche); border-block: 1px solid var(--linie); }
.schritte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; counter-reset: s; list-style: none; margin: 0; padding: 0; }
.schritte li { display: grid; gap: 10px; align-content: start; }
.schritte li::before { counter-increment: s; content: counter(s); font: 400 56px/1 var(--display); color: var(--wein); }
.schritte h3 { font: 600 19px/1.3 var(--text); margin: 0; }
.schritte p { margin: 0; color: var(--grau); font-size: 16px; }
.schritte .zeit { font: 12px var(--daten); color: var(--wein); }

.projekte-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 28px; }
.filter { display: flex; flex-wrap: wrap; gap: 8px; }
.filter button { font: 500 13px/1 var(--daten); padding: 9px 12px; border-radius: 999px; border: 1px solid var(--linie); background: var(--flaeche); color: var(--tinte); cursor: pointer; }
.filter button[aria-pressed="true"] { background: var(--tinte); color: #fff; border-color: var(--tinte); }
.liste { display: grid; border-top: 1px solid var(--tinte); }
.zeile { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--linie); text-decoration: none; }
.zeile:hover h3 { color: var(--wein); }
.zeile h3 { font: 600 17px/1.35 var(--text); margin: 0; transition: color .15s; }
.zeile span { font: 13px/1.4 var(--daten); color: var(--grau); }
.zeile .pfeil { font-size: 20px; color: var(--wein); }
.neu { font: 500 10px/1 var(--daten); letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--rosa); padding: 4px 6px; border-radius: 4px; margin-left: 8px; vertical-align: 2px; }
.liste-fuss { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 18px; font-size: 14px; color: var(--grau); }

.person { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: center; }
.zitat { font: 400 clamp(26px, 3.4vw, 38px)/1.2 var(--display); margin: 14px 0 22px; text-wrap: balance; }
.person .name { font-weight: 600; }
.person .rolle { color: var(--grau); font-size: 15px; }
.kontakt { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.tel { font: 500 15px/1 var(--daten); padding: 13px 18px; border: 1px solid var(--linie); border-radius: 999px; background: var(--flaeche); user-select: all; }

.schluss { background: var(--tief); color: #f4e6ec; }
.schluss .innen { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; padding-block: 88px; align-items: end; }
.schluss h2 { color: #fff; font-size: clamp(34px, 5vw, 58px); }
.schluss .eyebrow { color: #f08bb6; }
.schluss p { color: #d9bfca; margin: 16px 0 0; max-width: 46ch; }
.schluss .seiten { display: grid; gap: 12px; }
.schluss .seite { border: 1px solid rgb(255 255 255 / .16); border-radius: 16px; padding: 18px 20px; display: grid; gap: 4px; text-decoration: none; transition: border-color .15s, background .15s; }
.schluss .seite:hover { border-color: #f08bb6; background: rgb(255 255 255 / .04); }
.schluss .seite b { font-weight: 600; color: #fff; }
.schluss .seite span { font-size: 15px; color: #d9bfca; }
.fusszeile { background: var(--tief); color: #a98c98; border-top: 1px solid rgb(255 255 255 / .1); font-size: 13px; }
.fusszeile .innen { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-block: 22px; }
.fusszeile .wm { color: #fff; }

@media (max-width: 900px) {
  .hero .innen, .person, .schluss .innen { grid-template-columns: 1fr; }
  .hero { padding-block: 44px 64px; }
  .branchen, .schritte { grid-template-columns: 1fr; }
  .branche, .branche + .branche { padding: 24px 0; border-left: 0; border-bottom: 1px solid var(--linie); }
  .zeile { grid-template-columns: minmax(0, 1fr) auto; }
  .zeile .ort, .zeile .rahmen { grid-column: 1; }
  .kopf nav a:not(.knopf) { display: none; }
  .profil { margin-left: 6%; }
  .abschnitt { padding-block: 64px; }
}

/* Unterseiten */
.seitenkopf { padding-block: 64px 40px; }
.seitenkopf h1 { font-size: clamp(38px, 5.4vw, 64px); line-height: 1.05; margin-top: 14px; }
.seitenkopf p { font-size: 19px; color: var(--grau); max-width: 58ch; margin: 18px 0 0; }
.kopf nav a[aria-current="page"] { color: var(--wein); }
.zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.feld { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 18px; padding: 28px; display: grid; gap: 12px; align-content: start; }
.feld h3 { font: 400 26px/1.2 var(--display); margin: 0; }
.feld p { margin: 0; color: var(--grau); }
.feld .abrechnung { font: 13px var(--daten); color: var(--wein); }
.punkte { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.punkte li { padding-left: 26px; position: relative; color: var(--grau); }
.punkte li::before { content: ""; position: absolute; left: 0; top: .6em; width: 12px; height: 2px; background: var(--wein); }
.punkte b { color: var(--tinte); font-weight: 600; }

/* Formulare */
form.formular { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 22px; padding: clamp(20px, 4vw, 36px); }
.formular .ganz { grid-column: 1 / -1; }
.formular label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.formular label span { font-weight: 400; color: var(--grau); }
.formular input, .formular select, .formular textarea { font: 16px/1.4 var(--text); color: var(--tinte); background: var(--papier); border: 1px solid #d9cdd2; border-radius: 10px; padding: 12px 14px; width: 100%; }
.formular input:focus, .formular select:focus, .formular textarea:focus { outline: 2px solid var(--rosa); outline-offset: 1px; border-color: transparent; }
.formular textarea { min-height: 130px; resize: vertical; }
.formular .check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; color: var(--grau); }
.formular .check input { width: 18px; height: 18px; margin-top: 3px; flex: none; }
.formular .falle { position: absolute; left: -9999px; }
.formular button { justify-self: start; border: 0; cursor: pointer; }
.meldung { grid-column: 1 / -1; padding: 14px 16px; border-radius: 10px; font-size: 15px; }
.meldung.ok { background: #e5f3ea; color: #2f6b45; }
.meldung.fehler { background: #fbebeb; color: #8a1f1f; }

/* Rechtstexte */
.recht { max-width: 760px; padding-block: 24px 88px; }
.recht h2 { font-size: 26px; margin: 36px 0 10px; }
.recht h3 { font: 600 17px/1.4 var(--text); margin: 22px 0 6px; }
.recht p, .recht li { color: #3d3136; }
.leer { padding: 28px 0; color: var(--grau); border-bottom: 1px solid var(--linie); }

@media (max-width: 900px) {
  .zwei, form.formular { grid-template-columns: 1fr; }
}

/* Bilder und Grafiken */
.branche .symbol { width: 34px; height: 34px; color: var(--wein); }
.seitenkopf.mit-netz .innen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 40px; align-items: center; }
.netz svg { display: block; width: 100%; height: auto; max-width: 560px; margin-left: auto; }
.schluss { position: relative; }
.skyline { height: clamp(170px, 24vw, 340px); background: linear-gradient(180deg, rgb(36 8 17 / .05) 0%, rgb(36 8 17 / .25) 55%, var(--tief) 100%), url("bilder/skyline-1200.webp") center 30% / cover no-repeat; }
@media (min-width: 1200px) { .skyline { background-image: linear-gradient(180deg, rgb(36 8 17 / .05) 0%, rgb(36 8 17 / .25) 55%, var(--tief) 100%), url("bilder/skyline.webp"); } }
.schluss .innen { padding-top: 32px; }
@media (max-width: 900px) {
  .seitenkopf.mit-netz .innen { grid-template-columns: 1fr; }
  .netz svg { margin: 0 auto; max-width: 440px; }
}

/* Live-Marktradar (Projektseite) */
.radar { padding-top: 24px; }
.radar-kopf { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 22px; }
.radar-kopf h2 { margin: 10px 0 8px; }
.radar-kopf p { margin: 0; color: var(--grau); max-width: 62ch; }
.radar-kopf p b { color: var(--wein); font: 600 1.15em/1 var(--daten); }
.live { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 var(--daten); letter-spacing: .08em; text-transform: uppercase; color: var(--wein); }
.live i { width: 9px; height: 9px; border-radius: 50%; background: #2fa760; box-shadow: 0 0 0 0 rgb(47 167 96 / .5); }
.radar-kreis { position: relative; width: 120px; height: 120px; flex: none; border-radius: 50%; border: 1px solid var(--linie); background: radial-gradient(circle, var(--rosa-hell) 0 6%, transparent 7%); overflow: hidden; }
.radar-kreis span { position: absolute; inset: 0; margin: auto; border-radius: 50%; border: 1px solid var(--linie); }
.radar-kreis span:nth-child(1) { width: 33%; height: 33%; } .radar-kreis span:nth-child(2) { width: 66%; height: 66%; } .radar-kreis span:nth-child(3) { width: 100%; height: 100%; border-color: transparent; }
.radar-kreis b { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgb(210 74 138 / .35), transparent 22%); }
.laufband { overflow: hidden; border-block: 1px solid var(--linie); margin-bottom: 8px; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.laufband div { display: flex; width: max-content; gap: 10px; padding: 10px 0; }
.laufband span { font: 500 12px/1 var(--daten); padding: 7px 11px; border-radius: 999px; background: var(--rosa-hell); color: var(--wein); white-space: nowrap; }
.zeile.markt h3::before { content: "Markt"; font: 500 10px/1 var(--daten); letter-spacing: .08em; text-transform: uppercase; color: var(--grau); border: 1px solid var(--linie); padding: 3px 5px; border-radius: 4px; margin-right: 8px; vertical-align: 2px; }
.zeile.markt:hover { background: linear-gradient(90deg, var(--rosa-hell), transparent 70%); }
.zeile.markt { transition: background .3s; }
.mehr { font: 500 14px/1 var(--text); color: var(--wein); background: none; border: 0; padding: 0; cursor: pointer; }
.mehr[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .live i { animation: puls 1.8s ease-out infinite; }
  .radar-kreis b { animation: dreh 3.5s linear infinite; }
  .laufband div { animation: lauf 40s linear infinite; }
  .laufband:hover div { animation-play-state: paused; }
  .radar.sichtbar .zeile.markt { animation: rein .5s calc(var(--i, 0) * 60ms) ease both; }
  .radar:not(.sichtbar) details.markt { opacity: 0; }
}
@keyframes puls { 70% { box-shadow: 0 0 0 9px rgb(47 167 96 / 0); } 100% { box-shadow: 0 0 0 0 rgb(47 167 96 / 0); } }
@keyframes dreh { to { transform: rotate(1turn); } }
@keyframes lauf { to { transform: translateX(-50%); } }
@media (max-width: 700px) { .radar-kreis { display: none; } }
.radar details.markt summary { list-style: none; cursor: pointer; }
.radar details.markt summary::-webkit-details-marker { display: none; }
.radar details.markt .pfeil { transition: transform .35s cubic-bezier(.3,1.4,.5,1); display: inline-block; }
.radar details.markt[open] .pfeil { transform: rotate(45deg); }
.radar details.markt[open] summary h3 { color: var(--wein); }
.markt-text { display: grid; grid-template-rows: 1fr; }
.markt-text > div { overflow: hidden; padding: 4px 0 26px; border-bottom: 1px solid var(--linie); }
.markt-text p { margin: 0 0 16px; max-width: 70ch; color: #3d3136; }
.markt-fakten { display: flex; flex-wrap: wrap; gap: 10px 28px; padding: 14px 18px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; margin-bottom: 18px; }
.markt-fakten div { font: 12px/1.4 var(--daten); color: var(--grau); }
.markt-fakten b { display: block; font: 600 15px/1.4 var(--text); color: var(--tinte); }
.markt-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 32px; margin-bottom: 18px; }
.markt-spalten h4 { font: 600 14px/1.3 var(--text); margin: 0 0 6px; color: var(--wein); }
.markt-spalten ul { margin: 0; padding-left: 18px; font-size: 15px; color: #3d3136; }
@media (max-width: 700px) { .markt-spalten { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: no-preference) {
  .radar.sichtbar details.markt { animation: rein .5s calc(var(--i, 0) * 60ms) ease both; }
  .radar.sichtbar .zeile.markt { animation: none; }
  .radar details.markt[open] .markt-text > div { animation: auf .45s cubic-bezier(.2,.7,.2,1) both; }
}
@keyframes auf { from { opacity: 0; transform: translateY(-8px); max-height: 0; } to { max-height: 900px; } }