/*
 * DIE GESTALTUNG DER INFORMATIONSSEITE, seit Fassung 0.69.0 eigenständig.
 *
 * Markus hat info.php, info.css und js/info.js am 13.09.2026 selbst gebaut.
 * Die erste Fassung dieser Datei trug 3232 Zeilen, wovon 1099 von 1218
 * Regelzeilen wortgleich aus stil.css stammten: die ganze Anwendung stand ein
 * zweites Mal daneben, samt zwei Farbtafeln und zwei Kontrastentscheiden.
 *
 * WARUM DAS ZURÜCKGEBAUT WURDE
 *   Eine Kopie altert. Die Farbtafel in der Kopie war beim Übernehmen schon
 *   nicht mehr dieselbe wie die in stil.css; wer künftig einen Kontrastwert in
 *   stil.css verbessert, verbessert ihn auf der Informationsseite nicht mit.
 *   Zwei Wahrheiten über dieselbe Farbe sind genau die Doppelführung, die das
 *   Pflichtenheft an anderer Stelle verbietet.
 *
 * WIE ES JETZT LÄUFT
 *   info.php lädt zuerst stil.css und dann diese Datei. Von dort kommen die
 *   Variablen in :root, die dunkle Fassung, die Grundschrift und alles, was
 *   nicht der Informationsseite gehört. Hier stehen nur noch die Regeln, die
 *   es ausserhalb dieser einen Seite nicht gibt: 114 Zeilen statt 3232.
 *
 * WAS BEIM ZURÜCKBAU ZUSÄTZLICH GEÄNDERT WURDE
 *   Bedienflächen tragen jetzt mindestens 44 Punkte in der Höhe, keine
 *   Schriftgrösse liegt unter 14 Punkten, und es gibt einen Druckstil. Ohne
 *   ihn blieben die eingeblendeten Abschnitte beim Drucken auf einer Opazität
 *   von 0,27 stehen, gemessen am 13.09.2026: Die Seite kam grau aus dem
 *   Drucker. Gemessen wird das ab 0.69.0 von pruefwerkzeuge/pruefe_info.py.
 *
 * Die Regeln .fuss-infolink und .wandinfo stehen NICHT hier, sondern in
 * stil.css, weil sie auf den anderen Seiten gebraucht werden und nicht auf
 * dieser.
 */

/* ---------------- Grundgerüst der Seite ---------------- */

.infoseite { padding: 0; overflow-x: hidden; background: radial-gradient(circle at 92% 10%, rgba(47,93,80,.11), transparent 24rem), var(--grund); }
.infoseite main { max-width: none; margin: 0; }
.infokopf { position: sticky; z-index: 20; top: 0; display: flex; align-items: center; justify-content: space-between; min-height: 68px; padding: 12px clamp(20px,5vw,72px); border-bottom: 1px solid var(--linie); background: color-mix(in srgb, var(--grund) 90%, transparent); backdrop-filter: blur(16px); }
/* Auch die Wortmarke ist ein Bedienelement: Sie führt zur Anwendung. 39
   Punkte hoch war sie bis 0.69.0, gemessen im Kopf und im Fuss. */
.infomarke { display: inline-flex; align-items: center; min-height: 44px; color: var(--schrift); font-size: 25px; font-weight: 800; letter-spacing: .01em; text-decoration: none; }
.infonavi { display: flex; align-items: center; gap: clamp(12px,2.5vw,34px); }

/* Mindestens 44 Punkte hoch, seit 0.69.0. Vorher waren die beiden Textlinks im
   Kopf 23 Punkte hoch und der Knopf daneben 38: auf einem Handy trifft ein
   Daumen das nicht zuverlässig. 44 ist der Wert, den die Anwendung überall
   sonst einhält und den pruefe_oberflaeche.py dort nachmisst. */
.infonavi a { display: inline-flex; align-items: center; min-height: 44px; color: var(--schrift); font-size: 15px; font-weight: 650; text-decoration: none; }
.infonavi a:hover, .infonavi a:focus-visible, .infotextlink:hover, .infotextlink:focus-visible { text-decoration: underline; text-underline-offset: .25em; }
.infonavi .infostart, .infostart { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 12px 20px; border: 2px solid var(--akzent); border-radius: 999px; background: var(--akzent); color: var(--akzent-schrift); font-weight: 750; line-height: 1.2; text-decoration: none; box-shadow: 0 10px 26px rgba(20,54,44,.16); transition: transform 180ms ease, box-shadow 180ms ease; }
.infonavi .infostart.klein { min-height: 44px; padding: 10px 17px; }
.infostart:hover, .infostart:focus-visible { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(20,54,44,.23); }

/* Der Kopf klebt oben. Ohne diesen Abstand landet ein Ankersprung auf
   #kann oder #will unter dem Kopf, und die Überschrift ist verdeckt. */
.infoabschnitt, .infoabschluss { scroll-margin-top: 88px; }

/* ---------------- Der Einstieg ---------------- */

.infoheld { display: grid; grid-template-columns: minmax(0,.95fr) minmax(420px,1.05fr); align-items: stretch; min-height: 620px; }
.infoheld-text { align-self: center; padding: clamp(48px,6vw,86px) clamp(30px,5vw,78px); }
.infokicker, .infokapitel { margin: 0 0 20px; color: var(--akzent); font-size: 14px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.infoheld h1 { max-width: 690px; margin: 0; font-size: clamp(40px,4.4vw,66px); font-weight: 760; letter-spacing: -.045em; line-height: 1.02; }
.infolead { max-width: 650px; margin: 25px 0 0; font-size: clamp(18px,1.45vw,22px); line-height: 1.5; }
.infoaktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 28px; }
.infotextlink { display: inline-flex; align-items: center; min-height: 44px; color: var(--schrift); font-weight: 700; text-decoration: none; }
.infohinweis { margin: 20px 0 0; color: var(--schrift-leise); font-size: 14px; }
.infoheld-bild { position: relative; min-height: 560px; overflow: hidden; border-bottom-left-radius: 56px; background: #efeee8; }
.infoheld-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 58% center; filter: saturate(.92) contrast(1.02); }
.infobild-satz { position: absolute; right: clamp(22px,4vw,62px); bottom: clamp(24px,4vw,58px); padding: 17px 21px; border: 1px solid rgba(255,255,255,.55); border-radius: 18px; background: rgba(18,44,37,.86); color: #fff; font-size: clamp(20px,2vw,28px); font-weight: 760; line-height: 1.15; backdrop-filter: blur(10px); }

/* ---------------- Abschnitte und der Weg in sechs Schritten ---------------- */

.infoabschnitt { width: min(1120px,calc(100% - 40px)); margin: 0 auto; padding: clamp(68px,8vw,112px) 0; }
.infozweispaltig { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(280px,.7fr); gap: clamp(44px,8vw,130px); align-items: start; }
.infoabschnitt h2, .infoabschluss h2 { margin: 0; font-size: clamp(34px,4vw,56px); font-weight: 740; letter-spacing: -.04em; line-height: 1.07; }
.infozweispaltig p { margin: 0 0 18px; font-size: 18px; line-height: 1.6; }
.infoweg { display: grid; grid-template-columns: repeat(6,1fr); margin-top: 54px; border-top: 1px solid var(--linie); }
.infoweg-schritt { position: relative; min-height: 44px; padding: 22px 8px 20px 0; border: 0; border-top: 3px solid transparent; border-radius: 0; background: transparent; color: var(--schrift-leise); font: inherit; font-size: 15px; font-weight: 700; text-align: left; cursor: pointer; }
.infoweg-schritt span { display: block; margin-bottom: 4px; color: var(--schrift-leise); font-size: 14px; letter-spacing: .08em; }
.infoweg-schritt.ist-aktiv { border-top-color: var(--akzent); color: var(--akzent); }
.infoweg-antwort { display: grid; grid-template-columns: 1.1fr .9fr; gap: 38px; min-height: 158px; padding: 36px clamp(26px,5vw,66px); border-radius: 0 0 28px 28px; background: var(--karte); box-shadow: 0 18px 50px rgba(30,40,35,.08); }
.infoweg-antwort p { margin: 0; }
.infoweg-frage { font-size: clamp(25px,3vw,38px); font-weight: 720; line-height: 1.2; }
#infoweg-erklaerung { align-self: center; color: var(--schrift-leise); }

/* ---------------- Die vier Karten ---------------- */

.infoeinleitung { margin-bottom: 48px; }
.infokarten { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.infokarte { --kartenfarbe: var(--option-a); position: relative; min-height: 330px; padding: clamp(28px,3vw,44px); overflow: hidden; border: 1px solid var(--linie); border-radius: 26px; background: var(--karte); box-shadow: 0 16px 44px rgba(30,40,35,.055); }
.infokarte::after { position: absolute; right: -55px; bottom: -85px; width: 210px; height: 210px; border: 30px solid color-mix(in srgb,var(--kartenfarbe) 18%,transparent); border-radius: 50%; content: ""; }
.info-gruppe { --kartenfarbe: var(--option-b); } .info-werkzeuge { --kartenfarbe: var(--option-c); } .info-ki { --kartenfarbe: var(--option-d); }
.infokarte h3 { max-width: 430px; margin: 46px 0 16px; font-size: clamp(25px,2.4vw,35px); letter-spacing: -.03em; line-height: 1.1; }
.infokarte > p:not(.infokartennummer):not(.infokartenfuss) { max-width: 510px; font-size: 18px; line-height: 1.6; }
.infokartennummer { position: absolute; top: 30px; right: 34px; margin: 0; color: color-mix(in srgb,var(--kartenfarbe) 72%,var(--schrift)); font-size: 14px; font-weight: 800; letter-spacing: .1em; }
.infokartenfuss { position: absolute; right: 34px; bottom: 27px; left: clamp(30px,4vw,56px); z-index: 1; margin: 0; color: var(--schrift-leise); font-size: 14px; font-weight: 700; letter-spacing: .02em; }

/* ---------------- Die Probe mit der Muss-Bedingung ---------------- */

.infodemo { display: grid; grid-template-columns: minmax(0,.75fr) minmax(420px,1fr); gap: clamp(48px,9vw,140px); align-items: center; }
.infodemo-kopf > p:last-child { max-width: 600px; margin: 28px 0 0; font-size: 19px; line-height: 1.65; }
.infodemo-flaeche { padding: clamp(28px,4vw,54px); border-radius: 32px; background: #173f35; color: #fff; box-shadow: 0 28px 70px rgba(20,54,44,.24); }
.infodemo-option, .infodemo-ergebnis { display: flex; align-items: center; gap: 18px; padding: 21px; border-radius: 18px; background: rgba(255,255,255,.1); }
.infodemo-option strong, .infodemo-ergebnis strong, .infodemo-option small, .infodemo-ergebnis small { display: block; }
.infodemo-option small, .infodemo-ergebnis small { margin-top: 3px; color: rgba(255,255,255,.76); font-size: 14px; }
.infoschalter { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 44px; margin: 28px 0; font-weight: 700; cursor: pointer; }
.infoschalter input { position: absolute; opacity: 0; pointer-events: none; }
.infoschalter-spur { position: relative; flex: 0 0 58px; width: 58px; height: 32px; border: 2px solid rgba(255,255,255,.65); border-radius: 999px; background: rgba(0,0,0,.22); }
.infoschalter-spur::after { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; content: ""; transition: transform 180ms ease; }
.infoschalter input:checked + .infoschalter-spur::after { transform: translateX(26px); }
.infoschalter input:focus-visible + .infoschalter-spur { outline: 3px solid #fff; outline-offset: 4px; }
.infodemo-ergebnis > span { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; font-size: 26px; font-weight: 800; }
.infodemo-ergebnis.ist-zulaessig > span { background: #8bc79a; color: #0a2e24; }
.infodemo-ergebnis.ist-unzulaessig > span { background: #eda093; color: #44140c; }

/* ---------------- Haltung, Abschluss, Fuss ---------------- */

.infohaltung { width: min(1380px,calc(100% - 40px)); padding-right: clamp(20px,5vw,80px); padding-left: clamp(20px,5vw,80px); border-radius: 48px; background: color-mix(in srgb,var(--akzent) 10%,var(--karte)); }
.infohaltung h2 { max-width: 900px; }
.infohaltung-raster { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 28px; margin-top: 52px; }
.infohaltung-raster p { margin: 0; padding-top: 22px; border-top: 2px solid var(--akzent); line-height: 1.65; }
.infohaltung-raster strong { display: block; margin-bottom: 9px; font-size: 19px; }
.infoabschluss { margin-top: clamp(60px,8vw,110px); padding: clamp(70px,8vw,105px) 24px; background: #123f36; color: #fff; text-align: center; }
.infoabschluss .infokicker { color: #a9dacb; }
.infoabschluss h2 { max-width: 900px; margin: 0 auto 42px; }
.infostart.hell { border-color: #fff; background: #fff; color: #123f36; }
.infoabschluss > p:last-child { margin: 25px auto 0; color: rgba(255,255,255,.85); font-size: 14px; }
/* Flexibel statt drei festen Spalten, seit 0.69.0: Der Fuss trägt jetzt auch
   den Weg zum Impressum, und eine vierte Spalte hätte die Regel jedes Mal
   mitgeändert, wenn dort etwas dazukommt. */
.infofuss { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding: 34px clamp(20px,5vw,72px); }
.infofuss p { margin: 0; }
.infofuss .infofuss-satz { flex: 1 1 auto; }
.infofuss a:not(.infomarke) { display: inline-flex; align-items: center; min-height: 44px; color: var(--schrift); font-size: 14px; font-weight: 650; }

/*
 * DAS IMPRESSUM, seit 0.69.0.
 *
 * Markus am 13.09.2026: «Es muss auffindbar, aber nicht prominent platziert
 * sein.» Deshalb steht es als eigener Abschnitt am Fuss dieser Seite und
 * nicht im Einstieg; erreichbar ist es über den Fuss jeder Seite, also auch
 * aus der Anwendung heraus, und über einen Ankersprung von dort.
 */
.infoimpressum { width: min(1120px,calc(100% - 40px)); margin: 0 auto; padding: 8px 0 56px; scroll-margin-top: 88px; color: var(--schrift-leise); font-size: 14px; line-height: 1.6; }
/* Der Griff des Klappfelds, seit 0.70.0. Er trägt 44 Punkte, weil er das
   einzige Bedienelement dieses Abschnitts ist, und die Schriftfarbe statt der
   leisen, damit er als Griff zu erkennen ist. */
.infoimpressum > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; color: var(--schrift); font-size: 16px; font-weight: 700; cursor: pointer; list-style: none; }
/* Das eigene Zeichen: display flex nimmt dem Griff seinen Marker, und ohne
   Marker liest sich der Griff wie eine blosse Überschrift. Es dreht sich beim
   Öffnen, damit der Zustand ohne Text zu sehen ist. */
.infoimpressum > summary::-webkit-details-marker { display: none; }
.infoimpressum > summary::before { display: inline-block; color: var(--akzent); content: "\25B8"; transition: transform 150ms ease; }
.infoimpressum[open] > summary::before { transform: rotate(90deg); }
.infoimpressum > summary:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; }
.infoimpressum-inhalt { padding-top: 6px; }
.infoimpressum p { margin: 0 0 6px; }
/* Die Kontaktadresse steht auf einer eigenen Zeile. Mitten im Fliesstext
   war sie 16 Punkte hoch und damit auf einem Handy kaum zu treffen; ein
   Impressum, dessen Kontaktweg nicht anzutippen ist, erfüllt seinen Zweck
   nur halb. */
.infoimpressum a { display: inline-flex; align-items: center; min-height: 44px; color: var(--schrift-leise); }

/* ---------------- Das Einblenden beim Scrollen ---------------- */

/*
 * Die Abschnitte blenden sich beim Erscheinen ein. Das Merkmal setzt
 * js/info.js; ohne Skript bleibt info-erscheint ungesetzt und alles steht
 * sofort da. Beim Sprung auf einen Anker greift zusätzlich :target, sonst
 * landet man auf einem Abschnitt, der noch bei Opazität 0 steht.
 */
.info-erscheint { opacity: 0; transform: translateY(24px); transition: opacity 650ms ease, transform 650ms ease; }
.info-erscheint.ist-sichtbar, .info-erscheint:target { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .infoheld { grid-template-columns: 1fr; }
  .infoheld-text { padding-bottom: 58px; }
  .infoheld-bild { min-height: 490px; border-bottom-left-radius: 0; }
  .infozweispaltig, .infodemo { grid-template-columns: 1fr; }
  .infohaltung-raster { grid-template-columns: repeat(2,1fr); }
  .infoweg { grid-template-columns: repeat(3,1fr); }
  .infoweg-schritt { border-top: 1px solid var(--linie); }
}

@media (max-width: 700px) {
  .infokopf { min-height: 60px; }
  .infonavi > a:not(.infostart) { display: none; }
  .infonavi .infostart.klein { min-height: 44px; }
  .infoheld { min-height: auto; }
  .infoheld-text { padding: 70px 20px 52px; }
  .infoheld h1 { font-size: clamp(37px,11vw,52px); }
  .infoheld-bild { min-height: 390px; }
  .infolead { font-size: 20px; }
  .infoabschnitt { width: min(100% - 32px,1180px); padding: 68px 0; }
  .infoabschnitt h2, .infoabschluss h2 { font-size: 35px; }
  .infoweg { grid-template-columns: repeat(2,1fr); margin-top: 48px; }
  .infoweg-antwort { grid-template-columns: 1fr; min-height: 210px; gap: 18px; padding: 28px 22px; }
  .infokarten { grid-template-columns: 1fr; }
  .infokarte { min-height: 330px; }
  .infodemo-flaeche { padding: 24px 18px; }
  .infohaltung { width: calc(100% - 16px); padding: 80px 22px; border-radius: 30px; }
  .infohaltung-raster { grid-template-columns: 1fr; margin-top: 48px; }
  .infoimpressum { width: min(100% - 32px,1180px); }
  .infofuss { flex-direction: column; align-items: flex-start; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .infostart, .infoschalter-spur::after, .info-erscheint,
  .infoimpressum > summary::before { transition: none; }
  .infostart:hover, .infostart:focus-visible, .info-erscheint { transform: none; }
  .info-erscheint { opacity: 1; }
}

/*
 * DER DRUCKSTIL, seit 0.69.0.
 *
 * Gemessen am 13.09.2026: Ohne diesen Block kam die Seite mit einer Opazität
 * von 0,27 aus dem Drucker, weil das Einblenden am Bildschirm hängt und beim
 * Drucken niemand scrollt. Dazu werden die dunklen Flächen hell gesetzt; sonst
 * verbraucht ein Ausdruck eine halbe Patrone für den Hintergrund.
 */
@media print {
  /* transition ebenfalls aus: Sonst steht die Seite im Augenblick des
     Druckens noch mitten im Einblenden, gemessen bei 0,79 statt 1. */
  .info-erscheint { opacity: 1 !important; transform: none !important; transition: none !important; }
  .infokopf, .infonavi, .infostart, .infobild-satz { display: none !important; }
  .infoseite { background: #fff; }
  .infoheld { grid-template-columns: 1fr; min-height: auto; }
  .infoheld-bild { min-height: auto; max-height: 8cm; }
  .infodemo-flaeche, .infoabschluss { background: #fff !important; color: #000 !important; box-shadow: none; }
  .infoabschluss > p:last-child, .infodemo-option small, .infodemo-ergebnis small { color: #000 !important; }
  .infodemo-option, .infodemo-ergebnis { border: 1px solid #000; background: #fff !important; }
  .infoabschnitt, .infoimpressum { page-break-inside: avoid; }
}