/* Fragebogen pertsova.ch, Version 1.1 */
@font-face { font-family: Manrope; src: url('schrift/manrope-latin-wght-normal.woff2') format('woff2'); font-style: normal; font-weight: 200 800; font-display: swap; }

:root {
  --papier: #f7f4ef;
  --karte: #fffdfa;
  --text: #3d4349;          /* dunkelgrau, nie schwarz */
  --text-leise: #6c7279;
  --linie: #e3ddd3;
  --linie-stark: #cfc6b8;
  --akzent: #9c5a43;
  --akzent-hell: #f4e6de;
  --tief: #2d2730;
  --tief-2: #4a3a40;
  --gut: #4f7a5a;
  --warn: #a5652b;
  --rand: clamp(16px, 4.5vw, 72px);
  --sans: Manrope, "Segoe UI", Arial, sans-serif;
  --mono: "Cascadia Mono", Consolas, monospace;
  --kopf: 64px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--kopf) + 16px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--text); font-family: var(--sans); font-size: 17px; line-height: 1.6; font-synthesis: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; touch-action: manipulation; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 600; letter-spacing: -.035em; line-height: 1.08; text-wrap: balance; }
a { color: var(--akzent); }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; }
::selection { background: #efd3c4; }
[hidden] { display: none !important; }

.skip { position: fixed; top: -100px; left: 12px; padding: 12px 16px; background: var(--karte); z-index: 100; border-radius: 6px; }
.skip:focus { top: 10px; }

/* Kopf */
.kopf { position: sticky; top: 0; z-index: 20; background: rgba(247, 244, 239, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--linie); }
.kopf-innen { height: var(--kopf); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-inline: var(--rand); max-width: 1500px; margin-inline: auto; }
.marke { font-weight: 700; letter-spacing: -.03em; font-size: 19px; }
.marke span { color: var(--akzent); }
.speicherstatus { font-size: 13px; color: var(--text-leise); display: inline-flex; align-items: center; gap: 8px; text-align: right; }
.speicherstatus::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--linie-stark); flex: none; }
.speicherstatus[data-zustand="ok"]::before { background: var(--gut); }
.speicherstatus[data-zustand="laeuft"]::before { background: var(--warn); animation: puls 1s infinite alternate; }
.speicherstatus[data-zustand="fehler"]::before { background: #b5473a; }
.speicherstatus[data-zustand="lokal"]::before { background: var(--warn); }
@keyframes puls { to { opacity: .3; } }
.gesamtfortschritt { height: 3px; background: transparent; }
.gesamtfortschritt i { display: block; height: 100%; width: 0; background: var(--akzent); transition: width .4s ease; }

/* Bühne */
.buehne { position: relative; min-height: min(92svh, 900px); display: flex; align-items: flex-end; overflow: hidden; color: #fff; background: var(--tief); isolation: isolate; }
.buehne-licht { position: absolute; inset: -20%; z-index: -1;
  background:
    radial-gradient(40% 50% at 18% 30%, #b8705a 0%, transparent 70%),
    radial-gradient(45% 55% at 82% 20%, #6d4e63 0%, transparent 70%),
    radial-gradient(55% 60% at 60% 85%, #c99a73 0%, transparent 70%),
    linear-gradient(160deg, #3a2e36 0%, #2d2730 100%);
  filter: saturate(1.05);
  animation: wandern 26s ease-in-out infinite alternate; }
.buehne::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(25, 20, 26, .05) 0%, rgba(25, 20, 26, .2) 40%, rgba(25, 20, 26, .72) 100%); }
@keyframes wandern { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-4%, 3%, 0) scale(1.08); } 100% { transform: translate3d(3%, -2%, 0) scale(1.04); } }
.buehne-inhalt { width: 100%; max-width: 1500px; margin-inline: auto; padding: calc(var(--kopf) + 40px) var(--rand) clamp(40px, 8vh, 96px); }
.label { display: flex; align-items: center; gap: 10px; font: 600 12px/1.4 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: rgba(255, 255, 255, .82); margin-bottom: 22px; }
.label i { width: 8px; height: 8px; background: #e2b48f; display: block; }
.buehne h1 { font-size: clamp(44px, 8.4vw, 128px); max-width: 12ch; letter-spacing: -.055em; font-weight: 580; }
.buehne-text { margin-top: 26px; max-width: 46ch; font-size: clamp(17px, 1.6vw, 21px); color: rgba(255, 255, 255, .9); }
.buehne-fakten { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgba(255, 255, 255, .25); max-width: 1200px; }
.buehne-fakten li { padding: 18px 22px 4px 0; font-size: 14px; color: rgba(255, 255, 255, .8); line-height: 1.5; }
.buehne-fakten li + li { padding-left: 22px; border-left: 1px solid rgba(255, 255, 255, .18); }
.buehne-fakten b { display: block; color: #fff; font-weight: 650; margin-bottom: 4px; font-size: 15px; }
.stern { color: #e9b98f; }
.buehne-aktion { margin-top: 38px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.buehne-hinweis { font-size: 14px; color: rgba(255, 255, 255, .78); }

/* Knöpfe */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 50px; padding: 13px 22px; border-radius: 40px; background: var(--tief); color: #fff; font-weight: 650; font-size: 15px; transition: background .18s, transform .18s, box-shadow .18s; }
.knopf:hover { background: var(--tief-2); box-shadow: 0 6px 18px rgba(45, 39, 48, .18); }
.knopf svg { transition: transform .2s; }
.knopf:hover svg { transform: translateX(3px); }
.knopf.hell { background: #fff; color: var(--tief); }
.knopf.hell:hover { background: #f3ece6; }
.knopf.akzent { background: var(--akzent); }
.knopf.akzent:hover { background: #874a35; }
.knopf.leise { background: transparent; color: var(--text); border: 1px solid var(--linie-stark); }
.knopf.leise:hover { background: var(--karte); box-shadow: none; }
.knopf:disabled { opacity: .45; cursor: default; }
.textknopf { color: var(--akzent); font-weight: 650; font-size: 14px; padding: 6px 0; text-decoration: underline; text-underline-offset: 3px; }

.hinweisband { background: #f6e7cf; color: #5b4421; padding: 12px var(--rand); font-size: 14px; text-align: center; border-bottom: 1px solid #ead2ac; }

/* Layout */
.layout { max-width: 1500px; margin-inline: auto; padding: clamp(28px, 5vw, 64px) var(--rand) 80px; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: start; }
.layout:focus { outline: 0; }
.teile { position: sticky; top: calc(var(--kopf) + 24px); }
.teile-titel { font: 600 12px/1.4 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--text-leise); margin-bottom: 10px; }
.teile ol { list-style: none; margin: 0; padding: 0; counter-reset: teil; }
.teile li { counter-increment: teil; }
.teile button { width: 100%; text-align: left; display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 8px; font-size: 15px; color: var(--text); line-height: 1.3; }
.teile button::before { content: counter(teil, decimal-leading-zero); font: 600 12px var(--mono); color: var(--text-leise); }
.teile li.abschluss button::before { content: "✓"; font-family: var(--sans); }
.teile button:hover { background: #efe9e1; }
.teile button[aria-current="step"] { background: var(--karte); box-shadow: 0 0 0 1px var(--linie); font-weight: 650; }
.teile .zaehler { font-size: 12px; color: var(--text-leise); font-variant-numeric: tabular-nums; }
.teile .zaehler.voll { color: var(--gut); font-weight: 700; }

/* Teil */
.teil { animation: hinein .45s ease both; }
@keyframes hinein { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.teil-kopf { padding-bottom: 26px; border-bottom: 1px solid var(--linie); margin-bottom: 8px; }
.teil-nummer { font: 600 12px/1.4 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--akzent); margin-bottom: 14px; }
.teil-kopf h2 { font-size: clamp(32px, 4.4vw, 60px); }
.teil-kopf p { margin-top: 14px; max-width: 60ch; color: var(--text-leise); font-size: 18px; }

/* Frage */
.frage { padding: 30px 0; border-bottom: 1px solid var(--linie); max-width: 820px; }
.frage fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.frage-titel { display: block; font-size: clamp(18px, 1.6vw, 21px); font-weight: 650; line-height: 1.35; letter-spacing: -.012em; padding: 0; margin-bottom: 6px; }
.frage-titel .stern { color: var(--akzent); margin-left: 6px; }
.frage-hilfe { color: var(--text-leise); font-size: 15px; margin-bottom: 14px; }
.frage-titel + .feld, .frage-titel + .optionen, .frage-titel + .skala, .frage-titel + .liste, .frage-titel + .farben, .frage-titel + .upload { margin-top: 14px; }

.feld { width: 100%; border: 1px solid var(--linie-stark); background: var(--karte); border-radius: 10px; padding: 13px 15px; font-size: 17px; line-height: 1.5; transition: border-color .15s, box-shadow .15s; }
.feld:hover { border-color: #b9ae9d; }
.feld:focus { outline: 0; border-color: var(--akzent); box-shadow: 0 0 0 3px rgba(156, 90, 67, .16); }
textarea.feld { min-height: 112px; resize: vertical; overflow: hidden; }
.feld::placeholder { color: #a39d96; }

.optionen { display: flex; flex-wrap: wrap; gap: 10px; }
.option { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px; border: 1px solid var(--linie-stark); border-radius: 30px; background: var(--karte); cursor: pointer; font-size: 16px; line-height: 1.3; transition: background .15s, border-color .15s; user-select: none; }
.option:hover { border-color: #b9ae9d; }
.option input { position: absolute; opacity: 0; pointer-events: none; }
.option .punkt { width: 18px; height: 18px; flex: none; border: 1.5px solid #a99e8f; border-radius: 50%; display: grid; place-items: center; background: #fff; }
.option.mehrfach .punkt { border-radius: 5px; }
.option input:checked + .punkt { background: var(--akzent); border-color: var(--akzent); }
.option input:checked + .punkt::after { content: ""; width: 6px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.option:has(input:checked) { background: var(--akzent-hell); border-color: var(--akzent); }
.option input:focus-visible + .punkt { outline: 3px solid var(--akzent); outline-offset: 3px; }
.andere-feld { margin-top: 12px; }

/* Skala */
.skala { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 14px; }
.skala-ende { font-size: 15px; color: var(--text-leise); }
.skala-ende.rechts { text-align: right; }
.skala-stufen { display: flex; gap: 8px; }
.stufe { position: relative; }
.stufe input { position: absolute; opacity: 0; pointer-events: none; }
.stufe span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linie-stark); background: var(--karte); font-weight: 650; font-size: 15px; cursor: pointer; transition: background .15s, transform .15s; }
.stufe span:hover { border-color: #b9ae9d; }
.stufe input:checked + span { background: var(--akzent); border-color: var(--akzent); color: #fff; transform: scale(1.06); }
.stufe input:focus-visible + span { outline: 3px solid var(--akzent); outline-offset: 3px; }
.skala-reset { margin-top: 6px; }

/* Liste */
.liste { display: grid; gap: 14px; }
.eintrag { border: 1px solid var(--linie); background: var(--karte); border-radius: 14px; padding: 18px 18px 8px; }
.eintrag-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.eintrag-kopf b { font: 600 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-leise); }
.eintrag-feld { margin-bottom: 12px; }
.eintrag-feld label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 5px; }
.eintrag .feld { font-size: 16px; padding: 11px 13px; }
.eintrag textarea.feld { min-height: 84px; }
.entfernen { font-size: 13px; color: var(--text-leise); text-decoration: underline; text-underline-offset: 3px; padding: 4px 0; }
.entfernen:hover { color: #9b3d30; }
.neu { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px dashed var(--linie-stark); border-radius: 30px; font-weight: 650; font-size: 15px; color: var(--akzent); }
.neu:hover { background: var(--karte); border-style: solid; }

/* Farben */
.farben { display: flex; flex-wrap: wrap; gap: 14px; }
.farbe { display: grid; justify-items: center; gap: 6px; }
.farbe-feld { position: relative; width: 72px; height: 72px; border-radius: 50%; border: 1px dashed var(--linie-stark); overflow: hidden; display: grid; place-items: center; color: var(--text-leise); font-size: 26px; cursor: pointer; background: var(--karte); }
.farbe-feld.gesetzt { border: 3px solid #fff; box-shadow: 0 0 0 1px var(--linie-stark); }
.farbe-feld input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.farbe-code { font: 12px var(--mono); color: var(--text-leise); min-height: 18px; }

/* Upload */
.upload { display: grid; gap: 12px; }
.ablage { display: grid; place-items: center; text-align: center; gap: 6px; padding: 26px 18px; border: 1.5px dashed var(--linie-stark); border-radius: 14px; background: var(--karte); cursor: pointer; transition: border-color .15s, background .15s; }
.ablage:hover, .ablage.drueber { border-color: var(--akzent); background: #fbf3ee; }
.ablage strong { font-weight: 650; }
.ablage small { color: var(--text-leise); font-size: 13px; }
.ablage input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ablage-icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--akzent-hell); color: var(--akzent); }
.dateiliste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.datei { position: relative; border: 1px solid var(--linie); border-radius: 12px; background: var(--karte); overflow: hidden; font-size: 13px; }
.datei-bild { aspect-ratio: 4 / 3; background: #efe9e1; display: grid; place-items: center; color: var(--text-leise); font: 600 13px var(--mono); }
.datei-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.datei-info { padding: 8px 10px 10px; }
.datei-name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.datei-groesse { color: var(--text-leise); }
.datei-weg { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .92); display: grid; place-items: center; font-size: 18px; line-height: 1; color: var(--text); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.datei-weg:hover { color: #9b3d30; }
.datei.laedt .datei-bild { background: linear-gradient(90deg, var(--akzent-hell) var(--p, 0%), #efe9e1 var(--p, 0%)); }
.datei.fehler { border-color: #d9a59c; }
.datei.fehler .datei-groesse { color: #9b3d30; }
.upload-hinweis { font-size: 14px; color: var(--warn); }

/* Teil-Navigation */
.teil-fuss { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; padding-top: 34px; max-width: 820px; }
.teil-fuss .rechts { margin-left: auto; }

/* Abschluss */
.abschluss-karte { background: var(--karte); border: 1px solid var(--linie); border-radius: 18px; padding: clamp(20px, 3vw, 34px); margin-top: 26px; max-width: 820px; }
.abschluss-karte h3 { font-size: 24px; margin-bottom: 10px; }
.abschluss-karte p + p { margin-top: 10px; }
.zahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 18px; border-top: 1px solid var(--linie); }
.zahlen div { padding: 16px 16px 0 0; }
.zahlen div + div { padding-left: 16px; border-left: 1px solid var(--linie); }
.zahlen b { display: block; font-size: 34px; font-weight: 650; letter-spacing: -.04em; line-height: 1.1; }
.zahlen span { font-size: 14px; color: var(--text-leise); }
.offen { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 6px; }
.offen button { text-align: left; color: var(--akzent); font-size: 16px; text-decoration: underline; text-underline-offset: 3px; padding: 3px 0; line-height: 1.4; }
.offen small { display: block; color: var(--text-leise); font-size: 13px; text-decoration: none; }
.uebersicht { margin-top: 26px; max-width: 820px; }
.uebersicht details { border-bottom: 1px solid var(--linie); }
.uebersicht summary { cursor: pointer; padding: 16px 0; font-weight: 650; font-size: 18px; display: flex; justify-content: space-between; gap: 12px; }
.uebersicht summary span { font-weight: 500; color: var(--text-leise); font-size: 14px; }
.uebersicht dl { margin: 0 0 18px; }
.uebersicht dt { font-weight: 600; font-size: 15px; margin-top: 14px; }
.uebersicht dd { margin: 4px 0 0; white-space: pre-wrap; color: var(--text); font-size: 15px; }
.uebersicht dd.leer { color: #a39d96; font-style: italic; }
.aktionen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.danke { border-color: #b8cfbd; background: #f3f8f3; }
.danke h3 { color: var(--gut); }

/* Fuss */
.fuss { border-top: 1px solid var(--linie); }
.fuss-innen { max-width: 1500px; margin-inline: auto; padding: 24px var(--rand) 40px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 13px; color: var(--text-leise); }

/* Tablet und Handy */
@media (max-width: 1100px) {
  .buehne-fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .buehne-fakten li:nth-child(3) { padding-left: 0; border-left: 0; }
  .buehne-fakten li:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .18); }
}
@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); padding-top: 0; }
  .teile { position: sticky; top: calc(var(--kopf) + 3px); z-index: 10; margin-inline: calc(var(--rand) * -1); padding: 10px var(--rand); background: rgba(247, 244, 239, .95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--linie); }
  .teile-titel { display: none; }
  .teile ol { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; padding-bottom: 2px; }
  .teile ol::-webkit-scrollbar { display: none; }
  .teile li { flex: none; scroll-snap-align: center; }
  .teile button { grid-template-columns: auto auto auto; padding: 8px 13px; border-radius: 30px; border: 1px solid var(--linie); background: var(--karte); font-size: 14px; white-space: nowrap; }
  .teile button[aria-current="step"] { background: var(--tief); color: #fff; border-color: var(--tief); box-shadow: none; }
  .teile button[aria-current="step"]::before, .teile button[aria-current="step"] .zaehler { color: rgba(255, 255, 255, .75); }
  .teil-kopf { padding-top: 28px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .buehne { min-height: calc(100svh - var(--kopf)); }
  .buehne-inhalt { padding-top: 56px; }
  .buehne-fakten { grid-template-columns: minmax(0, 1fr); }
  .buehne-fakten li, .buehne-fakten li + li { padding: 14px 0 2px; border-left: 0; }
  .buehne-fakten li + li { border-top: 1px solid rgba(255, 255, 255, .18); }
  .knopf { width: 100%; }
  .teil-fuss .knopf { width: auto; flex: 1; }
  .skala { grid-template-columns: 1fr 1fr; }
  .skala-stufen { grid-column: 1 / -1; grid-row: 1; justify-content: space-between; }
  .stufe span { width: 48px; height: 48px; }
  .skala-ende { font-size: 14px; }
  .option { font-size: 15px; padding: 10px 14px; }
  .zahlen { grid-template-columns: 1fr; }
  .zahlen div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--linie); }
  .zahlen div { padding: 12px 0; }
  .dateiliste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}