/* Seelenwinkel — gemeinsames Design für alle Plattform-Seiten
   Farb-/Schrift-System aus 05-Testversion-Seelenwinkel übernommen (E-007/E-010) */

/* Cinzel (Wortmarke/Überschriften) + Lora (Fließtext), 04.09.2026 — Lindas Wunsch nach dem
   Wegzeichen-Entwurf. Selbst gehostet statt über fonts.googleapis.com eingebunden: ein direkter
   Google-Fonts-Link würde bei jedem Seitenaufruf die IP-Adresse der Besucherin an Google
   übertragen — in Deutschland seit dem LG-München-Urteil (2022) ein bekanntes Abmahnrisiko und
   damit ein neuer Datenschutz-Punkt, den wir uns so sparen. Nur der lateinische Zeichensatz
   (deckt Ä/Ö/Ü/ß mit ab), Variable-Font-Dateien statt einzelner Schnitte. */
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonts/cinzel-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/lora-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Lora";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/lora-latin-italic.woff2") format("woff2");
}

:root {
  /* 11.09.2026: zusätzlich zum <meta name="color-scheme" content="light"> in jeder HTML-Datei
     auch hier deklariert — verhindert zuverlässiger den kurzen grünlich-olivfarbenen "Rate-
     Blitz", den Androids automatischer Dunkelmodus für Web-Inhalte auf warmen Creme-/Beige-
     Tönen zeigt, bevor die Seite fertig geladen ist (Linda hat das beim Öffnen aus der
     Google-Suche beobachtet — kein Bug, nur der Browser, der kurz rät). */
  color-scheme: light;
  --paper: #EDE7D9;
  --ink: #2A2620;
  --card: #E4DCC9;
  --line: rgba(42,38,32,0.16);
  --accent: #A8763A;
  --accent-ink: #FBF6EC;
  --sage: #5F7059;
  --muted: #6B6250;
  --error: #A8443A;
}
* { box-sizing: border-box; }
/* 25.08.2026 (gefundener Bug): Ohne diese Regel gewinnt jede Klasse mit eigenem "display"
   (z. B. .sw-field { display: flex }) gegen das bloße hidden-Attribut, das per JS gesetzt wird
   — das Element bekommt zwar hidden="", bleibt aber sichtbar. !important stellt sicher, dass
   hidden IMMER wirkt, egal welche display-Regel sonst noch auf dem Element liegt. */
[hidden] { display: none !important; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Lora", Georgia, "Times New Roman", serif;
  line-height: 1.6;
  margin: 0;
}
.sw-page {
  padding: clamp(1.25rem, 4vw, 3rem) clamp(1rem, 5vw, 3.5rem) 3rem;
  max-width: 1200px;
  margin: 0 auto;
}
.sw-page-narrow { max-width: 560px; }
.sw-page-legal { max-width: 720px; }

/* Rechtstexte (Impressum/Datenschutz/AGB, 25.08.2026) */
.sw-legal h2 { font-size: 1.15rem; margin: 2rem 0 0.7rem; }
.sw-legal h2:first-child { margin-top: 0; }
.sw-legal p { margin-bottom: 0.9rem; font-size: 0.94rem; }
.sw-legal p:last-child { margin-bottom: 0; }
.sw-legal ul { margin: 0 0 0.9rem; padding-left: 1.3rem; font-size: 0.94rem; }
.sw-legal li { margin-bottom: 0.3rem; }
/* Markiert Textstellen, die noch fehlen/offen sind — bewusst auffällig, damit nichts als fertig
   durchgeht, was es noch nicht ist (Leser-/Betreiberinnen-Sicherheit) */
.sw-luecke {
  background: rgba(168,68,58,0.14);
  color: var(--error);
  padding: 0.05rem 0.35rem;
  border-radius: 2px;
  font-size: 0.88em;
}
/* Cinzel bleibt bewusst allein der Wortmarke ".sw-word" vorbehalten (Linda-Wunsch 04.09.2026) —
   Überschriften nutzen dieselbe Lora wie der Rest der Seite, nur fetter, damit Cinzel wirklich
   nur an einer Stelle pro Seite auftaucht, wie ein echtes Logo statt einer zweiten Wortmarke. */
h1, h2, h3, h4 {
  font-weight: 600;
  text-wrap: balance;
  margin: 0;
}
p { margin: 0; }
a { color: inherit; }

/* Kopfzeile, auf allen Seiten gleich */
.sw-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center; /* 07.09.2026 (Datei 41, § 7): rechte Nav-Links saßen höher als die Wortmarke — jetzt auf gemeinsamer Mittelachse */
  gap: 1rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2.25rem;
  flex-wrap: wrap;
}
.sw-word {
  font-family: "Cinzel", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 2.5rem; /* 07.09. + 09.09.2026 (Datei 41): Wortmarke größer, Linda wollte sie präsenter */
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--accent);
  text-decoration: none;
}
.sw-tag {
  font-style: italic;
  font-size: 1rem; /* 07.09. + 09.09.2026 (Datei 41): Wegweiser-Zeile größer */
  color: var(--muted);
  margin-top: 0.25rem;
}
/* Auf den Konto-/Formular-/Rechtsseiten ist die Zeile ein Seiten-Titel (kein Slogan) —
   deshalb klar lesbar statt klein-kursiv (09.09.2026, Linda: „Mein Konto" ging unter). */
.sw-tag-seite {
  font-style: normal;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink);
}
.sw-nav { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
/* Startseite: „Pilotphase" sitzt jetzt über den Nav-Links, rechtsbündig (07.09.2026,
   Linda-Wunsch — vorher klebte das Wort am rechten Seitenrand auf einer Linie mit den Links). */
.sw-topbar-right { display: flex; flex-direction: column; align-items: flex-end; gap: 0.7rem; }
.sw-topbar-right .sw-nav { justify-content: flex-end; }
@media (max-width: 560px) {
  .sw-topbar-right { align-items: flex-start; }
  .sw-topbar-right .sw-nav { justify-content: flex-start; }
}
/* Handy-Kopfzeile (09.09.2026, Linda-Feedback): Wortmarke + Nav-Links stapelten sich unruhig
   ("zum Wegweiser" / "Login" untereinander, halb umgebrochen). Auf schmalen Viewports:
   Wortmarke kleiner, Nav-Zeile über die volle Breite mit engerem Abstand, Links kompakter. */
@media (max-width: 480px) {
  .sw-topbar { gap: 0.6rem; padding-bottom: 1.25rem; margin-bottom: 1.75rem; }
  .sw-word { font-size: 2.25rem; }
  .sw-tag { font-size: 0.98rem; }
  .sw-tag-seite { font-size: 1.08rem; }
  .sw-topbar > div:first-child { flex: 1 1 100%; }
  .sw-nav { width: 100%; gap: 0.5rem 1.1rem; }
  .sw-nav a { font-size: 0.76rem; letter-spacing: 0.04em; }
  .sw-nav a.sw-nav-cta { padding: 0.3rem 0.7rem; }
}
.sw-nav a {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-decoration: none;
}
.sw-nav a:hover, .sw-nav a.active { color: var(--ink); }
/* „Angebot eintragen" als Rahmen-Chip — aber im GLEICHEN Textstil wie die übrigen Nav-Links
   (Versalien, gleiche Laufweite/Größe/Farbe), nur zusätzlich mit Pill-Rahmen (09.09.2026,
   Linda: „Login" und der Chip sahen zu unterschiedlich aus). Hierarchie kommt allein vom Rahmen. */
.sw-nav a.sw-nav-cta {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.34rem 0.85rem;
}
.sw-nav a.sw-nav-cta:hover { border-color: var(--sage); background: var(--card); color: var(--ink); }
/* „Login" bekommt denselben Pill-Rahmen (10.09.2026, Linda), aber etwas zurückhaltender —
   die Haupt-Aktion bleibt „Angebot eintragen". */
.sw-nav a.sw-nav-cta-light { border-color: var(--line); opacity: 0.9; }
/* „Angebot eintragen" gefüllt in Kupferton (13.09.2026, Linda — vorher nur Rahmen wie
   Login, kaum zu unterscheiden). Login bleibt bewusst unverändert als Rahmen-Pill, das
   ist die gewollte Hierarchie (Haupt-Aktion vs. Nebenhandlung), kein Konsistenzfehler. */
#sw-nav-register.sw-nav-cta {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
#sw-nav-register.sw-nav-cta:hover { background: #96692F; border-color: #96692F; color: var(--accent-ink); }
.sw-badge {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--paper);
  background: var(--muted);
  padding: 0.3rem 0.6rem;
  border-radius: 3px;
}

/* Buttons & Formulare */
.sw-cta {
  display: inline-block;
  text-align: center;
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  padding: 0.75rem 1.1rem;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  border-radius: 2px;
}
.sw-cta:hover { opacity: 0.92; }
.sw-cta:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }
.sw-cta-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.sw-cta-danger { background: var(--error); }
.sw-cta[disabled] { opacity: 0.5; cursor: not-allowed; }
/* „gedimmt" = sieht inaktiv aus, bleibt aber klickbar (zeigt beim Tippen den Grund an) */
.sw-cta-gedimmt { opacity: 0.5; }

/* Abschnitts-Überschriften im Eintrags-Formular (09.09.2026, Linda: logische Struktur) */
.sw-form-section {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--sage);
  font-weight: 700;
  margin: 2rem 0 0.9rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--line);
}
.sw-form-section:first-of-type { margin-top: 0.5rem; }
/* PLZ + Ort nebeneinander */
.sw-field-plz-ort { display: grid; grid-template-columns: 7rem 1fr; gap: 0.7rem; }
.sw-field-plz-ort .sw-field { margin-bottom: 1.1rem; }

.sw-field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 1.1rem; }
/* Feld-Überschriften kräftiger + größer als die Erklärzeile darunter (09.09.2026, Linda) */
.sw-field label { font-size: 0.98rem; font-weight: 600; color: var(--ink); }
.sw-field .sw-field-hint { margin-top: 0.1rem; }
.sw-field-invalid { border-color: var(--error) !important; }
.sw-field input, .sw-field select, .sw-field textarea {
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  padding: 0.6rem 0.7rem;
  width: 100%;
  border-radius: 2px;
}
.sw-field textarea { resize: vertical; min-height: 4.5rem; }
.sw-field-hint { font-size: 0.78rem; color: var(--muted); }
/* Platzhalter klar heller als eingetippter Text (10.09.2026, Linda: "damit man sieht, dass da noch nichts steht") */
.sw-field input::placeholder, .sw-field textarea::placeholder { color: var(--muted); opacity: 0.65; }
/* Freistehende Erklärzeile unter dem Adressblock — mehr Luft zum nächsten Feld (10.09.2026) */
#sw-ort-fields > .sw-field-hint { display: block; margin: 0.3rem 0 1.8rem; }
/* Bildausschnitt-Picker als abgesetzter Kasten, damit er nach dem Upload nicht untergeht (10.09.2026) */
#sw-fokus-picker { background: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: 0.9rem; margin-top: 0.5rem; }

/* Passwort-Sichtbarkeit umschalten (25.08.2026, Wunsch von Linda) */
.sw-password-wrap { position: relative; }
.sw-password-wrap input { padding-right: 2.6rem; }
.sw-password-toggle {
  position: absolute;
  right: 0.3rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  padding: 0.35rem;
  color: var(--muted);
}
.sw-password-toggle:hover { color: var(--ink); }

.sw-form-card {
  background: var(--card);
  border: 1px solid var(--line);
  padding: 1.5rem 1.4rem;
  border-radius: 3px;
}
.sw-form-narrow { max-width: 420px; margin: 0 auto; }

.sw-notice {
  font-size: 0.85rem;
  padding: 0.75rem 0.9rem;
  border-radius: 3px;
  margin-bottom: 1rem;
}
.sw-notice-info { background: rgba(95,112,89,0.14); color: var(--sage); }
.sw-notice-error { background: rgba(168,68,58,0.12); color: var(--error); }
.sw-notice-success { background: rgba(95,112,89,0.18); color: var(--sage); }

/* Verzeichnis-Layout (07.09.2026, Datei 41 § 2/§ 5): Filterspalte standardmäßig eingeklappt,
   die Angebote füllen die Breite. Erst „Filter anzeigen" schaltet die linke Spalte dazu. */
.sw-directory {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}
.sw-directory.sw-filters-open { grid-template-columns: 240px 1fr; }
@media (max-width: 800px) {
  .sw-directory.sw-filters-open { grid-template-columns: 1fr; }
}
.sw-results { min-width: 0; }
.sw-sidebar-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.45rem;
  margin-bottom: 0.2rem;
}
.sw-sidebar-head h4 {
  border: none;
  margin: 0;
  padding: 0;
  font-size: 0.92rem;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.sw-sidebar-head .sw-clear-filters { margin: 0; }
.sw-sidebar-head-actions { display: flex; align-items: center; gap: 0.9rem; }
.sw-sidebar-close {
  background: none; border: none; cursor: pointer;
  font-size: 1.05rem; line-height: 1; color: var(--muted);
  padding: 0.1rem 0.15rem;
}
.sw-sidebar-close:hover { color: var(--ink); }
.sw-sidebar-head + h4 { margin-top: 0.9rem; }
.sw-sidebar {
  border: 1px solid var(--line);
  padding: 1.2rem 1.1rem;
  position: sticky;
  top: 1rem;
}
@media (max-width: 800px) {
  /* Bug (25.08.2026, Linda + Ronny): Im einspaltigen Mobil-Layout blieb die Sidebar durch
     "position: sticky" beim Scrollen hängen und überlappte Suchleiste/Standort-Filter darunter
     — bei Ronny sogar so stark, dass das PLZ-/Suchfeld nicht mehr antippbar war. Diese Regel
     muss NACH der allgemeinen .sw-sidebar-Regel oben stehen, sonst gewinnt bei gleicher
     Spezifität die frühere Regel im Quelltext (CSS-Kaskade), nicht diese hier. */
  .sw-sidebar { position: static; top: auto; }
}
.sw-sidebar h4 {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sage);
  font-weight: 700;
  margin: 1.1rem 0 0.6rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--line);
}
.sw-sidebar h4:first-child { margin-top: 0; }

/* Zusammenklappbare Filter-Abschnitte (10.09.2026) */
.sw-fsec { border-bottom: 1px solid var(--line); }
.sw-fsec-head {
  display: flex; align-items: center; gap: 0.5rem; width: 100%;
  background: none; border: none; cursor: pointer;
  padding: 0.75rem 0; font-family: inherit; text-align: left;
}
/* Sortierung/Standort/Favoriten sind seit 13.09.2026 immer sichtbar, nicht mehr hinter
   einem Klick versteckt (Ronnys Feedback von der Messe) — nur Format & Thema bleiben
   als aufklappbare Abschnitte (.sw-fsec-head) übrig. */
.sw-fsec-head-static {
  display: flex; align-items: center; gap: 0.5rem; width: 100%;
  padding: 0.75rem 0 0.35rem; font-family: inherit; text-align: left;
}
.sw-fsec-title {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--sage); font-weight: 700;
}
.sw-fsec-badge {
  font-size: 0.7rem; font-weight: 600; color: var(--accent-ink);
  background: var(--sage); border-radius: 999px; padding: 0.05rem 0.45rem;
}
.sw-fsec-badge:empty { display: none; }
.sw-fsec-chev {
  margin-left: auto; color: var(--ink); font-size: 1.15rem; font-weight: 700;
  transition: transform 0.15s ease;
}
.sw-fsec-head[aria-expanded="true"] .sw-fsec-chev { transform: rotate(90deg); }
.sw-fsec-body { padding-bottom: 0.7rem; }
.sw-fsec:last-of-type { border-bottom: none; }

.sw-region-fields { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.6rem; }
.sw-region-fields input, .sw-region-fields select {
  font-family: inherit;
  font-size: 0.85rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.5rem 0.7rem;
  color: var(--ink);
}
.sw-region-status { font-size: 0.76rem; color: var(--muted); }
/* Filter-Zeilen: Häkchen (Favoriten, Format, Thema) + Radios (Standort), einheitliche Optik (10.09.2026) */
.sw-check-list { display: block; }
.sw-check-row {
  display: flex; align-items: flex-start; gap: 0.55rem;
  font-size: 0.88rem; color: var(--ink); line-height: 1.35;
  padding: 0.3rem 0; cursor: pointer; position: relative;
}
.sw-check-row input {
  margin: 0.12rem 0 0; flex-shrink: 0;
  width: 1rem; height: 1rem; cursor: pointer; accent-color: var(--sage);
}
.sw-clear-filters { font-size: 0.78rem; color: var(--sage); cursor: pointer; text-decoration: underline; margin-top: 1rem; }
.sw-apply-filters {
  display: block; width: 100%; margin-top: 1.4rem;
  background: var(--accent); color: var(--accent-ink);
  border: none; border-radius: 999px;
  padding: 0.85rem 1rem; font-family: inherit; font-size: 0.92rem; font-weight: 600;
  cursor: pointer;
}
.sw-apply-filters:hover { opacity: 0.93; }
.sw-apply-filters:disabled { opacity: 0.55; cursor: default; }
/* Nur auf dem Handy klebt der Knopf am unteren Rand — dort ist die Filterspalte lang und
   scrollt mit der Seite. Am PC steht die Spalte für sich, da soll der Knopf einfach unten
   im Fluss stehen und nichts überdecken (Linda, 10.09.2026). */
@media (max-width: 800px) {
  .sw-apply-filters {
    position: sticky; bottom: 0.6rem;
    box-shadow: 0 2px 12px rgba(42,38,32,0.22);
  }
  .sw-sidebar { padding-bottom: 4.5rem; }
}

/* Startseiten-Kopf (07.09.2026, Datei 41 § 1) — H1 kleiner, Angebote in den Vordergrund */
.sw-hero { max-width: 620px; margin: 0 0 1.6rem; }
.sw-hero-kicker {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--sage);
  display: block;
  margin-bottom: 0.5rem;
}
.sw-hero h1 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin-bottom: 0.7rem; }
.sw-hero p { color: var(--muted); font-size: 0.98rem; }

/* Anbieter-Ansprache (07.09.2026): Linda fand das getönte Band zu wuchtig — die Ansprache
   sitzt jetzt allein im Kopfzeilen-Link „Dein Angebot eintragen" (mit title-Tooltip). */

/* Prominente Suchleiste (07.09.2026, Datei 41 § 1) — immer sichtbar, Etsy-Vorbild */
/* Suchleiste + Filter-Knopf nebeneinander, abgerundet (10.09.2026, Linda) */
.sw-searchrow {
  display: flex;
  gap: 0.6rem;
  align-items: stretch;
  margin-bottom: 1.2rem;
}
.sw-searchrow input {
  flex: 1; min-width: 0;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.8rem 1.1rem;
}
.sw-searchrow input::placeholder { color: var(--muted); }
.sw-tool-btn {
  font-family: inherit;
  font-size: 0.9rem;
  white-space: nowrap;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.5rem 1.3rem;
  cursor: pointer;
}
.sw-tool-btn:hover { border-color: var(--muted); }
.sw-tool-btn.active { background: var(--sage); color: var(--accent-ink); border-color: var(--sage); }

/* "Filter"-Knopf immer grün gefüllt, damit er neben der Suchleiste nicht untergeht
   (11.09.2026, Linda — jetzt einheitlich Handy + Tablet/PC, vorher nur ab 801px). */
#sw-filter-toggle {
  background: var(--sage);
  color: var(--accent-ink);
  border-color: var(--sage);
}
#sw-filter-toggle:hover { border-color: var(--sage); filter: brightness(1.08); }
#sw-filter-toggle.active { box-shadow: inset 0 0 0 2px var(--accent-ink); }

/* Ab Tablet/PC: etwas mehr Platz, da neben der Suchleiste mehr Raum ist (11.09.2026, Linda). */
@media (min-width: 801px) {
  #sw-filter-toggle {
    font-size: 0.95rem;
    padding: 0.5rem 1.9rem;
  }
}

.sw-sort-field { margin-bottom: 0.2rem; }
.sw-sort-field select {
  font-family: inherit; width: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.55rem 0.7rem;
  color: var(--ink);
  font-size: 0.88rem;
}
/* Altbestand — noch von der Dashboard-Vorschau/anderen Seiten referenziert */
.sw-search input {
  width: 100%;
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  padding: 0.55rem 0.8rem;
  border-radius: 2px;
}
.sw-pagesize { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: var(--muted); }
.sw-pagesize select {
  font-family: inherit;
  background: var(--card);
  border: 1px solid var(--line);
  padding: 0.35rem 0.5rem;
}

/* Kachel-Raster — 09.09.2026 (Linda-Wunsch): jede Kachel gleich aufgebaut, damit das Raster
   ruhig wirkt. align-items: start = Kacheln behalten ihre natürliche Höhe (kein Strecken auf
   die höchste Kachel der Reihe → keine leere Fläche im Inneren). Titel/Beschreibung mit fester
   Zeilenzahl → Blöcke fangen auf gleicher Höhe an. */
.sw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  align-items: stretch;   /* alle Kacheln einer Reihe gleich hoch (09.09.2026, Linda) */
  gap: 1.1rem;
  margin-bottom: 1.5rem;
}
.sw-card {
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
  background: var(--card);
  position: relative;
  transition: box-shadow 0.15s ease;
}
.sw-card:hover { box-shadow: 0 4px 16px rgba(42,38,32,0.12); }
.sw-card-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center; /* neutral zentriert — bester Kompromiss ohne pro-Bild-Fokuspunkt (09.09.2026, Linda) */
  background: var(--paper);
  display: block;
}
.sw-card-image-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 1.6rem;
}
/* Platzhalter-Mandalablüte für Einträge ohne eigenes Foto (13.09.2026) — sitzt zentriert
   in .sw-card-image-placeholder bzw. .sw-detail-noimg, die beide schon die Fläche/den
   Hintergrund vorgeben. Kupferton über currentColor, keine eigene Farbe im SVG. */
.sw-platzhalter-symbol { width: 62%; height: 62%; color: var(--accent); }
.sw-platzhalter-symbol svg { width: 100%; height: 100%; display: block; }

.sw-card-body { padding: 0 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.55rem; flex: 1; }
.sw-card h3 {
  font-size: 1.05rem;
  line-height: 1.3;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Titel dürfen max. 2 Zeilen (Clamp oben); 1-zeilige reservieren nur ~1 Zeile,
     damit bei kurzen Titeln keine große Lücke bleibt (09.09.2026, Linda). Die
     Reihen-Ausrichtung übernimmt jetzt align-items: stretch + margin-top:auto an den Fakten. */
  min-height: 1.45em;
}
.sw-card p.sw-card-anbieter { font-size: 0.78rem; color: var(--sage); margin: -0.3rem 0 0; }
.sw-card p.sw-desc {
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Bis zu 4 Zeilen (09.09.2026, Linda: wenn eine Kachel Platz hat, soll der Text ihn
     füllen statt leer zu wirken). Beschreibungen sind ohnehin auf 200 Zeichen begrenzt
     (Basis-Limit) → real 3–4 Zeilen. Kürzere Texte lassen die Kachel über align-items:
     stretch trotzdem gleich hoch wie die Nachbarn. Reserve gegen abgeschnittene
     Unterlängen in der letzten Zeile. */
  min-height: 1.5em;
  max-height: 6.1em;
}
/* Feste Fakten-Liste am Kachelfuß: Termin / Ort / Preis, immer gleiche Reihenfolge.
   Fehlt ein Wert, steht ein einheitlicher Ersatztext da (siehe renderListingCard). */
.sw-card-facts {
  border-top: 1px solid var(--line);
  padding-top: 0.5rem;
  margin-top: auto;   /* an den Kachelfuß gedrückt → Fakten-Blöcke einer Reihe fluchten unten (09.09.2026, Linda) */
  min-height: 4.3rem;   /* Platz für Termin + Ort + Preis; „Produkte" ohne Termin bleibt gleich hoch */
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}
.sw-card-fact { display: flex; gap: 0.55rem; font-size: 0.8rem; line-height: 1.3; }
.sw-card-fact-label {
  flex: 0 0 3.2rem;
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  font-weight: 700;
  padding-top: 0.12rem;
}
.sw-card-fact-value {
  color: var(--ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Termin darf zweizeilig werden (z. B. „jeden 1. Dienstag im Monat, 19 Uhr") —
   Ort/Preis bleiben einzeilig, damit die Kacheln ruhig bleiben. */
.sw-card-fact-value--multi {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.sw-pillrow { display: flex; gap: 0.4rem; flex-wrap: wrap; }
/* In der Kachel dürfen Format + Thema voll ausgeschrieben stehen und bei Platzmangel
   umbrechen (kein „E…"-Abschneiden mehr). Titel/Beschreibung haben eine feste Mindesthöhe,
   dadurch bleiben die Blöcke trotzdem weitgehend auf einer Linie; kleine Höhenunterschiede
   fängt `.sw-grid { align-items: start }` sauber ab. */
.sw-card .sw-pillrow { min-height: 1.9rem; align-content: flex-start; }  /* nur 1 Pillen-Zeile reservieren — die meisten Einträge haben Format + 1 Thema; keine große Leerzeile mehr (09.09.2026, Linda) */
.sw-card .sw-pill { white-space: normal; }
/* Einspaltig (Handy): keine Nachbar-Kachel zum Ausrichten → kein reservierter Leerraum */
@media (max-width: 480px) { .sw-card .sw-pillrow { min-height: 0; } }
.sw-pill {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sage);
  border: 1px solid var(--line);
  padding: 0.18rem 0.5rem;
  border-radius: 2px;
}
.sw-pill-theme { color: var(--muted); }
.sw-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 0.6rem;
  margin-top: auto;
}
.sw-meta strong { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; }
.sw-favorite-btn {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  border: none;
  background: rgba(251,246,236,0.9);
  color: var(--muted);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.sw-favorite-btn.active { color: var(--error); }
.sw-favorite-btn:hover { color: var(--error); }

/* Pagination */
.sw-pagination { display: flex; justify-content: center; align-items: center; gap: 0.6rem; margin-bottom: 3rem; }
.sw-page-btn {
  font-family: inherit;
  font-size: 0.85rem;
  background: var(--card);
  border: 1px solid var(--line);
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  color: var(--ink);
}
.sw-page-btn.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.sw-page-btn[disabled] { opacity: 0.4; cursor: not-allowed; }

/* Detailseite — zweispaltig (08.09.2026, Etsy-Vorbild: Bild links, Infos rechts).
   Stapelt unter 860px und in der Dashboard-Vorschau (schmales Panel). Wird von
   eintrag.html UND der Dashboard-Vorschau (renderListingDetailHtml) genutzt. */
.sw-page-detail { max-width: 1040px; }
.sw-back-link { font-size: 0.85rem; color: var(--sage); text-decoration: none; display: inline-block; margin-bottom: 1.2rem; }

/* Detailseite: "Zurück zum Wegweiser" + "Zurück zum Bearbeiten" als gleich aussehende
   Pill-Buttons, untereinander gestapelt (11.09.2026, Linda). */
.sw-back-links-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; margin-bottom: 1.2rem; }
.sw-back-link-pill {
  font-size: 0.85rem;
  color: var(--ink);
  text-decoration: none;
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.34rem 0.85rem;
  margin-bottom: 1.2rem; /* eigenständige Nutzung (z. B. Dashboard "Zurück zur Übersicht") */
}
/* Innerhalb des Stacks übernimmt schon .sw-back-links-stack den Abstand (gap) — sonst
   würde sich der eigene margin-bottom zusätzlich addieren. */
.sw-back-links-stack .sw-back-link-pill { margin-bottom: 0; }
.sw-back-link-pill:hover { border-color: var(--sage); background: var(--card); }

.sw-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); /* Bild ~52% — Platz für die spätere Bilder-/Video-Leiste links */
  gap: clamp(1.5rem, 5vw, 3.5rem);
  align-items: start;
}
@media (max-width: 860px) {
  .sw-detail-layout { grid-template-columns: 1fr; gap: 1.5rem; }
}
.sw-preview-panel .sw-detail-layout { grid-template-columns: 1fr; gap: 1.5rem; }

/* Bild-Spalte — Bild immer ganz sichtbar (object-fit: contain), sanft gerahmt.
   Mehrere Bilder (Premium ab 15.01.2027) füllen die Spalte als kleines Raster;
   dafür ist hier bewusst schon Platz vorgesehen. */
.sw-detail-media { position: sticky; top: 1.5rem; }
@media (max-width: 860px) { .sw-detail-media { position: static; } }
/* In der Dashboard-Vorschau ist das Layout einspaltig (Bild ÜBER dem Text) — dort darf das
   Bild NICHT kleben, sonst scrollt der Text dahinter hoch und ist nicht mehr lesbar
   (09.09.2026, Linda). */
.sw-preview-panel .sw-detail-media { position: static; }
.sw-detail-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.5rem; margin: 0; }
.sw-detail-gallery-single { display: block; }
/* Detailseite:
   - EIN Bild → hochkanter Rahmen 4:5 (Linda 09.09.2026: „etwas länger machen,
     damit unten kein leerer Raum bleibt" — 4:3 → 1:1 → 4:5, Linda: „das hatten wir
     schon mal, war sehr gut"). Welcher Ausschnitt gezeigt wird, steuert der
     Bild-Fokuspunkt der Anbieterin (object-position pro Eintrag).
   - MEHRERE Bilder → gleichmäßige quadratische Kacheln (cover), sonst wird das Raster unruhig.
   Zuschneiden pro Bild = späteres Premium-Feature (E-031). */
/* Bildrahmen: füllt immer (object-fit: cover), sanft abgerundet, KEIN sichtbarer Kasten/
   Balken (09.09.2026, Linda: „bei Heilkreis perfekt — abgerundet, füllt aus"; der
   „eingerahmte" Zustand bei hochkanten Bildern kam vom contain-Balken → weg damit).
   Welcher Ausschnitt gezeigt wird, steuert der Bild-Fokuspunkt der Anbieterin
   (object-position wird pro Eintrag inline gesetzt). */
.sw-detail-img {
  border-radius: 10px; overflow: hidden; background: var(--card);
}
.sw-detail-gallery-single .sw-detail-img { aspect-ratio: 4 / 5; }
.sw-detail-gallery:not(.sw-detail-gallery-single) .sw-detail-img { aspect-ratio: 1 / 1; }
.sw-detail-img img {
  width: 100%; height: 100%; display: block; object-fit: cover; object-position: center;
}
.sw-detail-noimg {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3; background: var(--card);
  border: 1px solid var(--line); border-radius: 10px;
  color: var(--accent); font-size: 2rem;
}

/* Info-Spalte */
.sw-detail-info { min-width: 0; }
.sw-detail-titlerow { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
/* Merken (Herz) + Teilen als schlichte runde Symbol-Knöpfe (09.09.2026, Linda — kein Text,
   „jeder kennt das Herz"). Recherche: Etsy/Airbnb/Pinterest nutzen alle das reine Herz-Symbol. */
.sw-detail-actions { flex-shrink: 0; display: flex; flex-direction: row; gap: 0.5rem; align-items: center; }
.sw-detail-fav, .sw-detail-share {
  width: 2.6rem; height: 2.6rem; flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--muted);
  font-size: 1.3rem; line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit;
}
.sw-detail-fav:hover, .sw-detail-share:hover { border-color: var(--sage); color: var(--ink); }
.sw-detail-share svg { display: block; width: 1.15rem; height: 1.15rem; }
.sw-detail-fav.active { color: var(--error); border-color: var(--error); }
.sw-detail-fav[disabled] { opacity: 0.5; cursor: default; }
.sw-share-wrap { position: relative; }
.sw-share-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.3rem);
  z-index: 5;
  display: flex;
  flex-direction: column;
  min-width: 10rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: 0 6px 20px rgba(42,38,32,0.16);
  overflow: hidden;
}
.sw-share-menu a, .sw-share-copy {
  padding: 0.55rem 0.9rem;
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  text-decoration: none;
  color: var(--ink);
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.sw-share-menu a:last-child, .sw-share-copy { border-bottom: none; }
.sw-share-menu a:hover, .sw-share-copy:hover { background: var(--paper); }
.sw-detail-title { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; margin: 0.5rem 0 0.15rem; }
.sw-detail-anbieter { color: var(--muted); margin: 0 0 1.3rem; }

.sw-detail-factcards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 0.6rem;
  margin: 0 0 1.6rem;
}
.sw-factcard {
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 0.55rem 0.75rem; display: flex; flex-direction: column; gap: 0.15rem;
}
.sw-factcard-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); font-weight: 700; }
.sw-factcard-value { font-size: 0.95rem; color: var(--ink); white-space: pre-line; }

.sw-detail-section { margin: 1.6rem 0 0; }
.sw-detail-section h2, .sw-detail-contact h2 {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--sage); font-weight: 700;
  margin: 0 0 0.5rem; padding-bottom: 0.3rem;
  border-bottom: 2px solid var(--accent); display: inline-block;
}
.sw-detail-text { font-size: 1rem; line-height: 1.7; color: var(--ink); white-space: pre-line; }

.sw-detail-links { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.5rem; }
.sw-cta-external::after { content: " ↗"; font-size: 0.85em; opacity: 0.7; }

.sw-detail-contact {
  margin-top: 1.8rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 1rem 1.1rem;
}
.sw-detail-contact a { color: var(--accent); }
.sw-kontakt-aufruf {
  margin: 0 0 0.9rem; padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--line);
  font-size: 1rem; color: var(--ink); line-height: 1.55;
}
.sw-kontakt-aufruf strong { display: block; margin-bottom: 0.15rem; color: var(--accent); }
.sw-contact-line { display: flex; gap: 0.7rem; margin: 0.4rem 0; font-size: 0.95rem; align-items: baseline; }
.sw-contact-line:first-of-type { margin-top: 0; }
.sw-contact-label {
  flex: 0 0 4.5rem; color: var(--muted);
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em;
}
.sw-contact-line a, .sw-contact-line span:last-child { word-break: break-word; }
.sw-detail-melden { font-size: 0.75rem; margin-top: 0.8rem; }
.sw-detail-melden a { color: var(--muted); }

/* Kopfbereich zentriert — Variante, per JS-Konstante CENTER_HEADER umschaltbar (common.js) */
.sw-detail-info--centered .sw-pillrow { justify-content: center; }
.sw-detail-info--centered .sw-detail-titlerow { flex-direction: column; align-items: center; text-align: center; gap: 0.6rem; }
.sw-detail-info--centered .sw-detail-anbieter { text-align: center; }

.sw-listview-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}
.sw-listview-head h1 { font-size: 1.7rem; }
#sw-new-listing-hint { margin: 0.1rem 0 0.9rem; }
/* Feedback-Karte — dezent abgesetzter Kasten statt loser Textzeile (09.09.2026, Linda:
   „der Satz hängt dort so verloren rum"). Gleiche Optik im Dashboard und auf der Startseite. */
.sw-feedback-box, .sw-pub-feedback {
  margin: 2.6rem 0 1rem;
  padding: 1.5rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.sw-feedback-title {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
}
.sw-feedback-intro { font-size: 0.9rem; color: var(--muted); margin: 0 0 1rem; max-width: 46ch; }

/* "Passwort ändern" — bewusst deutlich kleiner/zurückhaltender als die Feedback-Karte
   (11.09.2026, Linda: "geht jetzt völlig unter" / "Passwort ändern ist riesig" — die Karte
   stand vor "Deine Einträge" und erschlug den eigentlichen Seiteninhalt). Reine Konto-
   Einstellung, kein Aufruf zum Mitmachen wie Feedback — braucht daher weniger Gewicht.
   11.09.2026 spät: noch kleiner + mehr Abstand zur Eintragstabelle oben (Linda-Wunsch, 2 Runden). */
.sw-account-box {
  margin: 3rem 0 1.4rem;
  padding: 0.5rem 0.7rem;
  max-width: 340px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
}
/* 11.09.2026 spät: Überschrift links, Button rechts (Linda-Korrektur), Button rund. */
.sw-account-box-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.sw-account-box-title {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
}
#sw-changepw-toggle { padding: 0.35rem 0.75rem; font-size: 0.76rem; border-radius: 999px; font-weight: 400; }
#sw-feedback-panel, #sw-pub-feedback-panel, #sw-changepw-panel {
  margin-top: 1rem; max-width: 520px;
  display: flex; flex-direction: column; gap: 0.6rem;
}
#sw-feedback-panel textarea, #sw-pub-feedback-panel textarea { min-height: 5rem; }
#sw-feedback-panel .sw-cta, #sw-pub-feedback-panel .sw-cta { align-self: flex-start; }
#sw-pub-feedback-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sw-checkline { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--ink); cursor: pointer; }
.sw-checkline input { width: auto; }

.sw-delete-account-row { margin-top: 2.2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.sw-delete-account-row a { font-size: 0.8rem; color: var(--error); text-decoration: underline; opacity: 0.85; }
.sw-delete-account-row a:hover { opacity: 1; }

/* Eigenes Bestätigungsfenster für "Konto löschen" statt native confirm() (11.09.2026, Linda). */
.sw-modal-overlay {
  position: fixed; inset: 0; background: rgba(42,38,32,0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem; z-index: 1000;
}
.sw-modal-overlay[hidden] { display: none; }
.sw-modal-box {
  background: var(--paper); border-radius: 12px; padding: 1.4rem;
  max-width: 420px; width: 100%; box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
.sw-modal-box h3 { margin: 0 0 0.7rem; font-size: 1.15rem; color: var(--ink); }
.sw-modal-box p { font-size: 0.92rem; color: var(--ink); line-height: 1.5; margin-bottom: 1.1rem; }
.sw-modal-actions { display: flex; gap: 0.7rem; justify-content: flex-end; flex-wrap: wrap; }
.sw-modal-actions button { font-family: inherit; font-size: 0.9rem; font-weight: 600; padding: 0.55rem 1.1rem; border-radius: 999px; cursor: pointer; }
.sw-modal-cancel { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.sw-modal-cancel:hover { border-color: var(--sage); }
.sw-modal-confirm { background: var(--error); border: none; color: var(--paper); }
.sw-modal-confirm:hover { filter: brightness(1.08); }

/* Dashboard-Tabellen */
.sw-dash-table { width: 100%; border-collapse: collapse; margin-bottom: 2rem; }
.sw-dash-table th, .sw-dash-table td {
  text-align: left;
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.88rem;
}
.sw-dash-table th { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.sw-dash-edit-link { font-weight: 600; text-decoration: none; }
.sw-dash-edit-link:hover { text-decoration: underline; }
.sw-btn-mini {
  display: inline-block; white-space: nowrap;
  font-size: 0.78rem; text-decoration: none;
  color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 0.22rem 0.7rem;
}
.sw-btn-mini:hover { border-color: var(--sage); }
.sw-neu-veroeffentlicht {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem;
  margin-bottom: 1.3rem; padding: 0.7rem 0.95rem;
  /* 11.09.2026: kräftiger als der erste Versuch (#E7ECE1) — Linda: "ein bisschen kräftiger
     grün". rgba auf --sage-Basis statt Festfarbe, damit es zur Palette passt. */
  background: rgba(95, 112, 89, 0.22); border: 1.5px solid var(--sage); border-radius: 10px;
  font-size: 0.9rem; color: var(--ink);
}
.sw-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sw-status-chip { font-size: 0.72rem; padding: 0.15rem 0.5rem; border-radius: 20px; background: var(--card); }
.sw-status-chip.veroeffentlicht { background: rgba(95,112,89,0.18); color: var(--sage); }
.sw-status-chip.entwurf { background: rgba(107,98,80,0.16); color: var(--muted); }
.sw-status-chip.pruefung { background: rgba(168,118,58,0.18); color: #8a5a1f; }
/* Handy: „Format"-Spalte ausblenden, damit Titel · Status · Bearbeiten ohne Querscrollen passen (10.09.2026, Linda) */
@media (max-width: 560px) {
  .sw-dash-table th, .sw-dash-table td { padding: 0.55rem 0.4rem; font-size: 0.85rem; }
  .sw-dash-table th:nth-child(2), .sw-dash-table td:nth-child(2) { display: none; }
  .sw-btn-mini { padding: 0.25rem 0.6rem; }
}
.sw-image-preview-row { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.sw-image-preview { position: relative; width: 90px; height: 90px; }
.sw-image-preview img { width: 100%; height: 100%; object-fit: cover; border: 1px solid var(--line); }
.sw-image-remove {
  position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--error); color: #fff; border: none; font-size: 0.7rem; cursor: pointer; line-height: 1;
}

/* Bild-Fokuspunkt-Auswahl (09.09.2026) */
.sw-fokus-stage {
  position: relative; width: 100%; max-width: 360px;
  aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: 8px; border: 1px solid var(--line);
  cursor: crosshair; margin-top: 0.4rem; touch-action: manipulation;
}
.sw-fokus-stage img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.sw-fokus-marker {
  position: absolute; width: 22px; height: 22px;
  transform: translate(-50%, -50%);
  border: 2px solid #fff; border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.4), inset 0 0 0 2px rgba(0,0,0,0.15);
  pointer-events: none;
}
.sw-plan-options { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 1rem; }
.sw-plan-card {
  border: 1px solid var(--line);
  padding: 0.9rem 1rem;
  flex: 1;
  min-width: 160px;
  cursor: pointer;
  border-radius: 2px;
}
.sw-plan-card.active { border-color: var(--accent); background: var(--card); }
.sw-plan-card .sw-plan-price { font-size: 1.4rem; }
.sw-plan-card .sw-plan-desc { font-size: 0.8rem; color: var(--muted); }

/* Formular-Aktionszeile (Speichern/Vorschau/Löschen, 25.08.2026) — Bug: alle drei nebeneinander
   liefen bei genug Buttons/schmalem Bildschirm aus dem Rahmen, "Löschen" war nicht mehr klickbar.
   Fix: flex-wrap statt Buttons zu verkleinern (bleiben gut antippbar) — auf breitem Bildschirm
   eine Zeile, auf schmalem Bildschirm brechen sie natürlich um, jeder Button bleibt min. 140px
   breit statt gequetscht zu werden. */
.sw-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.2rem;
}
.sw-form-actions .sw-cta { flex: 1 1 140px; }

/* Eintrag-Vorschau im Dashboard (25.08.2026, Wunsch von Linda) */
.sw-preview-overlay {
  position: fixed;
  inset: 0;
  background: rgba(42,38,32,0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem) 1rem;
  overflow-y: auto;
  z-index: 50;
}
.sw-preview-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  max-width: 640px;
  width: 100%;
  padding: 1.5rem;
  box-shadow: 0 8px 32px rgba(42,38,32,0.25);
}
.sw-preview-panel-head {
  margin-bottom: 0.6rem;
}
.sw-preview-card-frame {
  border: 1px solid var(--line);
  background: var(--card);
  padding: 1.2rem;
}

.sw-footer {
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: var(--muted);
}
.sw-footer a { color: inherit; }

.sw-empty-state { padding: 2rem 0; color: var(--muted); font-size: 0.92rem; }
.sw-loading { color: var(--muted); font-size: 0.9rem; }