/* Next Gems - erzeugt von build.py. Aenderungen hier gehen beim naechsten
   Bau verloren. Bearbeite stattdessen den Abschnitt STIL in build.py. */

/* Farbwerte nach Markenhandbuch Folie 05. Genau zwei Markenfarben:
   Papier und Tinte. Die Grautoene sind reine Oberflaechentoene fuer
   Nebentext und Linien - sie ersetzen nie das Schwarz der Wortmarke. */
:root{
  --papier:#F2EFE9;
  --papier-tief:#E8E3D9;
  --tinte:#15140F;
  --tinte-weich:#5A574C;
  --tinte-fern:#8C8778;
  --linie:#DCD8CC;
  --linie-stark:#C6C1B3;
  --rand:clamp(20px,4.4vw,72px);
  --schrift:"Helvetica Neue",Helvetica,Arial,system-ui,"Segoe UI",sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  color-scheme:light;
}

/* --- Wortmarke ---------------------------------------------------------
   Konstruktion nach Markenhandbuch Folie 02, unveraendert uebernommen:
   Helvetica Neue Bold, zweizeilig, Zeile 1 +0,047 em gesperrt, Zeile 2
   -0,050 em unterschnitten, Zeilenabstand 0,82. Damit laufen beide Zeilen
   randgleich. Diese Werte nie nachjustieren - Folie 08 verbietet das
   Neusperren ausdruecklich. Mindestgroesse 15px je Zeile (Folie 03),
   deshalb steht in jedem clamp() unten ein Minimum von 16px. */
.wortmarke{display:block;font-family:var(--schrift);font-weight:700;
  text-transform:uppercase;line-height:.82;color:inherit}
.wortmarke span{display:block;width:fit-content}
/* Die Sperrwerte bleiben exakt wie im Handbuch. Das negative Aussenmass
   hebt nur den Zwischenraum auf, den CSS hinter dem letzten Buchstaben
   noch anfuegt - sonst waere die Box breiter als die Schrift und der
   Block liefe beim Zentrieren aus der Mitte. */
.wortmarke .w1{letter-spacing:.047em;margin-right:-.047em}
.wortmarke .w2{letter-spacing:-.05em;margin-right:.05em}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--tinte);
  font-family:var(--schrift);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-weight:600;letter-spacing:-.025em;margin:0}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--tinte);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.nur-lesen{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sprung{position:absolute;left:-9999px;top:0;background:var(--tinte);
  color:var(--papier);padding:12px 18px;z-index:100}
.sprung:focus{left:0}

.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.label{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--tinte-weich)}

/* --- Kopf ------------------------------------------------------------- */
.kopf{border-bottom:1px solid var(--linie)}
.kopf-innen{display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:22px var(--rand);flex-wrap:wrap}
/* Schutzraum nach Folie 04: halbe Versalhoehe rundum frei. Bei 20px
   Schriftgroesse sind das rund 7px - hier grosszuegiger gehalten. */
.kopf-marke{display:inline-block;padding:2px 0}
.kopf-marke .wortmarke{font-size:clamp(17px,2vw,21px)}
.nav{display:flex;gap:26px;align-items:center;margin-left:auto}
.nav a{font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;padding-bottom:3px;
  border-bottom:1px solid transparent}
.nav a:hover{border-bottom-color:var(--tinte)}
.nav a[aria-current]{border-bottom-color:var(--tinte)}
.sprachen{display:flex;gap:12px;font-family:var(--mono);font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--tinte-fern)}
.sprachen a:hover{color:var(--tinte)}
.sprachen a[aria-current]{color:var(--tinte)}
@media (max-width:640px){
  .kopf-innen{gap:14px;padding:18px var(--rand)}
  .nav{order:3;width:100%;margin-left:0;justify-content:space-between;gap:12px;
    border-top:1px solid var(--linie);padding-top:14px}
}

/* --- Pflichthinweis --------------------------------------------------- */
.band{background:var(--tinte);color:var(--papier);font-family:var(--mono);
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  padding:11px var(--rand);text-align:center;line-height:1.5}

/* --- Abschnitte ------------------------------------------------------- */
.abschnitt{padding:clamp(38px,6.5vw,88px) var(--rand);
  border-bottom:1px solid var(--linie)}
.abschnitt-kopf{display:flex;align-items:baseline;justify-content:space-between;
  gap:20px;flex-wrap:wrap;margin-bottom:clamp(22px,3.4vw,40px)}
h2{font-size:clamp(21px,2.7vw,32px)}

/* --- Startseite ------------------------------------------------------- */
/* Die Wortmarke traegt die Startseite: formatfuellend gesetzt, der Claim
   tritt darunter. Die Marke ist zugleich Signet (Folie 01), deshalb
   braucht es hier kein weiteres Zeichen. */
.auftakt{padding:clamp(56px,10vw,150px) var(--rand) clamp(40px,6vw,88px);
  border-bottom:1px solid var(--linie)}
.auftakt .wortmarke{font-size:clamp(84px,24vw,340px)}
.auftakt-fuss{display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;margin-top:clamp(30px,4.5vw,64px);
  padding-top:clamp(20px,2.6vw,32px);border-top:1px solid var(--tinte)}
.auftakt-claim{font-size:clamp(19px,2.5vw,34px);letter-spacing:-.02em;
  line-height:1.12;font-weight:600;text-transform:uppercase;max-width:19ch;
  margin:0;text-wrap:balance}

.hero{padding:clamp(40px,6vw,96px) var(--rand);
  border-bottom:1px solid var(--linie)}
.hero-unten{display:grid;grid-template-columns:1fr;gap:clamp(28px,4.5vw,72px);
  align-items:start}
@media (min-width:880px){.hero-unten{grid-template-columns:1fr 1fr}}
.hero-text{font-size:clamp(15px,1.15vw,17.5px);max-width:54ch;margin:16px 0 0;
  color:var(--tinte-weich)}
.hero-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.hero-bild{position:relative;aspect-ratio:1/1;background:var(--papier-tief);
  overflow:hidden}
.hero-bild img{width:100%;height:100%;object-fit:contain}
.hero-bild figcaption{position:absolute;left:0;bottom:0;background:var(--papier);
  padding:8px 12px;font-family:var(--mono);font-size:11px;letter-spacing:.06em}

.spalten{display:grid;grid-template-columns:1fr;gap:clamp(22px,3vw,44px)}
@media (min-width:760px){.spalten{grid-template-columns:repeat(3,1fr)}}
.spalten h3{font-size:15px;letter-spacing:0;margin-bottom:8px;
  padding-top:14px;border-top:1px solid var(--tinte)}
.spalten p{margin:0;font-size:14.5px;color:var(--tinte-weich);max-width:40ch}

/* --- Raster ----------------------------------------------------------- */
/* Die Abstaende sind so gewaehlt, dass sich die schwarzen Hervorhebungen
   zweier Nachbarkacheln nie beruehren: 9px Ueberstand je Seite plus Luft. */
.raster{display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(30px,3.4vw,44px) clamp(24px,2vw,30px)}
@media (min-width:720px){.raster{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1120px){.raster{grid-template-columns:repeat(4,1fr)}}

/* Flex-Spalte mit height:100%, damit die Preiszeilen einer Rasterzeile
   trotz unterschiedlich langer Beschriftungen buendig stehen. */
.karte{display:flex;flex-direction:column;height:100%}

/* Beim Ueberfahren wird die ganze Kachel schwarz hinterlegt. Der Grund ist
   der Hintergrund der Kachel selbst, der ueber einen Schlagschatten ohne
   Weichzeichnung um 9px nach aussen verlaengert wird - so klebt das
   Schwarz nicht am Bild. Bewusst kein Pseudoelement mit negativem
   z-index: das verschwindet in manchen Browsern hinter dem
   Seitenhintergrund. Schatten und Hintergrund brauchen keine eigene Ebene
   und sind damit ueberall sichtbar. Das Layout bleibt unberuehrt.
   Nur fuer echte Zeigergeraete, sonst bliebe die Hervorhebung auf dem
   Handy nach dem Antippen haengen. */
@media (hover:hover){
  .karte{transition:background-color .22s ease,box-shadow .22s ease,
    color .22s ease}
  .karte:hover{background:var(--tinte);color:var(--papier);
    box-shadow:0 0 0 9px var(--tinte)}
  .karte:hover .karte-nr,.karte:hover .karte-zeile{color:var(--papier)}
  .karte:hover .karte-preis{border-top-color:var(--papier)}
  .karte:hover .karte-preis span:last-child{color:var(--papier)}
  .karte:hover .marker{background:var(--papier);color:var(--tinte)}
  .karte:hover .marker.reserviert{background:var(--tinte);color:var(--papier);
    box-shadow:inset 0 0 0 1px var(--papier)}
}
.karte-bild{position:relative;aspect-ratio:1/1;background:var(--papier-tief);
  overflow:hidden}
.karte-bild img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s cubic-bezier(.16,.84,.24,1)}
.karte:hover .karte-bild img{transform:scale(1.018)}
.karte-leer{width:100%;height:100%;display:flex;align-items:center;
  justify-content:center;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tinte-weich)}
/* Kein Signalrot mehr. Verkauft = gefuellter Tinte-Balken,
   reserviert = Konturbalken. Unterschieden wird ueber die Form. */
.marker{position:absolute;top:0;left:0;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase;padding:7px 11px;
  background:var(--tinte);color:var(--papier)}
.marker.reserviert{background:var(--papier);color:var(--tinte);
  box-shadow:inset 0 0 0 1px var(--tinte)}
.karte-nr{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  color:var(--tinte-weich);margin-top:12px}
.karte-titel{font-size:15px;font-weight:600;letter-spacing:-.01em;margin-top:3px}
.karte-zeile{font-family:var(--mono);font-size:11.5px;color:var(--tinte-weich);
  font-variant-numeric:tabular-nums;margin-top:5px;line-height:1.45}
.karte-preis{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums;
  margin-top:auto;padding-top:9px;border-top:1px solid var(--linie);
  display:flex;justify-content:space-between;gap:10px}
.karte-zeile{margin-bottom:10px}
.karte-preis span:last-child{color:var(--tinte-weich)}

/* --- Filter ----------------------------------------------------------- */
.filter{position:sticky;top:0;z-index:40;background:var(--papier);
  border-bottom:1px solid var(--linie);padding:16px var(--rand)}
/* Die Knoepfe fuellen jede Zeile vollstaendig aus, egal wie viele es sind.
   Frueher stand hier ein Raster mit fest vier Spalten - als 'minor' zum
   Vokabular kam, blieb die zweite Zeile halb leer und der dunkle
   Hintergrund schien als schwarzer Block durch. Mit 'flex' waechst der
   letzte Knopf stattdessen in die Luecke. Die 1px-Abstaende bilden das
   Gitter, umbrechen duerfen die Beschriftungen weiterhin. */
.behandlung{display:flex;flex-wrap:wrap;gap:1px;width:100%;
  background:var(--tinte);border:1px solid var(--tinte)}
.behandlung button{appearance:none;background:var(--papier);border:0;
  flex:1 1 118px;color:var(--tinte);min-height:46px;padding:12px 8px;
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.behandlung button[aria-pressed="true"]{background:var(--tinte);color:var(--papier)}
.filter-reihe{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;
  margin-top:14px}
@media (min-width:820px){.filter-reihe{grid-template-columns:repeat(5,1fr)}}
.feld{display:flex;flex-direction:column;gap:6px;min-width:0}
.spanne{display:flex;align-items:center;gap:6px}
.spanne span{font-family:var(--mono);font-size:11px;color:var(--tinte-weich)}
select,input,textarea{font:inherit;font-size:13px;padding:12px 11px;
  border:1px solid var(--linie);border-radius:0;background:var(--papier);
  color:var(--tinte);width:100%;min-width:0}
select:hover,input:hover,textarea:hover{border-color:var(--tinte-weich)}
.filter-fuss{display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-top:14px}
.zuruecksetzen{background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tinte-weich);
  border-bottom:1px solid var(--linie)}
.zuruecksetzen:hover{color:var(--tinte);border-bottom-color:var(--tinte)}
.aus{display:none!important}

.leermeldung{padding:clamp(40px,8vw,90px) 0;text-align:center;
  color:var(--tinte-weich);font-size:15px}

/* --- Steinseite ------------------------------------------------------- */
.brot{padding:16px var(--rand) 0}
.stein{display:grid;grid-template-columns:1fr;gap:clamp(26px,4vw,60px);
  padding:clamp(20px,3.4vw,48px) var(--rand) clamp(44px,6vw,92px);
  align-items:start}
@media (min-width:960px){.stein{grid-template-columns:minmax(0,1.3fr) minmax(320px,.7fr)}}
@media (min-width:960px){.stein-daten{position:sticky;top:28px}}
/* Genau zwei Medien je Stein: Foto und Video. Nebeneinander, sobald
   genug Platz ist, sonst untereinander. Beide im selben Quadrat, damit
   die Seite ruhig bleibt. */
.medien{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:1180px){.medien{grid-template-columns:1fr 1fr}}
.medium{margin:0;aspect-ratio:1/1;background:var(--papier-tief);
  overflow:hidden;display:flex;align-items:center;justify-content:center}
.medium img{width:100%;height:100%;object-fit:contain}

/* Videos stehen in einem festen Hochformat-Rahmen, mittig in der Kachel.
   Dadurch sind alle Videos gleich gross und gleich platziert, egal in
   welchem Format sie aufgenommen wurden. Ohne diesen Rahmen fuellt der
   Browser die Balken neben einem Hochformat-Video mit Schwarz - das
   laesst sich per CSS nicht abstellen. */
.video-rahmen{position:relative;height:100%;aspect-ratio:9/16;margin:0 auto;
  overflow:hidden;background:var(--papier-tief)}
.video-rahmen video{display:block;width:100%;height:100%;object-fit:cover;
  background:var(--papier-tief)}

/* Abspielknopf ueber dem Standbild. Er verschwindet, sobald das Video
   laeuft - danach uebernehmen die Bedienelemente des Browsers. */
.abspielen{position:absolute;inset:0;width:100%;height:100%;padding:0;
  border:0;background:transparent;cursor:pointer;display:flex;
  align-items:center;justify-content:center}
.abspielen-kreis{width:64px;height:64px;border-radius:50%;
  background:var(--tinte);position:relative;
  transition:transform .25s ease,background-color .25s ease}
.abspielen-kreis::after{content:"";position:absolute;top:50%;left:54%;
  transform:translate(-50%,-50%);border-style:solid;border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent var(--papier)}
.abspielen:hover .abspielen-kreis{transform:scale(1.08)}
/* Der Knopf wird erst von skript.js eingeblendet. Ohne JavaScript bleibt
   er verborgen und die Bedienelemente des Browsers uebernehmen. */
.abspielen[hidden]{display:none}
.medium.leer span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinte-fern)}

.stein-kopf{border-bottom:1px solid var(--tinte);padding-bottom:16px}
.stein-kopf h1{font-size:clamp(26px,3.4vw,40px);margin-top:6px}
.preis{font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:clamp(25px,3.4vw,36px);letter-spacing:-.02em;margin-top:20px}
.preis-pk{font-family:var(--mono);font-size:11.5px;color:var(--tinte-weich);
  letter-spacing:.06em;margin-top:4px}
.daten{margin:22px 0 0}
.daten > div{display:flex;justify-content:space-between;align-items:baseline;
  gap:18px;padding:10px 0;border-bottom:1px solid var(--linie)}
.daten dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tinte-weich);flex:0 0 auto}
.daten dd{margin:0;font-family:var(--mono);font-size:13px;
  font-variant-numeric:tabular-nums;text-align:right}
.daten .betont dd{background:var(--tinte);color:var(--papier);padding:3px 8px}
/* Das Zertifikat-Angebot ist ein Link, kein Messwert - er muss danach
   aussehen. Unter dem Mauszeiger dreht er sich um, wie die Kacheln im
   Katalog. Nur auf Geraeten mit Maus, damit auf dem Handy nichts
   haengenbleibt. */
.daten dd a{color:inherit;text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}
@media (hover:hover){
  .daten dd a:hover{background:var(--tinte);color:var(--papier);
    text-decoration:none;padding:2px 6px;margin:-2px -6px}
}
/* Auf dem Handy ist die Zeile nur 15 px hoch - zu wenig zum Treffen.
   Der negative Aussenabstand hebt die Polsterung wieder auf, das
   Tippziel wird also groesser, ohne dass sich etwas verschiebt. */
@media (hover:none){
  .daten dd a{display:inline-block;padding:9px 0;margin:-9px 0}
}
.knopfreihe{display:flex;flex-direction:column;gap:10px;margin-top:24px}
.beschreibung{margin-top:26px;font-size:15px;max-width:62ch}
.beschreibung p{margin:0}

.knopf{display:inline-flex;align-items:center;justify-content:center;
  padding:17px 30px;border:1px solid var(--tinte);background:var(--tinte);
  color:var(--papier);font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;cursor:pointer;text-align:center;
  transition:background .25s ease,color .25s ease}
.knopf:hover{background:transparent;color:var(--tinte)}
.knopf.leer{background:transparent;color:var(--tinte)}
.knopf.leer:hover{background:var(--tinte);color:var(--papier)}

/* --- Preisschranke ----------------------------------------------------
   Steht in der oeffentlichen Fassung an der Stelle, wo sonst der Preis
   waere. Bewusst als ruhiger Kasten, nicht als Warnung. */
.preisschranke{border:1px solid var(--tinte);padding:20px;margin-top:20px}
.preisschranke-titel{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;margin:0 0 10px}
.preisschranke-text{margin:0;font-size:13.5px;color:var(--tinte-weich);
  max-width:44ch}
.preisschranke-knoepfe{display:flex;flex-direction:column;gap:9px;margin-top:18px}
.karte-preis.gesperrt{color:var(--tinte-weich);font-size:11.5px;
  letter-spacing:.06em}
.nav-anmelden{font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;padding:7px 13px;background:var(--tinte);
  color:var(--papier)}
.nav-anmelden:hover{background:transparent;color:var(--tinte);
  box-shadow:inset 0 0 0 1px var(--tinte)}
.band-haendler{background:var(--papier);color:var(--tinte);
  box-shadow:inset 0 -1px 0 var(--linie)}

/* Ablaufliste auf der Registrierungsseite */
.ablauf{list-style:none;margin:0;padding:0;counter-reset:schritt}
.ablauf li{display:flex;gap:14px;padding:14px 0;
  border-top:1px solid var(--linie)}
.ablauf li:last-child{border-bottom:1px solid var(--linie)}
.ablauf li span{font-family:var(--mono);font-size:11px;color:var(--tinte-fern);
  flex:0 0 auto;padding-top:2px}
.ablauf li p{margin:0;font-size:13.5px}

.hinweis{border:1px solid var(--linie-stark);padding:18px 20px;font-size:14px;
  margin-bottom:26px;color:var(--tinte-weich)}
.hinweis strong{display:block;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--tinte);
  margin-bottom:7px}
/* Verkauft wird als gefuellter Block gesetzt, nicht eingefaerbt. */
.hinweis.voll{background:var(--tinte);color:var(--papier);border-color:var(--tinte)}
.hinweis.voll strong{color:var(--papier)}

/* --- Kontakt ---------------------------------------------------------- */
.kontakt{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,64px);
  padding:clamp(34px,5vw,80px) var(--rand)}
@media (min-width:900px){.kontakt{grid-template-columns:1.35fr .65fr}}
.formular{display:grid;grid-template-columns:1fr;gap:16px;margin-top:24px}
@media (min-width:640px){.formular{grid-template-columns:1fr 1fr}
  .formular .breit{grid-column:1/-1}}
.formular label{display:flex;flex-direction:column;gap:6px}
textarea{min-height:160px;resize:vertical}
.honigtopf{position:absolute!important;left:-9999px!important;width:1px;height:1px;
  opacity:0;pointer-events:none}
.form-hinweis{font-size:12.5px;color:var(--tinte-weich);max-width:56ch}
.danke{border:1px solid var(--tinte);padding:16px 18px;font-size:14px;
  grid-column:1/-1}
.kontaktblock{font-family:var(--mono);font-size:13px;line-height:1.9}
.kontaktblock a{border-bottom:1px solid var(--linie)}
.kontaktblock a:hover{border-bottom-color:var(--tinte)}
.kontaktblock h3{font-family:var(--schrift);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tinte-weich);margin:26px 0 8px;
  padding-top:14px;border-top:1px solid var(--linie)}
.kontaktblock h3:first-child{margin-top:0;border-top:0;padding-top:0}

/* --- Rechtstexte ------------------------------------------------------ */
.text{max-width:72ch;padding:clamp(40px,6vw,96px) var(--rand)}
.text h1{font-size:clamp(28px,4vw,46px);margin-bottom:26px}
.text p{margin:0 0 16px}
/* Abschnitte im Impressum. Dieselbe kleine Marke wie sonst im Katalog,
   dazu eine Haarlinie - sonst laufen die Angaben ineinander. Die
   Paragrafenbezeichnungen sind lang, deshalb etwas enger gesperrt als
   .label und mit Zeilenabstand, damit sie umbrechen duerfen. */
.text h2{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tinte-weich);font-weight:400;
  line-height:1.7;margin:34px 0 12px;padding-top:16px;
  border-top:1px solid var(--linie)}
/* Im Impressum steht unter jeder Marke nur eine kurze Angabe, die darf
   schmaler laufen. In den AGB folgen mehrere gleich lange Absaetze - dort
   waere der erste sonst schmaler als die darunter. */
.text:not(.recht) h2 + p{max-width:52ch}

/* --- AGB und Datenschutz ---------------------------------------------- */
/* Lange Rechtstexte. Etwas mehr Zeilenabstand als sonst, und die
   Absatznummern (1), (2) bleiben im Fliesstext stehen, wie im Original. */
.recht p{line-height:1.75;margin:0 0 14px}
.recht h2{margin-top:44px}
.recht strong{font-weight:600}
/* Auf den nicht-deutschen Seiten steht oben, dass der deutsche Text gilt. */
.sprachhinweis{font-family:var(--mono);font-size:12px;line-height:1.7;
  color:var(--tinte-weich);border-left:2px solid var(--linie);
  padding:2px 0 2px 16px;margin:0 0 8px;max-width:56ch}
.platzhalter{border:1px dashed var(--tinte-weich);padding:22px;
  font-family:var(--mono);font-size:13px;color:var(--tinte-weich);line-height:1.8}

/* --- Sprachwahl (Startdatei) ------------------------------------------ */
.wahl{min-height:80vh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:44px;padding:60px var(--rand);text-align:center}
.wahl .wortmarke{font-size:clamp(56px,13vw,150px)}
.wahl-links{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}

/* --- Fuss ------------------------------------------------------------- */
.fuss{padding:clamp(38px,5vw,72px) var(--rand);display:grid;gap:30px;
  grid-template-columns:1fr}
@media (min-width:760px){.fuss{grid-template-columns:2fr 1fr 1fr}}
.fuss h3{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tinte-fern);margin-bottom:14px;
  font-weight:400}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:13.5px}
.fuss a:hover{border-bottom:1px solid var(--tinte)}
.fuss-marke .wortmarke{font-size:26px;margin-bottom:18px}
.fuss-klein{font-family:var(--mono);font-size:11px;color:var(--tinte-weich);
  line-height:1.8;max-width:44ch}

/* --- Bedienung mit dem Finger ------------------------------------------ */
/* Auf Geraeten ohne Maus zaehlt nicht, wie gross etwas aussieht, sondern
   wie gross die Flaeche ist, die auf eine Beruehrung reagiert. Die
   Textlinks sind 14 bis 21 Pixel hoch - zu wenig, um sie sicher zu
   treffen. Apple empfiehlt 44 Pixel.

   Der Trick: Innenabstand vergroessert die Flaeche, der gleich grosse
   negative Aussenabstand hebt die Verschiebung wieder auf. Sichtbar
   aendert sich nichts, nur das Ziel wird groesser.

   Dieser Block steht mit Absicht ganz am Ende: Er muss die Abstaende aus
   den Regeln darueber ueberschreiben duerfen.

   Zwei Bedingungen, nicht eine: 'hover:none' erkennt Handys, 'pointer:
   coarse' zusaetzlich Tablets, die eine Tastatur angesteckt haben und
   deshalb faelschlich eine Maus melden. Getippt wird darauf trotzdem. */
@media (hover:none), (pointer:coarse){
  .nav a{padding:13px 0;margin:-13px 0}
  /* Die Wortmarke ist zugleich der Weg zurueck zur Startseite. Nur
     der Link wird groesser, die Schrift bleibt unangetastet. */
  .kopf-marke{padding:8px 0;margin:-8px 0}
  .sprachen a{padding:13px 5px;margin:-13px -5px}
  .zuruecksetzen{padding:15px 0;margin:-15px 0}
  /* Im Fussbereich reichen 8 Pixel Zeilenabstand nicht fuer grosse Ziele.
     Deshalb dort mehr Luft - die Fusszeile wird auf dem Handy laenger,
     dafuer trifft man die Links, ohne den Nachbarn zu erwischen. */
  .fuss ul{gap:28px}
  .fuss ul a{display:inline-block;padding:12px 0;margin:-12px 0}
}