/* Curatio Formatio — zurückhaltende Website */

/* Kontrastreich: Fließtext ≥ 12:1, Kleinschrift ≥ 6:1 (WCAG AA mit Reserve) */
:root {
  --bg:    #fbfaf7;
  --ink:   #0b0d10;
  --ink-2: #2b3138;
  --ink-3: #565e66;
  --rule:  rgba(11, 13, 16, .30);
  --warn:  #a1271b;
  --ok:    #0b7046;   /* Fortschritt und Erfolg */
  --ok-bg: rgba(11, 112, 70, .09);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:    #0a0b0d;
    --ink:   #f6f4ef;
    --ink-2: #d2d6da;
    --ink-3: #a0a8b0;
    --rule:  rgba(246, 244, 239, .32);
    --warn:  #ff8f80;
    --ok:    #4fdc9f;
    --ok-bg: rgba(79, 220, 159, .12);
  }
}
:root[data-theme="dark"] {
  --bg: #0a0b0d; --ink: #f6f4ef; --ink-2: #d2d6da; --ink-3: #a0a8b0;
  --rule: rgba(246,244,239,.32); --warn: #ff8f80; --ok: #4fdc9f; --ok-bg: rgba(79,220,159,.12);
}

/* Abstände im Goldenen Schnitt: jede Stufe ist das φ-fache (1,618) der vorigen.
   Basis = Schriftgröße; --s1 entspricht genau der Zeilenhöhe (15px × φ). */
:root {
  --phi: 1.618;
  --s0:  15px;
  --s1:  calc(var(--s0) * var(--phi));   /* 24,3 */
  --s2:  calc(var(--s1) * var(--phi));   /* 39,3 */
  --s3:  calc(var(--s2) * var(--phi));   /* 63,5 */
  --s4:  calc(var(--s3) * var(--phi));   /* 102,8 */
  --s-1: calc(var(--s0) / var(--phi));   /* 9,3 */
  --s-2: calc(var(--s-1) / var(--phi));  /* 5,7 */
  --s-3: calc(var(--s-2) / var(--phi));  /* 3,5 */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: var(--phi);
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--s4) var(--s1);
}

/* Kopf */

.wortmarke {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  font-size: clamp(19px, 3.2vw, 23px);
  font-weight: 600;
  letter-spacing: .2em;
  text-indent: .2em;
  text-transform: uppercase;
  color: var(--ink);
}

.rechtsform {
  margin-top: var(--s-2);
  font-size: 11px;
  letter-spacing: .2em;
  text-indent: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
}

hr {
  border: 0;
  border-top: 1px solid var(--ink);
  margin: var(--s2) 0;
}

/* Text */

.leitsatz {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  font-size: clamp(17px, 2.6vw, 19px);
  line-height: var(--phi);
  color: var(--ink);
  text-wrap: pretty;
}

/* Hervorhebung, z. B. Widerspruchsrecht nach Art. 21 Abs. 4 DSGVO */
.hinweis {
  border-left: 2px solid var(--rule);
  padding-left: var(--s0);
  color: var(--ink);
}

address {
  font-style: normal;
  color: var(--ink-2);
}

p { color: var(--ink-2); }
p + p { margin-top: var(--s0); }
b, strong { color: var(--ink); font-weight: 600; }

h2 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-indent: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: var(--s2) 0 var(--s-1);
}

a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
a:hover { border-bottom-color: var(--ink); }

/* Formular */

form { margin-top: var(--s1); }

.zeile { display: grid; grid-template-columns: 1fr; gap: 0 var(--s1); }
@media (min-width: 540px) { .zeile { grid-template-columns: 1fr 1fr; } }

.feld { margin-top: var(--s1); min-width: 0; }

.feld label {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-indent: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s-1);
  transition: color .15s ease;
}
.feld:focus-within label { color: var(--ink); }

/* Geführte Linie statt Kästchen: ruhiger und näher an der Haarlinien-Sprache der Seite */
.feld input,
.feld textarea {
  display: block;
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  padding: var(--s-2) 0;
  transition: border-color .15s ease;
}
/* fünf volle Zeilen plus Innenabstand: bleibt im Zeilenraster */
.feld textarea { min-height: calc(var(--s1) * 5 + var(--s-2) * 2); line-height: var(--phi); resize: vertical; }

.feld input:hover,
.feld textarea:hover { border-bottom-color: var(--ink-3); }

/* Fokus muss unübersehbar sein, auch ohne den Standard-Ring */
.feld input:focus,
.feld textarea:focus {
  outline: none;
  border-bottom-color: var(--ink);
  border-bottom-width: 2px;
  padding-bottom: calc(var(--s-2) - 1px);   /* gleicht die 2px-Linie aus */
}

/* Erst nach einer Eingabe mahnen, nicht beim Laden der leeren Seite */
.feld input:user-invalid {
  border-bottom-color: var(--warn);
}
.feld:focus-within input:user-invalid { border-bottom-color: var(--warn); }

/* Browser-Autofill übermalt sonst das Papier */
.feld input:-webkit-autofill,
.feld input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  box-shadow: 0 0 0 100px var(--bg) inset;
}

.pflicht {
  margin-top: var(--s0);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-indent: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

button {
  margin-top: var(--s1);
  font: inherit;
  font-size: 12.5px;
  letter-spacing: .16em;
  text-indent: .16em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: var(--s-1) var(--s1);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
button:hover { background: transparent; color: var(--ink); }
button:focus-visible { outline: 2px solid var(--ink); outline-offset: var(--s-3); }
button:active { transform: translateY(1px); }

/* Honigtopf: für Menschen unsichtbar, für Bots verlockend */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Fehlermeldung, ohne JavaScript: erscheint nur als :target */
#fehler { display: none; }
#fehler:target {
  display: block;
  border-left: 2px solid var(--warn);
  padding-left: var(--s0);
  margin-top: var(--s1);
  color: var(--ink);
}



/* ---------- Thesenpapier ---------- */

.stand-zeile {
  margin-top: var(--s-2);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-indent: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.these {
  margin-top: var(--s1);
  padding-left: var(--s0);
  border-left: 2px solid var(--ok);
}

.dreieck-grafik { display: block; width: 100%; height: auto; margin: var(--s2) 0 var(--s1); }
.dreieck-grafik polygon { fill: var(--ok-bg); stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.dreieck-grafik circle  { fill: var(--ink); }
.dreieck-grafik text    { fill: var(--ink); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-anchor: middle; }
.dreieck-grafik .trend  { font-size: 13px; font-weight: 600; letter-spacing: .12em; }
.dreieck-grafik .oder   { font-size: 11px; fill: var(--ink-3); letter-spacing: .1em; }
.dreieck-grafik .rolle  { font-size: 10.5px; font-weight: 600; letter-spacing: .2em; fill: var(--ok); }
.dreieck-grafik .mitte  { font-family: "Iowan Old Style", Palatino, Georgia, serif; font-size: 15px; fill: var(--ink-2); }

dl.ecken { margin-top: var(--s0); }
dl.ecken div { padding: var(--s0) 0; border-top: 1px solid var(--rule); }
dl.ecken div:last-child { border-bottom: 1px solid var(--rule); }
dl.ecken dt { font-weight: 600; color: var(--ink); }
dl.ecken dt span { font-weight: 400; color: var(--ink-3); }
dl.ecken dd { color: var(--ink-2); }

ul.strich, ol.zahl { margin-top: var(--s-1); padding-left: var(--s1); color: var(--ink-2); }
ul.strich li, ol.zahl li { margin-top: var(--s-1); }
ul.strich { list-style: none; padding-left: 0; }
ul.strich li { position: relative; padding-left: var(--s1); }
ul.strich li::before { content: "—"; position: absolute; left: 0; color: var(--ink-3); }

ol.dreiecke { list-style: none; counter-reset: dreieck; }
ol.dreiecke li {
  counter-increment: dreieck;
  padding: var(--s1) 0;
  border-top: 1px solid var(--rule);
}
ol.dreiecke li:last-child { border-bottom: 1px solid var(--rule); }
ol.dreiecke h3 { font-size: 15px; font-weight: 600; color: var(--ink); }
ol.dreiecke h3::before { content: counter(dreieck) ". "; color: var(--ok); }
ol.dreiecke .formel {
  display: block;
  margin: var(--s-2) 0 var(--s-1);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.marke {
  display: inline-block;
  margin-left: var(--s-1);
  padding: 0 var(--s-2);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  vertical-align: 2px;
  color: var(--ok);
  border: 1px solid var(--ok);
}
.marke.schwach { color: var(--ink-3); border-color: var(--rule); }

/* ---------- Gamification: reines CSS über :has(), kein JavaScript ---------- */

/* Jedes gültige Feld zählt einen Punkt; daraus speisen sich Balken und Zähler */
form { --a: 0; --b: 0; --c: 0; counter-reset: erledigt; }
form:has(#name:valid)      { --a: 1; }
form:has(#email:valid)     { --b: 1; }
form:has(#nachricht:valid) { --c: 1; }
.feld:has(input:valid, textarea:valid) { counter-increment: erledigt; }

.fortschritt {
  position: relative;
  height: var(--s-2);
  background: var(--rule);
  overflow: hidden;
}
.fortschritt span {
  display: block;
  height: 100%;
  width: calc((var(--a) + var(--b) + var(--c)) * 100% / 3);
  background: var(--ok);
  transition: width .45s cubic-bezier(.2, .8, .2, 1);
}

/* Häkchen am Label, sobald ein Feld passt */
.feld label::after {
  content: "";
  display: inline-block;
  margin-left: var(--s-1);
  color: var(--ok);
  transform: scale(0);
  transition: transform .25s cubic-bezier(.3, 1.6, .5, 1);
}
.feld:has(input:valid, textarea:valid) label::after {
  content: "✓";
  transform: scale(1.15);
}
.feld:has(input:valid, textarea:valid) input,
.feld:has(input:valid, textarea:valid) textarea { border-bottom-color: var(--ok); }

/* Stand und Abschluss */
.stand {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s0);
  margin-top: var(--s1);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-indent: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.stand .zaehler::before { content: counter(erledigt) " / 3 erledigt"; color: var(--ink); font-weight: 600; }
.stand .bereit { display: none; color: var(--ok); font-weight: 600; }
form:not(:has(:invalid)) .stand .bereit { display: inline; animation: auftauchen .4s ease both; }
form:not(:has(:invalid)) .stand .pflicht { display: none; }
.stand .pflicht { margin: 0; }

/* Button: gedämpft bis alles passt, dann freigeschaltet */
form:has(:invalid) button { opacity: .45; }
form:not(:has(:invalid)) button {
  background: var(--ok);
  border-color: var(--ok);
  color: var(--bg);
  animation: freigeschaltet .5s cubic-bezier(.3, 1.6, .5, 1) both;
}
form:not(:has(:invalid)) button:hover { background: transparent; color: var(--ok); }

@keyframes auftauchen   { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes freigeschaltet { 0% { transform: scale(1); } 50% { transform: scale(1.06); } 100% { transform: scale(1); } }

/* Danke-Seite: Abzeichen mit gezeichnetem Häkchen */
.abzeichen {
  display: flex;
  align-items: center;
  gap: var(--s1);
  margin-top: var(--s1);
  padding: var(--s1);
  background: var(--ok-bg);
  border-left: 2px solid var(--ok);
}
.abzeichen svg { flex: none; width: var(--s3); height: var(--s3); }
.abzeichen circle { fill: none; stroke: var(--ok); stroke-width: 2.5; }
.abzeichen path {
  fill: none; stroke: var(--ok); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 40; stroke-dashoffset: 40;
  animation: zeichnen .6s .25s ease forwards;
}
.abzeichen b { display: block; color: var(--ink); font-size: 16px; }
.abzeichen small {
  display: block; margin-top: var(--s-2);
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ok); font-weight: 600;
}
@keyframes zeichnen { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .abzeichen path { stroke-dashoffset: 0; }
}

/* Fuß- und Rücklink */

.links {
  margin-top: var(--s2);
  font-size: 12px;
  letter-spacing: .14em;
  text-indent: .14em;
  text-transform: uppercase;
}
.links a { color: var(--ink-2); border-bottom: 0; }
.links a:hover { color: var(--ink); }
.links span { color: var(--ink-3); padding: 0 var(--s-2); }

.tbd {
  border-bottom: 1px dotted var(--ink-3);
  color: var(--ink-3);
}

@media (max-width: 600px) {
  .wrap { padding: var(--s3) var(--s1); }
}

@media print {
  :root { --bg: #fff; --ink: #000; --ink-2: #222; --ink-3: #555; --rule: rgba(0,0,0,.2); }
  body { background: #fff; font-size: 11pt; }
  .wrap { padding: 0; max-width: none; }
  .links { display: none; }
}

/* Fallbeispiel: ohne Nummer, Formel wie bei den Dreiecken */
ol.dreiecke.fall h3::before { content: none; }
ol.dreiecke.fall li p + p { margin-top: var(--s0); }

/* ---------- Wissenschaftliches Paper ---------- */

.wrap.paper { max-width: 680px; }

.paper .reihe {
  font-size: 10.5px;
  letter-spacing: .16em;
  text-indent: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.paper h1 {
  margin-top: var(--s0);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: clamp(26px, 4.6vw, 34px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.005em;
  color: var(--ink);
  text-wrap: balance;
}
.paper .untertitel {
  margin-top: var(--s-1);
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
  font-style: italic;
  font-size: 17px;
  line-height: 1.45;
  color: var(--ink-2);
  text-wrap: balance;
}
.paper .autor { margin-top: var(--s1); font-size: 14px; color: var(--ink-2); }
.paper .autor b { color: var(--ink); }

/* Fließtext in Serif, Blocksatz mit Silbentrennung */
.paper .text p,
.paper .text li {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 16px;
  color: var(--ink);
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.paper .text p + p { margin-top: 0; text-indent: var(--s1); }

.abstract {
  margin-top: var(--s2);
  padding: var(--s1) 0;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.abstract .marke-titel,
.paper .stichwort b {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
}
.abstract p { margin-top: var(--s-1); }
.paper .stichwort { margin-top: var(--s0); font-size: 13px; color: var(--ink-2); }

.paper h2.abschnitt {
  margin: var(--s2) 0 var(--s-1);
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0;
  text-indent: 0;
  text-transform: none;
  color: var(--ink);
}
.paper h2.abschnitt .nr { display: inline-block; min-width: var(--s1); color: var(--ok); }
.paper h3.unter {
  margin: var(--s1) 0 var(--s-2);
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
  font-size: 16px;
  font-style: italic;
  font-weight: 600;
  color: var(--ink);
}

/* Abbildungen und Tabellen */
.paper figure { margin: var(--s1) 0; }
.paper figcaption { margin-top: var(--s-1); font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.paper figcaption b { color: var(--ink); }
.paper .dreieck-grafik { margin: 0; }

.tabelle-rahmen { overflow-x: auto; }
table.tab { width: 100%; border-collapse: collapse; font-size: 13.5px; line-height: 1.5; }
table.tab caption { caption-side: top; text-align: left; padding-bottom: var(--s-1); font-size: 12.5px; color: var(--ink-2); }
table.tab caption b { color: var(--ink); }
table.tab thead th { border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); }
table.tab tbody tr:last-child td { border-bottom: 2px solid var(--ink); }
table.tab th, table.tab td { text-align: left; vertical-align: top; padding: var(--s-2) var(--s-1) var(--s-2) 0; }
table.tab th { font-weight: 600; color: var(--ink); white-space: nowrap; }
table.tab td { color: var(--ink-2); }
table.tab td:first-child { color: var(--ink); font-weight: 600; white-space: nowrap; }

/* Formeln mit Nummer rechts */
.formel-block {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  margin: var(--s1) 0;
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
  font-size: 19px;
  color: var(--ink);
}
.formel-block span:first-child { text-align: center; }
.formel-block .gl { font-size: 15px; color: var(--ink-3); }

/* Hypothesen */
.hyp {
  margin-top: var(--s1);
  padding-left: var(--s0);
  border-left: 2px solid var(--ok);
}
.hyp .h { font-family: system-ui, -apple-system, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--ok); }
.paper .text .hyp p { text-indent: 0; margin-top: var(--s-2); }
.paper .text .hyp p.op { font-size: 14.5px; color: var(--ink-2); }

.paper .text ul.strich li,
.paper .text ol.zahl li { text-align: left; }

/* Literatur mit hängendem Einzug */
ol.literatur { list-style: none; margin-top: var(--s-1); }
ol.literatur li {
  padding-left: var(--s1);
  text-indent: calc(var(--s1) * -1);
  margin-top: var(--s-1);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
ol.literatur i { color: var(--ink); }

.paper .anmerkung { margin-top: var(--s0); font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.paper .anmerkung b { color: var(--ink); }

@media print {
  @page { size: A4; margin: 22mm 20mm; }
  .wrap.paper { max-width: none; }
  .paper .text p, .paper .text li { font-size: 10.5pt; }
  .paper h2.abschnitt { break-after: avoid; }
  .paper figure, table.tab, .hyp { break-inside: avoid; }
}

/* Paper: Teile I und II */
.teil {
  margin-top: var(--s3);
  padding-top: var(--s0);
  border-top: 2px solid var(--ink);
}
.teil .teil-nr {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-indent: .2em;
  text-transform: uppercase;
  color: var(--ok);
}
.teil .teil-titel {
  margin-top: var(--s-2);
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
  font-size: 23px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}
.formel-block sub { font-size: .62em; }
.paper .ergebnis {
  margin: var(--s1) 0;
  padding: var(--s0) var(--s1);
  background: var(--ok-bg);
  border-left: 2px solid var(--ok);
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
  font-size: 18px;
  color: var(--ink);
}
.paper .text .ergebnis { text-indent: 0; text-align: left; }
.paper .ergebnis small {
  display: block;
  margin-top: var(--s-2);
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 12px;
  color: var(--ink-2);
}