/* Create Lab Kundenportal
   Marke: Schwarz, Weiß, Orange #F77F00, Rot #E10600 · Oswald (Kopf) + Roboto (Text)
   Kundenfarbe kommt als --kunde aus /theme/<kunde>.css */

@font-face { font-family: "Oswald"; font-weight: 700; font-display: swap; src: url("/static/fonts/oswald-700.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 400; font-display: swap; src: url("/static/fonts/roboto-400.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 500; font-display: swap; src: url("/static/fonts/roboto-500.woff2") format("woff2"); }

:root {
  --schwarz: #111112;
  --tief: #18181a;
  --tief-2: #222225;
  --weiss: #ffffff;
  --papier: #f5f4f1;
  --flaeche: #ffffff;
  --orange: #f77f00;
  --orange-hell: #ff9d33;
  --orange-blass: rgba(247, 127, 0, .12);
  --rot: #e10600;
  --gruen: #1f9d61;
  --text: #17171a;
  --leise: #66666d;
  --linie: rgba(17, 17, 18, .11);
  --kunde: #f77f00;
  --radius: 18px;
  --radius-klein: 12px;
  --schatten: 0 18px 50px -22px rgba(17, 17, 18, .35);
  --kopf: "Oswald", "Bahnschrift SemiBold", "Bahnschrift", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --fliess: "Roboto", system-ui, "Segoe UI", -apple-system, Arial, sans-serif;
  --tempo: 220ms;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  background: var(--papier); color: var(--text);
  font: 400 16px/1.55 var(--fliess);
  -webkit-font-smoothing: antialiased;
}
body.dunkel { background: var(--schwarz); color: #ece9e4; }
body.voll { height: 100vh; height: 100svh; overflow: hidden; }
main { flex: 1; }
a { color: inherit; }
img { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--kopf); font-weight: 700; line-height: 1.08; letter-spacing: .005em; }
h1 { font-size: clamp(2.1rem, 5.4vw, 4rem); text-transform: uppercase; }
h2 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); }
h3 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .04em; margin: 1.4rem 0 .7rem; }
.leise { color: var(--leise); }
.dunkel .leise { color: #a3a09a; }
.klein { font-size: .86rem; }
.fehler { color: var(--rot); font-weight: 500; }
.dunkel .fehler { color: #ff6b5e; }
.marker { background: #fff2a8; color: #3b3200; padding: .1em .4em; border-radius: 4px; font-size: .85em; font-weight: 500; }
.inline { display: inline; }
[hidden] { display: none !important; }   /* „versteckt“ gewinnt immer, auch gegen .btn usw. */
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ico { width: 22px; height: 22px; flex: none; }
.ico.klein { width: 16px; height: 16px; }

/* ---------------------------------------------------------------- Knöpfe */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .78rem 1.25rem; border: 2px solid var(--orange); border-radius: 999px;
  background: var(--orange); color: var(--schwarz);
  font: 700 .95rem/1 var(--kopf); text-transform: uppercase; letter-spacing: .06em;
  text-decoration: none; cursor: pointer;
  transition: transform var(--tempo), background var(--tempo), box-shadow var(--tempo);
}
.btn:hover { background: var(--orange-hell); border-color: var(--orange-hell); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .5; cursor: progress; }
.btn .ico { width: 18px; height: 18px; transition: transform var(--tempo); }
.btn:hover .ico { transform: translateX(3px); }
.btn-gross { padding: 1rem 1.7rem; font-size: 1.05rem; }
.btn-leise { background: transparent; color: inherit; border-color: var(--linie); }
.btn-leise:hover { background: rgba(17, 17, 18, .05); border-color: var(--text); }
.dunkel .btn-leise { border-color: rgba(255, 255, 255, .25); }
.btn-pille { box-shadow: var(--schatten); }
.btn-gleich { background: var(--tief-2); color: #fff; border-color: rgba(255, 255, 255, .18); flex: 1; }
.btn-gleich:hover { background: #2e2e33; border-color: var(--orange); }
.btn-leuchten { animation: leuchten 2.8s ease-in-out 2.4s infinite; }
@keyframes leuchten { 0%, 100% { box-shadow: 0 0 0 0 rgba(247, 127, 0, .5); } 50% { box-shadow: 0 0 0 14px rgba(247, 127, 0, 0); } }
.link { background: none; border: 0; padding: .3rem; color: var(--leise); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link:hover { color: var(--text); }

/* ----------------------------------------------------------------- Kopf */
.kopf {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  height: 60px; padding: 0 clamp(16px, 3vw, 32px);
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linie);
}
.marke { display: flex; align-items: center; gap: .7rem; text-decoration: none; min-width: 0; }
.logo { height: 24px; width: auto; }
.logo-gross { height: 34px; margin-bottom: 1.6rem; }
.dunkel .logo, .admin-kopf .logo-hell { filter: invert(1); }
.mal { color: var(--orange); font: 700 1.1rem var(--kopf); }
.kunde-name { font: 700 .95rem var(--kopf); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kopf-rechts { display: flex; align-items: center; gap: .3rem; }
.kopf-knopf {
  display: inline-grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; border: 1px solid transparent; background: transparent; color: var(--leise);
  cursor: pointer; transition: background var(--tempo), color var(--tempo);
}
.kopf-knopf:hover { background: var(--orange-blass); color: var(--schwarz); }
.vorschau-band { background: var(--orange); color: var(--schwarz); text-align: center; font: 700 .78rem/1 var(--kopf); letter-spacing: .1em; text-transform: uppercase; padding: .5rem; }

/* Phasen */
.phasen {
  display: flex; list-style: none; gap: 0; padding: .7rem clamp(16px, 3vw, 32px);
  background: var(--flaeche); border-bottom: 1px solid var(--linie);
  font: 700 .74rem/1 var(--kopf); text-transform: uppercase; letter-spacing: .1em; color: #a5a5ab;
}
.phasen li { flex: 1; display: flex; align-items: center; gap: .55rem; position: relative; }
.phasen li:not(:last-child)::after { content: ""; flex: 1; height: 2px; margin: 0 .7rem; background: var(--linie); border-radius: 2px; }
.phasen li.fertig::after { background: var(--orange); }
.ph-punkt { width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; flex: none; }
.phasen .fertig { color: var(--text); }
.phasen .fertig .ph-punkt { background: var(--orange); border-color: var(--orange); }
.phasen .aktiv { color: var(--text); }
.phasen .aktiv .ph-punkt { border-color: var(--orange); box-shadow: 0 0 0 4px var(--orange-blass); animation: atmen 2.4s ease-in-out infinite; }
@keyframes atmen { 50% { box-shadow: 0 0 0 7px rgba(247, 127, 0, .06); } }

/* ----------------------------------------------------------------- Fuß */
.fuss { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.4rem; padding: 1.6rem 16px 2rem; font-size: .82rem; color: var(--leise); }
.fuss a, .fuss .link { color: var(--leise); text-decoration: none; padding: 0; font-size: inherit; }
.fuss a:hover, .fuss .link:hover { color: var(--text); text-decoration: underline; }

/* ------------------------------------------------------ Glut (Hintergrund) */
.glut { position: fixed; z-index: 0; width: 70vmax; height: 70vmax; border-radius: 50%; filter: blur(80px); opacity: .42; pointer-events: none; }
.glut-a { background: radial-gradient(circle, var(--orange) 0%, transparent 62%); top: -38vmax; right: -24vmax; animation: treiben 22s ease-in-out infinite alternate; }
.glut-b { background: radial-gradient(circle, var(--kunde) 0%, transparent 62%); bottom: -42vmax; left: -26vmax; opacity: .32; animation: treiben 26s ease-in-out infinite alternate-reverse; }
@keyframes treiben { to { transform: translate(-8vmax, 6vmax) scale(1.12); } }
.raster {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 72%); mask-image: radial-gradient(ellipse at center, #000 20%, transparent 72%);
}

/* Einblenden in Stufen */
.auf { opacity: 0; transform: translateY(18px); animation: auf .8s cubic-bezier(.2, .7, .2, 1) forwards; }
.a1 { animation-delay: .05s; } .a2 { animation-delay: .2s; } .a3 { animation-delay: .38s; } .a4 { animation-delay: .55s; }
.a5 { animation-delay: .7s; } .a6 { animation-delay: .82s; } .a7 { animation-delay: .94s; } .a8 { animation-delay: 1.5s; } .a9 { animation-delay: 1.15s; }
@keyframes auf { to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- Login */
.login { position: relative; display: grid; place-items: center; padding: 48px 16px; overflow: hidden; }
.login-karte {
  position: relative; z-index: 1; width: min(420px, 100%);
  display: flex; flex-direction: column; gap: 1rem; padding: clamp(28px, 5vw, 44px);
  background: rgba(24, 24, 26, .78); backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 24px; box-shadow: 0 30px 80px -30px #000;
  animation: auf .7s cubic-bezier(.2, .7, .2, 1) both;
}
.login-karte h1 { font-size: 2.2rem; }
.login-karte .btn { margin-top: .4rem; }
label { display: flex; flex-direction: column; gap: .4rem; font-size: .86rem; font-weight: 500; }
input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]), textarea, select {
  width: 100%; padding: .8rem .95rem; border-radius: var(--radius-klein);
  border: 1.5px solid var(--linie); background: var(--flaeche); font-size: 1rem; font-weight: 400;
  transition: border-color var(--tempo), box-shadow var(--tempo);
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 4px var(--orange-blass); }
.dunkel input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]), .dunkel textarea { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: #fff; }
textarea { resize: vertical; min-height: 4.5rem; }
small { font-size: .8rem; font-weight: 400; color: var(--leise); }

.haken { flex-direction: row; align-items: flex-start; gap: .7rem; font-weight: 400; font-size: .92rem; cursor: pointer; line-height: 1.4; }
.haken input { appearance: none; flex: none; width: 22px; height: 22px; margin-top: -1px; border-radius: 7px; border: 2px solid currentColor; opacity: .75; cursor: pointer; display: grid; place-items: center; transition: background var(--tempo), border-color var(--tempo); }
.haken input::after { content: ""; width: 10px; height: 6px; border: solid var(--schwarz); border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform var(--tempo); }
.haken input:checked { background: var(--orange); border-color: var(--orange); opacity: 1; }
.haken input:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.haken input:disabled { opacity: .45; }

/* ---------------------------------------------------------------- Intro */
.intro { position: relative; display: grid; place-items: center; padding: clamp(40px, 8vh, 90px) 16px; overflow: hidden; }
.intro-inhalt { position: relative; z-index: 1; width: min(1040px, 100%); text-align: center; display: flex; flex-direction: column; align-items: center; }
.eyebrow { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .6rem; font: 700 .8rem/1.2 var(--kopf); letter-spacing: .2em; text-transform: uppercase; color: #bdb8b0; margin-bottom: 1.3rem; }
.eyebrow .kunde-farbe { color: var(--kunde); filter: brightness(1.25); }
.intro h1 { color: #fff; font-size: clamp(2.5rem, 7.5vw, 5.6rem); line-height: .98; }
.intro .unter { margin-top: 1rem; font-size: clamp(1.05rem, 2vw, 1.3rem); color: #bdb8b0; }

.schritte { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 2vw, 22px); margin: clamp(2.4rem, 6vh, 4rem) 0; width: 100%; position: relative; }
.schritte.drei { grid-template-columns: repeat(3, 1fr); max-width: 820px; }
.schritte::before {
  content: ""; position: absolute; top: 38px; left: 12%; right: 12%; height: 2px; z-index: 0;
  background: linear-gradient(90deg, var(--orange), var(--kunde));
  transform-origin: left; transform: scaleX(0); animation: linie 1.6s cubic-bezier(.6, 0, .2, 1) .6s forwards; opacity: .55;
}
@keyframes linie { to { transform: scaleX(1); } }
.schritt {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .55rem;
  padding: 0 .4rem; opacity: 0; transform: translateY(22px) scale(.96);
  animation: auf .8s cubic-bezier(.2, .7, .2, 1) forwards;
}
.s1 { animation-delay: .65s; } .s2 { animation-delay: .85s; } .s3 { animation-delay: 1.05s; } .s4 { animation-delay: 1.25s; }
.schritt-ico {
  width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; margin-bottom: .5rem;
  background: var(--tief); color: var(--orange); border: 1.5px solid rgba(247, 127, 0, .45);
  box-shadow: 0 0 0 8px var(--schwarz), 0 12px 40px -10px rgba(247, 127, 0, .45);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), background .35s;
}
.schritt:hover .schritt-ico { transform: translateY(-4px) rotate(-4deg); background: #241708; }
.schritt-ico .ico { width: 32px; height: 32px; }
.zeichnen path, .zeichnen circle { stroke-dasharray: 80; stroke-dashoffset: 80; animation: zeichnen 1.4s ease forwards; }
.s1 .zeichnen * { animation-delay: .9s; } .s2 .zeichnen * { animation-delay: 1.1s; } .s3 .zeichnen * { animation-delay: 1.3s; } .s4 .zeichnen * { animation-delay: 1.5s; }
@keyframes zeichnen { to { stroke-dashoffset: 0; } }
.schritt b { font: 700 1.25rem var(--kopf); text-transform: uppercase; letter-spacing: .06em; color: #fff; }
.schritt span:last-child { color: #a9a59e; font-size: .94rem; max-width: 22ch; }
.intro-form { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.intro-form .haken { color: #bdb8b0; }

.danke .grosser-haken { width: 110px; height: 110px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 1.6rem; color: var(--orange); background: var(--tief); border: 1.5px solid rgba(247, 127, 0, .5); box-shadow: 0 0 60px -6px rgba(247, 127, 0, .5); }
.danke .grosser-haken .ico { width: 54px; height: 54px; }
.danke .grosser-haken .zeichnen * { animation-delay: .4s; }
.danke h1 { font-size: clamp(2.2rem, 6vw, 4.2rem); }
.danke .unter b { color: #fff; }
.danke .s2 .zeichnen *, .danke .s3 .zeichnen *, .danke .s4 .zeichnen * { animation-delay: 1.2s; }

/* ------------------------------------------------------------- Konzept */
.konzept-seite { position: relative; flex: 1; min-height: 0; display: flex; }
.konzept-rahmen { flex: 1; width: 100%; height: 100%; border: 0; background: #fff; }
.zum-angebot { position: fixed; z-index: 20; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translateX(-50%); }
.zum-angebot:hover { transform: translateX(-50%) translateY(-2px); }
.zum-angebot.leuchten { animation: leuchten 2s ease-in-out infinite; }
.leer { display: grid; place-items: center; gap: 1rem; text-align: center; padding: 15vh 16px; color: var(--leise); width: 100%; }
.leer h1 { color: var(--text); }

/* ----------------------------------------------------------- Kommentare */
.k-knopf {
  position: fixed; z-index: 21; right: clamp(16px, 2.5vw, 28px); bottom: max(20px, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: .55rem; padding: .78rem 1.15rem;
  border: 0; border-radius: 999px; background: var(--schwarz); color: #fff; cursor: pointer;
  font: 700 .9rem/1 var(--kopf); text-transform: uppercase; letter-spacing: .06em; box-shadow: var(--schatten);
  transition: transform var(--tempo), background var(--tempo);
}
.k-knopf:hover { transform: translateY(-2px); background: #2a2a2e; }
.k-knopf .ico { color: var(--orange); }
.k-zahl { position: absolute; top: -6px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--orange); color: var(--schwarz); font: 700 .75rem/22px var(--fliess); font-style: normal; text-align: center; }
.k-schleier { position: fixed; inset: 0; z-index: 40; background: rgba(17, 17, 18, .32); animation: einblenden var(--tempo) both; }
@keyframes einblenden { from { opacity: 0; } }
.k-panel {
  position: fixed; z-index: 41; top: 0; right: 0; height: 100%; width: min(430px, 100%);
  display: flex; flex-direction: column; background: var(--flaeche); color: var(--text);
  box-shadow: -20px 0 60px -30px rgba(0, 0, 0, .5);
  transform: translateX(105%); transition: transform .38s cubic-bezier(.2, .7, .2, 1); visibility: hidden;
}
.k-panel.offen { transform: none; visibility: visible; }
.k-kopf { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.1rem 1rem 1.4rem; border-bottom: 1px solid var(--linie); }
.k-liste { flex: 1; overflow-y: auto; padding: 1.2rem 1.2rem .6rem; display: flex; flex-direction: column; gap: .8rem; }
.k-leer { margin: auto; text-align: center; color: var(--leise); max-width: 24ch; }
.k-eintrag { max-width: 88%; padding: .75rem .95rem; border-radius: 16px; background: var(--papier); animation: auf .35s ease both; }
.k-eintrag.kunde { align-self: flex-end; background: var(--orange-blass); border-bottom-right-radius: 5px; }
.k-eintrag.admin { align-self: flex-start; background: var(--schwarz); color: #f1eee9; border-bottom-left-radius: 5px; }
.k-eintrag p { white-space: pre-wrap; overflow-wrap: anywhere; }
.k-meta { display: flex; justify-content: space-between; gap: 1rem; font-size: .76rem; margin-bottom: .3rem; opacity: .75; }
.k-tag { display: inline-block; margin-bottom: .35rem; padding: .2rem .55rem; border-radius: 999px; border: 0; background: rgba(17, 17, 18, .08); font-size: .74rem; font-weight: 500; cursor: pointer; }
.k-tag::before { content: "↳ "; color: var(--orange); }
.k-tag:hover { background: rgba(247, 127, 0, .25); }
.k-form { display: flex; flex-direction: column; gap: .6rem; padding: .9rem 1.1rem max(1.1rem, env(safe-area-inset-bottom)); border-top: 1px solid var(--linie); }
.k-bezug { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .35rem .4rem .35rem .8rem; border-radius: 999px; background: var(--orange-blass); font-size: .82rem; }
.k-bezug[hidden] { display: none; }
.k-bezug b { font-weight: 500; }
.k-bezug button { display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.k-bezug button .ico { width: 14px; height: 14px; }
.k-zeile { display: flex; gap: .6rem; }
.k-zeile input { flex: 1; }
.k-zeile .btn { margin-left: auto; padding: .7rem .95rem; }

.toast { position: fixed; z-index: 60; left: 50%; bottom: 96px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; padding: .7rem 1.1rem; border-radius: 999px; background: var(--schwarz); color: #fff; font-size: .9rem; box-shadow: var(--schatten); transition: opacity var(--tempo), transform var(--tempo); }
.toast.da { opacity: 1; transform: translate(-50%, 0); }

/* -------------------------------------------------------------- Angebot */
.schmal { width: min(760px, 100%); margin: 0 auto; padding: 48px 16px; }
.text p { margin: 1rem 0; } .text h2 { margin-top: 2rem; }
.angebot { width: min(1180px, 100%); margin: 0 auto; padding: clamp(28px, 5vw, 56px) clamp(16px, 3vw, 32px) 120px; }
.a-kopf { margin-bottom: 2rem; }
.a-kopf h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
.a-kopf .unter { color: var(--leise); font-size: 1.1rem; margin: .5rem 0 .8rem; }
.hinweis { padding: .8rem 1rem; border-radius: var(--radius-klein); background: var(--orange-blass); border-left: 4px solid var(--orange); margin: .8rem 0; }
.a-raster { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(20px, 3vw, 40px); align-items: start; }
.gruppe + .gruppe { margin-top: 2.4rem; }
.gruppe h2 { margin-bottom: 1rem; text-transform: uppercase; letter-spacing: .03em; }
.optionen { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.option { cursor: pointer; display: block; font-size: 1rem; font-weight: 400; }
.option input, .zusatz input { position: absolute; opacity: 0; pointer-events: none; }
.o-karte {
  position: relative; height: 100%; display: flex; flex-direction: column; gap: .45rem;
  padding: 1.3rem 1.2rem 1.1rem; border-radius: var(--radius); background: var(--flaeche);
  border: 2px solid var(--linie); transition: border-color var(--tempo), transform var(--tempo), box-shadow var(--tempo);
}
.option:hover .o-karte { transform: translateY(-3px); box-shadow: var(--schatten); }
.option input:checked + .o-karte { border-color: var(--orange); box-shadow: 0 0 0 4px var(--orange-blass); }
.option input:focus-visible + .o-karte { outline: 3px solid var(--orange); outline-offset: 3px; }
.o-karte b { font: 700 1.3rem/1.15 var(--kopf); text-transform: uppercase; }
.o-text { color: var(--leise); font-size: .93rem; flex: 1; }
.o-empf { align-self: flex-start; padding: .25rem .6rem; border-radius: 999px; background: var(--schwarz); color: var(--orange); font: 700 .68rem/1 var(--kopf); text-transform: uppercase; letter-spacing: .12em; }
.o-fuss { display: flex; align-items: center; justify-content: space-between; margin-top: .4rem; padding-top: .8rem; border-top: 1px solid var(--linie); }
.o-preis { font: 700 1.2rem var(--kopf); }
.o-check { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--linie); color: transparent; transition: all var(--tempo); }
.option input:checked + .o-karte .o-check { background: var(--orange); border-color: var(--orange); color: var(--schwarz); transform: scale(1.08); }
.zusaetze { display: flex; flex-direction: column; gap: 10px; }
.zusatz { cursor: pointer; font-weight: 400; font-size: 1rem; }
.z-karte { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.15rem; border-radius: var(--radius-klein); background: var(--flaeche); border: 2px solid var(--linie); transition: border-color var(--tempo), background var(--tempo); }
.zusatz:hover .z-karte { border-color: rgba(247, 127, 0, .45); }
.zusatz input:checked + .z-karte { border-color: var(--orange); background: #fffaf3; }
.zusatz input:focus-visible + .z-karte { outline: 3px solid var(--orange); outline-offset: 3px; }
.schalter { flex: none; width: 44px; height: 26px; border-radius: 13px; background: #d9d8d4; position: relative; transition: background var(--tempo); }
.schalter::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform var(--tempo); }
.zusatz input:checked + .z-karte .schalter { background: var(--orange); }
.zusatz input:checked + .z-karte .schalter::after { transform: translateX(18px); }
.z-text { flex: 1; display: flex; flex-direction: column; }
.z-text b { font-weight: 500; }
.z-text span { color: var(--leise); font-size: .88rem; }
.z-preis { font: 700 1.05rem var(--kopf); white-space: nowrap; }
.immer { list-style: none; display: flex; flex-direction: column; }
.immer li { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px dashed var(--linie); }
.immer li span { color: var(--leise); }
.gesperrt .option, .gesperrt .zusatz { cursor: default; }
.gesperrt .option:hover .o-karte { transform: none; box-shadow: none; }

.summe { position: sticky; top: 132px; padding: 1.5rem; border-radius: 22px; background: var(--schwarz); color: #f1eee9; box-shadow: var(--schatten); }
.summe h2 { text-transform: uppercase; letter-spacing: .04em; margin-bottom: 1rem; }
.s-zeilen { list-style: none; display: flex; flex-direction: column; gap: .45rem; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid rgba(255, 255, 255, .14); font-size: .92rem; }
.s-zeilen li { display: flex; justify-content: space-between; gap: 1rem; animation: auf .3s ease both; }
.s-zeilen li span:last-child { white-space: nowrap; }
.s-summen div { display: flex; justify-content: space-between; padding: .2rem 0; color: #b9b5ad; }
.s-summen .s-gesamt { margin-top: .4rem; color: #fff; font: 700 1.55rem var(--kopf); }
.s-summen .s-gesamt dd { color: var(--orange); }
.puls { animation: puls .5s ease; }
@keyframes puls { 40% { transform: scale(1.08); } }
.summe .klein { margin-top: .6rem; }
.s-knoepfe { display: flex; flex-direction: column; gap: .5rem; margin-top: 1.3rem; }
.s-knoepfe .link { color: #b9b5ad; }
.s-knoepfe .link:hover { color: #fff; }
.erfolg { display: flex; align-items: center; gap: .5rem; color: var(--orange); font-weight: 500; }
.mobil-summe { display: none; }
.dialog .d-zusammen .s-zeilen { border-color: var(--linie); }
.dialog .s-summen div { color: var(--leise); }
.dialog .s-summen .s-gesamt { color: var(--text); }

dialog.dialog { margin: auto; width: min(520px, calc(100% - 24px)); max-height: calc(100svh - 24px); border: 0; border-radius: 24px; padding: 0; background: var(--flaeche); color: var(--text); box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .6); }
dialog.dialog[open] { animation: auf .35s cubic-bezier(.2, .7, .2, 1) both; }
dialog::backdrop { background: rgba(17, 17, 18, .55); backdrop-filter: blur(4px); }
.dialog form { display: flex; flex-direction: column; gap: 1rem; padding: clamp(22px, 4vw, 32px); }
.dialog h2 { font-size: 1.8rem; text-transform: uppercase; }
.d-zusammen { padding: 1rem; border-radius: var(--radius-klein); background: var(--papier); }
.d-knoepfe { display: flex; justify-content: flex-end; gap: .6rem; flex-wrap: wrap; margin-top: .4rem; }
.widerruf summary { cursor: pointer; font-weight: 500; }

/* -------------------------------------------------------------- Projekt */
.projekt { width: min(980px, 100%); margin: 0 auto; padding: clamp(32px, 6vw, 64px) clamp(16px, 3vw, 32px) 120px; }
.p-kopf { margin-bottom: 2.4rem; }
.p-kopf .eyebrow { color: var(--leise); justify-content: flex-start; }
.p-kopf .unter { color: var(--leise); font-size: 1.15rem; margin-top: .5rem; }
.zeitstrahl { list-style: none; position: relative; display: flex; flex-direction: column; gap: 1.4rem; margin-bottom: 2.4rem; padding-left: 4px; }
.zeitstrahl::before { content: ""; position: absolute; left: 21px; top: 20px; bottom: 20px; width: 2px; background: var(--linie); }
.zeitstrahl li { position: relative; display: flex; align-items: center; gap: 1.1rem; color: var(--leise); }
.zeitstrahl b { display: block; color: var(--text); font: 700 1.15rem var(--kopf); text-transform: uppercase; letter-spacing: .03em; }
.z-punkt { position: relative; z-index: 1; width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--papier); border: 2px solid #cfcdc8; }
.zeitstrahl .fertig .z-punkt { background: var(--orange); border-color: var(--orange); color: var(--schwarz); }
.zeitstrahl .aktiv .z-punkt { border-color: var(--orange); }
.zeitstrahl .aktiv .z-punkt::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--orange); animation: atmen-punkt 1.8s ease-in-out infinite; }
@keyframes atmen-punkt { 50% { transform: scale(.55); opacity: .5; } }
.paket { display: flex; align-items: center; gap: .3rem 1rem; flex-wrap: wrap; margin-bottom: 2.6rem; padding: 1.1rem 1.3rem; border-radius: var(--radius); background: var(--schwarz); color: #fff; text-decoration: none; transition: transform var(--tempo); }
.paket:hover { transform: translateY(-2px); }
.paket > span:first-child { font: 700 .75rem var(--kopf); letter-spacing: .14em; text-transform: uppercase; color: var(--orange); }
.paket b { flex: 1; font-weight: 500; }
.paket .ico { color: var(--orange); }
.projekt h2 { margin-bottom: 1rem; text-transform: uppercase; }
.karten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.karte { position: relative; display: flex; flex-direction: column; gap: .3rem; padding: 1.3rem 1.2rem; border-radius: var(--radius); background: var(--flaeche); border: 1px solid var(--linie); }
.karte .schritt-ico { width: 52px; height: 52px; margin-bottom: .6rem; box-shadow: none; background: var(--orange-blass); border-color: transparent; }
.karte .schritt-ico .ico { width: 24px; height: 24px; }
.karte b { font: 700 1.1rem var(--kopf); text-transform: uppercase; }
.karte span:last-of-type { color: var(--leise); font-size: .92rem; }
.bald { position: absolute; top: 1rem; right: 1rem; font: 700 .65rem/1 var(--kopf); text-transform: uppercase; letter-spacing: .12em; font-style: normal; color: var(--leise); padding: .3rem .5rem; border-radius: 999px; border: 1px solid var(--linie); }

/* -------------------------------------------------------- Cookie-Banner */
.cb {
  position: fixed; z-index: 70; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); width: min(880px, calc(100% - 24px));
  display: flex; gap: 1rem 1.6rem; align-items: center; padding: 1.1rem 1.3rem;
  background: rgba(17, 17, 18, .96); color: #ece9e4; border: 1px solid rgba(255, 255, 255, .12); border-radius: 20px;
  box-shadow: 0 24px 70px -20px rgba(0, 0, 0, .6); backdrop-filter: blur(12px);
  transform: translate(-50%, 30px); opacity: 0; transition: transform .45s cubic-bezier(.2, .7, .2, 1), opacity .45s;
}
.cb.da { transform: translate(-50%, 0); opacity: 1; }
.cb-text { flex: 1; font-size: .9rem; }
.cb-text b { font: 700 1rem var(--kopf); text-transform: uppercase; letter-spacing: .06em; color: var(--orange); }
.cb-text p { margin-top: .2rem; color: #c4c0b9; }
.cb-text a { color: #fff; }
.cb-optionen { display: flex; flex-direction: column; gap: .5rem; margin-top: .8rem; }
.cb-optionen[hidden] { display: none; }
.cb-knoepfe { display: flex; flex-direction: column; gap: .45rem; width: 190px; flex: none; }
.cb-knoepfe .btn { padding: .65rem 1rem; font-size: .82rem; }

/* ----------------------------------------------------------------- Admin */
.admin-seite { background: var(--papier); }
.admin-kopf { background: var(--schwarz); border-bottom-color: #000; color: #fff; }
.admin-kopf .logo { filter: invert(1); }
.admin-kopf .kopf-knopf { color: #bbb; }
.admin-kopf .kopf-knopf:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.admin-nav { display: flex; gap: .3rem; margin-right: auto; margin-left: 1.5rem; }
.admin-nav a { padding: .5rem .85rem; border-radius: 999px; text-decoration: none; color: #bbb; font: 700 .8rem var(--kopf); text-transform: uppercase; letter-spacing: .08em; }
.admin-nav a:hover { color: #fff; }
.admin-nav a.an { background: var(--orange); color: var(--schwarz); }
.admin { width: min(1240px, 100%); margin: 0 auto; padding: 32px clamp(16px, 3vw, 32px) 80px; }
.a-titel { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.a-titel h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
.a-titel .eyebrow { justify-content: flex-start; color: var(--leise); margin-bottom: .4rem; }
.a-titel .pille { margin-top: .6rem; }
.a-link { margin-bottom: 1.4rem; color: var(--leise); }
code { font-family: ui-monospace, Consolas, monospace; font-size: .88em; padding: .15em .45em; background: rgba(17, 17, 18, .07); border-radius: 6px; }
.a-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.a-karte { display: flex; flex-direction: column; gap: .8rem; padding: 1.3rem; border-radius: var(--radius); background: var(--flaeche); border: 1px solid var(--linie); text-decoration: none; transition: transform var(--tempo), box-shadow var(--tempo); }
.a-karte:hover { transform: translateY(-3px); box-shadow: var(--schatten); }
.a-karte-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; }
.a-karte-kopf b { font: 700 1.2rem var(--kopf); text-transform: uppercase; }
.a-karte .pille { align-self: flex-start; }
.a-karte dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; padding-top: .8rem; border-top: 1px solid var(--linie); }
.a-karte dt, .kpis span { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--leise); }
.a-karte dd { font-weight: 500; font-size: .92rem; }
.pille { display: inline-block; padding: .3rem .7rem; border-radius: 999px; font-size: .76rem; font-weight: 500; }
.pille.neutral { background: rgba(17, 17, 18, .07); }
.pille.warn { background: #fff0d6; color: #8a4b00; }
.pille.gut { background: #dcf3e7; color: #116140; }
.pille.schlecht { background: #fde1df; color: #a1100a; }
.badge { padding: .2rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 500; white-space: nowrap; }
.badge.rot { background: var(--rot); color: #fff; }
.a-box { padding: clamp(18px, 2.5vw, 28px); border-radius: var(--radius); background: var(--flaeche); border: 1px solid var(--linie); margin-bottom: 18px; }
.a-box > h2 { text-transform: uppercase; letter-spacing: .03em; margin-bottom: 1rem; }
.a-box.hervor { border: 2px solid var(--orange); }
.s-gesamt-zeile { margin: .8rem 0 .4rem; }
.s-gesamt-zeile b { font: 700 1.4rem var(--kopf); color: var(--orange); }
.a-box form { margin-top: 1rem; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 1rem 0 1.4rem; }
.kpis div { padding: 1rem; border-radius: var(--radius-klein); background: var(--papier); }
.kpis b { display: block; margin-top: .2rem; font: 700 1.5rem var(--kopf); }
.a-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; }
.a-zwei h3 { margin-top: .6rem; }
.balken { list-style: none; display: flex; flex-direction: column; gap: .55rem; }
.balken li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: center; gap: .8rem; font-size: .9rem; }
.b-titel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-spur { height: 10px; border-radius: 5px; background: rgba(17, 17, 18, .06); overflow: hidden; }
.b-wert { display: block; height: 100%; border-radius: 5px; background: #8f8e93; transform-origin: left; animation: wachsen .9s cubic-bezier(.2, .7, .2, 1) both; }
.balken li.top .b-wert { background: var(--orange); }
.balken li.top .b-titel { font-weight: 500; }
@keyframes wachsen { from { transform: scaleX(0); } }
.b-zahl { font-variant-numeric: tabular-nums; white-space: nowrap; }
.b-zahl small { color: var(--leise); margin-left: .3rem; }
.w0 { width: 1%; } .w5 { width: 5%; } .w10 { width: 10%; } .w15 { width: 15%; } .w20 { width: 20%; } .w25 { width: 25%; }
.w30 { width: 30%; } .w35 { width: 35%; } .w40 { width: 40%; } .w45 { width: 45%; } .w50 { width: 50%; } .w55 { width: 55%; }
.w60 { width: 60%; } .w65 { width: 65%; } .w70 { width: 70%; } .w75 { width: 75%; } .w80 { width: 80%; } .w85 { width: 85%; }
.w90 { width: 90%; } .w95 { width: 95%; } .w100 { width: 100%; }
.verlauf { list-style: none; max-height: 340px; overflow-y: auto; font-size: .88rem; }
.verlauf li { display: grid; grid-template-columns: 130px 120px 1fr; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid var(--linie); }
.verlauf time { color: var(--leise); font-variant-numeric: tabular-nums; }
.verlauf .wer { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin .k-liste { list-style: none; padding: 0; gap: .8rem; overflow: visible; }
.admin .k-eintrag { max-width: 100%; align-self: stretch; background: var(--papier); border-radius: var(--radius-klein); }
.admin .k-eintrag.admin { background: var(--schwarz); }
.admin .k-eintrag.offen { border-left: 4px solid var(--rot); }
.admin .k-eintrag .k-tag { cursor: default; margin: 0 .5rem; }
.admin .k-meta { justify-content: flex-start; gap: .6rem; align-items: center; opacity: 1; }
.admin .k-meta time { margin-left: auto; color: var(--leise); }
.antwort { display: flex; gap: .6rem; align-items: flex-end; margin-top: .7rem; }
.antwort textarea { min-height: 2.8rem; }
.zugaenge { list-style: none; }
.zugaenge li { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; padding: .6rem 0; border-bottom: 1px solid var(--linie); }
.a-form { display: flex; flex-direction: column; gap: 1rem; }
.a-form.reihe { flex-direction: row; align-items: flex-end; flex-wrap: wrap; }
.a-form.reihe label { flex: 1; min-width: 220px; }
.a-form h3 { margin-bottom: 0; }
.mails { list-style: none; }
.mails pre { white-space: pre-wrap; font: inherit; margin-top: .8rem; padding: 1rem; background: var(--papier); border-radius: var(--radius-klein); overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- Mobil */
@media (max-width: 960px) {
  .a-raster { grid-template-columns: 1fr; }
  .summe { position: static; }
  .mobil-summe {
    position: fixed; z-index: 22; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .8rem 16px max(.8rem, env(safe-area-inset-bottom)); background: var(--schwarz); color: #fff; box-shadow: 0 -10px 40px -20px #000;
  }
  .mobil-summe b { font: 700 1.3rem var(--kopf); color: var(--orange); margin-left: .3rem; }
  .angebot .k-knopf { bottom: 84px; }
  .karten { grid-template-columns: 1fr 1fr; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .a-zwei { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .schritte { grid-template-columns: 1fr 1fr; row-gap: 2rem; }
  .schritte::before { display: none; }
  .schritte.drei { grid-template-columns: 1fr; }
  .phasen li:not(.aktiv) .ph-text { display: none; }
  .phasen li:not(:last-child)::after { margin: 0 .5rem; }
  .k-panel { top: auto; bottom: 0; height: 86svh; width: 100%; border-radius: 22px 22px 0 0; transform: translateY(105%); }
  .k-knopf span { display: none; }
  .k-knopf { padding: .9rem; }
  .zum-angebot { left: 16px; transform: none; }
  .zum-angebot:hover { transform: translateY(-2px); }
  .cb { flex-direction: column; align-items: stretch; }
  .cb-knoepfe { width: 100%; flex-direction: row; flex-wrap: wrap; }
  .admin-nav { margin-left: .4rem; overflow-x: auto; }
  .admin-kopf .kunde-name, .admin-kopf .mal { display: none; }
  .verlauf li { grid-template-columns: 1fr 1fr; }
  .verlauf li > span:last-child { grid-column: 1 / -1; }
  .balken li { grid-template-columns: 1fr auto; }
  .b-spur { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 480px) {
  .kunde-name { max-width: 42vw; }
  .karten { grid-template-columns: 1fr; }
  .schritt-ico { width: 64px; height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .glut { animation: none; }
}

/* Kopf auf dunklen Seiten */
.dunkel .kopf { background: rgba(17, 17, 18, .72); border-bottom-color: rgba(255, 255, 255, .08); color: #fff; }
.dunkel .kopf-knopf { color: #bdb8b0; }
.dunkel .kopf-knopf:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.dunkel .fuss, .dunkel .fuss a, .dunkel .fuss .link { color: #8d8a85; }

/* Solange der Cookie-Banner offen ist, nichts Wichtiges darunter verstecken */
.mit-banner .intro { padding-bottom: 230px; }
.mit-banner .zum-angebot, .mit-banner .k-knopf, .mit-banner .mobil-summe { visibility: hidden; }
@media (max-width: 760px) { .mit-banner .intro { padding-bottom: 330px; } }

.p-kopf .kunde-farbe { filter: brightness(.8); }

/* ------------------------------------------------ Projektphase (Admin) */
.heute { margin-bottom: 2rem; padding: 1.2rem 1.4rem; border-radius: var(--radius); background: var(--schwarz); color: #f1eee9; }
.heute h2 { text-transform: uppercase; letter-spacing: .04em; margin-bottom: .8rem; color: var(--orange); }
.heute-zeile { display: flex; align-items: center; gap: .8rem; padding: .7rem .2rem; border-top: 1px solid rgba(255, 255, 255, .1); text-decoration: none; }
.heute-zeile > span { flex: 1; }
.heute-zeile:hover { color: #fff; }
.heute-zeile:hover > .ico:last-child { transform: translateX(3px); }
.heute-zeile > .ico:first-child { width: 20px; height: 20px; }
.heute-zeile.rot > .ico:first-child { color: #ff6b5e; }
.heute-zeile.warn > .ico:first-child { color: var(--orange); }
.heute-zeile.gut > .ico:first-child { color: #5fd39a; }
.leer-heute { display: flex; align-items: center; gap: .7rem; color: #c4c0b9; }
.leer-heute .ico { color: #5fd39a; }
.mini-fortschritt { display: flex; align-items: center; gap: .7rem; font-size: .85rem; }
.mf-spur { flex: 1; display: block; height: 8px; border-radius: 4px; background: rgba(17, 17, 18, .08); overflow: hidden; }
.mf-spur.gross { height: 12px; border-radius: 6px; }
.mf-spur .b-wert { background: var(--orange); transition: width .5s cubic-bezier(.2, .7, .2, 1); }

.projekt-box { border: 2px solid var(--schwarz); }
.pb-kopf { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1rem; }
.pb-kopf h2 { margin: 0; }
.pb-fortschritt { flex: 1; display: flex; align-items: center; gap: .8rem; max-width: 420px; margin-left: auto; }
.pb-fortschritt b { font: 700 1.3rem var(--kopf); min-width: 3.5em; text-align: right; }
.ms-liste { list-style: none; border-top: 1px solid var(--linie); }
.ms { border-bottom: 1px solid var(--linie); }
.ms-kopf { display: flex; align-items: center; gap: .7rem; padding: .7rem 0; }
.ms-kopf b { flex: 1; font-weight: 500; }
.ms-auf { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; color: var(--leise); transition: transform var(--tempo), background var(--tempo); }
.ms-auf:hover { background: var(--orange-blass); }
.ms-auf.offen { transform: rotate(90deg); color: var(--orange); }
.ms-zaehler { font-size: .8rem; color: var(--leise); font-variant-numeric: tabular-nums; }
.status-knopf { border: 0; cursor: pointer; min-width: 92px; text-align: center; transition: transform var(--tempo); }
.status-knopf:hover { transform: scale(1.05); }
.ms-aufgaben { padding: 0 0 1rem 2.6rem; }
.ms-aufgaben ul { list-style: none; display: flex; flex-direction: column; gap: .45rem; margin-bottom: .7rem; }
.haken.klein { font-size: .9rem; }
.haken.klein input { width: 18px; height: 18px; border-radius: 5px; }
.haken.klein input:checked + span { text-decoration: line-through; color: var(--leise); }
.neu-zeile { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.neu-zeile input, .neu-zeile select { flex: 1; min-width: 160px; }
.pb-werkzeuge { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin: 1rem 0 1.4rem; }
.pb-unten { border-top: 1px solid var(--linie); padding-top: .4rem; }
.aufklapp { margin: .6rem 0; }
.aufklapp summary { cursor: pointer; font-weight: 500; color: var(--orange); padding: .3rem 0; }
.aufklapp[open] summary { margin-bottom: .6rem; }
.ab-liste, .update-liste, .datei-liste { list-style: none; display: flex; flex-direction: column; gap: .5rem; margin-bottom: .6rem; }
.ab-liste li { padding: .7rem .9rem; border-radius: var(--radius-klein); background: var(--papier); }
.ab-liste li.neu-entschieden { box-shadow: 0 0 0 2px var(--orange); }
.ab-kopf { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.ab-meta { display: flex; gap: .8rem; margin-top: .2rem; }
.ab-antwort { margin-top: .4rem; font-style: italic; }
.update-liste li { display: grid; grid-template-columns: 90px 1fr; gap: .6rem; font-size: .9rem; }
.update-liste time { color: var(--leise); }
.datei-liste li { display: flex; justify-content: space-between; gap: .6rem; font-size: .92rem; }

/* ---------------------------------------------- Projektphase (Kunde) */
.p-fortschritt { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 2rem; }
.p-fortschritt > div { display: flex; justify-content: space-between; align-items: baseline; }
.p-fortschritt span { font: 700 .8rem var(--kopf); letter-spacing: .14em; text-transform: uppercase; color: var(--leise); }
.p-fortschritt b { font: 700 2.4rem/1 var(--kopf); }
.wartet { margin-bottom: 2.2rem; }
.wartet h2 { color: var(--orange); }
.abnahme { padding: 1.3rem; border-radius: var(--radius); background: var(--schwarz); color: #f1eee9; box-shadow: var(--schatten); }
.abnahme + .abnahme { margin-top: 12px; }
.abnahme .ab-kopf { justify-content: flex-start; gap: .9rem; }
.abnahme .ab-kopf > .ico { width: 30px; height: 30px; color: var(--orange); }
.abnahme .ab-kopf b { display: block; font: 700 1.3rem var(--kopf); text-transform: uppercase; }
.abnahme .leise { color: #a9a59e; }
.ab-knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }
.abnahme .btn-leise { border-color: rgba(255, 255, 255, .25); }
.abnahme .btn-leise:hover { background: rgba(255, 255, 255, .08); }
.ab-aenderung { display: flex; flex-direction: column; gap: .6rem; margin-top: 1rem; }
.ab-aenderung[hidden] { display: none; }
.ab-aenderung textarea { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: #fff; }
.ab-aenderung .btn { align-self: flex-start; }
.abnahme.entschieden { animation: auf .4s ease both; }
.p-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 2.4rem; }
.p-bereich { padding: 1.3rem; border-radius: var(--radius); background: var(--flaeche); border: 1px solid var(--linie); }
.p-bereich h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.15rem; }
.p-bereich h2 .ico { color: var(--orange); }
.neuigkeiten, .dateien, .ab-erledigt { list-style: none; display: flex; flex-direction: column; }
.neuigkeiten li { padding: .7rem 0; border-top: 1px solid var(--linie); }
.neuigkeiten time { font-size: .78rem; color: var(--leise); }
.neuigkeiten a { font-size: .88rem; color: var(--orange); }
.dateien a { display: flex; align-items: center; gap: .6rem; padding: .65rem .3rem; border-top: 1px solid var(--linie); text-decoration: none; }
.dateien a:hover { background: var(--orange-blass); }
.dateien a span { flex: 1; overflow-wrap: anywhere; }
.dateien small { color: var(--leise); white-space: nowrap; }
.ab-erledigt li { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .65rem 0; border-top: 1px solid var(--linie); }
@media (max-width: 760px) {
  .pb-werkzeuge { grid-template-columns: 1fr; }
  .pb-kopf { flex-wrap: wrap; }
  .pb-fortschritt { max-width: none; margin-left: 0; width: 100%; }
  .ms-aufgaben { padding-left: .4rem; }
}

/* ------------------------------------------------ Mail an Kunden (Admin) */
.mail-box.hat-neues { border: 2px solid var(--orange); }
.mail-zahl { font-size: .95rem; }
.mail-zahl b { font: 700 1.4rem var(--kopf); color: var(--orange); margin-right: .2rem; }
.mail-punkte { list-style: none; display: flex; flex-direction: column; gap: .4rem; padding: .8rem 1rem; border-radius: var(--radius-klein); background: var(--papier); }
.mail-punkte .haken.klein input:checked + span { text-decoration: none; color: inherit; }
.mail-punkte .haken.klein input:not(:checked) + span { text-decoration: line-through; color: var(--leise); }
.mail-vorschau { white-space: pre-wrap; font: .9rem/1.55 var(--fliess); padding: 1rem; border-radius: var(--radius-klein); background: var(--papier); border-left: 4px solid var(--orange); }
.mail-box .btn { align-self: flex-start; }

/* ------------------------------------------------ Einführung (Tour) */
.tour-fang { position: fixed; inset: 0; z-index: 80; }
.tour-loch {
  position: fixed; z-index: 81; border-radius: 18px; pointer-events: none;
  box-shadow: 0 0 0 4px var(--orange), 0 0 0 200vmax rgba(10, 10, 11, .74);
  transition: top .45s cubic-bezier(.2, .7, .2, 1), left .45s cubic-bezier(.2, .7, .2, 1), width .45s cubic-bezier(.2, .7, .2, 1), height .45s cubic-bezier(.2, .7, .2, 1);
  opacity: 0;
}
.tour-an .tour-loch { opacity: 1; transition-property: top, left, width, height, opacity; }
.tour-blase {
  position: fixed; z-index: 82; width: min(320px, calc(100vw - 24px)); padding: 1.1rem 1.2rem;
  border-radius: 18px; background: var(--flaeche); color: var(--text); box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .6);
  opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s;
}
.tour-blase.da { opacity: 1; transform: none; }
.tour-blase p { font: 700 1.25rem/1.25 var(--kopf); text-transform: uppercase; margin: .3rem 0 1rem; }
.tour-zahl { font: 700 .72rem var(--kopf); letter-spacing: .14em; color: var(--orange); }
.tour-knoepfe { display: flex; justify-content: space-between; align-items: center; }

/* ------------------------------------------------ Termin */
fieldset { border: 0; display: flex; flex-direction: column; gap: .5rem; }
legend { font-size: .86rem; font-weight: 500; margin-bottom: .4rem; }
.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip { cursor: pointer; font-weight: 400; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: inline-block; padding: .55rem .95rem; border-radius: 999px; border: 1.5px solid var(--linie); transition: all var(--tempo); }
.chip:hover span { border-color: var(--orange); }
.chip input:checked + span { background: var(--orange); border-color: var(--orange); color: var(--schwarz); font-weight: 500; }
.chip input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 2px; }
.termin-karte { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; padding: 1.1rem 1.3rem; border-radius: var(--radius); background: var(--schwarz); color: #f1eee9; }
.termin-karte > div { flex: 1; display: flex; flex-direction: column; }
.termin-karte b { font: 700 1.2rem var(--kopf); text-transform: uppercase; }
.termin-karte span { color: #b9b5ad; }
.termin-karte .schritt-ico { width: 52px; height: 52px; margin: 0; box-shadow: none; }
.termin-karte .btn-leise { border-color: rgba(255, 255, 255, .25); color: #fff; }
.termin-wahl { margin-bottom: 2.4rem; padding: 1.4rem; border-radius: var(--radius); background: var(--schwarz); color: #f1eee9; }
.termin-wahl h2 { color: var(--orange); text-transform: uppercase; }
.termin-wahl .leise { color: #b9b5ad; margin-bottom: 1rem; }
.termin-optionen { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.termin-option { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; padding: 1rem 1.1rem; border-radius: var(--radius-klein); border: 2px solid rgba(255, 255, 255, .16); background: transparent; color: inherit; cursor: pointer; text-align: left; transition: all var(--tempo); }
.termin-option .ico { color: var(--orange); margin-bottom: .3rem; }
.termin-option b { font: 700 1.2rem var(--kopf); text-transform: uppercase; }
.termin-option span { color: #b9b5ad; }
.termin-option:hover { border-color: var(--orange); }
.termin-option.gewaehlt { border-color: var(--orange); background: rgba(247, 127, 0, .15); }
.termin-buchen { margin-top: 1rem; }
.termin-wahl .link { color: #b9b5ad; margin-top: .8rem; }
.termin-pille { position: fixed; z-index: 20; top: 120px; left: 50%; transform: translateX(-50%); background: var(--schwarz); color: #fff; border-color: var(--schwarz); }
.termin-pille .ico { color: var(--orange); }
.termin-pille:hover { transform: translateX(-50%) translateY(-1px); background: #2a2a2e; border-color: #2a2a2e; }
.termin-felder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 760px) { .termin-felder { grid-template-columns: 1fr; } }

/* ------------------------------------------------ Angebots-Editor */
.ae-start { margin: 1rem 0 .4rem; }
.ae-schalter { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 1.2rem; }
.ae-wahl { cursor: pointer; }
.ae-wahl input { position: absolute; opacity: 0; pointer-events: none; }
.ae-wahl span { display: flex; flex-direction: column; gap: .2rem; height: 100%; padding: 1rem 1.1rem; border-radius: var(--radius-klein); border: 2px solid var(--linie); transition: all var(--tempo); }
.ae-wahl b { font: 700 1.1rem var(--kopf); text-transform: uppercase; }
.ae-wahl small { color: var(--leise); }
.ae-wahl input:checked + span { border-color: var(--orange); background: #fffaf3; }
.ae-wahl input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 2px; }
.ae-raster { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.ae-vorschau { position: sticky; top: 80px; }
.ae-vorschau .btn { width: 100%; margin-top: 1.2rem; }
.ae-hinweis { color: #b9b5ad; text-align: center; margin-top: .6rem; }
.ae-gruppe { border: 0; padding: 0; margin-bottom: 1.2rem; }
.ae-gruppe + .ae-gruppe { border-top: 1px dashed var(--linie); padding-top: 1.2rem; }
.ae-gruppe-kopf { display: flex; gap: .8rem; align-items: center; margin-bottom: .3rem; }
.ae-gruppen-titel { font-weight: 500; }
.ae-liste { display: flex; flex-direction: column; gap: 8px; margin: .8rem 0; }
.ae-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 130px auto auto; gap: 8px; align-items: start; padding: .6rem; border-radius: var(--radius-klein); background: var(--papier); }
.ae-zeile[data-art=zusatz], .ae-zeile[data-art=pflicht] { grid-template-columns: minmax(0, 1fr) 130px auto; }
.ae-felder { display: flex; flex-direction: column; gap: 6px; }
.ae .ae-felder input, .ae .ae-preis input { padding: .55rem .7rem; }
.ae .ae-beschreibung { font-size: .9rem; }
.ae-preis { flex-direction: row; align-items: center; gap: .3rem; }
.ae .ae-preis input { text-align: right; }
.ae .ae-preis.ungueltig input { border-color: var(--rot); box-shadow: 0 0 0 3px rgba(225, 6, 0, .12); }
.ae-empf { flex-direction: row; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 400; color: var(--leise); cursor: pointer; padding-top: .55rem; white-space: nowrap; }
.ae-empf input { accent-color: var(--orange); width: 16px; height: 16px; }
.ae-weg { display: grid; place-items: center; width: 34px; height: 34px; margin-top: 2px; border: 0; border-radius: 50%; background: transparent; color: var(--leise); cursor: pointer; }
.ae-weg:hover { background: rgba(225, 6, 0, .1); color: var(--rot); }
.ae-quelle { margin-top: 1rem; }
@media (max-width: 960px) {
  .ae-raster { grid-template-columns: 1fr; }
  .ae-vorschau { position: static; }
}
@media (max-width: 600px) {
  .ae-schalter { grid-template-columns: 1fr; }
  .ae-zeile, .ae-zeile[data-art=zusatz], .ae-zeile[data-art=pflicht] { grid-template-columns: 1fr auto; }
  .ae-felder { grid-column: 1 / -1; }
}

/* ------------------------------------------------ Konzeptentwurf: Interessen */
.interesse-karte { cursor: pointer; display: block; font-weight: 400; }
.interesse-karte input { position: absolute; opacity: 0; pointer-events: none; }
.ik-innen { position: relative; height: 100%; display: flex; flex-direction: column; gap: .45rem; padding: 1.3rem 1.2rem 1.1rem;
  border-radius: var(--radius); background: var(--flaeche); border: 2px solid var(--linie);
  transition: border-color var(--tempo), transform var(--tempo), box-shadow var(--tempo), background var(--tempo); }
.interesse-karte:hover .ik-innen { transform: translateY(-3px); box-shadow: var(--schatten); }
.ik-innen b { font: 700 1.3rem/1.15 var(--kopf); text-transform: uppercase; }
.ik-text { color: var(--leise); font-size: .93rem; flex: 1; }
.ik-fuss { display: flex; align-items: center; justify-content: space-between; margin-top: .4rem; padding-top: .8rem; border-top: 1px solid var(--linie); }
.ik-label { font-size: .85rem; color: var(--leise); }
.interesse-karte input:checked + .ik-innen { border-color: var(--orange); background: #fffaf3; box-shadow: 0 0 0 4px var(--orange-blass); }
.interesse-karte input:checked + .ik-innen .ik-label { color: var(--text); font-weight: 500; }
.interesse-karte input:checked + .ik-innen .o-check { background: var(--orange); border-color: var(--orange); color: var(--schwarz); transform: scale(1.08); }
.interesse-karte input:focus-visible + .ik-innen { outline: 3px solid var(--orange); outline-offset: 3px; }
.interesse-karte input:disabled + .ik-innen { cursor: default; transform: none; box-shadow: none; }
.i-alles { margin-top: 1.4rem; }
.i-leer { color: #b9b5ad; }
.ae.entwurf .ae-preis, .ae.entwurf [data-bereich=pflicht] { display: none; }
.ae-nur-entwurf { display: none; }
.ae.entwurf .ae-nur-entwurf { display: block; margin-bottom: .6rem; }
.ae.entwurf .ae-zeile { grid-template-columns: minmax(0, 1fr) auto auto; }
.ae.entwurf .ae-zeile[data-art=zusatz] { grid-template-columns: minmax(0, 1fr) auto; }