/* ==================================================================
   Jaspos - gemeinsame Gestaltung fuer alle Entwurfsseiten
   Tannengruen #2E4A3D · Moos #4E7A5E · Salbei #7FA88C
   Messing #C9963F · Sand #EFE7D8
   Alle Komponenten nutzen ausschliesslich Variablen, keine festen Werte.
================================================================== */

/* Muss ganz oben stehen und mit !important, sonst gewinnt jede
   Klassenregel mit eigenem display. Genau das ist passiert:
   .knopf-schlicht { display: flex } hat das hidden-Attribut
   ueberstimmt, und der Verwaltungsknopf war ohne Anmeldung sichtbar. */
[hidden] { display: none !important; }

:root {
  color-scheme: light;
  --bg:            #f4f1e8;
  --bg-deep:       #eae5d7;
  --surface:       #ffffff;
  --surface-soft:  #faf8f2;
  --border:        #ddd6c5;
  /* Umrandet Eingabefelder und Bedienelemente. WCAG 1.4.11 verlangt
     dafuer 3:1 gegen den Untergrund - der frueherer Wert #b9ae95 kam
     auf 2,20:1. Nachgerechnet mit infra/kontrast-pruefen.py. */
  --border-strong: #8a7e64;
  --text:          #1d2b23;
  --text-muted:    #5d6b60;
  --text-soft:     #7d8a80;

  --accent:        #2e4a3d;
  --accent-hover:  #24392f;
  --accent-fg:     #f4f1e8;
  --accent-soft:   rgba(46, 74, 61, 0.08);

  --brass:         #a8752a;
  --brass-soft:    rgba(201, 150, 63, 0.16);
  --sage:          #4e7a5e;

  --band:          #2e4a3d;
  --band-fg:       #e4ded0;

  --hot:           #a8321f;
  --hot-soft:      rgba(168, 50, 31, 0.10);
  --ok:            #2f6b45;
  --ok-soft:       rgba(47, 107, 69, 0.10);

  --shadow-card:   0 0 2px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.12);
  --shadow-lift:   0 6px 18px rgba(29, 43, 35, 0.14);
  --radius:        0.625rem;
  --radius-card:   10px;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --bg:            #141a16;
  --bg-deep:       #0f1411;
  --surface:       #1c241e;
  --surface-soft:  #222b25;
  --border:        #334137;
  --border-strong: #78907f;
  --text:          #e6e1d4;
  --text-muted:    #9aa89e;
  --text-soft:     #7e8c83;

  --accent:        #7fa88c;
  --accent-hover:  #93b89e;
  --accent-fg:     #141a16;
  --accent-soft:   rgba(127, 168, 140, 0.14);

  --brass:         #d7a44f;
  --brass-soft:    rgba(215, 164, 79, 0.16);
  --sage:          #7fa88c;

  --band:          #0f1411;
  --band-fg:       #9aa89e;

  --hot:           #e3735c;
  --hot-soft:      rgba(227, 115, 92, 0.14);
  --ok:            #6fbf8c;
  --ok-soft:       rgba(111, 191, 140, 0.12);

  --shadow-card:   0 0 2px rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.34);
  --shadow-lift:   0 6px 18px rgba(0, 0, 0, 0.40);
}

/* ==================================================================
   Erscheinungsbilder
   ------------------------------------------------------------------
   Ein Erscheinungsbild ist ein Satz Variablen, mehr nicht. Wo eines
   eigene Regeln fuer einzelne Bausteine braeuchte, war die Regel zu
   eng geschrieben - dann gehoert der Baustein geaendert, nicht das
   Erscheinungsbild erweitert. Sonst pflegt man vier Oberflaechen
   statt einer.

   Hell und Dunkel bleiben davon unberuehrt: Jedes Bild hat beide
   Fassungen. Wer abends dunkel liest, will deshalb nicht ein anderes
   Erscheinungsbild.

   Die Kontraste sind nachgerechnet (infra/kontrast-pruefen.py), nicht
   geschaetzt. Ein Bild, das gut aussieht und schlecht lesbar ist, ist
   keines.
================================================================== */

/* ---------------- Klassisch: gedrucktes Katalogblatt ---------------- */
html[data-bild="klassisch"] {
  --bg:            #f6f2ea;
  --bg-deep:       #ece4d5;
  --surface:       #fffdf8;
  --surface-soft:  #f7f1e5;
  --border:        #d8cdb6;
  --border-strong: #8b7d60;
  --text:          #241c14;
  --text-muted:    #5c4f40;
  --text-soft:     #7d6f5c;

  --accent:        #6b2230;
  --accent-hover:  #561a26;
  --accent-fg:     #fdf8f0;
  --accent-soft:   rgba(107, 34, 48, 0.08);

  --brass:         #8a6a1f;
  --brass-soft:    rgba(138, 106, 31, 0.14);
  --sage:          #6b6045;

  --band:          #3a2a20;
  --band-fg:       #e9dcc6;

  --hot:           #96261a;
  --ok:            #3f6236;
  --ok-soft:       rgba(63, 98, 54, 0.10);

  --radius:        0.25rem;
  --radius-card:   4px;
  --schrift-kopf:  Georgia, "Times New Roman", serif;
}
html[data-bild="klassisch"][data-theme="dark"] {
  --bg:            #1a1512;
  --bg-deep:       #120e0c;
  --surface:       #241d18;
  --surface-soft:  #2c231d;
  --border:        #3d332a;
  --border-strong: #8d7a64;
  --text:          #ece0cc;
  --text-muted:    #b3a48d;
  --text-soft:     #94856f;

  --accent:        #c98a97;
  --accent-hover:  #d9a0ab;
  --accent-fg:     #1a1512;
  --accent-soft:   rgba(201, 138, 151, 0.14);

  --brass:         #d4b169;
  --brass-soft:    rgba(212, 177, 105, 0.16);
  --sage:          #a89a75;

  --band:          #120e0c;
  --band-fg:       #b3a48d;

  --hot:           #e58371;
  --ok:            #8ec97f;
  --ok-soft:       rgba(142, 201, 127, 0.12);
}

/* ---------------- Modern: aufgeraeumt, ein Akzent ----------------
   Der Anspruch stand frueher nur in der Beschreibung: Der Akzent war
   ein gedaempftes Dunkelgruen, kaum von Waldgruen zu unterscheiden,
   und das Messing daneben war ein zweiter, gleich lauter Ton. Jetzt
   traegt ein sattes Smaragd allein, die Graustufen sind neutral statt
   blaustichig, und die Flaechen bekommen mehr Luft: groessere Radien,
   Schatten nur als hauchduenne Kante.

   Das Messing bleibt als eigener Ton erhalten, obwohl "ein Akzent"
   anderes nahelegt - es kennzeichnet die Erlaubnispflicht. Diese
   Kennzeichnung muss sich vom Akzent unterscheiden, sonst geht die
   wichtigste Angabe der Seite in der Gestaltung unter. */
html[data-bild="modern"] {
  --bg:            #f2f5f3;
  --bg-deep:       #e7ece9;
  --surface:       #ffffff;
  --surface-soft:  #f7faf8;
  --border:        #cfd8d3;
  --border-strong: #6f7c76;
  --text:          #111614;
  --text-muted:    #55605b;
  --text-soft:     #727e79;

  --accent:        #0a6e54;
  --accent-hover:  #085743;
  --accent-fg:     #ffffff;
  --accent-soft:   rgba(10, 110, 84, 0.07);

  --brass:         #9c5a06;
  --brass-soft:    rgba(156, 90, 6, 0.10);
  --sage:          #3a7f8c;

  --band:          #111614;
  --band-fg:       #e8edeb;

  --hot:           #b32218;
  --hot-soft:      rgba(179, 34, 24, 0.08);
  --ok:            #16663d;
  --ok-soft:       rgba(22, 102, 61, 0.08);

  --shadow-card:   0 0 0 1px rgba(17, 22, 20, 0.07), 0 1px 2px rgba(17, 22, 20, 0.06);
  --shadow-lift:   0 8px 24px rgba(17, 22, 20, 0.12);
  --radius:        0.625rem;
  --radius-card:   12px;
}
html[data-bild="modern"][data-theme="dark"] {
  --bg:            #0d100f;
  --bg-deep:       #070908;
  --surface:       #161a18;
  --surface-soft:  #1d2320;
  --border:        #29302d;
  --border-strong: #7d8985;
  --text:          #eef2f0;
  --text-muted:    #a3afaa;
  --text-soft:     #8a9691;

  --accent:        #3fd39f;
  --accent-hover:  #63dcb2;
  --accent-fg:     #0d100f;
  --accent-soft:   rgba(63, 211, 159, 0.12);

  --brass:         #e0a94f;
  --brass-soft:    rgba(224, 169, 79, 0.14);
  --sage:          #5fb4c4;

  --band:          #070908;
  --band-fg:       #a3afaa;

  --hot:           #f08272;
  --hot-soft:      rgba(240, 130, 114, 0.12);
  --ok:            #63d391;
  --ok-soft:       rgba(99, 211, 145, 0.12);

  --shadow-card:   0 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow-lift:   0 10px 30px rgba(0, 0, 0, 0.45);
}

/* ---------------- Hoher Kontrast ---------------- */
html[data-bild="kontrast"] {
  --bg:            #ffffff;
  --bg-deep:       #f0f0f0;
  --surface:       #ffffff;
  --surface-soft:  #f4f4f4;
  --border:        #6a6a6a;
  --border-strong: #000000;
  --text:          #000000;
  --text-muted:    #2f2f2f;
  --text-soft:     #3d3d3d;

  --accent:        #00402e;
  --accent-hover:  #002d20;
  --accent-fg:     #ffffff;
  --accent-soft:   rgba(0, 64, 46, 0.10);

  --brass:         #6a4500;
  --brass-soft:    rgba(106, 69, 0, 0.14);
  --sage:          #00402e;

  --band:          #000000;
  --band-fg:       #ffffff;

  --hot:           #a00000;
  --hot-soft:      rgba(160, 0, 0, 0.10);
  --ok:            #005522;
  --ok-soft:       rgba(0, 85, 34, 0.10);

  --shadow-card:   0 0 0 2px #000000;
  --shadow-lift:   0 0 0 3px #000000;
  --radius:        0.25rem;
  --radius-card:   4px;
}
html[data-bild="kontrast"][data-theme="dark"] {
  --bg:            #000000;
  --bg-deep:       #000000;
  --surface:       #0d0d0d;
  --surface-soft:  #161616;
  --border:        #9a9a9a;
  --border-strong: #ffffff;
  --text:          #ffffff;
  --text-muted:    #e0e0e0;
  --text-soft:     #cccccc;

  --accent:        #74e8bd;
  --accent-hover:  #96f0cf;
  --accent-fg:     #000000;
  --accent-soft:   rgba(116, 232, 189, 0.16);

  --brass:         #ffc94d;
  --brass-soft:    rgba(255, 201, 77, 0.18);
  --sage:          #74e8bd;

  --band:          #000000;
  --band-fg:       #ffffff;

  --hot:           #ff8a75;
  --hot-soft:      rgba(255, 138, 117, 0.16);
  --ok:            #7de89c;
  --ok-soft:       rgba(125, 232, 156, 0.16);

  --shadow-card:   0 0 0 2px #ffffff;
  --shadow-lift:   0 0 0 3px #ffffff;
}

/* ---------------- Daemmerung: blaue Stunde, Kupfer ----------------
   Die Farben der Zeit kurz vor Sonnenaufgang, wenn die Ansitzjagd
   beginnt: tiefes Blau mit einem warmen Kupferton dagegen. Als
   einziges Bild ist es auch in der hellen Fassung merklich kuehl. */
html[data-bild="daemmerung"] {
  --bg:            #eef1f6;
  --bg-deep:       #e2e7ef;
  --surface:       #ffffff;
  --surface-soft:  #f5f7fa;
  --border:        #d2dae6;
  --border-strong: #77839a;
  --text:          #141a26;
  --text-muted:    #4e5972;
  --text-soft:     #6b7691;

  --accent:        #2a3f6b;
  --accent-hover:  #1f3054;
  --accent-fg:     #ffffff;
  --accent-soft:   rgba(42, 63, 107, 0.08);

  --brass:         #9a5322;
  --brass-soft:    rgba(154, 83, 34, 0.12);
  --sage:          #416f80;

  --band:          #1b2537;
  --band-fg:       #dfe5ef;

  --hot:           #a82f24;
  --hot-soft:      rgba(168, 47, 36, 0.09);
  --ok:            #25663f;
  --ok-soft:       rgba(37, 102, 63, 0.09);

  --shadow-card:   0 1px 2px rgba(20, 26, 38, 0.10), 0 0 0 1px rgba(20, 26, 38, 0.04);
  --shadow-lift:   0 8px 24px rgba(20, 26, 38, 0.18);
  --radius:        0.625rem;
  --radius-card:   12px;
}
html[data-bild="daemmerung"][data-theme="dark"] {
  --bg:            #111726;
  --bg-deep:       #0b1019;
  --surface:       #1a2233;
  --surface-soft:  #212b3f;
  --border:        #2c364a;
  --border-strong: #7d8ba5;
  --text:          #e8ecf5;
  --text-muted:    #a4b0c6;
  --text-soft:     #8b98b0;

  --accent:        #8faded;
  --accent-hover:  #a8c0f2;
  --accent-fg:     #111726;
  --accent-soft:   rgba(143, 173, 237, 0.14);

  --brass:         #e0975c;
  --brass-soft:    rgba(224, 151, 92, 0.16);
  --sage:          #6fa8bd;

  --band:          #0b1019;
  --band-fg:       #a4b0c6;

  --hot:           #f08a7c;
  --hot-soft:      rgba(240, 138, 124, 0.14);
  --ok:            #6cc98d;
  --ok-soft:       rgba(108, 201, 141, 0.14);

  --shadow-card:   0 1px 2px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-lift:   0 8px 24px rgba(0, 0, 0, 0.55);
}

/* ---------------- Birke: hell, feine Linien ----------------
   Fuer helle Raeume und lange Sitzungen. Kaum Farbe, kaum Schatten -
   die Ordnung entsteht durch Linien, nicht durch Flaechen. Wer viele
   Angebote nacheinander durchsieht, ermuedet damit am langsamsten. */
html[data-bild="birke"] {
  --bg:            #f8f8f5;
  --bg-deep:       #eeefea;
  --surface:       #ffffff;
  --surface-soft:  #f5f6f2;
  --border:        #d4d7cf;
  --border-strong: #777d74;
  --text:          #1b1e1c;
  --text-muted:    #545c58;
  --text-soft:     #707873;

  --accent:        #40534d;
  --accent-hover:  #30403b;
  --accent-fg:     #ffffff;
  --accent-soft:   rgba(64, 83, 77, 0.07);

  --brass:         #7b682f;
  --brass-soft:    rgba(123, 104, 47, 0.10);
  --sage:          #68766f;

  --band:          #2e3532;
  --band-fg:       #edf0ec;

  --hot:           #a83224;
  --hot-soft:      rgba(168, 50, 36, 0.08);
  --ok:            #2c6b3c;
  --ok-soft:       rgba(44, 107, 60, 0.08);

  --shadow-card:   none;
  --shadow-lift:   0 0 0 2px rgba(64, 83, 77, 0.18);
  --radius:        0.25rem;
  --radius-card:   4px;
}
html[data-bild="birke"][data-theme="dark"] {
  --bg:            #151613;
  --bg-deep:       #0f100e;
  --surface:       #1d1f1b;
  --surface-soft:  #242720;
  --border:        #3e423a;
  --border-strong: #898f84;
  --text:          #f0f1ed;
  --text-muted:    #afb5ae;
  --text-soft:     #969d96;

  --accent:        #aabbb3;
  --accent-hover:  #becbc5;
  --accent-fg:     #151613;
  --accent-soft:   rgba(170, 187, 179, 0.12);

  --brass:         #c9b36b;
  --brass-soft:    rgba(201, 179, 107, 0.14);
  --sage:          #9aa8a1;

  --band:          #0f100e;
  --band-fg:       #afb5ae;

  --hot:           #ef8878;
  --hot-soft:      rgba(239, 136, 120, 0.12);
  --ok:            #77cb8c;
  --ok-soft:       rgba(119, 203, 140, 0.12);

  --shadow-card:   none;
  --shadow-lift:   0 0 0 2px rgba(170, 187, 179, 0.24);
}

/* ---------------- Loden: Oliv und Leder ----------------
   Naeher am Gegenstand als alles andere hier: die Farben von
   Lodenmantel, Riemenzeug und Patronentasche. Kraeftiger als
   Waldgruen, mit einem Lederton statt Messing. */
html[data-bild="loden"] {
  --bg:            #eae7da;
  --bg-deep:       #ddd8c7;
  --surface:       #f8f5e9;
  --surface-soft:  #f0ecde;
  --border:        #cfc6ad;
  --border-strong: #776c50;
  --text:          #202117;
  --text-muted:    #55563e;
  --text-soft:     #707158;

  --accent:        #3f4b1f;
  --accent-hover:  #303918;
  --accent-fg:     #f8f5e9;
  --accent-soft:   rgba(63, 75, 31, 0.10);

  --brass:         #8f4f24;
  --brass-soft:    rgba(143, 79, 36, 0.15);
  --sage:          #626b42;

  --band:          #292d19;
  --band-fg:       #ebe6d6;

  --hot:           #a3311c;
  --hot-soft:      rgba(163, 49, 28, 0.10);
  --ok:            #3f6b2d;
  --ok-soft:       rgba(63, 107, 45, 0.10);

  --shadow-card:   0 1px 3px rgba(32, 33, 23, 0.16);
  --shadow-lift:   0 5px 14px rgba(32, 33, 23, 0.24);
  --radius:        0.25rem;
  --radius-card:   5px;
}
html[data-bild="loden"][data-theme="dark"] {
  --bg:            #171810;
  --bg-deep:       #10110c;
  --surface:       #212318;
  --surface-soft:  #292b1e;
  --border:        #3b3d2c;
  --border-strong: #8d876e;
  --text:          #efeddf;
  --text-muted:    #b2ae98;
  --text-soft:     #99957f;

  --accent:        #becb76;
  --accent-hover:  #ced78f;
  --accent-fg:     #171810;
  --accent-soft:   rgba(190, 203, 118, 0.14);

  --brass:         #e09a62;
  --brass-soft:    rgba(224, 154, 98, 0.16);
  --sage:          #a2aa78;

  --band:          #10110c;
  --band-fg:       #b2ae98;

  --hot:           #ef8a72;
  --hot-soft:      rgba(239, 138, 114, 0.13);
  --ok:            #8cc87a;
  --ok-soft:       rgba(140, 200, 122, 0.13);

  --shadow-card:   0 1px 3px rgba(0, 0, 0, 0.48);
  --shadow-lift:   0 5px 14px rgba(0, 0, 0, 0.62);
}

/* ---------------- Stahl: kuehles Grau, ein kaltes Blau ----------------
   Werkstatt statt Wald: Metall, Oel und Werkbank. Sachlich, mit
   kleinen Radien und harten Kanten - fuer alle, denen die warmen
   Bilder zu gemuetlich sind. */
html[data-bild="stahl"] {
  --bg:            #f4f5f6;
  --bg-deep:       #e8eaec;
  --surface:       #ffffff;
  --surface-soft:  #f8f9fa;
  --border:        #dbdee1;
  --border-strong: #767c82;
  --text:          #15181b;
  --text-muted:    #4f565d;
  --text-soft:     #6b737a;

  --accent:        #1c5b7a;
  --accent-hover:  #14455d;
  --accent-fg:     #ffffff;
  --accent-soft:   rgba(28, 91, 122, 0.08);

  --brass:         #8c5a10;
  --brass-soft:    rgba(140, 90, 16, 0.11);
  --sage:          #4a7382;

  --band:          #1c2126;
  --band-fg:       #e2e6e9;

  --hot:           #a82f22;
  --hot-soft:      rgba(168, 47, 34, 0.09);
  --ok:            #1f6640;
  --ok-soft:       rgba(31, 102, 64, 0.09);

  --shadow-card:   0 1px 1px rgba(21, 24, 27, 0.14);
  --shadow-lift:   0 4px 12px rgba(21, 24, 27, 0.22);
  --radius:        0.25rem;
  --radius-card:   6px;
}
html[data-bild="stahl"][data-theme="dark"] {
  --bg:            #0f1315;
  --bg-deep:       #0a0d0f;
  --surface:       #181d21;
  --surface-soft:  #1f262a;
  --border:        #2b3338;
  --border-strong: #7c868d;
  --text:          #eaeef1;
  --text-muted:    #a1acb4;
  --text-soft:     #88949c;

  --accent:        #63bde3;
  --accent-hover:  #83cbe9;
  --accent-fg:     #0f1315;
  --accent-soft:   rgba(99, 189, 227, 0.13);

  --brass:         #dfa953;
  --brass-soft:    rgba(223, 169, 83, 0.15);
  --sage:          #79aebd;

  --band:          #0a0d0f;
  --band-fg:       #a1acb4;

  --hot:           #f0857a;
  --hot-soft:      rgba(240, 133, 122, 0.13);
  --ok:            #6bcb92;
  --ok-soft:       rgba(107, 203, 146, 0.13);

  --shadow-card:   0 1px 1px rgba(0, 0, 0, 0.45);
  --shadow-lift:   0 4px 12px rgba(0, 0, 0, 0.60);
}

/* Was die Erscheinungsbilder ueber Farben hinaus setzen duerfen:
  eine andere Schrift fuer Ueberschriften. Mehr nicht - alles Weitere
  gehoert in die Bausteine. */
h1, h2, h3 {
  font-family: var(--schrift-kopf, inherit);
  /* "Nutzungsbedingungen" und "Datenschutzerklaerung" sind laenger als
     ein Telefon breit ist. Ohne Trennung schoben sie die ganze Seite
     zur Seite - auf /agb um 43 Pixel. Getrennt wird nach den Regeln
     der Sprache, die im html-Element steht; break-word bleibt als
     Rueckfall fuer Woerter, fuer die es keine Trennstelle gibt. */
  overflow-wrap: break-word;
  hyphens: auto;
}
html[data-schrift="gross"] body { font-size: 1.0625rem; }
html[data-bild="kontrast"] a { text-decoration: underline; }
html[data-bild="kontrast"] :focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Der Kopf klebt oben. Ohne diesen Abstand rutschen Sprungziele und per
   Tastatur angesteuerte Elemente darunter und sind nicht mehr anklickbar. */
html { scroll-padding-top: 130px; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", Aptos, Calibri, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
.huelle { width: min(1240px, 100% - 32px); margin-inline: auto; }

/* ---------------- Kopfbereich ---------------- */
.leiste-oben {
  background: var(--band); color: var(--band-fg);
  border-bottom: 1px solid var(--border); font-size: 0.8125rem;
}
.leiste-oben .huelle {
  display: flex; align-items: center; gap: 20px;
  height: 36px; justify-content: space-between;
}
.leiste-oben-links { display: flex; gap: 12px; align-items: center; }
.leiste-oben a:hover { text-decoration: underline; }
.leiste-oben .punkt { opacity: 0.55; }

header.kopf {
  position: sticky; top: 0; z-index: 50;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.kopf-haupt { display: flex; align-items: center; gap: 24px; padding: 14px 0; }
.marke { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.marke .wortmarke {
  font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; color: var(--accent);
}
.marke .wortmarke span { color: var(--brass); }

.suche { flex: 1; display: flex; min-width: 15rem; }
.suche-bereich {
  display: flex; align-items: center;
  border: 2px solid var(--border-strong); border-right: none;
  border-radius: var(--radius) 0 0 var(--radius);
  background: var(--surface-soft); padding: 0 12px; height: 46px;
  color: var(--text-muted); flex-shrink: 0;
}
.suche-bereich select {
  border: none; background: transparent; color: var(--text);
  font: inherit; font-size: 0.9375rem; outline: none; cursor: pointer; max-width: 150px;
}
.suche input {
  /* Die 15rem oben gelten fuer die ganze Suche - Bereichswahl und Knopf
     zehren davon so viel auf, dass fuer das Eingabefeld ein Rest von
     wenigen Pixeln blieb. Angemeldet stand dort nur noch "W". Also eine
     eigene Mindestbreite fuer das Feld selbst. */
  flex: 1; min-width: 7rem; height: 46px;
  border: 2px solid var(--border-strong); border-left: none; border-right: none;
  background: var(--surface); color: var(--text); font: inherit;
  padding: 0 14px; outline: none;
}
.suche input::placeholder { color: var(--text-soft); }
.suche input:focus { border-color: var(--accent); }
.suche button {
  height: 46px; padding: 0 26px;
  border: 2px solid var(--accent); background: var(--accent); color: var(--accent-fg);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-weight: 600; display: flex; align-items: center; gap: 8px;
}
.suche button:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.kopf-aktionen { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.knopf-schlicht {
  display: flex; align-items: center; gap: 7px;
  background: transparent; border: 1px solid transparent; color: var(--text);
  padding: 8px 12px; border-radius: var(--radius); font-size: 0.9375rem;
}
.knopf-schlicht:hover { background: var(--accent-soft); }

/* Ein langer Anzeigename schob frueher die Suche zusammen, weil
   .kopf-aktionen nicht schrumpft. Jetzt schrumpft der Name. */
#anmeldeknopf .beschriftung-aus {
  max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Angemeldet kommen Merkliste, Nachrichten und Abmelden hinzu. Mit
   ihren Beschriftungen bleibt fuer die Suche kaum Platz - und weil die
   Huelle auf 1240 Pixel gedeckelt ist, aendert ein breiteres Fenster
   daran nichts. Eine Regel nach Fensterbreite geht hier also ins
   Leere; es zaehlt der Anmeldezustand. Der Name bleibt lesbar, denn an
   ihm erkennt man, mit welchem Konto man unterwegs ist. */
body.angemeldet .knopf-schlicht:not(#anmeldeknopf) .beschriftung-aus {
  display: none;
}
.knopf-voll {
  background: var(--brass); color: var(--accent-fg);
  border: none; padding: 10px 18px; border-radius: var(--radius); font-weight: 600;
}
html[data-theme="dark"] .knopf-voll { color: var(--bg-deep); }
.knopf-voll:hover { filter: brightness(1.07); }
.knopf-rand {
  background: transparent; color: var(--accent);
  border: 1px solid var(--border-strong); padding: 10px 18px;
  border-radius: var(--radius); font-weight: 600;
}
.knopf-rand:hover { border-color: var(--accent); background: var(--accent-soft); }
.zaehler {
  background: var(--hot); color: #fff; font-size: 0.6875rem; font-weight: 700;
  border-radius: 999px; padding: 1px 6px; margin-left: -3px;
}

.kopf-nav { border-top: 1px solid var(--border); }
.kopf-nav .huelle {
  display: flex; gap: 4px; overflow-x: auto; padding: 8px 16px; scrollbar-width: thin;
}
.nav-pille {
  white-space: nowrap; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: transparent;
  color: var(--text-muted); font-size: 0.875rem; font-weight: 500;
}
.nav-pille:hover { border-color: var(--accent); color: var(--accent); }
.nav-pille[aria-pressed="true"] {
  background: var(--accent); border-color: var(--accent); color: var(--accent-fg);
}

/* ---------------- Angebotskarten ---------------- */
.raster {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
}
.karte {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-card); overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; position: relative;
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
  /* Mobile Safari zeichnet abgerundete, ueberlaufverdeckte Karten beim
     Scrollen manchmal auf altem Stand neu - das Foto der vorigen Karte
     scheint dann kurz unter dem Titeltext der naechsten zu stehen. Eine
     dauerhaft eigene Grafikebene verhindert das. */
  transform: translateZ(0);
}
.karte:hover {
  transform: translateY(-2px) translateZ(0);
  box-shadow: var(--shadow-lift); border-color: var(--border-strong);
}
.karte-link {
  color: inherit; display: flex; flex: 1; flex-direction: column;
  min-width: 0; text-decoration: none;
}
.karte-bild {
  position: relative; aspect-ratio: 4 / 3;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--surface-soft), var(--bg-deep));
  border-bottom: 1px solid var(--border);
}
.karte-bild svg { width: 42%; height: 42%; opacity: 0.5; color: var(--accent); }
/* Echte Fotos fuellen die Kachel vollstaendig aus. */
.karte-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.merken {
  position: absolute; top: 10px; right: 10px;
  z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border);
  display: grid; place-items: center; color: var(--text-muted);
  box-shadow: var(--shadow-card);
}
.merken:hover { color: var(--hot); border-color: var(--hot); }
.merken[aria-pressed="true"] { color: var(--hot); border-color: var(--hot); background: var(--hot-soft); }
.merken svg { width: 17px; height: 17px; }

.karte-inhalt { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.karte-titel {
  font-size: 0.9375rem; font-weight: 600; line-height: 1.35;
  margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.7em;
}
.karte-kurztext {
  font-size: 0.8125rem;
  color: var(--text-soft);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
}
.karte-zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.preis { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.gebote { font-size: 0.8125rem; color: var(--text-soft); }
.karte-fuss {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: auto; padding-top: 4px;
}
.karte-meta { font-size: 0.75rem; color: var(--text-soft); display: flex; gap: 8px; flex-wrap: wrap; }

/* Karte mit hinterlegter Detailseite bekommt einen sichtbaren Hinweis. */
.karte.begehbar { border-color: var(--accent); }
.karte.begehbar .karte-titel { color: var(--accent); }
.karte.begehbar:hover { border-color: var(--accent); box-shadow: var(--shadow-lift); }
.fahne {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  background: var(--accent); color: var(--accent-fg);
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0;
  padding: 3px 9px; border-radius: 999px;
}

.schild {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0;
  text-transform: uppercase; padding: 3px 8px; border-radius: 999px;
  border: 1px solid transparent; white-space: nowrap;
}
.schild-frei    { background: var(--ok-soft);    color: var(--ok);    border-color: var(--ok); }
.schild-pflicht { background: var(--brass-soft); color: var(--brass); border-color: var(--brass); }
.schild-alter   { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.schild-sofort  { background: var(--surface-soft); color: var(--text-muted); border-color: var(--border); }

.restzeit {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.8125rem; font-weight: 600; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.restzeit svg { width: 14px; height: 14px; }
.restzeit.eilt { color: var(--hot); }

/* ---------------- Brotkrumen und Seitenkopf ---------------- */
.brotkrumen {
  padding: 14px 0 0; font-size: 0.8125rem; color: var(--text-soft);
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.brotkrumen a:hover { color: var(--accent); text-decoration: underline; }
.seitenkopf { padding: 18px 0 22px; }
.seitenkopf h1 { margin: 0 0 6px; font-size: 1.875rem; letter-spacing: -0.02em; }
.seitenkopf .beisatz { color: var(--text-muted); font-size: 0.9375rem; }
.seitenkopf .beisatz b { color: var(--hot); font-variant-numeric: tabular-nums; }

/* ---------------- Zweispaltiges Listing ---------------- */
.listing { display: grid; grid-template-columns: 264px 1fr; gap: 28px; align-items: start; padding-bottom: 56px; }

.filter {
  /* Bewusst nicht klebend: der Kasten ist hoeher als ein uebliches Fenster.
     Klebend braeuchte er einen eigenen Scrollbalken, und darin verschwinden
     Anbieter, Preis und der Zuruecksetzen-Knopf unsichtbar nach unten.
     Wer Filter aendern will, nutzt oben die abwerfbaren Merker. */
  align-self: start;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: 4px 18px 18px;
  box-shadow: var(--shadow-card);
}
.filter-gruppe { padding: 16px 0; border-bottom: 1px solid var(--border); }
.filter-gruppe:last-child { border-bottom: none; }
.filter-gruppe h3 {
  margin: 0 0 10px; font-size: 0.8125rem; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-soft);
}
.wahl {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 0; font-size: 0.9rem; cursor: pointer;
}
.wahl input { accent-color: var(--accent); width: 16px; height: 16px; flex-shrink: 0; }
.wahl .anzahl { margin-left: auto; color: var(--text-soft); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.wahl:hover { color: var(--accent); }
.spanne { display: flex; align-items: center; gap: 8px; }
.spanne input {
  width: 100%; min-width: 0; height: 38px; padding: 0 10px;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--surface-soft); color: var(--text); font: inherit; font-size: 0.875rem;
}
.spanne input:focus { outline: none; border-color: var(--accent); }
.filter-fuss { padding-top: 14px; }
.filter-fuss button { width: 100%; }

/* ---------------- Werkzeugleiste ---------------- */
.werkzeugleiste {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: 12px 16px; margin-bottom: 18px;
  box-shadow: var(--shadow-card);
}
.werkzeugleiste .treffer { font-size: 0.9375rem; color: var(--text-muted); }
.werkzeugleiste .treffer b { color: var(--text); font-variant-numeric: tabular-nums; }
.werkzeugleiste .schub { margin-left: auto; }
.feldgruppe { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--text-muted); }
.feldgruppe select {
  height: 38px; padding: 0 10px;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--surface-soft); color: var(--text); font: inherit; font-size: 0.875rem;
}
.feldgruppe select:focus { outline: none; border-color: var(--accent); }
.ansicht { display: flex; border: 1px solid var(--border-strong); border-radius: var(--radius); overflow: hidden; }
.ansicht button {
  background: transparent; border: none; padding: 8px 11px;
  color: var(--text-muted); display: grid; place-items: center;
}
.ansicht button svg { width: 17px; height: 17px; }
.ansicht button[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); }

/* aktive Filter als abwerfbare Merker */
.merker { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.merker button {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--accent-soft); border: 1px solid var(--accent);
  color: var(--accent); border-radius: 999px;
  padding: 4px 10px 4px 12px; font-size: 0.8125rem; font-weight: 600;
}
.merker button::after { content: "\00d7"; font-size: 1rem; line-height: 1; }
.merker button:hover { background: var(--accent); color: var(--accent-fg); }

.suchhistorie {
  margin-bottom: 18px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
}
.suchhistorie-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.suchhistorie h2 { margin: 0; font-size: 1rem; }
.suchhistorie-loeschen { border: 0; background: transparent; color: var(--accent); font: inherit; font-size: 0.8125rem; cursor: pointer; }
.suchhistorie-loeschen:hover { text-decoration: underline; }
.suchhistorie-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.suchhistorie-liste button {
  padding: 7px 12px; border: 1px solid var(--border-strong);
  border-radius: 999px; background: var(--surface-soft); color: var(--text);
  font: inherit; font-size: 0.8125rem; cursor: pointer;
}
.suchhistorie-liste button:hover { border-color: var(--accent); color: var(--accent); }
.suchstart {
  padding: 46px 24px; text-align: center; background: var(--surface);
  border: 1px dashed var(--border-strong); border-radius: var(--radius-card);
}
.suchstart h2 { margin: 0 0 8px; font-size: 1.3rem; }
.suchstart p { margin: 0; color: var(--text-muted); }
.angebot-statushinweis {
  margin-top: 14px; padding: 12px 14px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface-soft); color: var(--text-muted);
}

/* ---------------- Listenansicht ---------------- */
.raster.liste { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.raster.liste .karte { min-width: 0; flex-direction: row; }
.raster.liste .karte-bild {
  width: 208px; flex-shrink: 0; aspect-ratio: auto;
  border-bottom: none; border-right: 1px solid var(--border);
}
.raster.liste .karte-bild svg { width: 56px; height: 56px; }
.raster.liste .karte-titel { -webkit-line-clamp: 2; min-height: 0; font-size: 1rem; }
.raster.liste .karte-kurztext { -webkit-line-clamp: 3; min-height: 0; }
.raster.liste .karte-inhalt { min-width: 0; padding: 16px 18px; }
/* In der Zeile steht der Merken-Knopf ueber dem schmalen Vorschaubild und
   verdeckt dort mehr, als er in der Rasteransicht je verdeckt. */
.raster.liste .merken { display: none; }

/* ---------------- Blaettern ---------------- */
.blaettern {
  display: flex; gap: 6px; justify-content: center; align-items: center;
  margin-top: 30px; flex-wrap: wrap;
}
.blaettern button {
  min-width: 40px; height: 40px; padding: 0 12px;
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text); border-radius: var(--radius);
  font-variant-numeric: tabular-nums;
}
.blaettern button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.blaettern button[aria-current="page"] {
  background: var(--accent); border-color: var(--accent); color: var(--accent-fg); font-weight: 700;
}
.blaettern button:disabled { opacity: 0.4; cursor: not-allowed; }
.blaettern .luecke { color: var(--text-soft); padding: 0 4px; }

.leer {
  text-align: center; padding: 60px 20px; color: var(--text-muted);
  background: var(--surface); border: 1px dashed var(--border-strong);
  border-radius: var(--radius-card);
}
.leer h3 { margin: 0 0 8px; color: var(--text); }

/* ---------------- Rechtlicher Hinweis ---------------- */
.rechtshinweis {
  border: 1px solid var(--brass); background: var(--brass-soft);
  border-radius: var(--radius-card); padding: 18px 20px;
  display: flex; gap: 14px; align-items: flex-start;
}
.rechtshinweis svg { width: 22px; height: 22px; color: var(--brass); flex-shrink: 0; margin-top: 2px; }
.rechtshinweis p { margin: 0; font-size: 0.9375rem; }
.rechtshinweis strong { display: block; margin-bottom: 3px; }

/* ---------------- Fuss ---------------- */
footer {
  background: var(--bg-deep); border-top: 1px solid var(--border);
  padding: 40px 0 28px; font-size: 0.875rem;
}
.fuss-raster { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.fuss-raster h4 {
  margin: 0 0 10px; font-size: 0.8125rem; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-soft);
}
.fuss-raster ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.fuss-raster a { color: var(--text-muted); }
.fuss-raster a:hover { color: var(--accent); text-decoration: underline; }
.fuss-unten {
  margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  color: var(--text-soft); font-size: 0.8125rem;
}

/* ---------------- Hinweisfenster ---------------- */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 120%);
  background: var(--accent); color: var(--accent-fg);
  padding: 12px 22px; border-radius: var(--radius);
  box-shadow: var(--shadow-lift); z-index: 100;
  opacity: 0; pointer-events: none;
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.3, 1), opacity 0.2s ease;
  font-size: 0.9375rem; max-width: min(92vw, 460px); text-align: center;
}
.toast.sichtbar { transform: translate(-50%, 0); opacity: 1; }

/* ==================================================================
   Detailseite eines Angebots
================================================================== */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 32px; align-items: start; padding-bottom: 56px; }

.galerie {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card);
}
.gross {
  aspect-ratio: 4 / 3; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--surface-soft), var(--bg-deep));
  border-bottom: 1px solid var(--border); position: relative;
}
.gross svg { width: 34%; height: 34%; opacity: 0.45; color: var(--accent); }
/* Bei echten Fotos nicht beschneiden - der Gegenstand soll ganz zu sehen sein. */
.gross img { width: 100%; height: 100%; object-fit: contain; display: block; background: var(--bg-deep); }
.gross .platzhalter {
  position: absolute; bottom: 12px; right: 14px;
  font-size: 0.75rem; color: var(--text-soft);
}
.mini { display: flex; gap: 10px; padding: 12px; flex-wrap: wrap; }
.mini button {
  width: 70px; height: 56px; border-radius: 8px; overflow: hidden; padding: 0;
  border: 1px solid var(--border); background: linear-gradient(150deg, var(--surface-soft), var(--bg-deep));
  display: grid; place-items: center; color: var(--accent); cursor: pointer;
}
.mini button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini button svg { width: 22px; height: 22px; opacity: 0.5; }
.mini button[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

/* Bildnachweis - bei CC-BY-Bildern rechtlich erforderlich. */
.bildnachweis {
  padding: 0 14px 12px; margin: 0;
  font-size: 0.76rem; line-height: 1.5; color: var(--text-soft);
}
.bildnachweis a { color: var(--text-soft); }

.detail h1 { margin: 0 0 10px; font-size: 1.5rem; line-height: 1.3; letter-spacing: -0.01em; }
.schilderzeile { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }

.gebotsfeld {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: 20px; box-shadow: var(--shadow-card);
  position: sticky; top: 118px;
}
.gebotsfeld .stand { font-size: 0.8125rem; color: var(--text-soft); }
.gebotsfeld .gross-preis {
  font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums;
  line-height: 1.1; margin: 2px 0 2px;
}
.gebotsfeld .zusatz { font-size: 0.875rem; color: var(--text-muted); }
.uhrkasten {
  margin: 16px 0; padding: 12px 14px; border-radius: var(--radius);
  background: var(--surface-soft); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.uhrkasten .restzeit { font-size: 1.0625rem; }
.bieten { display: flex; gap: 8px; margin-top: 4px; }
.bieten input {
  flex: 1; min-width: 0; height: 46px; padding: 0 12px;
  border: 2px solid var(--border-strong); border-radius: var(--radius);
  background: var(--surface-soft); color: var(--text); font: inherit;
  font-size: 1.0625rem; font-variant-numeric: tabular-nums;
}
.bieten input:focus { outline: none; border-color: var(--accent); }
.bieten button { padding: 0 22px; height: 46px; }
.mindest { font-size: 0.8125rem; color: var(--text-soft); margin-top: 8px; }
.trennwort {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0; color: var(--text-soft); font-size: 0.8125rem;
}
.trennwort::before, .trennwort::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}
.knopf-breit { width: 100%; display: block; text-align: center; }

.anbieter {
  margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border);
  display: flex; gap: 12px; align-items: center;
}
.anbieter .bild {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; font-weight: 700;
}
.anbieter .name { font-weight: 600; }
.anbieter .bewertung { font-size: 0.8125rem; color: var(--text-muted); }

/* Kennzeichen fuer eine gepruefte Identitaet. Steht auf der Angebotsseite
   neben dem Anbieternamen und auf dem Profil neben der Ueberschrift -
   deshalb hier und nicht zweimal in den Seiten. */
.geprueft {
  display: inline-flex; align-items: center; gap: 5px; vertical-align: middle;
  margin-left: 6px; padding: 2px 9px 2px 7px; border-radius: 999px;
  background: color-mix(in srgb, #2e7d32 14%, transparent);
  color: #2e7d32; font-size: 0.75rem; font-weight: 600;
}
.geprueft svg {
  width: 14px; height: 14px; fill: none; stroke: currentColor;
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
html[data-theme="dark"] .geprueft { color: #7bc47f; }
.sterne { color: var(--brass); letter-spacing: 0.08em; }

.block {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: 22px 24px;
  box-shadow: var(--shadow-card); margin-top: 22px;
}
.block h2 { margin: 0 0 14px; font-size: 1.125rem; }
.block p { margin: 0 0 12px; color: var(--text-muted); }
.block p:last-child { margin-bottom: 0; }

/* ==================================================================
   Textseiten

   Impressum, Datenschutz, ueber uns und alles Weitere, das vor allem
   aus Fliesstext besteht. Frueher brachte jede dieser Seiten dieselben
   sechs Regeln in einem eigenen Stilblock mit.
================================================================== */
.seite { max-width: 64rem; margin: 28px auto 56px; padding: 0 16px; }
.seite h1 { margin: 0 0 6px; }
.seite h2 { margin: 26px 0 10px; font-size: 1.05rem; }
.seite .block > h2:first-child { margin-top: 0; }
.seite h3 { margin: 18px 0 6px; font-size: 0.95rem; }
.seite p, .seite li { color: var(--text-muted); line-height: 1.65; }
.seite ul, .seite ol { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 6px; }
.seite dl { margin: 0; display: grid; gap: 10px; }
.seite dt { font-weight: 600; color: var(--text); }
.seite dd { margin: 2px 0 0; color: var(--text-muted); line-height: 1.65; }

/* Der Vorspann steht unter der Ueberschrift und fasst die Seite in einem
   Satz zusammen. Bewusst groesser und dunkler als der Fliesstext. */
.seite .vorspann {
  font-size: 1.05rem; color: var(--text); line-height: 1.6;
  margin: 0 0 4px;
}

/* Hervorgehobener Hinweis, etwa zum Entwurfsstand. */
.hinweis {
  display: block; box-sizing: border-box; max-width: 100%; line-height: 1.5;
  overflow-wrap: anywhere;
  border-left: 4px solid var(--brass); background: var(--brass-soft);
  padding: 10px 12px; border-radius: 8px; color: var(--text);
}
/* Ein Hinweis ohne Text ist trotzdem ein farbiger Balken. Mehrere Stellen
   leeren ihren Text, wenn nichts zu sagen ist - dort blieb ein Streifen
   stehen, der aussah wie ein Ladefehler. */
.hinweis:empty { display: none; }

/* Zahlenpaare, etwa Gebuehren oder Fristen. */
.tafel { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.tafel th, .tafel td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); }
.tafel th { color: var(--text-soft); font-weight: 600; font-size: 0.8125rem;
  text-transform: uppercase; letter-spacing: 0.04em; }
.tafel td:last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* Kurzer Auszug aus einer Schnittstelle oder Datei. */
.quelltext {
  background: var(--bg-deep); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px 14px; overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem; color: var(--text); line-height: 1.55;
}

/* Einzelner Bezeichner im Fließtext, etwa ein Feldname. */
.seite code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875em; background: var(--bg-deep);
  border: 1px solid var(--border); border-radius: 5px;
  padding: 1px 5px; color: var(--text); white-space: nowrap;
}
.quelltext code { background: none; border: 0; padding: 0; }

.merkmale { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 28px; }.merkmale div {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 0.9375rem;
}
.merkmale dt, .merkmale .bezeichnung { color: var(--text-soft); }
.merkmale .wert { font-weight: 600; text-align: right; }

table.historie { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
table.historie th {
  text-align: left; font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-soft); font-weight: 600;
  padding: 0 0 8px; border-bottom: 1px solid var(--border);
}
table.historie td { padding: 9px 0; border-bottom: 1px solid var(--border); }
table.historie tr:last-child td { border-bottom: none; }
table.historie td.betrag { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
table.historie tr.hoechst td { color: var(--ok); }

.schritte { list-style: none; margin: 0; padding: 0; counter-reset: schritt; }
.schritte li {
  counter-increment: schritt; position: relative;
  padding: 0 0 14px 40px; color: var(--text-muted); font-size: 0.9375rem;
}
.schritte li::before {
  content: counter(schritt); position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: var(--accent-fg);
  display: grid; place-items: center; font-size: 0.8125rem; font-weight: 700;
}
.schritte li b { color: var(--text); }

/* ---------------- Umbrueche ---------------- */
/* Sobald ein Nutzername und die Knoepfe fuer Nachrichten, Verwaltung und
   Abmelden dazukommen, wird die Kopfzeile eng. Dann bleiben die Symbole
   und die Suche behaelt ihre Breite. */
@media (max-width: 1240px) {
  .beschriftung-aus { display: none; }
}
@media (max-width: 1080px) {
  /* minmax(0, 1fr) statt 1fr: ein blosses 1fr hat eine automatische
     Mindestbreite und waechst dann ueber den Bildschirm hinaus. */
  .detail { grid-template-columns: minmax(0, 1fr); }
  .gebotsfeld { position: static; }
}
@media (max-width: 900px) {
  .listing { grid-template-columns: 1fr; }
  .filter-schalter { display: inline-flex !important; }
  .filter.zu { display: none; }
  .filter-schalter { font-size: 1rem; }
}
@media (max-width: 860px) {
  .leiste-oben { display: none; }
  .kopf-haupt { flex-wrap: wrap; gap: 12px; }
  .suche { order: 3; flex: 0 0 100%; }
  .suche-bereich { display: none; }
  .suche input { border-left: 2px solid var(--border-strong); border-radius: var(--radius) 0 0 var(--radius); }
  .suche button { padding: 0 16px; }
  .beschriftung-aus { display: none; }
  .raster.liste .karte-bild { width: 112px; }
  .raster.liste .karte-inhalt { padding: 10px 12px; gap: 5px; }
  .raster.liste .karte-titel { font-size: 0.875rem; line-height: 1.25; }
  .raster.liste .karte-kurztext { display: none; }
  .raster.liste .karte-meta { gap: 4px; font-size: 0.6875rem; }
  .raster.liste .karte-zeile { flex-wrap: wrap; gap: 2px 6px; }
  .raster.liste .preis { font-size: 1.05rem; }
  .raster.liste .karte-fuss { padding-top: 2px; }
  .raster.liste .restzeit { font-size: 0.75rem; }
  .raster.liste .schild { font-size: 0.6875rem; padding: 2px 6px; }
}
/* Auf dem Telefon im Hochformat ist die Karte breiter als noetig: eine
   238px-Mindestbreite laesst nur eine Spalte zu, waehrend zwei schmalere
   Kacheln nebeneinander (wie bei anderen Marktplaetzen ueblich) denselben
   Platz besser nutzen. */
@media (max-width: 640px) {
  .raster:not(.liste) { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .raster:not(.liste) .karte-inhalt { padding: 8px 10px 10px; gap: 5px; }
  /* Die Kurzbeschreibung ist hier ausgeblendet - der frei gewordene Platz
     geht an eine dritte Titelzeile, sonst brechen laengere Titel in der
     schmalen Spalte schon nach wenigen Wörtern ab. */
  .raster:not(.liste) .karte-titel {
    font-size: 0.8125rem; line-height: 1.3;
    -webkit-line-clamp: 3; min-height: 3.9em;
  }
  .raster:not(.liste) .karte-kurztext { display: none; }
  .raster:not(.liste) .preis { font-size: 1rem; }
  .raster:not(.liste) .gebote { font-size: 0.75rem; }
  .raster:not(.liste) .karte-meta { font-size: 0.6875rem; gap: 4px; }
  .raster:not(.liste) .schild { font-size: 0.6875rem; padding: 2px 6px; }
  .raster:not(.liste) .restzeit { font-size: 0.75rem; }
  .raster:not(.liste) .merken { width: 28px; height: 28px; top: 6px; right: 6px; }
  .raster:not(.liste) .merken svg { width: 14px; height: 14px; }
}

@media (max-width: 340px) {
  .raster:not(.liste) { grid-template-columns: minmax(0, 1fr); }
}

/* Auf dem Telefon wird es angemeldet zu eng: Marke, sechs Bedienelemente
   und der Anbieten-Knopf passen nicht nebeneinander, die Kopfzeile lief
   ueber ihren Rand hinaus. Die Merkliste weicht deshalb ins Konto aus -
   sie ist dort unter "Beobachtungsliste" ohnehin zu finden, waehrend
   Nachrichten und Abmelden keinen zweiten Weg haben. */
@media (max-width: 560px) {
  body.angemeldet #kopf-merkliste { display: none !important; }
  .marke .wortmarke { font-size: 1.5rem; }
  .kopf-aktionen { gap: 2px; }
  .knopf-schlicht { padding: 8px 9px; }
  .knopf-voll { padding: 10px 14px; }
  body { padding-bottom: 76px; }
  .mobil-nav {
    /* Kein backdrop-filter: Mobile Safari zeichnet Fotokacheln, die unter
       einem weichgezeichneten, fest positionierten Element hindurchscrollen,
       manchmal mit veraltetem Bildinhalt neu - ein bekannter WebKit-Fehler.
       Ein deckenderer Hintergrund ohne Weichzeichnung braucht diesen
       Compositing-Schritt gar nicht erst. */
    position: fixed; z-index: 20; inset: auto 0 0; display: grid;
    grid-template-columns: repeat(5, 1fr); gap: 2px; padding: 8px 10px 10px;
    background: color-mix(in srgb, var(--surface) 98%, transparent);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 18px color-mix(in srgb, var(--text) 14%, transparent);
  }
  .mobil-nav a {
    min-width: 0; display: flex; flex-direction: column; align-items: center;
    gap: 3px; padding: 3px 2px; color: var(--text-muted); font-size: 0.6875rem;
    line-height: 1.1; text-decoration: none; white-space: nowrap;
  }
  .mobil-nav a[aria-current="page"] { color: var(--accent); font-weight: 700; }
  .mobil-nav svg { width: 21px; height: 21px; }
  .mobil-nav .mobil-nav-aktion {
    margin: 0; padding: 3px 2px; border: 0; border-radius: 0;
    background: transparent; color: var(--text-muted); box-shadow: none;
    font-weight: 400;
  }
}

.mobil-nav { display: none; }
@media (max-width: 560px) {
  .mobil-nav { display: grid; }
}

/* Mehrspaltige Tabellen schoben auf schmalen Schirmen die ganze Seite
   zur Seite - auf /waffenrecht um 66 Pixel. Statt die Spalten zu
   quetschen, bis niemand sie mehr lesen kann, wird die Tabelle fuer
   sich scrollbar. Der uebrige Text bleibt, wo er hingehoert. */
@media (max-width: 640px) {
  table { display: block; max-width: 100%; overflow-x: auto; }
}
.filter-schalter {
  display: none;
  align-items: center; gap: 8px;
  margin: 0 0 16px; padding: 11px 18px;
  font: inherit; font-size: 0.9375rem; font-weight: 600; line-height: 1; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius); cursor: pointer;
}
.filter-schalter[aria-expanded="true"] { background: var(--accent-soft); border-color: var(--accent); }

/* ==================================================================
   Fusszeile - gemeinsam fuer alle Seiten, eingesetzt von jaspos-kopf.js
   Die Gestaltung steht weiter oben bei "footer", .fuss-raster und
   .fuss-unten. Hier stand einmal eine zweite, schmale Fassung; welche
   man sah, hing an der Seite.
================================================================== */

/* Formularseiten teilen sich diese Bausteine. Frueher brachte jede
   Seite eigene mit, was zu drei verschiedenen Eingabefeldern fuehrte. */
.jaspos-feld { margin-bottom: 16px; }
.jaspos-feld label { display: block; font-weight: 600; font-size: 0.86rem; margin-bottom: 5px; }
.jaspos-feld input[type=text], .jaspos-feld input[type=email],
.jaspos-feld input[type=password], .jaspos-feld input[type=date],
.jaspos-feld input[type=tel], .jaspos-feld select, .jaspos-feld textarea {
  width: 100%; padding: 10px 11px; font: inherit; box-sizing: border-box;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--surface-soft); color: var(--text);
}
.jaspos-feld input:focus-visible, .jaspos-feld select:focus-visible,
.jaspos-feld textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.jaspos-feld .hinweis { font-size: 0.79rem; color: var(--text-soft); margin-top: 4px; }
.jaspos-meldung { padding: 11px 13px; border-radius: var(--radius);
                  font-size: 0.87rem; margin-bottom: 16px; line-height: 1.45; }
.jaspos-meldung-fehler { background: var(--hot-soft); color: var(--hot); border: 1px solid var(--hot); }
.jaspos-meldung-gut { background: var(--ok-soft); color: var(--ok); border: 1px solid var(--ok); }
.jaspos-meldung-hinweis { background: var(--brass-soft); color: var(--brass); border: 1px solid var(--brass); }

/* ---------------- Listen als Tabelle ----------------
   Beobachtungsliste, Gebote, Kaeufe und eigene Angebote zeigen dieselbe
   Art von Zeile: Bild, was es ist, ein paar Zahlen, wie lange noch. Die
   Spalten dazwischen wechseln, das Geruest nicht. */
.tabellenrahmen { overflow-x: auto; }
.postentabelle { width: 100%; border-collapse: collapse; }
.postentabelle th, .postentabelle td {
  border-bottom: 1px solid var(--border); padding: 9px 7px; vertical-align: middle;
}
.postentabelle thead th {
  color: var(--text-muted); font-weight: 600; font-size: 0.8125rem;
  text-align: left; white-space: nowrap;
}
.postentabelle .merkfeld { width: 34px; }
.postentabelle .bild { width: 74px; }
.postentabelle .bild img {
  width: 56px; height: 56px; object-fit: cover; border-radius: 6px; display: block;
}
.postentabelle .bild .ohnebild {
  width: 56px; height: 56px; border-radius: 6px; background: var(--surface-soft);
  border: 1px solid var(--border);
}
/* Der Rest der Breite gehoert dem Titel, nicht den Zahlenspalten. */
.postentabelle .was { width: 40%; min-width: 13rem; }
.postentabelle .was .klein { color: var(--text-muted); font-size: 0.8125rem; margin-top: 3px; }
.postentabelle .was a { text-decoration: none; }
.postentabelle .was .klein a { text-decoration: underline; }
.postentabelle .betrag,
.postentabelle .zahl,
.postentabelle .uhrzelle { text-align: right; white-space: nowrap;
                           font-variant-numeric: tabular-nums; }
.postentabelle .betrag { font-weight: 700; }
.postentabelle .betrag .klein,
.postentabelle .sofort { color: var(--text-muted); font-size: 0.8125rem; font-weight: 400; }
/* Die letzte Stunde faellt auf - danach richtet sich, wer noch bietet. */
.postentabelle .uhrzelle.eilt { color: var(--hot); font-weight: 700; }
.postentabelle .uhrzelle.aus { color: var(--text-soft); font-size: 0.85rem; }
.postentabelle .weg { text-align: right; }
.postentabelle .stand { white-space: nowrap; }
.postentabelle .posten-titel { font-weight: 600; text-decoration: none; color: inherit;
                               display: block; }
.postentabelle .posten-titel:hover { color: var(--accent); }
/* Aufgeklappte Bereiche brauchen die ganze Breite und keinen Strich
   zwischen sich und der Zeile, zu der sie gehoeren. */
.postentabelle tr.ausklapp > td { border-top: 0; padding: 0 7px 14px; }
.postentabelle tr.hat-ausklapp > td { border-bottom: 0; }

/* ---------------- Wahl des Erscheinungsbilds ----------------
   Die Farbproben zeigen die drei tragenden Farben einer Ansicht.
   Feste Werte sind hier richtig: Die Probe soll aussehen wie das
   fremde Bild, nicht wie das gerade eingestellte. */
.bildwahl { display: grid; gap: 12px;
            grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.bildkachel { display: flex; flex-direction: column; gap: 6px; text-align: left;
              padding: 12px; border-radius: var(--radius); cursor: pointer;
              background: var(--surface); border: 2px solid var(--border);
              font: inherit; color: inherit; }
.bildkachel:hover { border-color: var(--brass); }
.bildkachel.gewaehlt { border-color: var(--accent); box-shadow: 0 0 0 3px var(--brass-soft); }
.bildkachel:focus-visible,
.helligkeitswahl .knopf-schlicht:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
}
.bildname { font-weight: 600; font-size: 0.95rem; }
.bildzusatz { font-size: 0.8rem; color: var(--text-soft); }
.bildprobe { display: grid; grid-template-columns: repeat(3, 1fr);
             grid-template-rows: repeat(2, 1fr); height: 42px;
             border-radius: 5px; overflow: hidden;
             border: 1px solid var(--border); }
.bildprobe::after {
  content: ""; grid-column: 1 / -1;
  border-top: 1px solid color-mix(in srgb, #fff 35%, transparent);
  background: linear-gradient(to right,
    var(--probe-dunkel-akzent) 0 33.333%,
    var(--probe-dunkel-grund) 33.333% 66.667%,
    var(--probe-dunkel-messing) 66.667% 100%);
}
/* Die drei Streifen zeigen Akzent, Grund und Messing des jeweiligen
   Bildes. Sie standen frueher auf geratenen Werten - die Probe fuer
   Modern war blau, das Bild selbst gruen. Jetzt sind es die Farben,
   die oben tatsaechlich definiert sind. Wer eines aendert, aendert
   auch hier. */
.probe-waldgruen { --probe-dunkel-akzent: #7fa88c; --probe-dunkel-grund: #141a16; --probe-dunkel-messing: #d7a44f; }
.probe-waldgruen  i:nth-child(1) { background: #2e4a3d; }
.probe-waldgruen  i:nth-child(2) { background: #f4f1e8; }
.probe-waldgruen  i:nth-child(3) { background: #a8752a; }
.probe-klassisch { --probe-dunkel-akzent: #c98a97; --probe-dunkel-grund: #1a1512; --probe-dunkel-messing: #d4b169; }
.probe-klassisch  i:nth-child(1) { background: #6b2230; }
.probe-klassisch  i:nth-child(2) { background: #f6f2ea; }
.probe-klassisch  i:nth-child(3) { background: #8a6a1f; }
.probe-modern { --probe-dunkel-akzent: #3fd39f; --probe-dunkel-grund: #0d100f; --probe-dunkel-messing: #e0a94f; }
.probe-modern     i:nth-child(1) { background: #0a6e54; }
.probe-modern     i:nth-child(2) { background: #f2f5f3; }
.probe-modern     i:nth-child(3) { background: #9c5a06; }
.probe-daemmerung { --probe-dunkel-akzent: #8faded; --probe-dunkel-grund: #111726; --probe-dunkel-messing: #e0975c; }
.probe-daemmerung i:nth-child(1) { background: #2a3f6b; }
.probe-daemmerung i:nth-child(2) { background: #eef1f6; }
.probe-daemmerung i:nth-child(3) { background: #9a5322; }
.probe-birke { --probe-dunkel-akzent: #aabbb3; --probe-dunkel-grund: #151613; --probe-dunkel-messing: #c9b36b; }
.probe-birke      i:nth-child(1) { background: #40534d; }
.probe-birke      i:nth-child(2) { background: #f8f8f5; }
.probe-birke      i:nth-child(3) { background: #7b682f; }
.probe-loden { --probe-dunkel-akzent: #becb76; --probe-dunkel-grund: #171810; --probe-dunkel-messing: #e09a62; }
.probe-loden      i:nth-child(1) { background: #3f4b1f; }
.probe-loden      i:nth-child(2) { background: #eae7da; }
.probe-loden      i:nth-child(3) { background: #8f4f24; }
.probe-stahl { --probe-dunkel-akzent: #63bde3; --probe-dunkel-grund: #0f1315; --probe-dunkel-messing: #dfa953; }
.probe-stahl      i:nth-child(1) { background: #1c5b7a; }
.probe-stahl      i:nth-child(2) { background: #f4f5f6; }
.probe-stahl      i:nth-child(3) { background: #8c5a10; }
.probe-kontrast { --probe-dunkel-akzent: #74e8bd; --probe-dunkel-grund: #000000; --probe-dunkel-messing: #ffc94d; }
.probe-kontrast   i:nth-child(1) { background: #000000; }
.probe-kontrast   i:nth-child(2) { background: #ffffff; }
.probe-kontrast   i:nth-child(3) { background: #6a4500; }

@media (max-width: 640px) {
  .bildwahl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .bildkachel { min-width: 0; padding: 9px; gap: 4px; }
  .bildprobe { height: 36px; }
  .bildname { font-size: 0.875rem; }
  .bildzusatz { font-size: 0.75rem; line-height: 1.35; }
}

.helligkeitswahl { display: flex; gap: 10px; flex-wrap: wrap; }
.helligkeitswahl .knopf-schlicht { cursor: pointer; }
.helligkeitswahl .gewaehlt { border-color: var(--accent); background: var(--brass-soft);
                             font-weight: 600; }

/* ==========================================================================
   Dialoge (jaspos-dialog.js)

   Ersetzen alert, confirm und prompt. Grundlage ist <dialog>: Modales
   Verhalten, Fokusfalle und Fluchttaste bringt das Element selbst mit.
   ========================================================================== */
.ja-dialog {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.28);
  background: var(--surface);
  color: var(--text);
  padding: 0;
  max-width: min(34rem, calc(100vw - 2rem));
  width: 100%;
}
.ja-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }

.ja-dialog-inhalt { padding: 22px 24px 18px; margin: 0; }
.ja-dialog-inhalt h2 { margin: 0 0 10px; font-size: 1.08rem; }
.ja-dialog-inhalt p { margin: 0 0 10px; color: var(--text-muted); line-height: 1.6; }

.ja-dialog-hinweis {
  border-left: 3px solid var(--brass);
  background: var(--brass-soft);
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--text) !important;
}

.ja-dialog-feld { margin: 14px 0 4px; }
.ja-dialog-feld label {
  display: block; margin-bottom: 5px;
  font-size: 0.88rem; font-weight: 600; color: var(--text);
}
.ja-dialog-feld input,
.ja-dialog-feld textarea {
  width: 100%; box-sizing: border-box;
  font: inherit; padding: 9px 11px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg); color: var(--text);
}
.ja-dialog-feld input:focus,
.ja-dialog-feld textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.ja-dialog-fehler { color: var(--hot); font-size: 0.85rem; margin: 6px 0 0 !important; }

.ja-dialog-knoepfe {
  display: flex; justify-content: flex-end; gap: 8px;
  flex-wrap: wrap; margin-top: 18px;
}
.ja-dialog-knopf {
  font: inherit; font-size: 0.92rem; padding: 9px 16px;
  border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); cursor: pointer;
}
.ja-dialog-knopf:hover { background: var(--brass-soft); }
.ja-dialog-knopf-voll {
  background: var(--accent); color: var(--accent-fg); border-color: var(--accent); font-weight: 600;
}
.ja-dialog-knopf-voll:hover { filter: brightness(1.08); background: var(--accent); }
.ja-dialog-knopf-gefahr { background: var(--hot); color: #fff; border-color: var(--hot); font-weight: 600; }
.ja-dialog-knopf-gefahr:hover { filter: brightness(1.08); background: var(--hot); }

/* Auf schmalen Geraeten stehen die Knoepfe untereinander und in voller
   Breite - nebeneinander sind sie zu leicht zu verwechseln. */
@media (max-width: 30rem) {
  .ja-dialog-knoepfe { flex-direction: column-reverse; }
  .ja-dialog-knopf { width: 100%; }
}