/* ==========================================================================
   meinmarkt365.de, Stil der neun Musterseiten
   ERZEUGT von scripts/musterseiten_bauen.py, nicht von Hand aendern.
   Quelle ist der seitenspezifische Anteil aus
   gp_design/examples/maerkte/*.html, dort in allen neun identisch.
   ========================================================================== */

.bild-ersatz{position:absolute;inset:0;display:grid;place-items:center;
  background:var(--mm-flaeche-2)}
.bild-ersatz .mm-ikon{width:34%;height:34%;color:var(--mm-text-3);opacity:.55}
/* Ohne diese zwei Zeilen bleibt der Platzhalter über dem Foto liegen: Das
   Browser-Standardblatt setzt [hidden]{display:none}, aber jede eigene
   display-Regel mit Klasse gewinnt dagegen. */
.bild-ersatz[hidden],.mm-bild[hidden]{display:none !important}
.mm-galerie button{position:relative}
.mm-galerie button[aria-current="true"]::after{content:"";position:absolute;inset:0;
  border:3px solid var(--mm-gruen);border-radius:inherit}
.mm-karte{cursor:pointer;text-align:left;width:100%;font:inherit;color:inherit}
.mm-galerie button{border:0;padding:0;cursor:pointer;background:none}
.hero{padding:var(--mm-a10) 0 var(--mm-a6)}
.hero h1{font-size:var(--mm-fs-gross);letter-spacing:var(--mm-sperr-eng);line-height:1.1}
.hero p{color:var(--mm-text-2);max-width:var(--mm-breite-text);margin-top:var(--mm-a3)}
.leiste{position:sticky;top:64px;z-index:20;background:var(--mm-grund);
  border-top:1px solid var(--mm-linie);border-bottom:1px solid var(--mm-linie);
  padding:var(--mm-a4) 0;margin-bottom:var(--mm-a6)}
.leiste__felder{display:grid;gap:var(--mm-a3);
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.leiste__chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:var(--mm-a3)}
.zeile-oben{display:flex;align-items:center;gap:var(--mm-a4);flex-wrap:wrap;
  margin-bottom:var(--mm-a4)}
.zeile-oben__zahl{font-size:var(--mm-fs-h3);font-weight:var(--mm-fett-voll)}
.detail{display:grid;gap:var(--mm-a6);grid-template-columns:1fr}
@media (min-width:760px){.detail{grid-template-columns:1.3fr 1fr}}
.angaben{width:100%;border-collapse:collapse;font-size:var(--mm-fs-klein)}
.angaben td{padding:9px 0;border-bottom:1px solid var(--mm-linie)}
.angaben td:first-child{color:var(--mm-text-2);width:48%}
.angaben td:last-child{text-align:right;font-weight:var(--mm-fett-halb)}
.anbieter{border:1px solid var(--mm-linie);border-radius:var(--mm-radius);
  padding:var(--mm-a4);background:var(--mm-flaeche)}
.nr{font-family:ui-monospace,Consolas,monospace;font-size:var(--mm-fs-mini);
  color:var(--mm-text-2);letter-spacing:.02em}
.formular{display:grid;gap:var(--mm-a4);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.formular__voll{grid-column:1/-1}
.nur-handy{display:none}
.bildnachweis{margin-bottom:var(--mm-a5);font-size:var(--mm-fs-mini);color:var(--mm-text-3)}
.bildnachweis summary{cursor:pointer;color:var(--mm-text-2)}
.bildnachweis p{margin-top:var(--mm-a2);line-height:1.6}
.bildnachweis a{color:inherit}
@media (max-width:700px){
  .leiste__felder,.leiste__chips{display:none}
  .nur-handy{display:block}
}

img.nur-dunkel{display:none !important}
img.nur-hell{display:block !important}
[data-mm-modus="dunkel"] img.nur-hell{display:none !important}
[data-mm-modus="dunkel"] img.nur-dunkel{display:block !important}
@media (prefers-color-scheme:dark){
  :root:not([data-mm-modus="hell"]) img.nur-hell{display:none !important}
  :root:not([data-mm-modus="hell"]) img.nur-dunkel{display:block !important}
}

/* --------------------------------------------------- Musterdaten-Pille */
/* Sitzt auf jeder Trefferkarte in der Bildecke und einmal neben der
   Marktueberschrift. Limette als Flaeche mit schwarzem Text, also 15,9:1
   und in beiden Modi lesbar. */
.mm-medien > .muster-pille {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  box-shadow: 0 1px 4px rgb(0 0 0 / .25);
}
.hero h1 .muster-pille { vertical-align: middle; margin-left: var(--mm-a3); }
/* Auf den vier Vermittlungsmaerkten gibt es keine Bilder, dort sitzt die
   Pille im Textteil der Karte. */
.mm-karte__text > .muster-pille { align-self: flex-start; margin-bottom: 4px; }
.muster-hinweis {
  color: var(--mm-text-3); font-size: var(--mm-fs-klein);
  margin-top: var(--mm-a2);
}

/* --------------------------------------------------- Bildergalerie */
/* Genau VIER Miniaturen, die erste ist das Hauptbild (Manni,
   02.08.2026). Wer weiter will, blaettert am seitlichen Rand des
   grossen Bildes; die Viererreihe wandert dabei mit. */
.galerie__streifen {
  display: grid; gap: var(--mm-a2); margin-top: var(--mm-a2);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* Die Pille am grossen Bild sitzt rechts oben, weil links schon die
   Musterdaten-Pille steht. Sie erscheint nur beim ersten Bild. */
.galerie__haupt {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  background: var(--mm-text); color: var(--mm-grund);
}
.galerie__mini-haupt {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 2px 0; text-align: center;
  font-size: var(--mm-fs-mini); font-weight: var(--mm-fett-halb);
  background: color-mix(in oklab, var(--mm-text) 78%, transparent);
  color: var(--mm-grund);
}
/* Das aktuell oben gezeigte Bild ist unten deutlich markiert, sonst
   verliert man beim Durchklicken die Orientierung. */
.galerie__streifen [aria-current="true"] {
  outline: 3px solid var(--mm-gruen-strich); outline-offset: -3px;
}
.galerie__streifen button { position: relative; padding: 0; border: 0;
  background: none; cursor: pointer; touch-action: manipulation;
  border-radius: var(--mm-radius-klein); overflow: hidden; }
/* Pfeile ueber dem grossen Bild. Tippziel 48 px, das ist die Vorgabe
   des Designsystems fuer alles, was mit dem Daumen getroffen wird. */
.galerie__pfeil {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: var(--mm-tippziel); height: var(--mm-tippziel);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; line-height: 1; border: 0; cursor: pointer;
  border-radius: var(--mm-radius-rund);
  background: color-mix(in oklab, var(--mm-grund) 82%, transparent);
  color: var(--mm-text);
  box-shadow: 0 0 0 1px var(--mm-rand);
}
.galerie__pfeil--zurueck { left: var(--mm-a2); }
.galerie__pfeil--vor     { right: var(--mm-a2); }
.galerie__pfeil:hover { background: var(--mm-grund); }

/* -------------------------------------------------------- Ausstattung */
/* „Anhaengerkupplung“ ragte aus dem Feld heraus (Manni, 02.08.2026).
   Lange Komposita brauchen eine Trennmoeglichkeit; die Seite ist
   lang="de", also kann der Browser richtig trennen. min-width:0, weil
   Flex- und Rasterkinder sonst nicht unter ihre Inhaltsbreite
   schrumpfen duerfen. */
.mm-merkmal { min-width: 0; }
.mm-merkmal > span {
  min-width: 0; flex: 1 1 auto;
  hyphens: auto; overflow-wrap: anywhere;
}

/* ------------------------------------------------- Suche der Marktseite */
/* Ausgeblendet, weil der Suchbegriff nicht passt. Mit !important, weil
   .mm-karte selbst display setzt und ein blosses [hidden] dagegen
   verliert. */
.mm-karte.markt-weg { display: none !important; }
.markt-treffer {
  max-width: var(--mm-breite-text); margin: 0 auto var(--mm-a4);
  color: var(--mm-text-2); font-size: var(--mm-fs-klein);
}

/* ------------------------------------------------ Kopfleiste am Handy */
/* Bei 320 px ist die rechte Gruppe (Merkliste, Modus-Umschaltung, Knopf
   'Anzeige aufgeben') zusammen mit Logo und Suchzeile 360 px breit. Sie
   bricht nicht um und schiebt die ganze Seite auf 615 px, dann scrollt
   alles quer. Gemessen am 02.08.2026.

   Deshalb unter 560 px: die Zeile darf umbrechen, die Suche bekommt eine
   eigene volle Zeile, und die Modus-Umschaltung faellt weg. Der Farbmodus
   geht dadurch nicht verloren, die Voreinstellung ist 'auto' und folgt
   weiter der Einstellung des Geraets. */
@media (max-width: 559px) {
  .mm-kopf { flex-wrap: wrap; row-gap: var(--mm-a3); }
  .mm-kopf .mm-suche { order: 10; flex: 1 0 100%; max-width: none; }
  .mm-kopf__rechts .mm-segmente { display: none; }
  .mm-kopf__marke img { height: 28px; }
  /* Die Filterleiste klebt unter dem Kopf. Wird der Kopf zweizeilig,
     muss ihr Klebepunkt mitwandern, sonst verdeckt sie ihn. */
  .leiste { top: 108px; }
}

/* Fussleiste, gleiche Optik wie auf den Rechtsseiten. */
.fuss-nav { display: flex; flex-wrap: wrap; gap: var(--mm-a4); }
.fuss-nav a { color: var(--mm-text-2); font-size: var(--mm-fs-klein); }

/* Auf Schwarz verschwinden duenne Linien fast. Im Dunkelmodus
   deshalb kraeftiger (Vorgabe Manni, 02.08.2026). */
[data-mm-modus="dunkel"] .naehte line {
  stroke: var(--mm-rand-stark); stroke-width: 1.8;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-mm-modus="hell"]) .naehte line {
    stroke: var(--mm-rand-stark); stroke-width: 1.8;
  }
}

/* Logo hell gegen dunkel */
img.nur-dunkel { display: none !important; }
img.nur-hell   { display: block !important; }
[data-mm-modus="dunkel"] img.nur-hell   { display: none !important; }
[data-mm-modus="dunkel"] img.nur-dunkel { display: block !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-mm-modus="hell"]) img.nur-hell   { display: none !important; }
  :root:not([data-mm-modus="hell"]) img.nur-dunkel { display: block !important; }
}