@charset "UTF-8";
/* ==========================================================================
   Mertini Garten- und Landschaftsbau — Stylesheet
   Farben und Schriften entsprechen der bisherigen Seite (siehe inhalte/design.md).
   ========================================================================== */

/* --- Schriften ---------------------------------------------------------- */

@font-face {
  font-family: "Yeseva One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/yesevaone-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Yeseva One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/yesevaone-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/opensans-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/opensans-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Der Schriftzug der Marke steht in Inter — so gibt es das Logo-Paket vor.
   Geladen wird nur ein Mikro-Ausschnitt mit den Großbuchstaben (knapp 9 KB);
   die `unicode-range` sorgt dafür, dass die Schrift für nichts anderes
   herangezogen wird, selbst wenn sie versehentlich woanders gesetzt würde.
   Es ist eine variable Schrift, ein Schnitt deckt beide Gewichte ab. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/inter-versalien.woff2) format("woff2");
  unicode-range: U+20, U+26, U+2D-2E, U+41-5A, U+C4, U+CB, U+CF, U+D6, U+DC,
    U+178, U+308, U+1E26, U+1E84, U+1E8C;
}

/* --- Grundwerte --------------------------------------------------------- */

:root {
  --gruen-hell: #97b88f;
  --beige: #dcd7cd;
  --gruen-dunkel: #285041;
  --creme: #f6f4ef;
  --weiss: #ffffff;
  --text: #23312b;
  --text-leise: #5d6b64;
  --linie: #e3e0d8;

  /* So ist es auf der Originalseite aufgeteilt: Überschriften und Fließtext
     stehen dort durchgängig in Open Sans (Überschriften in 700, dunkelgrün),
     Yeseva One taucht nur auf den Akzentzeilen über den Überschriften und auf
     der Unterzeile der Bühne auf. */
  --schrift-titel: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  --schrift-text: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  --schrift-akzent: "Yeseva One", Georgia, "Times New Roman", serif;
  --schrift-marke: "Inter", var(--schrift-text);

  /* Die Farben des Logo-Pakets (Variante 7b). Sie gelten nur für die Marke
     selbst und weichen bewusst von der Farbwelt der Seite oben ab — das Logo
     gibt sie so vor, und nachträglich angeglichene Logofarben sind der
     sicherste Weg, eine Marke unkenntlich zu machen. */
  --logo-mittelgruen: #4f7226;
  --logo-hellgruen: #8fb861;
  --logo-papier: #eef4e3;
  --logo-schrift: #1e2018;
  --logo-schrift-leise: #5c6156;

  --radius: 4px;
  --radius-gross: 14px;
  --breite: 1180px;
  --schatten: 0 2px 8px rgba(40, 80, 65, 0.06);
  --schatten-hoch: 0 14px 34px rgba(40, 80, 65, 0.14);
  /* Die gestapelte Marke ist rund 98 Punkte hoch (Zeichen 49 + 5 + Name 18 +
     5 + zwei Zusatzzeilen à 10,3). Mit zwölf Punkten Luft nach oben und unten
     steht die Kopfzeile damit auf 122 statt der früheren 88 Punkte — der Preis
     der Primärfassung, die ihre Teile übereinander stellt statt nebeneinander. */
  --kopfhoehe: 122px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--kopfhoehe);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--weiss);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: 1.0625rem;
  line-height: 1.75;
  font-weight: 400;
  overflow-x: hidden;
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--gruen-dunkel);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--gruen-hell);
}

h1,
h2,
h3,
h4 {
  font-family: var(--schrift-titel);
  font-weight: 700;
  line-height: 1.22;
  color: var(--gruen-dunkel);
  margin: 0 0 0.6em;
  letter-spacing: -0.015em;
  /* Deutsche Komposita sind länger als ein schmales Gerät hergibt:
     „Verantwortungsbewusstsein“ misst als Überschrift 346 px und schob die
     Seite über den rechten Rand. Das hier ist das Netz darunter — es greift
     nur, wenn ein Wort allein nicht in die Zeile passt. */
  overflow-wrap: break-word;
}

h1 {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
}
h2 {
  font-size: clamp(1.55rem, 3.1vw, 2.3rem);
}
h3 {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
}
h4 {
  font-size: 1.15rem;
}

/* Auf dem Handy darf die Silbentrennung mitreden — dort ist die Spalte so
   schmal, dass ein hart abgeschnittenes Wort auffiele. Die Trennregeln liefert
   das lang="de" im <html>. Auf breiten Schirmen bleibt es aus: dort sieht eine
   getrennte Überschrift unruhig aus und nötig ist sie ohnehin nicht. */
@media (max-width: 700px) {
  h1,
  h2,
  h3,
  h4 {
    hyphens: auto;
  }
}

p {
  margin: 0 0 1.15em;
}

p:last-child {
  margin-bottom: 0;
}

:focus-visible {
  outline: 3px solid var(--gruen-dunkel);
  outline-offset: 3px;
  border-radius: 2px;
}

.visuell-versteckt {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.springlink {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--gruen-dunkel);
  color: #fff;
  padding: 0.8rem 1.4rem;
  border-radius: 0 0 var(--radius) 0;
}

.springlink:focus {
  left: 0;
  color: #fff;
}

/* --- Layout ------------------------------------------------------------- */

.huelle {
  width: min(100% - 2.5rem, var(--breite));
  margin-inline: auto;
}

.huelle--schmal {
  width: min(100% - 2.5rem, 820px);
  margin-inline: auto;
}

.block {
  padding: clamp(3.5rem, 8vw, 6.5rem) 0;
}

.block--beige {
  background: var(--beige);
}

.block--creme {
  background: var(--creme);
}

.block--dunkel {
  background: var(--gruen-dunkel);
  color: #e9efe9;
}

.block--dunkel h2,
.block--dunkel h3 {
  color: var(--weiss);
}

.block--eng {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}

.mitte {
  text-align: center;
}

.kopfzeile {
  max-width: 720px;
  margin: 0 auto clamp(2.2rem, 4vw, 3.4rem);
  text-align: center;
}

.kopfzeile p {
  color: var(--text-leise);
}

/* Die Akzentzeile über der Überschrift. Auf der Originalseite steht genau
   diese Zeile in Yeseva One, in normaler Schreibweise und im Dunkelgrün der
   Marke — nicht als gesperrte Versalzeile. */
.augenbraue {
  display: block;
  font-family: var(--schrift-akzent);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gruen-dunkel);
  margin-bottom: 0.45rem;
}

/* Vor dunklem Grund und über Fotos trägt dieselbe Zeile den hellen Ton. */
.block--dunkel .augenbraue,
.seitenkopf .augenbraue,
.bildband__text .augenbraue {
  color: var(--gruen-hell);
}

/* --- Trenner (die abgerundeten Dreiecke der Marke) ---------------------- */

.trenner {
  display: block;
  width: 100%;
  height: clamp(32px, 4.2vw, 64px);
  margin: 0;
  line-height: 0;
}

.trenner svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Kante gegen ein Foto: der Trenner hat keinen eigenen Untergrund, sondern
   wird um seine volle Höhe nach oben über das Bild gezogen. Was in der Kerbe
   durchscheint, ist damit das Foto selbst — es entsteht kein Farbstreifen
   zwischen Bild und Abschnitt. Der Rang 3 hält den Trenner über dem Schleier
   der Bühne (Rang 1) und unter der Kopfzeile (Rang 100). */
.trenner--aufsteigend {
  position: relative;
  z-index: 3;
  margin-top: calc(0px - clamp(32px, 4.2vw, 64px));
  background: none;
}

/* --- Schaltflächen ------------------------------------------------------ */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.85rem 1.9rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--gruen-dunkel);
  color: #fff;
  font-family: var(--schrift-text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease,
    box-shadow 0.2s ease;
}

.knopf:hover,
.knopf:focus-visible {
  background: var(--gruen-hell);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--schatten-hoch);
}

.knopf--hell {
  background: var(--weiss);
  color: var(--gruen-dunkel);
}

.knopf--hell:hover,
.knopf--hell:focus-visible {
  background: var(--gruen-hell);
  color: #fff;
}

.knopf--rand {
  background: transparent;
  color: var(--gruen-dunkel);
  box-shadow: inset 0 0 0 2px var(--gruen-dunkel);
}

.knopf--rand:hover,
.knopf--rand:focus-visible {
  background: var(--gruen-dunkel);
  color: #fff;
  box-shadow: inset 0 0 0 2px var(--gruen-dunkel);
}

.knopf svg {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: currentColor;
}

.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  justify-content: center;
}

/* --- Kopfbereich -------------------------------------------------------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linie);
}

.kopf__innen {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: var(--kopfhoehe);
}

.kopf__marke {
  flex: none;
  margin-right: auto;
  text-decoration: none;
}

/* --- Die Marke ------------------------------------------------------------
   Die Primärfassung des Logo-Pakets, gestapelt: Zeichen oben, darunter der
   Name, darunter zweizeilig der Zusatz. Alle Maßverhältnisse stammen direkt
   aus `mertini-logo-primaer-hell.svg` (Blatt 800 × 520):

     Zeichen 114,2 hoch · Name 42 · Zusatz 14
     → Zeichen = 2,72fache Namensgröße, Zusatz = ein Drittel davon
     Sperrung 2,5/42 = 0,06em und 3,4/14 = 0,243em
     Zeilenabstand des Zusatzes 24/14 = 1,71

   Übernommen ist also die Marke selbst; gestrafft ist nur der Weißraum um sie
   herum. Die Vorlage ist ein Blatt mit Karte und Schutzraum — dort liegen
   zwischen Zeichen und Name gut 50 Einheiten Luft. Eine Kopfzeile ist eine
   Leiste; würde sie diesen Schutzraum mittragen, bliebe für die Schrift nichts
   übrig. Gebaut aus Inline-SVG und echtem Text statt als Bilddatei, damit
   alles scharf bleibt und der Zusatz auch bei sechs Pixeln noch trägt. */
.marke,
.kopf__marke {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  /* Nur senkrecht auf null: die Fußmarke ist ein Absatz und bringt den
     Standard-Absatzabstand mit. Ein volles `margin: 0` stünde hier nach dem
     `margin-right: auto` der Kopfmarke (weiter oben, gleiche Spezifität) und
     nähme es ihr wieder weg — dann rückten Navigation und Zeichenreihe
     unmittelbar an die Marke heran und die ganze Kopfzeile klebte links. */
  margin-block: 0;
  text-align: center;
}

.marke__bogen {
  height: 49px;
  width: auto;
  flex: none;
}

.marke__bogen .bogen__aussen {
  stroke: var(--logo-mittelgruen);
}

.marke__bogen .bogen__innen {
  stroke: var(--logo-hellgruen);
}

.marke__schrift {
  display: flex;
  flex-direction: column;
  font-family: var(--schrift-marke);
  text-transform: uppercase;
  line-height: 1;
}

/* Sperrung setzt den Abstand auch hinter das letzte Zeichen. Bei zentriertem
   Satz zieht dieser Nachlauf die sichtbare Schrift um seine halbe Breite nach
   links; der gleich große Innenabstand links rückt die Achse wieder gerade. */
.marke__name {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding-left: 0.06em;
  color: var(--logo-schrift);
}

.marke__zusatz {
  font-size: 6px;
  font-weight: 400;
  letter-spacing: 0.243em;
  padding-left: 0.243em;
  line-height: 1.71;
  color: var(--logo-schrift-leise);
  margin-top: 5px;
}

/* Die beiden Zusatzzeilen stehen als eigene Elemente untereinander — so sitzt
   der Umbruch wie im Logo und nicht dort, wo der Platz gerade endet. */
.marke__zusatz span {
  display: block;
  white-space: nowrap;
}

/* Auf dunklem Grund steht das Zeichen einfarbig in Papierweiß — so liefert es
   das Paket für dunkle Untergründe. Das Mittelgrün der zweifarbigen Fassung
   läge zu dicht am Dunkelgrün des Fußes und liefe darin unter. */
.marke--hell .bogen__aussen,
.marke--hell .bogen__innen {
  stroke: var(--logo-papier);
}

.marke--hell .marke__name {
  color: var(--logo-papier);
}

.marke--hell .marke__zusatz {
  color: var(--logo-hellgruen);
}

.navigation {
  display: flex;
  align-items: center;
  gap: 1.9rem;
}

.navigation a {
  position: relative;
  font-weight: 600;
  font-size: 1rem;
  color: var(--gruen-dunkel);
  text-decoration: none;
  padding: 0.35rem 0;
}

.navigation a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--gruen-hell);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s ease;
}

.navigation a:hover::after,
.navigation a:focus-visible::after,
.navigation a[aria-current="page"]::after {
  transform: scaleX(1);
}

.kopf__aktion {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex: none;
}

.kopf__tel {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: var(--gruen-dunkel);
  text-decoration: none;
  white-space: nowrap;
}

.kopf__tel svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: var(--gruen-hell);
  flex: none;
}

.kopf__tel:hover {
  color: var(--gruen-hell);
}

/* Mail, WhatsApp und Instagram als runde Zeichen neben der Nummer. Die
   Hausfarbe bleibt im Ruhezustand; erst beim Berühren zeigt sich die Farbe des
   jeweiligen Dienstes — so bleibt die Kopfzeile ruhig und trotzdem
   wiedererkennbar. Die Mailadresse ist unsere eigene, deshalb bleibt sie auch
   beim Berühren im Grün des Hauses. */
.kopf__sozial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(40, 80, 65, 0.08);
  color: var(--gruen-dunkel);
  flex: none;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.kopf__sozial svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: currentColor;
}

.kopf__sozial:hover,
.kopf__sozial:focus-visible {
  color: #fff;
  transform: translateY(-2px);
}

.kopf__sozial--whatsapp:hover,
.kopf__sozial--whatsapp:focus-visible {
  background: #25d366;
}

.kopf__sozial--mail:hover,
.kopf__sozial--mail:focus-visible {
  background: var(--gruen-hell);
}

.kopf__sozial--instagram:hover,
.kopf__sozial--instagram:focus-visible {
  background: linear-gradient(45deg, #f9ce34, #ee2a7b 55%, #6228d7);
}

.menuknopf {
  display: none;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--gruen-dunkel);
  cursor: pointer;
  position: relative;
  flex: none;
}

.menuknopf span,
.menuknopf span::before,
.menuknopf span::after {
  position: absolute;
  left: 50%;
  width: 22px;
  height: 2px;
  margin-left: -11px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.menuknopf span {
  top: 50%;
  margin-top: -1px;
}

.menuknopf span::before {
  content: "";
  top: -7px;
  left: 0;
  margin-left: 0;
}

.menuknopf span::after {
  content: "";
  top: 7px;
  left: 0;
  margin-left: 0;
}

.menuknopf[aria-expanded="true"] span {
  background: transparent;
}

.menuknopf[aria-expanded="true"] span::before {
  transform: translateY(7px) rotate(45deg);
}

.menuknopf[aria-expanded="true"] span::after {
  transform: translateY(-7px) rotate(-45deg);
}

/* --- Startbild ---------------------------------------------------------- */

.buehne {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(78vh, 660px);
  padding: clamp(4rem, 10vw, 7rem) 0;
  overflow: hidden;
  background: var(--gruen-dunkel);
  text-align: center;
}

.buehne__medium {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.buehne::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(20, 44, 34, 0.62) 0%,
    rgba(20, 44, 34, 0.44) 45%,
    rgba(20, 44, 34, 0.72) 100%
  );
  z-index: 1;
}

.buehne__inhalt {
  position: relative;
  z-index: 2;
  max-width: 900px;
}

.buehne h1 {
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
  margin-bottom: 0.45em;
}

/* Auf der Originalseite steht genau diese Zeile unter der Überschrift in
   Yeseva One, weiß, rund 24 Pixel. */
.buehne__unterzeile {
  font-family: var(--schrift-akzent);
  font-size: clamp(1.1rem, 1.9vw, 1.5rem);
  line-height: 1.45;
  color: #fff;
  max-width: 30ch;
  margin: 0 auto 2rem;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

/* Kopfbereich der Unterseiten */
.seitenkopf {
  position: relative;
  padding: clamp(3rem, 7vw, 5rem) 0 clamp(2.5rem, 5vw, 3.5rem);
  background: var(--gruen-dunkel);
  color: #e9efe9;
  text-align: center;
}

.seitenkopf h1 {
  color: #fff;
  margin-bottom: 0.35em;
}

.seitenkopf p {
  max-width: 640px;
  margin-inline: auto;
  color: #cfdccd;
}

/* --- Textspalten -------------------------------------------------------- */

.zweispalt {
  display: grid;
  /* min() statt einer nackten Mindestbreite: sonst besteht die Spalte auch
     dann auf ihren 320 px, wenn das Gerät nur 280 hergibt — und die Zeile
     ragt rechts aus dem Bild. Gilt genauso für alle Raster weiter unten. */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.zweispalt--umgekehrt .zweispalt__bild {
  order: 2;
}

.zweispalt__bild img {
  width: 100%;
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten-hoch);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* --- Bildband ----------------------------------------------------------- */

/* Ein Motiv über die volle Breite, das eine lange Seite auflockert. Der
   Farbverlauf darüber ist nicht Dekoration, sondern sorgt dafür, dass die
   Schrift auf jedem Bildausschnitt lesbar bleibt. */
.bildband {
  position: relative;
  min-height: clamp(260px, 34vw, 420px);
  display: grid;
  align-items: end;
  overflow: hidden;
}

.bildband img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bildband::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(35, 49, 43, 0.82) 0%,
    rgba(35, 49, 43, 0.45) 45%,
    rgba(35, 49, 43, 0.05) 100%
  );
}

.bildband__text {
  position: relative;
  z-index: 1;
  padding: clamp(1.6rem, 4vw, 2.8rem) 0;
  color: #fff;
}

.bildband__text h2 {
  color: var(--weiss);
  margin: 0;
}

.bildband__text p {
  max-width: 44ch;
  margin: 0.4em 0 0;
  color: #e9efe9;
}

.fliesstext > p + p {
  margin-top: 0;
}

/* --- Leistungen: Kartenraster ------------------------------------------ */

/* Sprungleiste über dem Kartenraster — ein Blick, alle neun Leistungen. */
.leistungsanker {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin-bottom: clamp(2.2rem, 4vw, 3.2rem);
}

.leistungsanker a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--weiss);
  color: var(--gruen-dunkel);
  font-size: 0.94rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease,
    border-color 0.2s ease;
}

.leistungsanker a:hover,
.leistungsanker a:focus-visible {
  background: var(--gruen-dunkel);
  border-color: var(--gruen-dunkel);
  color: #fff;
}

.leistungsanker svg {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.leistungsraster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr));
  gap: 1.6rem;
}

.leistung {
  display: flex;
  flex-direction: column;
  padding: 2.1rem 1.9rem;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten);
  transition: transform 0.25s ease, box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.leistung:hover {
  transform: translateY(-6px);
  box-shadow: var(--schatten-hoch);
  border-color: var(--gruen-hell);
}

.leistung__symbol {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin-bottom: 1.3rem;
  border-radius: 50%;
  background: var(--creme);
  color: var(--gruen-dunkel);
  flex: none;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.leistung:hover .leistung__symbol {
  background: var(--gruen-dunkel);
  color: #fff;
}

.leistung__symbol svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.leistung h2,
.leistung h3 {
  margin-bottom: 0.5rem;
  font-size: clamp(1.3rem, 2.2vw, 1.55rem);
}

/* Der Untertitel der Karte, z. B. „Für einen stets gepflegten Garten“. */
.leistung__zusatz {
  margin: -0.25rem 0 0.9rem;
  font-size: 0.86rem !important;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gruen-hell) !important;
}

/* Die Karten sind Sprungziele aus Fußbereich und Ankerleiste. */
.leistung[id] {
  scroll-margin-top: 6.5rem;
}

.leistung[id]:target {
  border-color: var(--gruen-dunkel);
  box-shadow: var(--schatten-hoch);
}

.leistung p {
  color: var(--text-leise);
  font-size: 1rem;
  margin-bottom: 0.9rem;
}

.leistung ul {
  margin: 0 0 0.9rem;
  padding: 0;
  list-style: none;
}

.leistung li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.35rem;
  color: var(--text-leise);
  font-size: 1rem;
}

.leistung li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gruen-hell);
}

.leistung__schluss {
  margin-top: auto;
  padding-top: 0.5rem;
  font-weight: 600;
  color: var(--gruen-dunkel);
  font-size: 0.98rem;
}

/* --- Projekte ----------------------------------------------------------- */

.projektraster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 1.4rem;
}

.projekt {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten);
  background: var(--gruen-dunkel);
}

.projekt img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.5s ease, opacity 0.3s ease;
}

.projekt:hover img {
  transform: scale(1.06);
  opacity: 0.82;
}

.projekt figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2.4rem 1.3rem 1.1rem;
  background: linear-gradient(
    180deg,
    rgba(20, 44, 34, 0) 0%,
    rgba(20, 44, 34, 0.85) 100%
  );
  color: #fff;
  font-family: var(--schrift-titel);
  font-size: 1.2rem;
}

.projekt--gross {
  grid-column: span 2;
}

/* --- Zahlen ------------------------------------------------------------- */

.zahlenreihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 2rem 1.5rem;
  text-align: center;
}

.zahl__wert {
  display: block;
  font-family: var(--schrift-akzent);
  font-size: clamp(2.6rem, 6vw, 3.9rem);
  line-height: 1;
  color: var(--gruen-dunkel);
  margin-bottom: 0.4rem;
}

.block--dunkel .zahl__wert {
  color: var(--gruen-hell);
}

.zahl__text {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-leise);
}

.block--dunkel .zahl__text {
  color: #c3d3c2;
}

/* --- Kontakt ------------------------------------------------------------ */

.kontaktgitter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr));
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}

.kontaktliste {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
}

.kontaktliste li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.4rem;
}

.kontaktliste svg {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  margin-top: 0.25rem;
  fill: var(--gruen-hell);
}

.kontaktliste a {
  font-weight: 600;
  text-decoration: none;
}

.kontaktliste a:hover {
  text-decoration: underline;
}

.kontaktliste strong {
  display: block;
  font-family: var(--schrift-text);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-leise);
  margin-bottom: 0.1rem;
}

/* --- Formular ----------------------------------------------------------- */

.formular {
  padding: clamp(1.8rem, 4vw, 2.6rem);
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten);
}

.feld {
  margin-bottom: 1.25rem;
}

.feld label {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--gruen-dunkel);
}

.feld .pflicht {
  color: #b3402f;
}

.feld__leise {
  font-size: 0.86rem;
  font-weight: 400;
  color: var(--text-leise);
}

.feld input,
.feld textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--creme);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  transition: border-color 0.2s ease, background-color 0.2s ease,
    box-shadow 0.2s ease;
}

.feld textarea {
  min-height: 165px;
  resize: vertical;
}

.feld input:focus,
.feld textarea:focus {
  outline: none;
  background: var(--weiss);
  border-color: var(--gruen-hell);
  box-shadow: 0 0 0 3px rgba(151, 184, 143, 0.3);
}

.feld input:user-invalid,
.feld textarea:user-invalid {
  border-color: #b3402f;
}

.feld--zustimmung {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.6rem;
}

.feld--zustimmung input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.3rem;
  flex: none;
  accent-color: var(--gruen-dunkel);
}

.feld--zustimmung label {
  margin: 0;
  font-weight: 400;
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--text-leise);
}

/* Honigtopf — für Menschen unsichtbar, für Bots verlockend */
.honigtopf {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.hinweis {
  padding: 1rem 1.2rem;
  margin-bottom: 1.5rem;
  border-radius: var(--radius);
  border-left: 4px solid;
  font-size: 0.97rem;
}

.hinweis--fehler {
  background: #fdf1ef;
  border-color: #b3402f;
  color: #8a2f22;
}

.hinweis--erfolg {
  background: #eef5ec;
  border-color: var(--gruen-hell);
  color: #2c5340;
}

.hinweis ul {
  margin: 0.5rem 0 0;
  padding-left: 1.2rem;
}

/* --- Vorher/Nachher-Schieber -------------------------------------------- */

.vergleichsraster {
  display: grid;
  /* Das min() ist kein Zierrat: ohne es besteht die Spalte auch auf einem
     320 px schmalen Gerät auf ihren 400 px und schiebt die ganze Seite über
     den rechten Rand hinaus. */
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: 2rem;
}

.vergleich {
  --pos: 50%;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten-hoch);
  background: var(--gruen-dunkel);
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  cursor: ew-resize;
}

.vergleich img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* Die Nachher-Aufnahme wird links von der Griffleiste abgeschnitten. */
.vergleich__nachher {
  clip-path: inset(0 0 0 var(--pos));
}

.vergleich__marke {
  position: absolute;
  bottom: 1rem;
  z-index: 3;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background: rgba(20, 44, 34, 0.78);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.vergleich__marke--vorher {
  left: 1rem;
}

.vergleich__marke--nachher {
  right: 1rem;
}

/* Griffleiste: sitzt genau auf der Schnittkante. */
.vergleich__griff {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  z-index: 4;
  width: 4px;
  margin-left: -2px;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
  cursor: ew-resize;
  touch-action: none;
}

.vergleich__griff::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52px;
  height: 52px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #fff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23285041'%3E%3Cpath d='M9.2 6.3 3.5 12l5.7 5.7 1.4-1.4L7.3 13h9.4l-3.3 3.3 1.4 1.4L20.5 12l-5.7-5.7-1.4 1.4L16.7 11H7.3l3.3-3.3z'/%3E%3C/svg%3E")
    center / 26px 26px no-repeat;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  transition: transform 0.18s ease;
}

.vergleich__griff:hover::after {
  transform: translate(-50%, -50%) scale(1.08);
}

.vergleich__griff:focus-visible {
  outline: none;
}

.vergleich__griff:focus-visible::after {
  box-shadow: 0 0 0 4px var(--gruen-hell), 0 4px 14px rgba(0, 0, 0, 0.3);
}

.vergleich__titel {
  margin: 0.9rem 0 0;
  font-family: var(--schrift-titel);
  font-size: 1.2rem;
  color: var(--gruen-dunkel);
}

.vergleich__ort {
  margin: 0.15rem 0 0;
  font-size: 0.95rem;
  color: var(--text-leise);
}

.block--dunkel .vergleich__titel {
  color: #fff;
}

.block--dunkel .vergleich__ort {
  color: #c3d3c2;
}

/* --- Leuchtkasten für die Galerie --------------------------------------- */

.leuchtkasten {
  position: fixed;
  inset: 0;
  z-index: 300;
  padding: 1.5rem;
  border: 0;
  background: rgba(15, 32, 25, 0.94);
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
}

/* "display" gehört zwingend hinter das [open] und darf nicht in der Regel
   darüber stehen. Ein geschlossenes <dialog> blendet der Browser über seine
   eigene Vorgabe "display: none" aus — ein "display: grid" ohne [open]
   überschreibt genau diese Vorgabe. Die Fläche liegt dann bildschirmfüllend
   und fast deckend über der Seite und schluckt jeden Klick. */
.leuchtkasten[open] {
  display: grid;
  place-items: center;
}

.leuchtkasten::backdrop {
  background: rgba(15, 32, 25, 0.94);
}

.leuchtkasten img {
  max-width: min(100%, 1400px);
  max-height: 82vh;
  width: auto;
  border-radius: var(--radius-gross);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.leuchtkasten__text {
  margin-top: 1rem;
  color: #e6efe5;
  text-align: center;
  font-size: 0.98rem;
}

.leuchtkasten__zu {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.leuchtkasten__zu:hover {
  background: var(--gruen-hell);
}

.projekt__knopf {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  font: inherit;
  color: inherit;
  text-align: left;
}

/* --- Fußbereich --------------------------------------------------------- */

.fuss {
  background: var(--gruen-dunkel);
  color: #cbd9c9;
  padding: clamp(3rem, 6vw, 4.5rem) 0 0;
  font-size: 0.98rem;
}

.fuss__gitter {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
}

.fuss h2 {
  font-family: var(--schrift-text);
  font-size: 0.83rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gruen-hell);
  margin-bottom: 1.2rem;
}

/* Im Fuß steht dieselbe Marke, nur hell und rund ein Siebtel größer: Hier
   begrenzt keine Kopfzeilenhöhe, und die erste Fußspalte ist rund 339 Punkte
   breit — gestapelt braucht die Marke davon nur etwa 120. `width: max-content`
   hält sie auf dieser Breite, sonst zöge sie die halbe Spalte auf und stünde
   mittig über dem linksbündigen Text darunter. Der Abstand zur Kopfmarke
   bleibt derselbe wie vorher, nur beide eine Stufe kleiner. */
.fuss__marke .marke {
  width: max-content;
  gap: 6px;
  margin-bottom: 1.4rem;
}

.fuss__marke .marke__bogen {
  height: 56px;
}

.fuss__marke .marke__name {
  font-size: 21px;
}

.fuss__marke .marke__zusatz {
  font-size: 7px;
  margin-top: 6px;
}

.fuss ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fuss li {
  margin-bottom: 0.6rem;
}

.fuss a {
  color: #cbd9c9;
  text-decoration: none;
}

.fuss a:hover {
  color: #fff;
  text-decoration: underline;
}

.fuss__kontakt li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.fuss__kontakt svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: var(--gruen-hell);
  flex: none;
}

.sozial {
  display: flex;
  gap: 0.7rem;
  margin-top: 1.3rem;
}

.sozial a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  transition: background-color 0.22s ease, transform 0.22s ease;
}

.sozial a:hover {
  background: var(--gruen-hell);
  transform: translateY(-3px);
}

.sozial svg {
  width: 21px;
  height: 21px;
  fill: currentColor;
}

.fuss__unten {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding: 1.4rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  justify-content: space-between;
  font-size: 0.9rem;
  color: #a8bda7;
}

/* Der Macher-Hinweis ist die dritte und letzte Angabe der Zeile und soll den
   beiden davor — Rechtsstand und Pflichtlinks — nicht die Aufmerksamkeit
   nehmen: eine Stufe kleiner und blasser, nur der Name selbst trägt die
   Fußfarbe und wird beim Überfahren hell wie jeder andere Fußlink. */
.fuss__macher {
  font-size: 0.84rem;
  color: #8ba48a;
}

.fuss__macher a {
  color: #a8bda7;
}

/* --- Rechtstexte -------------------------------------------------------- */

.rechtstext h2 {
  margin-top: 2.6rem;
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
}

.rechtstext h3 {
  margin-top: 1.9rem;
  font-size: 1.18rem;
}

.rechtstext h2:first-child {
  margin-top: 0;
}

.rechtstext ul,
.rechtstext ol {
  margin: 0 0 1.2em;
  padding-left: 1.4rem;
}

.rechtstext li {
  margin-bottom: 0.45rem;
}

/* Drei Spalten mit ganzen Sätzen darin brauchen rund 420 px — mehr, als ein
   Handy breit ist. Statt die ganze Seite seitwärts zu schieben, rollt hier nur
   die Tabelle. tabindex sorgt dafür, dass das auch mit der Tastatur geht; ohne
   ihn käme man an den rechten Teil der Tabelle sonst nicht heran. */
.tabellenrolle {
  overflow-x: auto;
  margin: 0 0 1.4em;
  -webkit-overflow-scrolling: touch;
}

.tabellenrolle:focus-visible {
  outline: 3px solid var(--gruen-dunkel);
  outline-offset: 3px;
}

.rechtstext table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.4em;
  font-size: 0.96rem;
}

/* In der Rollfläche trägt der Abstand der Fläche selbst. */
.tabellenrolle table {
  margin-bottom: 0;
}

.rechtstext th,
.rechtstext td {
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--linie);
  text-align: left;
  vertical-align: top;
}

.rechtstext th {
  background: var(--creme);
  font-weight: 700;
  color: var(--gruen-dunkel);
}

.rechtstext .stand {
  color: var(--text-leise);
  font-size: 0.93rem;
  font-style: italic;
}

.kasten {
  padding: 1.4rem 1.6rem;
  margin: 0 0 1.6em;
  background: var(--creme);
  border-left: 4px solid var(--gruen-hell);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.kasten p:last-child {
  margin-bottom: 0;
}

/* --- Handy und Tablet --------------------------------------------------- */

@media (max-width: 980px) {
  .fuss__gitter {
    grid-template-columns: 1fr 1fr;
    gap: 2.2rem;
  }
  .projekt--gross {
    grid-column: span 1;
  }

  /* Nachgerechnet an der breitesten Ausbaustufe der Kopfzeile: 2×20 Rand +
     Marke 114 + 24 + Navigation 350 + 24 + Aktionsreihe 311 = 863 Punkte. Bis
     861 hinunter steht die Navigation offen in der Zeile — das wären zwei
     Punkte zu wenig. Also rücken die drei Blöcke und die Navigationspunkte
     zusammen; damit reichen 809. Mehr braucht es nicht: Seit die Marke ihre
     Teile übereinander stellt, ist sie 208 Punkte schmaler als vorher, und der
     Engpass, der die Seite hier früher über den Rand schob, ist weg. */
  .kopf__innen {
    gap: 1rem;
  }

  .navigation {
    gap: 1.3rem;
  }
}

@media (max-width: 860px) {
  /* Auf dem Handy wechselt die Marke in die Querfassung des Logo-Pakets
     (`mertini-logo-quer-hell.svg`): Zeichen links, Schriftzug rechts daneben.
     Das ist keine Notlösung, sondern die zweite offizielle Fassung — genau für
     Stellen gedacht, an denen breit mehr Platz ist als hoch. Und das ist eine
     Kopfzeile auf dem Handy: Sie ist so breit wie das Gerät, aber jeder Punkt
     Höhe geht dem Bild darunter verloren. Gestapelt bräuchte sie gut 100
     Punkte, quer nur 72.

     Maße aus der Querfassung (Blatt 640 × 160): Zeichen 60,9 hoch · Name 30 ·
     Zusatz 11 → Zeichen = 2,03fache Namensgröße, Zusatz 0,367 davon, Sperrung
     1,8/30 = 0,06em und 2,4/11 = 0,218em. Das Zeichen steht dort also
     verhältnismäßig kleiner als in der gestapelten Fassung, der Zusatz
     größer — beides ist so gewollt und wird hier übernommen.

     Einzig der Zusatz bricht um statt in einer Zeile zu laufen: ausgeschrieben
     wäre er zweieinhalbmal so breit wie „MERTINI“ und schöbe die Marke über
     den halben Bildschirm. Umgebrochen sitzt er unter dem Namen, wie in der
     gestapelten Fassung auch. */
  :root {
    --kopfhoehe: 72px;
  }

  .kopf__marke {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  .kopf__marke .marke__schrift {
    align-items: flex-start;
    text-align: left;
  }

  .kopf__marke .marke__bogen {
    height: 40px;
  }

  .kopf__marke .marke__name {
    font-size: 20px;
  }

  .kopf__marke .marke__zusatz {
    font-size: 7.3px;
    letter-spacing: 0.218em;
    padding-left: 0;
    line-height: 1.3;
    margin-top: 4px;
  }

  .menuknopf {
    display: block;
  }

  .navigation {
    position: fixed;
    inset: var(--kopfhoehe) 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1rem 1.25rem 1.8rem;
    background: var(--weiss);
    border-bottom: 1px solid var(--linie);
    box-shadow: var(--schatten-hoch);
    transform: translateY(-130%);
    transition: transform 0.3s ease;
    max-height: calc(100vh - var(--kopfhoehe));
    overflow-y: auto;
  }

  .navigation[data-offen="true"] {
    transform: translateY(0);
  }

  .navigation a {
    padding: 0.95rem 0.2rem;
    border-bottom: 1px solid var(--linie);
    font-size: 1.1rem;
  }

  .navigation a::after {
    display: none;
  }

  .navigation a[aria-current="page"] {
    color: var(--gruen-hell);
  }

  .zweispalt--umgekehrt .zweispalt__bild {
    order: 0;
  }
}

@media (max-width: 620px) {
  body {
    font-size: 1rem;
  }
  /* Für die ausgeschriebene Nummer ist hier kein Platz mehr — dann steht das
     Telefon als weiteres Symbol in der Reihe und bekommt dieselbe runde Form
     wie die anderen, sonst tanzt es aus der Zeile. Anrufen lässt sich damit
     genauso, nur eben mit einem Zeichen statt mit der Nummer. */
  .kopf__aktion {
    gap: 0.4rem;
  }
  .kopf__tel span {
    display: none;
  }
  .kopf__tel,
  .kopf__sozial {
    width: 2.3rem;
    height: 2.3rem;
    gap: 0;
    justify-content: center;
    border-radius: 50%;
    background: rgba(40, 80, 65, 0.08);
  }
  .kopf__tel svg,
  .kopf__sozial svg {
    width: 1.2rem;
    height: 1.2rem;
    fill: currentColor;
  }
  .fuss__gitter {
    grid-template-columns: 1fr;
  }
  .fuss__unten {
    justify-content: flex-start;
  }
  .knopfreihe {
    flex-direction: column;
  }
  .knopfreihe .knopf {
    width: 100%;
  }
}

/* Vier Zeichen, ein Menüknopf und die Marke — auf schmalen Geräten wird das
   zur Millimeterarbeit. Nachgerechnet für 360 Punkte, das schmalste heute noch
   verbreitete Android: 40 Rand + 8,8 Abstand + 38 Menüknopf + 131 Zeichenreihe
   lassen der Marke 139 Punkte. Quer braucht sie bei 30 Punkten Zeichenhöhe
   rund 133 — es passt, aber ohne Spielraum, deshalb rückt die Zeichenreihe
   hier schon eine Stufe zusammen statt erst bei 430. */
@media (max-width: 480px) {
  .kopf__innen {
    gap: 0.55rem;
  }
  .kopf__aktion {
    gap: 0.2rem;
  }
  .kopf__tel,
  .kopf__sozial {
    width: 1.9rem;
    height: 1.9rem;
  }
  .kopf__tel svg,
  .kopf__sozial svg {
    width: 1rem;
    height: 1rem;
  }
  .menuknopf {
    width: 38px;
    height: 38px;
  }
  :root {
    --kopfhoehe: 64px;
  }
  .kopf__marke {
    gap: 9px;
  }
  .kopf__marke .marke__bogen {
    height: 30px;
  }
  .kopf__marke .marke__name {
    font-size: 14.8px;
  }
  .kopf__marke .marke__zusatz {
    font-size: 5.4px;
    margin-top: 3px;
  }
}

/* Unter 360 Punkten (die alten 320er) reicht es auch quer nicht mehr: Der
   Marke blieben dort nur noch 99 Punkte, und so klein wäre der Name nicht mehr
   zu lesen. Deshalb geht sie hier zurück in die gestapelte Fassung — die ist
   nur so breit wie ihre längste Zeile und kommt mit 65 Punkten aus. Die
   Kopfzeile wird dadurch wieder höher; auf einem Gerät dieser Breite ist ein
   lesbarer Name das wichtigere von beidem. */
@media (max-width: 359px) {
  :root {
    --kopfhoehe: 88px;
  }
  .kopf__marke {
    flex-direction: column;
    gap: 3px;
  }
  .kopf__marke .marke__schrift {
    align-items: center;
    text-align: center;
  }
  .kopf__marke .marke__bogen {
    height: 38px;
  }
  .kopf__marke .marke__name {
    font-size: 14px;
  }
  .kopf__marke .marke__zusatz {
    font-size: 4.67px;
    letter-spacing: 0.243em;
    padding-left: 0.243em;
    line-height: 1.71;
    margin-top: 3px;
  }

  /* Nur hier unten braucht der Firmenname drei Zeilen, und der normale Umbruch
     lässt dabei ein einsames „und" in der Mitte stehen. `balance` verteilt die
     Wörter gleichmäßig und macht daraus „Mertini / Garten- und /
     Landschaftsbau". Bewusst nur unter 360 Punkten: ab da bricht die Zeile
     zweimal, und dort gäbe `balance` das schlechtere Ergebnis („Garten-“ mit
     Bindestrich allein am Zeilenende statt „Garten- und“). Browser ohne
     `text-wrap` ignorieren die Zeile und bleiben beim heutigen Umbruch. */
  .buehne h1 {
    text-wrap: balance;
  }
}

/* --- Aufbau beim Scrollen ------------------------------------------------
   Abschnitte, Kacheln und Knöpfe kommen von unten herein, sobald sie ins Bild
   rutschen. Die Klasse .einblenden setzt erst das Skript — ohne JavaScript
   steht also alles ganz normal da, es kann nichts unsichtbar hängen bleiben.
   Sichtbar Gewordenes räumt das Skript wieder auf, damit die eigenen
   Übergänge der Kacheln (etwa .leistung:hover) danach unberührt laufen. */

.einblenden {
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 0.7, 0.3, 1);
  transition-delay: var(--verzug, 0ms);
  will-change: opacity, transform;
}

.einblenden:not(.sichtbar) {
  opacity: 0;
  transform: translateY(26px);
}

/* --- Einwilligung in die Reichweitenmessung ----------------------------- */

/* Ein Fenster in der Bildschirmmitte, davor die Seite abgedunkelt. Es liegt
   über allem (Kopfzeile: 200, Leuchtkasten: 300).

   `.zustimmung` ist der Schleier UND das Fenster zugleich: der dunkle Grund
   ist der Hintergrund dieses Elements, die weiße Karte liegt als Kind darin.
   Das ist Absicht und die Lehre aus dem 15.08. — waren beide getrennt, konnte
   der Schleier ohne bedienbares Fenster stehen bleiben. Ein Element, das
   entweder ganz da ist oder ganz weg. */
.zustimmung {
  position: fixed;
  z-index: 400;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(18, 34, 28, 0.62);
  animation: zustimmung-grund 0.3s ease both;
}

.zustimmung[hidden] {
  display: none;
}

/* Solange das Fenster offensteht, bleibt die Seite dahinter stehen. Die
   Sperre hängt unmittelbar am Fenster selbst — sie kann also nicht
   zurückbleiben, wenn das Fenster verschwindet. Browser ohne `:has()`
   scrollen weiter; das ist unschön, aber harmlos. */
html:has(.zustimmung:not([hidden])) {
  overflow: hidden;
}

.zustimmung__karte {
  position: relative;
  width: min(36rem, 100%);
  max-height: calc(100vh - 2.5rem);
  max-height: calc(100dvh - 2.5rem);
  display: flex;
  flex-direction: column;
  padding: 1.9rem 1.9rem 1.5rem;
  border-radius: 12px;
  background: var(--weiss);
  box-shadow: 0 24px 60px rgba(18, 34, 28, 0.34);
  animation: zustimmung-auf 0.35s cubic-bezier(0.16, 0.84, 0.44, 1) both;
}

@keyframes zustimmung-grund {
  from { opacity: 0; }
}

@keyframes zustimmung-auf {
  from {
    opacity: 0;
    transform: translateY(1rem) scale(0.98);
  }
}

@media (prefers-reduced-motion: reduce) {
  .zustimmung,
  .zustimmung__karte {
    animation: none;
  }
}

/* Das Kreuz oben rechts. Es entscheidet mit — nämlich „nur essenziell“ —,
   deshalb ist es eine Schaltfläche und kein bloßes Wegklicken. */
.zustimmung__zu {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-leise);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.zustimmung__zu svg {
  width: 1.05rem;
  height: 1.05rem;
}
.zustimmung__zu:hover,
.zustimmung__zu:focus-visible {
  background: var(--creme);
  color: var(--gruen-dunkel);
}

.zustimmung__kopf {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0 2rem 1rem 0;
}

.zustimmung__zeichen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--gruen-dunkel);
  color: var(--creme);
  flex: none;
}

.zustimmung__zeichen svg {
  width: 1.4rem;
  height: 1.4rem;
}

.zustimmung h2 {
  margin: 0;
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
}

/* Der Rollbereich — und zwar genau einer. Text, Kategorien und die
   aufgeklappten Einzelheiten rollen gemeinsam; Kopf, Schaltflächen und
   Fußzeile bleiben stehen.

   Drei getrennte Rollbereiche wären hier falsch: sie schneiden auf schmalen
   Geräten mitten durch eine Kategorie und stellen drei Rollbalken
   untereinander. `min-height: 0` ist nötig, damit dieser Bereich in der
   Flex-Spalte überhaupt schrumpfen darf — ohne die Angabe wächst die Karte
   über den Bildschirmrand hinaus. */
.zustimmung__rollen {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 0.5rem;
}
.zustimmung__kopf,
.zustimmung__knoepfe,
.zustimmung__fuss {
  flex: none;
}

/* Die Karte bekommt beim Öffnen den Fokus, damit Tastatur und Vorleseprogramm
   im Fenster landen. Sie ist aber kein Bedienelement — ein Rahmen um die
   ganze Karte wäre nur Zierrat. Erreichbar ist sie ohnehin nur so. */
.zustimmung__karte:focus {
  outline: none;
}

.zustimmung p {
  margin: 0 0 0.8rem;
  color: var(--text-leise);
  font-size: 0.86rem;
  line-height: 1.6;
}
.zustimmung p:last-child {
  margin-bottom: 0;
}

.zustimmung__gruppen {
  margin: 1.1rem 0 0;
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--linie);
}

/* Kästchen links, Titel und Erklärung rechts daneben. Das Kästchen sitzt
   über `align-self` auf der Höhe der ersten Zeile, nicht mittig im Block. */
.zgruppe {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-bottom: 0.9rem;
}
.zgruppe:last-child {
  margin-bottom: 0;
}

.zgruppe input[type="checkbox"] {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0.15rem 0 0;
  accent-color: var(--gruen-dunkel);
  cursor: pointer;
}
.zgruppe input[type="checkbox"]:disabled {
  cursor: default;
  opacity: 0.55;
}

.zgruppe label {
  color: var(--text-leise);
  font-size: 0.82rem;
  line-height: 1.55;
  cursor: pointer;
}
.zgruppe input[type="checkbox"]:disabled + label {
  cursor: default;
}

.zgruppe label strong {
  display: block;
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 700;
}

/* Die Einzelheiten je Cookie — nur sichtbar, wenn danach gefragt wurde. */
.zustimmung__einzeln {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--linie);
}
.zustimmung__einzeln[hidden] {
  display: none;
}
.zustimmung__einzeln h3 {
  margin: 0 0 0.5rem;
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: 0.9rem;
  font-weight: 700;
}
.zkeks__quelle {
  font-size: 0.78rem !important;
}
.zkeks {
  margin: 0 0 1rem;
}
.zkeks > div {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 0.15rem 0.7rem;
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.5rem;
  border-radius: 6px;
  background: var(--creme);
  font-size: 0.78rem;
  line-height: 1.5;
}
.zkeks dt {
  color: var(--text);
  font-weight: 700;
}
.zkeks dd {
  margin: 0;
  color: var(--text-leise);
}
.zkeks code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.95em;
}

/* Die Schaltflächen liegen gestapelt über die volle Breite — so wie im
   Vorbild. Sie tragen alle dieselbe Klasse; nur die Zustimmung oben ist
   grün abgesetzt. */
.zustimmung__knoepfe {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1.2rem;
}

.zknopf {
  width: 100%;
  padding: 0.78rem 1rem;
  border: 0;
  border-radius: 6px;
  background: #e9e7e1;
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.zknopf:hover,
.zknopf:focus-visible {
  background: var(--beige);
}

.zknopf--ja {
  background: var(--gruen-hell);
  color: #14261f;
}
.zknopf--ja:hover,
.zknopf--ja:focus-visible {
  background: var(--gruen-dunkel);
  color: var(--weiss);
}

.zustimmung__fuss {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.1rem;
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--linie);
}
.zustimmung__fuss a {
  color: var(--text-leise);
  font-size: 0.78rem;
}
.zustimmung__fuss a:hover,
.zustimmung__fuss a:focus-visible {
  color: var(--gruen-dunkel);
}

/* Auf dem Handy nutzt die Karte die volle Breite und respektiert die
   Gestenleiste unten. Der Rollbereich braucht keine eigene Höhenangabe — er
   nimmt sich, was zwischen Kopf und Schaltflächen übrig bleibt. */
@media (max-width: 640px) {
  .zustimmung {
    padding: 0.75rem;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  }
  .zustimmung__karte {
    width: 100%;
    padding: 1.5rem 1.15rem 1.15rem;
  }
  .zustimmung h2 {
    font-size: 1.12rem;
  }
  .zkeks > div {
    grid-template-columns: 5rem 1fr;
  }
}

/* Der dauerhafte Weg zurück zur Entscheidung: ein kleines Zeichen unten links,
   das die Karte wieder aufmacht. Es steht dort auch nach dem Zustimmen — eine
   Einwilligung, die man nur schwer wieder loswird, ist keine.

   Ohne Javascript bleibt es ein gewöhnlicher Verweis auf den passenden
   Abschnitt der Datenschutzerklärung, wo dasselbe zu Fuß erklärt ist. */
.keksknopf {
  position: fixed;
  z-index: 390;
  left: 1.25rem;
  bottom: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  background: var(--gruen-dunkel);
  color: var(--creme);
  box-shadow: 0 6px 20px rgba(23, 48, 39, 0.28);
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.keksknopf svg {
  width: 1.45rem;
  height: 1.45rem;
}
.keksknopf:hover,
.keksknopf:focus-visible {
  background: var(--gruen-hell);
  color: #fff;
  transform: translateY(-2px);
}
/* Solange das Fenster offensteht, wäre das Zeichen nur Doppelung — und der
   Schleier liegt ohnehin darüber. Beide sind Geschwister im Quelltext, deshalb
   genügt dafür der Nachbarschaftswähler ganz ohne Javascript. Sie müssen
   Nachbarn bleiben: schiebt jemand etwas dazwischen, greift der Wähler nicht
   mehr. */
.zustimmung:not([hidden]) + .keksknopf {
  display: none;
}
@media (max-width: 640px) {
  .keksknopf {
    left: 0.75rem;
    bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    width: 2.6rem;
    height: 2.6rem;
  }
  .keksknopf svg {
    width: 1.3rem;
    height: 1.3rem;
  }
}

/* --- Bewegung sparen ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .einblenden:not(.sichtbar) {
    opacity: 1;
    transform: none;
  }
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .projekt:hover img,
  .leistung:hover,
  .knopf:hover {
    transform: none;
  }
}

/* --- Druck -------------------------------------------------------------- */

@media print {
  .kopf,
  .fuss,
  .buehne__medium,
  .trenner,
  .menuknopf,
  .zustimmung,
  .keksknopf {
    display: none !important;
  }
  body {
    color: #000;
    font-size: 11pt;
  }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
  }
}