@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/montserrat-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/montserrat-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/montserrat-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/montserrat-latin-600-normal.woff2") format("woff2"); }
/* Layout: petrol header with logos and a brush edge into the light page (as on the Webcademy landing page),
   then a two-column workspace (point list left, working area right); stacks on phones.
   One deliberate light look, matching the landing pages. */
:root {
  --p: #1d545d;
  --g: #eebc69;
  --g-ink: #8a6420;
  --bg: #f6f5f2;
  --w: #ffffff;
  --sand: #e5e2db;
  --blue: #b5d0d4;
  --blue2: #dce9eb;
  --ink: #333d39;
  --grey: #646d69;
  --line: rgba(29, 84, 93, .14);
  --err: #a63d2c;
  --err-soft: #f8e3df;
  --ok: #2c7552;
  --f1: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --f2: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Cpath d='M5.4 5.5L7.9 8l-2.5 2.5M8.3 5.5L10.8 8l-2.5 2.5' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.8 2.7 6.2-6.4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --brushh: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20100%20100%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20fill=%22%23000%22%20fill-rule=%22evenodd%22%20d=%22M99.96,99.97%20L0.00,99.97%20L0.00,65.78%20L0.55,65.61%20L1.06,65.14%20L1.50,64.26%20L1.84,62.77%20L1.92,62.30%20L2.01,60.95%20L2.37,60.04%20L2.49,59.53%20L2.60,58.65%20L2.90,54.12%20L3.14,52.88%20L3.32,50.95%20L3.54,49.93%20L3.69,48.72%20L3.94,47.36%20L4.04,46.55%20L4.15,44.73%20L4.24,44.12%20L4.54,42.84%20L5.20,41.42%20L5.76,39.17%20L5.93,38.95%20L6.36,38.64%20L6.78,38.62%20L7.33,38.76%20L7.84,38.74%20L8.67,38.31%20L9.28,37.59%20L9.49,37.21%20L9.75,36.95%20L10.47,35.97%20L10.71,35.81%20L11.57,35.69%20L13.18,35.78%20L14.54,35.74%20L14.66,35.64%20L14.75,35.47%20L15.01,34.12%20L15.27,33.45%20L15.40,33.24%20L15.97,32.65%20L17.37,32.15%20L18.69,32.00%20L19.13,31.76%20L19.24,31.49%20L19.33,30.81%20L19.41,29.59%20L19.47,29.19%20L19.48,28.58%20L19.74,25.74%20L19.83,25.20%20L19.98,24.66%20L20.17,23.53%20L20.46,22.77%20L20.60,22.23%20L20.97,21.44%20L21.38,20.88%20L21.61,20.79%20L21.74,20.88%20L21.82,21.08%20L21.73,22.09%20L21.60,22.77%20L21.39,23.51%20L21.24,24.46%20L21.02,25.26%20L20.85,26.68%20L20.57,28.18%20L20.32,31.22%20L20.28,32.57%20L20.34,33.51%20L20.41,33.92%20L20.53,34.26%20L20.67,34.39%20L20.81,34.39%20L21.52,33.31%20L22.01,32.70%20L22.33,32.55%20L22.71,32.58%20L22.91,32.77%20L23.16,33.51%20L23.24,33.92%20L23.27,34.46%20L23.25,34.73%20L23.14,34.93%20L22.71,35.11%20L22.50,35.34%20L22.29,35.78%20L22.09,36.55%20L21.95,36.82%20L21.78,37.01%20L21.44,37.21%20L21.31,37.36%20L21.33,37.64%20L21.69,38.65%20L21.69,39.26%20L21.60,39.73%20L21.20,40.81%20L20.96,41.28%20L20.76,42.03%20L20.76,42.54%20L20.93,42.84%20L21.14,42.97%20L21.61,43.09%20L22.12,43.49%20L22.84,43.82%20L23.39,44.18%20L23.64,44.21%20L23.94,44.02%20L24.15,43.69%20L24.32,43.02%20L24.56,42.36%20L24.65,41.42%20L24.62,40.65%20L24.49,40.42%20L24.15,40.32%20L22.88,40.37%20L22.50,40.29%20L22.36,40.20%20L22.25,40.00%20L22.25,39.72%20L22.33,39.37%20L22.59,38.65%20L23.14,37.87%20L23.69,37.70%20L23.85,37.57%20L23.99,37.30%20L24.16,36.76%20L24.36,36.53%20L24.62,36.45%20L25.81,36.45%20L26.23,36.35%20L27.08,35.71%20L27.54,35.15%20L28.05,34.96%20L28.22,34.98%20L28.64,35.19%20L29.07,35.82%20L29.48,36.82%20L29.63,37.43%20L29.85,37.97%20L30.07,38.99%20L30.38,39.56%20L30.51,39.70%20L30.64,39.72%20L30.79,39.59%20L31.48,38.56%20L32.20,38.13%20L32.58,38.10%20L33.18,38.46%20L33.56,39.28%20L33.76,40.34%20L34.15,41.50%20L34.58,42.40%20L34.96,42.98%20L35.47,43.50%20L35.68,43.60%20L36.06,43.59%20L36.42,43.45%20L37.37,42.36%20L37.75,41.76%20L38.05,41.42%20L38.60,40.54%20L38.86,40.32%20L39.32,40.29%20L39.76,40.41%20L39.97,40.54%20L40.30,40.89%20L40.76,41.13%20L41.17,41.49%20L41.53,41.54%20L41.74,41.45%20L42.20,40.91%20L42.48,40.20%20L42.46,39.93%20L42.27,39.53%20L42.23,39.32%20L42.26,38.92%20L42.33,38.60%20L42.50,38.36%20L42.84,38.15%20L42.97,38.16%20L43.09,38.31%20L43.31,38.78%20L43.43,38.92%20L43.87,39.19%20L43.96,39.32%20L43.97,39.46%20L43.89,39.80%20L43.31,40.77%20L43.01,41.58%20L42.83,41.89%20L42.60,43.45%20L42.45,45.34%20L42.45,47.09%20L42.38,47.77%20L42.36,49.66%20L42.36,50.54%20L42.44,51.76%20L42.56,52.43%20L42.64,52.64%20L42.75,52.77%20L42.88,52.83%20L43.01,52.80%20L43.39,52.25%20L43.98,51.62%20L44.36,51.41%20L44.92,50.97%20L45.47,50.91%20L45.72,51.01%20L45.85,51.15%20L46.10,52.14%20L46.53,53.24%20L46.86,53.55%20L47.08,53.58%20L47.25,53.47%20L47.46,53.18%20L48.01,52.02%20L48.17,51.42%20L48.41,50.81%20L48.63,49.32%20L48.86,48.79%20L48.98,48.31%20L49.38,47.43%20L49.69,46.89%20L49.83,46.52%20L50.89,44.86%20L51.07,44.32%20L51.27,43.95%20L51.46,42.91%20L51.69,42.22%20L51.86,41.28%20L52.08,40.70%20L52.29,39.79%20L52.48,39.32%20L52.67,38.53%20L52.93,37.91%20L53.09,37.32%20L53.31,36.93%20L53.56,36.18%20L54.32,34.97%20L54.75,34.53%20L54.96,34.48%20L55.04,34.66%20L54.99,35.00%20L54.75,35.37%20L54.62,35.77%20L54.32,36.38%20L54.14,36.96%20L53.94,37.32%20L53.49,38.45%20L53.35,38.99%20L53.09,39.49%20L52.92,40.20%20L52.71,40.71%20L52.51,41.62%20L52.36,42.03%20L52.26,42.57%20L52.22,43.58%20L52.32,44.05%20L52.66,44.80%20L53.35,45.81%20L53.52,46.17%20L54.12,47.09%20L54.60,48.04%20L54.86,49.19%20L54.75,50.07%20L54.85,51.01%20L55.18,52.43%20L55.38,53.11%20L55.56,54.19%20L55.82,55.00%20L56.06,56.42%20L56.26,57.09%20L56.41,58.18%20L56.66,58.99%20L56.77,59.73%20L57.07,60.95%20L57.19,61.76%20L57.45,62.50%20L57.63,63.31%20L57.75,63.59%20L58.05,63.97%20L59.03,64.29%20L59.41,64.27%20L60.93,63.91%20L61.23,63.90%20L61.44,63.97%20L61.57,64.11%20L61.67,64.32%20L61.79,64.80%20L61.99,65.30%20L62.21,66.28%20L62.49,66.96%20L62.67,67.12%20L62.84,67.02%20L63.24,65.07%20L63.35,63.11%20L63.66,60.61%20L63.92,56.55%20L63.96,56.35%20L64.38,55.34%20L64.45,55.07%20L64.55,53.58%20L64.57,52.70%20L64.66,51.96%20L65.03,50.54%20L65.47,49.62%20L65.97,48.97%20L66.23,48.89%20L66.48,48.94%20L66.59,49.05%20L66.67,49.26%20L66.72,49.86%20L66.55,51.49%20L65.85,54.39%20L65.78,55.14%20L65.71,58.38%20L65.64,59.46%20L65.41,61.55%20L65.17,62.50%20L65.13,62.91%20L65.22,64.46%20L65.04,66.01%20L64.87,68.18%20L64.73,68.85%20L64.70,69.53%20L64.73,69.66%20L64.79,69.73%20L64.92,69.73%20L65.21,69.57%20L65.51,68.76%20L65.72,68.35%20L65.85,67.93%20L66.31,67.02%20L66.63,66.55%20L67.38,65.88%20L67.56,65.61%20L67.54,65.41%20L67.29,64.93%20L66.78,64.49%20L66.71,64.32%20L66.68,64.05%20L66.69,63.59%20L66.89,62.23%20L67.01,60.47%20L67.08,53.92%20L67.13,53.65%20L67.25,53.47%20L68.05,53.48%20L68.17,53.38%20L68.35,53.06%20L68.52,53.01%20L68.69,53.24%20L68.88,53.92%20L68.95,54.39%20L68.96,55.00%20L68.92,55.74%20L68.70,57.57%20L68.46,60.47%20L68.47,61.42%20L68.56,61.69%20L68.77,61.80%20L68.94,61.73%20L69.24,61.38%20L69.62,61.29%20L69.79,61.49%20L69.84,61.82%20L69.79,62.30%20L69.58,63.05%20L69.36,64.19%20L69.14,64.80%20L69.04,65.54%20L68.81,66.28%20L68.69,66.96%20L68.59,68.38%20L68.65,68.99%20L68.73,69.29%20L69.03,69.72%20L69.19,69.80%20L69.41,69.80%20L69.79,69.68%20L70.22,69.05%20L70.57,68.18%20L70.69,67.70%20L70.83,66.69%20L71.06,65.61%20L71.19,64.26%20L71.40,63.67%20L71.59,62.84%20L71.91,62.23%20L72.08,62.03%20L72.33,61.91%20L72.58,61.99%20L72.72,62.16%20L72.78,62.43%20L72.89,63.45%20L72.95,64.93%20L73.21,66.76%20L73.32,67.16%20L73.65,67.84%20L73.77,67.99%20L74.11,68.26%20L74.32,68.24%20L74.75,67.83%20L75.64,66.70%20L76.57,66.17%20L76.78,66.17%20L76.91,66.25%20L77.18,66.76%20L77.21,66.96%20L77.16,67.38%20L77.03,67.91%20L76.81,69.59%20L76.56,70.68%20L76.44,71.97%20L76.25,72.91%20L76.17,73.78%20L76.18,74.39%20L76.27,74.82%20L76.62,75.41%20L76.95,75.65%20L77.25,75.71%20L77.58,75.66%20L77.71,75.57%20L78.05,75.10%20L78.26,74.93%20L78.39,74.94%20L78.90,75.24%20L79.07,75.23%20L79.18,75.14%20L79.32,74.73%20L79.30,73.99%20L79.36,73.45%20L79.45,73.24%20L79.74,72.91%20L79.96,72.06%20L80.19,71.42%20L80.34,71.22%20L80.68,70.99%20L81.21,70.41%20L81.33,70.20%20L81.57,69.13%20L81.77,68.65%20L81.95,68.06%20L82.20,67.54%20L82.54,66.24%20L82.71,64.79%20L83.01,63.58%20L83.13,62.77%20L83.38,62.09%20L83.55,61.28%20L83.77,60.70%20L83.99,59.73%20L84.20,59.26%20L84.36,58.53%20L85.03,56.82%20L85.18,56.28%20L85.77,55.07%20L86.19,54.58%20L86.38,54.26%20L86.65,53.99%20L86.89,53.51%20L87.33,52.82%20L87.71,52.38%20L87.84,52.30%20L88.31,52.20%20L89.11,52.20%20L89.66,52.28%20L90.00,52.38%20L91.19,52.99%20L91.63,53.51%20L91.86,53.90%20L92.10,54.19%20L92.50,54.80%20L92.88,55.52%20L93.18,57.09%20L93.26,57.97%20L93.28,60.20%20L93.25,61.01%20L93.18,61.76%20L92.98,62.64%20L92.90,63.24%20L92.67,64.05%20L92.57,65.00%20L92.52,66.35%20L92.49,68.85%20L92.52,73.11%20L92.58,74.26%20L92.71,74.82%20L93.09,75.23%20L93.52,75.37%20L94.11,75.36%20L95.25,75.00%20L96.02,74.25%20L96.19,73.95%20L96.36,73.38%20L96.48,73.21%20L96.82,73.01%20L97.29,73.03%20L97.63,72.92%20L98.11,72.09%20L98.73,71.30%20L99.34,71.01%20L99.66,70.68%20L99.96,70.55%20L99.96,99.97Z%20M36.88,62.30%20L37.60,61.82%20L39.34,59.53%20L39.97,58.85%20L40.51,58.50%20L40.96,58.04%20L41.35,56.89%20L41.48,56.28%20L41.61,55.24%20L41.73,54.73%20L41.87,53.51%20L41.97,51.08%20L41.92,48.72%20L41.82,47.84%20L41.58,47.23%20L41.51,46.96%20L41.19,43.92%20L41.02,43.04%20L40.93,42.75%20L40.75,42.43%20L40.35,41.96%20L40.21,41.86%20L39.92,41.82%20L39.66,41.91%20L39.15,42.45%20L39.01,42.77%20L38.80,43.45%20L38.75,43.85%20L38.88,44.86%20L38.89,45.41%20L38.55,47.09%20L38.36,47.70%20L38.14,48.75%20L37.94,49.26%20L37.67,49.79%20L37.54,49.91%20L37.25,49.79%20L37.12,49.61%20L37.01,49.19%20L36.91,48.99%20L36.74,48.88%20L36.57,48.89%20L36.36,48.99%20L36.23,49.14%20L35.92,49.73%20L35.78,50.34%20L35.66,52.03%20L35.57,54.66%20L35.57,55.68%20L35.64,56.69%20L35.64,57.97%20L35.75,60.68%20L35.82,60.95%20L36.00,61.28%20L36.10,61.69%20L36.23,61.96%20L36.69,62.28%20L36.88,62.30Z%20M32.66,48.04%20L32.78,47.84%20L32.85,47.36%20L32.79,46.22%20L32.37,44.38%20L32.29,44.16%20L32.16,44.09%20L32.03,44.32%20L31.98,44.73%20L32.08,46.49%20L32.24,47.30%20L32.53,47.97%20L32.66,48.04Z%20M34.81,64.26%20L35.17,63.75%20L35.28,63.51%20L35.48,62.16%20L35.44,60.74%20L35.38,60.20%20L35.30,58.51%20L35.21,58.13%20L35.13,58.05%20L35.01,58.24%20L34.89,58.92%20L34.60,61.42%20L34.53,62.57%20L34.51,63.45%20L34.54,63.92%20L34.66,64.28%20L34.81,64.26Z%20M78.92,79.26%20L79.06,79.05%20L79.10,78.58%20L79.00,77.91%20L78.90,77.72%20L78.77,77.66%20L78.69,77.74%20L78.61,77.97%20L78.60,78.72%20L78.73,79.20%20L78.81,79.27%20L78.92,79.26Z%22/%3E%3C/svg%3E");
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
body { background: var(--bg); color: var(--grey); font-family: var(--f2); font-size: 15.5px; line-height: 1.8; -webkit-font-smoothing: antialiased; }
.wrap { max-width: 1208px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (min-width: 720px) { .wrap { padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); } }
h1, h2, h3 { font-family: var(--f1); font-weight: 500; color: var(--p); text-wrap: balance; margin: 0; letter-spacing: .005em; }
h2 { text-transform: uppercase; }
h2 em, h1 em { font-style: normal; color: var(--bg); background: var(--p); padding: 0 .22em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
p { margin: 0; }
strong, b { font-weight: 600; color: var(--ink); }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--p); outline-offset: 3px; box-shadow: 0 0 0 5px rgba(238, 188, 105, .55); }
.band :focus-visible { outline-color: var(--g); box-shadow: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

/* ---------- header ---------- */
.band { background: var(--p); color: var(--bg); position: relative; }
.band .bar { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; padding-block: 22px 0; }
.band .cm-logo { height: 34px; width: auto; display: block; }
.band .hero { display: flex; flex-wrap: wrap; gap: 18px 40px; align-items: center; padding-block: 30px 8px; }
.band .wcd-logo { width: clamp(150px, 18vw, 220px); height: auto; display: block; }
.band .hero-text { display: grid; gap: 10px; min-width: 0; }
.kicker { display: flex; align-items: center; gap: 14px; font-family: var(--f2); font-weight: 600; text-transform: uppercase; letter-spacing: .38em; font-size: 12px; line-height: 1.6; color: var(--g); }
.kicker::before { content: ""; width: 40px; height: 1px; background: var(--g); flex: none; }
.band h1 { color: var(--bg); text-transform: uppercase; font-size: clamp(24px, 3vw, 38px); line-height: 1.2; }
.band h1 em { background: var(--bg); color: var(--p); }
.brush { height: clamp(44px, 7vw, 72px); background: var(--p); position: relative; overflow: hidden; }
.brush::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: -1px; height: 100%; background: var(--bg); -webkit-mask: var(--brushh) 0 0/100% 100% no-repeat; mask: var(--brushh) 0 0/100% 100% no-repeat; }
.seg { display: flex; border: 1px solid rgba(246, 245, 242, .6); }
.seg button { border: 0; background: transparent; color: var(--bg); font-family: var(--f2); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 10px 14px; cursor: pointer; }
.seg button + button { border-left: 1px solid rgba(246, 245, 242, .6); }
.seg button[aria-pressed="true"] { background: var(--bg); color: var(--p); }

main.wrap { padding-block: 26px 90px; }
.notice { background: var(--w); padding: 22px 26px; color: var(--ink); }
.notice.err { background: var(--err-soft); color: var(--err); }

/* ---------- participant workspace ---------- */
.workspace { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 44px; align-items: start; }
@media (max-width: 880px) { .workspace { grid-template-columns: minmax(0, 1fr); gap: 30px; } }
.fp-nav { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 880px) { .fp-nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .fp-nav button { padding: 14px 14px 12px; gap: 8px; } .fp-nav button[aria-current="step"] { box-shadow: 6px 6px 0 0 var(--g); margin: 0 6px 6px 0; } .fp-nav .t { font-size: 14px; } .fp-nav .num { font-size: 9.5px; letter-spacing: .1em; padding: 3px 6px; } .fp-nav .pill { font-size: 9.5px; letter-spacing: .08em; padding: 3px 6px; } .fp-nav-note { grid-column: 1 / -1; } }
.fp-nav button { text-align: left; border: 1px solid transparent; background: var(--w); padding: 20px 20px 18px; cursor: pointer; display: grid; gap: 10px; justify-items: start; transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease; }
.fp-nav button:hover { border-color: var(--line); }
.fp-nav button[aria-current="step"] { border-color: var(--p); box-shadow: 8px 8px 0 0 var(--g); margin: 0 8px 8px 0; }
.num { display: inline-block; background: var(--blue); color: var(--p); font-family: var(--f2); font-weight: 600; font-size: 11.5px; letter-spacing: .3em; padding: 4px 7px 4px 11px; line-height: 1.4; text-transform: uppercase; }
.fp-nav .t { font-family: var(--f1); font-weight: 500; text-transform: uppercase; font-size: 16px; line-height: 1.3; color: var(--p); letter-spacing: .01em; }
.fp-nav-note { font-size: 13px; line-height: 1.6; color: var(--grey); padding: 4px 2px; border-left: 1px solid var(--g); padding-left: 14px; }

.pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f2); font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; padding: 4px 9px; line-height: 1.4; width: fit-content; background: var(--blue2); color: var(--p); }
.pill.s-none { background: transparent; color: var(--grey); border: 1px dashed rgba(100, 109, 105, .55); }
.pill.s-eingereicht { background: var(--sand); color: var(--ink); }
.pill.s-feedback { background: var(--blue); color: var(--p); }
.pill.s-umgesetzt { background: var(--p); color: var(--g); }

.panel { display: grid; gap: 30px; min-width: 0; }
.panel-head { display: grid; gap: 14px; justify-items: start; }
.panel-head .k { display: flex; align-items: center; gap: 14px; font-family: var(--f2); font-weight: 600; text-transform: uppercase; letter-spacing: .32em; font-size: 12px; color: var(--g-ink); }
.panel-head .k::before { content: ""; width: 32px; height: 1px; background: var(--g); flex: none; }
.panel-head h2 { font-size: clamp(26px, 3vw, 40px); line-height: 1.2; }
.panel-head p { max-width: 62ch; font-size: 16px; line-height: 1.75; }
#statusLine { display: grid; gap: 14px; justify-items: start; margin-top: 4px; }
@media (max-width: 560px) { .panel-head .k, .kicker { letter-spacing: .22em; } }
.next { border-left: 1px solid var(--g); padding: 4px 0 4px 24px; font-family: var(--f1); font-weight: 300; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.5; color: var(--p); max-width: 52ch; }

.card { background: var(--w); padding: clamp(24px, 4vw, 40px); display: grid; gap: 24px; min-width: 0; }
.card h3 { font-size: 19px; text-transform: uppercase; letter-spacing: .01em; }
.sub { font-family: var(--f2); font-weight: 600; font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--p); }

.field { display: grid; gap: 8px; }
.field { border: 0; padding: 0; margin: 0; min-width: 0; }
.field > label, .field legend { font-family: var(--f2); font-weight: 600; font-size: 15px; color: var(--p); line-height: 1.45; padding: 0; }
.field legend { margin-bottom: 8px; }
.opt { display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--grey); border: 1px dashed rgba(100, 109, 105, .55); padding: 0 6px; vertical-align: 2px; }
.form-top { display: grid; gap: 8px; }
.err-text { font-size: 13.5px; line-height: 1.5; color: var(--err); font-weight: 500; }
.field [aria-invalid="true"], .field input[aria-invalid="true"] { border-color: var(--err) !important; background: #fdf6f4 !important; }
.affix { display: flex; align-items: stretch; }
.affix input { flex: 1; min-width: 0; }
.affix span { display: grid; place-items: center; padding: 0 14px; background: var(--blue2); color: var(--p); font-size: 13.5px; font-weight: 600; border: 1px solid var(--line); border-left: 0; white-space: nowrap; }
.count.warn { color: var(--err); }
.draft { font-size: 12.5px; }
.req { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: rq; }
.req li { position: relative; padding-left: 38px; font-size: 15px; line-height: 1.65; color: var(--ink); counter-increment: rq; }
.req li::before { content: counter(rq); position: absolute; left: 0; top: 1px; width: 24px; height: 24px; display: grid; place-items: center; background: var(--blue); color: var(--p); font-weight: 600; font-size: 12px; }
.drop.has-file { border-style: solid; border-color: var(--p); background: var(--w); }
details.older { border-top: 0; }
details.older > summary { padding: 0 0 6px; justify-content: flex-start; border-bottom: 1px solid var(--g); width: fit-content; }
details.older > summary::after { width: 22px; height: 22px; }
details.older > .history { margin-top: 22px; }
.saved { display: block; margin-top: 6px; font-size: 12px; color: var(--ok); font-weight: 600; }
.field .hint { font-size: 14px; line-height: 1.6; color: var(--grey); margin-top: -4px; }
.field input[type="text"], .field input[type="number"], .field input[type="date"], .field textarea, .field select {
  border: 1px solid var(--line); background: var(--bg); border-radius: 0; padding: 12px 14px; width: 100%; min-height: 50px; color: var(--ink); font-family: var(--f2); font-size: 15.5px; line-height: 1.6; outline: none; transition: border-color .2s ease;
}
.field input:focus, .field textarea:focus { border-color: var(--p); box-shadow: 0 0 0 3px rgba(238, 188, 105, .45); }
.field input:focus-visible, .field textarea:focus-visible { outline: none; }
.field textarea { min-height: 96px; resize: vertical; }
.row2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px 28px; align-items: end; }
.radios { display: flex; gap: 24px; flex-wrap: wrap; }
.radios label { font-family: var(--f2); font-weight: 500; font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--ink); display: flex; gap: 10px; align-items: center; cursor: pointer; }
.radios input { accent-color: var(--p); width: 18px; height: 18px; }
.count { font-size: 12.5px; color: var(--grey); font-variant-numeric: tabular-nums; }

.actions { display: flex; flex-wrap: wrap; gap: 16px 22px; align-items: center; }
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 12px 24px; border-radius: 0; background: var(--w); color: var(--p); border: 1px solid var(--p); font-family: var(--f2); font-weight: 600; font-size: 13px; line-height: 1.2; text-transform: uppercase; letter-spacing: .08em; box-shadow: 10px 10px 0 0 var(--g); margin: 0 10px 10px 0; cursor: pointer; transition: color .3s ease, box-shadow .3s ease, transform .3s ease; }
.btn::after { content: ""; flex: none; width: 1.15em; height: 1.15em; background: currentColor; -webkit-mask: var(--arrow) center/contain no-repeat; mask: var(--arrow) center/contain no-repeat; }
.btn:hover { color: #a8742a; transform: translate(3px, 3px); box-shadow: 7px 7px 0 0 var(--g); }
.btn[disabled] { opacity: .55; cursor: progress; transform: none; }
.btn.sm { min-height: 42px; padding: 9px 16px; font-size: 11.5px; box-shadow: 6px 6px 0 0 var(--g); margin: 0 6px 6px 0; }
.btn.sm:hover { transform: translate(2px, 2px); box-shadow: 4px 4px 0 0 var(--g); }
.textlink { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f2); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .18em; color: var(--p); border: 0; border-bottom: 1px solid var(--g); padding: 0 0 5px; background: none; cursor: pointer; transition: color .3s ease; }
.textlink:hover { color: #a8742a; }
.msg { font-size: 14px; }
.msg.err { color: var(--err); }
.msg.ok { color: var(--ok); }
.precheck { background: var(--sand); color: var(--ink); padding: 18px 22px; font-size: 14.5px; line-height: 1.65; border-left: 3px solid var(--g); }
.precheck b { color: var(--p); }
.precheck ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; }

.drop { border: 1.5px dashed var(--blue); padding: 30px 22px 26px; text-align: center; display: grid; gap: 12px; justify-items: center; background: var(--bg); transition: border-color .2s ease, background .2s ease; }
.drop.over { border-color: var(--p); background: var(--blue2); }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; }
.thumbs img { width: 100%; border: 1px solid var(--line); background: #fff; display: block; }
.checks, .checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.checks li, .checklist li { position: relative; padding-left: 34px; font-size: 15px; line-height: 1.65; color: var(--ink); }
.checks li::before, .checklist li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; background: var(--blue); }
.checks li::after, .checklist li::after { content: ""; position: absolute; left: 3px; top: 5px; width: 14px; height: 14px; background: var(--p); -webkit-mask: var(--check) center/contain no-repeat; mask: var(--check) center/contain no-repeat; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: st; }
.steps li { position: relative; padding-left: 44px; font-size: 15px; line-height: 1.7; color: var(--ink); counter-increment: st; }
.steps li::before { content: counter(st); position: absolute; left: 0; top: 0; width: 28px; height: 28px; display: grid; place-items: center; background: var(--p); color: var(--g); font-family: var(--f2); font-weight: 600; font-size: 12px; line-height: 1; }

/* ---------- feedback history ---------- */
.history { display: grid; gap: 22px; }
.history-head { display: flex; align-items: center; gap: 14px; font-family: var(--f2); font-weight: 600; text-transform: uppercase; letter-spacing: .32em; font-size: 12px; color: var(--g-ink); }
.history-head::before { content: ""; width: 32px; height: 1px; background: var(--g); flex: none; }
.fb { background: var(--w); padding: clamp(22px, 3.6vw, 36px); display: grid; gap: 22px; }
.fb.latest { box-shadow: 14px 14px 0 0 var(--blue); margin: 0 14px 14px 0; }
.fb.done { box-shadow: 14px 14px 0 0 var(--p); margin: 0 14px 14px 0; }
.fb-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 18px; align-items: baseline; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.fb-head b { font-family: var(--f1); font-weight: 500; text-transform: uppercase; font-size: 17px; letter-spacing: .02em; color: var(--p); }
.fb-head .when { font-size: 13px; color: var(--grey); font-variant-numeric: tabular-nums; }
.fb .sub { margin-bottom: 12px; display: block; }
.done-line { display: flex; align-items: center; gap: 12px; font-family: var(--f1); font-weight: 300; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; color: var(--p); border-left: 1px solid var(--g); padding-left: 20px; }
.done-mark { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--g); }
.done-mark svg { width: 15px; height: 15px; fill: none; stroke: var(--p); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.anregung { border-left: 1px solid var(--g); padding: 4px 0 4px 20px; font-family: var(--f1); font-weight: 300; font-size: 17px; line-height: 1.55; color: var(--p); }
.anregung b { font-family: var(--f2); font-weight: 600; font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--g-ink); display: block; margin-bottom: 4px; }
.thinking { display: flex; gap: 14px; align-items: center; color: var(--p); font-family: var(--f1); font-weight: 300; font-size: 18px; }
.dot { width: 10px; height: 10px; background: var(--g); animation: pulse 1.2s infinite ease-in-out; flex: none; }
@keyframes pulse { 50% { opacity: .3; transform: scale(.6) rotate(45deg); } }
@media (prefers-reduced-motion: reduce) { .dot { animation: none; } .btn, .fp-nav button { transition: none; } }
details.mine { border-top: 1px solid var(--line); }
details.mine summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0 0; font-family: var(--f2); font-weight: 600; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--p); }
details.mine summary::-webkit-details-marker { display: none; }
details.mine summary::after { content: ""; flex: none; width: 26px; height: 26px; background: linear-gradient(var(--p), var(--p)) center/11px 1.5px no-repeat, linear-gradient(var(--p), var(--p)) center/1.5px 11px no-repeat, var(--blue); }
details.mine[open] summary::after { background: linear-gradient(var(--p), var(--p)) center/11px 1.5px no-repeat, var(--blue); }
dl.kv { display: grid; grid-template-columns: minmax(130px, 210px) minmax(0, 1fr); gap: 0 20px; margin: 14px 0 0; font-size: 14.5px; line-height: 1.65; }
dl.kv dt { font-family: var(--f2); font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--p); padding: 12px 0; border-bottom: 1px solid var(--line); }
dl.kv dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); padding: 10px 0; border-bottom: 1px solid var(--line); }
@media (max-width: 560px) { dl.kv { grid-template-columns: minmax(0, 1fr); } dl.kv dt { border-bottom: 0; padding-bottom: 0; } }

/* ---------- owner overview ---------- */
@media (max-width: 600px) { .band .bar { padding-block: 16px 0; } .band .cm-logo { height: 26px; } .band .hero { padding-block: 18px 4px; gap: 12px 20px; flex-wrap: nowrap; } .band .wcd-logo { width: 104px; } .band h1 { font-size: 21px; } .kicker { font-size: 10.5px; letter-spacing: .24em; } .kicker::before { width: 22px; } .brush { height: 36px; } .seg button { padding: 8px 10px; font-size: 10px; } }
.ov-head { display: flex; flex-wrap: wrap; gap: 14px 20px; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.ov-head h2 { font-size: clamp(22px, 2.4vw, 30px); }
.tablebox { overflow-x: auto; background: var(--w); box-shadow: 14px 14px 0 0 var(--blue); margin: 0 14px 14px 0; }
table.ov { border-collapse: collapse; width: 100%; min-width: 760px; font-size: 14px; }
table.ov th { font-family: var(--f2); text-align: left; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--p); font-weight: 600; padding: 16px 16px; border-bottom: 1px solid var(--line); background: var(--blue2); }
table.ov td { padding: 16px 16px; border-bottom: 1px solid var(--line); vertical-align: top; font-variant-numeric: tabular-nums; color: var(--ink); }
table.ov td .pill { margin-bottom: 6px; }
table.ov tr:last-child td { border-bottom: 0; }
table.ov tr.sel td { background: var(--bg); }
table.ov input[type="date"] { border: 1px solid var(--line); background: var(--bg); border-radius: 0; padding: 7px 10px; font-family: var(--f2); color: var(--ink); }
.who { display: grid; gap: 2px; }
.who b { font-weight: 600; color: var(--p); }
.who span { font-size: 12.5px; color: var(--grey); overflow-wrap: anywhere; }
.linkbtn { border: 0; background: none; color: var(--p); font-family: var(--f2); font-weight: 600; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; padding: 0 0 4px; border-bottom: 1px solid var(--g); }
.linkbtn:hover { color: var(--g-ink); }
.detail { margin-top: 40px; display: grid; gap: 24px; }
.vrow { border-top: 1px solid var(--line); padding-top: 18px; display: grid; gap: 10px; }
.tag { display: inline-block; font-family: var(--f2); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 2px 8px; background: var(--bg); border: 1px solid var(--line); color: var(--ink); }
.tag.ok { background: var(--blue); border-color: transparent; color: var(--p); }
.tag.no { background: var(--err-soft); border-color: transparent; color: var(--err); }
.tag.warn { background: var(--sand); border-color: transparent; color: var(--ink); }
.detail ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; font-size: 14.5px; line-height: 1.6; color: var(--ink); }
.detail ul li { position: relative; padding-left: 20px; }
.detail ul li::before { content: ""; position: absolute; left: 0; top: .8em; width: 11px; height: 1px; background: var(--g); }
.detail details .sub { display: block; margin-top: 18px; }
.sheet { max-width: 100%; border: 1px solid var(--line); background: #fff; display: block; }
.muted { color: var(--grey); font-size: 13.5px; line-height: 1.6; }

footer.foot { background: var(--p); color: rgba(246, 245, 242, .8); font-size: 12.5px; }
footer.foot .wrap { padding-block: 24px 28px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
footer.foot span:last-child { letter-spacing: .2em; text-transform: uppercase; font-size: 11px; color: var(--blue); }

/* FP 4 + logbook */
.step { display: grid; gap: 14px; }
.step.dim .step-h { opacity: .55; }
.step-h { display: flex; align-items: center; gap: 12px; margin: 0; font-family: var(--f1); font-weight: 500; text-transform: uppercase; font-size: 16px; color: var(--p); letter-spacing: .01em; }
.step-h span { width: 28px; height: 28px; display: grid; place-items: center; background: var(--p); color: var(--g); font-family: var(--f2); font-size: 12px; font-weight: 600; }
.howto { display: grid; gap: 10px; background: var(--bg); padding: 18px 20px; }
.howto code, .step code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; background: var(--blue2); color: var(--p); padding: 1px 6px; overflow-wrap: anywhere; }
details.paste { border-top: 0; }
details.paste > summary { padding: 4px 0; justify-content: flex-start; width: fit-content; }
details.paste > summary::after { width: 22px; height: 22px; }
details.paste > .field { margin-top: 12px; }
.loaded { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.loaded li { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; align-items: center; background: var(--blue2); padding: 10px 14px; font-size: 14px; color: var(--ink); }
.cgroup { display: grid; gap: 10px; margin-bottom: 18px; }
.cgroup-h { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.amp { display: inline-flex; align-items: center; gap: 7px; font-family: var(--f2); font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; padding: 3px 9px; }
.amp::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.amp.a-gruen { background: #e2f0e7; color: #2c6b48; }
.amp.a-gelb { background: #fbf0dc; color: #8a5a00; }
.amp.a-offen { background: var(--blue2); color: var(--p); }
.cands { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.cand { position: relative; display: flex; gap: 12px; align-items: flex-start; background: var(--bg); border: 1px solid var(--line); padding: 14px 16px; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.cand:hover { border-color: rgba(29, 84, 93, .4); }
.cand.on { background: var(--w); border-color: var(--p); box-shadow: 6px 6px 0 0 var(--g); margin: 0 6px 6px 0; }
.cand input { accent-color: var(--p); width: 18px; height: 18px; margin-top: 2px; flex: none; }
.cand-b { display: grid; gap: 4px; min-width: 0; }
.cand-h { display: flex; justify-content: space-between; gap: 10px; }
.cand-h b { color: var(--p); }
.pts { font-size: 12.5px; color: var(--grey); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cand-d { font-size: 13px; color: var(--ink); font-weight: 500; }
.cand-t { font-size: 13px; line-height: 1.55; color: var(--grey); }
.rc { display: grid; gap: 14px; border-top: 1px solid var(--line); padding-top: 18px; margin-top: 4px; }
.rc-h { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.rc-h b { font-family: var(--f1); font-weight: 500; text-transform: uppercase; font-size: 15px; color: var(--p); }
.nav-sep { margin-top: 10px; font-family: var(--f2); font-weight: 600; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--g-ink); display: flex; gap: 10px; align-items: center; }
.nav-sep::before { content: ""; width: 20px; height: 1px; background: var(--g); }
.fp-nav .nav-log .muted { font-size: 12.5px; }
@media (max-width: 880px) { .nav-sep { grid-column: 1 / -1; } }
.chiprow { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span { display: inline-block; padding: 9px 14px; border: 1px solid var(--line); background: var(--bg); font-size: 14px; color: var(--ink); transition: background .2s ease, border-color .2s ease; }
.chip input:checked + span { background: var(--p); border-color: var(--p); color: var(--bg); }
.chip input:focus-visible + span { outline: 2px solid var(--p); outline-offset: 3px; box-shadow: 0 0 0 5px rgba(238, 188, 105, .55); }
.chiprow[aria-invalid="true"] .chip span, .chip input[aria-invalid="true"] + span { border-color: var(--err); }
.logbar { display: flex; flex-wrap: wrap; gap: 12px 20px; justify-content: space-between; align-items: center; }
.field.search input { min-height: 42px; padding: 8px 12px; border: 1px solid var(--line); background: var(--w); width: min(280px, 100%); }
.fb.lc { gap: 14px; }
.fb.lc a, .detail td a { color: var(--p); text-decoration-color: var(--g); text-underline-offset: 3px; overflow-wrap: anywhere; }
.tl { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 1px solid var(--g); display: grid; gap: 8px; }
.tl li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; font-size: 14.5px; color: var(--ink); position: relative; }
.tl li::before { content: ""; position: absolute; left: -19px; top: .55em; width: 9px; height: 9px; background: var(--blue); }
.tl-d { color: var(--grey); font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .tl li { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.stepform { display: grid; gap: 14px; background: var(--bg); padding: 18px 20px; }
.tablebox.flat { box-shadow: none; margin: 0; border: 1px solid var(--line); }
.detail .tablebox table.ov { min-width: 680px; }

/* FP 1 packages */
.ptabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--p); }
.ptab { position: relative; border: 1px solid var(--line); border-bottom: 0; background: var(--bg); color: var(--p); font-family: var(--f2); font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 12px 16px; margin: 0 6px -1px 0; cursor: pointer; max-width: 100%; overflow-wrap: anywhere; text-align: left; }
.ptab[aria-selected="true"] { background: var(--p); color: var(--bg); border-color: var(--p); }
.ptab.has-err::after { content: ""; position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--err); }
.ptab[aria-selected="true"].has-err::after { background: #f3b4a8; }
.ptab.add { background: transparent; border-style: dashed; color: var(--p); }
.ptab.add:hover { background: var(--blue2); }
.ppanel { display: grid; gap: 20px; border: 1px solid var(--p); border-top: 0; padding: clamp(18px, 3vw, 28px); background: var(--w); }
.ppanel:focus-visible { outline: 2px solid var(--p); outline-offset: 3px; }
.affix.narrow { max-width: 320px; }
.rm-row { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; border-top: 1px solid var(--line); padding-top: 14px; font-size: 14px; color: var(--ink); }
.textlink.danger { color: var(--err); border-bottom-color: var(--err); }
.pk-sum { margin-top: 18px; }
.pk-sum .sub { display: block; }
@media (max-width: 560px) { .ptab { flex: 1 1 100%; margin-right: 0; } }
/* ---------- Ergänzungen für die WordPress-Version ---------- */
.tb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.tb-actions .who { font-size: 13px; color: rgba(246, 245, 242, .85); }
.tb-btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(246, 245, 242, .6); background: transparent; color: var(--bg); font-family: var(--f2); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 10px 14px; text-decoration: none; cursor: pointer; }
.tb-btn:hover { background: var(--bg); color: var(--p); }
.tb-btn.ghost { border-color: transparent; padding-inline: 4px; }
.tb-btn.ghost:hover { background: transparent; color: var(--g); }
.tb-btn svg { width: 14px; height: 14px; flex: none; }
@media (max-width: 600px) { .tb-actions .who { display: none; } .tb-btn { padding: 8px 10px; font-size: 10px; } }
.login-card { max-width: 460px; margin: 0 auto; }
.login-card form p { margin: 0 0 16px; display: grid; gap: 6px; }
.login-card label { font-family: var(--f2); font-weight: 600; font-size: 14px; color: var(--ink); }
.login-card input[type=text], .login-card input[type=password], .login-card input[type=email] { width: 100%; }
.login-card .login-remember label { display: inline-flex; gap: 8px; align-items: center; font-weight: 400; }
.login-card .login-submit { margin-top: 8px; }
.login-card .lost { margin-top: 6px; font-size: 14px; }
.pnote { font-size: 13px; color: var(--grey); margin-top: 6px; }
.pnote a { color: var(--p); }
.login-card input[type=text], .login-card input[type=password], .login-card input[type=email] { border: 1px solid var(--line); background: var(--bg); border-radius: 0; padding: 12px 14px; min-height: 50px; color: var(--ink); font-family: var(--f2); font-size: 15.5px; outline: none; }
.login-card input:focus { border-color: var(--p); box-shadow: 0 0 0 3px rgba(238, 188, 105, .45); }
.login-card .button-primary { position: relative; display: inline-flex; align-items: center; min-height: 50px; padding: 12px 24px; background: var(--w); color: var(--p); border: 1px solid var(--p); font-family: var(--f2); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; box-shadow: 10px 10px 0 0 var(--g); cursor: pointer; border-radius: 0; }
.login-card .button-primary:hover { color: #a8742a; transform: translate(3px, 3px); box-shadow: 7px 7px 0 0 var(--g); }

/* =========================================================
   Neue Oberfläche (0.2): klare Kastenarten, "Du bist hier"
   ========================================================= */
:root { --edge: #dde3e0; --field: #c9d2cf; --hint-bg: #dce9eb; --c-open: #eef0ef; --c-open-ink: #4f5855; --c-fb: #fbf1dd; --c-fb-ink: #7a5518; --c-done: #e3f1e9; --c-done-ink: #22603f; }
body { color: var(--ink); line-height: 1.6; font-size: 16px; }
main.wrap { padding-block: 36px 56px; }
h2 { text-transform: none; }
.muted { color: var(--grey); }
.small { font-size: 13px; }

/* Kopfzeile */
.topbar { background: var(--p); color: var(--bg); position: sticky; top: 0; z-index: 20; }
.topbar :focus-visible { outline: 2px solid var(--g); outline-offset: 2px; }
.tb-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--bg); text-decoration: none; }
.brand img { width: 34px; height: auto; display: block; }
.brand-w { font-family: var(--f1); font-weight: 600; font-size: 18px; letter-spacing: .08em; }
.brand-s { font-size: 13px; color: var(--blue); }
.topnav { display: flex; flex-wrap: wrap; align-items: stretch; gap: 4px 6px; font-size: 14px; }
.topnav a { color: var(--bg); text-decoration: none; padding: 20px 12px 17px; border-bottom: 3px solid transparent; }
.topnav a:hover { border-bottom-color: rgba(238, 188, 105, .5); }
.topnav a.dim { color: var(--blue); }
.topnav a.on { font-weight: 600; background: rgba(246, 245, 242, .14); border-bottom-color: var(--g); }
@media (max-width: 760px) {
  .tb-in { padding-block: 10px 0; }
  .brand-s { display: none; }
  .topnav { width: 100%; gap: 0; overflow-x: auto; flex-wrap: nowrap; }
  .topnav a { padding: 10px 10px 9px; white-space: nowrap; font-size: 13px; }
}

/* Die vier Kastenarten */
.box-action { background: var(--w); border: 1px solid var(--p); box-shadow: 10px 10px 0 0 var(--g); margin: 0 10px 10px 0; padding: clamp(20px, 3vw, 28px) clamp(20px, 3vw, 32px); display: grid; gap: 12px; }
.box-content { background: var(--w); border: 1px solid var(--edge); padding: clamp(18px, 3vw, 24px); display: grid; gap: 12px; min-width: 0; }
.box-hint { background: var(--hint-bg); padding: 22px 24px; display: grid; gap: 12px; }
.box-action h2, .box-content h2, .box-hint h2 { font-family: var(--f1); font-weight: 600; font-size: 17px; color: var(--p); }
.box-action h2 { font-size: clamp(20px, 2.4vw, 24px); }
.box-hint ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 14.5px; }
.box-hint p { font-size: 14.5px; }
.kick { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--g-ink); }
.kick.grey { color: var(--grey); }
.acts { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 4px; }

/* Knöpfe: gefüllt, ohne eigenen Schatten (der gelbe Schatten gehört dem Aktionskasten) */
.btn, .btn.sm { background: var(--p); color: #fff; border: 1px solid var(--p); box-shadow: none; margin: 0; min-height: 48px; text-decoration: none; letter-spacing: .06em; font-size: 13.5px; }
.btn.sm { min-height: 42px; font-size: 12px; }
.btn:hover, .btn.sm:hover { color: #fff; background: #143c43; transform: none; box-shadow: none; }
.btn-out { display: inline-flex; align-items: center; min-height: 42px; padding: 8px 16px; background: var(--w); color: var(--p); border: 1px solid var(--p); font: 600 13.5px/1.2 var(--f2); cursor: pointer; }
.btn-out:hover { background: var(--hint-bg); }
.textlink { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; padding-bottom: 3px; text-decoration: none; }

/* Status-Schildchen */
.pill { font-size: 11.5px; letter-spacing: .06em; padding: 5px 10px; border: 0; }
.pill.s-none { background: var(--c-open); color: var(--c-open-ink); border: 0; }
.pill.s-eingereicht { background: var(--hint-bg); color: var(--p); }
.pill.s-feedback { background: var(--c-fb); color: var(--c-fb-ink); }
.pill.s-umgesetzt { background: var(--c-done); color: var(--c-done-ink); }

/* Startseite */
.start { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }
.start-main, .start-side { display: grid; gap: 28px; min-width: 0; }
.start-side { gap: 20px; }
.hello { display: grid; gap: 6px; }
.hello h1 { font-size: clamp(26px, 3vw, 32px); }
.hello p { color: #555f5b; }
.h-sec { font-family: var(--f1); font-weight: 600; font-size: 18px; color: var(--p); margin-bottom: 4px; }
.fplist { display: grid; gap: 12px; }
.fprow { background: var(--w); border: 1px solid var(--edge); padding: 16px 20px; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: 16px; align-items: center; color: var(--ink); text-decoration: none; transition: border-color .2s ease; }
.fprow:hover { border-color: var(--p); }
.fpnum { width: 40px; height: 40px; background: var(--hint-bg); color: var(--p); font-family: var(--f1); font-weight: 600; display: flex; align-items: center; justify-content: center; }
.fpt { display: grid; gap: 2px; min-width: 0; }
.fpt span { font-size: 13px; color: var(--grey); }
.fpgo { font-size: 14px; font-weight: 600; color: var(--p); border-bottom: 1px solid var(--g); }
.howsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 14.5px; }
.howsteps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; }
.howsteps li > span:first-child { width: 28px; height: 28px; background: var(--w); color: var(--p); font-weight: 600; display: flex; align-items: center; justify-content: center; font-size: 13px; }
@media (max-width: 900px) { .start { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
@media (max-width: 560px) {
  .fprow { grid-template-columns: 36px minmax(0, 1fr); row-gap: 10px; padding: 14px 16px; }
  .fpnum { width: 36px; height: 36px; }
  .fprow .pill { grid-column: 2; }
  .fpgo { display: none; }
}

/* Feedback-Point-Seite */
.panel { display: grid; gap: 22px; }
.fp-head { display: grid; gap: 8px; justify-items: start; }
.back { font-size: 13.5px; color: var(--grey); text-decoration: none; }
.back:hover { color: var(--p); }
.fp-title { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.fp-title h1 { font-size: clamp(22px, 2.8vw, 28px); text-transform: none; }
.fp-intro { max-width: 70ch; color: #555f5b; font-size: 15px; }
.tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--edge); }
.tabs button { background: none; border: 0; border-bottom: 3px solid transparent; padding: 12px 18px; font: 15px var(--f2); color: var(--c-open-ink); cursor: pointer; }
.tabs button:hover { color: var(--p); }
.tabs button[aria-selected="true"] { background: var(--p); color: #fff; font-weight: 600; border-bottom: 4px solid var(--g); padding-bottom: 11px; }
.fp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
.fp-grid.has-nav { grid-template-columns: 230px minmax(0, 1fr) 280px; }
.fp-main { display: grid; gap: 22px; min-width: 0; }
.secaside { display: grid; gap: 16px; min-width: 0; }
.secaside .pnote { font-size: 12.5px; line-height: 1.6; color: var(--grey); }
@media (max-width: 1080px) { .fp-grid.has-nav { grid-template-columns: 210px minmax(0, 1fr); } .fp-grid.has-nav .secaside { grid-column: 2; } }
@media (max-width: 860px) { .fp-grid, .fp-grid.has-nav { grid-template-columns: minmax(0, 1fr); } .fp-grid.has-nav .secaside { grid-column: auto; } }

/* Abschnitte links */
.secnav { display: grid; gap: 4px; align-content: start; }
.secnav button { text-align: left; background: none; border: 0; padding: 12px 14px 12px 16px; display: grid; gap: 2px; cursor: pointer; font-family: var(--f2); color: var(--ink); }
.secnav button b { font-size: 15px; font-weight: 500; }
.secnav button > span:last-child { font-size: 12.5px; color: var(--grey); }
.secnav button:hover { background: var(--w); }
.secnav button.on { background: var(--p); }
.secnav button.on b { color: #fff; font-weight: 600; }
.secnav button.on > span:last-child { color: var(--blue); }
.secnav .here { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--g); }
@media (max-width: 860px) {
  .secnav { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; gap: 4px; border-bottom: 1px solid var(--edge); }
  .secnav button { padding: 10px 12px; }
  .secnav button > span:last-child { display: none; }
}

/* Formular in Abschnitten */
#fpForm { border: 1px solid var(--edge); padding: clamp(20px, 3.4vw, 34px); }
#fpForm .form-top h3 { font-size: 13px; letter-spacing: .14em; color: var(--grey); font-family: var(--f2); font-weight: 600; }
.sec { display: grid; gap: 24px; }
.sec-h { font-family: var(--f1); font-weight: 600; font-size: 20px; color: var(--p); text-transform: none; letter-spacing: 0; }
.sec-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; padding-top: 18px; border-top: 1px solid var(--edge); }
.sum { display: grid; gap: 0; }
.sum > p { margin-bottom: 10px; }
.sum-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--edge); align-items: baseline; font-size: 14.5px; }
.sum-k { font-weight: 600; color: var(--grey); font-size: 13px; }
@media (max-width: 560px) { .sum-row { grid-template-columns: minmax(0, 1fr) auto; } .sum-k { grid-column: 1 / -1; } }
.field label, .field legend { font-weight: 600; color: var(--ink); font-size: 15px; text-transform: none; letter-spacing: 0; }
.field input[type="text"], .field input[type="number"], .field input[type="date"], .field textarea { border: 1px solid var(--field); background: #fbfbfa; font-size: 16px; }
.field input:focus, .field textarea:focus { border-color: var(--p); background: #fff; }

/* Angebotspakete als Karten */
.ptabs { display: flex; flex-wrap: wrap; gap: 10px; border: 0; }
.ptab { display: grid; gap: 2px; text-align: left; min-width: 150px; padding: 12px 16px; background: var(--w); border: 1px solid var(--field); color: var(--ink); text-transform: none; letter-spacing: 0; font: 15px var(--f2); margin: 0; box-shadow: none; }
.ptab b { font-weight: 600; }
.ptab span { font-size: 13px; color: var(--grey); }
.ptab[aria-selected="true"] { background: var(--p); border-color: var(--p); color: #fff; }
.ptab[aria-selected="true"] b { color: #fff; }
.ptab[aria-selected="true"] span { color: var(--blue); }
.ptab.add { border-style: dashed; color: var(--p); font-weight: 600; align-content: center; }
.ptab.has-err { border-color: var(--err); }
.ppanel { border: 1px solid var(--edge); padding: clamp(16px, 3vw, 24px); background: #fbfbfa; }

/* Feedback-Ansicht */
.fbv { display: grid; gap: 20px; }
.fbv .meta, .card .meta { font-size: 13px; color: var(--grey); }
.fbv .checks { margin: 0; }
.steps-main { display: grid; gap: 10px; }
.steps-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; }
.steps-head h2 { font-family: var(--f1); font-weight: 600; font-size: 17px; color: var(--p); }
.chk { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; background: var(--w); border: 1px solid var(--edge); padding: 14px 16px; cursor: pointer; font-size: 15px; line-height: 1.55; }
.chk input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--p); }
.chk.is-done span { color: var(--grey); text-decoration: line-through; text-decoration-color: rgba(100, 109, 105, .5); }
.chk.small { font-size: 14px; padding: 10px 12px; }
.steps-side { gap: 8px; }
.done-card { grid-template-columns: 28px minmax(0, 1fr); align-items: center; background: var(--c-done); border-color: transparent; color: var(--c-done-ink); }
.done-card .done-mark { margin: 0; }
#current .card, #current .fb { border: 1px solid var(--edge); }

/* Logbuch */
.logtop { display: flex; }
.drawer { position: relative; }
.drawer h3 { font-family: var(--f1); font-weight: 600; font-size: 17px; text-transform: none; }
.drawer .close { position: absolute; top: 20px; right: 22px; }
#logList .fb { background: var(--w); border: 1px solid var(--edge); }
#logList .actions { gap: 10px; }

/* Anmeldung */
.login-card { border: 1px solid var(--edge); max-width: 520px; }
.login-card h1 { font-size: 24px; }
body { margin: 0; }
#fpForm .sec-h { text-transform: none; font-size: 20px; letter-spacing: 0; }
#current:empty, #older:empty { display: none; }
.sec-foot .actions { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: flex-end; }
@media (max-width: 760px) { .topbar { position: static; } }
#logList .fb-head b { text-transform: none; font-family: var(--f1); font-weight: 600; font-size: 17px; color: var(--p); letter-spacing: 0; }
.logbar .history-head { font-family: var(--f1); font-weight: 600; font-size: 18px; color: var(--p); text-transform: none; letter-spacing: 0; }
.logbar .history-head::before { display: none; }

/* Variante C (Annes Wahl): Petrol gefüllt = hier bist du, Gelb = klick mich */
.btn, .btn.sm, #wp-submit { background: var(--g); color: var(--p); border: 1px solid var(--g); }
.btn:hover, .btn.sm:hover, #wp-submit:hover { background: #e3a94a; border-color: #e3a94a; color: var(--p); }
.btn-out { background: var(--w); color: var(--p); border: 2px solid var(--g); }
.btn-out:hover { background: var(--c-fb); }
.secnav button { border-left: 4px solid transparent; }
.secnav button.on { background: var(--p); border-left-color: var(--g); }
.tabs button[aria-selected="true"] { background: var(--p); color: #fff; border-bottom-color: var(--g); }
.ptab[aria-selected="true"] { box-shadow: inset 4px 0 0 var(--g); }