/* Instaposts-CSS aus dem Altprogramm, unter .insta gescoped (Etappe 5). */
/* ============================================================
   LVL Instagram Post Generator — Oberfläche
   (Das Design der Bilder selbst liegt in js/design.js)
   ============================================================ */

/* Variablen auf dem .insta-Container definieren (werden an alle Felder/Buttons
   darunter vererbt). Vorher stand hier faelschlich «.insta :root», wodurch die
   Regel auf nichts passte und u. a. --border nie gesetzt war — Textfelder und
   Rahmen blieben dadurch unsichtbar. */
.insta {
  --navy: #1B2A6B;
  --blue: #2E4FB8;
  --yellow: #F5C400;
  --gray: #5B6472;
  /* Kräftigere Rahmen- und Hintergrundfarben: Felder, Buttons und Kacheln
     heben sich deutlicher vom Untergrund ab (nur Oberfläche, nicht die Bilder). */
  --border: #6F7789;
  --bg: #E7EAF1;
}.insta .hidden { display: none !important; }.insta /* ---------- Kopf ---------- */

.app-header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 32px;
  background: #fff;
  border-bottom: 1px solid var(--border);
}.insta main { max-width: 900px; margin: 0 auto; padding: 24px 20px 80px; }.insta h2 { color: var(--navy); }.insta /* ---------- Aktionsleiste (bleibt beim Scrollen oben) ---------- */

.action-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 20px;
  background: var(--glass-sheen-soft), var(--glass-bg-solid);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 6px 22px rgba(27, 42, 107, .10), var(--glass-highlight);
}.insta .action-bar .ab-spacer { flex: 1; }.insta .ab-btn {
  padding: 10px 18px;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  color: var(--navy);
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  backdrop-filter: blur(10px) saturate(1.3);
  border: 1px solid rgba(27, 42, 107, 0.35);
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
  transition: background .15s, border-color .15s, transform .15s, box-shadow .15s;
}.insta .ab-btn:hover { background: rgba(255, 255, 255, 0.85); transform: translateY(-1px); box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.7); }.insta .ab-btn:disabled { opacity: .6; cursor: wait; }.insta .ab-btn.ab-primary {
  background: var(--navy);
  color: #fff;
}.insta .ab-btn.ab-primary:hover { background: #24378a; }
@media (max-width: 640px) {
.insta .action-bar { gap: 8px; padding: 10px 14px; }.insta .ab-btn { padding: 9px 12px; font-size: 13px; }.insta .action-bar .ab-spacer { flex-basis: 100%; height: 0; }

}
.insta /* ---------- Kontrollkästchen (z. B. UBS Kids Cup) ---------- */

.checkbox-field {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  background: var(--glass-sheen-soft), var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: var(--shadow-sm), var(--glass-highlight);
  cursor: pointer;
  font-size: 15px;
  color: #1F2937;
}.insta .checkbox-field:hover { border-color: var(--navy); }.insta .checkbox-field input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: var(--navy);
  cursor: pointer;
  flex-shrink: 0;
}
/* Direkt gestapelte Kontrollkästchen (z. B. «UBS Kids Cup» und
   «Meeting Sponsor») etwas auseinanderrücken, damit sie sich nicht berühren. */
.insta .checkbox-field + .checkbox-field { margin-top: 12px; }
/* ---------- Startkacheln ---------- */
/* Vier feste Spalten, jede mit ihren Kacheln untereinander. */
.insta .tiles-columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  align-items: start;
}
/* Spalten-Container als grosse Milchglas-Kachel (Gradient-Glassmorphism):
   ein zarter Farbverlauf unter dem Glas, heller Lichtkant oben. */
.insta .tile-column {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 16px;
  background:
    linear-gradient(160deg, rgba(46, 79, 184, 0.10) 0%, rgba(255, 255, 255, 0) 55%),
    var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  box-shadow: var(--shadow-md), var(--glass-highlight);
}
/* Spaltenüberschrift (Athlet:innen / Wettkampf / Verein / Instagram). */
.insta .tile-column-title {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--navy);
  padding-bottom: 8px;
  margin-bottom: 2px;
  border-bottom: 2px solid var(--navy);
}
@media (max-width: 900px) {
  .insta .tiles-columns { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .insta .tiles-columns { grid-template-columns: 1fr; }
}
/* Kompakte Milchglas-Kachel: nur der Titel, mit einem einzelnen
   Navy-Akzentbalken links. Der globale Verlaufsbalken (.tile::before aus
   style.css) wird hier abgeschaltet — sonst lagen zwei blaue Balken
   nebeneinander. */
.insta .tile {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  text-align: left;
  min-height: 0;
  padding: 16px 16px;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  border: 1px solid var(--glass-border);
  border-left: 5px solid var(--navy);
  border-radius: 12px;
  cursor: pointer;
  font: inherit;
  box-shadow: var(--shadow-sm), var(--glass-highlight);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
/* Doppelten Balken vermeiden: der geerbte Verlaufsbalken entfällt. */
.insta .tile::before { display: none; }
.insta .tile:hover {
  border-color: var(--navy);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md), var(--glass-highlight);
}
.insta .tile:hover::before { display: none; }
.insta .tile-title { font-weight: 800; font-size: 16px; color: var(--navy); }
/* «In Arbeit»-Kachel (Highlightbild): sichtbar, aber nicht auslösbar. */
.insta .tile-wip {
  position: relative;
  cursor: default;
  opacity: .65;
  border-left-color: var(--gray);
}
.insta .tile-wip:hover { border-color: var(--border); transform: none; box-shadow: 0 2px 6px rgba(27, 42, 107, .08); }
.insta .tile-wip .badge {
  position: absolute;
  top: 8px; right: 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--gray);
  background: var(--bg);
  padding: 2px 7px;
  border-radius: 999px;
}
.insta /* ---------- Entwürfe ---------- */

.drafts { margin-top: 44px; }.insta .drafts-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}.insta .draft-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--glass-sheen-soft), var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  border: 1px solid var(--glass-border);
  border-left: 6px solid var(--blue);
  border-radius: 12px;
  padding: 6px 10px 6px 0;
  box-shadow: var(--shadow-sm), var(--glass-highlight);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}.insta .draft-open {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: none;
  border: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}.insta .draft-icon { font-size: 24px; }.insta .draft-text { display: flex; flex-direction: column; gap: 2px; }.insta .draft-name { font-weight: 800; color: var(--navy); display: inline-flex; align-items: center; gap: 8px; }
.insta .draft-tag {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--blue);
  background: #e7edfb;
  border: 1px solid var(--blue);
  border-radius: 999px;
  padding: 1px 9px;
}.insta .draft-meta { font-size: 13px; color: var(--gray); }.insta .draft-row:hover { border-color: var(--navy); border-left-color: var(--navy); transform: translateY(-2px); box-shadow: var(--shadow-md), var(--glass-highlight); }.insta /* ---------- Formulare ---------- */

.template-form {
  background: var(--glass-sheen), var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 24px;
  box-shadow: var(--shadow-md), var(--glass-highlight);
}.insta .field { margin-bottom: 16px; }.insta .field > label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gray);
  margin-bottom: 6px;
}.insta .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
/* Feldkopf mit Aktions-Button rechts (z. B. «Gespeicherte Sponsoren»). */
.insta .field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.insta .field-head > label { margin-bottom: 0; }
.insta .sponsor-pick-btn {
  padding: 6px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .3px;
  color: var(--navy);
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(8px) saturate(1.3);
  backdrop-filter: blur(8px) saturate(1.3);
  border: 1px solid rgba(27, 42, 107, 0.30);
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.insta .sponsor-pick-btn:hover { background: rgba(255, 255, 255, 0.9); }
@media (max-width: 640px) {
.insta .form-row { grid-template-columns: 1fr; } 
}
.insta input[type="text"], .insta textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--field-border);
  border-radius: 8px;
  background: var(--field-bg);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  backdrop-filter: blur(8px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
  font: inherit;
  font-size: 15px;
  color: #1F2937;
}.insta input[type="text"]:focus, .insta textarea:focus {
  outline: 2px solid var(--navy);
  border-color: var(--navy);
  background: rgba(255,255,255,0.92);
}.insta textarea { resize: vertical; }.insta /* Einzeiliges, .insta aber umbruchfähiges Textfeld (Helfer textInput): sieht aus wie
   ein normales Eingabefeld, .insta wächst per Enter aber zu mehreren Zeilen. */
textarea.text-input {
  display: block;
  resize: none;
  overflow: hidden;
  line-height: 1.4;
}.insta /* Zusammengehörende Feldgruppe (z. B. Datum: Wochentag + Datum) */
.subgroup {
  border: 1px solid var(--glass-border);
  border-left: 5px solid var(--blue);
  border-radius: 12px;
  padding: 16px 18px 2px;
  margin-bottom: 16px;
  background: var(--glass-sheen-soft), var(--glass-bg);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: var(--shadow-sm), var(--glass-highlight);
}.insta .subgroup-title {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--navy);
  margin-bottom: 12px;
}.insta /* Auswahl-Panel: hebt die Art-Wahl klar von den Eingabefeldern darunter ab */
.choice-panel {
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 18px 18px 4px;
  margin-bottom: 26px;
  background: var(--glass-sheen), var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  backdrop-filter: blur(18px) saturate(1.35);
  box-shadow: var(--shadow-sm), var(--glass-highlight);
}.insta .choice-panel + * { margin-top: 0; }.insta /* Segmentierte Auswahl (Art des Posts, .insta National / International) */
.segmented { display: flex; gap: 10px; }.insta /* vier Optionen nebeneinander in einer Reihe */
.segmented-quad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 640px) {
.insta .segmented-quad { grid-template-columns: repeat(2, 1fr); } 
}
.insta .segmented-quad .seg-btn { padding: 14px 6px; font-size: 14px; }.insta .seg-btn {
  flex: 1;
  padding: 14px;
  font: inherit;
  font-weight: 700;
  border: 1px solid rgba(27, 42, 107, 0.35);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
  cursor: pointer;
  color: var(--navy);
  transition: background .15s, border-color .15s, transform .15s, box-shadow .15s;
}.insta .seg-btn.active {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
}.insta .seg-btn.seg-int.active {
  border-color: var(--red);
  background: var(--red);
}
/* ---------- Farbschema des Editors folgt der Post-Farbe (--post-accent) ---------- */
.insta { --post-accent: var(--navy); }
/* Aktive Segment-Buttons (ausser den farbigen Erscheinungsbild-Buttons) */
.insta .seg-btn.active:not(.seg-color):not(.seg-int) { border-color: var(--post-accent); background: var(--post-accent); }
.insta .btn-secondary.active, .insta .header-toggle.active, .insta .titel-toggle.active {
  border-color: var(--post-accent); background: var(--post-accent); color: #fff;
}
.insta .ab-btn.ab-primary { background: var(--post-accent); }
.insta .ab-btn.ab-primary:hover { filter: brightness(.92); }
.insta .template-form input:focus, .insta .template-form textarea:focus,
.insta .template-form select:focus { border-color: var(--post-accent); outline: none; }
/* Farbige «Erscheinungsbild»-Buttons: jeder Button in seiner eigenen Farbe. */
.insta .seg-btn.seg-color {
  background: var(--seg-c, var(--navy)); color: var(--seg-on, #fff);
  border-color: var(--seg-c, var(--navy)); opacity: .45;
}
.insta .seg-btn.seg-color.active { opacity: 1; box-shadow: inset 0 0 0 3px rgba(255,255,255,.6); }
/* Rückblick-Titelfolie: linke Kachel mit zwei Feldern (Meisterschaft / Ort). */
.insta .collage-titel2 { display: flex; flex-direction: column; gap: 8px; }
.insta /* ---------- Drag-and-Drop ---------- */

.dropzone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  border: 2px dashed var(--border);
  border-radius: 12px;
  background: #FAFAFB center / cover no-repeat;
  color: var(--gray);
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}.insta .dropzone:hover, .insta .dropzone.dragging {
  border-color: var(--navy);
  background-color: #EEF1FA;
}.insta .dropzone.filled { border-style: solid; border-color: var(--navy); min-height: 220px; }.insta .dz-hint { pointer-events: none; font-size: 15px; }.insta /* Auswahl der Bilddarstellung unter dem Bildfeld */
.fit-toggle {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}.insta .fit-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gray);
  margin-right: 4px;
}.insta .fit-btn {
  padding: 8px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  background: #fff;
  border: 2px solid var(--navy);
  border-radius: 8px;
  cursor: pointer;
}.insta .fit-btn.active {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}
.insta .btn-auto { margin-bottom: 14px; }
.insta .bg-swatch {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 2px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}
.insta .bg-swatch.active {
  border-color: var(--navy);
  box-shadow: 0 0 0 2px #fff inset, 0 0 0 4px var(--navy);
}
/* Foto-Credit (Fotograf): Checkbox + Textfeld unter der Darstellungs-Auswahl. */
.insta .credit-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.insta .credit-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  white-space: nowrap;
}
.insta .credit-input {
  flex: 1;
  min-width: 180px;
  margin: 0;
}
.insta .dz-clear {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 6px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  background: rgba(0, 0, 0, .65);
  color: #fff;
  cursor: pointer;
}.insta /* ---------- Dynamische Listen (Meisterschaftsvorschau) ---------- */

.athlete-card {
  border: 1px solid var(--border);
  border-left: 5px solid var(--navy);
  border-radius: 12px;
  padding: 18px;
  margin: 18px 0;
  background: #FAFAFB;
}.insta .athlete-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  color: var(--navy);
}.insta .discipline-block {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  margin: 10px 0;
  background: #fff;
}.insta .discipline-head {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}.insta .discipline-head input { font-weight: 700; }.insta .round-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  margin-bottom: 8px;
}.insta /* ---------- Bildcollage ---------- */

/* Umschalter für den optionalen Kopfbalken; ist er aktiv, .insta erscheint das
   Textfeld daneben (bei schmalen Fenstern darunter). */
.collage-header-control {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}.insta .collage-header-control .header-toggle { flex: 0 0 auto; }.insta .collage-header-control .header-toggle.active {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}.insta .collage-header-control .header-text {
  flex: 1 1 260px;
  min-width: 200px;
}.insta .page-card {
  border: 1px solid var(--glass-border);
  border-left: 5px solid var(--blue);
  border-radius: 12px;
  padding: 18px;
  margin: 18px 0;
  background: var(--glass-sheen-soft), var(--glass-bg);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: var(--shadow-sm), var(--glass-highlight);
}.insta /* Auswahl der Kachel-Anordnung */
.layout-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 640px) {
.insta .layout-grid { grid-template-columns: repeat(2, 1fr); } 
}
.insta .layout-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 8px;
  background: var(--glass-sheen-soft), var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  box-shadow: var(--shadow-sm), var(--glass-highlight);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}.insta .layout-btn:hover { border-color: var(--navy); transform: translateY(-1px); }.insta .layout-btn.active { border-color: var(--navy); background: rgba(238,241,250,0.7); }.insta .layout-caption { font-size: 11px; line-height: 1.25; color: var(--gray); text-align: center; }.insta .layout-btn.active .layout-caption { color: var(--navy); font-weight: 700; }.insta /* Miniaturbild der Anordnung — dasselbe Raster wie im fertigen Post.
   Jede Kachel trägt ihre Nummer, .insta damit die Zuordnung unten klar ist. */
.layout-thumb {
  position: relative;
  display: block;
  width: 52px;
  height: 69px; /* 3:4 wie ein Beitrag (1080 × 1440) */
}.insta .layout-thumb > span {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  border-radius: 3px;
  background: var(--gray);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}.insta .layout-btn.active .layout-thumb > span { background: var(--navy); }.insta /* Kacheln einer Collage-Seite (Bild / Überschrift / Text) */
.collage-cells {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 4px;
}
@media (max-width: 640px) {
.insta .collage-cells { grid-template-columns: 1fr; } 
}
.insta .collage-cell {
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 12px;
  background: var(--glass-sheen-soft), var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: var(--shadow-sm), var(--glass-highlight);
}.insta .collage-cell-head {
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--navy);
}.insta .cell-type { gap: 6px; margin-bottom: 10px; }.insta .cell-type .seg-btn { padding: 8px 4px; font-size: 13px; }.insta .collage-cell-content textarea { min-height: 70px; }.insta /* ---------- Instagram-Banner ---------- */

.form-hint {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray);
}.insta /* Slider (z. B. Anzahl Farbverläufe beim Profilbild) */
.range-row {
  display: flex;
  align-items: center;
  gap: 16px;
}.insta .range-input {
  flex: 1;
  accent-color: var(--blue);
  cursor: pointer;
}.insta .range-value {
  min-width: 130px;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
}.insta /* Auswahl der Banner-Anordnung — breitere Schaltflächen als bei der Collage, .insta weil die Miniatur das Seitenverhältnis 3240 × 1440 zeigt. */
.banner-layouts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
}.insta /* Miniatur des Banners: dieselben Flächen wie im fertigen Bild.
   Die gestrichelten Linien zeigen, .insta wo ein Beitrag endet und der nächste beginnt. */
.banner-thumb {
  width: 168px;
  height: 75px; /* 3240 × 1440 → drei 3:4-Kacheln nebeneinander */
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 3px;
}.insta .banner-thumb > i {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 1px dashed #9AA1AE;
}.insta .banner-thumb > span { font-size: 9px; border-width: 1px; }.insta .banner-thumb .thumb-logo { background: var(--navy); border-radius: 99px; }.insta .banner-thumb .thumb-bar { background: #C7CCD6; }.insta .layout-btn.active .banner-thumb .thumb-bar { background: #A8B1C6; }.insta /* Feineinstellungen einer Anordnung (Logoseite, .insta Anzahl Fotos …) */
.banner-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 14px 0 4px;
  padding: 14px 16px;
  background: var(--glass-sheen-soft), var(--glass-bg);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  box-shadow: var(--shadow-sm), var(--glass-highlight);
}.insta .banner-control {
  display: flex;
  align-items: center;
  gap: 10px;
}.insta .banner-control-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
}.insta /* schmale Segment-Schaltflächen (nutzen die vorhandene .seg-btn-Optik, .insta nur kompakter und ohne sich über die ganze Breite zu strecken) */
.banner-control .seg { display: inline-flex; gap: 4px; }.insta .banner-control .seg-btn {
  flex: 0 0 auto;
  min-width: 42px;
  padding: 8px 14px;
  font-size: 13px;
}.insta /* Bildfelder des Banners */
.banner-cells {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
  margin-top: 4px;
}.insta .dz-compact .dropzone { min-height: 120px; }.insta .dz-compact .dropzone.filled { min-height: 150px; }.insta .dz-compact .fit-btn { font-size: 12px; padding: 6px 10px; }.insta .dz-compact .fit-label { display: none; }.insta .btn-remove {
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--red);
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}.insta .btn-remove:hover { border-color: var(--red); background: #FDF0EE; }.insta /* ---------- Buttons ---------- */

.btn-primary, .insta .btn-secondary {
  padding: 14px 26px;
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  border-radius: 10px;
  cursor: pointer;
}.insta .btn-primary {
  background: var(--navy);
  color: #fff;
  border: 2px solid var(--navy);
}.insta .btn-primary:hover { background: #24378a; }.insta .btn-primary:disabled { opacity: .6; cursor: wait; }.insta .btn-secondary {
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  backdrop-filter: blur(10px) saturate(1.3);
  color: var(--navy);
  border: 1px solid rgba(27, 42, 107, 0.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}.insta .btn-secondary:hover { background: rgba(255, 255, 255, 0.85); }.insta .btn-add { width: 100%; margin-top: 4px; }.insta .btn-link {
  background: none;
  border: none;
  padding: 6px 0;
  font: inherit;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
}.insta .btn-link:hover { text-decoration: underline; }.insta .btn-add-small { font-size: 14px; }.insta .form-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 24px;
}.insta /* ---------- Vorschau ---------- */

/* Umschalter Beitrag / Story */
.format-toggle {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 0 0 22px;
}.insta .fmt-btn {
  padding: 12px 30px;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  color: var(--navy);
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  backdrop-filter: blur(10px) saturate(1.3);
  border: 1px solid rgba(27, 42, 107, 0.35);
  border-radius: 10px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
  transition: background .15s, transform .15s, box-shadow .15s;
}.insta .fmt-btn:hover { background: rgba(255, 255, 255, 0.85); transform: translateY(-1px); box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.7); }.insta .fmt-btn.active { background: var(--navy); color: #fff; }.insta /* Hinweis über der Vorschau: Bilder sind mit der Maus verschiebbar */
.preview-hint {
  text-align: center;
  font-size: 14px;
  color: var(--gray, #6B7280);
  margin: 0 0 18px;
}.insta /* Umschalter Seitenzahlen oben in der Bearbeitungsseite */
.pagenum-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
}.insta .pagenum-label {
  font-size: 15px;
  font-weight: 800;
  color: var(--navy);
}
.insta .insta-leistungen-bar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 0 0 22px; padding: 16px 18px;
  background: #EEF1FA; border-radius: 14px;
}
.insta .insta-leistungen-hint { color: #55607a; font-size: 13.5px; max-width: 520px; }
.insta .checkbox-inline { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
.insta .checkbox-inline input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--navy); }
.insta #preview-slides {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
}.insta .preview-slide {
  display: flex;
  flex-direction: column;
  gap: 6px;
}.insta .preview-canvas {
  width: min(400px, 90vw);
  height: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
  background: #fff;
}.insta /* Handy-Ansicht des Instagram-Profils — steht allein in der ersten Zeile und
   zeigt im Hochformat, .insta wie das Banner später im Profil erscheint. */
.preview-slide-mockup { flex: 0 0 100%; align-items: center; }.insta .preview-canvas-mockup {
  width: auto;
  max-width: min(340px, 90vw);
  height: auto;
  border-radius: 14px;
}.insta /* Gesamtansicht des Instagram-Banners — nimmt die ganze Breite ein und steht
   allein in der ersten Zeile, .insta darunter folgen die drei Teilbilder. */
.preview-slide-wide { flex: 0 0 100%; }.insta .preview-canvas-wide { width: 100%; max-width: 100%; }.insta /* Die drei Teilbilder stehen nebeneinander — so sieht man schon in der
   Vorschau, .insta wie das Banner später im Profil zusammengesetzt wirkt.
   Die Breite ist an den Container gekoppelt (drei Bilder plus zwei Abstände), .insta damit immer genau drei in einer Zeile stehen. */
.preview-slide-tile { flex: 0 0 calc((100% - 48px) / 3); }.insta .preview-canvas-tile { width: 100%; }.insta .preview-slide-tile .preview-caption { font-size: 12px; gap: 8px; }.insta /* Runde Vorschau des Instagram-Profilbilds — zeigt den runden Zuschnitt. */
.preview-slide-round { align-items: center; }.insta .preview-canvas-round {
  width: min(300px, 80vw);
  border-radius: 50%;
  border: 1px solid var(--border);
}.insta /* Transparente Vorschau (PNG-Logo) auf Karomuster, damit auch ein weisses
   Logo sichtbar ist. */
.preview-canvas-checker {
  background:
    linear-gradient(45deg, #d9dce3 25%, transparent 25%, transparent 75%, #d9dce3 75%),
    linear-gradient(45deg, #d9dce3 25%, transparent 25%, transparent 75%, #d9dce3 75%),
    #fff;
  background-size: 24px 24px;
  background-position: 0 0, 12px 12px;
}.insta .preview-caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--gray);
}.insta /* ---------- Gespeicherte Wettkämpfe ---------- */

.home-top {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}.insta .comp-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}.insta .comp-header h2 { margin: 0; flex: 1 1 auto; }.insta .comp-header-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}.insta .comp-header-actions .btn-primary, .insta .comp-header-actions .btn-secondary {
  padding: 12px 18px;
  font-size: 15px;
}
@media (max-width: 640px) {
.insta .comp-header h2 { flex-basis: 100%; }.insta .comp-header-actions { width: 100%; }.insta .comp-header-actions button { flex: 1; }

}
.insta .comp-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}.insta .comp-empty {
  color: var(--gray);
  background: #fff;
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 22px;
  text-align: center;
}.insta .comp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--border);
  border-left: 6px solid var(--navy);
  border-radius: 12px;
  padding: 6px 10px 6px 0;
}.insta .comp-open {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: none;
  border: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}.insta .comp-text { display: flex; flex-direction: column; gap: 2px; }.insta .comp-name { font-weight: 800; color: var(--navy); }.insta .comp-meta { font-size: 13px; color: var(--gray); }.insta .comp-row:hover { border-color: var(--navy); }.insta /* Editor */
.comp-subhead {
  color: var(--navy);
  margin: 24px 0 8px;
  font-size: 17px;
}.insta .comp-disciplines {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 14px;
}.insta /* Editor-Aktionsleiste (oben, .insta bleibt beim Scrollen sichtbar). Nutzt die
   Optik der Haupt-Aktionsleiste; -18px hebt sie über das main-Padding. */
.comp-editbar {
  margin: -24px -20px 20px;
}.insta .comp-disc-row {
  border: 1px solid var(--border);
  border-left: 5px solid var(--blue);
  border-radius: 12px;
  padding: 14px;
  background: #FAFAFB;
}.insta .comp-disc-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}.insta .comp-disc-top {
  flex: 1;
  display: grid;
  grid-template-columns: 1.6fr 1.2fr 0.7fr;
  gap: 10px;
}
@media (max-width: 640px) {
.insta .comp-disc-top { grid-template-columns: 1fr 1fr; }

}
.insta .comp-disc-remove { align-self: flex-start; white-space: nowrap; }.insta /* Runden einer Disziplin */
.comp-rounds {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 8px;
  padding-left: 4px;
  border-left: 3px solid var(--border);
}.insta .comp-round-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding-left: 10px;
}.insta .comp-round-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1.2fr 0.7fr 0.8fr;
  gap: 10px;
}
@media (max-width: 640px) {
.insta .comp-round-grid { grid-template-columns: 1fr 1fr; }

}
.insta .comp-round-remove { align-self: flex-start; }.insta .comp-field { display: flex; flex-direction: column; }.insta .comp-field > label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--gray);
  margin-bottom: 4px;
}.insta .comp-select {
  height: 42px;
  padding: 8px 10px;
  background: #fff;
}.insta /* ---------- Dropdown-Menü (Preview + Wettkampf-Auswahl) ---------- */

.field-with-menu { position: relative; }.insta .dd-trigger {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 6px 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: var(--navy);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  z-index: 2;
}.insta .dd-trigger:hover { background: #24378a; }.insta .dd-trigger:disabled { opacity: .45; cursor: default; }.insta /* Platz für den Knopf rechts im Textfeld schaffen */
.field-with-menu .text-input { padding-right: 118px; }.insta .disc-menu-wrap { position: relative; display: flex; align-items: center; }.insta .disc-menu-wrap .text-input { padding-right: 100px; }.insta .disc-menu-wrap .dd-trigger { top: 50%; transform: translateY(-50%); }.dropdown-menu {
  position: absolute;
  z-index: 1200;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(27, 42, 107, .22);
  padding: 6px;
  max-height: 380px;
  overflow-y: auto;
  min-width: 220px;
}
.dropdown-search {
  position: sticky;
  top: 0;
  z-index: 1;
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 6px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  color: var(--navy);
  background: #fff;
}
.dropdown-search:focus { outline: none; border-color: var(--navy); }
.dropdown-list { display: flex; flex-direction: column; }
.dropdown-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: none;
  background: none;
  border-radius: 7px;
  font: inherit;
  cursor: pointer;
}.dropdown-item:hover { background: #EEF1FA; }.dropdown-item .dd-label { font-weight: 700; color: var(--navy); }.dropdown-item .dd-sub { font-size: 12px; color: var(--gray); }
/* Zweistufige Meisterschafts-Auswahl (Saison → Meisterschaft) */
.dropdown-item-nav { flex-direction: row; align-items: center; justify-content: space-between; }
.dropdown-item-nav .dd-chev { color: var(--gray); font-size: 18px; font-weight: 700; line-height: 1; }
.dropdown-head {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px 8px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.dropdown-back {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  font: inherit; font-size: 20px; font-weight: 700; line-height: 1;
  color: #fff; background: var(--navy);
  border: none; border-radius: 8px; cursor: pointer;
}
.dropdown-back:hover { background: #24378a; }
.dropdown-title { font-weight: 800; color: var(--navy); font-size: 14px; }
.dropdown-empty { padding: 12px; color: var(--gray); font-size: 13px; text-align: center; }
.insta .btn-sm-summary.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.insta /* ---------- PDF-Import-Fenster ---------- */

.import-box { max-width: 520px; text-align: left; }.insta .import-title { margin: 0 0 10px; color: var(--navy); font-size: 20px; }.insta .import-hint { margin: 0 0 16px; color: var(--gray); font-size: 14px; line-height: 1.45; }.insta .import-drop { min-height: 130px; }.insta .import-drop.filled { border-style: solid; border-color: var(--navy); background: #EEF1FA; }.insta .import-status {
  margin: 14px 0 4px;
  font-size: 14px;
  color: var(--navy);
  font-weight: 600;
}.insta .import-go:disabled { opacity: .45; cursor: default; }.insta /* ---------- Bestätigungsdialog (Löschen) ---------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
}.insta .modal-box {
  background: var(--glass-sheen), var(--glass-bg-solid);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  backdrop-filter: blur(28px) saturate(1.5);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 28px 28px 22px;
  max-width: 420px;
  width: 100%;
  box-shadow: var(--shadow-lg), var(--glass-highlight);
}.insta .modal-message {
  margin: 0 0 24px;
  font-size: 17px;
  line-height: 1.4;
  color: var(--navy);
}.insta .modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}.insta .modal-btn {
  padding: 12px 20px;
  font: inherit;
  font-weight: 700;
  border-radius: 9px;
  border: 1px solid var(--border);
  cursor: pointer;
}.insta .modal-cancel {
  background: #fff;
  color: var(--navy);
}.insta .modal-cancel:hover { background: var(--bg); }.insta .modal-confirm {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}.insta .modal-confirm:hover { filter: brightness(.93); }.insta /* ---------- Sponsoren ---------- */

/* «Sponsoren»-Schaltfläche oben rechts im Instabanner-Formular. */
.banner-topbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 6px;
}.insta .sponsors-hint {
  color: var(--gray);
  margin: 0 0 18px;
}.insta .sponsors-add { margin-bottom: 18px; }.insta .sponsor-drop { min-height: 120px; }.insta .sponsors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}.insta .sponsor-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: var(--glass-sheen), var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 18px 14px;
  box-shadow: var(--shadow-sm), var(--glass-highlight);
}.insta .sponsor-logo {
  width: 100%;
  height: 84px;
  object-fit: contain;
}.insta .sponsor-name {
  font-size: 13px;
  color: var(--gray);
  text-align: center;
  word-break: break-word;
}.insta .sponsor-del {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}.insta .sponsor-del:hover { filter: brightness(.9); }

/* Auswahlliste der neuen Vorlage «Limitenbulletin» (Etappe 5). */
.insta .lbp-auswahl { display: flex; flex-direction: column; gap: 4px; }
.insta .lbp-gtitel { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: #6B7280; margin: 12px 0 2px; }
.insta .lbp-item { text-align: left; border: 1px solid var(--glass-border); background: var(--glass-sheen-soft), var(--glass-bg-strong); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: var(--shadow-sm), var(--glass-highlight); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; }
.insta .lbp-item:hover { border-color: #2E4FB8; transform: translateY(-1px); box-shadow: var(--shadow-md), var(--glass-highlight); }
.insta .lbp-item.active { border-color: #1B2A6B; background: rgba(238,242,253,0.7); }
.insta .lbp-item .lbp-name { font-weight: 700; color: #1B2A6B; }
.insta .lbp-item.intl .lbp-name { color: #C0392B; }
.insta .lbp-item .lbp-meta { color: #6B7280; font-size: 13px; }

/* ---------- Meeting-Sponsor-Auswahl (Wettkampfflyer) ---------- */
.insta .meeting-sponsor-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.insta .meeting-sponsor-row.hidden { display: none; }
.insta .meeting-drop {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-width: 150px; min-height: 70px; padding: 8px 14px;
  border: 2px dashed var(--border); border-radius: 12px;
  background: #FAFAFB center / contain no-repeat; color: var(--gray);
  font-size: 13px; transition: border-color .15s, background-color .15s;
}
.insta .meeting-drop.dragging { border-color: var(--navy); background-color: #EEF1FA; }
.insta .meeting-drop.has-logo { border-style: solid; border-color: var(--navy); min-height: 90px; }
.insta .meeting-drop-hint { pointer-events: none; }
.insta .meeting-drop-hint.hidden { display: none; }
.insta .meeting-clear.hidden { display: none; }

/* ---------- Sammel-Vorlage «Baukasten» ---------- */
.insta .bk-pages { display: flex; flex-direction: column; gap: 14px; margin: 14px 0; }
.insta .bk-leer {
  color: var(--muted, #6B7280); font-style: italic; padding: 16px;
  border: 1px dashed var(--border); border-radius: 12px; text-align: center;
}
.insta .bk-page {
  border: 1px solid var(--border); border-left: 5px solid var(--border);
  border-radius: 12px; background: #FAFAFB; padding: 14px 16px;
}
.insta .bk-page.aktiv { border-left-color: var(--post-accent, var(--blue)); background: #fff; }
.insta .bk-page-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.insta .bk-page-head strong { color: var(--navy); }
.insta .bk-page-actions { display: flex; align-items: center; gap: 8px; }
.insta .bk-mini {
  border: 1px solid var(--border); background: #fff; border-radius: 8px;
  width: 30px; height: 30px; cursor: pointer; font-size: 15px; line-height: 1;
}
.insta .bk-mini:hover { background: #EEF1FA; }
.insta .bk-mini:disabled { opacity: .35; cursor: default; background: #fff; }
.insta .bk-page-editor { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 14px; }
.insta .bk-page-editor.hidden { display: none; }
.insta .bk-add-liste { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 4px; }
.insta .bk-add-gruppe { margin: 10px 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #6B7280); }
.insta .bk-add-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.insta .bk-add-btn {
  border: 1px solid var(--border); background: #fff; border-radius: 10px;
  padding: 12px 10px; cursor: pointer; font-weight: 600; color: var(--navy); text-align: center;
}
.insta .bk-add-btn:hover { background: #EEF1FA; border-color: var(--navy); }

/* «Seite hinzufügen»-Dialog: drei Kategorien nebeneinander (Design der
   Instagram-Übersicht). Unscoped, da das Modal direkt an <body> hängt. */
.modal-box:has(.bk-add-modal) { max-width: 760px; }
.bk-add-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 10px 0 4px; align-items: start; }
.bk-add-col {
  display: flex; flex-direction: column; gap: 10px;
  border: 2px solid var(--border, #E5E7EB); border-radius: 14px; padding: 14px;
  background: rgba(27, 42, 107, .02);
}
.bk-add-col-title {
  font-weight: 800; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--navy, #1B2A6B); padding-bottom: 8px; border-bottom: 2px solid var(--navy, #1B2A6B);
}
.bk-add-col-btns { display: flex; flex-direction: column; gap: 8px; }
.bk-add-cols .bk-add-btn {
  border: 2px solid var(--border, #E5E7EB); border-left: 6px solid var(--navy, #1B2A6B);
  background: #fff; border-radius: 10px; padding: 13px 12px; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--navy, #1B2A6B); text-align: left;
  box-shadow: 0 2px 6px rgba(27, 42, 107, .08); transition: border-color .15s, transform .15s;
}
.bk-add-cols .bk-add-btn:hover { background: #EEF1FA; border-color: var(--navy, #1B2A6B); transform: translateY(-1px); }
@media (max-width: 620px) { .bk-add-cols { grid-template-columns: 1fr; } }

/* ============================================================
   Dunkles Erscheinungsbild — Instagram-Bereich
   Die Instagram-Ansicht definiert eigene lokale Tokens (--navy, --gray,
   --border, --bg) auf «.insta»; diese ueberschreiben im Dunkelmodus die
   globalen Tokens und muessen hier ebenfalls umgedreht werden. Die Post-
   Vorschau selbst (.preview-canvas) bleibt bewusst hell — sie zeigt das
   spaeter exportierte, weisse Bild.
   ============================================================ */
:root[data-theme="dark"] .insta {
  --navy: #9DB0F2;
  --blue: #7E9BEF;
  --gray: #9AA3B8;
  --border: #3B4356;
  --bg: #10131C;
}

/* Kopf und feste helle Flaechen -> dunkle Panels/Karten. */
:root[data-theme="dark"] .insta .app-header { background: var(--panel-bg); }
:root[data-theme="dark"] .insta .dropzone,
:root[data-theme="dark"] .insta .athlete-card,
:root[data-theme="dark"] .insta .discipline-block,
:root[data-theme="dark"] .insta .comp-empty,
:root[data-theme="dark"] .insta .comp-row,
:root[data-theme="dark"] .insta .comp-disc-row,
:root[data-theme="dark"] .insta .comp-select,
:root[data-theme="dark"] .insta .fit-btn,
:root[data-theme="dark"] .insta .meeting-drop,
:root[data-theme="dark"] .insta .bk-page,
:root[data-theme="dark"] .insta .bk-mini,
:root[data-theme="dark"] .insta .bk-add-btn {
  background: rgba(255, 255, 255, 0.05);
}
:root[data-theme="dark"] .insta .bk-page.aktiv { background: rgba(255, 255, 255, 0.09); }
:root[data-theme="dark"] .insta .checkbox-field { color: var(--text-dark); }

/* Helle Glas-Pillen (Aktions-/Format-/Sekundaerknoepfe). */
:root[data-theme="dark"] .insta .ab-btn,
:root[data-theme="dark"] .insta .btn-secondary,
:root[data-theme="dark"] .insta .fmt-btn {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
}
:root[data-theme="dark"] .insta .ab-btn:hover,
:root[data-theme="dark"] .insta .btn-secondary:hover,
:root[data-theme="dark"] .insta .fmt-btn:hover { background: rgba(255, 255, 255, 0.13); }

/* Gefuellte Navy-Knoepfe: Verlauf statt hellem Navy, damit weisse Schrift traegt. */
:root[data-theme="dark"] .insta .ab-btn.ab-primary,
:root[data-theme="dark"] .insta .btn-primary,
:root[data-theme="dark"] .insta .fmt-btn.active,
:root[data-theme="dark"] .insta .dd-trigger {
  background: var(--grad-primary); border-color: transparent; color: #fff;
}
:root[data-theme="dark"] .insta .ab-btn.ab-primary:hover,
:root[data-theme="dark"] .insta .btn-primary:hover,
:root[data-theme="dark"] .insta .dd-trigger:hover { background: var(--grad-primary-hover); }

/* Getoente Hinweis-/Hover-Flaechen (waren zartblau #EEF1FA). */
:root[data-theme="dark"] .insta .dropzone:hover,
:root[data-theme="dark"] .insta .dropzone.dragging,
:root[data-theme="dark"] .insta .insta-leistungen-bar,
:root[data-theme="dark"] .insta .import-drop.filled,
:root[data-theme="dark"] .insta .meeting-drop.dragging,
:root[data-theme="dark"] .insta .bk-mini:hover,
:root[data-theme="dark"] .insta .bk-add-btn:hover { background-color: rgba(126, 155, 239, 0.14); }
:root[data-theme="dark"] .insta .insta-leistungen-hint { color: var(--muted); }
:root[data-theme="dark"] .insta .btn-remove:hover { background: rgba(240, 104, 90, 0.16); }

/* Auswahlliste «Limitenbulletin» (fest verdrahtete Hexwerte). */
:root[data-theme="dark"] .insta .lbp-gtitel,
:root[data-theme="dark"] .insta .lbp-item .lbp-meta { color: var(--muted); }
:root[data-theme="dark"] .insta .lbp-item.active { background: rgba(126, 155, 239, 0.16); border-color: var(--navy); }
:root[data-theme="dark"] .insta .lbp-item .lbp-name { color: var(--navy); }
:root[data-theme="dark"] .insta .lbp-item.intl .lbp-name { color: var(--red); }

/* Ans <body> gehaengte Menues/Dialoge (nicht unter .insta gescoped). */
:root[data-theme="dark"] .dropdown-menu { background: var(--panel-bg); border-color: var(--card-border); }
:root[data-theme="dark"] .dropdown-search {
  background: var(--panel-bg); border-color: var(--card-border); color: var(--navy);
}
:root[data-theme="dark"] .dropdown-item:hover { background: rgba(126, 155, 239, 0.14); }
:root[data-theme="dark"] .dropdown-back { background: var(--grad-primary); }
:root[data-theme="dark"] .dropdown-back:hover { background: var(--grad-primary-hover); }
:root[data-theme="dark"] .dropdown-title { color: var(--navy); }
:root[data-theme="dark"] .dropdown-item .dd-label { color: var(--navy); }
:root[data-theme="dark"] .dropdown-item .dd-sub { color: var(--muted); }
:root[data-theme="dark"] .bk-add-col { background: rgba(255, 255, 255, 0.04); border-color: var(--card-border); }
:root[data-theme="dark"] .bk-add-cols .bk-add-btn { background: rgba(255, 255, 255, 0.05); border-color: var(--card-border); color: var(--navy); }
:root[data-theme="dark"] .bk-add-cols .bk-add-btn:hover { background: rgba(126, 155, 239, 0.14); }

/* ---------- Rückblick: Abschnittsüberschriften (Titelseite / weitere Seiten) ---------- */
.insta .rb-section-title {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--post-accent, var(--navy));
  padding-bottom: 8px;
  margin: 22px 0 12px;
  border-bottom: 2px solid var(--post-accent, var(--navy));
}
.insta .rb-section-title:first-child { margin-top: 4px; }
.insta .rb-section { margin-bottom: 6px; }

/* Bildfeld verarbeitet gerade ein (grosses) Foto: kurzer Hinweis-Zustand. */
.insta .dropzone.dz-busy { opacity: .65; cursor: progress; }