/*
 * Länderseiten — Zusatzbausteine.
 *
 * Bewusst eine eigene Datei statt Anhang an style.css: sie wird nur auf
 * Länderseiten geladen, und das Zurücknehmen ist ein Löschen statt eines
 * Ausschneidens.
 *
 * Alle Farben und Abstände kommen aus den Variablen des Themes.
 */

/* ---- 1 Flagge und Landessprache im Kopf ---- */
.land-flagge {
  display: block;
  width: 42px;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  margin-bottom: var(--space-sm);
}
/* Die Zeile liegt auf einem Foto, dessen Helligkeit von Land zu Land
   wechselt. Vorher stand sie in Hellgrün auf Hellgrün und war auf hellen
   Aufnahmen nicht zu lesen. Jetzt: weiß, mit einem dunklen Träger
   dahinter — unabhängig davon, was im Bild liegt. */
.land-claim {
  color: #fff;
  font-size: 1.05rem;
  margin: var(--space-xs) 0 0;
  display: inline-block;
  background: rgba(23, 38, 50, .55);
  padding: .3rem .75rem;
  border-radius: 4px;
  backdrop-filter: blur(2px);
}
.land-claim em {
  color: #cfe3b6;
  font-style: normal;
  font-size: .9rem;
}

/* ---- 2 Schnellkontaktleiste ---- */
/* Unter die Hauptnavigation, nicht dahinter.
   .nav klebt selbst bei top:0 und ist 73 px hoch; bei top:0 verschwand die
   Leiste beim Scrollen vollständig hinter ihr. */
.land-leiste {
  position: sticky;
  top: 73px;
  z-index: 50;
  background: var(--grey-900);
  color: var(--white);
}
.land-leiste-inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding: .7rem var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
  font-size: .92rem;
}
/* Die drei Angebote in der Leiste sahen aus wie Beschriftungen: weißer
   Fettdruck auf Dunkelblau, ohne Rahmen, ohne Fläche. Dass man sie
   anfassen kann, war nicht zu erkennen. Jetzt: ein gefüllter Knopf für
   die Hauptaktion, ein umrandeter daneben, und die Rufnummer als
   erkennbares Element mit eigenem Rahmen. */
.land-leiste a {
  color: var(--white);
  text-decoration: none;
  font-weight: 600;
}
.land-leiste-tel {
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 5px;
  padding: .4rem .75rem;
  transition: background-color .15s, border-color .15s;
}
.land-leiste-tel:hover,
.land-leiste-tel:focus-visible { background: rgba(255, 255, 255, .14); border-color: var(--white); }

.land-leiste-knopf {
  background: var(--green);
  color: var(--white) !important;
  border-radius: 5px;
  padding: .45rem .95rem;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color .15s;
}
.land-leiste-knopf:hover,
.land-leiste-knopf:focus-visible { background: var(--green-dark); }
.land-leiste-knopf--leer {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .45);
  padding: .4rem .9rem;
}
.land-leiste-knopf--leer:hover,
.land-leiste-knopf--leer:focus-visible { background: rgba(255, 255, 255, .14); border-color: var(--white); }
.land-leiste a:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
/* Der Hörer ist jetzt eine eingebettete Grafik statt des Schriftzeichens ☎,
   das je nach Gerät anders (oder gar nicht) dargestellt wurde. */
.land-leiste-tel { display: inline-flex; align-items: center; gap: .45rem; }
/* „Call" steht nur auf dem Telefon; darueber traegt der Knopf die ganze
   Nummer. Die Regel MUSS vor der 560er-Stufe stehen: am Dateiende
   stehend hat sie deren `display: inline` ueberschrieben, und der
   Knopf blieb 36 px breit ohne Text. */
.land-leiste-kurz { display: none; }
.land-symbol { flex: none; }
.land-leiste-sprachen {
  margin-left: auto;
  color: #c3cdd5;
  font-weight: 400;
}

/* Mehr Breite für Länderseiten.

   Mit 1240 Bildpunkten und 330 für die Seitenleiste blieben dem Text rund
   800 — er wirkte gequetscht. Die Breite gilt fuer die ganze Seite, nicht
   nur fuer den Zweispalter: sonst stuenden Navigation und Kopfbild anders
   als der Inhalt. */
body.srbt-landseite { --max-width: 1480px; }

/* ---- 3/4 Seitenleiste ---- */
.land-spalten {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: var(--space-xl);
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-lg);
  align-items: start;
}
/* Die Baukasten-Abschnitte bringen eigene Breiten mit; in der linken Spalte
   sollen sie die Spaltenbreite nutzen statt der Seitenbreite. */
.land-spalten > .land-haupt > .section {
  max-width: none;
  padding-inline: 0;
}
.land-leiste-seite {
  position: sticky;
  /* unter Navigation (73) und Schnellkontaktleiste (61, seit die Knoepfe
     echte Knoepfe sind) plus etwas Luft */
  top: 142px;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.land-karte-box {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--white);
}
/* Jetzt eine h3 statt eines div: der Kasten ist ein eigener Abschnitt und
   soll in der Ueberschriftenliste auftauchen. Masse bleiben gleich. */
.land-karte-kopf {
  background: var(--grey-900);
  color: var(--white);
  padding: .9rem 1.1rem;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.4;
  margin: 0;
  font-family: inherit;
}
.land-karte-koerper { padding: 1.1rem; }
.land-liste { margin: 0; }
.land-liste > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: .5rem 0;
  border-bottom: 1px solid var(--border-light);
  font-size: .9rem;
}
.land-liste > div:last-child { border-bottom: 0; }
.land-liste dt { color: var(--text-muted); }
.land-liste dd { margin: 0; text-align: right; font-weight: 600; color: var(--text-primary); }
.land-knopf {
  display: block;
  text-align: center;
  background: var(--green);
  color: var(--white);
  text-decoration: none;
  font-weight: 600;
  padding: .75rem;
  border-radius: 4px;
  margin-top: .9rem;
  border: 1px solid var(--green);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 1rem;
}
.land-knopf:hover { background: var(--green-dark); border-color: var(--green-dark); color: var(--white); }
.land-knopf--leer { background: var(--white); color: var(--green-dark); }
.land-knopf--leer:hover { background: var(--green-pale); color: var(--green-dark); }
.land-partner {
  border: 1px dashed var(--green);
  background: var(--green-pale);
  border-radius: 8px;
  padding: 1.1rem;
}
/* h3 statt h4: der Sprung h2 -> h4 riss ein Loch in die Ueberschriftenfolge,
   an der sich Vorleseprogramme entlanghangeln. */
.land-partner h3 { margin: 0 0 .4rem; font-size: .95rem; line-height: 1.4; color: var(--green-deep); font-family: inherit; }
.land-partner p { margin: 0; font-size: .88rem; color: var(--text-secondary); line-height: 1.55; }

/* ---- 5 Galerie ---- */
.land-galerie-hinweis { font-size: .92rem; color: var(--text-muted); }
.land-galerie {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .8rem;
  margin-top: var(--space-sm);
}
.land-kachel {
  margin: 0;
  cursor: zoom-in;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: var(--grey-100);
}
.land-kachel img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  transition: transform .35s;
}
.land-kachel:hover img { transform: scale(1.05); }
.land-kachel figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, .78));
  color: var(--white);
  font-size: .78rem;
  padding: 1.6rem .7rem .55rem;
  line-height: 1.35;
}
.land-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .9);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  z-index: 9999;
}
.land-lightbox[hidden] { display: none; }
.land-lightbox img { max-width: 92vw; max-height: 76vh; border-radius: 6px; }
.land-lightbox figcaption { color: var(--white); font-size: .95rem; text-align: center; }
.land-lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, .15);
  color: var(--white);
  border: 0;
  font-size: 2rem;
  width: 52px; height: 52px;
  border-radius: 50%;
  cursor: pointer;
}
.land-lb-vor { right: var(--space-lg); }
.land-lb-zurueck { left: var(--space-lg); }
.land-lb-zu {
  position: absolute;
  top: 1.4rem; right: 1.8rem;
  background: none; border: 0;
  color: var(--white);
  font-size: 2.2rem;
  cursor: pointer;
  line-height: 1;
}
/* Weiterführender Verweis im Lichtkasten: vergrößern UND weiterklicken,
   ohne dass sich beides beim Klick auf das Bild in die Quere kommt. */
.land-lb-mehr {
  color: #a8d979;
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(168, 217, 121, .5);
  padding-bottom: 2px;
}
.land-lb-mehr:hover { color: var(--white); border-bottom-color: var(--white); }
.land-lb-mehr[hidden] { display: none; }

/* Dieselben Ziele noch einmal als gewöhnliche Verweise unter der Galerie —
   erreichbar für alle, die den Lichtkasten nicht öffnen, und für
   Suchmaschinen, die kein Javascript ausführen. */
.land-galerie-fuss {
  margin: var(--space-sm) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.1rem;
  font-size: .86rem;
}
.land-galerie-fuss a { color: var(--green-dark); text-decoration: none; }
.land-galerie-fuss a:hover { text-decoration: underline; }
.land-kachel { cursor: zoom-in; }

/* ---- 6 Karte ---- */
.land-kartenrahmen {
  position: relative;
  background: var(--grey-50);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-top: var(--space-sm);
}
/* Karte und Punkte liegen in einem gemeinsamen SVG. Die Punkte sind
   deshalb Kreise in Karteneinheiten, keine HTML-Kästchen in Prozent — nur
   so können sie nicht gegenüber dem Land verrutschen. */
.land-karte { width: 100%; height: auto; display: block; }
/* Klickfläche: unsichtbar, aber groß genug zum Treffen — auch mit dem
   Finger. Der sichtbare Kern bleibt klein, sonst verdeckt er kleine
   Länder wie Katar (nur 2,2 Karteneinheiten breit). */
.land-punkt-flaeche { fill: transparent; }
.land-punkt-kern {
  /* Dunkelgrün statt Hellgrün: ein heller Punkt auf heller Flaeche las
     sich wie ein Loch im Land, nicht wie eine Markierung. */
  fill: var(--green-deep);
  stroke: var(--white);
  stroke-width: .5;
  paint-order: stroke;
  transition: r .15s;
  pointer-events: none;
}
.land-punkt { cursor: pointer; }
.land-punkt:hover .land-punkt-kern,
.land-punkt:focus-visible .land-punkt-kern { r: 2.6; }
.land-punkt:focus-visible { outline: none; }
.land-punkt:focus-visible .land-punkt-kern { stroke: var(--green-deep); stroke-width: 1; }
/* Das aktuelle Land als dunkle Fläche. Der zugehörige Punkt wird dadurch
   hell, sonst verschwände er darin. */
.land-aktivflaeche {
  fill: var(--grey-900);
  stroke: #fff;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.land-punkt--aktiv .land-punkt-kern { fill: #fff; stroke: var(--grey-900); stroke-width: .8; }
/* Der frühere Hinweis-Kasten entfällt: im SVG übernimmt <title> die
   Beschriftung, das lesen auch Vorleseprogramme. */
.land-kartenlegende {
  display: flex;
  gap: var(--space-md);
  align-items: center;
  margin-top: .8rem;
  font-size: .85rem;
  color: var(--text-muted);
}
/* Die Legende muss zeigen, was auf der Karte steht: dunkelgrüner Punkt auf
   grüner Fläche für vorhandene Märkte, dunkle Fläche für den aktuellen. */
.land-legendepunkt {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 3px;
  background: var(--green);
  position: relative;
  margin-right: .35rem;
  vertical-align: -3px;
}
.land-legendepunkt::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--green-deep);
  border: 1px solid var(--white);
}
.land-legendepunkt--aktiv { background: var(--grey-900); }
.land-legendepunkt--aktiv::after { background: var(--white); border-color: var(--grey-900); }
.land-kartenzahl { margin-left: auto; font-weight: 600; color: var(--text-primary); }

/* ---- 7 Formular ---- */
.land-form {
  margin-top: var(--space-sm);
  max-width: 820px;
}
/* Das Raster liegt im inneren <div>, nicht im <fieldset>: ein <legend> in
   einem Grid-Fieldset wird in manchen Browsern selbst zum Rasterelement
   und rutscht dann in die erste Spalte. */
.land-gitter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}
.land-schritt {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-md);
  min-inline-size: 0; /* sonst wächst das Fieldset über seinen Platz hinaus */
}
/* `hidden` muss sich durchsetzen.

   Das Browserblatt bringt `[hidden] { display: none }` mit, aber jede
   eigene Regel wie `.land-knopf { display: block }` schlägt sie: gleiche
   Gewichtung, und das Autorenblatt gewinnt. Gemessen hatte das fünf
   Elemente betroffen — die drei Formularknöpfe standen alle gleichzeitig
   da, und die Zeile „Project desk" ließ sich nie ausblenden.

   Die Gewichtung hier einzeln nachzuziehen hieße, bei jeder neuen Klasse
   wieder daran zu denken. Darum eine Regel für alle. `!important` ist an
   dieser Stelle kein Notbehelf: genau so steht es in der HTML-Empfehlung
   für Browserblätter. */
[hidden] { display: none !important; }
.land-schritt legend {
  padding: 0;
  margin-bottom: .6rem;
  font: 700 1.05rem var(--font-heading, var(--font-body));
  color: var(--text-primary);
}

/* Fortschritt: drei Stationen, die aktuelle hervorgehoben. Steht im HTML
   auf `hidden` und wird erst vom Skript eingeschaltet. */
.land-fortschritt {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  list-style: none;
  margin: 0 0 var(--space-md);
  padding: 0 0 .8rem;
  border-bottom: 1px solid var(--border);
  counter-reset: schritt;
}
.land-fortschritt li {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-muted);
  counter-increment: schritt;
}
.land-fortschritt li::before {
  content: counter(schritt);
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--white);
  font-size: .78rem;
}
.land-fortschritt li.ist-aktiv { color: var(--text-primary); }
.land-fortschritt li.ist-aktiv::before {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}
.land-fortschritt li.ist-fertig::before {
  content: '✓';
  background: var(--green-pale);
  border-color: var(--green);
  color: var(--green-dark);
}

.land-form-fuss {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}
.land-form-danach {
  margin: var(--space-sm) 0 0;
  font-size: .85rem;
  color: var(--text-muted);
  max-width: 48em;
}
.land-form label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: .3rem;
}
.land-form input,
.land-form select,
.land-form textarea {
  width: 100%;
  padding: .65rem .8rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  font: 400 .95rem var(--font-body);
  background: var(--white);
  color: var(--text-primary);
}
.land-form .breit { grid-column: 1 / -1; }
.land-form input[readonly] { background: var(--green-pale); font-weight: 600; }
/* Ankreuzfeld: das Systemfeld ist winzig und auf dem Handy kaum zu treffen.
   Hier eigengezeichnet, mit einer Trefffläche über die ganze Zeile.

   Die Wähler tragen bewusst `.land-form` davor. Ohne das verlieren sie
   gegen `.land-form label` und `.land-form input`: gleiche Spezifität, aber
   die stehen weiter oben in dieser Datei und gewinnen damit. Nachgemessen
   war das Kästchen 27,6 × 22,8 statt 20 × 20, und die Beschriftung stand
   darunter statt daneben. */
.land-form .land-haken {
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  cursor: pointer;
  padding: .35rem 0;
  margin-bottom: 0;
}
.land-form .land-haken input {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  padding: 0;
  flex: none;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--white);
  cursor: pointer;
  display: grid;
  place-content: center;
}
.land-form .land-haken input::before {
  content: "";
  width: 11px;
  height: 11px;
  transform: scale(0);
  transition: transform .12s ease-in-out;
  background: var(--white);
  clip-path: polygon(14% 44%, 0 65%, 44% 100%, 100% 16%, 83% 0, 42% 70%);
}
.land-form .land-haken input:checked { background: var(--green); border-color: var(--green); }
.land-form .land-haken input:checked::before { transform: scale(1); }
.land-form .land-haken input:focus-visible { outline: 2px solid var(--green-dark); outline-offset: 2px; }


/* ---- 8 Begriffe ---- */
.land-begriffe {
  width: 100%;
  max-width: 820px;
  border-collapse: collapse;
  font-size: .95rem;
  margin-top: var(--space-sm);
}
.land-begriffe td { padding: .55rem 0; border-bottom: 1px solid var(--border-light); }
.land-begriffe td:first-child { font-weight: 600; color: var(--green-dark); }
.land-begriffe td:last-child { color: var(--text-muted); text-align: right; }

/* ---- Schmale Schirme ---- */
@media (max-width: 1000px) {
  /* minmax(0, 1fr) statt 1fr: eine reine 1fr-Spalte nimmt als Mindestbreite
     den Inhalt und laeuft dadurch ueber den Schirm hinaus. Genau das ist auf
     dem Telefon passiert. */
  .land-spalten { grid-template-columns: minmax(0, 1fr); padding-inline: 0; }
  .land-leiste-seite { position: static; padding-inline: var(--space-lg); }
  .land-spalten > .land-haupt > .section { padding-inline: var(--space-lg); }

  /* Die Leiste brach hier auf zwei Zeilen um und war mitsamt Navigation
     157 px hoch — auf einem 812 px hohen Telefon ein Fünftel des Schirms.
     Deshalb: Sprachen und der zweite Verweis raus (beides steht ohnehin
     weiter unten in der Kontaktkarte), damit eine Zeile reicht. */
  /* Sprachen und Rückruf sind jetzt eigene Stufen weiter unten im
     Blatt (1100 bzw. 950 px) — hier bleibt nur der Abstand. */
  .land-leiste-inner { gap: var(--space-md); padding-block: .55rem; }
}
@media (max-width: 767px) {
  .land-galerie { grid-template-columns: repeat(2, 1fr); }
  .land-gitter { grid-template-columns: 1fr; }
  .land-leiste-inner { gap: .8rem; padding-inline: var(--space-md); }
  .land-lb-nav { width: 44px; height: 44px; font-size: 1.6rem; }
  .land-lb-vor { right: .4rem; }
  .land-lb-zurueck { left: .4rem; }

  /* Die Begriffstabelle wird weiter unten behandelt — sie braucht dieselbe
     Schwelle wie die vorhandene Tabellenregel des Themes (900 px). */
}

/* ---- Begriffstabelle auf schmalen Schirmen ----
 *
 * Das Theme bringt seit September eine Regel mit, die Tabellen auf dem Telefon
 * waagerecht schiebbar macht:
 *
 *     @media (max-width: 900px) {
 *       table > * { display: table; width: auto; min-width: 720px; }
 *     }
 *
 * Die trifft auch diese Tabelle, und eine Mindestbreite schlaegt eine
 * Breitenangabe — der Tabellenkoerper war dadurch 720 px breit und ragte auf
 * einem 390-px-Schirm bis 760 px hinaus. Fuer zwei kurze Spalten ist Schieben
 * ohnehin der falsche Weg: hier steht die Entsprechung unter dem Begriff.
 *
 * Gleiche Schwelle wie die alte Regel, damit dazwischen keine Luecke bleibt,
 * und die Mindestbreite wird ausdruecklich zurueckgenommen.
 */
@media (max-width: 900px) {
  .land-begriffe,
  .land-begriffe tbody,
  .land-begriffe tr,
  .land-begriffe td {
    display: block;
    width: 100%;
    min-width: 0;
  }
  .land-begriffe tr {
    padding: .55rem 0;
    border-bottom: 1px solid var(--border-light);
  }
  .land-begriffe td { padding: 0; border: 0; }
  .land-begriffe td:last-child {
    text-align: left;
    font-size: .85rem;
    color: var(--text-muted);
  }
}

/* Auf schmalen Schirmen gibt es kein Ueberfahren mit der Maus — die
 * Beschriftung an den Kartenpunkten waere dort nie sichtbar, nahm aber
 * trotzdem am Layout teil und ragte gemessen 4 bis 7 px ueber den Rand.
 * Deshalb dort gar nicht erst anlegen. */
@media (max-width: 900px) {
  .land-punkt-tip { display: none; }
}

/* Hinweis über der Begriffstabelle dort, wo es keinen Landesbegriff für
   Hydroseeding gibt — ohne ihn läse sich die Tabelle wie eine Übersetzung. */
.land-begriffe-hinweis {
  font-size: .92rem;
  color: var(--text-muted);
  margin-bottom: var(--space-sm);
}

/* ---- 7 Rückmeldung des Formulars ---- */
.land-meldung {
  margin: 0 0 var(--space-md);
  padding: .9rem 1.1rem;
  border-radius: 6px;
  font-size: .95rem;
}
.land-meldung--ok {
  background: var(--green-light);
  border: 1px solid var(--green);
  color: var(--green-deep);
}
.land-meldung--fehler {
  background: #fdf0ee;
  border: 1px solid #d98b7d;
  color: #8a3122;
}
/* Lockfeld gegen Maschinen: nicht `display:none` — manche füllen genau die
   versteckten Felder NICHT aus. So steht es im Fluss, ist aber unerreichbar. */
.land-lockfeld {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Märkte als Liste unter der Karte — die Kartenpunkte sind für
   Suchmaschinen und Vorleseprogramme fast unsichtbar. */
.land-maerkte {
  list-style: none;
  margin: var(--space-sm) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .9rem;
  font-size: .86rem;
}
.land-maerkte a { color: var(--green-dark); text-decoration: none; }
.land-maerkte a:hover { text-decoration: underline; }
.land-maerkte--hier span { color: var(--text-primary); font-weight: 600; }

/* Abschnitts-Navigation in der Seitenleiste */
.land-inhalt {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.1rem;
  background: var(--white);
}
.land-inhalt[hidden] { display: none; }
.land-inhalt h3 {
  margin: 0 0 .5rem;
  font-size: .8rem;
  font-family: inherit;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.land-inhalt ul { list-style: none; margin: 0; padding: 0; }
.land-inhalt li + li { margin-top: .35rem; }
.land-inhalt a {
  color: var(--text-primary);
  text-decoration: none;
  font-size: .88rem;
  line-height: 1.4;
  display: block;
}
.land-inhalt a:hover { color: var(--green-dark); }

/* Auf schmalen Schirmen muessen Hoerer und Hauptknopf in EINE Zeile. Mit
   voller Groesse brach die Leiste um und war mitsamt Navigation 174 px
   hoch — ein Fuenftel eines 812 px hohen Telefons. */
/* Auf dem Telefon stehen nur noch zwei Knöpfe — die dürfen dann auch
   greifbar sein. Bisher schrumpfte hier alles weiter; jetzt umgekehrt:
   44 px Mindesthöhe (übliches Maß für eine Fingerfläche), Text neben
   dem Hörer, und beide mittig statt links angeschlagen. */
@media (max-width: 560px) {
  .land-leiste-inner {
    justify-content: center;
    gap: .5rem;
    padding-inline: var(--space-md);
    font-size: .9rem;
  }
  .land-leiste-tel,
  .land-leiste-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: .5rem .9rem;
    font-size: .95rem;
    font-weight: 700;
  }
  /* Beide teilen sich die Breite, statt nur so breit zu sein wie ihr
     Text. „Call" ist kurz und wäre sonst immer der kleinere Knopf. */
  .land-leiste-tel { flex: 1 1 0; }
  .land-leiste-knopf { flex: 2 1 0; }
  /* Gefüllt statt umrandet: ein durchsichtiger Rahmen neben einem
     vollflächigen Knopf liest sich als Beschriftung. Weiß, weil zwei
     grüne Knöpfe nebeneinander nicht unterscheidbar wären. */
  /* `.land-leiste a` traegt `color: var(--white)` und hat mit dem
     Elementwaehler die hoehere Gewichtung als eine reine Klassenregel —
     der Knopf war dadurch weiss auf weiss, Text und Hoerer unsichtbar.
     Deshalb hier `a.land-leiste-tel`. */
  .land-leiste a.land-leiste-tel {
    background: var(--white);
    border-color: var(--white);
    /* --green-deep statt --green-dark: auf Weiss kommt --green-dark nur
       auf 4,22:1 und verfehlt damit die 4,5:1 fuer diese Schriftgroesse.
       --green-deep liegt bei 12,1:1. Gerechnet mit
       tools/kontrast-pruefen.mjs (WCAG, mit Linearisierung). */
    color: var(--green-deep);
  }
  .land-leiste a.land-leiste-tel:hover,
  .land-leiste a.land-leiste-tel:focus-visible {
    background: var(--green-pale);
    border-color: var(--green-pale);
    color: var(--green-deep);
  }
  .land-leiste-kurz { display: inline; }
  .land-symbol { width: 18px; height: 18px; }
}

/* Flagge im Kopf der Kontaktkarte */
.land-karte-kopf { display: flex; align-items: center; gap: .6rem; }
.land-karte-flagge {
  width: 26px;
  height: auto;
  flex: none;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .35);
}

/* Im Kopfbild groesser — 42 Bildpunkte waren zu beilaeufig. */
.land-flagge { width: 58px; }

/* Hinweis unter der Karte: Standorte sind nicht Maerkte. */
.land-kartennotiz {
  margin: .5rem 0 0;
  font-size: .86rem;
  color: var(--text-muted);
  max-width: 60ch;
}

/* Maerkteliste als eigener, ruhiger Block unter dem Formular. */
.land-maerkte-block {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-light);
}
.land-maerkte-titel {
  margin: 0 0 .5rem;
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Auf einer Laenderseite sind die uebrigen Punkte Zusammenhang, nicht
   Angebot — sie treten hinter das aktuelle Land zurueck. */
.land-karte--eins .land-punkt:not(.land-punkt--aktiv) .land-punkt-kern { opacity: .5; }
.land-karte--eins .land-punkt:hover .land-punkt-kern,
.land-karte--eins .land-punkt:focus-visible .land-punkt-kern { opacity: 1; }

/* ---- 2a Belegstreifen ---- */
.land-belege {
  background: var(--grey-50, #f6f7f6);
  border-bottom: 1px solid var(--border);
}
.land-belege-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: .9rem var(--space-md);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}
.land-belege-liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
}
.land-belege-liste li {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  /* Die Trennlinie steht zwischen den Angaben, nicht vor der ersten. */
  padding-left: var(--space-md);
  border-left: 1px solid var(--border);
}
.land-belege-liste li:first-child { padding-left: 0; border-left: 0; }
.land-belege-liste strong {
  font-size: .95rem;
  font-weight: 700;
  color: var(--green-dark);
  line-height: 1.2;
}
.land-belege-liste span {
  font-size: .78rem;
  color: var(--text-muted);
  max-width: 24em;
}
.land-belege-quelle {
  font-size: .8rem;
  font-weight: 600;
  color: var(--green-dark);
  white-space: nowrap;
}
@media (max-width: 900px) {
  /* Nebeneinander wird es hier zu eng; untereinander bleibt es lesbar,
     und die Trennlinie wandert von links nach oben. */
  .land-belege-liste { flex-direction: column; gap: .6rem; }
  .land-belege-liste li {
    flex-direction: row;
    align-items: baseline;
    gap: .5rem;
    padding: .6rem 0 0;
    border-left: 0;
    border-top: 1px solid var(--border);
  }
  .land-belege-liste li:first-child { padding-top: 0; border-top: 0; }
  .land-belege-liste strong { flex: 0 0 auto; }
}
@media (max-width: 560px) {
  /* Untereinander wurde der Streifen 280 px hoch — gemessen 35 % des
     ersten Bildschirms, bevor überhaupt Inhalt kommt. Im 2×2-Raster
     bleibt er bei rund einem Drittel davon. */
  .land-belege-inner { padding: .7rem var(--space-md); gap: .7rem; }
  .land-belege-liste {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .7rem var(--space-md);
  }
  .land-belege-liste li {
    flex-direction: column;
    align-items: stretch;
    gap: .05rem;
    padding: 0;
    border-top: 0;
  }
  .land-belege-liste strong { font-size: .85rem; }
  .land-belege-liste span { font-size: .72rem; line-height: 1.3; }
}

/* ---- 1a Faktenkasten ---- */
.land-fakten-block { margin-bottom: var(--space-lg); }
/* Einspaltig, über die volle Textbreite.

   Der erste Versuch stellte die sechs Angaben in drei Spalten
   nebeneinander (auto-fit, minmax(300px, 1fr)). Gemessen: 322 px je
   Spalte, davon 184 für die Beschriftung — die Werte brachen auf zwei
   Wörter je Zeile um, der Kasten wurde 786 px hoch. Für ganze Sätze
   taugt nur die volle Breite. */
.land-fakten {
  display: block;
  margin: var(--space-sm) 0 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--white);
}
.land-fakt {
  display: grid;
  /* Feste Spalte für die Beschriftung: untereinander stehende Werte sind
     überfliegbar, eingerückte nicht. */
  grid-template-columns: 11.5rem 1fr;
  gap: var(--space-sm);
  padding: .8rem var(--space-md);
  border-top: 1px solid var(--border);
}
.land-fakt:first-child { border-top: 0; }
.land-fakten dt {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
  padding-top: .1rem;
}
.land-fakten dd {
  margin: 0;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--text-primary);
}
.land-fakten-quelle {
  margin: .6rem 0 0;
  font-size: .8rem;
  color: var(--text-muted);
}
@media (max-width: 700px) {
  /* Nebeneinander bleiben auf dem Handy 11,5 rem für die Beschriftung
     nicht übrig — der Wert bekäme zwei Wörter je Zeile. */
  .land-fakt { grid-template-columns: 1fr; gap: .2rem; }
}

/* ---- Symbole im Raster „Where surface problems arise" ----

   Doppelt eingegrenzt: `body.srbt-landseite` UND `.land-haupt`.
   Der Baustein `anwendung-item` steht auf 32 Länderseiten und auf 35
   weiteren Seiten — die dürfen sich nicht verändern. Das Attribut
   data-feld setzt ausschließlich laenderseiten.js, das nur hier lädt. */
body.srbt-landseite .land-haupt .anwendung-item[data-feld] .anwendung-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 24px;
}
body.srbt-landseite .land-haupt .anwendung-item[data-feld] .anwendung-title::before {
  content: '';
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
}
body.srbt-landseite .land-haupt .anwendung-item[data-feld="klima"] .anwendung-title::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236aab35' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='3.2'/%3E%3Cpath d='M8 1.6v1.4M8 13v1.4M1.6 8h1.4M13 8h1.4M3.5 3.5l1 1M11.5 11.5l1 1M12.5 3.5l-1 1M4.5 11.5l-1 1'/%3E%3Cpath d='M9 20h9a3 3 0 0 0 0-6 4.5 4.5 0 0 0-8.6-1.3A3.4 3.4 0 0 0 9 20z'/%3E%3C/svg%3E"); }
body.srbt-landseite .land-haupt .anwendung-item[data-feld="boden"] .anwendung-title::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236aab35' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 7h20M2 12h20M2 17h20'/%3E%3Cpath d='M6 7v5M11 12v5M16 7v5M19 12v5'/%3E%3C/svg%3E"); }
body.srbt-landseite .land-haupt .anwendung-item[data-feld="vegetation"] .anwendung-title::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236aab35' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21v-8'/%3E%3Cpath d='M12 13c0-3.3 2.7-6 6-6 0 3.3-2.7 6-6 6z'/%3E%3Cpath d='M12 15c0-2.8-2.2-5-5-5 0 2.8 2.2 5 5 5z'/%3E%3Cpath d='M6 21h12'/%3E%3C/svg%3E"); }
body.srbt-landseite .land-haupt .anwendung-item[data-feld="wasser"] .anwendung-title::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236aab35' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8s6 6.4 6 10.4a6 6 0 0 1-12 0c0-4 6-10.4 6-10.4z'/%3E%3Cpath d='M9 13.5a3 3 0 0 0 3 3'/%3E%3C/svg%3E"); }
body.srbt-landseite .land-haupt .anwendung-item[data-feld="recht"] .anwendung-title::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236aab35' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2.8H6.5A1.5 1.5 0 0 0 5 4.3v15.4a1.5 1.5 0 0 0 1.5 1.5h11a1.5 1.5 0 0 0 1.5-1.5V7.8z'/%3E%3Cpath d='M14 2.8v5h5'/%3E%3Cpath d='M8.5 14.5l2.2 2.2 4.3-4.3'/%3E%3C/svg%3E"); }
body.srbt-landseite .land-haupt .anwendung-item[data-feld="industrie"] .anwendung-title::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236aab35' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21V11l5.5 3.4V11L14 14.4V7l7 4.2V21z'/%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M7 17.5h1.5M11.5 17.5H13M16 17.5h1.5'/%3E%3C/svg%3E"); }
body.srbt-landseite .land-haupt .anwendung-item[data-feld="gelaende"] .anwendung-title::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236aab35' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 19l6.5-11 4.2 7'/%3E%3Cpath d='M10.5 19l5-8.5L22 19z'/%3E%3Cpath d='M2 19h20'/%3E%3C/svg%3E"); }
body.srbt-landseite .land-haupt .anwendung-item[data-feld="risiko"] .anwendung-title::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236aab35' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2 1.9 20.4h20.2z'/%3E%3Cpath d='M12 9.5v4.4'/%3E%3Ccircle cx='12' cy='17.1' r='.1'/%3E%3C/svg%3E"); }
body.srbt-landseite .land-haupt .anwendung-item[data-feld="sonstiges"] .anwendung-title::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236aab35' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.5s7-6.1 7-11.1a7 7 0 1 0-14 0c0 5 7 11.1 7 11.1z'/%3E%3Ccircle cx='12' cy='10.2' r='2.6'/%3E%3C/svg%3E"); }

/* ---- Inhaltsverzeichnis in der Textspalte (schmale Schirme) ----
   Es sitzt dort im Lesefluss und braucht denselben Seitenabstand wie
   die Abschnitte daneben; in der Seitenleiste bringt die Spalte den
   Abstand mit. */
.land-inhalt--mobil {
  margin: 0 var(--space-lg) var(--space-lg);
  background: var(--green-pale);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: var(--space-md);
}
.land-inhalt--mobil ul { columns: 2; column-gap: var(--space-md); }
@media (max-width: 560px) {
  .land-inhalt--mobil ul { columns: 1; }
}

/* ---- 4a Comparable work ---- */
.land-fall-hinweis { color: var(--text-muted); font-size: .88rem; margin-top: .3rem; }
.land-fall-karte {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 0;
  margin-top: var(--space-sm);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--white);
}
.land-fall-bild { display: block; }
.land-fall-bild img { width: 100%; height: 100%; min-height: 240px; object-fit: cover; display: block; }
.land-fall-text { padding: var(--space-md) var(--space-lg); }
.land-fall-marke {
  display: inline-block;
  margin: 0 0 .4rem;
  padding: .1rem .5rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--grey-50, #f6f7f6);
  border: 1px solid var(--border);
  border-radius: 2px;
}
.land-fall-titel { font-size: 1.15rem; line-height: 1.3; margin: 0 0 .4rem; }
.land-fall-titel a { color: var(--text-primary); text-decoration: none; }
.land-fall-titel a:hover { color: var(--green-dark); }
.land-fall-lead { font-size: .9rem; color: var(--text-secondary); margin: 0 0 var(--space-sm); line-height: 1.6; }
.land-fall-fakten { margin: 0 0 var(--space-sm); }
.land-fall-fakten > div {
  display: grid;
  grid-template-columns: 10.5rem 1fr;
  gap: var(--space-sm);
  padding: .4rem 0;
  border-top: 1px solid var(--border-light);
}
.land-fall-fakten > div:first-child { border-top: 0; }
.land-fall-fakten dt {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
  padding-top: .1rem;
}
.land-fall-fakten dd { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--text-primary); }
/* Die geteilten Bedingungen sind die Begründung der Zuordnung — sie
   stehen bewusst sichtbar, nicht im Kleingedruckten. */
.land-fall-geteilt { margin: 0 0 var(--space-sm); font-size: .82rem; color: var(--text-primary); }
.land-fall-geteilt span {
  display: inline-block;
  margin-right: .5rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--green-dark);
}
.land-fall-mehr { font-size: .85rem; font-weight: 700; color: var(--green-dark); }
/* Nebeneinander erst, wenn die TEXTSPALTE breit genug ist — nicht das
   Fenster.

   Gemessen bei 1024 px Fenster: die Seitenleiste steht noch (sie
   verschwindet erst unter 1000), die Textspalte ist dadurch nur 551 px
   breit. Im zweispaltigen Kartenlayout blieben der Faktenspalte dann
   96 px: „Approximately 2,200 meters above sea level" bekam drei
   Zeichen pro Zeile.

   Deshalb bis 1240 px einspaltig. Dort ist die Textspalte breit genug
   (bei 1480 px Seitenbreite abzüglich 330 px Leiste). */
@media (max-width: 1240px) {
  .land-fall-karte { grid-template-columns: 1fr; }
  .land-fall-bild img { min-height: 180px; max-height: 240px; }
}
@media (max-width: 800px) {
  .land-fall-bild img { min-height: 180px; max-height: 220px; }
  .land-fall-fakten > div { grid-template-columns: 1fr; gap: .15rem; }
}

/* Übertragbare Lehre aus der Fallstudie.

   Sie steht als Zitat ab, weil sie etwas anderes ist als die
   Faktenzeilen darüber: keine Angabe zum Projekt, sondern eine Aussage
   darüber, was daraus folgt. */
.land-fall-lehre {
  margin: 0 0 var(--space-sm);
  padding: .7rem 0 .7rem var(--space-md);
  border-left: 3px solid var(--green);
  background: var(--green-pale);
  border-radius: 0 4px 4px 0;
}
.land-fall-lehre-titel {
  margin: 0 0 .25rem;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--green-deep, var(--text-primary));
}
.land-fall-lehre-satz {
  margin: 0;
  font-size: .86rem;
  line-height: 1.55;
  color: var(--text-secondary);
}
.land-fall-lehre footer {
  margin-top: .4rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---- E-Mail in Leiste und Kontaktkarte ---- */
.land-karte-mail {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-top: .6rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--green-dark);
  text-decoration: none;
}
.land-karte-mail:hover { text-decoration: underline; }
.land-karte-mail .land-symbol { flex: 0 0 auto; }

/* Abstufung der Leiste, nach Wert geordnet.

   Gemessen mit tools/leiste-messen.mjs: mit allen fünf Teilen passt sie
   bis herunter zu 1100 px in eine Zeile, bei 1024 px brach sie auf
   110 px. Jede Stufe nimmt das jeweils Entbehrlichste heraus, statt
   mehreres auf einmal.

   Reihenfolge: Beide denkbaren Reihenfolgen wurden gemessen, beide
   bleiben einzeilig — es entscheidet also nicht der Platz, sondern der
   Wert. Zuerst entfällt der Rückruf-Verweis: er führt auf denselben
   Anker wie „Send a project enquiry" und ist damit die einzige echte
   Dopplung. Die Sprachzeile ist landesspezifisch und bleibt 150 px
   länger stehen.

   Was entfällt, ist nirgends verloren: Sprachen und E-Mail stehen auch
   in der Kontaktkarte. */
@media (max-width: 1100px) {
  .land-leiste-inner a[href="#land-anfrage"] + a[href="#land-anfrage"] { display: none; }
}
@media (max-width: 950px) {
  .land-leiste-sprachen { display: none; }
}
@media (max-width: 820px) {
  .land-leiste-mail { display: none; }
}
/* Unter 430 px reichen auch zwei Pillen nicht mehr nebeneinander —
   gemessen 87 px bei 375 px Breite. Hier wird nichts weggenommen,
   sondern enger gesetzt. */
/* Unter 430 px wird nur der Abstand enger. Die Knöpfe behalten ihre
   Größe — sie zu verkleinern war genau das Problem. */
@media (max-width: 430px) {
  .land-leiste-inner { gap: .4rem; padding-inline: .7rem; }
  .land-leiste-tel,
  .land-leiste-knopf { padding: .5rem .6rem; font-size: .88rem; }
}

/* Telefonnummer auf schmalen Schirmen nur als Hoerer (Edis, 08.10.2026).
   Auf dem Schreibtisch bleibt sie ausgeschrieben. Der Verweis behaelt
   seinen Namen ueber aria-label. */
@media (max-width: 560px) {
  .land-leiste-nr { display: none; }
  .land-leiste-tel { padding: .35rem .55rem; }
}


/* ------------------------------------------------------------------
   Kopfbild der Länderseiten — Zuschnitt (26.10.2026)
   ------------------------------------------------------------------
   Die 32 Länderbilder sind Panoramen (1672 x 941) mit fester Bildidee:
   Spritzfahrzeug oben am Böschungskopf, Strahl im Bogen, behandelte
   Fläche darunter. Das Band war 520 px hoch. Auf einem 1920 breiten
   Bildschirm ist das Bild dort 1080 px hoch — sichtbar blieben also
   48 %, und zwar die Mitte. Genau dort ist kein Fahrzeug: abgeschnitten
   war immer der Teil, der die Arbeit zeigt.

   Deshalb zwei Änderungen:
     1. Band auf breiten Schirmen höher (bis 640 px), damit weniger
        wegfällt.
     2. Ausschnitt nach oben: 38 % statt 50 %. Am Handy wird nicht oben
        und unten, sondern links und rechts beschnitten — die 28 %
        waagerecht halten das Fahrzeug auch dort im Bild.

   Die Werte stammen aus einem Vergleich der echten Bilder in den echten
   Kastenmassen (520/640 px, Mitte/35 %/38 %), nicht aus einer Schätzung.

   Gilt nur für Länderseiten. Die drei Übersichtsseiten laden dieselbe
   Stilvorlage, sollen aber ihr bisheriges Kopfbild behalten.
   ------------------------------------------------------------------ */
body.srbt-landseite .hero--has-bg { min-height: clamp(520px, 33vw, 640px); }
body.srbt-landseite .hero-bg-full img { object-position: 28% 38%; }

/* ------------------------------------------------------------------
   Kennzeichnung der Länderbilder (26.10.2026)
   ------------------------------------------------------------------
   Erst stand sie im Bild. Das geht nicht auf: das Kopfband beschneidet
   das Bild je nach Fensterbreite anders (bei 2328 px sieht man senkrecht
   nur 19–68 %, am Handy waagerecht nur 17–57 %), und es skaliert das Bild
   hoch — die Beschriftung war dadurch mal abgeschnitten, mal übergross
   mitten im Bild.

   Deshalb zeichnet sie jetzt die Seite. Sie sitzt am Kasten, nicht im
   Bild: immer unten rechts, immer gleich gross, von keinem Zuschnitt
   erwischt. Der Wortlaut steht an zwei Stellen in dieser Datei statt in
   32 Bilddateien.

   Gilt für die Länderseiten und für die Kachelraster der beiden
   Übersichtsseiten (240 europe, 251 middle-east).
   ------------------------------------------------------------------ */

body.srbt-landseite .hero--has-bg { position: relative; }

body.srbt-landseite .hero--has-bg::after,
body.page-id-240 .kachel-img-wrap::after,
body.page-id-251 .kachel-img-wrap::after {
  content: "AI-optimized";
  position: absolute;
  right: 10px;
  bottom: 8px;
  z-index: 3;
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
  letter-spacing: .03em;
  color: rgba(255, 255, 255, .82);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .85);
  pointer-events: none;
}

/* Im Kopfband sitzt unten die Kontaktleiste — etwas höher ansetzen. */
body.srbt-landseite .hero--has-bg::after { right: 16px; bottom: 12px; }

body.page-id-240 .kachel-img-wrap,
body.page-id-251 .kachel-img-wrap { position: relative; }

/* ==========================================================
   Landesbild im Fliesstext
   Edis, 29.10.2026: „Wir brauchen ein Bild eingebaut."
   Steht zwischen Faktenkasten und den Textabschnitten, in der
   Breite der Textspalte, mit Bildunterschrift.
   ========================================================== */

.land-bild {
  margin: 0 0 40px;
  padding: 0;
}

.land-bild-rahmen {
  position: relative;          /* traegt die Kennzeichnung */
  overflow: hidden;
  border-radius: 10px;
  line-height: 0;              /* kein Spalt unter dem Bild */
}

.land-bild-img {
  width: 100%;
  height: auto;
  display: block;
}

.land-bild-text {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: #5a6660;
}

/* Dieselbe Kennzeichnung wie am Kopfbild und an den Kacheln: auch diese
   Motive sind KI-gestuetzt entstanden. Ein Bild ohne Hinweis waere ein
   Rueckschritt hinter Kais Vorgabe vom 26.10.2026. */
.land-bild-rahmen::after {
  content: "AI-optimized";
  position: absolute;
  right: 10px;
  bottom: 8px;
  z-index: 3;
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
  letter-spacing: .03em;
  color: rgba(255, 255, 255, .82);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .85);
  pointer-events: none;
}

@media (max-width: 700px) {
  .land-bild { margin-bottom: 28px; }
  .land-bild-text { font-size: 13px; }
}

/* ------------------------------------------------------------------ *
 *  Länderregister — Baustein „laender_register"
 *
 *  Steht seit 02.11.2026 auf /hydroseeding/: alle Märkte als Verweise,
 *  damit jeder Ländername einmal im Quelltext der Seite vorkommt.
 *
 *  Masse und Farben kommen aus den Variablen des Themes (--radius-lg ist
 *  6px, nicht 10 — eigene Rundungen fielen vorher aus dem Rahmen).
 * ------------------------------------------------------------------ */

.land-register-bg { background: var(--grey-50); }
.land-register { padding: var(--space-xxl) 0; }

.land-register-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
}
.land-register-kopf > div { flex: 1 1 32rem; min-width: 0; }
.land-register .section-lead { max-width: 72ch; margin-bottom: 0; }

/* Zahl der Märkte als ruhiger Blickfang rechts oben. */
.land-register-zahl {
  margin: 0;
  flex: 0 0 auto;
  text-align: right;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.2;
}
.land-register-zahl span {
  display: block;
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -.02em;
  text-transform: none;
  color: var(--green);
  line-height: 1;
  margin-bottom: .2rem;
}

.land-register-gruppe { margin-top: var(--space-xl); }

.land-register-gruppentitel {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 var(--space-sm);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--green-dark);
}
.land-register-gruppentitel::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--grey-200);
}
.land-register-gruppentitel em {
  order: 1;
  font-style: normal;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--text-muted);
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: 999px;
  padding: .1rem .5rem;
}

.land-register-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: .5rem .75rem;
}
.land-register-liste li { display: flex; }

.land-register-liste a {
  display: flex;
  flex: 1;
  align-items: center;
  gap: .7rem;
  padding: .7rem .85rem;
  border: 1px solid var(--border-light);
  border-left: 2px solid var(--grey-200);
  border-radius: var(--radius-lg);
  background: var(--white);
  color: var(--text-primary);
  text-decoration: none;
  font-size: .92rem;
  line-height: 1.35;
  transition: border-color .15s, background .15s, color .15s, box-shadow .15s, transform .15s;
}
.land-register-liste a > span { flex: 1; min-width: 0; }

.land-register-liste a:hover,
.land-register-liste a:focus-visible {
  border-color: var(--green);
  border-left-color: var(--green);
  background: var(--green-pale);
  color: var(--green-deep);
  box-shadow: 0 2px 10px rgba(30, 61, 16, .08);
  transform: translateY(-1px);
}

.land-register-flagge {
  width: 24px;
  height: auto;
  flex: 0 0 auto;
  display: block;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(61, 79, 94, .2);
}

/* Pfeil erscheint erst beim Überfahren — sonst flimmert die Liste. */
.land-register-pfeil {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: var(--green);
  opacity: 0;
  transform: translateX(-3px);
  transition: opacity .15s, transform .15s;
}
.land-register-liste a:hover .land-register-pfeil,
.land-register-liste a:focus-visible .land-register-pfeil {
  opacity: 1;
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .land-register-liste a,
  .land-register-pfeil { transition: none; }
  .land-register-liste a:hover,
  .land-register-liste a:focus-visible { transform: none; }
}

@media (max-width: 900px) {
  .land-register-zahl { text-align: left; }
  .land-register-zahl span { font-size: 2rem; }
}
@media (max-width: 600px) {
  .land-register { padding: var(--space-xl) 0; }
  .land-register-liste { grid-template-columns: 1fr; }
}