/* Das Stylesheet aller sieben Seiten.

   Bis HEAD-124 trug jede Seite ihr eigenes <style> im Kopf, mit demselben
   Reset, demselben Fuss und denselben Farben in sieben Abschriften. Wer eine
   Regel anfasste, musste sieben Stellen finden - und genau daran ist der
   Bestand schon einmal auseinandergelaufen: die Fusszeile von afue.store stand
   als einzige groesser da als der Hinweis ueber ihr, weil ihr die
   Groessenangabe fehlte, und die mailto-Adressen auf den Rechtsseiten waren
   die einzigen Links des Auftritts in Browser-Blau.

   Deshalb stehen Farben und Groessen jetzt einmal in :root und werden ueberall
   abgerufen. Wer den Auftritt aendern will, aendert einen Wert - und nicht
   sieben, von denen er sechs findet.

   Zwei Sorten Seite, ueber die Klasse am <body> unterschieden:

     body.voll  - die vier Domainseiten. Sie passen auf den Schirm, ohne zu
                  scrollen (HEAD-124).
     body.text  - Disclaimer, Impressum, Datenschutz. Dort steht mehr Text, als
                  ein Telefon zeigen kann; sie scrollen weiter. */

:root {
    /* --- Farben. Vorher zwoelfmal "#555" und viermal "#fee580" im Bestand. */
    --grund: #000000;
    --schrift: #ffffff;
    /* Das Grau jedes Links und jeder Nebenrolle. Dieselbe Farbe wie
       "->Mitglied werden" auf afue-info; sie setzt den Ton fuer den ganzen
       Auftritt. */
    --grau: #555;
    /* Eine Spur heller, fuer Ueberschriften auf den Rechtsseiten. */
    --grau-hell: #777;
    --gelb: #fee580;
    --feld-grund: #222;
    --kasten: #333;

    /* --- Groessen. Jede steht fuer eine Rolle, nicht fuer eine Seite: derselbe
       Rang klingt auf allen vier Domains gleich laut. Vorher stand jede Zahl
       mehrfach im Bestand, zuletzt dreimal getrennt als 32px. */

    /* Die Leitgroesse, und damit die einzige Zahl, an der der ganze Auftritt
       haengt. Sie ist der Titel von afue.ch.

       ⚠️ vw, nicht vmin. afue.ch traegt die laengste unteilbare Zeile des
       Auftritts, also entscheidet die Breite ueber die Groesse - mit vmin
       bricht sie im Queren um. In v0.3.16 rechnete afue.ch auf vw und die
       beiden anderen Seiten auf vmin: 30px gegen 26px fuer dieselbe Rolle.
       Die Groesse von afue.ch gewinnt, und sie gilt fuer alle. */
    --skala: clamp(16px, 4.4vw, 32px);

    /* Alles, was die Seite gross macht, ist ein Vielfaches der Leitgroesse.
       Das Verhaeltnis zwischen Titel, Unterzeile und Logo bleibt damit bei
       jeder Fenstergroesse dasselbe - vorher hing jede an einer anderen
       Achse (vw, vmin, vh) und sie liefen auseinander, sobald das Fenster
       nicht zufaellig quadratisch war. Wer den Auftritt insgesamt groesser
       oder kleiner will, aendert eine Zahl.

       Die Faktoren sind die alten Obergrenzen, geteilt durch 32px: so sieht
       eine Seite bei voller Groesse aus wie vorher. */

    /* Die lauteste Zeile: "ALTERNATIVE FÜR URI", "THINK AFÜ", die
       Ueberschrift ueber dem Formular. */
    --titel: var(--skala);
    /* Die Stufe darunter: "->Mitglied werden". 20px von 32px. */
    --unterzeile: calc(var(--skala) * 0.625);

    /* Das Logo, 220px von 32px.

       ⚠️ Die einzige Groesse mit einem zweiten Deckel, und der Grund ist die
       Achse: ein Titel darf nicht umbrechen, also haengt er an der Breite -
       ein Bild dagegen wird zu hoch, nicht zu breit. Auf einem quer
       gehaltenen Telefon (844x390) waeren 6.875 x 32px = 220px Logo auf
       390px Bildschirm, und HEAD-124 waere hin. "min" nimmt, was zuerst
       begrenzt. Ein Bild kann schrumpfen, ohne unlesbar zu werden, eine
       Textzeile nicht - deshalb gibt hier das Logo nach und nicht der
       Titel. */
    --logo: min(calc(var(--skala) * 6.875), 34vh);

    /* --- Fest, und das ist die Gegenregel: was die Seite gross macht,
       skaliert; was sie kommentiert, steht. Fuss und Hinweise sind auf allen
       sieben Seiten dasselbe und sollen ueberall gleich aussehen. An vh
       gebunden sahen sie in zwei verschieden hohen Fenstern verschieden
       gross aus, obwohl sie dasselbe sind - gesehen in v0.3.16. */

    /* Was einen Hinweis gibt statt etwas zu sagen: der Datenschutzhinweis,
       die Fehlermeldung, die Captcha-Erklaerung, die Erfolgsmeldung. */
    --klein: 14px;
    /* Die Fusslinks. Eigene Zahl, weil der Fuss sich auf sieben Seiten
       wiederholt und leise sein soll - die Hinweise am Formular bleiben
       davon unberuehrt, obwohl sie frueher dieselbe Zahl trugen. */
    --fuss: 12px;
    /* Die Disclaimer-Zeile darunter, eine Stufe kleiner. */
    --winzig: 9px;
    /* Der Absenden-Knopf. Fest wie die Eingabefelder daneben: eine
       Bedienflaeche ist kein Titel, sie macht die Seite nicht gross. Vorher
       rechnete er als einziger noch selbst. */
    --knopf: 18px;
    /* ⚠️ Die Eingabefelder. 16px ist eine Untergrenze, keine Geschmacksfrage:
       unter 16px zoomt Safari auf dem iPhone beim Antippen eines Feldes von
       selbst hinein, und die Seite steht danach breiter als der Schirm - also
       genau der waagerechte Balken, den HEAD-124 beseitigen soll. Wer hier
       kleiner will, sieht es zuerst auf einem iPhone an. */
    --feld: 16px;

    /* --- Die drei Rechtsseiten. Sie scrollen ohnehin (body.text), also gibt
       es hier nichts zu skalieren. */
    --rechts-titel: 24px;
    --fliesstext: 16px;

    /* Die Spalte, in der Text gelesen wird: das Formular auf afue.store, seine
       Ueberschrift, und der Fliesstext der drei Rechtsseiten. Beim Wechsel von
       einer Hauptseite auf eine Rechtsseite springt die Textbreite sonst um
       300px. Die 90% tragen die schmalen Geraete ohne media query. */
    --spalte: 500px;
    --spalte-anteil: 90%;

    --rand: 20px;
}

/* ------------------------------------------------------------------ Grund */

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

/* Die Grundfarbe jedes Links. Ohne diese Regel erbt ein Link, den keine
   spezifischere Regel erfasst, das Browser-Blau - auf schwarzem Grund und
   neben lauter grauem Text faellt er heraus wie ein Fremdkoerper. Betroffen
   war zuletzt der Verweis auf die Datenschutzerklaerung am Formular von
   afue.store. Spezifischere Regeln gewinnen weiterhin. */
a {
    color: var(--grau);
}

body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--grund);
    color: var(--schrift);
    text-align: center;
    padding: var(--rand);
    /* Waagerecht wird nie gescrollt. Anders als in der Senkrechten gibt es
       hier nichts abzuwaegen: ein Balken am unteren Rand heisst immer, dass
       etwas zu breit geraten ist, und niemand sucht Inhalt seitlich. */
    overflow-x: hidden;
}

/* ----------------------------------------------- Die vier Domainseiten */

/* Der Auftrag von HEAD-124: die Seite passt auf den Schirm.

   ⚠️ "height", nicht "min-height". Mit min-height waechst der Body ueber den
   Viewport hinaus, sobald der Inhalt es verlangt - und genau das erzeugt den
   Balken, der hier weg soll. Damit nichts abgeschnitten wird, haengen alle
   Groessen oben am Viewport statt in px zu stehen.

   ⚠️ Die zweite Zeile ist kein Schreibfehler. Auf dem Telefon ist 100vh die
   Hoehe OHNE eingeblendete Adressleiste, also mehr als sichtbar ist: eine
   Seite, die exakt 100vh hoch ist, scrollt dort um die Hoehe der Leiste. dvh
   misst, was wirklich da ist. Browser, die dvh nicht kennen, behalten die
   Zeile darueber. */
body.voll {
    height: 100vh;
    height: 100dvh;
    /* Vertikal zentriert, waagerecht ueber align-items. Die Verankerung oben
       (4d3c2ff) hat den Sprung beim Wechsel ueber die Fusslinks beseitigt,
       aber die kurzen Seiten oben lastig gemacht - afue.space zeigte sein Logo
       im oberen Drittel statt in der Mitte.

       ⚠️ Diese Zeile allein genuegt nicht, und das ist keine Feinheit: ein
       "margin-top: auto" an der Fusszeile schluckt den freien Platz, BEVOR
       "justify-content" ihn verteilen darf - so schreibt es die Flexbox vor.
       Der Inhalt stand dadurch ganz oben und der Fuss ganz unten. Die Regel
       darunter gibt dem Inhaltsbereich den Platz, dann bleibt nichts mehr zu
       schlucken. Gesehen in v0.3.14, entstanden bei HEAD-124. */
    justify-content: center;
}

/* Der Inhaltsbereich nimmt allen Platz zwischen Oberkante und Fusszeile und
   zentriert darin - dasselbe, was .inhalt auf afue.store schon tut. Jede der
   vier Seiten hat genau einen: afue.ch ein <main>, afue.info und afue.space
   ihren Bildcontainer, afue.store die .inhalt. */
body.voll > main,
body.voll > .image-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
}

/* ------------------------------------------------------------------- Fuss */

/* Auf allen sieben Seiten derselbe. ⚠️ Im Fluss, nicht "position: absolute".
   Ein absolut positionierter Fuss ohne positionierten Vorfahren misst "bottom"
   am Viewport, nicht am Dokument: sobald die Seite laenger wird als der
   Bildschirm, klebt er auf Hoehe "Viewporthoehe minus 20px" - also mitten im
   Inhalt. Auf /datenschutz lag er dadurch ueber dem Abschnitt "Ihre Rechte";
   auf afue.store traefe es das Formular, sobald die Tastatur eines Telefons
   den sichtbaren Bereich verkleinert. "margin-top: auto" erledigt beides: bei
   kurzem Inhalt sitzt er unten, bei langem folgt er ihm nach. */
footer {
    width: 100%;
    margin-top: auto;
    text-align: center;
    color: var(--grau);
}

footer a {
    color: var(--grau);
    text-decoration: none;
    font-size: var(--fuss);
    font-weight: 900;
    margin: 0 10px;
}

.disclaimer a {
    font-size: var(--winzig);
}

footer a:hover {
    color: var(--grau);
}

/* -------------------------------------------------------- Logo und Titel */

.image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    /* ⚠️ Kein flex-grow und keine 100vh: beides machte diesen Container so
       hoch wie den Bildschirm und zentrierte den Inhalt darin - die
       Verankerung am body lief dadurch ins Leere. "justify-content" bleibt:
       bei der Standardrichtung row ist das die waagerechte Achse, also die
       Zentrierung, die hier gewollt ist. */
}

.image-container img {
    width: auto;
    height: var(--logo);
    /* Haelt das Logo auf schmalen Geraeten in der Breite, wo die Hoehe allein
       es ueber den Rand wachsen liesse - der waagerechte Balken. */
    max-width: 90vw;
    object-fit: contain;
}

/* afue.ch traegt statt eines Logos den Schriftzug - dieselbe Rolle wie
   "THINK AFÜ" und die Ueberschrift ueber dem Formular, also dieselbe Groesse.
   Seine Anforderung an die Einheit steht jetzt bei --titel. */
.image-container a {
    font-size: var(--titel);
    font-weight: bold;
    text-decoration: none;
    color: var(--schrift);
}

main {
    width: 100%;
    text-align: center;
}

/* ⚠️ Kein "position: absolute" an diesem <main>. afue.ch ist die einzige Seite
   mit einem, und die Regel war eine Kopie der Fusszeile darunter - beide
   standen auf "bottom: 20px", also an derselben Stelle. Sichtbar wurde es
   erst, als c8efbda dem Bildcontainer das height:100vh nahm: bis dahin machte
   diese Hoehe das absolut positionierte main so hoch wie den Bildschirm, und
   der Titel landete durch Zufall in der Mitte. Im Fluss zentriert ihn der
   body, wie auf den anderen drei Seiten. */

/* ------------------------------------------------------------ afue.info */

.image-container.mit-text {
    flex-direction: column;
    text-align: center;
    margin-bottom: clamp(8px, 3vh, 50px);
}

.text-container {
    margin-top: clamp(6px, 2.5vh, 40px);
    color: var(--gelb);
}

.text-container p {
    font-size: var(--titel);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: clamp(2px, 0.8vh, 10px) 0;
}

.text-container a {
    color: var(--grau);
    text-decoration: none;
    font-size: var(--unterzeile);
    font-weight: 900;
}

/* ----------------------------------------------------------- afue.store */

/* Der Inhaltsbereich nimmt allen Platz zwischen Oberkante und Fusszeile und
   zentriert darin. Damit sitzt der Inhalt so hoch wie auf den drei anderen
   Seiten. flex:1 bleibt, damit die Fusszeile im Fluss unten sitzt. */
.inhalt {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* Die eine Seite, die auch nach dem Schrumpfen laenger werden kann als der
       Schirm: fuenf Felder, Captcha und Knopf haben eine Untergrenze, und die
       Tastatur eines Telefons nimmt die halbe Hoehe. Statt den Inhalt
       abzuschneiden scrollt dann dieser Bereich - der Fuss bleibt stehen, die
       Seite als Ganzes scrollt weiterhin nicht. */
    overflow-y: auto;
    min-height: 0;
}

.inhalt h1 {
    /* Dieselbe Stimme wie "THINK AFÜ" auf afue-info, ueber denselben Wert -
       vorher stand die 32 an beiden Stellen einzeln da. */
    font-size: var(--titel);
    color: var(--gelb);
    margin-bottom: clamp(6px, 2vh, 20px);
    /* Genau die Breite des Formulars darunter, damit beide eine Kante bilden.
       Ueber die volle Bildschirmbreite gelesen sprang das Auge am Zeilenende
       zurueck und fand den Anfang der naechsten nicht mehr; ein Drittel war
       die Gegenrichtung und presste den Satz in sechs Zeilen. */
    width: var(--spalte-anteil);
    max-width: var(--spalte);
}

.form-container {
    background-color: var(--kasten);
    padding: clamp(10px, 2.5vh, 30px);
    border-radius: 8px;
    width: var(--spalte-anteil);
    max-width: var(--spalte);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

input, select {
    width: 100%;
    padding: clamp(4px, 1vh, 10px);
    margin: clamp(3px, 0.9vh, 10px) 0;
    border-radius: 5px;
    border: 1px solid var(--gelb);
    background-color: var(--feld-grund);
    font-size: var(--feld);
    /* ⚠️ Auf #222 ergibt #555 einen Kontrast von 2.1:1 - weniger als die
       Haelfte dessen, was lesbarer Text braucht (4.5:1). Wer hier seine
       Adresse eintippt, kann sie kaum nachlesen, und weil der Platzhalter
       ebenfalls grau ist, sieht man einem Feld nicht mehr an, ob es gefuellt
       ist. #888 waere das naechstliegende Grau, das die Schwelle erreicht. So
       gewuenscht am 11.09.2026. */
    color: var(--grau);
}

button {
    width: 100%;
    padding: clamp(5px, 1.2vh, 10px);
    background-color: var(--gelb);
    border: none;
    color: var(--grau);
    font-size: var(--knopf);
    font-weight: bold;
    cursor: pointer;
    border-radius: 5px;
}

button:hover {
    background-color: #ffb74d;
}

/* Grau wie die Links: der Satz ist eine Fussnote zum Formular, kein Teil
   davon. In Weiss stand er lauter da als die Felder, die er erklaert - und
   lauter als die Datenschutzerklaerung, auf die er zeigt. */
.datenschutz-hinweis {
    color: var(--grau);
    font-size: var(--klein);
    /* Der Absatz folgt direkt auf den Knopf und klebte an ihm. Etwas mehr als
       der Abstand der Felder untereinander - die Fussnote gehoert nicht mehr
       zur Eingabe, sondern kommentiert sie. */
    margin-top: clamp(5px, 1.6vh, 14px);
}

.error-message {
    color: red;
    font-size: var(--klein);
    margin-top: 10px;
}

/* Der Hinweis, wenn das Captcha-Widget gar nicht erst geladen wurde. Er steht
   dort, wo die Box haette stehen sollen - also zwischen dem letzten Feld und
   dem Knopf -, und nicht unten bei den Ablehnungen: er erklaert eine Luecke,
   keine zurueckgewiesene Eingabe. */
.cap-blockiert {
    color: red;
    font-size: var(--klein);
    margin: 14px 0;
    text-align: center;
}

.success-message {
    color: green;
    font-size: var(--klein);
    margin-top: 10px;
}

/* ------------------------------- Disclaimer, Impressum, Datenschutz */

/* Diese drei tragen mehr Text, als ein Telefon zeigen kann. Sie behalten
   deshalb min-height und scrollen - HEAD-124 gilt ausdruecklich nur fuer die
   vier Domainseiten. */
body.text {
    justify-content: flex-start;
    min-height: 100vh;
    min-height: 100dvh;
}

body.text footer {
    padding-top: 60px;
}

.content {
    width: var(--spalte-anteil);
    max-width: var(--spalte);
    text-align: left;
    color: var(--grau);
}

.content h1 {
    font-size: var(--rechts-titel);
    margin-top: var(--rand);
    color: var(--grau-hell);
}

.content p {
    font-size: var(--fliesstext);
    line-height: 1.5;
    margin: 10px 0;
    text-align: justify;
}

/* Hier gab es fuer den Inhalt gar keine Regel, also erbten die mailto-Adressen
   das Browser-Blau - als einziges Element dieser Seiten. Unterstrichen bleiben
   sie, anders als im Menue von afue-info: im Fliesstext einer Rechtsseite ist
   ein Link, der weder Farbe noch Linie hat, keiner. */
.content a {
    color: var(--grau);
}