/* =========================================================================
   rechtaufdenpunkt.info, Designsystem
   =========================================================================

   Haltung: radikal reduziert. Viel Weissraum, ruhige grosse Typografie,
   fast keine Rahmen und Linien, ein einziger Akzent. Was nichts erklaert,
   steht nicht auf der Seite.

   Keine externen Schriften, keine externen Stylesheets, keine Frameworks -
   die Seite kommt ohne Drittanbieter aus. Das haelt die Ladezeit niedrig
   und die Datenschutzerklaerung kurz.

   1  Tokens
   2  Grundgeruest
   3  Typografie
   4  Flaechen
   5  Schaltflaechen
   6  Schrittformular
   7  Startseite
   8  Hilfsklassen
   ========================================================================= */


/* 1  Tokens ============================================================== */

:root{
  /* Farbe. Genau ein Akzent - ein dunkles Oxblood, das neben Schwarz
     ernst wirkt und nicht nach Werbebanner. */
  --bg:        #fbfbfd;
  --flaeche:   #ffffff;
  --flaeche-2: #f2f2f4;
  --fg:        #16161a;
  --fg-2:      #62626a;
  --fg-3:      #8b8b93;
  --akzent:    #7d2b1e;
  --akzent-fg: #ffffff;
  --akzent-weich: #f6eeec;
  --linie:     #e6e6ea;

  /* Typografie. Systemschriften - sie sind auf jedem Geraet schon da,
     sehen dort zu Hause aus und kosten keine Ladezeit. */
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;

  --t-xs:   0.8125rem;
  --t-s:    0.9375rem;
  --t-m:    1.0625rem;
  --t-l:    1.25rem;
  --t-xl:   1.75rem;
  --t-2xl:  2.25rem;
  --t-3xl:  3rem;

  /* Abstand. Vierer-Raster. */
  --r-1: 4px;  --r-2: 8px;  --r-3: 12px; --r-4: 16px;
  --r-5: 24px; --r-6: 32px; --r-7: 48px; --r-8: 64px; --r-9: 96px;

  --rund:      14px;
  --rund-voll: 980px;

  --tempo: 180ms;
  --kurve: cubic-bezier(.4, 0, .2, 1);

  --spalte: 44rem;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:        #000000;
    --flaeche:   #111113;
    --flaeche-2: #1a1a1e;
    --fg:        #f2f2f4;
    --fg-2:      #a0a0a8;
    --fg-3:      #75757d;
    --akzent:    #e8917f;
    --akzent-fg: #16161a;
    --akzent-weich: #261815;
    --linie:     #26262b;
  }
}


/* 2  Grundgeruest ======================================================== */

*, *::before, *::after{ box-sizing: border-box; }

html{ -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: var(--t-m)/1.6 var(--schrift);
  -webkit-font-smoothing: antialiased;
  padding: 0 var(--r-5);
}

.wrap{ max-width: var(--spalte); margin: 0 auto; }

/* Kopfzeile: nur der Name, dezent. Navigation braucht eine Seite mit
   dieser Tiefe nicht. */
.top{
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--r-4); flex-wrap: wrap;
  padding: var(--r-5) 0;
  font-size: var(--t-xs); color: var(--fg-3);
}
.top a{ color: inherit; text-decoration: none; }
.top a:hover{ color: var(--fg); }

footer{
  margin-top: var(--r-9);
  padding: var(--r-5) 0 var(--r-8);
  border-top: 1px solid var(--linie);
  font-size: var(--t-xs); color: var(--fg-3);
}
footer a{ color: inherit; text-decoration: none; margin-right: var(--r-4); }
footer a:hover{ color: var(--fg); }
footer p{ margin: var(--r-4) 0 0; max-width: 32rem; }


/* 3  Typografie ========================================================== */

h1, h2, h3{ font-weight: 600; letter-spacing: -0.021em; margin: 0; }
h1{
  /* Waechst mit der Breite, bricht aber nie aus dem Bildschirm - deutsche
     Komposita wie "Widerspruchsbescheid" sind hier der Pruefstein. */
  font-size: clamp(1.6rem, 7.2vw, var(--t-2xl));
  line-height: 1.12;
  overflow-wrap: break-word;
  hyphens: auto;
}
h2{ font-size: var(--t-xl); line-height: 1.2; margin: var(--r-9) 0 var(--r-4); }
h3{ font-size: var(--t-m); line-height: 1.3; margin: 0 0 var(--r-2); }

@media (min-width: 40rem){
  h1{ font-size: var(--t-3xl); }
}

p{ margin: 0 0 var(--r-4); }
p:last-child{ margin-bottom: 0; }

a{ color: var(--akzent); text-decoration: none; }
a:hover{ text-decoration: underline; text-underline-offset: 3px; }

.fuehrung{ font-size: var(--t-l); line-height: 1.5; color: var(--fg-2); }
.leise{ font-size: var(--t-s); color: var(--fg-2); }
.winzig{ font-size: var(--t-xs); color: var(--fg-3); }

:focus-visible{
  outline: 2px solid var(--akzent);
  outline-offset: 3px;
  border-radius: var(--r-1);
}


/* 4  Flaechen ============================================================ */

/* Kein Rahmen, nur ein minimal abgesetzter Ton. Rahmen zerschneiden die
   Seite; ein Tonwertsprung genuegt, um eine Flaeche zu markieren. */
.flaeche{
  background: var(--flaeche);
  border-radius: var(--rund);
  padding: var(--r-5);
}
.flaeche + .flaeche{ margin-top: var(--r-3); }

.notiz{
  background: var(--akzent-weich);
  color: var(--fg);
  border-radius: var(--rund);
  padding: var(--r-4) var(--r-5);
  font-size: var(--t-s);
}
.notiz b{ font-weight: 600; }

.trenner{ border: 0; border-top: 1px solid var(--linie); margin: var(--r-8) 0; }

/* Briefcheck: der Hinweis am Fuss der Themenseiten. Zurueckhaltend, ein
   Knopf, kein Kasten mit Farbe - er soll gefunden werden, nicht draengen. */
.briefcheck{ margin: var(--r-6) 0; }
.briefcheck h2{ font-size: 1.02rem; margin: 0 0 var(--r-3); }
.knopf{ display: inline-block; background: var(--fg); color: var(--bg);
  border-radius: 99px; padding: 11px 20px; text-decoration: none;
  font-weight: 600; }
.knopf:hover{ opacity: .9; }


/* 5  Schaltflaechen ====================================================== */

.knopf{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: var(--r-3) var(--r-6);
  border: 0; border-radius: var(--rund-voll);
  background: var(--akzent); color: var(--akzent-fg);
  font: 600 var(--t-m)/1.2 var(--schrift);
  text-decoration: none; cursor: pointer;
  transition: opacity var(--tempo) var(--kurve),
              transform var(--tempo) var(--kurve);
}
.knopf:hover{ opacity: .88; text-decoration: none; }
.knopf:active{ transform: scale(.985); }
.knopf[aria-disabled="true"]{ opacity: .3; pointer-events: none; }

.knopf--still{
  background: transparent; color: var(--akzent);
  min-height: 44px; padding: var(--r-2) var(--r-3);
  font-weight: 500;
}
.knopf--breit{ width: 100%; }


/* 6  Schrittformular ===================================================== */

/* Eine Frage je Bildschirm. Wer aus einem Video kommt, sieht nicht neun
   Felder, sondern eine Frage und grosse Antwortflaechen - die Entscheidung
   je Schritt ist klein, und das ist der ganze Trick. */

.schritte{ margin-top: var(--r-6); }

.fortschritt{
  display: flex; align-items: center; gap: var(--r-3);
  font-size: var(--t-xs); color: var(--fg-3);
  margin-bottom: var(--r-4);
}
.balken{
  flex: 1; height: 3px; border-radius: 3px;
  background: var(--flaeche-2); overflow: hidden;
}
.balken i{
  display: block; height: 100%; width: 0;
  background: var(--akzent);
  transition: width 320ms var(--kurve);
}

.schritt{ display: none; }
.schritt.an{ display: block; animation: auf 260ms var(--kurve); }
@keyframes auf{
  from{ opacity: 0; transform: translateY(6px); }
  to  { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce){
  .schritt.an{ animation: none; }
  .balken i{ transition: none; }
}

.schritt legend,
.schritt .frage{
  display: block; padding: 0;
  font-size: clamp(1.25rem, 5.6vw, var(--t-xl));
  font-weight: 600; letter-spacing: -0.021em;
  overflow-wrap: break-word; hyphens: auto;
  line-height: 1.25; margin-bottom: var(--r-2);
}
.schritt .dazu{
  font-size: var(--t-s); color: var(--fg-2); margin-bottom: var(--r-5);
}

.schritt fieldset{ border: 0; margin: 0; padding: 0; }

/* Antwortflaechen: volle Breite, gross genug fuer den Daumen. */
.wahl{ display: grid; gap: var(--r-2); margin-top: var(--r-5); }
.wahl label{ position: relative; display: block; }
.wahl input{ position: absolute; opacity: 0; width: 0; height: 0; }
.wahl span{
  display: block;
  padding: var(--r-4) var(--r-5);
  background: var(--flaeche);
  border-radius: var(--rund);
  font-size: var(--t-m);
  cursor: pointer;
  transition: background var(--tempo) var(--kurve),
              color var(--tempo) var(--kurve);
}
.wahl span:hover{ background: var(--flaeche-2); }
.wahl input:checked + span{ background: var(--akzent); color: var(--akzent-fg); }
.wahl input:focus-visible + span{ outline: 2px solid var(--akzent); outline-offset: 3px; }

input[type="text"], input[type="date"], textarea{
  width: 100%; margin-top: var(--r-5);
  padding: var(--r-4) var(--r-5);
  background: var(--flaeche);
  border: 0; border-radius: var(--rund);
  color: var(--fg); font: var(--t-m)/1.5 var(--schrift);
}
input[type="date"]{ max-width: 15rem; }
textarea{ min-height: 9rem; resize: vertical; }
::placeholder{ color: var(--fg-3); }

.steuerung{
  display: flex; align-items: center; gap: var(--r-3);
  margin-top: var(--r-6); flex-wrap: wrap;
}
.zurueck{
  background: none; border: 0; padding: var(--r-2) 0;
  color: var(--fg-3); font: var(--t-s) var(--schrift); cursor: pointer;
}
.zurueck:hover{ color: var(--fg); }

/* Letzter Schritt: Zusammenfassung vor dem Absenden. */
.zusammen{
  display: grid; gap: var(--r-3);
  margin: var(--r-5) 0;
  font-size: var(--t-s);
}
.zusammen div{ display: grid; gap: 2px; }
.zusammen dt{ color: var(--fg-3); font-size: var(--t-xs); }
.zusammen dd{ margin: 0; color: var(--fg); }


/* 7  Startseite ========================================================== */

.portraet{ margin: var(--r-7) 0 var(--r-6); }
.portraet img{
  width: 168px; height: auto;
  border-radius: var(--rund);
  display: block; margin-bottom: var(--r-5);
}
@media (min-width: 40rem){
  .portraet{
    display: grid; grid-template-columns: 208px 1fr;
    gap: var(--r-7); align-items: start;
    margin-top: var(--r-8);
  }
  .portraet img{ width: 100%; margin-bottom: 0; }
}
.portraet .rolle{
  color: var(--fg-2); font-size: var(--t-s);
  margin: var(--r-2) 0 var(--r-5);
}

.gebietszeile{
  display: flex; flex-wrap: wrap; gap: var(--r-2) var(--r-5);
  font-size: var(--t-m);
}

.daten{ display: grid; gap: var(--r-3); font-size: var(--t-s); }
.daten div{ display: grid; gap: 2px; }
.daten dt{ color: var(--fg-3); font-size: var(--t-xs); }
.daten dd{ margin: 0; }


/* 8  Hilfsklassen ======================================================== */

dl{ margin: 0; }
.platzhalter{
  background: var(--akzent-weich); color: var(--akzent);
  padding: 0 var(--r-1); border-radius: var(--r-1); font-weight: 600;
}
.fehlt{ margin: var(--r-3) 0 0; color: var(--akzent); font-size: var(--t-s); }


/* 9  Absenden des Formulars ============================================= */

/* Teuer erkauft: .knopf setzt display:inline-flex und ist damit
   spezifischer als das display:none, das der Browser dem Attribut hidden
   mitgibt. Ein per JavaScript mit hidden ausgeblendeter Knopf blieb
   deshalb sichtbar und trug weiter seine alte Aufschrift "Wird gesendet",
   obwohl die Anfrage langst durch war. Es sah nach einem Haenger aus und
   war einer der Stilregel. */
[hidden]{ display: none !important; }

/* Honigtopf. Nicht display:none: manche Automaten ueberspringen verborgene
   Felder, ein weit nach links geschobenes Feld fuellen sie aus. Fuer
   Screenreader mit aria-hidden und tabindex=-1 aus dem Weg. */
.honig{
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

.absenden{ margin-top: var(--r-5); }
.absenden .rechenaufgabe{
  display: grid; gap: var(--r-2); margin-bottom: var(--r-4);
}
.absenden .rechenaufgabe input{ max-width: 140px; }
.absenden .datenschutz{ margin: 0 0 var(--r-4); }
.absenden .haken{
  display: flex; gap: var(--r-3); align-items: flex-start;
  font-size: var(--t-s); margin-bottom: var(--r-4);
}
.absenden .haken input{ margin-top: 4px; flex: none; }
.absenden .oder{
  margin: var(--r-4) 0 0; font-size: var(--t-s); color: var(--fg-2);
}
.meldung{ margin: var(--r-4) 0 0; font-size: var(--t-s); }
.meldung.schlecht{ color: var(--akzent); }
.meldung.gut{
  background: var(--akzent-weich); color: var(--fg);
  padding: var(--r-4); border-radius: var(--r-2);
  font-size: var(--t-m);
}