/*
 * 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; }
/* Kleiner seit 0.75.0. Markus am 15.09.2026 zum Titel: «Ich finde das immer
   noch etwas sehr gross dargestellt.» Der Satz lief auf einem 1200 Punkte
   breiten Fenster über drei Zeilen und stand damit höher als das Bild daneben
   breit war. Von 40 bis 66 auf 32 bis 50 Punkte, dazu etwas mehr Zeilenabstand,
   weil eine kleinere Schrift bei 1.02 gedrängt wirkt. */
.infoheld h1 { max-width: 640px; margin: 0; font-size: clamp(32px,3.4vw,50px); font-weight: 760; letter-spacing: -.035em; line-height: 1.08; }
.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; }
/* Mitgezogen seit 0.75.0. Die Titelzeile ist kleiner geworden, und eine
   Zwischenüberschrift, die grösser ist als der Titel darüber, kehrt die
   Rangfolge um. Von 34 bis 56 auf 28 bis 42 Punkte. */
.infoabschnitt h2, .infoabschluss h2 { margin: 0; font-size: clamp(28px,3vw,42px); font-weight: 740; letter-spacing: -.03em; line-height: 1.12; }
.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 Einstiege, seit 1.30.0 ----------------
   Kleiner als die vier Karten darunter: Hier wird gewählt und nicht
   gelesen, und sechs grosse Karten wären drei Bildschirmhöhen. */

.infoeinstiege { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.infoeinstieg { display: flex; flex-direction: column; padding: 26px 28px 18px; border: 1px solid var(--linie); border-radius: 22px; background: var(--karte); box-shadow: 0 12px 34px rgba(30,40,35,.045); }
.infoeinstieg h3 { margin: 8px 0 10px; font-size: clamp(21px,1.8vw,25px); letter-spacing: -.02em; line-height: 1.15; }
.infoeinstieg p { margin: 0 0 14px; font-size: 16.5px; line-height: 1.55; }
.infoeinstieg .infoeinstieg-methode { margin: 0; color: var(--schrift-leise); font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.infoeinstieg .infotextlink { gap: .4em; margin-top: auto; }
.infoeinstiege-fuss { margin: 26px 0 0; 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; }
/* Der Schlusssatz des Abschnitts «Nicht jede Frage endet in einem Entscheid»,
   seit 0.73.0. Er gehört zu keiner der vier Spalten, sondern zu allen vieren,
   und steht deshalb darunter und in der Breite des Fliesstextes. */
.infoformen-schluss { max-width: 760px; margin: 38px 0 0; line-height: 1.65; }
.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; }
/* Seit 1.14.0 steht hier auch min-width. Der neue Link «Hilfe» ist kurz und
   mass 37 Punkte in der Breite; die Daumenregel verlangt 44 in beiden
   Richtungen, und pruefe_info.py misst sie. Eine Bedienfläche wird von der
   Länge ihres Wortes nicht kleiner. */
.infofuss a:not(.infomarke) { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 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.
 */
/* Seit 1.4.1 stehen hier zwei Klappfelder untereinander, «Was futurino
   kostet» und das Impressum. Mit je 56 Punkten Abstand nach unten klaffte
   dazwischen eine Lücke, die wie ein Seitenende aussah. Der Abstand sitzt
   deshalb neu nur noch unter dem letzten Feld, und zwischen den Feldern
   steht so viel, dass sie als Paar zu lesen sind. */
.infoimpressum { width: min(1120px,calc(100% - 40px)); margin: 0 auto; padding: 8px 0 10px; scroll-margin-top: 88px; color: var(--schrift-leise); font-size: 14px; line-height: 1.6; }
.infoimpressum:last-of-type { padding-bottom: 40px; }
/* 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) {
  .infoeinstiege { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .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(30px,8.5vw,40px); }
  .infoheld-bild { min-height: 390px; }
  .infolead { font-size: 20px; }
  .infoabschnitt { width: min(100% - 32px,1180px); padding: 68px 0; }
  .infoabschnitt h2, .infoabschluss h2 { font-size: 28px; }
  .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; }
  .infoeinstiege { grid-template-columns: 1fr; }
  .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; }
}

/* Seit 1.39.0: Zwischentitel in der Datenschutzerklärung. Kleiner als die
   Abschnittstitel der Seite, damit das Klappfeld ein Nachschlagetext bleibt. */
.infoimpressum h3 { margin: 14px 0 4px; color: var(--schrift); font-size: 15px; font-weight: 700; }

/*
 * DIE METHODENSEITEN, seit 1.39.0 (methoden.php).
 * Sie leben von den Klassen dieser Seite; hier steht nur, was ein
 * Lesetext mit Listen zusätzlich braucht.
 */
.methodenartikel { max-width: 760px; }
.methodenartikel h1 { margin: 6px 0 12px; }
.methodenartikel h2 { margin: 30px 0 10px; font-size: 22px; }
.methodenartikel p { line-height: 1.65; }
.methodenliste { margin: 0 0 8px; padding-left: 1.4em; line-height: 1.6; }
.methodenliste li { margin-bottom: 6px; }
/* Die Kartentitel der Übersicht sind h2, damit die Gliederung stimmt, und
   sehen aus wie die h3 der Einstiege auf info.php. Die allgemeine Regel
   .infoabschnitt h2 trägt dieselbe Spezifität und steht weiter oben; ohne
   die Klasse des Kastens davor setzte sich trotzdem die Grösse der
   Abschnittstitel durch, gemessen am 27.09.2026 an Markus' Bildschirmfoto. */
.infoabschnitt .infoeinstieg h2.methodenkarte-titel { margin: 8px 0 10px; font-size: clamp(19px,1.6vw,22px); font-weight: 700; letter-spacing: -.015em; line-height: 1.2; }
.methodennachbarn a { display: inline-flex; align-items: center; min-height: 44px; color: var(--akzent); }


/*
 * DIE KLAPPFELDER ALS KARTEN, seit 1.39.0.
 *
 * Markus am 27.09.2026 zum Feld «Was futurino kostet»: «Es ist wichtig,
 * aber so sieht es ziemlich platt aus.» Drei Gründe dafür lagen in dieser
 * Datei. Der Text lief über 1120 Punkte Breite, rund 170 Zeichen je Zeile.
 * Er stand in 14 Punkten und in der leisen Farbe, also wie eine Fussnote.
 * Und jede Mailadresse war ein Block von 44 Punkten Höhe, der mitten im
 * Satz die Zeile aufriss.
 *
 * Jetzt ist jedes Klappfeld eine Karte, der Lesetext steht in der
 * Schriftfarbe mit höchstens rund siebzig Zeichen je Zeile, und ein Verweis
 * im Satz behält seine 44 Punkte Bedienfläche über Innenabstand, den ein
 * gleich grosser negativer Aussenabstand für die Zeile zurücknimmt. Dieselbe
 * Technik wie bei der kurzen Beitrittsadresse im Pult.
 */
.infoimpressum.infoklappe { width: min(940px, calc(100% - 32px)); margin: 0 auto 14px; padding: 6px clamp(18px, 3vw, 34px); border: 1px solid var(--linie); border-radius: 20px; background: var(--karte); color: var(--schrift); }
.infoimpressum.infoklappe:last-of-type { margin-bottom: 48px; padding-bottom: 6px; }
.infoimpressum.infoklappe > summary { min-height: 56px; font-size: 18px; }
.infoimpressum.infoklappe[open] > summary { border-bottom: 1px solid var(--linie); }

.infoklappe-inhalt > p, .infoklappe-inhalt > h3 { max-width: 74ch; }
.infoklappe-inhalt { padding: 18px 0 22px; font-size: 16px; line-height: 1.65; }
.infoklappe-inhalt p { margin: 0 0 12px; }
.infoklappe-inhalt .infoklappe-lead { font-size: 18px; line-height: 1.55; }
.infoklappe-inhalt h3 { margin: 22px 0 8px; color: var(--schrift); font-size: 17px; font-weight: 750; line-height: 1.3; }

.infoimpressum.infoklappe p a,
.infoimpressum.infoklappe li a { display: inline; min-height: 0; padding: 14px 0; margin: -14px 0; color: var(--akzent-text); font-weight: 650; text-decoration: underline; text-underline-offset: .2em; }

/* Zusagen und Vorbehalte nebeneinander, weil sie zusammen gelesen werden.
   Die Zusage auf der blassen Akzentfläche, der Vorbehalt mit einer Linie:
   gleich wichtig, verschieden im Ton. */
.infoklappe-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 22px 0 18px; max-width: none; }
.infoklappe-kasten { padding: 18px 20px 8px; border-radius: 16px; }
.infoklappe-kasten h3 { margin-top: 0; }
.infoklappe-kasten.ist-zusage { background: var(--akzent-blass); }
.infoklappe-kasten.ist-vorbehalt { border: 1px solid var(--linie); }

.infoklappe-liste { margin: 0 0 12px; padding: 0; list-style: none; }
.infoklappe-liste li { position: relative; margin: 0 0 8px; padding-left: 1.6em; }
.infoklappe-liste li::before { position: absolute; left: 0; top: 0; font-weight: 800; color: var(--akzent-text); }
.ist-zusage .infoklappe-liste li::before { content: "\2713"; }
.ist-vorbehalt .infoklappe-liste li::before { content: "!"; left: .35em; }

.infoklappe-hinweis { padding: 12px 16px; border-left: 4px solid var(--akzent); background: var(--grund); border-radius: 0 12px 12px 0; }

/* Die drei Wege als Kacheln mit Nummer. */
.infoklappe-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 8px 0 6px; padding: 0; list-style: none; counter-reset: weg; }
.infoklappe-kacheln li { counter-increment: weg; padding: 16px 18px; border: 1px solid var(--linie); border-radius: 14px; background: var(--grund); }
.infoklappe-kacheln li::before { content: counter(weg); display: block; margin-bottom: 4px; color: var(--akzent-text); font-size: 22px; font-weight: 800; }

@media (max-width: 760px) { .infoklappe-raster, .infoklappe-kacheln { grid-template-columns: 1fr; } .infoimpressum.infoklappe { padding: 4px 16px; } }

/*
 * DER KNOPF «WERKZEUGE» IM KOPF, seit 1.39.0.
 *
 * Markus am 27.09.2026: «erstelle einen Button Werkzeuge». Umrandet statt
 * gefüllt, damit «Ausprobieren» der eine Hauptknopf bleibt. Er bleibt auch
 * auf dem Handy stehen, wo die Sprungmarken der Seite ausgeblendet werden,
 * denn er führt als einziger auf eine andere Seite.
 */
.infonavi .infowerkzeuge { padding: 10px 17px; border: 2px solid var(--akzent); border-radius: 999px; color: var(--akzent-text); }
@media (max-width: 800px) { .infonavi > a.infowerkzeuge { display: inline-flex; } }

/* Auf schmalen Handys passen Marke, «Werkzeuge» und «Ausprobieren» nur
   nebeneinander, wenn beide Knöpfe etwas kleiner werden. Gemessen bei 390
   Punkten Breite: vorher 432 Punkte, also seitwärts scrollbar; das
   Prüfwerkzeug misst zusätzlich bei 360. */
@media (max-width: 440px) { .infokopf { padding-left: 14px; padding-right: 14px; } .infonavi { gap: 5px; } .infonavi .infowerkzeuge, .infonavi .infostart.klein { padding: 8px 10px; font-size: 14px; } .infokopf .infomarke { font-size: 21px; } }

/* Öffnen und Schliessen auf der Übersicht der Werkzeuge, seit 1.40.0. */
.methodengruppe-titel { margin: 40px 0 6px; padding-left: 12px; border-left: 4px solid var(--akzent); font-size: 1.35rem; }
.methodengruppe-satz { margin: 0 0 18px 16px; max-width: 74ch; color: var(--schrift-leise); }