/* ==========================================================================
   Sportalm Shop, Hauptstilvorlage des Themes
   --------------------------------------------------------------------------
   Entstanden aus der Klick-Demo vom 19.08.2026, die Lisa abgenommen hat.
   Festgelegt am 25.08.2026: Salomon Schwarz-Weiss, Inter fuer alles.

   GRUNDLAGE, gemessen an der echten Salomon-Seite (salomon.com/de-de/c/men,
   19.08.2026, aus den berechneten Stilen der Live-Seite ausgelesen):
   - Schrift Inter, Grundtext 14px, Gewicht 400, viel Weissraum.
   - Produktname 14px, Gewicht 700, GROSSBUCHSTABEN, darunter eine graue
     Zeile mit der Kategorie, dann der Preis ohne Zierrat.
   - Text #262626 bis Schwarz auf Weiss.
   - Graustufen #fafafa, #f5f5f5, #e5e5e5, #a1a1a1. Radius 8px.
   - Keine Signalfarbe im Katalog, Schwarz ist der Knopf.

   Eine Signalfarbe waere eine Zeile: --signal unten bei den Werten. Der
   verworfene Entwurf mit Orange nutzte #e8952a fuer Kaufknopf und
   Groessenverfuegbarkeit.

   Die alte Fassung liegt als main-0.1.0-alt.css daneben, bis der Umbau
   abgenommen ist.
   ========================================================================== */
/* --- Schriften, lokal, keine Anfrage nach draussen ----------------------- */

@font-face{
  font-family:"Inter";
  src:url("fonts/inter.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
/* --- Werte --------------------------------------------------------------- */

:root{
  /* Flaechen, Salomon-Graustufen */
  --weiss:#ffffff;
  --grau-50:#fafafa;
  --grau-100:#f5f5f5;
  --grau-200:#e5e5e5;
  --grau-400:#a1a1a1;
  --ink:#262626;
  --schwarz:#000000;

  /* ZWEI EBENEN VON HANDLUNG, bewusst getrennt (Michaels Entscheidung
     05.09.2026, strenge Fassung).

     --signal  Schwarz. Jede Handlung, die weiterfuehrt, aber nichts kauft:
               Navigation, Suche, "Schuhe ansehen", "Im Laden reservieren".

     --kaufen  Orange. Ausschliesslich die Schritte, die tatsaechlich zum
               Kauf fuehren: in den Warenkorb, weiter zur Kasse, bestellen.

     Damit heisst Orange im ganzen Shop genau eine Sache. Wuerde auch
     "Schuhe ansehen" orange leuchten, waere es wieder nur eine huebsche
     Farbe und kein Signal.

     Zu den Werten: Orange hebt sich nicht ueber Helligkeit ab (Kontrast zu
     Weiss nur 2,4), sondern ueber den Farbton. Die Schrift darauf ist
     dunkel, #262626 auf #e8952a ergibt 6,32 und ist gut lesbar. Weiss auf
     Orange ergaebe 2,4 und faellt durch. Ein dunkleres Orange verbietet
     sich, es kaeme dem alten Sale-Rot zu nahe. */
  --signal:#000000;
  --signal-text:#ffffff;
  --signal-dunkel:#262626;

  --kaufen:#e8952a;
  --kaufen-text:#262626;
  --kaufen-dunkel:#c87a17;

  /* Frueher ein kraeftiges Rot fuer reduzierte Preise. Aufgegeben am
     05.09.2026: Wenn 100 Prozent der Artikel reduziert sind, traegt die
     Farbe keine Information mehr, sie ist konstant. Zwei warme Signale
     uebereinander (roter Preis, oranger Kaufknopf) schwaechen sich
     gegenseitig. Der durchgestrichene alte Preis sagt ohnehin alles.
     Bleibt als Variable stehen, damit echte Aktionen sie spaeter wieder
     bekommen koennen. */
  --reduziert:#262626;

  --radius:8px;
  --radius-gross:8px;
  --breite:1360px;
  --luft:clamp(16px, 3vw, 40px);

  --schrift-text:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --schrift-titel:var(--schrift-text);
  --titel-transform:uppercase;
  --titel-spacing:-0.01em;
  --titel-gewicht:700;
}

/* --- Grundlagen ---------------------------------------------------------- */

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

body{
  margin:0;
  background:var(--weiss);
  color:var(--ink);
  font-family:var(--schrift-text);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}

h1,h2,h3{
  font-family:var(--schrift-titel);
  font-weight:var(--titel-gewicht);
  text-transform:var(--titel-transform);
  letter-spacing:var(--titel-spacing);
  line-height:1.1;
  margin:0 0 .5em;
  color:var(--schwarz);
}

h1{font-size:clamp(26px,3.4vw,40px)}
h2{font-size:clamp(20px,2.4vw,28px)}
h3{font-size:16px}

.mitte{width:min(100% - 2*var(--luft), var(--breite));margin-inline:auto}

.nur-vorlesen{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}
.sprungmarke{position:absolute;left:-9999px;top:0;background:var(--schwarz);color:#fff;padding:10px 16px;z-index:200}
.sprungmarke:focus{left:8px;top:8px}
:where(a,button,input,select,summary):focus-visible{outline:2px solid var(--schwarz);outline-offset:2px}

/* --- Kopf ---------------------------------------------------------------- */

.dienstzeile{background:var(--schwarz);color:#fff;font-size:13px;letter-spacing:.02em}
.dienstzeile-inner{display:flex;gap:30px;justify-content:center;flex-wrap:wrap;padding:9px 0}

.kopf{border-bottom:1px solid var(--grau-200);background:var(--weiss);position:sticky;top:0;z-index:100}
.kopf-inner{display:flex;align-items:center;gap:24px;padding:16px 0}
.marke{text-decoration:none;flex:0 0 auto;font-weight:700;letter-spacing:.02em;font-size:17px;text-transform:uppercase;color:var(--schwarz)}

/* Das Logo bringt seine eigenen Masse mit (1177 mal 552 Pixel). Ohne
   Begrenzung fuellt es den halben Kopfbereich, gemessen 590 Pixel breit.
   Die Hoehe fuehrt, damit die Kopfzeile unabhaengig vom Seitenverhaeltnis
   ruhig bleibt. */
/* 64 statt 54 Pixel: Das Logo traegt viel Flaeche (Berg, Himmel, Sonne),
   der eigentliche Schriftzug nimmt nur ein Drittel der Hoehe ein. Bei 54
   war "Bayrischzell" nicht mehr lesbar. Der Kopfbereich waechst dadurch auf
   96 Pixel, das ist vertretbar. */
.marke img,
.custom-logo-link img,
img.custom-logo{max-height:64px;width:auto;height:auto;display:block}
.custom-logo-link{flex:0 0 auto;display:block;line-height:0}
.marke small{display:block;font-size:10.5px;letter-spacing:.18em;font-weight:500;color:var(--grau-400)}

.suche{flex:1 1 auto;display:flex;max-width:460px;margin-inline:auto}
.suche input[type="search"]{
  flex:1;border:1px solid var(--grau-200);border-right:0;
  border-radius:var(--radius) 0 0 var(--radius);
  padding:10px 14px;font:inherit;background:var(--grau-50);
}
.suche button{
  border:0;background:var(--schwarz);color:#fff;font:inherit;font-weight:500;
  padding:10px 18px;border-radius:0 var(--radius) var(--radius) 0;cursor:pointer;
}

/* Beide Eintraege rechts im Kopf sind gleich aufgebaut: Element, dann
   Zaehler daneben. Vorher schwebte der Zaehler der Wunschliste absolut
   ueber dem Herz (oben rechts), waehrend der des Warenkorbs im Textfluss
   stand. Die beiden Zahlen lagen dadurch 9 Pixel versetzt und waren
   unterschiedlich gross (18 gegen 20 Pixel, 10,5 gegen 11 Pixel Schrift).
   Michaels Ansage 05.09.2026: Sie gehoeren auf eine Linie.

   Geloest ueber align-items im Flexkasten statt ueber absolute Werte.
   Absolute Positionen muessten bei jeder Schriftaenderung nachgerechnet
   werden, eine gemeinsame Mittelachse haelt von selbst. */
.kopf-rechts{margin-left:auto;flex:0 0 auto;display:flex;gap:18px;align-items:center}
.kopf-rechts a{text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.warenkorb-zahl{
  background:var(--schwarz);color:#fff;border-radius:999px;
  min-width:20px;height:20px;display:inline-grid;place-items:center;font-size:11px;
}

.hauptnavigation{border-bottom:1px solid var(--grau-200)}
.navzeile{
  display:flex;align-items:center;gap:24px;
  width:min(100% - 2*var(--luft), var(--breite));margin:0 auto;
}
.menue{display:flex;gap:28px;list-style:none;padding:0;margin:0}

/* Damen und Herren stehen vor den Kategorien, wie bei Salomon. Der Trenner
   macht sichtbar, dass hier zwei verschiedene Fragen gestellt werden:
   fuer wen, und danach welche Art Schuh. */
.menue--wer{gap:20px;padding-right:24px;border-right:1px solid var(--grau-200)}
.menue--wer a{font-weight:700}
.menue a{
  display:block;text-decoration:none;font-size:14px;font-weight:500;
  letter-spacing:.04em;text-transform:uppercase;padding:12px 0;
  border-bottom:2px solid transparent;
}
.menue a:hover,.menue a[aria-current]{border-bottom-color:var(--schwarz)}

/* --- Hero ---------------------------------------------------------------- */

.hero{position:relative;background:var(--grau-100)}
.hero-inner{display:grid;grid-template-columns:1fr}
.hero-text{padding:clamp(28px,5vw,64px);display:flex;flex-direction:column;justify-content:center;background:var(--weiss)}
.hero-kicker{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--grau-400);margin:0 0 16px;font-weight:600}
.hero h1{margin:0 0 16px;max-width:20ch}
.hero-text p{margin:0 0 28px;font-size:15px;max-width:44ch;color:#525252}
.hero-knoepfe{display:flex;gap:10px;flex-wrap:wrap}
.hero-bild{background:var(--grau-100);display:grid;place-items:center;min-height:300px}

@media (min-width:900px){
  .hero-inner{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .hero-bild{min-height:520px}
  .hero-text{padding-left:max(var(--luft), calc((100vw - var(--breite)) / 2))}
}

/* --- Knoepfe ------------------------------------------------------------- */

.knopf{
  display:inline-block;background:var(--signal);color:var(--signal-text);border:0;
  border-radius:var(--radius);padding:13px 26px;font:inherit;font-size:14px;font-weight:600;
  text-decoration:none;cursor:pointer;transition:background .15s ease;
}
.knopf:hover{background:var(--signal-dunkel);color:var(--signal-text)}
.knopf--leise{background:transparent;color:var(--schwarz);border:1px solid var(--schwarz)}
.knopf--leise:hover{background:var(--schwarz);color:#fff}

/* --- Groesseneinstieg ---------------------------------------------------- */

.groessenband{background:var(--schwarz);color:#fff;padding:clamp(36px,5vw,60px) 0}
.groessenband h2{color:#fff;margin:0 0 10px}
.groessenband-kopf{max-width:56ch;margin:0 0 28px}
.groessenband-kopf p{margin:0;color:#a1a1a1;font-size:14px}

/* Umschalter Damen/Herren. Sitzt im dunklen Band und in der Filterleiste,
   deshalb erbt er die Farben vom Umfeld statt sie festzuschreiben. */
.wer-schalter{
  display:inline-flex;margin:0 0 16px;
  border:1px solid var(--grau-200);border-radius:var(--radius);overflow:hidden;
}
.wer-schalter button{
  font:inherit;font-size:13px;font-weight:600;letter-spacing:.02em;
  padding:8px 20px;border:0;background:transparent;color:inherit;cursor:pointer;
  transition:background .12s ease,color .12s ease;
}
.wer-schalter button + button{border-left:1px solid var(--grau-200)}

/* Im dunklen Band die Linien an die Groessen-Schalter angleichen. Keine
   Transparenz auf dem ganzen Schalter, sonst wird der aktive Zustand stumpf. */
.groessenband .wer-schalter,
.groessenband .wer-schalter button + button{border-color:#404040}
.groessenband .wer-schalter button:hover{background:#171717}
.groessenband .wer-schalter button[aria-pressed="true"]{background:#fff;color:var(--schwarz)}

.filterleiste .wer-schalter button:hover{background:var(--grau-50)}
.filterleiste .wer-schalter button[aria-pressed="true"]{background:var(--schwarz);color:#fff}
[hidden]{display:none !important}

.groessenwahl{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;padding:0}
.groessenwahl a{
  display:inline-grid;place-items:center;min-width:64px;padding:11px 10px;
  border:1px solid #404040;border-radius:var(--radius);background:#171717;
  text-decoration:none;font-size:15px;font-weight:600;line-height:1.1;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.groessenwahl a:hover{background:var(--signal);border-color:var(--signal);color:var(--signal-text)}
.groessenwahl small{display:block;font-size:10.5px;font-weight:400;color:#a1a1a1;margin-top:2px}
.groessenwahl a:hover small{color:inherit;opacity:.75}
.groessenwahl li.leer a{opacity:.32;pointer-events:none;text-decoration:line-through}
.groessenband-fuss{margin:0;font-size:12.5px;color:#a1a1a1}

/* --- Abschnitte ---------------------------------------------------------- */

.abschnitt{padding:clamp(36px,5vw,64px) 0}
.abschnitt-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:24px;flex-wrap:wrap}
.abschnitt-kopf h2{margin:0}
.abschnitt-mehr{font-size:13px;font-weight:500;text-decoration:none;border-bottom:1px solid var(--grau-400);padding-bottom:2px}
.abschnitt-mehr:hover{border-bottom-color:var(--schwarz)}

/* --- Kategoriekacheln ---------------------------------------------------- */

.kategorien{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.kategorie{position:relative;display:block;border-radius:var(--radius);overflow:hidden;background:var(--grau-100);text-decoration:none;aspect-ratio:4/5}
.kategorie-name{
  position:absolute;left:0;right:0;bottom:0;
  /* Kraeftiger Verlauf mit Mittelstop statt einfachem Abdunkeln.
     Grund: Die Salomon-Produktfotos sind auf WEISS freigestellt, und wo
     keins vorhanden ist, steht eine hellgraue Flaeche. Weisse Schrift auf
     hellem Grund ist dort unlesbar. Gemessen am 12.09.2026 auf der
     Startseite: Mit dem alten Verlauf (.72, ohne Mittelstop) war
     "WANDERSCHUHE" auf der bildlosen Kachel kaum zu entziffern.
     Der Mittelstop haelt die Flaeche hinter der Schrift dunkel, statt
     schon auf halber Hoehe durchsichtig zu werden. */
  background:linear-gradient(to top,
    rgba(0,0,0,.88) 0%,
    rgba(0,0,0,.72) 45%,
    rgba(0,0,0,0) 100%);
  color:#fff;padding:48px 16px 14px;
  font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:14px;
  text-shadow:0 1px 2px rgba(0,0,0,.4);
}
.kategorie-name span{display:block;font-size:12px;font-weight:400;letter-spacing:0;text-transform:none;opacity:.92;margin-top:2px}

/* --- Produktkacheln, Aufbau wie bei Salomon ----------------------------- */

.produkte{list-style:none;margin:0;padding:0;display:grid;gap:24px 14px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.produkt{margin:0}
/* Alle Produktbilder in denselben Rahmen.
   Im echten Sortiment liegen 4:3, 3:2, quadratisch und Ausreisser gemischt
   vor. Ohne festes Verhaeltnis beginnt jede Kachel woanders und die Reihe
   wirkt unruhig. Feste quadratische Flaeche, Bild eingepasst statt
   beschnitten, damit kein Schuh angeschnitten wird.
   Hintergrund weiss, weil 44 von 46 geprueften Fotos auf Weiss freigestellt
   sind und so nahtlos in der Flaeche stehen. */
.kachel-bild{
  position:relative;display:block;aspect-ratio:1;
  background:var(--weiss);border-radius:var(--radius);overflow:hidden;text-decoration:none;
}
.kachel-bild img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;padding:6%;
}
.kachel-merker{
  position:absolute;top:8px;left:8px;background:var(--schwarz);color:#fff;
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:5px 9px;border-radius:4px;
}
.kachel-merker--sale{background:var(--reduziert)}
.kachel-name{
  margin:12px 0 2px;font-family:var(--schrift-text);
  font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:0;line-height:1.3;
}
.kachel-name a{text-decoration:none}
.kachel-name a:hover{text-decoration:underline}
.kachel-art{margin:0 0 6px;font-size:14px;color:#525252}
.kachel-preis{display:block;font-size:15px;font-weight:500;margin:0 0 10px}
.preis-alt{color:var(--grau-400);text-decoration:line-through;margin-right:6px;font-weight:400}
.preis-neu{color:var(--reduziert);font-weight:600}

/* Groessenreihe auf der Kachel: der Unterschied zu jedem grossen Shop */
.groessen{list-style:none;display:flex;flex-wrap:wrap;gap:4px;margin:0 0 6px;padding:0}
.groesse{
  font-size:12.5px;border:1px solid var(--grau-200);border-radius:4px;
  padding:2px 6px;min-width:30px;text-align:center;background:var(--weiss);
}
.groesse--weg{color:#c4c4c4;border-color:var(--grau-100);background:var(--grau-50);text-decoration:line-through}
.groessen-hinweis{margin:0;font-size:13px;color:#525252}
.groessen-hinweis--knapp{color:var(--schwarz);font-weight:600}

/* --- Vertrauensblock ---------------------------------------------------- */

.vertrauen{background:var(--grau-50);border-block:1px solid var(--grau-200);padding:clamp(30px,4vw,44px) 0}
.vertrauen-liste{list-style:none;margin:0;padding:0;display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.vertrauen-liste li{display:flex;gap:12px;align-items:flex-start}
.vertrauen-liste svg{flex:0 0 22px;width:22px;height:22px;stroke:var(--schwarz);fill:none;stroke-width:1.6}
.vertrauen-titel{display:block;font-weight:600;font-size:14px;margin-bottom:2px;text-transform:uppercase;letter-spacing:.02em}
.vertrauen-liste p{margin:0;font-size:13px;color:#525252}

/* --- Textblock ---------------------------------------------------------- */

.textblock{padding:clamp(36px,5vw,64px) 0}
.textblock-inner{max-width:70ch}
.textblock p{margin:0 0 14px;font-size:15px;line-height:1.65}

/* --- Katalogseite ------------------------------------------------------- */

.krumen{font-size:12.5px;color:#525252;margin:0 0 12px}
.krumen a{color:#525252;text-decoration:none}
.krumen a:hover{color:var(--schwarz);text-decoration:underline}

.inhalt{padding:clamp(24px,4vw,44px) 0 72px}
.inhalt--breit{width:min(100% - 2*var(--luft), var(--breite));margin-inline:auto}

.katalogkopf{margin:0 0 26px}
.katalogkopf p{margin:0;color:#525252;font-size:14px;max-width:62ch}

.filterleiste{border:1px solid var(--grau-200);border-radius:var(--radius);padding:16px;margin:0 0 26px}
.filter-titel{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#525252;margin:0 0 10px;font-weight:600}
.filter-groessen{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px;padding:0}
.filter-groessen button{
  font:inherit;font-size:13px;font-weight:500;padding:7px 14px;
  border:1px solid var(--grau-200);border-radius:var(--radius);background:var(--grau-50);cursor:pointer;
}
.filter-groessen button:hover{border-color:var(--schwarz)}
.filter-groessen button[aria-pressed="true"]{background:var(--schwarz);color:#fff;border-color:var(--schwarz)}
.filter-groessen .weg button{color:#c4c4c4;background:var(--grau-50);border-color:var(--grau-100);text-decoration:line-through;cursor:not-allowed}
.filter-zeile{display:flex;gap:10px;flex-wrap:wrap;align-items:center;border-top:1px solid var(--grau-200);padding-top:14px}
.filter-zeile select{font:inherit;font-size:13px;padding:8px 12px;border:1px solid var(--grau-200);border-radius:var(--radius);background:var(--weiss)}
.filter-stand{margin:0 0 0 auto;font-size:13px;color:#525252}

/* --- Produktseite ------------------------------------------------------- */

.produkt-oben{display:grid;gap:clamp(24px,4vw,56px);grid-template-columns:1fr;align-items:start}
@media (min-width:960px){
  .produkt-oben{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .kaufspalte{position:sticky;top:150px}
}

.galerie-haupt{background:var(--grau-100);border-radius:var(--radius);overflow:hidden}
.galerie-klein{list-style:none;margin:10px 0 0;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.galerie-klein li{width:78px;aspect-ratio:1;background:var(--grau-100);border-radius:var(--radius);overflow:hidden;border:1px solid transparent;cursor:pointer}
.galerie-klein li.aktiv{border-color:var(--schwarz)}

.kauf-kategorie{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#525252;margin:0 0 8px;font-weight:600}
.kaufspalte h1{margin:0 0 8px;font-size:clamp(22px,2.6vw,30px)}
.kauf-einordnung{margin:0 0 20px;font-size:14px;color:#525252;max-width:46ch}
.kauf-preis{font-size:22px;font-weight:600;margin:0 0 2px;color:var(--schwarz)}
.kauf-preis-hinweis{margin:0 0 26px;font-size:12px;color:#525252}

.groessen-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:10px}
.groessen-kopf strong{font-size:13px;text-transform:uppercase;letter-spacing:.06em}
.groessen-hilfe{font-size:13px;color:#525252;text-decoration:underline;cursor:pointer;background:none;border:0;font-family:inherit;padding:0}

.groessen-raster{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px;grid-template-columns:repeat(auto-fill,minmax(74px,1fr))}
.groessen-raster button{
  width:100%;min-height:54px;padding:10px 4px;font:inherit;font-size:15px;font-weight:500;
  background:var(--weiss);border:1px solid var(--grau-200);border-radius:var(--radius);
  cursor:pointer;line-height:1.15;transition:border-color .12s ease,background .12s ease;
}
.groessen-raster button:hover{border-color:var(--schwarz)}
.groessen-raster button[aria-pressed="true"]{border-color:var(--schwarz);background:var(--schwarz);color:#fff}
.groessen-raster small{display:block;font-size:10.5px;font-weight:400;margin-top:2px;color:#525252}
.groessen-raster button[aria-pressed="true"] small{color:#d4d4d4}
.groessen-raster .weg button{color:#c4c4c4;background:var(--grau-50);border-color:var(--grau-100);text-decoration:line-through;cursor:not-allowed}
.groessen-raster .weg small{color:#c4c4c4;text-decoration:none}

.passform{margin:0 0 22px;font-size:13px;color:#525252}
.anderes-modell{margin:-12px 0 22px;font-size:13px;color:#525252}
.anderes-modell a{font-weight:500}

.knopf--kauf{width:100%;text-align:center;padding:16px 24px;font-size:15px}
.kauf-zweitweg{width:100%;text-align:center;margin-top:8px}

.zusagen{list-style:none;margin:24px 0 0;padding:20px 0 0;border-top:1px solid var(--grau-200)}
.zusagen li{display:flex;gap:10px;font-size:14.5px;margin-bottom:10px}
.zusagen svg{flex:0 0 16px;width:16px;height:16px;stroke:var(--schwarz);fill:none;stroke-width:2.2;margin-top:3px}

.details{margin-top:clamp(36px,5vw,60px);max-width:80ch}
.details details{border-top:1px solid var(--grau-200)}
.details details:last-child{border-bottom:1px solid var(--grau-200)}
.details summary{
  cursor:pointer;padding:16px 0;font-size:13px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;list-style:none;display:flex;justify-content:space-between;
}
.details summary::-webkit-details-marker{display:none}
.details summary::after{content:"+";font-size:17px;font-weight:400;line-height:1}
.details details[open] summary::after{content:"\2013"}
.details-inhalt{padding:0 0 22px;font-size:14px}
.details-inhalt p{margin:0 0 12px}
.datentabelle{width:100%;border-collapse:collapse;font-size:14px}
.datentabelle th,.datentabelle td{text-align:left;padding:9px 0;border-bottom:1px solid var(--grau-200);vertical-align:top}
.datentabelle th{width:42%;font-weight:600;color:#525252}

.kaufleiste{
  position:fixed;left:0;right:0;bottom:0;background:var(--weiss);
  border-top:1px solid var(--grau-200);padding:10px 16px;display:none;gap:12px;align-items:center;z-index:110;
  box-shadow:0 -6px 22px rgba(0,0,0,.07);
}
.kaufleiste .kauf-preis{margin:0;font-size:18px}
.kaufleiste .knopf{flex:1;text-align:center;padding:14px 20px}
@media (max-width:959px){
  .kaufleiste{display:flex}
  body{padding-bottom:74px}
}

/* --- Fusszeile ---------------------------------------------------------- */

.fuss{background:var(--grau-50);margin-top:60px;padding:48px 0 20px;border-top:1px solid var(--grau-200)}
.fuss-inner{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.fuss-titel{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px;font-family:var(--schrift-text)}
.fuss p{margin:0 0 10px;font-size:13px;color:#525252;max-width:40ch}
.fuss-menue{list-style:none;margin:0;padding:0}
.fuss-menue li{margin-bottom:6px}
.fuss-menue a{font-size:13px;color:#525252;text-decoration:none}
.fuss-menue a:hover{color:var(--schwarz);text-decoration:underline}
.fuss-zeile{border-top:1px solid var(--grau-200);margin-top:32px;padding-top:16px}
.fuss-zeile p{font-size:12px}

/* --- Kleine Bildschirme ------------------------------------------------- */

@media (max-width:860px){
  .kopf-inner{flex-wrap:wrap;gap:10px;padding:12px 0}
  .suche{order:3;flex:1 0 100%;max-width:none;margin:0}

  /* Servicezeile in einer Zeile lassen und seitlich schiebbar machen.
     Zwei Zeilen Kleingedrucktes ganz oben kosten Platz, den der Katalog
     besser braucht. */
  .dienstzeile-inner{
    gap:18px;font-size:11.5px;padding:7px 0;
    flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    scrollbar-width:none;
  }
  .dienstzeile-inner::-webkit-scrollbar{display:none}
  .dienstzeile-inner span{white-space:nowrap}
  .navzeile{gap:14px;overflow-x:auto}
  .menue{gap:18px;flex-wrap:nowrap}
  .menue--wer{padding-right:14px}
  .menue a{white-space:nowrap}
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* ==========================================================================
   WooCommerce-Anbindung
   --------------------------------------------------------------------------
   Das Theme erzeugt die Kachel ueber Hooks in inc/woocommerce.php und
   vergibt dort die eigenen Klassen. WooCommerce bringt zusaetzlich eigene
   Klassen mit, die hier auf dieselbe Optik gezogen werden, statt sie mit
   kopierten Templates zu verdraengen.
   ========================================================================== */

/* Produktliste: Woo nutzt ul.products > li.product statt ul.produkte > li */
.woocommerce ul.products,
ul.products{
  list-style:none;margin:0;padding:0;display:grid;gap:24px 14px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
}
.woocommerce ul.products::before,
.woocommerce ul.products::after{content:none}
/* Kachel als Spalte, damit Groessenzeile und Hinweis unten buendig stehen.
   Sonst rutscht bei einem dreizeiligen Produktnamen alles Folgende nach
   unten und die Reihe franst aus. */
ul.products li.product{
  margin:0;width:auto;float:none;clear:none;
  display:flex;flex-direction:column;
}
ul.products li.product .groessen{margin-top:auto}
ul.products li.product .kachel-name{min-height:2.5em}

/* Preis: Woo gibt span.price aus, gestaltet wie .kachel-preis */
ul.products li.product .price{
  display:block;font-size:15px;font-weight:500;margin:0 0 10px;color:var(--ink);
}
ul.products li.product .price del{color:var(--grau-400);text-decoration:line-through;margin-right:6px;font-weight:400;opacity:1}
ul.products li.product .price ins{color:var(--reduziert);font-weight:600;text-decoration:none}

/* Woo-Meldungen in der Hausoptik statt im Plugin-Blau */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
  list-style:none;margin:0 0 20px;padding:14px 16px;font-size:14px;
  border:1px solid var(--grau-200);border-left:3px solid var(--schwarz);
  background:var(--grau-50);border-radius:var(--radius);
}
.woocommerce-error{border-left-color:var(--reduziert)}

/* Sortierung und Trefferzahl oben im Katalog */
.woocommerce-ordering select{
  font:inherit;font-size:13px;padding:8px 12px;
  border:1px solid var(--grau-200);border-radius:var(--radius);background:var(--weiss);
}
/* Zwischen Trefferzahl, Sortierfeld und der ersten Produktreihe stand
   nichts: gemessen 0 Pixel an beiden Stellen (05.09.2026). Das Sortierfeld
   klebte am Merker "REDUZIERT" der ersten Kachel, die drei Ebenen liefen
   optisch ineinander. Michaels Ansage: dort mehr Abstand.

   Die Selektoren nennen .woocommerce mit, weil WooCommerce eigene Regeln
   auf dieser Ebene mitbringt. */
.woocommerce-result-count,
.woocommerce .woocommerce-result-count{
  margin:0 0 10px;font-size:13px;color:#525252;
}

.woocommerce-ordering,
.woocommerce .woocommerce-ordering{margin:0 0 30px}

/* Blaetterleiste */
.woocommerce-pagination ul{
  list-style:none;display:flex;gap:6px;margin:32px 0 0;padding:0;justify-content:center;
}
.woocommerce-pagination a,
.woocommerce-pagination span{
  display:inline-grid;place-items:center;min-width:40px;height:40px;padding:0 10px;
  border:1px solid var(--grau-200);border-radius:var(--radius);text-decoration:none;font-size:14px;
}
.woocommerce-pagination .current{background:var(--schwarz);color:#fff;border-color:var(--schwarz)}

/* Werkzeugleiste von WordPress darf den festen Kopf nicht ueberdecken */
.admin-bar .kopf{top:32px}
@media (max-width:782px){.admin-bar .kopf{top:46px}}

/* Barrierefreiheit: WordPress-eigene Vorleseklasse */
.screen-reader-text{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

/* --- Produktseite -------------------------------------------------------- */
/* WooCommerce gibt hier div.product mit Galerie und .summary aus. Statt die
   Templates zu kopieren, wird dieses Markup auf das Raster aus der Demo
   gezogen: Bild links gross, Kaufspalte rechts, alles Weitere unter beiden. */

/* Das Raster sitzt auf der eigenen Huelle, nicht auf dem ganzen
   Produktblock. Nur so endet der Bezugsrahmen der angehefteten Kaufspalte
   dort, wo sie enden soll. Sonst laeuft die Beschreibung darunter hindurch. */
.single-product .produkt-oben{
  display:grid;gap:clamp(24px,4vw,56px);grid-template-columns:1fr;align-items:start;
}
@media (min-width:960px){
  .single-product .produkt-oben{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .single-product .entry-summary{position:sticky;top:150px}
}

.woocommerce-product-gallery{margin:0}
.woocommerce-product-gallery__wrapper{margin:0}
.woocommerce-product-gallery .woocommerce-product-gallery__image img{
  border-radius:var(--radius);background:var(--grau-100);width:100%;height:auto;
}
.flex-control-thumbs{
  list-style:none;display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 0;padding:0;
}
.flex-control-thumbs li{width:78px}
.flex-control-thumbs img{border-radius:var(--radius);border:1px solid transparent;cursor:pointer}
.flex-control-thumbs img.flex-active{border-color:var(--schwarz)}

.entry-summary .product_title{margin:0 0 8px;font-size:clamp(22px,2.6vw,30px)}
.entry-summary .price{font-size:22px;font-weight:600;margin:0 0 2px;color:var(--schwarz);display:block}
.entry-summary .price del{color:var(--grau-400);font-weight:400;margin-right:8px;opacity:1}
.entry-summary .price ins{color:var(--reduziert);text-decoration:none}
.woocommerce-product-details__short-description{margin:12px 0 22px;font-size:14px;color:#525252;max-width:46ch}

/* Groessenauswahl. Vorerst das Auswahlfeld von WooCommerce in Hausoptik.
   Das Raster aus Schaltflaechen mit Restbestand kommt in der naechsten
   Etappe, dafuer muss die Variante samt Bestand ausgelesen werden. */
/* WooCommerce packt die Auswahl in eine Tabelle mit Beschriftungsspalte
   links. Fuer ein Auswahlfeld geht das, fuer ein Groessenraster nicht: Die
   Beschriftung frisst die Breite und das Raster wird zusammengequetscht.
   Deshalb loesen wir die Tabellendarstellung auf, Beschriftung ueber die
   volle Breite darueber, Raster darunter. */
.variations,
.variations tbody,
.variations tr,
.variations th,
.variations td{display:block;width:auto;padding:0;text-align:left}
.variations{margin:0 0 18px}
.variations tr + tr{margin-top:20px}
.variations th{
  font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--schwarz);margin:0 0 10px;
}
.variations select{
  width:100%;font:inherit;font-size:15px;padding:12px 14px;
  border:1px solid var(--grau-200);border-radius:var(--radius);background:var(--weiss);
}
.reset_variations{display:inline-block;margin-top:10px;font-size:13px;color:#525252}

/* Fussnote unter dem Raster */
.groessen-fussnote{margin:12px 0 0;font-size:13px;color:#525252;max-width:46ch}

.woocommerce-variation-price{margin:0 0 14px}
.woocommerce-variation-availability p{margin:0 0 14px;font-size:13px;color:#525252}

/* Kaufknopf */
/* Der einzige Knopf auf der Produktseite, der wirklich kauft. */
.single-product button.button,
.single-product .single_add_to_cart_button{
  flex:1;min-width:200px;background:var(--kaufen);color:var(--kaufen-text);border:0;
  border-radius:var(--radius);padding:16px 24px;font:inherit;font-size:15px;font-weight:600;
  cursor:pointer;transition:background .15s ease;
}
.single-product button.button:hover,
.single-product .single_add_to_cart_button:hover{background:var(--kaufen-dunkel);color:var(--kaufen-text)}
/* Kaufzeile: Menge und Knopf nebeneinander, gleich hoch. */
.woocommerce-variation-add-to-cart,
.single-product form.cart{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
.single-product .quantity[hidden]{display:none}

.mengenwahl{
  display:flex;align-items:stretch;
  border:1px solid var(--grau-200);border-radius:var(--radius);overflow:hidden;
  background:var(--weiss);
}
.mengenwahl-knopf{
  width:44px;min-height:44px;border:0;background:transparent;cursor:pointer;
  font:inherit;font-size:18px;line-height:1;color:var(--schwarz);
}
.mengenwahl-knopf:hover{background:var(--grau-100)}
.mengenwahl input[type="number"]{
  width:46px;border:0;text-align:center;font:inherit;font-size:16px;font-weight:600;
  background:transparent;-moz-appearance:textfield;
}
.mengenwahl input[type="number"]::-webkit-outer-spin-button,
.mengenwahl input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.product_meta{margin:22px 0 0;padding-top:20px;border-top:1px solid var(--grau-200);font-size:13px;color:#525252}
.product_meta > span{display:block;margin-bottom:6px}

/* Beschreibung, Daten und Empfehlungen laufen unter beiden Spalten durch */
.woocommerce-tabs,
.up-sells,
.related{margin-top:clamp(36px,5vw,60px)}
.woocommerce-tabs .panel{max-width:80ch}
.woocommerce-tabs ul.tabs{
  list-style:none;display:flex;gap:26px;margin:0 0 20px;padding:0 0 10px;
  border-bottom:1px solid var(--grau-200);
}
.woocommerce-tabs ul.tabs a{
  text-decoration:none;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  padding-bottom:10px;border-bottom:2px solid transparent;display:block;
}
.woocommerce-tabs ul.tabs li.active a{border-bottom-color:var(--schwarz)}
.woocommerce-tabs .panel h2{display:none}
.woocommerce-tabs table.shop_attributes{width:100%;border-collapse:collapse;font-size:14px;max-width:80ch}
.woocommerce-tabs table.shop_attributes th,
.woocommerce-tabs table.shop_attributes td{
  text-align:left;padding:9px 0;border-bottom:1px solid var(--grau-200);vertical-align:top;
}
.woocommerce-tabs table.shop_attributes th{width:42%;font-weight:600;color:#525252}
.woocommerce-tabs table.shop_attributes td p{margin:0}
.related > h2,.up-sells > h2{margin-bottom:24px}

/* --- Filterleiste im Katalog ---------------------------------------------- */
/* Der Schalter fuer Damen und Herren ist hier ein Paar echter Verweise und
   keine Schaltflaechen: Er wechselt die Kategorie, also die Seite. Deshalb
   eine eigene Fassung des Schalters, die Verweise statt Knoepfe gestaltet. */

.wer-schalter--links{display:inline-flex;margin:0 0 16px}
.wer-schalter--links a{
  font-size:13px;font-weight:600;letter-spacing:.02em;text-decoration:none;
  padding:8px 20px;color:inherit;transition:background .12s ease,color .12s ease;
}
.wer-schalter--links a + a{border-left:1px solid var(--grau-200)}
.wer-schalter--links a:hover{background:var(--grau-50)}
.wer-schalter--links a[aria-current]{background:var(--schwarz);color:#fff}

/* Groessen als Verweise, damit der Filter ohne Skript funktioniert und
   jede Auswahl eine eigene Adresse hat. Das ist auch fuer Suchmaschinen
   und fuer das Teilen eines Links die richtige Form. */
.filter-groessen a{
  display:block;font:inherit;font-size:14px;font-weight:500;text-decoration:none;
  padding:7px 14px;border:1px solid var(--grau-200);border-radius:var(--radius);
  background:var(--grau-50);
}
.filter-groessen a:hover{border-color:var(--schwarz)}
.filter-groessen a[aria-current]{background:var(--schwarz);color:#fff;border-color:var(--schwarz)}
.filter-groessen li{display:block}
.filter-stand{margin:14px 0 0;font-size:13px;color:#525252}
.filter-stand a{color:inherit}

/* Aufmacher ohne Bild: ruhige Flaeche statt Platzhalter mit Fragezeichen.
   Sobald ein Foto gepflegt ist, faellt diese Regel nicht ins Gewicht. */
.hero-bild--leer{background:var(--grau-100);min-height:320px}
.hero-bild img{width:100%;height:100%;object-fit:cover}

/* Kategoriekachel: Bild eingepasst, Beschriftung liegt darueber.
   
   EINGEPASST, NICHT BESCHNITTEN. Das war vorher 'cover', und damit sahen
   fuenf von neun Kacheln leer aus, obwohl die Bilder geladen waren.
   Gemessen am 12.09.2026: Das Produktfoto ist 2346x2346 quadratisch, die
   Kachel 215x269 hochkant. 'cover' schneidet dann links und rechts weg,
   und weil die Schuhe freigestellt und breit im quadratischen Bild
   liegen, blieb genau der weisse Rand uebrig.
   
   Dieselbe Entscheidung wie bei den Produktkacheln weiter oben, aus
   demselben Grund. Hintergrund weiss statt grau, weil die Fotos auf Weiss
   freigestellt sind und sonst ein weisses Rechteck im grauen Kasten
   stuende.
   
   Etwas nach oben gerueckt, damit der Schuh ueber dem Textband liegt und
   nicht dahinter verschwindet. */
.kategorie img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:50% 38%;
  padding:10px 10px 44px;
}
.kategorie{background:#fff}

/* --- Beschreibung und Servicespalte -------------------------------------- */
/* Der Beschreibungstext stand allein auf halber Breite. Volle Breite waere
   aber genau der Fehler des alten Shops: Fliesstext ueber 1360 Pixel liest
   niemand gern. Deshalb zwei Spalten, Text in lesbarer Breite links, rechts
   die Angaben, die beim Kauf helfen. */

.produkt-unten{
  display:grid;gap:clamp(24px,4vw,56px);grid-template-columns:1fr;
  margin-top:clamp(36px,5vw,60px);padding-top:clamp(28px,4vw,44px);
  border-top:1px solid var(--grau-200);align-items:start;
}
@media (min-width:960px){
  .produkt-unten{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
}

.produkt-beschreibung h2,
.produkt-service h2{font-size:13px;text-transform:uppercase;letter-spacing:.06em;margin:0 0 16px}
.produkt-beschreibung{font-size:16px;line-height:1.7;max-width:68ch}
.produkt-beschreibung p{margin:0 0 14px}
.produkt-beschreibung ul{margin:0 0 14px;padding-left:20px}
.produkt-beschreibung li{margin-bottom:6px}
.produkt-beschreibung strong{font-weight:600}

.produkt-service{background:var(--grau-50);border:1px solid var(--grau-200);border-radius:var(--radius);padding:22px 22px 18px}
.fakten{display:grid;grid-template-columns:auto 1fr;gap:9px 16px;margin:0 0 20px;font-size:15px}
.fakten dt{color:#525252}
.fakten dd{margin:0;font-weight:500}
.produkt-service .zusagen{margin:0;padding-top:18px;border-top:1px solid var(--grau-200)}
.produkt-beschreibung h3{font-size:16px;font-weight:700;text-transform:none;letter-spacing:0;margin:26px 0 10px;color:var(--schwarz)}
.produkt-beschreibung h3:first-of-type{margin-top:0}
.produkt-beschreibung a{color:inherit}

/* --- Pflichtangaben zum Preis (Germanized) -------------------------------- */
/* Die Angabe zur Umsatzsteuer und zu den Versandkosten muss beim Preis
   stehen, nicht am Ende der Kachel. Ueber die Reihenfolge im Flexkasten
   wird sie direkt unter den Preis gezogen, ohne das Markup des Plugins
   anzufassen. Kleiner gesetzt als die Produktangaben, aber gut lesbar:
   Pflicht heisst lesbar, nicht gleich laut wie der Produktname. */

ul.products li.product .kachel-bild{order:1}
ul.products li.product .kachel-name{order:2}
ul.products li.product .kachel-art{order:3}
ul.products li.product .price{order:4;margin-bottom:4px}
ul.products li.product .wc-gzd-additional-info{order:5}
ul.products li.product .groessen{order:6;margin-top:auto;padding-top:10px}
ul.products li.product .groessen-hinweis{order:7}

/* Die Angabe steht im span, nicht im umgebenden p, und Germanized setzt
   dort 0,9em. Ein Selektor auf die Klasse allein wird deshalb ueberstimmt
   und die Angabe stand mit 14,4px fast so gross wie der Produktname
   (gemessen 05.09.2026). Beide Ebenen ansprechen. */
.wc-gzd-additional-info,
ul.products li.product .wc-gzd-additional-info,
ul.products li.product p.wc-gzd-additional-info span.wc-gzd-additional-info{
  margin:0 0 2px;font-size:11px;line-height:1.45;color:#6b6b6b;
}
.wc-gzd-additional-info a{color:inherit}
ul.products li.product .wc-gzd-additional-info + .wc-gzd-additional-info{margin-bottom:8px}

/* Auf der Produktseite bewusst klein (Lisas Wunsch, auch schon im alten
   Shop): Der Kleinunternehmer-Hinweis und "zzgl. Versandkosten" sind
   Pflichtangaben, aber kein Verkaufsargument. Sie standen mit 12,5px zu
   nah am Preis und zogen Aufmerksamkeit vom Schuh weg.

   Untergrenze ist die Lesbarkeit, nicht der Geschmack. § 1 PAngV verlangt
   "klar erkennbar und gut lesbar". Eine feste Mindestgroesse nennt das
   Gesetz nicht, deshalb bleibt es bei 11px mit gutem Kontrast (#525252 auf
   Weiss, Verhaeltnis rund 7,5 zu 1) statt noch kleiner mit blassem Grau.
   Klein und kontrastreich ist die sichere Seite, blass und klein waere es
   nicht. */
.entry-summary .wc-gzd-additional-info,
.entry-summary p.wc-gzd-additional-info span.wc-gzd-additional-info{
  font-size:11px;line-height:1.45;color:#525252;
}

/* --- Warenkorb und Kasse (WooCommerce-Bloecke) ---------------------------- */
/* Warenkorb und Kasse laufen bei WooCommerce 11 auf Bloecken mit eigenen
   Klassen. Die Knopfregeln des Themes greifen dort nicht, deshalb hier
   gezielt nachziehen. Nur Optik, an der Mechanik des Bestellvorgangs wird
   nichts angefasst. */

/* Warenkorb und Kasse: hier geht es nur noch um den Kauf. */
.woocommerce-cart .wp-element-button,
.woocommerce-checkout .wp-element-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button{
  background:var(--kaufen) !important;color:var(--kaufen-text) !important;
  border:0 !important;border-radius:var(--radius) !important;
  font:inherit !important;font-size:15px !important;font-weight:600 !important;
  padding:16px 24px !important;
}
.woocommerce-cart .wp-element-button:hover,
.woocommerce-checkout .wp-element-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover{background:var(--kaufen-dunkel) !important;color:var(--kaufen-text) !important}

.wc-block-components-title,
.wc-block-cart__totals-title{
  font-family:var(--schrift-text);font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
}
.wc-block-components-totals-item__value{font-weight:600}
.wc-block-components-text-input input,
.wc-block-components-select select{
  border-radius:var(--radius) !important;border-color:var(--grau-200) !important;
}
.wc-block-components-product-name{font-weight:600;text-decoration:none}

/* Die beiden Pflichtangaben gehoeren zusammen, nicht durch eine Leerzeile
   getrennt. Germanized bringt margin-top mit, und weil die Kachel ein
   Flexkasten ist, fallen die Abstaende nicht zusammen, sondern addieren
   sich. Deshalb hier ausdruecklich beide Seiten auf null. */
ul.products li.product p.wc-gzd-additional-info,
.entry-summary p.wc-gzd-additional-info{margin-top:0;margin-bottom:1px}
ul.products li.product p.wc-gzd-additional-info + p.wc-gzd-additional-info,
.entry-summary p.wc-gzd-additional-info + p.wc-gzd-additional-info{margin-top:0;margin-bottom:12px}

/* Auf der Produktseite gibt Germanized beide Angaben als Textteile in einem
   Absatz aus, sie stehen dann in einer Zeile hintereinander. Dort ist Platz,
   deshalb bekommt "zzgl. Versandkosten" eine eigene Zeile. Im Katalog bleibt
   es eng, dort zaehlt jede Zeile Hoehe. */
.entry-summary p.wc-gzd-additional-info span.wc-gzd-additional-info{
  display:block;margin:0;
}
.entry-summary p.wc-gzd-additional-info span.shipping-costs-info{margin-top:3px}

/* ==========================================================================
   Schwebende Navigation am unteren Rand, nur am Handy
   --------------------------------------------------------------------------
   Muster uebernommen aus dem JollyDog-Theme, urspruenglich von
   treffpunkt-bayrischzell.de: schwebende Pillenleiste, nicht randlos, mit
   Abstand zu den Bildschirmraendern. Sie liegt ueber der Seite und ist immer
   erreichbar, ohne dass man nach oben scrollen muss.

   Warum nicht randlos ueber die ganze Breite: Eine schwebende Pille wirkt
   wie ein Werkzeug, eine randlose Leiste wie ein zweiter Seitenrahmen. Und
   an den abgerundeten Ecken heutiger Geraete sieht randlos immer angeschnitten
   aus.

   Farbe: Die einzige Stelle mit Farbe ist der Warenkorb-Zaehler. Das ist die
   Regel aus der Farbentscheidung vom 05.09.2026, Orange gehoert der
   Kaufhandlung, und ein gefuellter Warenkorb ist genau das.
   ========================================================================== */

.mobilnav{display:none}

@media (max-width:720px){
  .mobilnav{
    display:flex;
    position:fixed;
    left:50%;
    transform:translateX(-50%);
    /* Abstand zur Systemleiste bei Geraeten mit abgerundeten Ecken */
    bottom:calc(env(safe-area-inset-bottom, 0px) + 12px);
    z-index:90;
    width:min(460px, calc(100% - 24px));
    padding:6px 8px;
    background:rgba(255,255,255,.88);
    -webkit-backdrop-filter:blur(18px) saturate(1.4);
    backdrop-filter:blur(18px) saturate(1.4);
    border:1px solid var(--grau-200);
    border-radius:22px;
    box-shadow:0 6px 24px -8px rgba(0,0,0,.3), 0 2px 6px rgba(0,0,0,.06);
  }

  .mobilnav-punkt{
    position:relative;flex:1;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:48px;              /* Fingerkuppe, nicht Mauszeiger */
    padding:7px 3px 6px;
    color:#525252;
    font-size:11px;font-weight:600;letter-spacing:.01em;
    text-align:center;text-decoration:none;
    border-radius:17px;
    transition:color .15s ease, background .15s ease;
  }

  /* Symbol und Zahl bilden eine eigene Ebene. Ohne diesen Behaelter zaehlt
     die Zahl in der Spalte mit und schiebt die Beschriftung des Warenkorbs
     nach unten, obwohl sie absolut sitzt. */
  .mobilnav-symbol{position:relative;display:block;width:23px;height:23px;margin-inline:auto;line-height:0}
  .mobilnav-punkt svg{width:23px;height:23px;display:block;margin-inline:auto}
  .mobilnav-text{display:block;width:100%;line-height:1.2}

  .mobilnav-punkt.ist-aktiv{color:var(--schwarz);background:var(--grau-100)}
  .mobilnav-punkt:focus-visible{outline:2px solid var(--schwarz);outline-offset:2px}

  .mobilnav-zahl{
    position:absolute;top:-5px;right:-9px;
    min-width:17px;height:17px;padding:0 4px;
    display:flex;align-items:center;justify-content:center;
    background:var(--kaufen);color:var(--kaufen-text);
    font-size:10px;font-weight:700;line-height:1;border-radius:9px;
  }

  /* Platz fuer die Leiste, damit sie nichts verdeckt. */
  body{padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 84px)}
}

/* --- Mobiler Kopf: keine Doppelung mit der schwebenden Leiste ------------- */
/* Warenkorb und Konto stehen unten in der Leiste und muessen oben nicht
   noch einmal stehen. Das Suchfeld bleibt, weil der Sucheintrag der Leiste
   genau dorthin springt. */
@media (max-width:720px){
  .kopf-rechts{display:none}
  .kopf-inner{padding:10px 0}
  .marke{font-size:16px}

  /* Der Kopf klebt oben. Am Handy nimmt er damit dauerhaft Platz weg, den
     der Katalog braucht. Deshalb scrollt er dort mit. */
  .kopf{position:static}

  /* Aufmacherflaeche ohne Bild am Handy weglassen. Eine leere graue Flaeche
     ueber die halbe Bildschirmhoehe ist am Telefon teurer als am Rechner. */
  /* Die LEERE Aufmacherflaeche bleibt am Telefon ausgeblendet. Ein echtes
     Bild wird gezeigt, eine graue Platzhalterflaeche kostet nur Hoehe. */
  .hero-bild--leer{display:none}

  /* Seitlicher Abstand war hier auf null gesetzt, dadurch begann die
     Ueberschrift bei Pixel 0 und der Knopf lief randlos ueber die ganze
     Breite. Das faellt erst auf, wenn daneben etwas steht, das den Rand
     einhaelt. Gleicher Abstand wie im uebrigen Shop. */
  .hero-text{padding:24px var(--luft) 30px}
  .hero-knoepfe .knopf{flex:1 0 100%;text-align:center}

  /* Am Telefon steht das Bild unter dem Text. 300 Pixel Hoehe sind dort
     genug, mehr schiebt den Groesseneinstieg zu weit nach unten. */
  .hero-bild{min-height:0}
  .hero-bild img{height:230px}
}

/* Filterleiste als aufklappbares Element */
details.filterleiste > summary{
  cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:10px;
  justify-content:space-between;
}
details.filterleiste > summary::-webkit-details-marker{display:none}
.filter-stand-kurz{font-size:12px;font-weight:400;letter-spacing:0;text-transform:none;color:#525252}
details.filterleiste[open] > summary{margin-bottom:10px}
@media (min-width:721px){
  details.filterleiste > summary{cursor:default}
  .filter-stand-kurz{display:none}
}
@media (max-width:720px){
  details.filterleiste > summary::after{content:"+";font-size:18px;line-height:1;color:#525252}
  details.filterleiste[open] > summary::after{content:"\2013"}
}

/* Katalog am Handy zweispaltig.
   Einspaltig mit fast bildschirmbreitem Foto liest sich zwar ruhig, aber bei
   24 Kacheln je Seite entsteht ein sehr langer Weg. Zwei Spalten halbieren
   ihn. Die Pflichtangaben und die Groessenreihe bleiben dabei vollstaendig,
   nur etwas kleiner gesetzt. */
@media (max-width:720px){
  /* Auswahl muss .woocommerce mitnehmen, sonst gewinnt die Regel weiter
     oben (.woocommerce ul.products) und es bleibt einspaltig. */
  .woocommerce ul.products,
  ul.products{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
  ul.products li.product .kachel-name{font-size:13.5px;min-height:0}
  ul.products li.product .kachel-art{font-size:12.5px;margin-bottom:4px}
  ul.products li.product .price{font-size:14px}
  /* Muss die Spezifitaet der Grundregel erreichen, sonst greift sie nicht. */
  ul.products li.product .wc-gzd-additional-info,
  ul.products li.product p.wc-gzd-additional-info span.wc-gzd-additional-info{font-size:10.5px;line-height:1.4}
  .groesse{font-size:11.5px;padding:2px 5px;min-width:27px}
  .groessen{gap:3px}
  .groessen-hinweis{font-size:12px}
  .kachel-merker{font-size:10px;padding:4px 7px}
}

/* Kopierte Pflichtangabe in der Kasse, siehe shop.js. Gleiche Optik wie die
   Angaben, die Germanized selbst ausgibt. */
.sportalm-steuerhinweis{
  margin:6px 0 0;font-size:12.5px;line-height:1.5;color:#525252;
}
.sportalm-steuerhinweis--danke{margin:10px 0 28px}

/* ---------------------------------------------------------------------------
   Nach der Bestellung
   ---------------------------------------------------------------------------
   WooCommerce liefert hier eine Tabelle mit zwei Spalten. Am Handy quetscht
   die Produktspalte den Namen ueber vier Zeilen, waehrend rechts der Preis
   allein steht. Deshalb wird die Tabelle schmal zu Zeilenpaaren gestapelt.
   --------------------------------------------------------------------------- */

.woocommerce-order{max-width:760px}

.woocommerce-order .woocommerce-thankyou-order-received{
  font-size:20px;font-weight:600;color:var(--ink);
  padding:16px 18px;margin:0 0 22px;
  background:var(--grau-100);border-left:3px solid var(--signal);
}

.woocommerce-order ul.woocommerce-order-overview{
  list-style:none;margin:0 0 28px;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--grau-200);border:1px solid var(--grau-200);
}
.woocommerce-order ul.woocommerce-order-overview li{
  background:var(--weiss);padding:12px 14px;margin:0;
  font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;color:#525252;
}
.woocommerce-order ul.woocommerce-order-overview li strong{
  display:block;margin-top:4px;
  font-size:16px;text-transform:none;letter-spacing:0;color:var(--ink);
}

.woocommerce-order table.woocommerce-table--order-details{
  width:100%;border-collapse:collapse;margin-bottom:28px;
}
.woocommerce-order table.woocommerce-table--order-details th,
.woocommerce-order table.woocommerce-table--order-details td{
  padding:12px 10px;text-align:left;border-bottom:1px solid var(--grau-200);
  vertical-align:top;font-size:14.5px;
}
.woocommerce-order table.woocommerce-table--order-details td:last-child,
.woocommerce-order table.woocommerce-table--order-details th:last-child{
  text-align:right;white-space:nowrap;
}
.woocommerce-order table.woocommerce-table--order-details tfoot th{font-weight:600}
.woocommerce-order table.woocommerce-table--order-details a{color:var(--ink)}

.danke-weiter{
  margin:32px 0 0;padding:24px 22px;
  background:var(--grau-50);border:1px solid var(--grau-200);border-radius:var(--radius);
}
.danke-weiter h2{margin:0 0 16px;font-size:19px}

.danke-schritte{margin:0;padding:0 0 0 22px}
.danke-schritte li{margin:0 0 14px}
.danke-schritte li:last-child{margin-bottom:0}
.danke-schritt-titel{display:block;font-weight:600;font-size:15px;color:var(--ink)}
.danke-schritte p{margin:2px 0 0;font-size:14.5px;line-height:1.55;color:#525252}

.danke-knoepfe{margin:22px 0 0}

@media (max-width:640px){
  .woocommerce-order .woocommerce-thankyou-order-received{font-size:17px;padding:14px 15px}
  .woocommerce-order ul.woocommerce-order-overview{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* Zeilenpaare statt Spalten: Kopf ueber Wert, beides in voller Breite. */
  .woocommerce-order table.woocommerce-table--order-details thead{
    position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  }
  .woocommerce-order table.woocommerce-table--order-details,
  .woocommerce-order table.woocommerce-table--order-details tbody,
  .woocommerce-order table.woocommerce-table--order-details tfoot,
  .woocommerce-order table.woocommerce-table--order-details tr,
  .woocommerce-order table.woocommerce-table--order-details th,
  .woocommerce-order table.woocommerce-table--order-details td{display:block;width:auto}
  .woocommerce-order table.woocommerce-table--order-details tbody tr{
    padding:12px 0;border-bottom:1px solid var(--grau-200);
  }
  .woocommerce-order table.woocommerce-table--order-details tbody td{
    border:0;padding:0;
  }
  .woocommerce-order table.woocommerce-table--order-details tbody td:last-child{
    text-align:left;margin-top:4px;font-weight:600;
  }
  .woocommerce-order table.woocommerce-table--order-details tfoot tr{
    display:flex;justify-content:space-between;gap:16px;
    padding:9px 0;border-bottom:1px solid var(--grau-200);
  }
  .woocommerce-order table.woocommerce-table--order-details tfoot th,
  .woocommerce-order table.woocommerce-table--order-details tfoot td{
    border:0;padding:0;text-align:left;white-space:normal;
  }
  .woocommerce-order table.woocommerce-table--order-details tfoot td{text-align:right}

  .danke-weiter{padding:20px 16px}
  .danke-knoepfe .knopf{display:block;text-align:center}
}

/* ---------------------------------------------------------------------------
   Suche
   ---------------------------------------------------------------------------
   Alles hier ist schwarz-weiss. Orange gehoert im ganzen Shop allein der
   Kaufhandlung, und eine Suche ist noch kein Kauf. Wuerden die Chips leuchten,
   wuerde der Kaufknopf auf der Produktseite weniger zaehlen.
   --------------------------------------------------------------------------- */

.suche-verstanden{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;
  margin:0 0 20px;padding:14px 16px;
  background:var(--grau-50);border:1px solid var(--grau-200);border-radius:var(--radius);
}
.suche-verstanden-label{
  font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:#525252;
}
.suche-verstanden ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}

.suche-verstanden ul a{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 10px 5px 12px;
  background:var(--weiss);border:1px solid var(--ink);border-radius:999px;
  font-size:13.5px;line-height:1.3;color:var(--ink);text-decoration:none;
  transition:background .15s,color .15s;
}
.suche-verstanden ul a:hover,
.suche-verstanden ul a:focus-visible{background:var(--signal);color:var(--signal-text)}
.suche-verstanden ul a svg{width:13px;height:13px;flex:0 0 auto;opacity:.55}
.suche-verstanden ul a:hover svg{opacity:1}

.suche-fehlt{
  flex:1 0 100%;margin:0;font-size:13.5px;line-height:1.5;color:#525252;
}

.suche-ausweg{
  margin:0 0 24px;padding:18px 20px;
  border:1px solid var(--grau-200);border-left:3px solid var(--signal);
  background:var(--weiss);
}
.suche-ausweg-kopf{margin:0 0 12px;font-weight:600;font-size:15.5px;color:var(--ink)}
.suche-ausweg ul{list-style:none;margin:0;padding:0}
.suche-ausweg li{margin:0 0 8px}
.suche-ausweg li a{
  display:inline-block;font-size:15px;color:var(--ink);
  text-decoration:underline;text-underline-offset:3px;
}
.suche-ausweg-fuss{margin:14px 0 0;font-size:14px;line-height:1.55;color:#525252}

.suche-einstiege{margin:28px 0 0;padding-top:22px;border-top:1px solid var(--grau-200)}
.suche-einstiege p{margin:0 0 12px;font-size:14.5px;color:#525252}
.suche-einstiege ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.suche-einstiege li a{
  display:inline-block;padding:7px 13px;
  border:1px solid var(--grau-200);border-radius:999px;background:var(--weiss);
  font-size:13.5px;color:var(--ink);text-decoration:none;
  transition:border-color .15s,background .15s;
}
.suche-einstiege li a:hover,
.suche-einstiege li a:focus-visible{border-color:var(--ink);background:var(--grau-100)}

@media (max-width:640px){
  .suche-verstanden{padding:12px 13px;gap:8px}
  .suche-verstanden-label{flex:1 0 100%}
  .suche-verstanden ul a{font-size:13px;padding:5px 9px 5px 11px}
  .suche-ausweg{padding:15px 16px}
  .suche-ausweg-kopf{font-size:15px}
  .suche-einstiege li a{font-size:13px}
}

/* ---------------------------------------------------------------------------
   Kategorieseiten
   --------------------------------------------------------------------------- */

/* Der Faktenspiegel. Bewusst eine Zeile ohne Kasten: Er soll die erste
   Produktreihe nicht nach unten schieben. Die Trennpunkte kommen aus CSS,
   damit im Text keine Sonderzeichen stehen. */
.kategorie-fakten{
  display:flex;flex-wrap:wrap;align-items:center;
  margin:0 0 22px;padding:0;
  font-size:14px;line-height:1.5;color:#525252;
}
.kategorie-fakten span{display:inline-flex;align-items:center}
.kategorie-fakten span + span::before{
  content:"";display:inline-block;
  width:3px;height:3px;border-radius:50%;
  background:var(--grau-400);margin:0 10px;
}

/* Der ausfuehrliche Text unter den Produkten. Schmaler als der Katalog,
   weil Lesetext ueber die volle Katalogbreite nicht mehr lesbar ist. */
/* Volle Inhaltsbreite (Michaels Ansage 05.09.2026). Vorher war der Block auf
   70 Zeichen begrenzt, wodurch rechts die halbe Seite leer blieb, waehrend
   der Katalog darueber die ganze Breite nutzt. Das sah aus wie ein Fehler.

   Lange Zeilen brauchen mehr Luft dazwischen, sonst findet das Auge beim
   Zeilensprung den Anfang nicht wieder. Deshalb steht der Zeilenabstand hier
   hoeher als im uebrigen Shop. */
.kategorie-text{
  margin:48px 0 0;padding-top:32px;
  border-top:1px solid var(--grau-200);
}

/* Zwischenueberschriften hier bewusst ohne Grossbuchstaben. Die Regel gilt
   sonst fuer alle h2 und ist im Katalog richtig, im Fliesstext aber laut und
   schlechter lesbar. Der Lesetext ist die einzige Stelle im Shop, an der
   laenger am Stueck gelesen wird. */
.kategorie-text h2,
.kategorie-text h3{
  margin:28px 0 10px;font-size:18px;
  text-transform:none;letter-spacing:normal;
}
.kategorie-text h2:first-child,
.kategorie-text h3:first-child{margin-top:0}
.kategorie-text p{margin:0 0 16px;font-size:15.5px;line-height:1.75;color:#3f3f3f}
.kategorie-text ul{margin:0 0 16px;padding-left:20px}
.kategorie-text li{margin:0 0 9px;font-size:15.5px;line-height:1.7;color:#3f3f3f}
.kategorie-text a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

@media (max-width:640px){
  .kategorie-fakten{font-size:13.5px;margin-bottom:18px}
  .kategorie-fakten span + span::before{margin:0 8px}
  .kategorie-text{margin-top:36px;padding-top:26px}
  .kategorie-text p,.kategorie-text li{font-size:15px}
}

/* ---------------------------------------------------------------------------
   Aufklappmenue unter Damen, Herren und Kinder
   ---------------------------------------------------------------------------
   Am Rechner ueber :hover und :focus-within, also ohne Skript und mit
   Tastatur bedienbar. Am Telefon uebernimmt der Knopf, weil es dort kein
   Hover gibt. Faellt das Skript aus, bleibt der Hauptlink erhalten.
   --------------------------------------------------------------------------- */

.menue--wer li{position:relative}
.menue--wer .hat-unter{display:flex;align-items:center;gap:2px}

.wer-auf{
  display:none;                     /* am Rechner nicht noetig */
  border:0;background:none;cursor:pointer;color:inherit;
  align-items:center;justify-content:center;
  /* 44 Pixel Hoehe, das uebliche Mindestmass fuer eine Fingerkuppe. Vorher
     war der Knopf 19 mal 27 und damit nur mit Zielen zu treffen. */
  min-width:38px;min-height:44px;padding:0;
  line-height:0;
}
.wer-auf svg{width:15px;height:15px;transition:transform .15s}

.untermenue{
  position:absolute;top:100%;left:-14px;z-index:120;
  min-width:250px;padding:8px 0;
  background:var(--weiss);
  border:1px solid var(--grau-200);
  border-radius:0 0 var(--radius) var(--radius);
  box-shadow:0 12px 28px rgba(0,0,0,.10);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .13s ease,transform .13s ease,visibility .13s;
}
.menue--wer .hat-unter:hover .untermenue,
.menue--wer .hat-unter:focus-within .untermenue{
  opacity:1;visibility:visible;transform:translateY(0);
}

.untermenue ul{list-style:none;margin:0;padding:0}
.untermenue a{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:8px 18px;
  font-size:14px;font-weight:500;line-height:1.3;
  letter-spacing:0;text-transform:none;text-decoration:none;color:var(--ink);
  border:0;
}
.untermenue a:hover,
.untermenue a:focus-visible{background:var(--grau-100)}

/* Nicht --grau-400. Das ergaebe auf Weiss ein Kontrastverhaeltnis von 2,58
   zu 1, gefordert sind 4,5. Bei einer Zahl, die die Kaufentscheidung
   mittraegt ("nur noch 2 Modelle"), ist Lesbarkeit kein Detail. #757575
   liegt bei 4,61 und bleibt trotzdem zurueckhaltend. */
.untermenue-zahl{
  flex:0 0 auto;font-size:12px;font-weight:400;color:#757575;
  font-variant-numeric:tabular-nums;
}

/* Zweite Ebene, etwa Hiking unter Wanderschuhe. Eingerueckt und leiser,
   damit die Zugehoerigkeit ohne Linien erkennbar ist. */
.untermenue-enkel a{
  padding-left:34px;font-size:13.5px;font-weight:400;color:#525252;
}
.untermenue-enkel a::before{
  content:"";position:absolute;left:22px;
  width:5px;height:1px;background:var(--grau-400);
  transform:translateY(9px);
}
.untermenue-enkel{position:relative}

.untermenue-alle{margin-top:6px;border-top:1px solid var(--grau-200);padding-top:6px}
.untermenue-alle a{font-size:13.5px;font-weight:600}

@media (max-width:900px){
  .wer-auf{display:inline-flex}

  /* Das Untermenue spannt ueber die ganze Breite der Navigationszeile,
     nicht nur ueber den Menuepunkt. Waere es wie am Rechner am li
     ausgerichtet, stuende ein 250 Pixel breiter Kasten in einer 402 Pixel
     breiten Zeile und wuerde die Kategorien daneben ueberdecken.
     Bezugspunkt ist deshalb die Navigation, nicht der einzelne Punkt. */
  .hauptnavigation{position:relative}
  .menue--wer li{position:static}

  .untermenue{
    left:0;right:0;top:100%;min-width:0;
    border-left:0;border-right:0;border-radius:0;
    padding:6px 0 10px;
    display:none;opacity:1;visibility:visible;transform:none;transition:none;
  }
  .menue--wer .hat-unter:hover .untermenue,
  .menue--wer .hat-unter:focus-within .untermenue{display:none}
  .menue--wer .hat-unter.ist-offen .untermenue{display:block}
  .menue--wer .hat-unter.ist-offen .wer-auf svg{transform:rotate(180deg)}

  .untermenue a{padding:11px var(--luft);font-size:14.5px}
  .untermenue-enkel a{padding-left:calc(var(--luft) + 16px)}
  .untermenue-enkel a::before{left:var(--luft)}
  .untermenue-alle{margin-top:6px}
  .untermenue-alle a{padding-top:12px;padding-bottom:12px}
}

/* ---------------------------------------------------------------------------
   Wunschliste (YITH)
   ---------------------------------------------------------------------------
   Die Funktion kommt vom Plugin, nur Platz und Optik kommen von hier. Das
   Plugin bringt eigene Farben und Knopfformen mit, die nicht zum Shop
   passen. Sie werden ueberschrieben, nicht abgeschaltet.
   --------------------------------------------------------------------------- */

/* Das Herz auf der Kachel. Sitzt oben rechts ueber dem Bild, ausserhalb des
   Bildlinks, damit kein Verweis im Verweis entsteht. */
ul.products li.product{position:relative}

.kachel-merken{
  position:absolute;top:8px;right:8px;z-index:3;
  line-height:0;
}
/* Der tatsaechliche Aufbau, im Browser ausgelesen (YITH 4.15):
     div.yith-add-to-wishlist-button-block
       button.yith-wcwl-add-to-wishlist-button
         div.yith-wcwl-icon-svg__wrapper > svg
         span.yith-wcwl-add-to-wishlist-button__label
   Es ist ein Knopf, kein Verweis, und der Block wird erst im Browser
   gefuellt. Deshalb zielen die Regeln auf button, nicht auf a. */
.kachel-merken .yith-add-to-wishlist-button-block{margin:0;line-height:0}

/* Hell, nicht dunkel (Michaels Ansage 05.09.2026).
   
   Das Plugin liefert einen dunkelgrauen Knopf (#333) mit eigenen Regeln,
   die spezifischer sind als eine blosse Klasse. Ergebnis waren zwei
   schwarze Flaechen nebeneinander in jeder Kachel: links der Merker
   "REDUZIERT", rechts das Herz. Zwei gleich laute Elemente heben sich
   gegenseitig auf, und der Merker ist der wichtigere.
   
   Das Herz tritt deshalb zurueck: heller Grund, dunkler Umriss. Erst wenn
   der Schuh gemerkt ist, wird es kraeftig. Die Selektoren nennen den
   Elterncontainer mit, um das Plugin-CSS zu ueberstimmen. */
.kachel-merken .yith-add-to-wishlist-button-block button.yith-wcwl-add-to-wishlist-button,
.kachel-merken button{
  display:grid;place-items:center;
  width:34px;height:34px;padding:0;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(2px);
  border:1px solid rgba(0,0,0,.10);border-radius:999px;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
  color:var(--ink);cursor:pointer;
  transition:border-color .15s,background .15s,transform .12s;
}
.kachel-merken .yith-add-to-wishlist-button-block button:hover,
.kachel-merken button:hover,
.kachel-merken button:focus-visible{
  background:var(--weiss);border-color:var(--ink);transform:scale(1.06);
}

/* Der sichtbare Kreis bleibt klein, damit er das Produktfoto nicht
   verdeckt. Die Trefferflaeche darunter ist trotzdem 44 mal 44, das
   uebliche Mindestmass fuer eine Fingerkuppe. Ohne diese Erweiterung
   waeren es 36 Pixel, und das Herz waere am Telefon nur mit Zielen zu
   treffen. */
.kachel-merken button::after{
  content:"";position:absolute;
  top:50%;left:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;
}
.kachel-merken button{position:relative}

.kachel-merken .yith-wcwl-icon-svg__wrapper{display:grid;place-items:center;line-height:0}

/* Das Plugin setzt 22 Pixel und schwarzen Strich fest. In einem 34er Kreis
   ist das zu gross und drueckt an den Rand. */
.kachel-merken .yith-wcwl-icon-svg__wrapper svg,
.kachel-merken svg{
  width:16px;height:16px;color:inherit;
  fill:none;stroke:currentColor;stroke-width:1.7;
}

/* Die Beschriftung wird nicht entfernt, sondern nur unsichtbar gemacht.
   Mit display:none waere sie auch fuer Vorleseprogramme weg, und ein
   Knopf ohne jede Beschriftung ist nicht bedienbar. */
.kachel-merken .yith-wcwl-add-to-wishlist-button__label{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

/* Liegt der Artikel schon auf der Liste, wird das Herz gefuellt. Schwarz,
   nicht Rot: Merken ist noch kein Kauf, und Orange gehoert im ganzen Shop
   allein der Kaufhandlung. */
/* Gemerkt: gefuelltes Herz auf hellem Grund. Bewusst kein schwarzer Kreis,
   das waere wieder die laute Flaeche von vorher. Die Fuellung allein sagt
   deutlich genug, dass der Schuh auf der Liste liegt. */
.kachel-merken button[class*="--added"],
.kachel-merken button.yith-wcwl-add-to-wishlist-button--added{
  background:var(--weiss);border-color:var(--ink);color:var(--ink);
}
.kachel-merken button[class*="--added"] svg,
.kachel-merken button[class*="--added"] .yith-wcwl-icon-svg__wrapper svg{
  fill:currentColor;stroke:currentColor;
}

/* Eintrag in der Kopfzeile, gleiche Form wie der Warenkorb daneben. */
.kopf-wunschliste{color:var(--ink)}
.kopf-wunschliste svg{width:21px;height:21px;flex:0 0 auto}

/* Gleiche Masse wie der Warenkorb-Zaehler, damit beide Kreise gleich
   gross sind und auf einer Linie sitzen. */
.kopf-wunschliste-zahl{
  min-width:20px;height:20px;padding:0 5px;flex:0 0 auto;
  display:inline-grid;place-items:center;
  background:var(--schwarz);color:#fff;border-radius:999px;
  font-size:11px;line-height:1;
}

@media (max-width:640px){
  /* Im Kopf ist am Telefon kein Platz, dort steht die Wunschliste in der
     schwebenden Leiste unten. */
  .kopf-wunschliste{display:none}
  .kachel-merken{top:6px;right:6px}
  .kachel-merken button{width:34px;height:34px}
}

/* --- Merken auf der Produktseite ------------------------------------------
   Das Plugin setzt dort einen gefuellten Knopf in Dunkelgrau, 143 mal 38.
   Direkt unter dem orangen "In den Warenkorb" stehen damit zwei Knoepfe
   untereinander, die um dieselbe Aufmerksamkeit werben. Merken ist aber
   kein Kauf, sondern das Gegenteil: aufschieben.

   Deshalb hier ein reiner Textknopf ohne Flaeche. Er ist da, wenn man ihn
   sucht, und draengt sich nicht auf.
   ------------------------------------------------------------------------- */

.entry-summary .yith-add-to-wishlist-button-block{margin:14px 0 0}

.entry-summary .yith-add-to-wishlist-button-block button.yith-wcwl-add-to-wishlist-button,
.entry-summary .yith-wcwl-add-to-wishlist button{
  display:inline-flex;align-items:center;gap:8px;
  width:auto;min-height:0;padding:6px 2px;
  background:none;border:0;border-radius:0;box-shadow:none;
  color:#525252;font:inherit;font-size:14px;font-weight:500;
  cursor:pointer;transition:color .15s;
}
.entry-summary .yith-add-to-wishlist-button-block button:hover,
.entry-summary .yith-add-to-wishlist-button-block button:focus-visible{
  color:var(--ink);
}
.entry-summary .yith-add-to-wishlist-button-block button:hover .yith-wcwl-add-to-wishlist-button__label,
.entry-summary .yith-add-to-wishlist-button-block button:focus-visible .yith-wcwl-add-to-wishlist-button__label{
  text-decoration:underline;text-underline-offset:3px;
}

/* Hier bleibt die Beschriftung sichtbar. Auf der Produktseite gibt es
   anders als in der Kachel keinen Zusammenhang, aus dem sich ein blosses
   Herz erklaeren wuerde. */
.entry-summary .yith-wcwl-add-to-wishlist-button__label{
  position:static;width:auto;height:auto;clip-path:none;white-space:normal;
}

.entry-summary .yith-wcwl-icon-svg__wrapper svg,
.entry-summary .yith-add-to-wishlist-button-block svg{
  width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;
}

/* Gemerkt: gefuelltes Herz, Text in voller Farbe. Keine Flaeche, kein
   Farbwechsel ins Rote. */
.entry-summary button[class*="--added"]{color:var(--ink)}
.entry-summary button[class*="--added"] svg{fill:currentColor}

@media (max-width:640px){
  /* Muss die Klasse am Knopf mitnennen, sonst gewinnt die Grundregel oben
     mit ihrem min-height:0. Vierter Spezifitaets-Stolperer in diesem
     Projekt, deshalb hier ausdruecklich vermerkt. */
  .entry-summary .yith-add-to-wishlist-button-block button.yith-wcwl-add-to-wishlist-button,
  .entry-summary .yith-wcwl-add-to-wishlist button{
    min-height:44px;padding:0 2px;
  }
}

/* --- Dasselbe fuer den klassischen Aufbau des Plugins (live, YITH 4.18.1) --
   Lokal (4.15) rendert das Plugin einen Knopf-Block, live (4.18.1) den
   klassischen Aufbau mit Verweisen, im Browser ausgelesen am 17.09.2026:
     div.yith-wcwl-add-to-wishlist.yith-wcwl-add-to-wishlist--link-style
       div.yith-wcwl-add-button > a.add_to_wishlist > svg + span
   und, wenn schon gemerkt:
     div.yith-wcwl-wishlistaddedbrowse|wishlistexistsbrowse
       span.feedback + a > svg + span
   Ohne diese Regeln stand live ein unterstrichener Textverweis mit grossem
   Herz rechts unter dem Warenkorb-Knopf, in der Kachel ein nackter Verweis.
   Die Gestaltung ist dieselbe wie oben, nur die Ziele sind andere.
   ------------------------------------------------------------------------- */

.kachel-merken .yith-wcwl-add-to-wishlist{margin:0;line-height:0}

/* Nicht gemerkt: div.yith-wcwl-add-button > a > svg + span
   Gemerkt:       div.yith-wcwl-wishlistaddedbrowse > span.feedback(svg "Gemerkt") + a "Merkzettel ansehen"
   Im zweiten Fall sitzt das Herz im Hinweis, nicht im Verweis. Deshalb
   ist dort der ganze Container der Kreis, der Verweis liegt unsichtbar
   darueber und fuehrt zum Merkzettel. Vorher war der Kreis leer. */
.kachel-merken .yith-wcwl-add-button a,
.kachel-merken .yith-wcwl-wishlistaddedbrowse,
.kachel-merken .yith-wcwl-wishlistexistsbrowse{
  position:relative;display:grid;place-items:center;
  width:34px;height:34px;padding:0;margin:0;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(2px);
  border:1px solid rgba(0,0,0,.10);border-radius:999px;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
  color:var(--ink);text-decoration:none;font-size:0;line-height:0;
  transition:border-color .15s,background .15s,transform .12s;
}
.kachel-merken .yith-wcwl-add-button a:hover,
.kachel-merken .yith-wcwl-add-button a:focus-visible,
.kachel-merken .yith-wcwl-wishlistaddedbrowse:hover,
.kachel-merken .yith-wcwl-wishlistexistsbrowse:hover{
  background:var(--weiss);border-color:var(--ink);transform:scale(1.06);
}
.kachel-merken .yith-wcwl-add-button a::after{
  content:"";position:absolute;
  top:50%;left:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;
}
/* Das Plugin gibt dem Herz margin-right:5px mit eigener Regel, dadurch
   sass es 2,5 Pixel links der Mitte. Deshalb hier mit Nachdruck. */
.kachel-merken .yith-wcwl-add-button a svg,
.kachel-merken .yith-wcwl-wishlistaddedbrowse svg,
.kachel-merken .yith-wcwl-wishlistexistsbrowse svg{
  display:block;width:16px;height:16px;margin:0 !important;color:inherit;
  fill:none;stroke:currentColor;stroke-width:1.7;
}
.kachel-merken .yith-wcwl-add-button a span{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}
.kachel-merken .yith-wcwl-wishlistaddedbrowse .feedback,
.kachel-merken .yith-wcwl-wishlistexistsbrowse .feedback{
  display:grid;place-items:center;margin:0;padding:0;gap:0 !important;
  font-size:0;line-height:0;color:inherit;
}
.kachel-merken .yith-wcwl-wishlistaddedbrowse a,
.kachel-merken .yith-wcwl-wishlistexistsbrowse a{
  position:absolute;inset:-5px;width:auto;height:auto;margin:0;padding:0;
  background:none;border:0;border-radius:999px;box-shadow:none;
  font-size:0;line-height:0;color:transparent;
}
.kachel-merken .yith-wcwl-wishlistaddedbrowse,
.kachel-merken .yith-wcwl-wishlistexistsbrowse{
  background:var(--weiss);border-color:var(--ink);
}
.kachel-merken .yith-wcwl-wishlistaddedbrowse svg,
.kachel-merken .yith-wcwl-wishlistexistsbrowse svg{fill:currentColor}

.entry-summary .yith-wcwl-add-to-wishlist{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;
  width:100%;flex:1 0 100%;margin:14px 0 0;
}
.entry-summary .yith-wcwl-add-to-wishlist .yith-wcwl-add-button a,
.entry-summary .yith-wcwl-add-to-wishlist .yith-wcwl-wishlistaddedbrowse a,
.entry-summary .yith-wcwl-add-to-wishlist .yith-wcwl-wishlistexistsbrowse a{
  display:inline-flex;align-items:center;gap:8px;
  width:auto;min-height:0;padding:6px 2px;margin:0;
  background:none;border:0;border-radius:0;box-shadow:none;
  color:#525252;font:inherit;font-size:14px;font-weight:500;
  text-decoration:none;cursor:pointer;transition:color .15s;
}
.entry-summary .yith-wcwl-add-to-wishlist a:hover,
.entry-summary .yith-wcwl-add-to-wishlist a:focus-visible{color:var(--ink)}
.entry-summary .yith-wcwl-add-to-wishlist a:hover span,
.entry-summary .yith-wcwl-add-to-wishlist a:focus-visible span{
  text-decoration:underline;text-underline-offset:3px;
}
.entry-summary .yith-wcwl-add-to-wishlist a svg{
  width:18px;height:18px;margin:0;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:1.7;
}
.entry-summary .yith-wcwl-add-to-wishlist .feedback{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14px;font-weight:500;color:var(--ink);
}
.entry-summary .yith-wcwl-add-to-wishlist .feedback svg{
  width:18px;height:18px;margin:0 !important;flex:0 0 auto;
  fill:currentColor;stroke:currentColor;stroke-width:1.7;
}
.entry-summary .yith-wcwl-add-to-wishlist a svg{margin:0 !important}
.entry-summary .yith-wcwl-wishlistaddedbrowse a,
.entry-summary .yith-wcwl-wishlistexistsbrowse a{color:var(--ink)}
.entry-summary .yith-wcwl-wishlistaddedbrowse a svg,
.entry-summary .yith-wcwl-wishlistexistsbrowse a svg{fill:currentColor}

@media (max-width:640px){
  .entry-summary .yith-wcwl-add-to-wishlist .yith-wcwl-add-button a,
  .entry-summary .yith-wcwl-add-to-wishlist .yith-wcwl-wishlistaddedbrowse a,
  .entry-summary .yith-wcwl-add-to-wishlist .yith-wcwl-wishlistexistsbrowse a{
    min-height:44px;padding:0 2px;
  }
}

/* Das Borlabs-Symbol (Fingerabdruck) sitzt links unten und lag am
   17.09.2026 auf dem Telefon genau ueber dem Start-Eintrag der schwebenden
   Leiste. Solange der Banner noch laeuft, rueckt es darueber. */
@media (max-width:720px){
  /* Fixiert ist das innere Element, nicht der Container (ausgelesen
     17.09.2026: div.brlbs-cmpnt-widget.brlbs-bottom-0.brlbs-left-0). */
  #BorlabsCookieWidget .brlbs-cmpnt-widget,
  .brlbs-cmpnt-widget.brlbs-bottom-0{
    bottom:calc(env(safe-area-inset-bottom, 0px) + 92px) !important;
  }
}

/* --- Die Merkzettel-Seite -------------------------------------------------
   Das Plugin setzt eine eigene Ueberschrift ueber die Liste. Zusammen mit
   dem Seitentitel darueber stehen dort zwei Ueberschriften untereinander,
   die dasselbe sagen. Der Seitentitel bleibt, weil er von der Seite kommt
   und damit von Lisa aenderbar ist.
   ------------------------------------------------------------------------- */

.wishlist-title,
.wishlist_table + .wishlist-title,
.yith-wcwl-form .wishlist-title h2{display:none}

.yith-wcwl-share,
.wishlist-title-container,
.wishlist_table + .yith-wcwl-share{display:none !important}

.beitrag-text .yith-wcwl-form,
.beitrag-text .woocommerce.yith-wcwl-form{
  max-width:none;margin:0;padding:0;background:none;border:0;border-radius:0;
}

.wishlist_table{width:100%;border-collapse:collapse;margin:8px 0 0}
.wishlist_table th{
  padding:12px 10px;text-align:left;
  font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:#525252;
  background:var(--grau-50);border-bottom:1px solid var(--grau-200);
}
.wishlist_table td{
  padding:14px 10px;border-bottom:1px solid var(--grau-200);vertical-align:middle;
}
.wishlist_table td.product-thumbnail img{width:70px;height:auto}
.wishlist_table td.product-name a{
  color:var(--ink);text-decoration:none;font-weight:600;font-size:15px;
}
.wishlist_table td.product-name a:hover{text-decoration:underline;text-underline-offset:3px}
.wishlist_table td.product-remove a{
  display:inline-grid;place-items:center;width:28px;height:28px;
  border:1px solid var(--grau-200);border-radius:999px;
  color:#525252;text-decoration:none;font-size:15px;line-height:1;
}
.wishlist_table td.product-remove a:hover{border-color:var(--ink);color:var(--ink)}

/* ---------------------------------------------------------------------------
   Fusszeile, ausgebaut
   ---------------------------------------------------------------------------
   Vier Spalten mit unterschiedlichem Gewicht: Die Markenspalte darf breiter
   sein als die drei Linklisten, sonst reisst der Satz darunter auf zwei
   Zeichen pro Zeile.
   --------------------------------------------------------------------------- */

.fuss-inner{grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px 32px}

.fuss-spalte--marke{max-width:34ch}
.fuss-logo{display:inline-block;margin:0 0 14px}
.fuss-logo img{width:auto;max-width:210px;height:auto;display:block}

.fuss-adresse{
  font-style:normal;font-size:13px;line-height:1.65;color:#525252;margin:0 0 10px;
}

.fuss-menue a{
  display:inline-block;padding:2px 0;
  text-underline-offset:3px;
}

/* Der Hinweis auf den Anruf ist der eine Satz in der Fusszeile, der etwas
   verkauft. Deshalb dunkler als der Rest, aber ohne Farbe. */
.fuss-hinweis{
  margin-top:12px;font-size:13px;line-height:1.55;color:var(--ink);font-weight:500;
}

.fuss-widgets{margin-top:32px}

.fuss-zeile{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;
}
.fuss-zeile p{margin:0;font-size:12px;color:#525252}
/* Live heisst der Shop "Salomon Schuhe kaufen in unserem Online Shop", das
   ist der SEO-Titel, den Lisa pflegt, und mit Copyright davor 55 Zeichen.
   Als Flex-Element schrumpfte der Absatz und brach um. nowrap plus
   flex:0 0 auto, am Telefon wieder normal (siehe Media Query). */
.fuss-zeile > p:first-child{white-space:nowrap;flex:0 0 auto}
/* Keine Breitenbegrenzung. Der Satz hat 65 Zeichen und wurde durch die
   fruehere Grenze von 60 auf zwei Zeilen gebrochen, obwohl die Fusszeile
   1320 Pixel breit ist. Michaels Ansage 05.09.2026: in eine Zeile.
   nowrap zusaetzlich, weil der Satz sonst als Flex-Element schrumpft,
   sobald der Widerrufsknopf daneben Platz braucht. */
.fuss-steuer{max-width:none;white-space:nowrap}

@media (max-width:900px){
  .fuss-inner{grid-template-columns:1fr 1fr;gap:32px 24px}
  .fuss-spalte--marke{grid-column:1 / -1;max-width:46ch}
}

@media (max-width:640px){
  .fuss{padding-top:36px;margin-top:44px}
  .fuss-inner{grid-template-columns:1fr;gap:28px}
  .fuss-spalte--marke{max-width:none}
  .fuss-logo img{max-width:180px}

  /* Am Telefon sind das echte Ziele fuer den Daumen, keine Fussnoten. */
  .fuss-menue a{padding:8px 0;font-size:14px}
  .fuss-zeile{margin-top:24px}

  /* Am Telefon ist fuer eine Zeile kein Platz, dort darf der Satz wieder
     umbrechen. nowrap wuerde ihn sonst seitlich aus dem Bild schieben. */
  .fuss-steuer{white-space:normal}
  .fuss-zeile > p:first-child{white-space:normal}
}

@media (max-width:640px){
  /* Am Telefon nimmt das Logo sonst zu viel von der Hoehe, die fuer
     Produkte gebraucht wird. */
  .marke img,
  img.custom-logo{max-height:38px}
}

/* ---------------------------------------------------------------------------
   Textseiten (Impressum, Versand, Zahlung, AGB, Widerruf, Datenschutz)
   ---------------------------------------------------------------------------
   Hier gilt bewusst das Gegenteil der Kategorieseiten: Der Kategorietext
   nutzt die volle Breite, weil er unter einem Katalog steht, der sie
   ebenfalls nutzt, und alles andere sah nach Fehler aus. Auf einer reinen
   Textseite gibt es nichts, womit der Text fluchten muesste. Ueber die
   ganzen 1222 Pixel gelesen waeren das gut 200 Zeichen je Zeile, und beim
   Zeilensprung findet das Auge den Anfang nicht mehr.

   Rechtstexte werden ohnehin ungern gelesen. Sie sollten es einem
   wenigstens nicht zusaetzlich schwer machen.
   --------------------------------------------------------------------------- */

.beitrag{padding:8px 0 24px}
.beitrag-titel{margin:0 0 24px}

/* Volle Inhaltsbreite (Michaels Ansage 05.09.2026), wie bei den
   Kategorietexten. Lange Zeilen brauchen mehr Luft dazwischen, deshalb
   steht der Zeilenabstand hier hoeher als im uebrigen Shop. Das Formular
   auf der Widerrufsseite bleibt schmal, ein Eingabefeld ueber die ganze
   Seitenbreite waere nicht besser bedienbar, nur groesser. */
.beitrag-text > *:first-child{margin-top:0}

.beitrag-text h2{
  margin:34px 0 12px;font-size:20px;
  text-transform:none;letter-spacing:normal;
}
.beitrag-text h3{
  margin:24px 0 8px;font-size:16.5px;
  text-transform:none;letter-spacing:normal;
}
.beitrag-text p{margin:0 0 16px;font-size:15.5px;line-height:1.75;color:#3f3f3f}
.beitrag-text ul,
.beitrag-text ol{margin:0 0 16px;padding-left:22px}
.beitrag-text li{margin:0 0 8px;font-size:15.5px;line-height:1.65;color:#3f3f3f}
.beitrag-text strong{color:var(--ink)}
.beitrag-text a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* Adressen und kurze Datenblöcke im Impressum brauchen engere Zeilen als
   Fliesstext, sonst stehen Strasse und Ort weit auseinander. */
.beitrag-text p:has(br){line-height:1.55}

@media (max-width:640px){
  .beitrag-text h2{font-size:18px;margin-top:28px}
  .beitrag-text h3{font-size:16px}
  .beitrag-text p,
  .beitrag-text li{font-size:15px}
}

/* ---------------------------------------------------------------------------
   Widerrufsbutton (Germanized, Paket eu-order-withdrawal-button)
   ---------------------------------------------------------------------------
   Das Plugin gibt ein nacktes Formular ohne eigene Gestaltung aus: Felder in
   Browser-Voreinstellung, Beschriftung und Eingabefeld in derselben Zeile,
   Knopf im Systemstil.

   Der Absendeknopf ist SCHWARZ, nicht orange. Orange gehoert im ganzen Shop
   allein der Kaufhandlung. Ein Widerruf ist das genaue Gegenteil, und ihn in
   der Kauffarbe zu zeigen waere zynisch.

   :not(.wc-block-components-form) haelt die Block-Kasse und den Block-
   Warenkorb heraus, :not(.yith-wcwl-form) den Merkzettel, der ebenfalls
   ein Formular ist (live am 17.09.2026 als 520 Pixel schmaler grauer
   Kasten aufgefallen). Beide liegen auch in .beitrag-text, und am 17.09.2026
   hat max-width:520px live das ganze Kassenformular auf eine schmale
   Spalte gedrueckt.
   --------------------------------------------------------------------------- */

.eu-owb-withdrawal-request-form,
form.eu-owb-form,
.beitrag-text form:not(.wc-block-components-form):not(.yith-wcwl-form){
  max-width:520px;margin:28px 0 0;
  padding:24px;background:var(--grau-50);
  border:1px solid var(--grau-200);border-radius:var(--radius);
}

.beitrag-text form:not(.wc-block-components-form):not(.yith-wcwl-form) p{margin:0 0 16px;display:flex;flex-direction:column;gap:6px}
.beitrag-text form:not(.wc-block-components-form):not(.yith-wcwl-form) label{
  font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.4;
}

.beitrag-text form:not(.wc-block-components-form):not(.yith-wcwl-form) input[type="text"],
.beitrag-text form:not(.wc-block-components-form):not(.yith-wcwl-form) input[type="email"],
.beitrag-text form:not(.wc-block-components-form):not(.yith-wcwl-form) input[type="date"],
.beitrag-text form:not(.wc-block-components-form):not(.yith-wcwl-form) textarea{
  width:100%;box-sizing:border-box;
  padding:11px 13px;
  font:inherit;font-size:15px;
  color:var(--ink);background:var(--weiss);
  border:1px solid var(--grau-200);border-radius:var(--radius);
}
.beitrag-text form:not(.wc-block-components-form):not(.yith-wcwl-form) input:focus,
.beitrag-text form:not(.wc-block-components-form):not(.yith-wcwl-form) textarea:focus{
  outline:2px solid var(--schwarz);outline-offset:1px;border-color:var(--schwarz);
}
.beitrag-text form:not(.wc-block-components-form):not(.yith-wcwl-form) textarea{min-height:110px;resize:vertical}

.beitrag-text form:not(.wc-block-components-form):not(.yith-wcwl-form) .required,
.beitrag-text form:not(.wc-block-components-form):not(.yith-wcwl-form) abbr[title]{color:#525252;text-decoration:none;border:0}

.beitrag-text form:not(.wc-block-components-form):not(.yith-wcwl-form) button,
.beitrag-text form:not(.wc-block-components-form):not(.yith-wcwl-form) input[type="submit"]{
  display:inline-block;width:auto;
  margin-top:4px;padding:13px 26px;
  background:var(--signal);color:var(--signal-text);
  border:0;border-radius:var(--radius);
  font:inherit;font-size:15px;font-weight:600;
  cursor:pointer;transition:background .15s;
}
.beitrag-text form:not(.wc-block-components-form):not(.yith-wcwl-form) button:hover,
.beitrag-text form:not(.wc-block-components-form):not(.yith-wcwl-form) input[type="submit"]:hover{background:var(--signal-dunkel)}

/* Rueckmeldungen des Plugins nach dem Absenden. */
.beitrag-text .woocommerce-message,
.beitrag-text .woocommerce-error,
.beitrag-text .woocommerce-info{
  margin:0 0 20px;padding:14px 16px;
  border-left:3px solid var(--signal);background:var(--grau-100);
  font-size:15px;list-style:none;
}
.beitrag-text .woocommerce-error{border-left-color:#b23a2b}

@media (max-width:640px){
  .beitrag-text form:not(.wc-block-components-form):not(.yith-wcwl-form){padding:18px 16px}
  /* Muss den Attributselektor der Grundregel erreichen. Unter 16px zoomt
     iOS beim Antippen in das Feld hinein, und der Nutzer landet in einer
     vergroesserten Ansicht, aus der er selbst wieder herausfinden muss. */
  .beitrag-text form:not(.wc-block-components-form):not(.yith-wcwl-form) input[type="text"],
  .beitrag-text form:not(.wc-block-components-form):not(.yith-wcwl-form) input[type="email"],
  .beitrag-text form:not(.wc-block-components-form):not(.yith-wcwl-form) input[type="date"],
  .beitrag-text form:not(.wc-block-components-form):not(.yith-wcwl-form) textarea{font-size:16px}
  .beitrag-text form:not(.wc-block-components-form):not(.yith-wcwl-form) button,
  .beitrag-text form:not(.wc-block-components-form):not(.yith-wcwl-form) input[type="submit"]{width:100%;padding:14px 20px}
}

/* --- Widerrufsknopf in der Fusszeile ---------------------------------------
   § 356a BGB verlangt "hervorgehoben platziert". Ein unterstrichener
   Fusslink erfuellt das nicht, deshalb ein echter Knopf, umrandet statt
   gefuellt.

   Bewusst NICHT orange und nicht schwarz gefuellt: Orange gehoert der
   Kaufhandlung, und eine gefuellte schwarze Flaeche neben dem Copyright
   waere lauter als jeder andere Fusszeileninhalt. Umrandet ist er deutlich
   als Knopf erkennbar, ohne die Fusszeile zu beherrschen.
   ------------------------------------------------------------------------- */

.fuss .eu-owb-order-withdraw-from-contract-button,
.fuss .wrb-footer-wrap{
  margin:0;padding:0;flex:0 0 auto;text-align:left;
}

/* Zwei Knoepfe, ein Aussehen.
   Live laeuft Michaels Plugin (.wrb-button), lokal der Germanized-Knopf.
   Michaels Plugin bringt Inline-CSS mit: Orange #ffa51e, weisse Schrift,
   12px, Radius 1px, ohne Rahmen, das ist die Flatsome-Optik von frueher.
   Die Regel hier ist ueber .fuss spezifischer als die Inline-Klasse und
   gewinnt. Umrandet statt gefuellt, weil Orange im ganzen Shop allein der
   Kaufhandlung gehoert (Festlegung 05.09.2026), und ein Widerruf ist das
   Gegenteil davon. */
.fuss .eu-owb-order-withdraw-from-contract-button a,
.fuss .eu-owb-order-withdraw-from-contract-button a.button,
.fuss .wrb-button,
.fuss a.wrb-button{
  display:inline-block;
  padding:10px 20px;
  background:transparent;background-color:transparent;color:var(--ink);
  border:1px solid var(--ink);border-radius:var(--radius);
  font-size:13.5px;font-weight:600;line-height:1.2;
  text-decoration:none;text-transform:none;letter-spacing:0;
  transition:background .15s,color .15s;
}
.fuss .eu-owb-order-withdraw-from-contract-button a:hover,
.fuss .eu-owb-order-withdraw-from-contract-button a:focus-visible,
.fuss .wrb-button:hover,
.fuss .wrb-button:focus,
.fuss .wrb-button:focus-visible{
  background:var(--signal);background-color:var(--signal);color:var(--signal-text);
  outline:none;
}

@media (max-width:640px){
  /* Selektoren muessen die Grundregel oben erreichen (dort steht a.button
     mit drei Klassen), sonst gewinnt sie. */
  .fuss .eu-owb-order-withdraw-from-contract-button,
  .fuss .wrb-footer-wrap{width:100%}
  .fuss .eu-owb-order-withdraw-from-contract-button a,
  .fuss .eu-owb-order-withdraw-from-contract-button a.button,
  .fuss .wrb-button,
  .fuss a.wrb-button{
    display:block;text-align:center;padding:13px 20px;font-size:14.5px;
  }
}

/* --- Top-Angebote auf der Startseite --------------------------------------
   Am Telefon seitlich schiebbar statt umgebrochen. Vier Kacheln
   untereinander waeren dort eine halbe Bildschirmlaenge und wuerden den
   Groesseneinstieg unter den Rand druecken, der der eigentliche Kern der
   Startseite ist.
   ------------------------------------------------------------------------- */

/* Frueher padding-bottom:0, damit das Groessenband direkt anschloss. Live
   klebten die Groessenreihen der Kacheln dadurch am schwarzen Block,
   Michaels Ansage 17.09.2026: mehr Platz. */
.abschnitt--angebote{padding-bottom:48px}

@media (max-width:640px){
  ul.products.products--schiebbar,
  .woocommerce ul.products.products--schiebbar{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:62%;
    grid-template-columns:none;
    gap:12px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    /* Bewusst OHNE negatives Margin mit Ausgleichs-Padding. Der uebliche
       Trick fuer randlose Slider hat hier nicht gegriffen: Das
       padding-inline wirkte nicht auf die Rasterfelder, die erste Kachel
       klebte bei Pixel 0, waehrend die Ueberschrift darueber eingerueckt
       stand. Gemessen 05.09.2026.

       Der Slider bleibt deshalb im Raster. Die erste Kachel fluchtet mit
       der Ueberschrift, und dass rechts eine weitere angeschnitten ist,
       zeigt deutlich genug, dass es weitergeht. */
    padding-bottom:6px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  ul.products.products--schiebbar::-webkit-scrollbar{display:none}
  ul.products.products--schiebbar li.product{scroll-snap-align:start}
}

/* ==========================================================================
   Einstieg ueber den Verwendungszweck
   ========================================================================== */

/* Neun Kacheln statt vier. Bei vier passte eine Reihe, bei neun braucht es
   ein Raster, das sich selbst umbricht. auto-fill mit Mindestbreite statt
   fester Spaltenzahl, damit es auf jeder Breite aufgeht. */
.kategorien--zwecke{
  grid-template-columns:repeat(auto-fill, minmax(210px, 1fr));
}

/* Filterleiste auf der Zweck-Seite. Sie steht ueber der Groessenleiste und
   nimmt deren Optik auf, damit die drei Filter als eine Einheit lesbar
   sind und nicht als drei fremde Bausteine. */
.zweckfilter{
  display:flex;flex-wrap:wrap;gap:10px 28px;
  margin:0 0 14px;
}

.zweckfilter-zeile{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}

.zweckfilter-titel{
  font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:#525252;
}

.zweckfilter-knoepfe{display:flex;flex-wrap:wrap;gap:6px}

.zweckfilter-knopf{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:36px;padding:0 14px;
  border:1px solid var(--grau-300, #e5e5e5);border-radius:999px;
  background:#fff;color:var(--ink, #262626);
  font-size:13.5px;font-weight:500;line-height:1;text-decoration:none;
  transition:border-color .15s, background .15s;
}

.zweckfilter-knopf:hover,
.zweckfilter-knopf:focus-visible{border-color:var(--schwarz, #171717)}

/* Der gewaehlte Zustand ist schwarz, nicht orange. Orange gehoert
   ausschliesslich der Kaufhandlung (Festlegung 05.09.2026), und Filtern
   ist kein Kauf. */
.zweckfilter-knopf.ist-gewaehlt{
  background:var(--schwarz, #171717);border-color:var(--schwarz, #171717);color:#fff;
}

@media (max-width:640px){
  /* Am Telefon untereinander statt nebeneinander, sonst quetschen sich
     "Für wen" und "Wetter" in eine Zeile und brechen unschoen um. */
  .zweckfilter{flex-direction:column;gap:10px}

  /* 44 Pixel Mindesthoehe fuer die Fingerkuppe. Der Selektor nennt
     .zweckfilter mit, weil die Grundregel oben sonst gewinnt: Sie steht
     weiter oben, ist aber spezifischer. Fuenfmal in dieses Muster
     getappt am 05.09.2026, deshalb hier von vornherein sauber. */
  .zweckfilter .zweckfilter-knopf{min-height:44px;padding:0 16px;font-size:14px}

  .kategorien--zwecke{grid-template-columns:repeat(2, 1fr)}
}

/* --- Widerrufsformular von Michaels Plugin auf volle Breite ---------------
   Michaels Ansage 17.09.2026 am Live-Shop: Platz nutzen. Das Plugin
   begrenzt auf 640px (Inline-CSS), das Theme weiter oben Formulare in
   .beitrag-text auf 520px. Beides hier aufgehoben.

   Damit ein einzelnes E-Mail-Feld nicht 1320px breit wird, liegen die
   Zeilen am Schreibtisch in einem Raster mit zwei Spalten. Textfelder,
   die Zustimmung und der Absendeknopf gehen ueber beide Spalten. :has()
   koennen alle aktuellen Browser; wo nicht, faellt es auf eine Spalte
   zurueck, was dem alten Zustand entspricht. */
.beitrag-text .wrb-form,
.beitrag-text form:not(.wc-block-components-form):not(.yith-wcwl-form).wrb-form{
  max-width:none;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px 32px;
  align-items:start;
}
.beitrag-text .wrb-form .wrb-row{margin:0 0 10px}
.beitrag-text .wrb-form .wrb-row:has(textarea),
.beitrag-text .wrb-form .wrb-row.wrb-check,
.beitrag-text .wrb-form .wrb-row:has(.wrb-check),
.beitrag-text .wrb-form .wrb-row:has(button),
.beitrag-text .wrb-form .wrb-row:has([type=submit]),
.beitrag-text .wrb-form > p,
.beitrag-text .wrb-form > button,
.beitrag-text .wrb-form > [type=submit],
.beitrag-text .wrb-form > .wrb-check,
.beitrag-text .wrb-form > .wrb-actions{grid-column:1 / -1}

/* Versteckte Schutzfelder gegen Spam (im Plugin "Bitte leer lassen")
   duerfen keine Rasterzelle belegen, sonst verschiebt sich alles um eins. */
.beitrag-text .wrb-form > [style*="display:none"],
.beitrag-text .wrb-form > [style*="display: none"],
.beitrag-text .wrb-form > [aria-hidden="true"],
.beitrag-text .wrb-form > input[type=hidden]{display:none}

/* Die Zweier-Zeilen des Plugins (Vorname/Nachname, PLZ/Ort) bleiben
   innerhalb ihrer Rasterzelle nebeneinander. */
.beitrag-text .wrb-form .wrb-cols{display:flex;gap:14px}
.beitrag-text .wrb-form .wrb-cols > div{flex:1 1 0}

@media (max-width:760px){
  .beitrag-text .wrb-form,
  .beitrag-text form:not(.wc-block-components-form):not(.yith-wcwl-form).wrb-form{grid-template-columns:1fr;gap:6px}
}

/* --- Rechtsseiten: Adressbloecke und Trenner --------------------------------
   Die Widerrufsbelehrung nennt zweimal die Anschrift. Im Original standen
   die Zeilen fett und mit harten Umbruechen in einem Absatz. Jetzt ein
   ruhiger Block mit Einzug, ohne Fettung, die dort nichts hervorhebt. */
.beitrag-text p.adresse{
  margin:14px 0 18px;padding:12px 18px;
  border-left:3px solid var(--grau-300, #e5e5e5);
  line-height:1.6;color:var(--ink);
}
.beitrag-text hr{border:0;border-top:1px solid var(--grau-200, #eee);margin:36px 0}