/* Stile der Bereiche: Sitzplan (sp-, aus hochzeit-sitzplan 0.8.1) und Planung/Seiten (hp-). Nur Rahmen-Tokens. */
@layer komponenten {
  /* Sitzplan: alle Klassen mit Praefix sp-, nur Rahmen-Tokens; eigene Farbe nur fuer die Tischplatte. */
  :root { --sp-tisch: #c9a77a; --sp-tisch-text: #fff; --sp-sonder: #e7e2d8; }
  @media screen { :root[data-dunkel="ja"] { --sp-tisch: #8a6c45; --sp-sonder: #34312c; } }

  .sp-kopf { display: flex; flex-wrap: wrap; gap: var(--raum-2) var(--raum-4); align-items: center; justify-content: space-between; }
  .sp-zahlen { color: var(--farbe-text-schwach); }
  .sp-zahlen b { color: var(--farbe-text); }
  .sp-warn, .sp-zahlen .sp-warn { color: var(--farbe-fehler-text); font-weight: 600; }

  .sp-raster { display: grid; grid-template-columns: 290px minmax(0, 1fr) 270px; gap: var(--raum-3); align-items: start; }
  .sp-liste, .sp-detail { position: sticky; top: var(--raum-2); max-height: calc(100vh - 7rem); overflow: auto; }
  .sp-liste.ueber { outline: 2px dashed var(--farbe-akzent); }
  .sp-hilfe { font-size: 0.8rem; margin-top: var(--raum-2); }

  .sp-gruppe { border: 1px solid var(--farbe-rand); border-radius: var(--radius); padding: var(--raum-1) var(--raum-2); margin-bottom: var(--raum-1); }
  .sp-gruppe.gewaehlt { border-color: var(--farbe-akzent); background: var(--farbe-ok-grund); }
  .sp-gkopf { display: flex; gap: var(--raum-1); align-items: center; font-weight: 600; }
  .sp-griff { cursor: grab; touch-action: none; user-select: none; }
  .sp-griff small { color: var(--farbe-text-schwach); font-weight: 400; }
  .sp-getrennt { margin-left: auto; font-size: 0.8rem; white-space: nowrap; }
  .sp-personen { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }

  .sp-chip { display: inline-flex; gap: 3px; align-items: center; padding: 1px 7px; border-radius: 12px; font-size: 0.85rem;
    background: var(--farbe-ok-grund); color: var(--farbe-text); border: 1px solid transparent; cursor: grab; touch-action: none; user-select: none; }
  .sp-chip em { font-style: normal; font-size: 0.75rem; color: var(--farbe-ok-text); margin-left: 3px; }
  .sp-chip.offen { border-color: var(--farbe-warn-text); border-style: dashed; }
  .sp-chip.absage { background: transparent; color: var(--farbe-text-schwach); text-decoration: line-through; cursor: default; }
  .sp-chip.entfallen { background: var(--farbe-fehler-grund); color: var(--farbe-fehler-text); text-decoration: line-through; }
  .sp-chip.gewaehlt { border-color: var(--farbe-akzent); border-style: solid; box-shadow: 0 0 0 2px var(--farbe-akzent); }

  .sp-planbox { min-width: 0; }
  .sp-zoom { align-items: center; gap: var(--raum-2); margin-bottom: var(--raum-2); }
  .sp-zoom input[type="range"] { width: 12rem; }
  .sp-planrahmen { overflow: auto; max-height: calc(100vh - 11rem); }
  .sp-name { position: absolute; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    pointer-events: none; color: var(--farbe-text); }
  .sp-name.oben { transform: rotate(-90deg); transform-origin: 0 50%; }
  .sp-name.unten { transform: rotate(90deg); transform-origin: 0 50%; }
  .sp-name.links { text-align: right; }
  .sp-name.konflikt { color: var(--farbe-fehler-text); text-decoration: line-through; }
  .sp-plan { position: relative; margin: 0 auto; border: 2px solid var(--farbe-text-schwach); background-color: var(--farbe-flaeche);
    background-image: linear-gradient(var(--farbe-rand) 1px, transparent 1px), linear-gradient(90deg, var(--farbe-rand) 1px, transparent 1px);
    background-size: var(--m) var(--m); }
  .sp-flaeche { position: absolute; display: grid; place-items: center; font-size: 0.75rem; color: var(--farbe-text-schwach);
    background: var(--sp-sonder); border: 1px dashed var(--farbe-text-schwach); cursor: move; touch-action: none; user-select: none; }
  .sp-flaeche-weg { position: absolute; top: 0; right: 0; padding: 0 0.3em; border: 0; background: transparent; font: inherit;
    font-size: 0.9rem; line-height: 1.2; color: var(--farbe-text-schwach); cursor: pointer; }
  .sp-flaeche-weg:hover, .sp-flaeche-weg:focus-visible { color: var(--farbe-fehler-text); }
  .sp-tafel { position: absolute; transform-origin: center; }
  .sp-tafel.gezogen { pointer-events: none; opacity: 0.75; z-index: 5; }
  .sp-tafel.aktiv .sp-platte, .sp-tafel.ueber .sp-platte { outline: 3px solid var(--farbe-akzent); }
  .sp-platte { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; overflow: hidden; white-space: nowrap;
    font-size: 10px; line-height: 1.1; font-weight: 600; color: var(--sp-tisch-text); text-shadow: 0 1px 2px #0008;
    background-color: var(--sp-tisch); border-radius: 3px; cursor: move; touch-action: none; user-select: none;
    background-image: repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--teile) - 1px), #0003 0 calc(100% / var(--teile))); }
  .sp-sitz { position: absolute; display: grid; place-items: center; width: calc(var(--m) * 0.5); height: calc(var(--m) * 0.5);
    transform: translate(-50%, -50%); border-radius: 50%; font-size: 10px; background: var(--farbe-flaeche); border: 1.5px solid var(--farbe-text-schwach); }
  .sp-sitz.voll { background: var(--farbe-ok-text); border-color: var(--farbe-ok-text); color: var(--farbe-flaeche); }
  .sp-sitz.konflikt { background: var(--farbe-fehler-text); border-color: var(--farbe-fehler-text); color: var(--farbe-flaeche); }
  .sp-sitz.ueber { box-shadow: 0 0 0 3px var(--farbe-akzent); }
  .sp-sitz.ohne-name { outline: 2px dashed var(--farbe-warn-text); outline-offset: 2px; }
  .sp-sitz i { font-style: normal; cursor: grab; touch-action: none; }
  .sp-tafel.gedreht .sp-sitz i { display: inline-block; transform: rotate(-90deg); }

  .sp-block { display: block; }
  .sp-block input { width: 100%; }
  .sp-seite { margin: var(--raum-2) 0 2px; font-size: 0.75rem; color: var(--farbe-text-schwach); text-transform: uppercase; letter-spacing: 0.04em; }
  .sp-plaetze { margin: 0; padding-left: 1.7rem; }
  .sp-platz { padding: 2px 4px; border-radius: var(--radius); min-height: 1.6rem; }
  .sp-platz.ueber { background: var(--farbe-ok-grund); }

  .sp-umschalter { display: inline-flex; gap: 0; }
  .sp-zusage { display: inline-flex; gap: 2px; white-space: nowrap; }
  .sp-bearbeiten > td { background: var(--farbe-ok-grund); }
  .sp-tischliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--raum-2); }
  .sp-tkarte { border: 1px solid var(--farbe-rand); border-radius: var(--radius); padding: var(--raum-2); }
  .sp-tkarte.aktiv, .sp-tkarte.ueber { border-color: var(--farbe-akzent); box-shadow: 0 0 0 2px var(--farbe-akzent); }
  .sp-tkopf { margin: 0; font-size: 1rem; cursor: pointer; }
  .sp-tkopf small { color: var(--farbe-text-schwach); font-weight: 400; }

  .sp-geist { position: fixed; z-index: 10; pointer-events: none; padding: 3px 9px; border-radius: 12px; font-size: 0.85rem;
    background: var(--farbe-akzent); color: var(--farbe-akzent-text); box-shadow: 0 4px 12px #0004; }
  body.sp-zieht, body.sp-zieht * { cursor: grabbing !important; user-select: none; }

  .sp-vorschau { border-top: 1px solid var(--farbe-rand); margin-top: var(--raum-3); padding-top: var(--raum-2); }
  .sp-fehlerbox { background: var(--farbe-fehler-grund); color: var(--farbe-fehler-text); padding: var(--raum-2); border-radius: var(--radius); margin-top: var(--raum-2); }
  .sp-fehlerbox pre { white-space: pre-wrap; margin: var(--raum-1) 0 0; font-family: var(--schrift); }

  .sp-dgitter { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--raum-2); }
  .sp-dtafel { break-inside: avoid; border: 1px solid var(--farbe-rand); padding: var(--raum-2); }
  .sp-dklein { font-size: 0.8rem; margin: var(--raum-1) 0 0; }
  .sp-umbruch { break-before: page; }
  .sp-tafel.sp-ablage .sp-platte { background-color: var(--sp-sonder); color: var(--farbe-text-schwach); text-shadow: none;
    border: 1px dashed var(--farbe-text-schwach); }

  /* Aufbauplan: dieselbe Zeichnung wie der Raumplan, Farben ueber die Tokens auf druckfest gesetzt (hell, Schrift schwarz).
     Bewusste Ausnahme von "schwarz auf weiss": Platten und besetzte Stuehle bleiben getoent, sonst ist der Plan nicht lesbar. */
  .sp-aufbau { page: sp-aufbau; color: #000; }
  .sp-aufbau h2 { margin: 0 0 1mm; font-size: 14pt; }
  .sp-aufbau-rahmen { padding: 5mm 0 0 6mm; }
  .sp-aufbau-plan { --farbe-text: #000; --farbe-text-schwach: #555; --farbe-flaeche: #fff; --farbe-rand: #d4d4d4; --farbe-ok-text: #3a3c34;
    --farbe-fehler-text: #b00020; --farbe-warn-text: #8a5a00; --farbe-akzent: transparent; --sp-tisch: #ddd5c6; --sp-tisch-text: #000; --sp-sonder: #f2f2f2;
    margin: 0; border-color: #000; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sp-aufbau-plan .sp-platte { text-shadow: none; font-size: 9px; }
  .sp-achse { position: absolute; font-size: 7px; color: #555; }
  .sp-achse.oben { top: -4mm; transform: translateX(-50%); }
  .sp-achse.links { left: -5mm; transform: translateY(-50%); }
  .sp-aufbau-liste { width: 100%; border-collapse: collapse; font-size: 8.5pt; }
  .sp-aufbau-liste td { vertical-align: top; }
  .sp-aufbau-liste td:not(.sp-aufbau-gaeste) { white-space: nowrap; }
  .sp-aufbau-liste tr { break-inside: avoid; }
  .sp-aufbau-gaeste { line-height: 1.35; }

  /* Seating-Chart-Poster (Entwurf B, Stil der Save-the-Date-Karte). Bewusste Ausnahme von "Druck schwarz auf weiss":
     es ist ein gestaltetes Poster, daher eigene Farben und print-color-adjust. --s skaliert Tische und Namen (app.js). */
  /* Aussen: Blatt mit Hintergrund (beim Druckerei-Format inkl. Beschnitt), Masse inline aus app.js.
     Innen: die gestaltete Flaeche auf A4-Mass, beim Druckerei-Format per zoom vergroessert. */
  .sp-poster { --creme: #f1ebde; --name: #e7e0d1; --rose: #d9c3b8; --grund: radial-gradient(ellipse at 50% 0%, #4a4c42, #34362f 70%);
    page: sp-poster; box-sizing: border-box; overflow: hidden; color: var(--creme); background: var(--grund);
    font-family: var(--poster-text, 'Cormorant Garamond', Georgia, serif);
    -webkit-print-color-adjust: exact; print-color-adjust: exact; display: flex; align-items: center; justify-content: center; }
  /* Helle Fassung: ohne Probedruck sicherer - grosse dunkle Flaechen kippen im Druck leicht ins Schwarze. */
  .sp-poster.hell { --creme: #3a3c34; --name: #4a4c42; --rose: #b08f82; --grund: radial-gradient(ellipse at 50% 0%, #f7f3ec, #ece5d8 75%); }
  .sp-poster.gross { page: sp-poster-gross; }
  .sp-poster-flaeche { --s: 1; flex: none; box-sizing: border-box; overflow: hidden; padding: 10mm 14mm; display: flex; flex-direction: column;
    text-align: center; }
  .sp-poster :where(p, h2, ul) { margin: 0; padding: 0; }
  .sp-poster-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; margin-bottom: 6mm; }
  .sp-poster-klein { flex-basis: 100%; font-style: italic; font-size: 11pt; letter-spacing: .5em; color: var(--rose); }
  .sp-poster-sperr { flex-basis: 100%; margin: 2mm 0 1mm; font-size: 10pt; letter-spacing: .38em; text-transform: uppercase; }
  .sp-poster-titel { font-family: var(--poster-titel, 'Pinyon Script', cursive); font-size: 40pt; line-height: 1; }
  .sp-poster-und { font-style: italic; font-size: 12pt; letter-spacing: .5em; margin: 0 2mm; }
  /* Flex statt Grid: eine unvollstaendige letzte Reihe steht mittig statt linksbuendig. */
  .sp-poster-raster { flex: 1; display: flex; flex-wrap: wrap; justify-content: center; align-content: center;
    gap: calc(6mm * var(--s)) 8mm; }
  .sp-poster-tisch { flex: 0 0 calc((100% - (var(--spalten) - 1) * 8mm) / var(--spalten)); min-width: 0; }
  .sp-poster-tisch h2 { font-family: var(--poster-titel, 'Pinyon Script', cursive); font-weight: 400; font-size: calc(22pt * var(--s)); line-height: 1.1;
    margin-bottom: 1.5mm; white-space: nowrap; overflow: hidden; color: var(--creme); }
  .sp-poster-tisch.braut h2 { color: var(--rose); }
  .sp-poster-tisch ul { list-style: none; }
  .sp-poster-tisch li { font-size: calc(7.6pt * var(--s)); line-height: 1.6; letter-spacing: .2em; text-transform: uppercase;
    white-space: nowrap; overflow: hidden; color: var(--name); }
  .sp-poster-messen { position: fixed; left: -2000mm; top: 0; visibility: hidden; pointer-events: none; }

  @media (max-width: 1100px) {
    .sp-raster { grid-template-columns: 1fr; }
    .sp-liste, .sp-detail { position: static; max-height: 50vh; }
  }
}

/* ---- */

/* Ausserhalb der Ebenen: ein benannter Seitentyp gewinnt gegen das allgemeine "@page A4 mit Rand" aus rahmen.css. */
@page sp-poster { size: A4 landscape; margin: 0; }
@page sp-aufbau { size: A4 landscape; margin: 8mm; }
/* 100 x 70 cm Endformat + ~3 mm Beschnitt je Seite = 1005,9 x 705,9 mm, in ganzen px wie POSTER_FORMATE in app.js. */
@page sp-poster-gross { size: 3802px 2668px; margin: 0; }

/* ---- Hochzeitsplaner: Bereiche ausser dem Sitzplan, Praefix hp-, nur Rahmen-Tokens ---- */
@layer komponenten {
  .hp-form { display: flex; flex-wrap: wrap; gap: var(--raum-2) var(--raum-3); align-items: flex-end; }
  .hp-form label { display: flex; flex-direction: column; gap: 2px; }
  .hp-form label:has(> input[type="checkbox"]) { flex-direction: row; align-items: center; gap: var(--raum-1); }
  .hp-breit { flex: 1 1 100%; }
  .hp-breit textarea, .hp-breit input { width: 100%; }
  .hp-form textarea { min-width: 18rem; font: inherit; }
  .hp-form select[multiple] { min-width: 14rem; }
  tr.hp-bearbeiten > td { background: var(--farbe-grund); }
  tr.hp-erledigt > td { color: var(--farbe-text-schwach); }
  tr.hp-erledigt > td b { text-decoration: line-through; }
  tr.hp-luecke > td { background: var(--farbe-warn-grund); }
  .hp-aktionen { white-space: nowrap; text-align: right; }
  .hp-betrag { white-space: nowrap; font-variant-numeric: tabular-nums; }
  .hp-mengen .hp-zahl { text-align: right; font-variant-numeric: tabular-nums; }
  .hp-mengen tr.hp-mengen-bereich > th { padding-top: var(--raum-3); text-align: left; }
  .hp-notiz { font-size: 0.85rem; font-style: italic; color: var(--farbe-text-schwach); }
  /* Verweis im Kleid eines Knopfs (Bereich Nextcloud) - ohne Linkfarbe und Unterstrich wie die Knoepfe daneben. */
  .hp-verweis { color: inherit; text-decoration: none; display: inline-block; }
  .hp-zugangskarte { white-space: pre-wrap; font: inherit; }
  .hp-notiz::before { content: "Notiz: "; }
  .hp-marke { display: inline-block; padding: 0 var(--raum-1); border: 1px solid var(--farbe-rand); border-radius: var(--radius);
    font-size: 0.75rem; color: var(--farbe-text-schwach); white-space: nowrap; }
  .hp-marke-paar { border-color: var(--farbe-akzent); color: var(--farbe-akzent); }
  .hp-bald { color: var(--farbe-warn-text); font-weight: 600; }

  .hp-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: var(--raum-2); }
  .hp-kachel { display: flex; flex-direction: column; gap: 2px; padding: var(--raum-2) var(--raum-3); border: 1px solid var(--farbe-rand);
    border-radius: var(--radius); background: var(--farbe-flaeche); color: var(--farbe-text); font: inherit; text-align: left; }
  button.hp-kachel { cursor: pointer; }
  button.hp-kachel:hover { border-color: var(--farbe-akzent); }
  .hp-kachel span, .hp-kachel small { color: var(--farbe-text-schwach); font-size: 0.85rem; }
  .hp-kachel b { font-size: 1.5rem; }
  .hp-kennzahlen { display: flex; flex-wrap: wrap; gap: var(--raum-2) var(--raum-4); }
  .hp-kennzahlen > div { display: flex; flex-direction: column; }
  .hp-kennzahlen span { color: var(--farbe-text-schwach); font-size: 0.85rem; }
  .hp-kennzahlen b { font-size: 1.3rem; }

  .hp-offen { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--raum-1); }
  .hp-offen-warn { color: var(--farbe-fehler-text); }
  .hp-offen-start { color: var(--farbe-text-schwach); }
  .hp-antwort { margin-top: var(--raum-2); padding: var(--raum-2) var(--raum-3); border-left: 3px solid var(--farbe-akzent); background: var(--farbe-grund); }

  .hp-vorlagen { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--raum-2); }
  /* Die Vorlagen zeigen ihre eigenen Farben: bewusste Ausnahme von den Tokens, sie sind die Vorschau. */
  .hp-vorlage { padding: var(--raum-3); border: 2px solid var(--farbe-rand); border-radius: var(--radius); }
  .hp-vorlage.aktiv { border-color: var(--farbe-akzent); box-shadow: 0 0 0 2px var(--farbe-akzent); }
  .hp-vorlage p { font-size: 0.85rem; }
  .hp-schriftprobe { font-size: 1.4rem; line-height: 1.4; }
  .hp-bildrolle { margin-bottom: var(--raum-3); }
  .hp-bilder { display: flex; flex-wrap: wrap; gap: var(--raum-2); margin-bottom: var(--raum-2); }
  .hp-bilder figure { margin: 0; width: 10rem; }
  .hp-bilder img { width: 100%; height: 7rem; object-fit: cover; border-radius: var(--radius); display: block; }
  .hp-bilder figcaption { font-size: 0.8rem; display: flex; flex-direction: column; gap: 2px; }
  .hp-vorschau { width: 100%; height: 80vh; border: 1px solid var(--farbe-rand); border-radius: var(--radius); background: white; }
}

/* Online-Planer (planerOnline.js): wer angemeldet ist, neben dem Titel. */
@layer komponenten {
  .online-kopf { display: flex; align-items: center; gap: var(--raum-2); }
}