/* ============================================================
   GÄRTNEREI HOHN — UNTERSEITEN
   Sortiment · Kategorie · Pflege · Nachhaltigkeit · Händler
   · Jobs · 404
   ------------------------------------------------------------
   Alle Farbpaare hier sind gerechnet, nicht geschätzt.
   Wo ein Wert danebensteht, ist er das Ergebnis der Messung.
   ============================================================ */

/* ============================================================
   1 · SORTIMENT — Übersicht
   ============================================================ */
/* ------------------------------------------------------------
   Die erste Fassung waren Kästen: Rahmen, Schatten, abgerundete
   Ecken — und wegen einer zu breiten Link-Regel war darin auch
   noch jede Zeile unterstrichen. Das sah aus wie ein Webshop
   aus dem Baukasten, nicht wie die Broschüre.

   Jetzt: kein Rahmen, kein Schatten. Das Bild steht auf einer
   ruhigen Sandfläche, darunter Text auf Weiß. Was die Karte
   zusammenhält, ist eine einzige feine Linie über dem Text —
   und die wächst beim Überfahren in Terrakotta durch.
   Die Broschüre lebt von Weißraum. Hier auch.
   ------------------------------------------------------------ */
.sort-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: clamp(2rem, 4vw, 3.5rem) clamp(1.75rem, 3vw, 3rem);
}

.sort-karte {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: transparent;
  border: 0;
  border-radius: 0;
}
/* Nichts in der Karte wird unterstrichen — sie ist ein Bedienelement,
   kein Fließtext. */
.sort-karte,
.sort-karte * { text-decoration: none; }

/* Die Sortimentsbilder sind FREISTELLER mit echtem Alpha-Kanal.
   Deshalb `contain` statt `cover`: Ein Freisteller darf nicht
   beschnitten werden, er soll auf der Sandfläche stehen.
   Und deshalb Innenabstand: die Pflanze braucht Luft, sonst
   klebt sie am Rand. */
.sort-karte__bild {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--hohn-sand);
}
.sort-karte__bild img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 12%;
  transition: transform 1.4s cubic-bezier(.16,.7,.2,1);
}
.sort-karte:hover .sort-karte__bild img,
.sort-karte:focus-visible .sort-karte__bild img { transform: scale(1.045); }

/* Die Linie über dem Text. Ruhend grau, beim Überfahren wächst
   Terrakotta von links durch. Das ist die ganze Bewegung. */
.sort-karte__text {
  position: relative;
  padding-top: 1.35rem;
  display: flex; flex-direction: column; flex: 1;
  border-top: 1px solid var(--hohn-linie);
}
.sort-karte__text::before {
  content: "";
  position: absolute; top: -1px; left: 0;
  height: 1px; width: 0;
  background: var(--hohn-erde);
  transition: width .7s cubic-bezier(.16,.7,.2,1);
}
.sort-karte:hover .sort-karte__text::before,
.sort-karte:focus-visible .sort-karte__text::before { width: 100%; }

.sort-karte__text .dach {
  margin-bottom: .55rem;
  color: var(--hohn-erde);            /* 5,19:1 auf Weiß — gemessen */
  font-size: var(--fs-mikro);
  letter-spacing: var(--sperr-weit);
}
.sort-karte__text h2 {
  font-size: clamp(1.2rem, 1.05rem + .5vw, 1.5rem);
  font-weight: 700;
  color: var(--hohn-gruen);
  margin-bottom: .55rem;
  letter-spacing: var(--sperr-eng);
  line-height: 1.2;
  transition: color var(--tempo);
}
.sort-karte:hover h2,
.sort-karte:focus-visible h2 { color: var(--hohn-tinte); }

.sort-karte__text p {
  color: var(--hohn-grau);
  line-height: 1.65;
  font-size: var(--fs-klein);
  margin-bottom: 1.5rem;
  max-width: 34ch;
}

.sort-karte__mehr {
  margin-top: auto;
  font-size: var(--fs-mikro);
  font-weight: 700;
  letter-spacing: var(--sperr-mittel);
  text-transform: uppercase;
  color: var(--hohn-gruen);
  display: inline-flex; align-items: center; gap: .65rem;
}
.sort-karte__mehr::after {
  content: "";
  width: 1.5rem; height: 1px;
  background: currentColor;
  transition: width .5s cubic-bezier(.16,.7,.2,1);
}
.sort-karte:hover .sort-karte__mehr::after,
.sort-karte:focus-visible .sort-karte__mehr::after { width: 2.8rem; }

.sort-karte:focus-visible {
  outline: 2px solid var(--hohn-gruen);
  outline-offset: 6px;
}

/* ============================================================
   2 · KATEGORIESEITE
   ============================================================ */
.kat-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--luft-s);
  align-items: start;
}
@media (max-width: 900px) {
  .kat-raster { grid-template-columns: 1fr; }
}

.kat-text p { color: var(--hohn-grau); line-height: 1.8; margin-bottom: 1.25rem; max-width: 66ch; }
.kat-text h2 {
  font-size: clamp(1.3rem, 1.05rem + .8vw, 1.7rem);
  color: var(--hohn-gruen);
  margin-top: 2.5rem; margin-bottom: 1rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--hohn-linie);
}
.kat-hinweis { font-size: var(--fs-klein); color: var(--hohn-grau); }

.kat-schritte { counter-reset: s; list-style: none; margin: 0 0 1.5rem; padding: 0; }
.kat-schritte li {
  counter-increment: s;
  position: relative;
  padding-left: 3rem;
  margin-bottom: 1rem;
  color: var(--hohn-grau);
  line-height: 1.7;
}
.kat-schritte li::before {
  content: counter(s, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-weight: 800;
  font-size: var(--fs-klein);
  letter-spacing: var(--sperr-eng);
  color: var(--hohn-erde);        /* 5,19:1 auf Weiß */
}

/* Botanische Namen — das SEO-Herz der Seite.
   Sie sollen aussehen, wie sie sind: Fachbegriffe. */
.botanik {
  display: flex; flex-wrap: wrap; gap: .5rem;
  list-style: none; margin: 0 0 1.5rem; padding: 0;
}
.botanik li {
  margin: 0;
  padding: .5rem .9rem;
  background: var(--hohn-sand);
  border: 1px solid var(--hohn-linie);
  border-radius: var(--radius);
  font-size: var(--fs-klein);
  color: var(--hohn-tinte);       /* 16,18:1 auf Sand */
}
.botanik em { font-style: italic; }

/* Faktenkasten */
.kat-fakten {
  position: sticky; top: 6rem;
  background: var(--hohn-sand);
  border-top: 3px solid var(--hohn-gruen);
  padding: 1.75rem;
}
@media (max-width: 900px) { .kat-fakten { position: static; } }

.kat-fakten h2 {
  margin: 0 0 1.25rem;
  font-size: var(--fs-klein);
  letter-spacing: var(--sperr-weit);
  text-transform: uppercase;
  color: var(--hohn-gruen);
  border-bottom: 0; padding-bottom: 0;
}
.kat-fakten .daten { grid-template-columns: 1fr; gap: 0; margin-bottom: 1.5rem; }
.kat-fakten .daten dt { border-bottom: 0; padding-bottom: 0; font-size: var(--fs-mikro); text-transform: uppercase; letter-spacing: var(--sperr-mittel); color: var(--hohn-grau); }
.kat-fakten .daten dd { border-bottom: 1px solid var(--hohn-linie); padding-top: .15rem; padding-bottom: .75rem; margin-bottom: .75rem; color: var(--hohn-tinte); }
.kat-fakten .daten dd:last-child { border-bottom: 0; }

.kat-preis {
  font-size: var(--fs-klein);
  color: var(--hohn-grau);
  line-height: 1.6;
  margin-bottom: 1.25rem;
}
.kat-preis strong { display: block; color: var(--hohn-tinte); }

/* Galerie */
.kat-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1.5rem;
}
.kat-galerie figure { margin: 0; }
.kat-galerie img {
  width: 100%; height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;                 /* echte Fotos füllen die Fläche */
  border-radius: var(--radius);
  background: var(--hohn-sand);      /* NIE weiß — sonst leuchtet ein Kasten */
}
/* Freisteller in der Galerie: nicht beschneiden, sondern stellen. */
.kat-galerie img[src*="/r-"],
.kat-galerie img[src*="/f-"],
.kat-galerie img[src*="/fs-"],
.kat-galerie img[src*="/ft-"],
.kat-galerie img[src*="/k-"],
.kat-galerie img[src*="/gefaess-"],
.kat-galerie img[src*="tillandsien"],
.kat-galerie img[src*="selbstbewaesserung"] {
  object-fit: contain;
  padding: 10%;
}

/* ------------------------------------------------------------
   DIE WEISSE PRODUKTFLÄCHE — nur dort, wo sie gebraucht wird
   ------------------------------------------------------------
   Die Tillandsien-Aufnahmen aus der Imagebroschüre haben einen
   WEISSEN Hintergrund. Bei allen anderen Sortimentsgruppen trug
   das PDF eine handgemachte Maske mit — dort sind es echte
   Freisteller, die sauber auf dem Sandton stehen. Bei den
   Tillandsien fehlt sie (gemessen: `smask 0`).

   Auf Sand steht jede dieser Aufnahmen als weißer Kasten da.
   Genau das, was auf dieser Website nirgends zu sehen sein soll.

   Automatisch freistellen wäre hier gefährlich: In den Glas-
   gefäßen ist es innen fast weiß. Ein Flutfüller bräche durch
   die Glaswand und fräße das Gefäß auf — derselbe Fehler, der
   schon die weißen Schalen zerstört hat.

   Also die ehrliche Lösung: die FLÄCHE wird weiß. Wo Bild und
   Grund dieselbe Farbe haben, gibt es keine Kante mehr, die man
   sehen könnte. Produktaufnahmen auf Weiß sind ohnehin die
   Katalogkonvention.

   Geschaltet über `galerie_weiss` in teile/daten.php — nicht
   pauschal für alle. Die echten Freisteller bleiben auf Sand,
   dort stehen sie wärmer.
   ------------------------------------------------------------ */
.flaeche-produkt { background: var(--hohn-weiss); }

/* Ohne diese Haarlinien schwömme die weiße Fläche im Nichts —
   der Sand darüber und darunter würde einfach aufhören. */
.flaeche-produkt { border-block: 1px solid var(--hohn-sand-tief); }

.flaeche-produkt .kat-galerie img {
  background: var(--hohn-weiss);
  padding: 6%;                 /* weniger Luft: Der Grund trägt jetzt,
                                  die Kachel muss nicht mehr rahmen. */
}

/* Die Gefäß-Galerie ist eine Kollektion — sie darf enger und
   größer stehen als eine gewöhnliche Bildstrecke. 18 Schalen
   nebeneinander sind das Argument. */
.kat-galerie--gefaesse {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: 1.25rem;
}
.kat-galerie--gefaesse img { padding: 6%; }

/* Farbe und Oberfläche unter jedes Gefäß. Das ist bei einer
   Kollektion keine Beschriftung, sondern das Argument. */
.kat-galerie figcaption {
  padding: .75rem .25rem 0;
  text-align: center;
  line-height: 1.4;
}
.kat-galerie figcaption strong {
  display: block;
  font-size: var(--fs-klein);
  font-weight: 700;
  letter-spacing: var(--sperr-eng);
  color: var(--hohn-gruen);          /* 7,06:1 auf Sand — gemessen */
}
.kat-galerie figcaption span {
  display: block;
  margin-top: .15rem;
  font-size: var(--fs-mikro);
  letter-spacing: var(--sperr-mittel);
  text-transform: uppercase;
  color: var(--hohn-grau);           /* 6,01:1 auf Sand */
}

/* Weiter im Sortiment */
.kat-weiter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: 1rem;
}
.kat-weiter__karte {
  display: block;
  text-decoration: none;
  border: 1px solid var(--hohn-linie);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--tempo), transform var(--tempo);
}
.kat-weiter__karte:hover,
.kat-weiter__karte:focus-visible { border-color: var(--hohn-gruen); transform: translateY(-3px); }
.kat-weiter__karte img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.kat-weiter__karte span {
  display: block;
  padding: .8rem;
  text-align: center;
  font-size: var(--fs-mikro);
  font-weight: 700;
  letter-spacing: var(--sperr-mittel);
  text-transform: uppercase;
  color: var(--hohn-gruen);
}

/* ============================================================
   3 · PFLEGE — Video und Schritte
   ============================================================ */
.video-block { max-width: 60rem; margin-inline: auto; }
.video-block h2 { color: var(--hohn-gruen); margin-bottom: .75rem; }
.video-block__note {
  color: var(--hohn-grau);
  font-size: var(--fs-klein);
  margin-bottom: 1.75rem;
  max-width: 60ch;
}

.video-rahmen { margin: 0; }
.video-rahmen video {
  width: 100%; height: auto;
  display: block;
  background: var(--hohn-gruen-nacht);
  border-radius: var(--radius);
  box-shadow: 0 18px 50px rgba(28,34,31,.20);
}
.video-rahmen figcaption {
  margin-top: 1rem;
  font-size: var(--fs-klein);
  color: var(--hohn-grau);
  max-width: 62ch;
}

/* Die fünf Schritte */
.schritte { list-style: none; margin: 2.5rem 0 0; padding: 0; }
.schritt {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 1.5rem;
  padding-block: 2rem;
  border-top: 1px solid var(--hohn-linie);
  align-items: start;
}
.schritt:last-child { border-bottom: 1px solid var(--hohn-linie); }
@media (max-width: 640px) {
  .schritt { grid-template-columns: 1fr; gap: .5rem; }
}

.schritt__nr {
  font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem);
  font-weight: 800;
  line-height: 1;
  color: var(--hohn-erde);        /* 4,64:1 auf Sand — gemessen */
  letter-spacing: var(--sperr-eng);
}
.schritt h3 {
  font-size: var(--fs-h3);
  color: var(--hohn-gruen);
  margin-bottom: .6rem;
  letter-spacing: var(--sperr-eng);
}
.schritt p { color: var(--hohn-grau); line-height: 1.8; margin-bottom: .8rem; max-width: 62ch; }
.schritt p:last-child { margin-bottom: 0; }

/* ============================================================
   4 · NACHHALTIGKEIT
   ============================================================ */
.massnahmen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1.5rem;
  list-style: none;
  margin: 2.5rem 0 0; padding: 0;
}
.massnahme {
  padding: 1.75rem;
  background: var(--hohn-sand);
  border-left: 3px solid var(--hohn-gruen);
}
.massnahme h3 {
  font-size: var(--fs-basis);
  font-weight: 700;
  color: var(--hohn-gruen);
  margin-bottom: .6rem;
  letter-spacing: var(--sperr-eng);
}
.massnahme p { color: var(--hohn-grau); line-height: 1.7; font-size: var(--fs-klein); }

.nachsatz {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hohn-linie);
  color: var(--hohn-grau);
  font-size: var(--fs-blei);
  max-width: 60ch;
}

.zert-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 2rem;
  margin-block: 2.5rem;
}
.zert {
  background: var(--hohn-weiss);
  padding: 2rem;
  border-top: 3px solid var(--hohn-erde);
}
.zert__marke {
  font-size: var(--fs-klein);
  font-weight: 800;
  letter-spacing: var(--sperr-weit);
  color: var(--hohn-erde);        /* 5,19:1 auf Weiß */
  margin-bottom: .5rem;
}
.zert h3 {
  font-size: var(--fs-h3);
  color: var(--hohn-gruen);
  margin-bottom: 1rem;
  letter-spacing: var(--sperr-eng);
}
.zert p { color: var(--hohn-grau); line-height: 1.75; }

/* ============================================================
   5 · FÜR HÄNDLER
   ============================================================ */
.zusagen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 2rem;
}
.zusage {
  text-align: center;
  padding: 2.25rem 1.5rem;
  border: 1px solid var(--hohn-linie);
  border-radius: var(--radius);
}
.zusage__gross {
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  font-weight: 800;
  line-height: 1;
  color: var(--hohn-gruen);
  letter-spacing: var(--sperr-eng);
  margin-bottom: .75rem;
}
.zusage h3 {
  font-size: var(--fs-mikro);
  font-weight: 700;
  letter-spacing: var(--sperr-weit);
  text-transform: uppercase;
  color: var(--hohn-erde);
  margin-bottom: .75rem;
}
.zusage p { color: var(--hohn-grau); font-size: var(--fs-klein); line-height: 1.7; }

.paar-bilder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.paar-bilder figure { margin: 0; }
.paar-bilder img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: var(--radius);
}
.paar-bilder figcaption {
  margin-top: .75rem;
  font-size: var(--fs-klein);
  color: var(--hohn-grau);
  line-height: 1.6;
}

figure.breit { margin: 2.5rem 0 0; }
figure.breit img { width: 100%; border-radius: var(--radius); }

/* ============================================================
   6 · JOBS
   ============================================================ */
.stelle {
  padding: 2rem 0;
  border-top: 1px solid var(--hohn-linie);
}
.stelle h3 { font-size: var(--fs-h3); color: var(--hohn-gruen); margin-bottom: .4rem; }
.stelle__meta {
  font-size: var(--fs-mikro);
  letter-spacing: var(--sperr-mittel);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--hohn-erde);
  margin-bottom: 1rem;
}
.stelle h4 {
  font-size: var(--fs-klein);
  font-weight: 700;
  letter-spacing: var(--sperr-eng);
  color: var(--hohn-tinte);
  margin-top: 1.5rem; margin-bottom: .5rem;
}

/* ============================================================
   7 · 404
   ============================================================ */
.verirrt { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.verirrt li { border-bottom: 1px solid var(--hohn-linie); margin: 0; }
/* Spezifität muss die Fließtext-Regel aus 07-text.css schlagen —
   sonst wären auch diese Zeilen unterstrichen. */
.textseite .verirrt a,
.verirrt a {
  display: block;
  padding: 1.1rem 0;
  text-decoration: none;
  color: var(--hohn-grau);
  transition: padding-left var(--tempo), color var(--tempo);
}
.verirrt a strong { color: var(--hohn-gruen); font-weight: 700; }
.verirrt a:hover,
.verirrt a:focus-visible { padding-left: .75rem; color: var(--hohn-tinte); }

/* ============================================================
   7a · DAS REGAL AUF DER STARTSEITE
   ------------------------------------------------------------
   Das Regal war als Gitter aus weißen Zellen mit Trennlinien
   gebaut — sinnvoll, solange die Bilder rechteckige Fotos waren.
   Jetzt sind es Freisteller. Ein weißes Kästchen mit Rahmen um
   eine freigestellte Pflanze sieht aus wie ein Fehler.

   Also: Sandflächen ohne Rahmen, nur durch Abstand getrennt.
   Die Pflanze steht darauf, nichts umrandet sie.
   ============================================================ */
.regal {
  gap: clamp(1rem, 2vw, 1.75rem);
  background: transparent;
  border: 0;
}
.regal figure {
  background: var(--hohn-sand);
  border: 0;
  padding: 1.5rem 1.25rem 3.75rem;
}
.regal figure img {
  object-fit: contain;
  background: none;
}

/* ============================================================
   7b · SORTIMENTSKACHELN AUF DER STARTSEITE
   ------------------------------------------------------------
   Beim Aufräumen ist etwas untergegangen: Das Grundstyling der
   Kacheln stand nur in hohn.css — einer Altdatei, die gar nicht
   mehr eingebunden ist. Die Kacheln hatten also überhaupt kein
   Layout. Hier steht es wieder, diesmal für Freisteller gebaut:
   Sandfläche, Motiv frei darauf, Beschriftung darunter statt
   in das Bild hineingeschrieben.
   ============================================================ */
.kacheln {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-top: var(--luft-s);
}
@media (max-width: 1024px) { .kacheln { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .kacheln { grid-template-columns: 1fr; } }

.kachel {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  background: var(--hohn-sand);
}
.kachel, .kachel * { text-decoration: none; }

.kachel img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;              /* Freisteller nicht beschneiden */
  padding: 12% 12% 8%;
  transition: transform 1.2s cubic-bezier(.16,.7,.2,1);
}
.kachel:hover img,
.kachel:focus-visible img { transform: scale(1.05); }

.kachel__text {
  display: block;
  padding: 0 1.25rem 1.5rem;
  text-align: center;
}
.kachel__name {
  display: block;
  font-size: var(--fs-klein);
  font-weight: 700;
  letter-spacing: var(--sperr-eng);
  color: var(--hohn-gruen);
  margin-bottom: .35rem;
}
.kachel__bot {
  display: block;
  font-size: var(--fs-mikro);
  letter-spacing: var(--sperr-eng);
  color: var(--hohn-grau);
  font-style: italic;
  line-height: 1.45;
}
.kachel:focus-visible { outline: 2px solid var(--hohn-gruen); outline-offset: 4px; }

/* Die Kacheln stehen im grünen Band. Dort braucht die Sandfläche
   keinen weiteren Rahmen — sie hebt sich von selbst ab. */
.flaeche-gruen .kachel__name { color: var(--hohn-gruen); }

/* ============================================================
   7c · WENN DER KOPF ABGESCHNITTEN WIRD
   ------------------------------------------------------------
   `object-fit: cover` füllt die Fläche und schneidet den Rest weg —
   vom Bildmittelpunkt aus, nach allen Seiten gleich. Bei einem
   hochformatigen Porträt in einer breiten Spalte heißt das:
   oben und unten fliegen weg. Und oben ist der Kopf.

   Genau das war auf der Pflegeseite zu sehen: Amir ohne Gesicht.

   `object-position` verschiebt den sichtbaren Ausschnitt. Bei einem
   Menschen zieht man ihn nach oben — ein Gesicht darf nie beschnitten
   werden, ein Hosenbein schon.

   Das ist keine Notlösung für ein Bild, sondern die Regel für alle
   Porträts in breiten Bildflächen.

   Der Wert ist NICHT geschätzt. Ich habe den Beschnitt bei 0, 12, 25
   und 50 % durchgerechnet und angesehen:

     50 %  Standard — Kopf abgeschnitten
     25 %  Kopf vollständig, Bonsai noch im Bild   ← so
     12 %  Kopf frei, aber der Bonsai fällt fast raus
      0 %  viel Luft über dem Kopf, Bonsai weg

   Der Bonsai in seinen Händen ist der Punkt des Bildes. Er muss
   drinbleiben.
   ============================================================ */
.bild--kopf {
  object-position: center 25% !important;
}

/* ============================================================
   8 · (frei)
   ------------------------------------------------------------
   Hier stand `.split__bild--weiss` — eine Notlösung für das alte,
   auf Weiß freigestellte Studiofoto von Thomas Hohn. Es erzeugte
   auf farbigem Grund einen weißen Kasten, deshalb bekam der
   Bildbereich einen weißen Hintergrund.

   Seit Juli 2026 gibt es ein echtes Foto aus dem Gewächshaus.
   Es ist ein Foto wie jedes andere und braucht keine Sonderregel.
   Klasse und CSS sind entfernt — Ballast, den später niemand
   mehr einordnen könnte.
   ============================================================ */