/* =====================================================================
   seite.css – die gesamte Gestaltung der Website in EINER Datei
   ---------------------------------------------------------------------
   Früher verteilt auf style.css, navi.css, responsive.css,
   ergaenzungen.css und kontakt.css. Nur der Ausdruck hat eine eigene
   Datei (druck.css).

   Aufbau (zum Suchen: Strg+F und die Nummer, z. B. "/* 7."):
     1.  Grundeinstellungen und Schriften
     2.  Raster (Zeilen und Spalten)
     3.  Seitenrahmen und Kopfbereich
     4.  Texte und Überschriften im Inhalt
     5.  Tabellen, Bildleisten, Schaltflächen
     6.  Fußbereich und Gutschein-Leiste
     7.  Menüs (oben, Hauptmenü, Fußzeile)
     8.  Bildwechsel, Kopfbild, Bildansicht, "Nach oben"
     9.  Formulare (Kontakt, Gutschein)
     10. Hilfsklassen
     11. Kleinere Bildschirme (Tablet, Handy) – immer am Ende lassen

   Farben der Seite:
     #5E6F2E  Grün (Links, Linien, Schaltflächen)
     #d1336d  Pink (Linien unter Überschriften, Gutschein-Leiste)
     #b01c41  Weinrot (Menü am Handy, Fokus-Rahmen)
     #c00000  Rot (Fehlermeldungen in Formularen)
   ===================================================================== */


/* 1. GRUNDEINSTELLUNGEN UND SCHRIFTEN ================================= */

/* Browser-Vorgaben zurücksetzen, damit alle Browser gleich aussehen */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
}
article, aside, details, figcaption, figure, hgroup, menu, nav, section {
  display: block;
}
* {
  box-sizing: border-box;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote::before, blockquote::after, q::before, q::after {
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
div {
  position: relative;
  min-width: 0;
}
strong {
  font-weight: 600;
}
img {
  max-width: 100%;
  height: auto;   /* Höhe passt sich der Breite an */
}
html {
  height: 101%;
  scroll-padding-bottom: 60px; /* Fokus nicht von der Gutschein-Leiste verdecken */
}
body {
  font-family: 'Open Sans', Arial, Helvetica, Verdana, Sans-Serif;
  font-size: 100.01%;
  line-height: 1;
  height: 100.1%;
  text-align: center;
  padding-bottom: 36px; /* Platz für die feste Gutschein-Leiste unten */
  background-color: #fff;
  background-image: var(--hintergrund, url(../images/hg-herbst.webp)); /* Bild je Jahreszeit: inc/einstellungen.php */
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

/* Tastatur: sichtbarer Rahmen um das Element, das gerade den Fokus hat */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid #b01c41;
  outline-offset: 2px;
}

/* "Zum Hauptinhalt springen": unsichtbar, erscheint beim Tabben */
.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link:focus {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 10000;
  width: auto;
  height: auto;
  margin: 0;
  padding: 10px 16px;
  clip: auto;
  clip-path: none;
  background: #fff;
  color: #5E6F2E;
  font-weight: 600;
  box-shadow: 0 0 6px #333;
}

/* Schriften (lokal im Ordner webfonts/, nur WOFF2).
   "font-display: swap" zeigt den Text sofort in Arial und tauscht die
   Schrift, sobald sie geladen ist. */
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300; font-display: swap; src: url('../webfonts/open-sans-v15-latin-300.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../webfonts/open-sans-v15-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url('../webfonts/open-sans-v15-latin-italic.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../webfonts/open-sans-v15-latin-600.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 600; font-display: swap; src: url('../webfonts/open-sans-v15-latin-600italic.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../webfonts/open-sans-v15-latin-700.woff2') format('woff2'); }


/* 2. RASTER (ZEILEN UND SPALTEN) ======================================
   <div class="zeile"> enthält Spalten, z. B. <div class="sechs spalten">.
   Eine Zeile hat 12 Teile: sechs = halbe Breite, vier = ein Drittel usw. */
.zeile {
  width: 980px;
  max-width: 100%;
  min-width: 768px;
  margin: 0 auto;
  text-align: left;
}
.zeile .zeile {
  width: auto;
  max-width: none;
  min-width: 0;
  margin: 0 -15px;
}
.spalte, .spalten {
  float: left;
  min-height: 1px;
  padding: 0 15px;
  position: relative;
}
[class*="spalte"] + [class*="spalte"]:last-child {
  float: right;
}
[class*="spalte"] + [class*="spalte"].end {
  float: left;
}
.zeile .eins   { width: 8.33%; }
.zeile .zwei   { width: 16.66%; }
.zeile .drei   { width: 25%; }
.zeile .vier   { width: 33.33%; }
.zeile .fuenf  { width: 41.66%; }
.zeile .sechs  { width: 50%; }
.zeile .sieben { width: 58.33%; }
.zeile .acht   { width: 66.66%; }
.zeile .neun   { width: 75%; }
.zeile .zehn   { width: 83.33%; }
.zeile .elf    { width: 91.66%; }
.zeile .zwoelf { width: 100%; }
/* Zeilen umschließen ihre Spalten vollständig */
.zeile::before, .zeile::after, .clearfix::before, .clearfix::after {
  content: "";
  display: table;
}
.zeile::after, .clearfix::after {
  clear: both;
}
.clearfix {
  display: block;
}


/* 3. SEITENRAHMEN UND KOPFBEREICH ===================================== */
#rahmen {
  position: relative;
  width: 1110px;
  clear: both;
  padding: 0;
  margin: 0 auto;
  text-align: left;
  background-color: #fff;
  box-shadow: 0 0 4px 0 #333;
}
#kopf {
  position: relative;
  padding-left: 15px;
  padding-right: 15px;
}
.inhalte {
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: left;
}
/* Weißer Kasten mit Logo und Öffnungszeiten */
#logobereich {
  position: absolute;
  top: 0;
  left: 80px;
  z-index: 30;
  width: 300px;
  background-color: #fff;
  box-shadow: 0 0 4px 0 #333;
  border-radius: 0 0 5px 5px;
}
#logo {
  display: block;
  width: 100%;
  max-width: 240px;
  height: auto;
  padding-top: 10px;
  text-align: center;
  margin: 0 auto;
}
#oeffnungszeiten {
  padding: 10px 0 12px;
}
#oeffnungszeiten p#titel {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 130%;
  text-align: center;
}
#oeffnungszeiten p {
  font-size: 0.85rem;
  line-height: 150%;
  text-align: center;
}
/* Sonderzeiten: Bezeichnung (z. B. Weihnachtsevent) fett, ggf. als Link */
#oeffnungszeiten .sonderzeiten {
  margin-top: 4px;
  line-height: 135%; /* etwas enger, damit der Kasten nicht unter das Menü reicht */
}
#oeffnungszeiten a {
  color: #5E6F2E;
  text-decoration: underline;
}
/* Weiße Leiste mit dem Hauptmenü */
#navigation {
  position: relative;
  width: 950px;
  margin-left: 65px;
  margin-top: -40px;
  background-color: #fff;
  z-index: 160;
  box-shadow: 0 -3px 3px 0 #666;
  border-radius: 5px 5px 0 0;
  background-image: url(../images/schattenoben.png);
  background-position: center 29px;
  background-repeat: no-repeat;
}
/* Hinweis-Kasten (Text aus inc/einstellungen.php) */
.hinweis p {
  background: #ffeeaf;
  padding: 12px 16px;
  font-weight: 600;
}
/* Graue und grüne Flächen */
.grau {
  background-color: #EFEFEF;
  background-image: url(../images/schattenunten.png), url(../images/schattenoben.png);
  background-position: center top, center bottom;
  background-repeat: no-repeat;
}
.gruen {
  background-color: #5E6F2E;
}
.linieoben {
  border-top: 1px solid #5E6F2E;
  padding-top: 5px;
  padding-bottom: 5px;
}
.gruen.linieoben {
  padding-bottom: 40px;
}


/* 4. TEXTE UND ÜBERSCHRIFTEN IM INHALT ================================ */
.inhalte h1 {
  font-size: 1.2rem;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #000;
  margin-left: -60px;
  padding-left: 60px;
  margin-bottom: 0.85em;
  text-shadow: 0 1px #fff;
}
.inhalte h2 {
  font-size: 1.2rem;
  font-weight: 400;
  color: #5E6F2E;
  margin-top: 1em;
  margin-bottom: 0.8em;
  padding-bottom: 0.3em;
  line-height: 1.2em;
  text-shadow: 0 1px #fff;
  border-bottom: 1px solid #d1336d;
}
/* Überschrift mit Tulpe bzw. Blatt davor */
.inhalte h2.icon1 {
  background-image: url(../images/icon-tulpe.png);
  background-position: left top;
  background-repeat: no-repeat;
  padding-left: 30px;
}
.inhalte h2.icon2 {
  background-image: url(../images/icon-blatt.png);
  background-position: left 3px;
  background-repeat: no-repeat;
  padding-left: 30px;
}
/* Seitenüberschrift als h1, sieht aus wie die grüne h2 mit Tulpe */
.inhalte h1.icon1 {
  font-size: 1.2rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: #5E6F2E;
  margin: 0 0 .8em 0;
  padding: 0 0 .3em 30px;
  line-height: 1.2em;
  border-bottom: 1px solid #d1336d;
  background: url(../images/icon-tulpe.png) no-repeat left top;
}
.inhalte .mengentext h2 {
  margin-top: 2em;
}
.inhalte h2:first-child {
  margin-top: 0;
}
.inhalte h3 {
  font-size: 0.9rem;
  font-weight: bold;
  margin-top: 1.8em;
  margin-bottom: 0.9em;
  color: #444;
  line-height: 1.2em;
}
.inhalte h3:first-child {
  margin-top: 0;
}
/* h2, die aussieht wie eine h3 (richtige Reihenfolge für Screenreader) */
.inhalte h2.wie-h3 {
  font-size: 0.9rem;
  font-weight: bold;
  color: #444;
  margin-top: 1.8em;
  margin-bottom: 0.9em;
  padding-bottom: 0;
  line-height: 1.2em;
  text-shadow: none;
  border-bottom: 0;
}
.inhalte p {
  font-size: 0.85rem;
  line-height: 1.7em;
  margin-bottom: 0.85em;
}
.inhalte ul {
  list-style-type: square;
  padding-left: 17px;
  margin-bottom: 0.85em;
}
.inhalte li {
  font-size: 0.85rem;
  line-height: 1.7em;
  margin-bottom: 0.45em;
}
/* Lange Internet-Adressen umbrechen (sonst seitliches Scrollen am Handy) */
.inhalte p, .inhalte li {
  overflow-wrap: break-word;
}
.tklein {
  font-size: 0.75rem;
  line-height: 1.3em;
}
.text2 {
  color: #d1336d;
  font-weight: 600;
}
.inhalte a {
  color: #5E6F2E;
  text-decoration: underline;
}
.inhalte a:hover, .inhalte a:active, .inhalte a:visited {
  color: #000;
  text-decoration: underline;
}
.inhalte h2 a {
  text-decoration: none;
}
.inhalte h2 a:hover {
  text-decoration: none;
  color: #000;
}
/* Telefonnummer als Link, sieht aus wie normaler Text */
a.telresp {
  text-decoration: none;
  color: #000;
}
/* Bild mit Link zur PDF-Datei: beim Darüberfahren erscheint der Text
   aus <span>...</span> als grünes Schild über dem Bild */
.exlink {
  position: relative;
}
a.exlink span {
  display: none;
}
a.exlink:hover span {
  display: block;
  position: absolute;
  top: -15px;
  left: 10px;
  margin: 0;
  background-color: #5E6F2E;
  padding: 5px;
  color: #fff;
  border: 1px solid #fff;
  font: 10px Verdana, Arial, Helvetica, sans-serif;
  font-weight: normal;
  text-decoration: none;
  z-index: 100;
}
a.exlink:hover {
  color: #000;
  border: 0;
  font-weight: normal;
  text-decoration: none;
  z-index: 200;
}
/* "Weiterlesen" zum Aufklappen (<details>/<summary>) */
summary {
  text-decoration: underline;
  font-size: 0.85rem;
}


/* 5. TABELLEN, BILDLEISTEN, SCHALTFLÄCHEN ============================= */
table {
  display: table;
  margin-top: 30px;
  margin-bottom: 30px;
}
th {
  background-color: #efefef;
  border-bottom: 1px solid #000;
}
.inhalte th p, .inhalte td p {
  margin: 0;
}
th, td {
  padding: 3px;
}
th:nth-child(1), td:nth-child(1),
th:nth-child(2), td:nth-child(2) {
  width: 48%;
}
tr:nth-child(even) {
  background-color: #fff;
}
tr:nth-child(odd) {
  background-color: #efefef;
}
/* Einfache Tabelle mit Rahmen (z. B. Luftreiniger-Seite) */
.tabelle {
  border-collapse: collapse;
  margin-bottom: 1.5em;
}
.tabelle th, .tabelle td {
  border: 1px solid #999;
  padding: 4px 8px;
  text-align: left;
  vertical-align: top;
}
.tabelle p {
  margin: 0;
}

/* Bildergalerie mit hohen Bildern (z. B. Oster-Deko): 3 Spalten, am Handy 2 */
.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.gallery .item {
  flex: 0 0 calc(33.333% - 14px);
}
.gallery .item p {
  margin: 0;
}
.gallery .item img {
  width: 100%;
  height: auto;
  display: block;
}

/* Bildleiste (Funktion galerie()): seitlich wischen oder scrollen */
.jcarousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.jcarousel ul {
  display: flex;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0 0 10px;
}
.jcarousel li {
  flex: 0 0 auto;
  scroll-snap-align: start;
  margin: 0;
}
.jcarousel img {
  display: block;
  height: 180px;
  width: auto;
}

/* Pinkfarbene Schaltfläche, z. B. "Zurück" nach dem Absenden */
p.button {
  display: block;
  padding-bottom: 20px;
}
.inhalte .button a, .button a {
  display: inline-block;
  line-height: 35px;
  height: 35px;
  background-color: #d1336d;
  border-top: 1px solid #fff;
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
}

/* Startseite: Kacheln rücken nach, wenn eine abläuft */
.kacheln {
  display: flex;
  flex-wrap: wrap;
  margin-top: 60px;
}
.kacheln::before, .kacheln::after {
  display: none;
}
.kacheln > .spalten {
  float: none;
  margin-bottom: 50px;
}


/* 6. FUSSBEREICH UND GUTSCHEIN-LEISTE ================================= */
#fuss {
  padding-top: 20px;
  padding-bottom: 30px;
  background-color: #fff;
}
#fuss h2 {
  font-size: 1.25rem;
  font-weight: 400;
  color: #5E6F2E;
  margin-top: 1em;
  margin-bottom: 0.8em;
  padding-bottom: 0.3em;
  line-height: 1.2em;
  text-shadow: 0 1px #fff;
  border-bottom: 1px solid #d1336d;
}
#fuss h2:first-child {
  margin-top: 0;
}
#fuss h3 {
  font-size: 0.9rem;
  font-weight: bold;
  margin-top: 1.8em;
  margin-bottom: 0.9em;
  color: #444;
  line-height: 1.2em;
}
#fuss p {
  font-size: 0.8rem;
  line-height: 1.5em;
  margin-bottom: 0.85em;
}
#fuss a {
  color: #5E6F2E;
  text-decoration: underline;
}
.fuss {
  position: relative;
}
.fuss a:hover, .fuss a:active, .fuss a:visited {
  color: #000;
  text-decoration: underline;
}
/* Sonnenblume rechts unten im Fuß */
#bluete {
  position: absolute;
  right: 0;
  bottom: -15px;
  z-index: 100;
}
/* Pinkfarbene Leiste "Geschenkgutschein", immer unten am Bildschirm */
#gutscheinbutton {
  position: fixed;
  display: block;
  width: 100%;
  height: auto;
  bottom: 0;
  left: 0;
  margin: 0 auto;
  z-index: 8000;
}
#gutscheinbutton a {
  display: block;
  margin: 0 auto;
  width: 1110px;
  line-height: 35px;
  height: 35px;
  background-color: #d1336d;
  border-top: 1px solid #fff;
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  text-align: center;
}


/* 7. MENÜS ============================================================ */

/* Kleines Menü oben (Gärtnerei, Service ...) und grünes Sortiment-Menü im Fuß */
ul.metanavi.top {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  list-style-type: none;
  margin: 12px 0 0;
  padding: 0;
  background-color: #fff;
  border-top: 1px solid #5E6F2E;
  border-bottom: 1px solid #5E6F2E;
}
ul.metanavi li {
  float: left;
}
ul.metanavi li a {
  display: block;
  padding: 8px;
  color: #5E6F2E;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
}
ul.metanavi a:hover {
  color: #000;
  font-weight: 600;
  text-decoration: none;
}
.gruen ul.metanavi {
  margin-top: 0;
  padding-left: 0;
  width: 100%;
  background-color: #5E6F2E;
  color: #fff !important;
}
.gruen ul.metanavi li a {
  color: #fff !important;
  padding-left: 25px;
  padding-right: 25px;
}
.inhalte.gruen .metanavi.footernavi {
  list-style: none;
}
.inhalte.gruen .metanavi.footernavi li a {
  color: #fff !important;
}
.inhalte.gruen .metanavi.footernavi li a:hover {
  color: #fff !important;
  font-weight: 600;
  text-decoration: underline !important;
}
.inhalte.gruen .metanavi.footernavi li a:active {
  color: #fff !important;
  text-decoration: none;
}

/* Hauptmenü. Am Handy erscheint stattdessen der Knopf "Navigation". */
.toggleMenu {
  display: none;
  background: #b01c41;
  padding-top: 10px;
  padding-bottom: 10px;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  width: 100%;
}
.toggleMenu button {
  width: 100%;
  padding: 0 0 0 10px;
  border: 0;
  background: transparent url(../images/pfeiloff.png) no-repeat right 5px center;
  color: #fff;
  font: inherit;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: left;
  min-height: 30px;
  cursor: pointer;
}
.toggleMenu.active button {
  background-image: url(../images/pfeilon.png);
}
.nav {
  text-align: justify;
  width: 100%;
  list-style: none;
}
.nav::before, .nav::after {
  content: " ";
  display: table;
}
.nav::after {
  clear: both;
}
.nav ul {
  list-style: none;
  width: 200px;
}
.nav li {
  position: relative;
}
.nav > li {
  display: inline-block;
  float: left;
  width: 20%; /* 5 Menüpunkte nebeneinander */
  text-align: center;
}
.nav a {
  display: inline-block;
  width: 100%;
  padding: 12px 15px;
  color: #000;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
}
.nav > li > a {
  display: block;
}
.nav a:hover {
  color: #5E6F2E;
  text-decoration: none;
}
/* Untermenü (Sortiment): erscheint beim Darüberfahren oder per Tastatur */
.nav li ul {
  position: absolute;
  padding-top: 6px;
  padding-bottom: 6px;
  background: #fff;
  left: -9999px;
}
.nav > li.hover > ul {
  left: 0;
  text-align: left;
}
.nav li li a {
  display: block;
  background: #f7f7f7;
  color: #000;
  font-size: 0.8rem;
  font-weight: normal;
  padding-bottom: 9px;
  padding-top: 9px;
  position: relative;
  z-index: 1000;
}
.nav li li a:hover {
  background: #fff;
  color: #000;
}
/* Schalter für das Untermenü und Eintrag "Sortiment im Überblick":
   nur am Handy sichtbar (siehe Abschnitt 11) */
.unter-schalter, .nav .nur-handy {
  display: none;
}

/* Links im Fuß (Gärtnerei, Service ... / Impressum, Datenschutz ...) */
ul.fuss_navi {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
ul.fuss_navi li {
  display: inline;
  margin: 0;
  padding: 0;
  background-color: #808000;
}
ul.fuss_navi li a {
  float: left;
  color: #5E6F2E;
  text-decoration: none;
  font-size: 0.8rem;
  padding-right: 20px;
}
ul.fuss_navi li a:link, ul.fuss_navi li a:visited, ul.fuss_navi li a:active {
  color: #5E6F2E;
}
ul.fuss_navi li a:hover {
  color: #000;
  text-decoration: none;
}


/* 8. BILDWECHSEL, KOPFBILD, BILDANSICHT, "NACH OBEN" ================== */

/* Bildwechsel auf der Startseite */
.flexslider {
  position: relative;
  min-height: 380px;
  z-index: 10;
  overflow: hidden;
}
.flexslider .slides {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  aspect-ratio: 1200 / 578;
}
.flexslider .slides > li {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .6s;
}
.flexslider .slides > li.aktiv {
  opacity: 1;
}
.flexslider .slides img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slider-pause {
  position: absolute;
  right: 80px;
  top: 10px;
  z-index: 20;
  padding: 4px 10px;
  border: 0;
  border-radius: 4px;
  background: rgba(255,255,255,.85);
  color: #000;
  font: inherit;
  font-size: .8rem;
  cursor: pointer;
}

/* Kopfbild der Unterseiten, mit Knopf zum Auf- und Zuklappen */
.kopfhg {
  height: 310px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  transition: height .4s;
}
.kopfhg.offen {
  height: 470px;
}
.kopfbild-schalter {
  position: absolute;
  top: 0;
  right: 65px;
  width: 35px;
  height: 25px;
  border: 0;
  border-radius: 0 0 5px 5px;
  background: #5E6F2E url(../images/pfeiloff.png) no-repeat center 5px;
  box-shadow: 0 2px 3px 1px #333;
  cursor: pointer;
  z-index: 800;
}
.kopfhg.offen .kopfbild-schalter {
  background-color: #d1336d;
  background-image: url(../images/pfeilon.png);
}

/* Bildansicht: vergrößertes Bild mit Knöpfen zurück / weiter / schließen */
dialog.bildfenster {
  border: 0;
  padding: 10px;
  max-width: 95vw;
  max-height: 95vh;
  background: #fff;
  overflow: visible;
}
dialog.bildfenster::backdrop {
  background: rgba(0,0,0,.8);
}
.bildfenster img {
  display: block;
  max-width: calc(95vw - 20px);
  max-height: calc(95vh - 60px);
  width: auto;
  height: auto;
}
.bildfenster figcaption {
  padding-top: 6px;
  font-size: .85rem;
  text-align: center;
}
.bildfenster button {
  position: absolute;
  display: flex;               /* Symbol genau in der Mitte */
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #333;
  cursor: pointer;
  box-shadow: 0 0 4px #333;
}
.bildfenster button:hover {
  color: #b01c41;
}
.bildfenster button svg {
  display: block;
}
.bf-zu      { top: -22px; right: -22px; }
.bf-zurueck { left: -22px; top: 50%; transform: translateY(-50%); }
.bf-weiter  { right: -22px; top: 50%; transform: translateY(-50%); }
.bildfenster.einzeln .bf-zurueck, .bildfenster.einzeln .bf-weiter {
  display: none;
}

/* "Nach oben"-Knopf: erscheint erst nach etwas Scrollen */
a.scrollup {
  display: none;
  width: 61px;
  height: 61px;
  position: fixed;
  bottom: 50px;
  right: 50px;
  text-indent: -9999px;
  background: url('../images/icon_top.png') no-repeat;
  z-index: 5000;
}
a.scrollup.sichtbar {
  display: block;
}


/* 9. FORMULARE (KONTAKT, GUTSCHEIN) =================================== */
fieldset {
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
}
legend {
  font-size: 1rem;
}
label {
  display: block;
  text-align: left;
}
.radiobutton_zustellung input, .radiobutton_zustellung label {
  display: inline-block;
}
/* Eingabefelder */
.form {
  display: block;
  width: 100%;
  height: 2em;
  margin: 0;
  background: #efefef;
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  border-radius: 4px;
  box-shadow: inset 0 0 4px 0 #ddd;
  text-align: left;
  color: #000;
  font-weight: normal;
}
/* Schaltfläche "Absenden" */
.form2 {
  display: inline;
  font-family: Arial, Verdana, Sans-serif;
  font-size: 14px;
  background-color: #5E6F2E;
  color: #fff;
  border: 1px solid #5E6F2E;
  border-radius: 4px;
  box-shadow: 0 0 3px 0 #999;
  padding: 10px;
  cursor: pointer;
}
.form2:hover {
  background-color: #4a5824;
  box-shadow: none;
}
/* Rote Meldung unter einem Pflichtfeld, das leer oder falsch ist (siehe skripte/seite.js) */
.feldfehler {
  display: block;
  margin-top: 4px;
  color: #c00000;
  font-size: .9rem;
  font-weight: 600;
}
.form[aria-invalid="true"] {
  border: 2px solid #c00000;
}
/* Kasten nach dem Absenden: grün = gesendet, rot = Fehler */
.meldung {
  padding: 16px 20px;
  margin-bottom: 20px;
  border-left: 6px solid #5E6F2E;
  background: #efefef;
}
.meldung.fehler {
  border-left-color: #b01c41;
}
.meldung ul {
  margin-bottom: 0;
}
/* Spam-Falle: für Menschen unsichtbar */
.feld-falle {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* 10. HILFSKLASSEN ==================================================== */
/* Kleine Symbole (SVG) in einer Textzeile */
.icon {
  display: inline-block;
  vertical-align: -3px;
}
/* Nur für Screenreader und Google sichtbar (z. B. h1 der Startseite) */
.unsichtbar {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Weniger Bewegung, wenn im Betriebssystem so eingestellt */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}


/* 11. KLEINERE BILDSCHIRME ============================================
   Diese Regeln gelten nur bis zu einer bestimmten Fensterbreite und
   überschreiben die Regeln weiter oben. Deshalb immer am Ende lassen. */

/* Große Bildschirme (ab 951 px): Untermenü per Maus und Tastatur */
@media screen and (min-width: 951px) {
  .nav > li:hover > ul,
  .nav > li:focus-within > ul {
    left: 0;
    text-align: left;
  }
  /* Fußzeile: rechts Platz für die Blüte lassen, damit sie keinen Link verdeckt */
  .inhalte.fuss .vier.spalten {
    padding-right: 60px;
  }
}

/* Kleine Laptops (952 bis 1024 px) */
@media only screen and (min-width: 952px) and (max-width: 1024px) {
  .zeile {
    width: 920px;
  }
  #rahmen {
    width: 100%;
  }
  #logobereich {
    left: 45px;
  }
  #navigation {
    width: 894px;
    margin-left: 30px;
    margin-right: auto;
  }
  .gruen ul.metanavi li a {
    padding-left: 10px;
  }
}

/* Tablet und Handy (bis 950 px) */
@media only screen and (max-width: 950px) {
  /* Großes Hintergrundbild nicht laden (dort fast unsichtbar) */
  body {
    background-image: none;
    background-color: #e9ede0;
  }
  #rahmen {
    width: 96%;
  }
  .kopfhg, .flexslider, a.scrollup, #bluete {
    display: none !important;
  }
  #logobereich {
    position: relative;
    left: 0;
    width: 100%;
    margin: 0 auto 20px;
    box-shadow: none;
    border-radius: 0;
  }
  #navigation {
    width: 100%;
    margin-left: 0;
    margin-top: 0;
    box-shadow: 0 -3px 3px 0 #fff;
    background: 0;
  }
  /* Hauptmenü: aufklappbare Liste unter dem Knopf "Navigation".
     Symbole: drei Striche = Menü öffnen, X = schließen,
     kleiner Winkel rechts = Untermenü auf-/zuklappen. */
  .toggleMenu {
    display: block;
    padding: 0;
  }
  .toggleMenu button {
    min-height: 44px;
    padding-left: 15px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M3 6h18M3 12h18M3 18h18' stroke='white' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 15px center;
  }
  .toggleMenu.active button {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M5 5l14 14M19 5L5 19' stroke='white' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
  }
  .nav {
    display: none;
  }
  .nav.offen {
    display: block;
  }
  .nav > li {
    float: none;
    display: block;
    width: 100%;
    text-align: left;
    border-top: 1px solid rgba(255,255,255,.25); /* feine Trennlinie */
  }
  .nav ul {
    display: block;
    width: 100%;
  }
  .nav li a {
    color: #fff;
    background-color: #b01c41;
    min-height: 44px; /* groß genug zum Tippen */
    line-height: 20px;
    padding: 12px 15px;
  }
  .nav > li.hat-unter > a {
    padding-right: 56px;
  }
  .nav > li > a:hover {
    color: #fff; /* nach dem Antippen nicht grün auf rot */
  }
  /* Untermenü: hellgrau, eingerückt, mit Trennlinien */
  .nav > li.hover > ul {
    position: static;
  }
  .nav li ul {
    border: none;
    padding: 0;
    background: #f7f7f7;
  }
  .nav li li a {
    padding-left: 30px;
    border-top: 1px solid #e3e3e3;
    font-size: 0.9rem;
  }
  .nav .nur-handy {
    display: block;
  }
  .nav .nur-handy a {
    font-weight: 600;
  }
  /* Schalter fürs Untermenü liegt über der GANZEN Zeile "Sortiment":
     Antippen irgendwo auf der Zeile klappt das Untermenü auf */
  .unter-schalter {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 44px;
    border: 0;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M4 7l6 6 6-6' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 17px center;
    cursor: pointer;
    z-index: 1001;
    -webkit-tap-highlight-color: transparent; /* kein blauer Schimmer beim Antippen */
  }
  .unter-schalter[aria-expanded="true"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M4 13l6-6 6 6' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  /* Menüleiste bleibt beim Scrollen oben stehen (siehe skripte/seite.js) */
  html {
    scroll-padding-top: 60px;
  }
  #navigation.fest {
    position: fixed;
    top: 0;
    left: 2%;
    width: 96%;
    z-index: 9000;
    box-shadow: 0 2px 6px rgba(0,0,0,.35);
  }
  #navigation.fest .nav.offen {
    max-height: calc(100vh - 90px); /* lange Liste lässt sich scrollen */
    overflow-y: auto;
  }
  /* Fußbereich */
  .inhalte.fuss.linieoben {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .inhalte.fuss h2 {
    margin-top: 2em;
  }
  .gruen ul.metanavi li {
    float: none;
  }
  .gruen ul.metanavi li a {
    display: block;
    padding: 0.4em 0;
  }
  a.telresp {
    text-decoration: underline !important;
  }
  .grau img {
    margin-bottom: 0.5em;
  }
  p.kontaktfooter {
    margin-bottom: 20px;
    line-height: 250%;
  }
  p.kontaktfooter a {
    display: inline-block;
  }
  ul.fuss_navi a {
    padding: 0;
    display: inline-block;
  }
  ul.fuss_navi li a {
    padding: 10px 20px 10px 0; /* Abstand zum Tippen */
  }
  #gutscheinbutton a {
    width: 100%;
  }
}

/* Schmale Tablets und Handys (bis 790 px): Spalten untereinander */
@media only screen and (max-width: 790px) {
  body {
    -webkit-text-size-adjust: none;
    width: 100%;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .zeile {
    width: auto;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
  }
  .spalte, .spalten {
    width: 100% !important;
    float: none;
  }
  [class*="spalte"] + [class*="spalte"]:last-child {
    float: none;
  }
  .spalte::before, .spalten::before, .spalte::after, .spalten::after {
    content: "";
    display: table;
  }
  .spalte::after, .spalten::after {
    clear: both;
  }
  .zeile .vier, .zeile .sechs:nth-of-type(2) {
    margin-top: 20px !important;
  }
}

/* Handys (bis 767 px): Bildergalerie mit 2 statt 3 Spalten */
@media (max-width: 767px) {
  .gallery .item {
    flex: 0 0 calc(50% - 10px);
  }
}