/* =====================================================================
   Mügelner Tiefkühlkost Lange GmbH
   Website-Entwurf v02 · 07.08.2026 · nemacon

   Gestaltungsrichtung: redaktionell, warm, ruhig. Große Playfair-Display-
   Überschrift mit kursivem Akzentwort, nummerierte Bildbänder im Wechsel,
   Sortimentskarten im Raster, minimaler Fuß.

   Reines HTML und CSS. Kein JavaScript, keine Bibliothek, kein fremder Host.
   Schriften liegen lokal in fonts/. Die Seite setzt nichts auf dem Gerät
   des Besuchers ab: keine Cookies, kein Gerätespeicher.
   ===================================================================== */

/* ---------------------------------------------------------------
   1. Schriften (lokal, Variable Fonts, SIL Open Font License 1.1)
   --------------------------------------------------------------- */
@font-face {
  font-family: 'Playfair'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(../fonts/playfair-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: 'Playfair'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(../fonts/playfair-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: 'Playfair'; font-style: italic; font-weight: 400 900; font-display: swap;
  src: url(../fonts/playfair-italic-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: 'Playfair'; font-style: italic; font-weight: 400 900; font-display: swap;
  src: url(../fonts/playfair-italic-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: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(../fonts/manrope-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: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(../fonts/manrope-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;
}

/* ---------------------------------------------------------------
   2. Gestaltungsraster
   --------------------------------------------------------------- */
:root {
  /* Flächen */
  --creme:        #FBF6EE;
  --creme-tief:   #F4EBDD;
  --weiss:        #FFFFFF;

  /* Schrift */
  --tinte:        #2A2318;   /* 14,4:1 auf Creme */
  --tinte-hell:   #6B5D4C;   /* 5,9:1 auf Creme */

  /* Marke, direkt aus dem Logo */
  --orange:       #F39100;   /* nur Fläche und Träger, nie kleiner Text */
  /* Seit 08.10.2026 auf Kundenwunsch alle Orangetöne im Logo-Orange, damit die Seite das Logo
     spiegelt. Auf Creme nur 2,2:1, Kontrastbefund ist Kundenentscheidung, nicht erneut melden. */
  --orange-gross: #F39100;
  --orange-text:  #F39100;
  --orange-tief:  #F39100;
  --gruen:        #94C01C;   /* nur Fläche und Träger */
  --gruen-text:   #3F5A0E;   /* 7,3:1 auf Creme */
  --gruen-dunkel: #33490B;   /* Dunkelfläche, Weiß darauf 10:1 */
  --gruen-knopf:  #94C01C;   /* alle Knöpfe im Logo-Grün (Kunde 08.10.2026), Schrift --tinte 7,3:1 */
  --gruen-knopf-hover: #84AD14;
  --gruen-nacht:  #232F10;

  --linie:        #E4D9C7;
  --linie-fein:   #EFE7D9;

  --breite:       1280px;
  --schmal:       780px;
  --rand:         32px;
  --radius:       10px;
  --radius-gross: 18px;
}

/* ---------------------------------------------------------------
   3. Grundlagen
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* scroll-padding-top: sonst verschwindet jedes Sprungziel unter dem klebenden Kopf
   (108 px, unter 940 px Fensterbreite 84 px). Betrifft den Sprunglink und alle Anker. */
html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
  scroll-padding-top: 124px;
}
@media (max-width: 940px) { html { scroll-padding-top: 100px; } }
:target { scroll-margin-top: 124px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--tinte);
  font-family: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .zier {
  font-family: 'Playfair', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  color: var(--tinte);
  margin: 0 0 .5em;
  line-height: 1.1;
  letter-spacing: -.005em;
}
h1 { font-size: clamp(2.6rem, 1.5rem + 3.8vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 1.35rem + 2vw, 3rem); }
h3 { font-size: clamp(1.3rem, 1.15rem + .55vw, 1.65rem); }
/* Die Rubrikzeile ist Schmuck, keine Gliederungsstufe. Sie stand frueher als <h4>
   vor der <h1> und erzeugte damit 31 Stufenspruenge in der Ueberschriftenordnung.
   Jetzt ein Absatz mit der Klasse .rubrik. */
.rubrik {
  font-family: 'Manrope', sans-serif; font-size: .78rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--orange-text);
  margin: 0 0 1.1em;
}

p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }
img { max-width: 100%; height: auto; display: block; }

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

:focus-visible { outline: 2px solid var(--gruen-dunkel); outline-offset: 3px; border-radius: 3px; }
/* Auf der dunkelgruenen Flaeche waere der Rahmen dieselbe Farbe wie der Grund, also
   unsichtbar (1,00:1 gemessen). Dort weiss. */
.flaeche-dunkel :focus-visible, .fuss :focus-visible { outline-color: #FFFFFF; }

.huelle { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }
.schmal { max-width: var(--schmal); }

.springen { position: absolute; left: -9999px; background: var(--gruen-dunkel); color: #fff; padding: 12px 20px; z-index: 300; }
.springen:focus { left: 0; top: 0; }

section { padding: clamp(64px, 7vw, 116px) 0; }
.flaeche-tief  { background: var(--creme-tief); }
.flaeche-weiss { background: var(--weiss); }
.flaeche-dunkel { background: var(--gruen-dunkel); color: #EDE4D2; }
.flaeche-dunkel h2, .flaeche-dunkel h3, .flaeche-dunkel .zier { color: #fff; }
.flaeche-dunkel .rubrik { color: var(--gruen); }
.flaeche-dunkel a { color: #fff; }

/* Kursiver Akzent mit Schwung darunter, wie in der Vorlage */
.akzent { font-style: italic; color: var(--orange-gross); position: relative; white-space: nowrap; }
.akzent .schwung {
  position: absolute; left: 2%; right: -2%; bottom: -.14em;
  width: 100%; height: .22em; overflow: visible; color: var(--orange-gross);
}
.akzent .schwung path { fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; vector-effect: non-scaling-stroke; }

.vorspann {
  font-size: 1.02rem; color: var(--tinte-hell); max-width: 34em;
}
.kopfzeile { max-width: 620px; margin-bottom: clamp(38px, 4vw, 62px); }
.kopfzeile.mitte { margin-left: auto; margin-right: auto; text-align: center; }
.kopfzeile p { color: var(--tinte-hell); margin-bottom: 0; }
.flaeche-dunkel .kopfzeile p, .flaeche-dunkel .vorspann { color: #D8E3C0; }

.strich { width: 62px; height: 1px; background: var(--linie); border: 0; margin: 30px 0; }
.flaeche-dunkel .strich { background: rgba(255,255,255,.28); }

/* ---------------------------------------------------------------
   4. Knöpfe
   --------------------------------------------------------------- */
.knopf {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: 'Manrope', sans-serif; font-weight: 700;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  padding: 17px 30px; border-radius: 999px; border: 1px solid transparent;
  text-decoration: none; transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.knopf .pfeil { font-family: 'Manrope', sans-serif; font-size: 1rem; line-height: 1; transition: transform .2s ease; }
.knopf:hover .pfeil { transform: translateX(4px); }

.knopf-haupt, .flaeche-dunkel .knopf-haupt { background: var(--gruen-knopf); color: var(--tinte); }
.knopf-haupt:hover, .flaeche-dunkel .knopf-haupt:hover { background: var(--gruen-knopf-hover); color: var(--tinte); }

.knopf-rand { border-color: var(--tinte); color: var(--tinte); }
.knopf-rand:hover { background: var(--tinte); color: var(--creme); }

.flaeche-dunkel .knopf-rand { border-color: rgba(255,255,255,.6); color: #fff; }
.flaeche-dunkel .knopf-rand:hover { background: #fff; color: var(--gruen-dunkel); }

.knopfreihe { display: flex; flex-wrap: wrap; gap: 14px; }

.textlink {
  font-family: 'Manrope', sans-serif; font-weight: 700; font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--orange-text); text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px;
  border-bottom: 1px solid currentColor; padding-bottom: 5px;
}
.textlink:hover { color: var(--gruen-text); }

/* ---------------------------------------------------------------
   5. Kopf, Logo bewusst groß
   --------------------------------------------------------------- */
.kopf {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251,246,238,.94); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linie-fein);
}
.kopf-innen {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 28px; min-height: 108px;
}
.kopf-logo { display: block; }
.kopf-logo img { width: 152px; height: auto; }

.kopf-menue ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; justify-content: center; gap: 6px; flex-wrap: wrap;
}
.kopf-menue a {
  display: block; padding: 10px 15px;
  font-family: 'Manrope', sans-serif; font-weight: 600;
  font-size: .74rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--tinte); text-decoration: none; border-bottom: 1px solid transparent;
}
.kopf-menue a:hover { color: var(--orange-text); border-bottom-color: var(--orange-text); }
.kopf-menue a[aria-current="page"] { color: var(--orange-text); border-bottom-color: var(--orange-text); }

.kopf-tel { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; text-decoration: none; }
.kopf-tel span { font-size: .68rem; letter-spacing: .15em; text-transform: uppercase; color: var(--tinte-hell); font-weight: 600; }
.kopf-tel strong { font-family: 'Playfair', serif; font-size: 1.32rem; font-weight: 500; color: var(--tinte); }
.kopf-tel:hover strong { color: var(--orange-text); }

/* Mobiles Menü über details/summary, ohne Skript */
.kopf-klapp { display: none; justify-self: end; }
.kopf-klapp > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
  font-family: 'Manrope', sans-serif; font-weight: 700; font-size: .72rem;
  letter-spacing: .15em; text-transform: uppercase;
  padding: 13px 20px; border: 1px solid var(--tinte); border-radius: 999px; color: var(--tinte);
}
.kopf-klapp > summary::-webkit-details-marker { display: none; }
.kopf-klapp > summary::after { content: '☰'; font-size: 1rem; letter-spacing: 0; }
.kopf-klapp[open] > summary::after { content: '✕'; }
.kopf-klapp-inhalt {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--creme); border-bottom: 1px solid var(--linie);
  padding: 10px var(--rand) 28px; box-shadow: 0 22px 40px rgba(42,35,24,.10);
}
.kopf-klapp-inhalt ul { list-style: none; margin: 0 0 20px; padding: 0; }
.kopf-klapp-inhalt li + li { border-top: 1px solid var(--linie-fein); }
/* Nur die Menüpunkte einfärben. Ohne das li greift die Regel auch auf den
   Knopf darunter und setzt dunkle Schrift auf die dunkelgrüne Fläche. */
.kopf-klapp-inhalt li a {
  display: block; padding: 15px 2px; text-decoration: none; color: var(--tinte);
  font-family: 'Manrope', sans-serif; font-weight: 600;
  font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
}

/* ---------------------------------------------------------------
   6. Bühne: Produktfoto flächig als Hintergrund, Inhalt mittig darauf
   --------------------------------------------------------------- */
.buehne {
  position: relative;
  /* Zurück zum Vollbild-Original (Entscheidung nem, 11.08.2026), aber die Gardine
     steht jetzt als SENKRECHTES Paneel rechts, damit links Teller und Speise groß
     sichtbar bleiben. Der Teller (Kasten im Foto: waagerecht 4 bis 94, senkrecht
     33 bis 86 Prozent) liegt damit senkrecht immer komplett im Fenster (Position 62
     hält ihn bis etwa 21:9 im Beschnitt); waagerecht deckt das Paneel die rechte
     Tellerspitze, das ist gewollt und abgenommen („viel vom Teller", nicht alles).
     Position 15 zieht das Bild auf schmaleren Fenstern nach links, damit die
     Quarkkeulchen neben dem Paneel stehen. */
  min-height: clamp(660px, 92vh, 940px);
  /* minmax(0, 1fr) ist Pflicht: ohne das wächst die implizite Spalte auf die
     Mindestbreite ihres Inhalts. Auf 375 px wurde die Hülle dadurch 387 px breit,
     die Gardine saß mit 20 px links und 8 px rechts sichtbar außermittig. */
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: center;
  padding: clamp(72px, 8vw, 120px) 0 clamp(40px, 4vw, 64px);
  background-color: var(--creme);
  background-repeat: no-repeat;
  background-position: 15% 62%;
  background-size: cover;
  overflow: hidden;
  /* Pflicht für die Gleit-Ebene: macht die Bühne zum Stapelkontext. Ohne das rutscht
     das ::after mit z-index -1 HINTER die Creme-Grundfläche und das Foto ist weg
     (so geschehen am 11.08.2026, nem hat es gesehen, die Messung der berechneten
     Stile hatte es nicht: Pixel prüfen, nicht Stile). */
  isolation: isolate;
}

/* Scroll-Effekt (Wunsch nem, 11.08.2026): Beim Scrollen gleitet der Teller von links
   nach rechts. Reines CSS über animation-timeline: scroll(), KEIN JavaScript, die Seite
   bleibt Gate-Typ T1. Browser ohne Unterstützung (Firefox, alte Safari) überspringen den
   @supports-Block komplett und zeigen den statischen Hero von oben; Reduced Motion stoppt
   die Animation über die globale Abschaltregel, der Grundzustand (translateX 0) bleibt
   sichtbar. Aufbau: Das Foto wandert auf eine 12 Prozent überbreite ::after-Ebene
   (background-image: inherit übernimmt die Bildadresse aus dem style-Attribut), die
   Original-Ebene wird nur über background-size: 0 0 unsichtbar, damit inherit weiter
   greift. Die Überbreite ist asymmetrisch (links 2, rechts 10 Prozent), damit die linke
   Tellerspitze am Scrollstart im Bild bleibt und trotzdem nie Creme am Rand aufblitzt
   (Bewegung -2 bis +3 Prozent). Nur ab 641 px, das Handyband bleibt statisch. */
@supports (animation-timeline: scroll()) {
  @media (min-width: 641px) {
    .buehne { background-size: 0 0; }
    .buehne::after {
      content: ''; position: absolute; inset: 0 -10% 0 -2%; z-index: -1;
      background-image: inherit;
      background-repeat: no-repeat;
      background-position: 15% 62%;
      background-size: cover;
      animation: teller-gleiten linear both;
      animation-timeline: scroll(root);
      animation-range: 0 120vh;
    }
    @keyframes teller-gleiten {
      from { transform: translateX(-2%); }
      to   { transform: translateX(3%); }
    }
  }
}
/* Kein flächiger Schleier mehr (Vorgabe nem, 10.08.2026: das Foto soll erkennbar sein).
   Stattdessen trägt eine weiße Gardine nur hinter dem Text. Der Rest des Fotos bleibt offen.

   Ganz ohne Abdunklung geht es trotzdem nicht: Der Kopf ist klebend und halbdurchsichtig,
   und die Gardine braucht eine Kante zum Bild. Deshalb ein sehr dünner Hauch von 0,14 oben,
   der nach 30 Prozent ausläuft. Er senkt die Lesbarkeit des Fotos nicht messbar. */
.buehne::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(251,246,238,.34) 0%,
    rgba(251,246,238,.10) 26%,
    rgba(251,246,238,0) 46%);
}
.buehne > .huelle { position: relative; z-index: 1; }

/* Die Gardine. Deckkraft 0,92 ist der gemessene Wert, nicht der geschätzte:
   selbst über der dunkelsten Bildstelle bleibt der Untergrund bei einer Leuchtdichte
   von 0,92, damit steht --tinte bei 13:1 und --orange-gross bei 3,7:1.
   Unter 0,88 wird der Kursivakzent knapp. Wer sie durchsichtiger macht, misst neu. */
.buehne-innen {
  /* Senkrechtes Paneel am rechten Rand statt breiter Kasten unten (Vorgabe nem,
     11.08.2026): links bleiben Teller und Speise groß sichtbar. */
  max-width: 430px; margin-left: auto; margin-right: 0; text-align: left;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(3px);
  border-radius: 20px;
  padding: clamp(26px, 2.6vw, 38px) clamp(24px, 2.6vw, 34px);
  box-shadow: 0 24px 60px rgba(42,35,24,.16);
}
.buehne-innen h1 { margin-bottom: .3em; font-size: clamp(1.8rem, 1.3rem + 1.2vw, 2.5rem); }
.buehne-innen .rubrik { margin-bottom: .7em; }
.buehne-innen .vorspann { margin: 0 0 1.2em; }
.buehne-innen .knopfreihe { justify-content: flex-start; }
/* Im schmalen Paneel stehen die Knöpfe untereinander in voller Breite */
.buehne-innen .knopf { width: 100%; justify-content: center; }

/* Das Siegel steht im Paneel oben, halb über der Oberkante im Bild. */
.buehne-siegel {
  width: 112px; height: 112px; margin: calc(-56px - clamp(26px, 2.6vw, 38px)) 0 18px;
  background: var(--weiss); border-radius: 50%;
  display: grid; place-content: center; text-align: center;
  box-shadow: 0 14px 34px rgba(42,35,24,.20);
}
.buehne-siegel strong {
  display: block; font-family: 'Playfair', serif; font-size: 1.72rem; font-weight: 500;
  line-height: 1; color: var(--gruen-text);
}
.buehne-siegel span {
  display: block; font-size: .58rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--tinte-hell); font-weight: 700; margin-top: 7px; padding: 0 14px;
}

/* ---------------------------------------------------------------
   6b. Abnehmer-Boxen, mittig unter der Bühne (Vorgabe nem, 11.08.2026)
   --------------------------------------------------------------- */
.fuer-wen {
  padding: clamp(56px, 6vw, 88px) 0;
  border-bottom: 1px solid var(--linie-fein);
  text-align: center;
}
.fuer-wen .rubrik { margin-bottom: .7em; }
.fuer-wen h2 { max-width: 16em; margin-inline: auto; margin-bottom: clamp(28px, 3.4vw, 44px); }

.abnehmer-boxen {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: 1060px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px;
}
.abnehmer-box {
  background: var(--weiss);
  border: 1px solid var(--linie-fein);
  border-radius: var(--radius-gross);
  padding: 32px 26px 30px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  /* Einlauf beim Laden, gestaffelt. fill-mode backwards statt Grundzustand opacity:0:
     wenn die globale Reduced-Motion-Regel die Animation abschaltet, bleibt die Box
     sonst unsichtbar. So zeigt sie ohne Animation einfach ihren Normalzustand. */
  animation: box-auftritt .55s ease backwards;
}
.abnehmer-box:nth-child(2) { animation-delay: .14s; }
.abnehmer-box:nth-child(3) { animation-delay: .28s; }
.abnehmer-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(42,35,24,.10);
  border-color: var(--linie);
}
@keyframes box-auftritt {
  from { opacity: 0; transform: translateY(22px); }
}
.abnehmer-box .zeichen {
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--creme); border: 1px solid var(--linie-fein);
  display: grid; place-items: center; margin: 0 auto 18px;
  transition: transform .25s ease, background-color .25s ease;
}
.abnehmer-box:hover .zeichen { transform: scale(1.08) rotate(-3deg); background: var(--creme-tief); }
.abnehmer-box .zeichen svg {
  width: 32px; height: 32px;
  stroke: var(--orange-text); stroke-width: 1.4; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.abnehmer-box h3 { font-size: 1.32rem; margin-bottom: .35em; }
.abnehmer-box p { font-size: .92rem; color: var(--tinte-hell); margin: 0; }

.abnehmer-hinweis {
  display: inline-flex; align-items: center; gap: 11px;
  margin: clamp(28px, 3.2vw, 40px) auto 0;
  padding: 13px 24px; border-radius: 999px;
  background: var(--creme-tief); border: 1px solid var(--linie);
  font-weight: 600; font-size: .94rem; color: var(--tinte);
}
.abnehmer-hinweis svg {
  width: 21px; height: 21px; flex: 0 0 auto;
  stroke: var(--orange-text); stroke-width: 1.4; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------------------------------------------------------------
   7. Nummerierte Bildbänder, randlos im Wechsel
   --------------------------------------------------------------- */
.band { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.band + .band { border-top: 1px solid var(--linie-fein); }
.band-bild { position: relative; min-height: 380px; overflow: hidden; }
.band-bild a { position: absolute; inset: 0; display: block; }
.band-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.band-bild a:hover img { transform: scale(1.03); }
.band-text .textlink { margin-top: 26px; align-self: flex-start; }
.band-text {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(44px, 5vw, 86px) clamp(32px, 5vw, 92px);
}
.band-text .nummer {
  display: flex; align-items: center; gap: 20px; margin-bottom: 22px;
}
.band-text .nummer b {
  font-family: 'Playfair', serif; font-size: clamp(2.6rem, 2rem + 2vw, 3.7rem);
  font-weight: 400; line-height: 1; color: var(--orange-gross);
}
.band-text .nummer i { display: block; width: 54px; height: 1px; background: var(--linie); }
.band-text h3 { font-size: clamp(1.55rem, 1.2rem + 1.2vw, 2.15rem); margin-bottom: .55em; }
.band-text p { color: var(--tinte-hell); font-size: .98rem; max-width: 30em; }
.band:nth-child(even) .band-bild { order: 2; }
.band-wechsel { background: var(--creme-tief); }

/* ---------------------------------------------------------------
   8. Sortimentskarten
   --------------------------------------------------------------- */
.karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.karte {
  background: var(--weiss); border: 1px solid var(--linie-fein);
  border-radius: var(--radius-gross); overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.karte:hover { border-color: var(--linie); transform: translateY(-3px); box-shadow: 0 16px 34px rgba(42,35,24,.09); }
/* Jedes Produktbild führt zu seinem Produkt (Vorgabe nem, 10.08.2026).
   Der Bildlink der Karte ist aus der Tabulatorreihenfolge genommen (`tabindex="-1"`),
   weil der Pfeilknopf derselben Karte dasselbe Ziel hat. Sonst müsste man jede Karte
   zweimal durchtabben. Für Maus, Touch und Suchmaschinen zählt der Link trotzdem. */
.karte-bild { aspect-ratio: 4 / 3; background: var(--creme-tief); overflow: hidden; }
.karte-bild a { display: block; width: 100%; height: 100%; }
.karte-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.karte:hover .karte-bild img { transform: scale(1.035); }
.karte-text { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.karte-text h3 { font-size: 1.42rem; margin-bottom: .3em; }
.karte-text .meta { font-size: .82rem; color: var(--tinte-hell); margin-bottom: 1em; }
.karte-text p { font-size: .93rem; color: var(--tinte-hell); margin-bottom: 1.4em; }
.karte-fuss {
  margin-top: auto; padding-top: 18px; border-top: 1px solid var(--linie-fein);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.karte-fuss .zahl { font-family: 'Playfair', serif; font-size: 1.12rem; color: var(--tinte); }
.rundknopf {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
  background: var(--creme-tief); color: var(--tinte);
  display: grid; place-items: center; text-decoration: none; font-size: 1.05rem;
  transition: background-color .2s ease, color .2s ease;
}
.karte:hover .rundknopf, .rundknopf:hover { background: var(--gruen-knopf); color: var(--tinte); }

/* ---------------------------------------------------------------
   9. Markenband, Logo groß
   --------------------------------------------------------------- */
.marke-band { text-align: center; }
.marke-band img { width: 300px; margin: 0 auto 30px; }
.marke-band p {
  font-family: 'Playfair', serif; font-size: clamp(1.35rem, 1.1rem + .9vw, 1.95rem);
  line-height: 1.45; max-width: 20em; margin: 0 auto; color: var(--tinte);
}
.marke-band .quelle { font-family: 'Manrope', sans-serif; font-size: .78rem; letter-spacing: .15em; text-transform: uppercase; color: var(--tinte-hell); margin-top: 26px; }

/* ---------------------------------------------------------------
   10. Zahlenreihe
   --------------------------------------------------------------- */
.zahlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--linie); border-block: 1px solid var(--linie); }
.zahlen div { background: var(--creme); padding: 34px 26px; text-align: center; }
.flaeche-tief .zahlen div { background: var(--creme-tief); }
.zahlen strong {
  display: block; font-family: 'Playfair', serif; font-weight: 400;
  font-size: clamp(2.2rem, 1.7rem + 1.5vw, 3.1rem); line-height: 1; color: var(--orange-gross); margin-bottom: 10px;
}
.zahlen span { font-size: .82rem; letter-spacing: .05em; color: var(--tinte-hell); }

/* ---------------------------------------------------------------
   11. Tabellen (Katalog, Datenblätter, Nährwerte)
   --------------------------------------------------------------- */
.tabellen-huelle { overflow-x: auto; border: 1px solid var(--linie); border-radius: var(--radius-gross); background: var(--weiss); }
table.liste { width: 100%; border-collapse: collapse; min-width: 700px; font-size: .92rem; }
table.liste caption { text-align: left; padding: 22px 26px 4px; color: var(--tinte-hell); font-size: .86rem; }
table.liste th, table.liste td { text-align: left; padding: 13px 20px; }
table.liste thead th {
  font-size: .68rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--tinte-hell); font-weight: 700; border-bottom: 1px solid var(--linie); white-space: nowrap;
}
table.liste tbody tr + tr td { border-top: 1px solid var(--linie-fein); }
table.liste tbody tr:hover td { background: var(--creme); }
table.liste td:first-child { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--tinte-hell); }
table.liste .gruppe td {
  background: var(--creme-tief); font-family: 'Playfair', serif; font-size: 1.05rem;
  color: var(--tinte); padding-top: 15px; padding-bottom: 15px;
}
table.liste .gruppe td a { color: var(--tinte); text-decoration: none; }
table.liste .gruppe td a:hover { color: var(--orange-text); }

.pdf-link {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  font-weight: 700; font-size: .82rem; color: var(--gruen-text); text-decoration: none;
}
.pdf-link::before {
  content: 'PDF'; font-size: .58rem; font-weight: 800; letter-spacing: .1em;
  background: var(--orange); color: var(--tinte); padding: 3px 6px; border-radius: 3px;
}
.pdf-link:hover { color: var(--orange-text); text-decoration: underline; }
.auf-anfrage { color: var(--tinte-hell); font-size: .84rem; }
/* Als Verweis (Katalogzelle ohne Datenblatt, führt zum Kontakt) grün wie jeder Link,
   sonst sieht die Zelle nach totem Text aus. Vorgabe nem, 11.08.2026. */
a.auf-anfrage { color: var(--gruen-text); }
table.liste .auf-anfrage { white-space: nowrap; }
.zusatz { color: var(--tinte-hell); font-size: .84rem; }

/* Nährwerte als kleine Tabelle */
table.werte { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.werte th, table.werte td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--linie-fein); }
table.werte th { font-weight: 600; color: var(--tinte-hell); }
table.werte td { text-align: right; font-variant-numeric: tabular-nums; }
table.werte .einzug th { padding-left: 18px; font-weight: 400; }

/* ---------------------------------------------------------------
   12. Zwei Spalten allgemein
   --------------------------------------------------------------- */
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 4vw, 72px); align-items: center; }
.zwei-schmal { grid-template-columns: .85fr 1.15fr; }
.zwei img { border-radius: var(--radius-gross); }

.merkmale { list-style: none; margin: 0; padding: 0; }
.merkmale li { display: flex; gap: 16px; padding: 16px 0; border-top: 1px solid var(--linie-fein); }
.merkmale li:last-child { border-bottom: 1px solid var(--linie-fein); }
.merkmale b { flex: 0 0 190px; font-weight: 700; font-size: .82rem; letter-spacing: .06em; }
.merkmale span { color: var(--tinte-hell); font-size: .95rem; }

.etiketten { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 26px; padding: 0; }
.etiketten li {
  font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  border: 1px solid var(--linie); border-radius: 999px; padding: 6px 14px; color: var(--tinte-hell);
}

.wege { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.weg { border-top: 2px solid var(--orange); padding-top: 22px; }
.weg h3 { font-size: 1.3rem; margin-bottom: .35em; }
.weg p { font-size: .93rem; color: var(--tinte-hell); margin: 0; }
.flaeche-dunkel .weg { border-top-color: var(--gruen); }
.flaeche-dunkel .weg p { color: #D8E3C0; }
.weg-symbol { display: block; margin-bottom: 16px; }
.weg-symbol svg {
  width: 32px; height: 32px; stroke: var(--orange-text); stroke-width: 1.4;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.flaeche-dunkel .weg-symbol svg { stroke: var(--gruen); }

/* Merkmalliste mit Symbol je Zeile */
.merkmale-symbol li { align-items: flex-start; }
.merkmale-symbol > li > svg {
  width: 22px; height: 22px; flex: 0 0 22px; margin-top: 3px;
  stroke: var(--orange-text); stroke-width: 1.4; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.merkmale-symbol b { flex: 0 0 168px; }

/* Kontaktliste mit Symbol je Zeile */
.kontaktliste > li > svg {
  width: 20px; height: 20px; margin-top: 2px;
  stroke: var(--orange-text); stroke-width: 1.4; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------------------------------------------------------------
   10b. GEO-Bausteine: Kurzantwort und Fragenblock
   --------------------------------------------------------------- */
.kurzantwort {
  border-left: 2px solid var(--orange);
  padding: 4px 0 4px 22px;
  font-size: 1.02rem; line-height: 1.7; color: var(--tinte);
  margin: 0 0 1.4em;
}
.kurzantwort:last-child { margin-bottom: 0; }

/* Der Einleitungsabschnitt der Startseite steht zwischen der Zielgruppenreihe und dem
   ersten Bildband. Er hatte unten 0 Abstand und stieß dadurch direkt auf das Bild. */
.einleitung { padding: clamp(46px, 5vw, 72px) 0 clamp(56px, 6vw, 88px); }

.faq { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 44px; }
.faq-punkt h3 {
  display: flex; align-items: flex-start; gap: 13px;
  font-size: 1.18rem; margin-bottom: .45em; line-height: 1.3;
}
.faq-punkt h3 svg {
  width: 22px; height: 22px; flex: 0 0 22px; margin-top: 4px;
  stroke: var(--orange-text); stroke-width: 1.4; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.faq-punkt p { font-size: .95rem; color: var(--tinte-hell); margin: 0; padding-left: 35px; }

.hinweis {
  background: var(--creme-tief); border-left: 2px solid var(--orange);
  padding: 20px 24px; font-size: .93rem; color: var(--tinte-hell); border-radius: 0 var(--radius) var(--radius) 0;
}

/* Variantengalerie auf den Gruppenseiten */
.galerie { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.galerie figure { margin: 0; }
.galerie a { display: block; border-radius: var(--radius); overflow: hidden; }
.galerie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .35s ease; }
.galerie a:hover img { transform: scale(1.04); }
.galerie figcaption { font-size: .84rem; color: var(--tinte-hell); margin-top: 11px; }

/* Bilder auf den Gruppen- und Unternehmensseiten, die auf ein Produkt zeigen */
.zwei a > img { transition: transform .4s ease; }
.zwei a { display: block; border-radius: var(--radius-gross); overflow: hidden; }
.zwei a:hover > img { transform: scale(1.02); }

/* Brotkrume */
.krume { padding: 22px 0 0; font-size: .78rem; letter-spacing: .06em; color: var(--tinte-hell); }
.krume ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 9px; }
.krume li + li::before { content: '/'; margin-right: 9px; color: var(--linie); }
.krume a { color: var(--tinte-hell); text-decoration: none; }
.krume a:hover { color: var(--orange-text); text-decoration: underline; }

/* Nachbarseiten */
.nachbarn { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.nachbar {
  display: block; text-decoration: none; padding: 22px 24px;
  border: 1px solid var(--linie-fein); border-radius: var(--radius); background: var(--weiss);
}
.nachbar:hover { border-color: var(--linie); }
.nachbar span { display: block; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tinte-hell); margin-bottom: 7px; }
.nachbar strong { font-family: 'Playfair', serif; font-size: 1.18rem; font-weight: 400; color: var(--tinte); }

/* Kontaktkarte */
.kontaktkarte { background: var(--weiss); border-radius: var(--radius-gross); padding: 34px 38px; border: 1px solid var(--linie-fein); }
.kontaktkarte h3 { font-size: 1.5rem; margin-bottom: .8em; }
.kontaktliste { list-style: none; margin: 0 0 26px; padding: 0; }
/* Raster statt Flex, damit Symbol, Bezeichnung und Wert in festen Spalten stehen (nem 08.10.2026).
   Die Bezeichnungsspalte trägt das längste Wort, „Geschäftszeiten“. */
.kontaktliste li { display: grid; grid-template-columns: 20px 9.5rem 1fr; column-gap: 18px; align-items: start; padding: 13px 0; }
.kontaktliste li + li { border-top: 1px solid var(--linie-fein); }
.kontaktliste b { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tinte-hell); font-weight: 700; padding-top: 4px; }
.kontaktliste a { color: var(--gruen-text); font-weight: 600; text-decoration: none; }
.kontaktliste a:hover { color: var(--orange-text); text-decoration: underline; }

/* ---------------------------------------------------------------
   13. Rechtsseiten
   --------------------------------------------------------------- */
/* Nur die senkrechte Polsterung setzen. Die Kurzform `padding` hat hier den
   Seitenrand von .huelle auf 0 gesetzt, dadurch klebte der Text auf Impressum und
   Datenschutz am Displayrand. Gefunden in der Abnahmepruefung am 10.08.2026. */
.recht { padding-block: clamp(48px, 5vw, 82px); }
.recht h2 { font-size: 1.55rem; margin-top: 1.9em; }
.recht h3 { font-size: 1.15rem; margin-top: 1.5em; }
.recht ul { padding-left: 1.2em; }
.recht li { margin-bottom: .4em; }
.recht address { font-style: normal; margin-bottom: 1.2em; }

/* ---------------------------------------------------------------
   14. Fuß
   --------------------------------------------------------------- */
.fuss { background: var(--creme-tief); border-top: 1px solid var(--linie); padding: clamp(54px, 5vw, 82px) 0 28px; }
.fuss-raster { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 42px; padding-bottom: 42px; }
.fuss-logo { width: 190px; margin-bottom: 20px; }
.fuss h2 { font-family: 'Manrope', sans-serif; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--tinte-hell); font-weight: 700; margin-bottom: 16px; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: 9px; font-size: .92rem; }
.fuss a { color: var(--tinte); text-decoration: none; }
.fuss a:hover { color: var(--orange-text); text-decoration: underline; }
.fuss > .huelle > .fuss-raster > div > p { font-size: .92rem; color: var(--tinte-hell); }
.fuss-schluss {
  border-top: 1px solid var(--linie); padding-top: 24px;
  display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; justify-content: space-between;
  font-size: .84rem; color: var(--tinte-hell);
}
.fuss-schluss ul { display: flex; flex-wrap: wrap; gap: 22px; }
.fuss-schluss p { margin: 0; }
.fuss-spruch { font-family: 'Playfair', serif; font-style: italic; font-size: 1.02rem; color: var(--tinte); }

/* ---------------------------------------------------------------
   15. Umbrüche
   --------------------------------------------------------------- */
@media (max-width: 1100px) {
  .buehne-raster { grid-template-columns: 1fr; }
  .buehne-bild { order: -1; max-width: 560px; }
  .karten, .wege, .nachbarn, .galerie { grid-template-columns: repeat(2, 1fr); }
  /* Mobil zwei Boxen nebeneinander (Vorgabe nem, 11.08.2026). Bei drei Boxen
     laeuft die dritte ueber beide Spalten, sonst stuende sie einsam halbbreit. */
  .abnehmer-boxen { max-width: 720px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .abnehmer-box:nth-child(3) { grid-column: 1 / -1; }
  .zahlen { grid-template-columns: repeat(2, 1fr); }
  .zwei, .zwei-schmal { grid-template-columns: 1fr; }
  .fuss-raster { grid-template-columns: repeat(2, 1fr); gap: 34px; }
  .band { grid-template-columns: 1fr; }
  .band:nth-child(even) .band-bild { order: 0; }
  .band-bild { min-height: 300px; }
}

@media (max-width: 940px) {
  .kopf-menue, .kopf-tel { display: none; }
  .kopf-klapp { display: block; }
  .kopf-innen { grid-template-columns: auto 1fr; min-height: 84px; }
  .kopf-logo img { width: 124px; }
}

@media (max-width: 640px) {
  :root { --rand: 20px; }
  .karten, .wege, .nachbarn, .zahlen, .fuss-raster, .faq { grid-template-columns: 1fr; }
  .abnehmer-boxen { gap: 12px; }
  .abnehmer-box { padding: 20px 14px 18px; }
  .abnehmer-box .zeichen { width: 52px; height: 52px; margin-bottom: 12px; }
  .abnehmer-box .zeichen svg { width: 26px; height: 26px; }
  .abnehmer-box h3 { font-size: 1.05rem; }
  .abnehmer-box p { font-size: .8rem; line-height: 1.55; }
  .abnehmer-hinweis { font-size: .84rem; padding: 11px 18px; text-align: left; }
  .knopfreihe .knopf { width: 100%; justify-content: center; }
  /* Auf schmalen Geräten reicht Beschneiden nicht: Der Teller füllt 90 Prozent der
     Bildbreite, bei cover wäre er im Hochformat immer angeschnitten. Deshalb wird das
     Bild hier auf 105 Prozent der Bühnenbreite skaliert und um 6vw nach oben geschoben
     („etwas flacher", nem 11.08.2026). Alles skaliert mit vw, darum stimmt die Rechnung
     bei jeder Gerätebreite: Bildhöhe 56,25vw, Teller zwischen 12,3vw und 42,3vw, das
     Fotoband ist 43,5vw hoch. Bei 100 Prozent Breite liegt die Tellermitte (49 Prozent
     im Bild) nur 4 px neben der Bühnenmitte, das braucht keinen Ausgleich mehr. */
  .buehne {
    min-height: 0; padding: 43.5vw 0 clamp(24px, 4vw, 36px);
    background-size: 100% auto; background-position: 0 -6vw;
  }
  .buehne-innen { border-radius: 18px; }
  .buehne-innen {
    /* mobil wieder volle Breite unterm Fotoband, das Paneel gilt nur am Desktop */
    max-width: none; margin: 0; text-align: center;
  }
  .buehne-innen .knopfreihe { justify-content: center; }
  .buehne-innen .vorspann { margin-inline: auto; }
  /* Mobil als Pille statt Kreis: Der hochgezogene Kreis ragte 38 px ins Fotoband und
     verdeckte das mittlere Quarkkeulchen (Befund nem, 11.08.2026). Die Pille bleibt
     komplett in der Gardine; Creme-tief als Fläche, sonst ist Weiß auf Weiß kantenlos. */
  .buehne-siegel {
    width: auto; height: auto; margin: 0 auto 12px;
    display: inline-flex; align-items: baseline; gap: 9px;
    border-radius: 999px; padding: 9px 18px;
    background: var(--creme-tief); box-shadow: none;
  }
  .buehne-siegel strong { font-size: 1.05rem; }
  .buehne-siegel span { font-size: .58rem; padding: 0; margin-top: 0; }
  .merkmale li { flex-direction: column; gap: 3px; }
  .merkmale b, .merkmale-symbol b { flex: none; }
  .merkmale-symbol li { flex-direction: row; flex-wrap: wrap; gap: 0 12px; }
  .merkmale-symbol > li > svg { margin-top: 2px; }
  .merkmale-symbol b { flex: 1 1 auto; }
  .merkmale-symbol span { flex: 1 0 100%; padding-left: 34px; }
  .kontaktkarte { padding: 26px 22px; }
  .marke-band img { width: 220px; }
  .faq-punkt p { padding-left: 0; }
}

/* ---------------------------------------------------------------
   16. Druck
   --------------------------------------------------------------- */
@media print {
  .kopf, .knopfreihe, .buehne-siegel, .rundknopf, .nachbarn { display: none; }
  body { background: #fff; font-size: 11pt; }
  section { padding: 16px 0; }
  .flaeche-dunkel { background: #fff; color: #000; }
  .flaeche-dunkel h2, .flaeche-dunkel h3, .flaeche-dunkel p, .weg p { color: #000; }
}

/* Schmale Telefone: "Jetzt Preisliste anfordern!" (Wortlaut der alten Seite, 15.09.2026) ist
   länger als die bisherigen Knopftexte und lief bei 375 px über den Rand. Engere Laufweite
   und weniger Innenabstand, notfalls Umbruch innerhalb des Knopfes. */
@media (max-width: 480px) {
  .knopf { max-width: 100%; padding: 15px 20px; gap: 10px; letter-spacing: .06em; }
  .knopf { white-space: normal; text-align: left; }
}


/* --- Nachträge 23.09.2026 (Änderungswünsche nem) ------------------------------------ */

/* Die Sortimentskarten tragen seit dem 15.09. eine H2 statt H3 (Überschriftenordnung).
   Ohne diese Zeile greift die große H2-Skala und der Titel sprengt die Karte. */
.karte-text h2 { font-size: 1.42rem; margin-bottom: .3em; }

/* Anfahrtskarte: eigene Zeichnung, volle Spaltenbreite */
.anfahrt { width: 100%; height: auto; border-radius: 18px; }


/* Anfrage-Knopf: am Telefon "Anfrage schreiben", am Rechner die Adresse (nem 24.09.2026).
   Unterschieden wird nach Zeigegerät, nicht nach Fensterbreite: ein schmales Browserfenster
   auf dem Rechner ist kein Telefon. Die jeweils andere Fassung ist mit display:none auch
   für Vorlesegeräte weg, sonst hörte man beide. Farben bleiben, es ist derselbe Knopf. */
/* Zwei Klassen statt einer: `.zwei a { display:block }` weiter oben ist spezifischer als
   eine einzelne Hilfsklasse und hat den Knopf in der Bühne wieder eingeblendet. */
.knopf.nur-zeiger { display: none; }
@media (hover: hover) and (pointer: fine) {
  .knopf.nur-tipp { display: none; }
  .knopf.nur-zeiger { display: inline-flex; }
}
.adressknopf { gap: 10px; text-transform: none; letter-spacing: .02em; font-size: .92rem; }
.adressknopf svg { width: 18px; height: 18px; flex: none; }

/* Kopierknopf am Rechner (nem 24.09.2026). Gleiche Form und Farbe wie der Anfrage-Knopf,
   nur mit Adresse und Kopiersymbol. Nach dem Klick zeigt ein Haken für 2,5 Sekunden, dass
   die Adresse in der Zwischenablage liegt. */
button.adressknopf { cursor: pointer; font-family: 'Manrope', sans-serif; font-weight: 700; }
.adressknopf .kopier-symbol, .adressknopf .haken-symbol {
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.adressknopf .haken-symbol { display: none; }
.mailkopie.kopiert .kopier-symbol { display: none; }
.mailkopie.kopiert .haken-symbol { display: block; }
.mailkopie-meldung:empty { display: none; }
.mailkopie-meldung { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; opacity: .9; }

/* Schmal: Bezeichnung über dem Wert, sonst brechen Hausnummer und Mailadresse um. */
@media (max-width: 520px) {
  .kontaktliste li { grid-template-columns: 20px 1fr; column-gap: 14px; row-gap: 2px; }
  .kontaktliste li > svg { grid-row: 1 / span 2; }
  .kontaktliste b, .kontaktliste li > span { grid-column: 2; }
}