/* HuddleSuite - Shared design system ("Streifen"-Layout)
 * =====================================================================
 * ONE central place for the new look of every plugin page. Everything is
 * scoped under .hs-redesign so it only affects containers we have already
 * converted - old, not-yet-converted pages keep their current styling via
 * main.css. Convert a page = wrap its output in <div class="hs-redesign"> and
 * use the band/card classes below.
 *
 * Fonts (SIL OFL) are served locally from ../fonts/ - NO Google Fonts.
 * =====================================================================
 */

/* --- Fonts (same files the Home page ships) ----------------------------- */
@font-face {
  font-family: "Archivo Black";
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/ArchivoBlack.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-weight: 100 450;
  font-display: swap;
  src: url("../fonts/Archivo-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-weight: 451 900;
  font-display: swap;
  src: url("../fonts/Archivo-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 100 450;
  font-display: swap;
  src: url("../fonts/Newsreader-Italic.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 451 900;
  font-display: swap;
  src: url("../fonts/Newsreader-SemiBoldItalic.woff2") format("woff2");
}

/* --- Design tokens (scoped, not on :root, so nothing leaks) -------------- */
.hs-redesign {
  --hs:        #FA06C6;   /* brand magenta - accent + all shadows */
  --paper:     #FFFFFF;
  --paper-2:   #DFE1E9;   /* light grey band + grey card */
  --ink:       #0B0B0D;
  --ink-soft:  #55525E;

  /* The five society colours (identical to the logo fills / Home page).
     New palette 16.07.2026 - every tone now carries BLACK text (>= 6:1).
     NOTE: the keys 'pink' and 'violet' are historic. 'pink' renders orange,
     'violet' renders lila. Renaming them needs a DB migration (color_theme
     column) - see TODO.md. The hex is the truth, the key is just a handle. */
  --c-yellow:  #FAC306;   /* unchanged */
  --c-cyan:    #0AB5FF;   /* unchanged */
  --c-pink:    #FF6613;   /* orange, was #DF306D */
  --c-green:   #60D34F;   /* was #10A248 */
  --c-violet:  #9E80E8;   /* lila, was #7F3884 */

  /* The dark violet used to double as the UI accent (links, buttons, mail
     headings). The new lila is light on purpose, so it cannot do that job -
     it would sit at 3:1 on white. Kept separate until decided. */
  --c-accent:  #0B0B0D;

  --radius:    14px;
  --outline:   2px solid var(--ink);
  --shadow:    6px 6px 0 var(--hs);

  --display:   "Archivo Black", "Segoe UI", system-ui, Arial, sans-serif;
  --body:      "Archivo", "Segoe UI", system-ui, Arial, sans-serif;
  --serif:     "Newsreader", Georgia, serif;

  /* Default tile accent - overridden per .hs-theme-* below */
  --tile:      var(--hs);

  font-family: var(--body) !important;
  color: var(--ink);
  box-sizing: border-box;
}
.hs-redesign *,
.hs-redesign *::before,
.hs-redesign *::after { box-sizing: border-box; }

/* --- Neutralise the OLD layout skin on converted pages ------------------ */
/* These come from main.css and turn the page into a narrow centred column
   with a black "public societies" box. Switched off inside .hs-redesign so we
   build on a clean, full-width surface (exactly like the Home page). */
.hs-redesign.hs-content-wrapper,
.hs-redesign .hs-content-wrapper { max-width: none; padding: 0; width: 100%; }
.hs-redesign .hs-society-overview { width: 100%; }
.hs-redesign .hs-public-societies-section {
  background: none;
  padding: 0;
  border: 0;
  border-radius: 0;
}

/* --- Bands / stripes ---------------------------------------------------- */
/* .hs-band = white stripe, .hs-band-grey = light-grey stripe. Full-width
   colour edge to edge (the page is full-width like Home); inner content is
   kept to a readable width by .hs-wrap. */
.hs-redesign .hs-band,
.hs-redesign .hs-band-grey {
  width: 100%;
  padding: 44px 0;
}
.hs-redesign .hs-band { background: var(--paper); }
.hs-redesign .hs-band-grey { background: var(--paper-2); }
.hs-redesign .hs-wrap {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Thin five-colour brand stripe (reusable divider) */
.hs-redesign .hs-stripe { display: flex; height: 10px; }

/* --- Society page: bands around the OLD modules -------------------------
   The society page is built from separate Elementor containers, one per
   shortcode. Each container carries its own band so the page alternates
   white / grey like the /huddlesociety/ overview does.

   These containers still render the main.css / events.css look INSIDE the
   band - only the surface around them changes. So the two .hs-redesign rules
   that would reach into that old look are switched back off here:
   the font override and the tinted society-page background.
   ---------------------------------------------------------------------- */
.hs-redesign.hs-society-head-band,
.hs-redesign.hs-society-events-band,
.hs-redesign.hs-society-polls-band,
.hs-redesign.hs-society-pinnwand-band,
.hs-redesign.hs-society-preview-band { font-family: inherit !important; }

/* The head box itself is white via main.css now (all pale tints were dropped
   on 16.07.2026 - "nie wieder rosa Toenungen"). The coloured header bar stays:
   that is the society's identity, not a tint. */

/* --- Member calendar: same tiles as /huddlesociety/ ---------------------
   The calendar list is built in JS (events.js renderEvents) and now emits
   .hs-ev-card, so the tile styling above applies. What is still needed:
   the grid, the font (the band above switched it off for the OLD modules),
   and the states the calendar has but the overview does not (past, cancelled,
   pending). ---------------------------------------------------------------- */
.hs-redesign.hs-society-events-band .hs-events-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
/* The tiles ARE redesign markup wherever they appear - give them the design
   font back, which the band wrappers switch off for the OLD modules. */
.hs-redesign .hs-ev-card { font-family: var(--body) !important; }
/* Only tiles that really open something look clickable. */
.hs-redesign .hs-ev-card[data-event-id] { cursor: pointer; }

/* The filter row is new markup too. The band switched the design font OFF for
   the OLD modules with `font-family: inherit !important` (line ~137), and that
   !important also beats the filters' own var(--body). Give it back - same fix
   as .hs-ev-card above - so the calendar's filters match /huddlesociety/. */
.hs-redesign.hs-society-events-band .hs-filters,
.hs-redesign.hs-society-events-band .hs-filters label,
.hs-redesign.hs-society-events-band .hs-filters select,
.hs-redesign.hs-society-events-band .hs-filters input { font-family: var(--body) !important; }

/* Head carries title + status badge side by side. */
.hs-redesign .hs-ev-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Past events stay hidden - same behaviour as the old tile. */
.hs-redesign .hs-ev-card.hs-event-past { display: none; }

/* Cancelled = the tile goes GREY, head included (Nicole, 30.07.2026: the
   palette colours are alive, a dead date must not wear one). The status
   itself is carried by the red ABGESAGT pill + strikethrough - so the grey
   replaces the old pink tint, it does not replace the signal. Head grey is
   darker than the body grey on purpose: same light-from-above logic as the
   coloured tiles, and black text stays well readable on it. */
.hs-redesign .hs-ev-card.hs-event-cancelled { cursor: default; --tile: #B9BCC6; }
.hs-redesign .hs-ev-card.hs-event-cancelled .hs-ev-when,
.hs-redesign .hs-ev-card.hs-event-cancelled .hs-ev-info,
.hs-redesign .hs-ev-card.hs-event-cancelled .hs-ev-details { background: var(--paper-2); }
.hs-redesign .hs-ev-card.hs-event-cancelled .hs-ev-head h3 { text-decoration: line-through; }

/* The ABGESAGT badge as a PILL (Nicole, 30.07.2026) - same recipe as the
   DEMO/GAST pills above, only red: danger stays red, never grey. Overrides
   the square events.css look inside the redesign. margin-top 0: the flex
   head centres it, the old 6px pushed it off-axis. */
.hs-redesign .hs-event-status-badge.hs-event-status-cancelled {
  flex: none; background: #dc3232; color: #fff;
  font-family: var(--body) !important; font-weight: 700;
  font-size: 11px; letter-spacing: .12em; line-height: 1;
  padding: 4px 9px; border-radius: 999px; margin-top: 0;
}

/* --- Kommerzielle Anbieter (Nicole, 30.07.2026) -------------------------
   Markante Unterscheidung auf den OEFFENTLICHEN Flaechen: schwarzer
   STREIFEN + graue Kachel-Fuellung statt weiss.
   Der Header behaelt seine Palettenfarbe - das unterscheidet kommerziell
   (Header bunt) sichtbar von abgesagt (Header grau + rote Pille +
   Durchstreichung). Innerhalb der eigenen Society erscheint nichts davon:
   die internen Kalender-Queries selektieren is_commercial gar nicht.

   Seit 08.08.2026 ein STREIFEN statt der runden Pille (Nicole): er laeuft
   ueber die volle Breite direkt unter dem Kopf und ersetzt dort die
   Trennlinie. Dieselbe Stelle auf Event- UND Society-Kachel - die Society-
   Kachel ist komplett eingefaerbt und hat keine ruhige weisse Flaeche, auf
   der ein Streifen sonst irgendwo liegen koennte.

   Im Streifen steht, WAS FUER EINES das ist: DEMO, KOMMERZIELL oder beides
   (mit " · " verbunden). Der STATUS bleibt eine Pille im Kopf (ABGESAGT,
   GAST) - Art und Zustand sind zwei verschiedene Aussagen. */
.hs-redesign .hs-ev-tag-strip,
.hs-redesign .hs-soc-tag-strip,
.hs-redesign .hs-head-tag-strip {
  background: var(--ink); color: #fff;
  font-family: var(--body) !important; font-weight: 700;
  font-size: 11px; letter-spacing: .12em; line-height: 1;
  padding: 7px 18px; text-align: center;
}
/* Im grossen Society-Kopf traegt der Streifen etwas mehr Gewicht - er sitzt
   dort unter einer 40px-Ueberschrift, nicht unter einer Kachelzeile. */
.hs-redesign .hs-head-tag-strip { font-size: 12px; padding: 8px 18px; }

/* "NUR FUER DICH" auf allem, was ein Besucher in der Demo nur im eigenen
   Browser anlegt (sessionStorage, Mitspiel-Modus): gleiche Optik wie die
   Art-Streifen - es IST eine Art-Aussage ("das hier ist deins, nicht echt").
   Sitzt in Event-Kacheln an der Streifen-Stelle, in Umfrage-Karten und
   Pinnwand-Posts oben als erste Zeile. */
.hs-redesign .hs-local-strip {
  background: var(--ink); color: #fff;
  font-family: var(--body) !important; font-weight: 700;
  font-size: 11px; letter-spacing: .12em; line-height: 1;
  padding: 7px 18px; text-align: center;
}

/* Der Streifen IST die Trennung - die 2px-Linie darueber entfaellt, sonst
   traegt der Kopf eine Kante gegen eine gleichfarbige Flaeche. :has() statt
   einer Zustandsklasse, damit die Regel automatisch fuer jeden Grund gilt,
   aus dem ein Streifen entsteht. Wo :has() fehlt (sehr altes Safari), bleibt
   nur die schwarze Linie auf schwarzem Grund stehen - unsichtbar. */
.hs-redesign .hs-ev-card:has(> .hs-ev-tag-strip) .hs-ev-head,
.hs-redesign .hs-soc-card:has(> .hs-soc-tag-strip) .hs-soc-head,
.hs-redesign .hs-society-page:has(> .hs-head-tag-strip) .hs-society-header { border-bottom: 0; }

/* Der Ort in der Event-Kachel steht fett (Nicole, 08.08.2026) - gleiche
   Schrift, nur mehr Gewicht. */
.hs-redesign .hs-ev-info .hs-ev-place { font-weight: 700; }
/* Kommerzielle Event-Kacheln wieder WEISS (Nicole, 23.09.2026): das helle
   Grau gehoert jetzt der Demo. Kennzeichen bleibt der schwarze Streifen
   KOMMERZIELL. Die grauen Flaechen (30.07.) auch auf der eigenen Seite
   (.hs-soc-commercial) sind deshalb raus. */
/* DEMO IN GRAU (Nicole, 23.09.2026): the showcase steps back - head grey via
   color_attr() (Demo_Seeder::TILE_HEX), the white areas a light grey. */
.hs-redesign .hs-ev-card[data-demo="1"] .hs-ev-when,
.hs-redesign .hs-ev-card[data-demo="1"] .hs-ev-info,
.hs-redesign .hs-ev-card[data-demo="1"] .hs-ev-details { background: #DFE1E9; }

/* Impressum-Zeile kommerzieller Anbieter (fuer Besucher UND Mitglieder).
   Dezent: kleiner Text, keine Box. Seit 08.08.2026 steht sie als LETZTER
   weisser Streifen am Seitenende (Nicole) - .hs-impressum-band bringt die
   Luft dafuer mit; direkt unter der Kachel klebte sie vorher am Rand. */
.hs-redesign .hs-society-impressum,
.hs-society-impressum {
  max-width: 80ch; margin: 14px auto 0; padding: 0 18px;
  font-size: 13px; line-height: 1.5; color: #55525E;
  text-align: center; /* einzeilig unter der zentrierten Kachel (Nicole, 30.07.) */
}
.hs-redesign.hs-impressum-band .hs-band { padding: 26px 0 34px; }
.hs-redesign.hs-impressum-band .hs-society-impressum { margin-top: 0; }

/* The non-member preview brought its own grey box (events.css) - inside the
   grey band that would be grey on grey, in two slightly different greys. The
   band owns the surface now, so the box steps back. */
.hs-redesign.hs-society-preview-band .hs-society-public-events {
  background: none;
  padding: 0;
  border-radius: 0;
  margin-top: 0;
}

/* Phones: one tile per row, like the overview. */
@media (max-width: 760px) {
  .hs-redesign.hs-society-events-band .hs-events-list { grid-template-columns: 1fr; }
}

/* The calendar carried its OWN grey box (#E1E3EB) + 20px padding from events.css
   - a second, slightly different grey sitting inside the band's grey (#DFE1E9),
   and the padding pushed its content out of line with the head above it (Nicole,
   17.07.2026). Inside the band the .hs-wrap already owns width + alignment, so
   the calendar steps back and becomes flush - same move as the preview box. */
.hs-redesign.hs-society-events-band .hs-events-calendar {
  background: none;
  padding: 0;
}

/* Top bar: section heading on the left, "Event vorschlagen" hard right
   (Nicole, 17.07.2026). One row on desktop, stacks on phones. */
.hs-redesign.hs-society-events-band .hs-events-topbar {
  display: flex; align-items: center; justify-content: space-between;
  /* Halved gap to the filters below (Nicole, 19.07.2026 - less scrolling
     to the first event, especially on phones). */
  flex-wrap: wrap; gap: 14px; margin: 0 0 10px;
}
.hs-redesign.hs-society-events-band .hs-events-heading {
  font-family: var(--display) !important;
  text-transform: uppercase; letter-spacing: .02em;
  font-size: 24px; color: var(--ink); margin: 0;
}
.hs-redesign.hs-society-events-band .hs-events-actions { margin: 0; }

/* Subscription links: larger, no underline, with a plain black calendar icon
   (Nicole, 17.07.2026). The band-scoped selectors + !important beat the older
   underlined grey rule in events.css. */
.hs-redesign.hs-society-events-band .hs-events-ical { font-size: 15px; margin-top: 24px; }
.hs-redesign.hs-society-events-band .hs-events-ical-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 700;
  color: var(--ink) !important; text-decoration: none !important;
}
.hs-redesign.hs-society-events-band .hs-events-ical-link:hover {
  color: var(--hs) !important; text-decoration: none !important;
}
.hs-redesign.hs-society-events-band .hs-ical-icon { flex: 0 0 auto; }

/* "Seit deinem letzten Besuch": BLACK bar in the society head band, under
   the invite row (Nicole, 18.07.2026 - "schwarz ist nie verkehrt"). It is
   only ever there for a moment, so it may speak up. Every entry is a WORD
   LINK to its module - white, underlined, hover magenta (readable on black).
   Out-specifies the yellow main.css box. */
.hs-redesign.hs-society-head-band .hs-whats-new {
  background: var(--ink);
  border: none;
  /* Rundeck statt Rechteck (Nicole, 03.08.2026) - gleiche Rundung wie die
     Kacheln (--radius). Gilt ueberall, wo die Leiste auftaucht; die
     HUDDLE-IN-Seite baut ihren News-Kasten im selben Rezept. */
  border-radius: var(--radius);
  justify-content: center;
  align-items: center;
  margin: 16px 0 0;
  padding: 12px 14px;
  font-family: var(--body) !important;
  font-size: 14px;
  color: var(--paper);
}
.hs-redesign.hs-society-head-band .hs-whats-new strong { color: var(--paper); }
.hs-redesign.hs-society-head-band a.hs-whats-new-link {
  color: var(--paper) !important;
  font-weight: 700;
  text-decoration: underline !important;
}
.hs-redesign.hs-society-head-band a.hs-whats-new-link:hover {
  color: var(--hs) !important;
}
.hs-redesign.hs-society-events-band .hs-events-ical-help summary,
.hs-redesign.hs-society-events-band .hs-events-ical-help p { font-size: 14px; }

/* --- Terminfindung band: white stripe + CI (Nicole, 17.07.2026, Punkt 6) ----
   The polls module predates the design system: grey box, pastel tints, rounded
   1px hairlines, old-palette colours with white text. It now lives in a WHITE
   band, so every one of those has to answer to the CI instead:
     - the module's own grey box steps back; the band owns the surface
     - cards get the 4px black outline of .hs-ev-card, dividers 2px (thinner
       than the outline - Nicole's rule)
     - fields are square (border-radius: 0), like the modals since 1.0.56
   Kept coloured on purpose: badges, "best option", result note and the
   Yes/Maybe/No buttons. Those carry MEANING, not decoration - whitening them
   would delete information. They are only pulled onto the NEW palette, where
   every tone carries black text.
   ---------------------------------------------------------------------- */

/* The module's grey box (#E1E3EB) would sit as a second surface inside the
   white band. Same step-back as .hs-events-calendar above. */
.hs-redesign.hs-society-polls-band .hs-polls-section {
  background: none;
  padding: 0;
  border-radius: 0;
}

/* The whole module speaks Archivo (Nicole, 18.07.2026: option dates, counts,
   voters etc. were still theme font). The band wrapper's inherit-switch was
   for modules with the OLD look inside - polls and pinnwand are fully
   redesigned by now, so they get the body font back WHOLESALE. Display-font
   elements keep their own (element-direct) rules. Buttons need it said
   explicitly - fonts do not inherit into <button> - but the real black
   .hs-btn keep their own skin. */
.hs-redesign.hs-society-polls-band .hs-polls-section,
.hs-redesign.hs-society-pinnwand-band .hs-pinnwand-section {
  font-family: var(--body) !important;
}
.hs-redesign.hs-society-polls-band .hs-polls-section button:not(.hs-btn),
.hs-redesign.hs-society-pinnwand-band .hs-pinnwand-section button:not(.hs-btn) {
  font-family: var(--body) !important;
}

/* Heading left, both "new poll" buttons hard right - one row, like the events
   band. Stacks on phones. */
.hs-redesign.hs-society-polls-band .hs-polls-topbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px; margin: 0 0 20px;
}
.hs-redesign.hs-society-polls-band .hs-polls-title {
  font-family: var(--display) !important;
  text-transform: uppercase; letter-spacing: .02em;
  font-size: 24px; color: var(--ink); margin: 0;
}
.hs-redesign.hs-society-polls-band .hs-polls-actions { margin: 0; gap: 10px; }

/* Cards: the outline IS the card now that the grey box is gone. Filled with
   the stripe grey (Nicole, 18.07.2026: "entlastet das Auge") - same recipe as
   the modals: grey surface, white fields. */
.hs-redesign.hs-society-polls-band .hs-poll,
.hs-redesign.hs-society-polls-band .hs-poll-form {
  background: var(--paper-2);
  border: 4px solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
}
.hs-redesign.hs-society-polls-band .hs-poll-form { padding: 16px; }
.hs-redesign.hs-society-polls-band .hs-polls-list { gap: 18px; }

/* Card head in the SOCIETY COLOUR (Nicole, 18.07.2026 - "Grau oder Farbe,
   deine Entscheidung": colour, like the event tiles' heads; grey-on-grey
   would mush). Every palette tone carries black text. Out-specifies the
   white .hs-theme-* paint in polls.css. */
.hs-redesign.hs-society-polls-band .hs-poll-header {
  background: var(--tile);
  border-bottom: 2px solid var(--ink);
  padding: 12px 14px;
}
.hs-redesign.hs-society-polls-band .hs-poll-card-title {
  font-family: var(--display) !important;
  text-transform: uppercase; letter-spacing: .04em;
  font-size: 18px; color: var(--ink);
}
/* Grey date would drown on the coloured head - black like everything else. */
.hs-redesign.hs-society-polls-band .hs-poll-date {
  color: var(--ink);
}

/* Description = Fließtext (Nicole, 18.07.2026): the band wrapper switches
   the design font OFF for the old module, so the body font has to be pulled
   back in here - same move as .hs-ev-card. */
.hs-redesign.hs-society-polls-band .hs-poll-description {
  font-family: var(--body) !important;
  font-size: 15px;
  color: var(--ink);
}

/* Fields: square + black, matching the modals. !important beats Astra's input
   skin as well as polls.css's own 1px/6px rule. */
.hs-redesign.hs-society-polls-band .hs-poll-form input[type="text"],
.hs-redesign.hs-society-polls-band .hs-poll-form textarea,
.hs-redesign.hs-society-polls-band .hs-poll-option-row .hs-poll-option-input,
.hs-redesign.hs-society-polls-band .hs-poll-edit-form input,
.hs-redesign.hs-society-polls-band .hs-poll-edit-form textarea,
.hs-redesign.hs-society-polls-band .hs-poll-opt-add-form input {
  font-family: var(--body) !important;
  background: var(--paper) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 0 !important;
  color: var(--ink) !important;
}

/* Manage actions top right: WORD links, stacked (Nicole, 18.07.2026 -
   pencil/red-x icons fought the coloured head). The !important battle is
   against polls.css, which styles .hs-poll-delete as a red x button. */
.hs-redesign.hs-society-polls-band .hs-poll-head-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex: 0 0 auto;
}
.hs-redesign.hs-society-polls-band a.hs-poll-edit,
.hs-redesign.hs-society-polls-band a.hs-poll-delete {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-family: var(--body) !important;
  font-size: 13px !important;
  font-weight: 700;
  color: var(--ink) !important;
  text-decoration: underline !important;
  cursor: pointer;
}
.hs-redesign.hs-society-polls-band a.hs-poll-edit:hover,
.hs-redesign.hs-society-polls-band a.hs-poll-delete:hover {
  color: var(--hs) !important;
}

/* Edit form: its own strip under the coloured head. */
.hs-redesign.hs-society-polls-band .hs-poll-edit-form {
  padding: 12px 14px;
  border-bottom: 2px solid var(--ink);
}
.hs-redesign.hs-society-polls-band .hs-poll-edit-form input,
.hs-redesign.hs-society-polls-band .hs-poll-edit-form textarea {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 8px;
}

/* "+ Termin/Antwort hinzufügen" under the option rows, closed off by a black
   line (Nicole, 18.07.2026) - 2px, thinner than the 4px outline, like the
   head divider. */
.hs-redesign.hs-society-polls-band .hs-poll-add-opt {
  padding: 0 14px 12px;
  border-bottom: 2px solid var(--ink);
}
.hs-redesign.hs-society-polls-band .hs-poll-add-opt .hs-poll-opt-add-toggle {
  color: var(--ink) !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline !important;
}
.hs-redesign.hs-society-polls-band .hs-poll-add-opt .hs-poll-opt-add-toggle:hover {
  color: var(--hs) !important;
}
.hs-redesign.hs-society-polls-band .hs-poll-opt-add-form { margin-top: 8px; }
.hs-redesign.hs-society-polls-band .hs-poll-opt-add-form input { margin-right: 8px; }

/* Option rows, Nicole's sketch (18.07.2026): date | checkbox | bar | count.
   The BAR carries the result now - no boxes around the rows, no yes/maybe/no
   buttons. The leading option's bar is green (meaning, not decoration). */
.hs-redesign.hs-society-polls-band .hs-poll-option {
  border: none;
  border-radius: 0;
  padding: 4px 0;
}
.hs-redesign.hs-society-polls-band .hs-poll-option.hs-poll-best {
  border: none;
  background: none;
  box-shadow: none;
}
.hs-redesign.hs-society-polls-band .hs-poll-optrow {
  display: grid;
  /* date | checkbox | bar (capped) | count | "Termin festlegen" flush right.
     Cap 640px = Nicole's "um ein Drittel verlängern" (18.07.2026) on the
     480px cut, which was "um 60%" on the first 300px cut.

     The date column must NOT depend on its own text (Nicole, 26.07.2026):
     every row is its own grid, so max-content made each row measure its own
     label - "Do, 23.07." is wider than "Fr, 24.07." and every bar started at
     a different x. A width derived from the row's own width instead is
     identical for all rows, so the bars line up. Text polls (free-form
     answers) benefit most: max-content used to push their bars far right. */
  grid-template-columns: clamp(160px, 27%, 16em) auto minmax(90px, 640px) auto 1fr;
  align-items: center;
  gap: 14px;
}
/* The time is not bold - only the date carries weight (Nicole, 18.07.2026). */
.hs-redesign.hs-society-polls-band .hs-poll-option-date .hs-poll-time {
  font-weight: 400;
}
.hs-redesign.hs-society-polls-band .hs-poll-check {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--ink);
  cursor: pointer;
}
.hs-redesign.hs-society-polls-band .hs-poll-bar-track {
  display: block;
  /* Nicole's old presentation-designer rule: bar height > bar spacing. */
  height: 40px;
}
/* White bars on the grey card - the modal recipe (grey surface, white
   fields). The leader stays green. */
.hs-redesign.hs-society-polls-band .hs-poll-bar {
  display: block;
  height: 100%;
  background: var(--paper);
  border: 2px solid var(--ink);
  box-sizing: border-box;
  transition: width .25s;
  /* Depth (Nicole, 18.07.2026): HER PowerPoint shadow - soft, transparent,
     fading out. Deliberately the ONLY shadow on the site ("wenn einen, dann
     meinen"); do not "correct" it into a hard offset, that was rejected. */
  box-shadow: 4px 4px 7px rgba(11, 11, 13, 0.35);
}
/* 0 votes: no sliver of empty frame, no floating shadow. */
.hs-redesign.hs-society-polls-band .hs-poll-bar.hs-bar-zero { border: none; box-shadow: none; }
.hs-redesign.hs-society-polls-band .hs-poll-best .hs-poll-bar {
  background: var(--c-green);
}
.hs-redesign.hs-society-polls-band .hs-poll-yes-count {
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  min-width: 1.5em;
}
/* "Termin festlegen": underlined word link behind the number, flush right
   (Nicole, 18.07.2026: "nicht als Button"). The !important battle is against
   polls.css, which paints .hs-poll-pick-btn as a black button. */
.hs-redesign.hs-society-polls-band .hs-poll-option-go {
  text-align: right;
}
.hs-redesign.hs-society-polls-band a.hs-poll-pick-btn {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: var(--ink) !important;
  font-size: 13px !important;
  font-weight: 400; /* Nicole 18.07.2026: nicht fett */
  text-decoration: underline !important;
  cursor: pointer;
}
.hs-redesign.hs-society-polls-band a.hs-poll-pick-btn:hover {
  color: var(--hs) !important;
}
/* Small red x per option: prunes ONE date on a tie (Nicole, 18.07.2026). */
.hs-redesign.hs-society-polls-band .hs-poll-opt-delete {
  color: #cc0000 !important;
  text-decoration: none !important;
  font-weight: 700;
  font-size: 16px;
  margin-left: 12px;
}
.hs-redesign.hs-society-polls-band .hs-poll-opt-delete:hover {
  color: var(--hs) !important;
}

/* Phones: the date gets its own line; checkbox, bar, count and link below.
   Bars stay flat here - the 40px height is a desktop rule, on the phone it
   would only cost scroll height. */
@media (max-width: 600px) {
  .hs-redesign.hs-society-polls-band .hs-poll-optrow {
    grid-template-columns: auto 1fr auto auto;
    gap: 10px;
  }
  .hs-redesign.hs-society-polls-band .hs-poll-optrow .hs-poll-option-date {
    grid-column: 1 / -1;
  }
  .hs-redesign.hs-society-polls-band .hs-poll-bar-track {
    height: 20px;
  }
}

/* "Wer hat abgestimmt?" carries the card grey too (Nicole, 18.07.2026) -
   polls.css paints the toggle white and the section off-white. Text black
   and NOT bold (Nicole, Details-Runde). */
.hs-redesign.hs-society-polls-band .hs-poll-voters-toggle,
.hs-redesign.hs-society-polls-band .hs-poll-voters-section {
  background: var(--paper-2) !important;
}
.hs-redesign.hs-society-polls-band .hs-poll-voters-toggle {
  color: var(--ink) !important;
  font-weight: 400 !important;
}
.hs-redesign.hs-society-polls-band .hs-poll-voters-toggle:hover {
  background: #d2d4dd !important;
}

/* Details round (Nicole, 18.07.2026): address line black; close link black,
   bold, flush LEFT. */
.hs-redesign.hs-society-polls-band .hs-poll-location {
  color: var(--ink) !important;
}
.hs-redesign.hs-society-polls-band .hs-poll-footer {
  justify-content: flex-start;
  /* A touch of air below the 2px line above (Nicole, 18.07.2026). */
  padding-top: 10px;
}
.hs-redesign.hs-society-polls-band .hs-poll-close-btn {
  color: var(--ink) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}
.hs-redesign.hs-society-polls-band .hs-poll-close-btn:hover {
  color: var(--hs) !important;
}

/* Status badge ("Abstimmung läuft" etc.) flush right, on the same edge as
   the red close X (Nicole, 18.07.2026). Absolute against the header; on
   phones it stays in the text flow - the header is too narrow for both. */
@media (min-width: 601px) {
  .hs-redesign.hs-society-polls-band .hs-poll-header {
    position: relative;
  }
  .hs-redesign.hs-society-polls-band .hs-poll-badge {
    position: absolute;
    right: 14px;
    bottom: 12px;
  }
}

/* Both "new" buttons under the list (Nicole, 18.07.2026). */
.hs-redesign.hs-society-polls-band .hs-polls-actions-bottom {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

/* Status: NO pill (it fought the coloured head once the manage links moved
   in) - plain words on the colour, Archivo Black, and "Abstimmung läuft"
   BLINKS (Nicole, 18.07.2026). */
.hs-redesign.hs-society-polls-band .hs-poll-badge {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-family: var(--display) !important;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 13px;
  color: var(--ink) !important;
}
.hs-redesign.hs-society-polls-band .hs-poll-badge-open {
  animation: hs-badge-blink 1.4s ease-in-out infinite;
}
@keyframes hs-badge-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .15; }
}
/* Somebody who asked their system for calm gets calm. */
@media (prefers-reduced-motion: reduce) {
  .hs-redesign.hs-society-polls-band .hs-poll-badge-open { animation: none; }
}
.hs-redesign.hs-society-polls-band .hs-poll-result {
  border-radius: 0;
  border: 2px solid var(--ink);
  background: var(--c-green);
  color: var(--ink);
}

/* Phones: heading over the buttons, buttons full width. */
@media (max-width: 760px) {
  .hs-redesign.hs-society-polls-band .hs-polls-topbar {
    flex-direction: column; align-items: stretch; gap: 12px;
  }
  .hs-redesign.hs-society-polls-band .hs-polls-actions { justify-content: stretch; }
  .hs-redesign.hs-society-polls-band .hs-polls-actions .hs-btn { flex: 1; }
}

/* --- Pinnwand band: GREY stripe + CI (Nicole, 18.07.2026, Punkt 7) ----------
   Same recipe as the polls band, one flip: the page alternates white/grey
   (head white, events grey, polls white), so the pinnwand sits in a GREY
   band - and on grey the cards are WHITE (the band/card alternation rule
   further down: grey band -> white card; grey cards here would mush into
   the band). Everything else is the polls playbook:
     - the module's own grey box steps back; the band owns the surface
     - cards get the 4px black outline, head in the SOCIETY colour (black
       text on every palette tone), dividers 2px (thinner than the outline)
     - fields square white with 2px black border, like the modals
     - manage action on the coloured head = WORD link, not an icon
   ---------------------------------------------------------------------- */

/* The module's grey box (#E1E3EB) would sit as a second grey inside the grey
   band. Same step-back as .hs-events-calendar / .hs-polls-section. */
.hs-redesign.hs-society-pinnwand-band .hs-pinnwand-section {
  background: none;
  padding: 0;
  border-radius: 0;
}

/* Section heading like the other bands: Archivo Black, uppercase, 24px. */
.hs-redesign.hs-society-pinnwand-band .hs-pinnwand-title {
  font-family: var(--display) !important;
  text-transform: uppercase; letter-spacing: .02em;
  font-size: 24px; color: var(--ink); margin: 0 0 20px;
}

/* Cards: white on the grey band, 4px black outline. The form is a card too
   (it always sits open on top - the pinnwand invites writing). */
.hs-redesign.hs-society-pinnwand-band .hs-board-post,
.hs-redesign.hs-society-pinnwand-band .hs-pinnwand-form {
  background: var(--paper);
  border: 4px solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
}
/* The write-a-post form carries the SOCIETY COLOUR as its surface (Nicole,
   18.07.2026) - the pinnwand's "head", inviting like the coloured post heads.
   Every palette tone carries black text. */
.hs-redesign.hs-society-pinnwand-band .hs-pinnwand-form {
  background: var(--tile);
  padding: 16px;
  margin-bottom: 18px;
}
.hs-redesign.hs-society-pinnwand-band .hs-pinnwand-list { gap: 18px; }

/* Card head in the SOCIETY colour, like the poll heads - grey-on-grey would
   mush. Out-specifies the white .hs-theme-* paint in pinnwand.css (3 classes
   vs 2). Every palette tone carries black text. */
.hs-redesign.hs-society-pinnwand-band .hs-board-post-header {
  background: var(--tile);
  border-bottom: 2px solid var(--ink);
  padding: 12px 14px;
}
.hs-redesign.hs-society-pinnwand-band .hs-board-post-title {
  font-family: var(--display) !important;
  text-transform: uppercase; letter-spacing: .04em;
  font-size: 18px; color: var(--ink);
  margin-bottom: 2px;
}
.hs-redesign.hs-society-pinnwand-band .hs-board-post-author {
  color: var(--ink);
}
/* Grey date would drown on the coloured head - black like everything else. */
.hs-redesign.hs-society-pinnwand-band .hs-board-post-date {
  color: var(--ink);
}

/* Delete on the coloured head: WORD link (Nicole's polls decision: icons
   fight the coloured head - the JS writes "Beitrag löschen" now). The
   !important battle is against pinnwand.css's red-x button rule. */
.hs-redesign.hs-society-pinnwand-band .hs-board-post-delete {
  font-family: var(--body) !important;
  font-size: 13px !important;
  font-weight: 700;
  color: var(--ink) !important;
  text-decoration: underline !important;
  white-space: nowrap;
  cursor: pointer;
}
.hs-redesign.hs-society-pinnwand-band .hs-board-post-delete:hover {
  color: var(--hs) !important;
}

.hs-redesign.hs-society-pinnwand-band .hs-board-post-content {
  padding: 12px 14px;
  color: var(--ink);
  /* Fließtext, like the poll description - the band wrapper switched the
     design font off for the old module. */
  font-family: var(--body) !important;
  font-size: 15px;
}

/* Comments toggle: black words on the white card, 2px divider above
   (thinner than the 4px outline). Hover magenta, no grey wash. */
.hs-redesign.hs-society-pinnwand-band .hs-board-comments-toggle {
  border-top: 2px solid var(--ink) !important;
  color: var(--ink) !important;
  font-weight: 700;
}
.hs-redesign.hs-society-pinnwand-band .hs-board-comments-toggle:hover {
  background: none !important;
  color: var(--hs) !important;
}

/* Comments section: the modal recipe (grey surface, white fields). */
.hs-redesign.hs-society-pinnwand-band .hs-board-comments-section {
  border-top: 2px solid var(--ink);
  background: var(--paper-2);
}
/* Comment boxes: plain white, NO frame (Nicole, 18.07.2026) - they are
   content, not fields. Only the write field below keeps its outline. */
.hs-redesign.hs-society-pinnwand-band .hs-board-comment-body {
  border: none;
  border-radius: 0;
  background: var(--paper);
}
.hs-redesign.hs-society-pinnwand-band .hs-board-comment-date {
  color: var(--ink);
}

/* Fields: square + black, matching the modals. !important beats Astra's
   input skin as well as pinnwand.css's own 1px/6px rule. */
.hs-redesign.hs-society-pinnwand-band .hs-pinnwand-form input[type="text"].hs-pinnwand-title-input,
.hs-redesign.hs-society-pinnwand-band .hs-pinnwand-form textarea,
.hs-redesign.hs-society-pinnwand-band .hs-board-add-comment textarea {
  font-family: var(--body) !important;
  background: var(--paper) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 0 !important;
  color: var(--ink) !important;
}

/* TEXT fields are plain white without a frame - only the Thema field keeps
   its outline (Nicole, 18.07.2026; comment field joined 19.07.2026 - the
   Freitext rule). Same specificity as the field rule above, later -> wins. */
.hs-redesign.hs-society-pinnwand-band .hs-pinnwand-form textarea,
.hs-redesign.hs-society-pinnwand-band .hs-board-add-comment textarea {
  border: none !important;
}

/* Empty / loading notes: black on the band, not grey. */
.hs-redesign.hs-society-pinnwand-band .hs-pinnwand-empty,
.hs-redesign.hs-society-pinnwand-band .hs-pinnwand-loading {
  color: var(--ink);
}

/* --- NEWS ticker (Nicole, 17.07.2026) ---------------------------------------
   Plain running line, no box, no chip, no border - just the text scrolling in
   the width of the head (the .hs-wrap around it caps that at 1080px). Two
   identical copies in the track let the loop (translateX -50%) run seamlessly.
   Pauses on hover; honours reduced-motion. */
.hs-redesign .hs-news-ticker {
  overflow: hidden;
  padding: 6px 0;   /* equal top/bottom so the ticker's own box is symmetric */
  margin: 0;
}
.hs-redesign .hs-news-ticker-track {
  display: inline-flex; white-space: nowrap; will-change: transform;
  animation: hs-news-scroll 40s linear infinite;
}
.hs-redesign .hs-news-ticker:hover .hs-news-ticker-track { animation-play-state: paused; }
.hs-redesign .hs-news-ticker-item {
  flex: 0 0 auto; padding-right: 56px;
  font-family: var(--body); font-size: 16px; color: var(--ink);
}
.hs-redesign .hs-news-ticker-item b { font-family: var(--display); }
/* Ticker variant INSIDE the coloured head box (moved there 17.07.2026, into
   the spot the Abmelden button vacated). The base rules above already fit -
   black text works on every society colour since the new palette. Only the
   breathing room under the h1 is new. */
.hs-redesign .hs-head-news {
  margin-top: 6px;
}

@keyframes hs-news-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .hs-redesign .hs-news-ticker-track { animation: none; }
}

/* --- Phantom gaps from wpautop (Nicole, 17.07.2026) --------------------------
   The society page places its shortcodes inside Elementor "Text" widgets. A
   shortcode that returns nothing - e.g. the deprecated, now-silent
   [huddlesuite_society_description] - is still wrapped by WordPress in an empty
   <p></p>, and block shortcodes leave one too (a <div> inside a <p> makes the
   browser close the <p> early). Those empty paragraphs carry the theme's default
   paragraph margin and show up as a phantom gap (the space above the ticker).
   Collapse them - an empty paragraph is never intentional content.

   Two forms occur: a truly empty <p></p> (one silent shortcode on its own
   line), and a <p><br></p> (two silent shortcodes on consecutive lines - wpautop
   joins them with a <br>, then do_shortcode empties both). The :has() rule
   catches the second, which :empty cannot. A paragraph whose only child is a
   <br> is always wpautop cruft, never real content. */
.elementor-widget-text-editor p:empty,
.elementor-widget-text-editor p:has(> br:only-child) { display: none; margin: 0; }

/* Hiding the empty <p> is not enough: the Elementor Text WIDGET box still
   reserves its own space. When a widget's only content is such a silent
   shortcode (e.g. the visitor-only [huddlesuite_society_events] preview seen by
   a logged-in member), collapse the whole widget so no phantom band remains. */
.elementor-widget-text-editor:has(> .elementor-widget-container > p:only-child:empty),
.elementor-widget-text-editor:has(> .elementor-widget-container > p:only-child > br:only-child) {
  display: none;
}

/* =====================================================================
   MODALS - the shared shell (Nicole, 17.07.2026)
   ---------------------------------------------------------------------
   Every frontend modal uses the same markup (.hs-modal-content > header /
   body / footer), so ONE block re-skins all of them. Scoped to .hs-redesign
   on purpose: the WP-admin modals (templates/admin/*) live outside it and
   keep the old main.css look.

   Everything below hangs off .hs-modal-CONTENT, never off .hs-modal. That is
   deliberate: it lets a modal carry `hs-redesign` on its OWN outer div, which is
   how the modals on the manage page (?admin=1) get the new look without their
   page being converted. Anchor a rule to `.hs-redesign .hs-modal ...` and it
   dies on exactly those modals, because there .hs-redesign IS the .hs-modal.

   The spec, in Nicole's words:
     - surface = Streifengrau, fields = white (a field must stand OUT)
     - NO outline (a modal is not a tile - the dark overlay separates it)
     - dividers = 2px black, exactly like the lines inside a tile
     - heading 18px caps - the same size as a tile title
     - small black x, everything tighter, mobile first
   ===================================================================== */
.hs-redesign .hs-modal-content {
  background: var(--paper-2);
  border-radius: var(--radius);
  border: 0;
}

/* Heading: 18px caps. Two classes deep beats `.hs-redesign h2` (which sets
   clamp(24px, 3.4vw, 38px)) without !important. */
.hs-redesign .hs-modal-header {
  padding: 14px 18px;
  border-bottom: 2px solid var(--ink);
  gap: 12px;
}
.hs-redesign .hs-modal-header h2,
.hs-redesign .hs-modal-header h3 {
  font-family: var(--display) !important;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
}

/* Small black glyph - but the 44px box stays: that is the tap target, and
   95% of the users are on a phone. No round grey hover pill. */
.hs-redesign .hs-modal-close {
  font-size: 20px;
  color: var(--ink) !important;
  border-radius: 0 !important;
  background: none !important;
}
.hs-redesign .hs-modal-close:hover {
  background: none !important;
  color: var(--hs) !important;
}

/* --- The clipped-footer bug (Nicole "Bild 4", 17.07.2026) --------------------
   Several modals wrap body + footer in a <form>. .hs-modal-content is a flex
   column with overflow:hidden, so that <form> is a flex ITEM - but it is not a
   flex CONTAINER. The body's `flex: 1; overflow-y: auto` therefore lands in no
   flex context, gets no height to scroll inside, and the form simply grows past
   the 90vh cap - where overflow:hidden CUTS THE FOOTER OFF. That is why the
   "Weiter" button was missing from the create-society modal: not styling, the
   button was outside the box.

   events.css carried this fix for .hs-event-modal-content only. It belongs to
   every modal built that way, so it moves here. */
.hs-redesign .hs-modal-content > form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
@media (max-width: 767px) {
  /* Phones let the form grow and scroll the OVERLAY instead - a nested scroll
     area inside a nested scroll area is what broke iOS before (see main.css). */
  .hs-redesign .hs-modal-content > form { overflow: visible; }
}

.hs-redesign .hs-modal-body { padding: 16px 18px; }

/* --- Das WARUM-Fenster der Startseite (Nicole, 29.07.2026) -----------------
   Reiner Lesetext, kein Formular. Deshalb die einzige Stelle mit einer
   Lesebreite: laengere Absaetze brauchen sie, damit das Auge die naechste
   Zeile wiederfindet. */
.hs-redesign .hs-warum { max-width: 62ch; }
.hs-redesign .hs-warum h3 {
  font-family: var(--display) !important;
  font-size: 17px; line-height: 1.25;
  margin: 26px 0 6px;
}
.hs-redesign .hs-warum h3:first-of-type { margin-top: 18px; }
.hs-redesign .hs-warum p {
  font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0;
}
.hs-redesign .hs-warum-intro { font-size: 16px !important; color: var(--ink) !important; }
/* Der Schlusssatz ist die Zusammenfassung - abgesetzt und in Schwarz, damit
   er auch dann haengenbleibt, wenn nur quergelesen wurde. */
.hs-redesign .hs-warum-schluss {
  margin-top: 26px !important;
  padding-top: 18px;
  border-top: 2px solid var(--ink);
  color: var(--ink) !important;
  font-weight: 600;
}
.hs-redesign .hs-modal-footer {
  padding: 14px 18px;
  border-top: 2px solid var(--ink);
}

/* --- Fields inside a modal: smaller and tighter ------------------------
   !important on background/border: Astra styles inputs by TAG and would
   otherwise paint its own skin over them (same fight as .hs-society-join). */
.hs-redesign .hs-modal-content .hs-form-group { margin-bottom: 12px; }

/* --- Code-Feld fuer fremde Geraete (Nicole, 29.07.2026) --------------------
   Ersetzt das graue Browser-Kaestchen. Abgesetzt vom Rest des Formulars, weil
   es nur in diesem einen Fall auftaucht - eine Linie oben macht klar, dass
   hier ein zusaetzlicher Schritt beginnt und nicht einfach ein drittes Feld.
   Bewusst OHNE .hs-redesign davor: das Login-Formular steckt auch in Kontexten
   ohne diesen Wrapper (Society-Kopf, Einladungsseiten). */
.hs-device-code-group {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 2px solid var(--ink, #0B0B0D);
}
/* Ziffern gross und gespreizt - man vergleicht sie mit der Mail, da hilft
   jeder Millimeter. Feste Breite statt voller Zeile: sechs Ziffern brauchen
   keine 400 Pixel, und ein kurzes Feld sagt von selbst, wie viel reingehoert. */
#hs-login-device-code {
  font-family: var(--display, inherit) !important;
  font-size: 22px;
  letter-spacing: .28em;
  text-align: center;
  width: 100%;
  max-width: 220px;
}
.hs-device-code-hint {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft, #55525E);
}
/* Wortlink-Muster: schwarz und fett, Hover magenta - kein zweiter Knopf
   neben dem Anmelde-Knopf. */
#hs-device-code-resend {
  /* Eigene Zeile, damit der Link nicht ans Satzende klebt - am Handy rutschte
     er sonst mitten in den Fliesstext. */
  display: block;
  margin-top: 4px;
  font-weight: 700;
  color: var(--ink, #0B0B0D);
  text-decoration: underline;
}
#hs-device-code-resend:hover,
#hs-device-code-resend:focus-visible { color: var(--hs, #FA06C6); }

/* --- Login im Society-Kopf (Nicole, 30.07.2026: "die Seite ist nicht
   schoen") -----------------------------------------------------------------
   Der Kasten steht auf der VOLLEN Society-Farbe - dort gelten die Feld-
   Regeln der Seite erst recht: weiss, eckig, 2px schwarzer Rand. Astra
   stylt Inputs nach TAG, deshalb !important (gleicher Kampf wie im Modal).
   Ohne .hs-redesign-Praefix: der Kopf steckt nicht immer im Wrapper. */
.hs-header-login-form .hs-input,
.hs-society-auth .hs-input {
  background: #fff !important;
  border: 2px solid var(--ink, #0B0B0D) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--ink, #0B0B0D) !important;
}
/* Chrome malt ausgefuellte Felder hellblau (Autofill) - auf der Society-
   Farbe sah das nach Fremdkoerper aus. Der Trick uebermalt es von innen. */
.hs-header-login-form .hs-input:-webkit-autofill,
.hs-society-auth .hs-input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: var(--ink, #0B0B0D) !important;
}
/* Meldungen im Kopf: WEISSE Box mit 2px Rand, eckig - keine Pastellflaeche
   auf der Society-Farbe. Info (Code ist unterwegs) traegt Schwarz; ein
   echter Fehler traegt den ROTEN Rand (Gefahr ist rot). */
.hs-header-login-form .hs-message,
.hs-society-auth .hs-message {
  background: #fff;
  border: 2px solid var(--ink, #0B0B0D);
  border-radius: 0;
  color: var(--ink, #0B0B0D);
}
.hs-header-login-form .hs-message-error,
.hs-society-auth .hs-message-error { border-color: #dc3232; }
.hs-header-login-form .hs-message-success,
.hs-society-auth .hs-message-success { border-color: var(--ink, #0B0B0D); }
/* "Eine Mail = ein Name" (Nicole, 10.08.2026): steht der Name-Hinweis in der
   Meldung, wird nicht automatisch weitergeleitet - der Knopf DARUNTER geht
   weiter, mit Luft zum Text (Gruppierung: 16px zwischen Gruppen). */
.hs-name-notice-go {
  margin: 16px 0 0;
}
/* Grauer Hinweistext ist fuer WEISSE Flaechen gedacht - auf der vollen
   Society-Farbe traegt auch er Schwarz (Palette-Regel). */
.hs-header-login-form .hs-device-code-hint,
.hs-society-auth .hs-device-code-hint { color: var(--ink, #0B0B0D); }
.hs-redesign .hs-modal-content .hs-form-group > label:not(.hs-checkbox-label) {
  display: block;
  font-family: var(--body) !important;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}
.hs-redesign .hs-modal-content .hs-input,
.hs-redesign .hs-modal-content .hs-textarea,
.hs-redesign .hs-modal-content .hs-select {
  font-family: var(--body) !important;
  font-size: 15px;
  padding: 9px 12px;
  background: var(--paper) !important;
  border: 0 !important;
  /* Eckig, nicht rund (Nicole 17.07.2026). */
  border-radius: 0 !important;
}
.hs-redesign .hs-modal-content textarea.hs-input,
.hs-redesign .hs-modal-content .hs-textarea { min-height: 68px; }
.hs-redesign .hs-modal-content .hs-hint {
  font-family: var(--body) !important;
  font-size: 13px;
  color: var(--ink-soft);
}
/* main.css strips `appearance` off .hs-input to kill Astra's skin - on a <select>
   that also removes the dropdown arrow, leaving a box with no hint that it opens.
   Frueher kam hier `appearance: menulist` zurueck - damit malte der Browser
   aber seine GRAUE, runde Systemoptik und das Feld fiel aus der Reihe
   (Nicole, 03.08.2026: "Uhrzeitfeld an die anderen anpassen"). Jetzt: Optik
   wie jedes andere Feld, der Aufklapp-Pfeil kommt als eigenes Strich-SVG.
   !important auf den background-Teilen, weil die Feld-Grundregel oben
   `background !important` als Shorthand setzt. */
.hs-redesign .hs-modal-content select.hs-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 13px !important;
  padding-right: 34px;
}

/* --- Step wizard: "1. Society   2. Admin-Account" ----------------------------
   Was two grey circles, the second dimmed to opacity .4. Nicole read that dim as
   "broken", not as "comes later" ("Was bedeutet 2. Admin-Account abgesoftet?") -
   so the dimming is gone and the step you are on is simply the black one. No
   circles: they cost a whole row of height in a modal that already scrolls. */
.hs-redesign .hs-modal-content .hs-steps {
  justify-content: flex-start;
  gap: 22px;
  padding-bottom: 12px;
  margin-bottom: 16px;
  /* Duenn + grau (Nicole 17.07.2026): die Reiter sind kein Kachelrand, die
     Linie darunter darf den Kopf nicht ueberschreien. */
  border-bottom: 1px solid #C9C7D1;
}
.hs-redesign .hs-modal-content .hs-step {
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
  opacity: 1;
  color: var(--ink-soft);
}
.hs-redesign .hs-modal-content .hs-step.active { color: var(--ink); }
.hs-redesign .hs-modal-content .hs-step-number {
  width: auto;
  height: auto;
  min-width: 0;
  background: none !important;
  border-radius: 0 !important;
  font-family: var(--display) !important;
  font-size: 14px;
  color: inherit !important;
}
.hs-redesign .hs-modal-content .hs-step-number::after { content: "."; }
/* A tick mark next to a bare "1." reads as clutter once the circle is gone. */
.hs-redesign .hs-modal-content .hs-step.completed .hs-step-number::before { content: none; }
.hs-redesign .hs-modal-content .hs-step-label {
  font-family: var(--body) !important;
  font-size: 14px;
  font-weight: 600;
  color: inherit;
}

/* --- Colour picker: five round-cornered squares, nothing else ----------------
   Nicole, 17.07.2026: no colour NAMES (the swatch is the answer), no same-colour
   rings, and the chosen one carries a BLACK outline. The transparent border on
   the others keeps every swatch the same size, so picking one does not nudge the
   row. The name still lives in the title attribute for hover/screen readers. */
.hs-redesign .hs-modal-content .hs-color-picker {
  justify-content: flex-start;
  gap: 10px;
}
.hs-redesign .hs-modal-content .hs-color-option {
  padding: 0;
  border: 0;
}
.hs-redesign .hs-modal-content .hs-color-option:hover { background: none; }
.hs-redesign .hs-modal-content .hs-color-label { display: none; }
.hs-redesign .hs-modal-content .hs-color-swatch {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 10px;
  border: 3px solid transparent;
  box-shadow: none;
}
.hs-redesign .hs-modal-content .hs-color-option input[type="radio"]:checked + .hs-color-swatch {
  transform: none;
  border-color: var(--ink);
  box-shadow: none;
}

/* --- Dividers INSIDE a modal ------------------------------------------------
   The same rule the tiles follow: a line is black and 2px (Nicole, 17.07.2026).
   events.css drew these in #E1E3EB, a grey so close to the modal's own surface
   that the sections just blurred together. Some were 1px, some 2px, for no
   reason anyone remembers - one thickness now. */
.hs-redesign .hs-modal-content .hs-event-detail-description,
.hs-redesign .hs-modal-content .hs-event-participants-section,
.hs-redesign .hs-modal-content .hs-event-register-section,
.hs-redesign .hs-modal-content .hs-event-edit-footer {
  border-top: 2px solid var(--ink);
}

/* Info rows sit TIGHT under each other (Nicole, 19.07.2026): 4px inside the
   group, the air (16px) lives between the sections - events.css spread every
   row 12px apart. */
.hs-redesign .hs-modal-content .hs-event-detail-info {
  gap: 4px;
  margin-bottom: 16px;
}
.hs-redesign .hs-modal-content .hs-event-detail-row { padding: 0; }
.hs-redesign .hs-modal-content .hs-event-participants-section {
  margin-top: 16px;
  padding-top: 14px;
}
/* Participant rows: body font also for the list NUMBERS (Astra styles li
   markers its own way), a hairline between rows (1px, thinner than any
   line above it), notes in plain type (Nicole, 19.07.2026). */
.hs-redesign .hs-modal-content .hs-event-participant-list li {
  padding: 5px 0;
  border-bottom: 1px solid #E4E6EC;
  font-family: var(--body);
  font-size: 14px;
  color: var(--ink);
}
.hs-redesign .hs-modal-content .hs-event-participant-list li::marker {
  font-family: var(--body);
  font-size: 14px;
  color: var(--ink);
}
.hs-redesign .hs-modal-content .hs-event-participant-list li:last-child {
  border-bottom: 0;
}
.hs-redesign .hs-modal-content .hs-event-participant-note {
  font-style: normal;
  font-weight: 400;
  color: var(--ink);
}
.hs-redesign .hs-modal-content .hs-event-participant-society {
  font-style: normal;
  font-weight: 400;
}

/* Big events (Nicole, 19.07.2026): word link that unfolds the names after
   20, and the one-line summary for the free places. Astra needs the
   !important on the button reset. */
.hs-redesign .hs-modal-content .hs-participants-more-link {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 8px 0 0;
  font-family: var(--body) !important;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink) !important;
  text-decoration: underline;
  cursor: pointer;
}
.hs-redesign .hs-modal-content .hs-participants-more-link:hover { color: var(--hs) !important; }
.hs-event-free-slots-line {
  margin-top: 6px;
  font-size: 14px;
  color: #777;
  font-style: italic;
}

/* Desktop buttons were built for thumbs and looked oversized in a modal on a big
   screen (Nicole, 17.07.2026). Phones keep the full tap target - 95% of the users
   are there, and main.css already stretches them full width below 768px. */
@media (min-width: 768px) {
  .hs-redesign .hs-modal-content .hs-btn {
    font-size: 14px;
    padding: 8px 18px;
  }
}

/* --- ÜBER UNS: bottom strip of the head box ----------------------------
   Divider is 2px - inside a tile, lines are always THINNER than the 4px
   outline (Nicole's rule, 16.07.2026). These blocks are new markup, so they
   get the design-system fonts back that the band above switched off. */
.hs-redesign .hs-society-about {
  border-top: 2px solid var(--ink);
  padding: 22px 24px;
  text-align: left;
}
.hs-redesign .hs-society-about-title {
  font-family: var(--display) !important;
  font-size: 14px;
  letter-spacing: .18em;
  margin: 0 0 8px;
  color: var(--ink);
}
.hs-redesign .hs-society-about-text {
  font-family: var(--body) !important;
  font-size: 17px;
  line-height: 1.55;
  margin: 0;
  color: var(--ink);
}

/* --- Besucher-Kopf: Text + zwei gleiche Knoepfe (Nicole, 16.08.2026) ----
   Ausgeloggte sehen im farbigen Kopf den Erklaer-Text der Society und
   NEBENEINANDER "Aufnahme beantragen" und "Einloggen" - gleich gross,
   keiner ist der wichtigere. Der jeweilige Bereich klappt erst auf Klick
   auf. Schwarz auf der Society-Farbe traegt jede Palette (alle Toene
   fuehren schwarze Schrift). p bekommt die Body-Schrift zurueck - Astra
   stylt p direkt (Font-Leck-Regel). */
.hs-redesign .hs-header-about {
  font-family: var(--body) !important;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  max-width: 640px;
  margin: 14px auto 0;
  text-align: center;
}
.hs-redesign .hs-header-cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 20px;
}
/* Gleich gross: beide teilen sich die Breite, gedeckelt - sonst laufen
   sie am Rechner ueber die volle Kopf-Breite. */
.hs-redesign .hs-header-cta .hs-header-cta-btn {
  flex: 1 1 0;
  max-width: 300px;
}
/* Handy: untereinander, volle Breite - 16px-Regel gilt fuers Tippen,
   Knoepfe brauchen den vollen Daumen. */
@media (max-width: 600px) {
  .hs-redesign .hs-header-cta { flex-direction: column; align-items: stretch; }
  .hs-redesign .hs-header-cta .hs-header-cta-btn { max-width: none; }
}
/* Aufgeklapptes Login unterm Knopf-Paar: Luft zur Gruppe darueber. */
.hs-redesign #hs-header-login-fold { margin-top: 20px; }

/* --- "Noch kein Mitglied?" - own block UNDER the head box ---------------
   Seit 16.08.2026 ohne das Crowd-Logo daneben (Nicole) und versteckt, bis
   der Kopf-Knopf "Aufnahme beantragen" ihn aufklappt. */
.hs-redesign .hs-society-join {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 28px;
}

/* The Rundeck: grey like the bands, because this is the one thing a visitor
   can act on - it must not disappear into the white (Nicole's exception). */
.hs-redesign .hs-society-join-body {
  flex: 1 1 auto;
  text-align: left;
  padding: 26px 28px;
  background: var(--paper-2);
  border: 4px solid var(--ink);
  border-radius: var(--radius);
}
.hs-redesign .hs-society-join-title {
  font-family: var(--display) !important;
  font-size: clamp(20px, 2.6vw, 28px);
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.15;
  margin: 0 0 6px;
  color: var(--ink);
}
.hs-redesign .hs-society-join-text {
  font-family: var(--body) !important;
  font-size: 16px;
  margin: 0 0 4px;
  color: var(--ink-soft);
}
.hs-redesign .hs-society-join-action { margin-top: 14px; }

/* White fields on the grey box. !important because Astra styles inputs by tag
   and overrides the plugin's own white background. */
.hs-redesign .hs-society-join .hs-input {
  background: var(--paper) !important;
  /* Eckig, nicht rund (Nicole 17.07.2026). */
  border-radius: 0;
}

/* Phones: everything centred. */
@media (max-width: 760px) {
  .hs-redesign .hs-society-join {
    flex-direction: column;
    gap: 18px;
  }
  .hs-redesign .hs-society-join-body {
    text-align: center;
    padding: 22px 18px;
  }
}

/* =====================================================================
   GLOBAL top brand stripe - printed on wp_body_open as a direct child of
   <body> (see HuddleSuite::render_top_brand_stripe). Because it is NOT inside
   the Elementor container, position:fixed reaches the true viewport top, so it
   sits flush on both the Home and the HuddleSociety page. pointer-events:none
   keeps the menu underneath clickable. Colours hard-coded (brand constants),
   since this element lives outside the .hs-redesign token scope.
   ===================================================================== */
.hs-brand-stripe-top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100000;
  display: flex; height: 10px; margin: 0; pointer-events: none;
}
/* Order follows the logo, left to right: gruen, gelb, cyan, orange, lila.
   Hex on purpose, NOT var(--c-*): the stripe is a direct child of <body> and
   therefore outside .hs-redesign, where those tokens live. */
.hs-brand-stripe-top span { flex: 1; }
.hs-brand-stripe-top span:nth-child(1) { background: #60D34F; }
.hs-brand-stripe-top span:nth-child(2) { background: #FAC306; }
.hs-brand-stripe-top span:nth-child(3) { background: #0AB5FF; }
.hs-brand-stripe-top span:nth-child(4) { background: #FF6613; }

/* Little bobbing header logo, printed on wp_body_open next to the stripe
   (Nicole, 19.07.2026). Absolute (scrolls with the page), left on the same
   1080px flight line as the content; the animation runs inside the SVG. */
.hs-header-logo {
  position: absolute;
  top: 26px;
  /* Desktop minimum 30px: with 20px the logo poked out a hair left of the
     content tile (Nicole, 19.07.2026); mobile keeps 20px below. */
  left: max(30px, calc((100vw - 1080px) / 2));
  width: 150px;
  /* Above Astra's header bar (which painted over the logo and cut it off,
     19.07.2026), still below modals/drawer (those live at 9999+). */
  z-index: 999;
  line-height: 0;
}
.hs-header-logo img { width: 100%; height: auto; display: block; }
@media (max-width: 820px) {
  .hs-header-logo { width: 96px; top: 18px; left: 20px; }
}
.hs-brand-stripe-top span:nth-child(5) { background: #9E80E8; }
body.admin-bar .hs-brand-stripe-top { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .hs-brand-stripe-top { top: 46px; }
}
.hs-redesign .hs-stripe span { flex: 1; }
.hs-redesign .hs-stripe span:nth-child(1) { background: var(--c-yellow); }
.hs-redesign .hs-stripe span:nth-child(2) { background: var(--c-cyan); }
.hs-redesign .hs-stripe span:nth-child(3) { background: var(--c-pink); }
.hs-redesign .hs-stripe span:nth-child(4) { background: var(--c-green); }
.hs-redesign .hs-stripe span:nth-child(5) { background: var(--c-violet); }

/* --- Headings ----------------------------------------------------------- */
/* REGEL (Nicole, 16.07.2026): Archivo Black erscheint NIE gemischt.
   Die engen Innenraeume von a/e/g laufen bei kleinen Groessen zu - Versalien
   haben die nicht. Steht hier, wo die Schrift vergeben wird, damit es fuer jede
   kuenftige Ueberschrift automatisch gilt.
   Die negative Laufweite gilt nur den GROSSEN Zeilen (h1/h2); h3 und die
   Kachel-Titel setzen sie unten wieder positiv - Versalien brauchen Luft. */
.hs-redesign h1,
.hs-redesign h2,
.hs-redesign h3 {
  font-family: var(--display) !important;
  text-transform: uppercase !important;   /* !important: Astra schlaegt sonst die Regel */
  letter-spacing: -.015em;
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 .4em;
}
.hs-redesign h2 { font-size: clamp(24px, 3.4vw, 38px); }
.hs-redesign h3 { font-size: clamp(18px, 2.4vw, 24px); letter-spacing: .03em; }

/* --- THE CARD RULE (Nicole's spec) -------------------------------------- */
/* Rounded corner, black outline. Fill flips with the band it sits on:
 *   grey band  -> WHITE card
 *   white band -> GREY  card
 * Accent colour per tile via --tile (see .hs-theme-* below). */
.hs-redesign .hs-card {
  background: var(--paper);
  border: var(--outline);
  border-radius: var(--radius);
  overflow: hidden;
}
.hs-redesign .hs-band      .hs-card { background: var(--paper-2); }  /* white band -> grey card */
.hs-redesign .hs-band-grey .hs-card { background: var(--paper);   }  /* grey band  -> white card */

/* --- Per-tile accent colours (map existing .hs-theme-* classes) --------- */
.hs-redesign .hs-theme-yellow { --tile: var(--c-yellow); }
.hs-redesign .hs-theme-cyan   { --tile: var(--c-cyan);   }
.hs-redesign .hs-theme-pink   { --tile: var(--c-pink);   }
.hs-redesign .hs-theme-green  { --tile: var(--c-green);  }
.hs-redesign .hs-theme-violet { --tile: var(--c-violet); }
.hs-redesign .hs-theme-magenta,
.hs-redesign .hs-theme-hs     { --tile: var(--hs);       }

/* --- Buttons (flat, no border/shadow - like the Home CTAs) -------------- */
.hs-redesign .hs-btn {
  display: inline-block;
  font-family: var(--display) !important;
  font-size: clamp(15px, 1.6vw, 18px);
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: var(--ink);
  border: 0;
  border-radius: 999px;
  padding: 14px 26px;
  cursor: pointer;
  transition: transform .08s ease, filter .15s ease;
}
.hs-redesign .hs-btn:hover { filter: brightness(1.08); }
.hs-redesign .hs-btn:active { transform: translateY(1px); }
/* Beide stehen auf einer Society-Farbe -> schwarze Schrift, wie ueberall seit
   der neuen Palette. (--btn-accent stand auf weiss: auf Gruen waeren das 1.9:1.) */
.hs-redesign .hs-btn-accent { background: var(--tile, var(--hs)); color: var(--ink); }
.hs-redesign .hs-btn-yellow { background: var(--c-yellow); color: var(--ink); }

/* =====================================================================
   PAGE: /huddlesociety/ overview - public society cards
   (existing markup from public_societies(): .hs-society-card > header/body)
   ===================================================================== */
.hs-redesign .hs-public-societies-title {
  font-family: var(--display) !important;
  font-size: clamp(24px, 3.4vw, 38px);
  text-align: center;
  margin: 0 0 28px;
}

.hs-redesign .hs-society-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 22px;
}

/* The card itself - inherits the band-dependent fill from .hs-card rule */
.hs-redesign .hs-society-card {
  display: flex;
  flex-direction: column;
  border: var(--outline);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper);
  transition: transform .1s ease;
}
.hs-redesign .hs-band-grey .hs-society-card { background: var(--paper); }   /* grey band  -> white card */
.hs-redesign .hs-band      .hs-society-card { background: var(--paper-2); } /* white band -> grey card */
.hs-redesign .hs-society-card:hover {
  transform: translateY(-3px);
}

/* Coloured header per tile (like the Home comparison card) */
.hs-redesign .hs-society-card-header {
  background: var(--tile);
  padding: 16px 18px;
}
.hs-redesign .hs-society-card-name {
  font-family: var(--display) !important;
  /* Kachel-Titel: Versalien + 18 px + schwarz, genau wie .hs-ev-head h3 und
     .hs-soc-head h3. Stand vorher auf weiss - auf dem neuen Gruen waeren das
     1.9:1 gewesen. */
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
}
.hs-redesign .hs-society-card-body {
  padding: 16px 18px 20px;
  background: var(--paper);           /* Inhaltsfeld immer weiss */
  font-family: var(--body) !important;
}
.hs-redesign .hs-society-card-location,
.hs-redesign .hs-society-card-members {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--ink-soft);
}
.hs-redesign .hs-society-card-members { font-weight: 600; }
.hs-redesign .hs-society-card-description {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}

/* "Mehr erfahren ..." foot - plain body text, 2px black divider */
.hs-redesign .hs-society-card-more {
  margin-top: auto;
  border-top: 2px solid var(--ink);
  padding: 12px 18px;
  background: var(--paper);
  font-family: var(--body) !important;
  font-size: 14px;
  color: var(--ink-soft);
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 600px) {
  .hs-redesign .hs-band,
  .hs-redesign .hs-band-grey { padding: 30px 0; }
  .hs-redesign .hs-society-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   PAGE: /huddlesociety/ overview - the approved 5-stripe society demo.
   Ported 1:1 from society-entwurf.html. Left-aligned text, coloured tile
   heads, NO box shadows. All scoped under .hs-redesign.
   ===================================================================== */

/* --- Section intro / left-aligned typography ---------------------------- */
.hs-redesign .hs-section-intro { margin-bottom: 30px; }
.hs-redesign .hs-eyebrow {
  font-family: var(--body) !important;
  font-size: 12px; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0 0 12px;
}
.hs-redesign .hs-h2-left {
  text-transform: uppercase; letter-spacing: -.01em; line-height: 1.1;
  font-size: clamp(28px, 4vw, 40px); margin: 0 0 .4em; text-align: left;
}
.hs-redesign .hs-lede {
  font-family: var(--body) !important;
  font-size: clamp(16px, 1.9vw, 19px); color: var(--ink-soft);
  max-width: 66ch; margin: 0 0 26px;
}
.hs-redesign .hs-lede-wide { max-width: 82ch; }
.hs-redesign .hs-empty-note {
  font-family: var(--body) !important;
  font-size: 16px; color: var(--ink-soft); margin: 0;
}

/* --- Streifen 1: dezenter Zaehler (Box, linksbuendig) ------------------- */
.hs-redesign .hs-stats {
  list-style: none; margin: 8px 0 0; padding: 16px 22px;
  display: flex; width: fit-content; max-width: 100%; flex-wrap: wrap; gap: 12px 30px;
  border: 2px solid var(--ink); border-radius: var(--radius);
}
.hs-redesign .hs-stats li {
  display: flex; align-items: baseline; gap: 8px; color: var(--ink-soft); font-size: 15px;
}
.hs-redesign .hs-stats b {
  font-family: var(--display) !important; font-size: 24px; letter-spacing: -.01em; color: var(--ink);
}
.hs-redesign .hs-stats .hs-accent b { color: var(--hs); }
/* Der dunkle Gruenden-Knopf unter dem Zaehler (Nicole, 29.07.2026).
   Linksbuendig wie die Zaehler-Box darueber. 26px Luft: eigene Gruppe, aber
   erkennbar noch zum Kopf des Streifens gehoerend. Die 11px, mit denen die
   Haende oben und unten hinausragen, sind mitgerechnet - sonst kleben sie
   an der Zaehler-Box. */
.hs-redesign .hs-stats-cta { margin-top: 26px; }

/* --- Streifen 2: Event-Kacheln (Kopf farbig, Body weiss) --------------- */
.hs-redesign .hs-grid-events {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px;
}
.hs-redesign .hs-ev-card {
  display: flex; flex-direction: column; border: 4px solid var(--ink);
  border-radius: var(--radius); overflow: hidden; text-decoration: none;
  color: var(--ink); background: var(--paper); transition: transform .1s ease;
}
.hs-redesign .hs-ev-card:hover { transform: translateY(-3px); }
/* The head carries the event title - the tile's headline. Foreground follows the
   same rule as the society tiles: white, but black on the light themes. */
.hs-redesign .hs-ev-head {
  background: var(--tile, var(--hs)); border-bottom: 2px solid var(--ink); padding: 13px 18px;
  /* Seit der neuen Palette (16.07.2026) traegt JEDE Society-Farbe schwarze
     Schrift (mind. 5.9:1, inkl. Marken-Magenta). Die Sonderregeln fuer Gelb
     und Cyan sind damit weg - eine Regel statt drei. */
  --card-fg: var(--tile-fg, var(--ink));   /* freie Farbe (17.09.2026): kippt auf Weiss */
}
.hs-redesign .hs-ev-head h3 {
  font-family: var(--display) !important; color: var(--card-fg); margin: 0;
  /* Archivo Black ist eine Display-Schrift: bei 20 px laufen die Innenraeume
     von a/e/g zu, das Wort wird zur Flaeche. Versalien haben diese Innenraeume
     nicht - und wirken bei gleicher Punktzahl groesser (keine Unterlaengen),
     deshalb 18 statt 20. Die Titellaenge deckelt HuddleSuite_Events::TITLE_MAX. */
  font-size: 18px; text-transform: uppercase; letter-spacing: .04em; line-height: 1.25;
}
.hs-redesign .hs-ev-main { display: grid; grid-template-columns: auto 1fr; }
/* Blitzer-Fix (Nicole, 15.08.2026): im Raster streckt sich jede Kachel auf
   die Hoehe ihrer Reihe. Eine KURZE Kachel (ohne Beschreibungs-Block) liess
   dabei unten einen Streifen Kachel-Weiss frei - unsichtbar auf weissen
   Kacheln, ein Blitzer auf den grauen kommerziellen. Der Mittelteil
   uebernimmt die Reststrecke, seine Flaechen decken die Kachel komplett. */
.hs-redesign .hs-ev-card .hs-ev-main { flex: 1; }
.hs-redesign .hs-ev-when {
  padding: 16px 20px; border-right: 2px solid var(--ink); background: var(--paper);
  display: flex; flex-direction: column; justify-content: center; text-align: center;
}
.hs-redesign .hs-ev-day  { font-family: var(--body) !important; font-weight: 600; font-size: 15px; color: var(--ink); }
.hs-redesign .hs-ev-num  { font-family: var(--display) !important; font-size: clamp(30px, 4vw, 40px); letter-spacing: -.02em; line-height: 1.1; margin: 2px 0; }
.hs-redesign .hs-ev-time { font-family: var(--body) !important; font-size: 14px; color: var(--ink-soft); }
.hs-redesign .hs-ev-info {
  padding: 16px 20px; background: var(--paper);
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
}
.hs-redesign .hs-ev-info p { margin: 0; font-size: 15px; color: var(--ink); }
.hs-redesign .hs-ev-info b { font-weight: 700; }
.hs-redesign .hs-ev-details {
  border-top: 2px solid var(--ink); padding: 14px 20px; background: var(--paper);
  font-size: 15px; line-height: 1.5; color: var(--ink-soft);
}

/* --- Filter-Zeilen (Streifen 2 + 4) ------------------------------------
   Optik 1:1 aus society-entwurf.html: kein Rahmen, keine Rundung, Label als
   gesperrte Versalien. Gefilterte Kacheln werden per .hs-hidden entfernt -
   die Regel aus main.css braucht hier Nachdruck, weil .hs-redesign .hs-ev-card
   mit display:flex spezifischer ist. */
.hs-redesign .hs-filters { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 0 0 24px; }
.hs-redesign .hs-filters label {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 4px;
}
/* Fields ~25% flatter (Nicole, 19.07.2026): padding 10px -> 6px. Still a
   ~33px tap target, and phones open their native picker anyway. */
.hs-redesign .hs-filters select,
.hs-redesign .hs-filters input {
  font-family: var(--body); font-size: 15px; color: var(--ink); background: #fff;
  border: none; border-radius: 0; padding: 6px 13px; min-width: 180px; box-sizing: border-box;
  accent-color: var(--hs);
}
/* Highlight the SELECTED option in brand magenta instead of the browser's blue
   (Nicole, 17.07.2026). No focus outline box - Nicole found the magenta ring too
   loud, and the open dropdown popup is drawn by the OS anyway, so option:checked
   is as far as CSS reaches. */
.hs-redesign .hs-filters option:checked { background: var(--hs); color: var(--ink); }
.hs-redesign .hs-hidden { display: none !important; }

/* Kommerziell-Filter: eine Checkbox-ZEILE, kein Feld. Das Label ist bewusst
   NICHT versal (die Versalien-Regel oben gilt den Feld-Ueberschriften) -
   es ist die Aussage selbst. Unten ausgerichtet, damit es mit den flachen
   Feldern auf einer Linie steht. */
.hs-redesign .hs-f-commercial-group { display: flex; align-items: flex-end; }
.hs-redesign .hs-filters .hs-f-commercial-label {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--ink); margin-bottom: 8px;
}
.hs-redesign .hs-f-commercial-label input {
  width: 17px; height: 17px; min-width: 0; padding: 0; margin: 0;
  accent-color: var(--hs);
}

/* --- Mehrfachauswahl Society/Stadt (Nicole, 03.08.2026) ----------------
   details/summary statt <select multiple> - das native Mehrfach-Select ist
   am Desktop unbedienbar. Die summary traegt die Feld-Optik der flachen
   Filter; die aufgeklappte Liste liegt UEBER dem Grid (absolute), weiss mit
   2px-Rand. Haekchen-Zeilen sind normale Saetze, nicht versal - gleiche
   Ausnahme wie beim Kommerziell-Label (die Versalien-Regel oben trifft
   sonst JEDES label im Filterbereich). */
.hs-redesign .hs-filters .hs-f-group { position: relative; }
.hs-redesign .hs-filters .hs-f-multi > summary {
  list-style: none; cursor: pointer;
  font-family: var(--body); font-size: 15px; color: var(--ink); background: #fff;
  padding: 6px 30px 6px 13px; min-width: 180px; max-width: 260px; box-sizing: border-box;
  position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hs-redesign .hs-filters .hs-f-multi > summary::-webkit-details-marker { display: none; }
.hs-redesign .hs-filters .hs-f-multi > summary::after {
  content: "▾"; position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
  font-size: 12px; color: var(--ink);
}
.hs-redesign .hs-filters .hs-f-multi[open] > summary::after { content: "▴"; }
.hs-redesign .hs-filters .hs-f-multi-list {
  position: absolute; z-index: 60; left: 0; top: 100%; margin-top: 2px;
  min-width: 100%; max-height: 240px; overflow-y: auto;
  background: #fff; border: 2px solid var(--ink); padding: 8px 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.hs-redesign .hs-filters .hs-f-multi-list label {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--ink); margin: 0; white-space: nowrap;
}
.hs-redesign .hs-filters .hs-f-multi-list input {
  width: 17px; height: 17px; min-width: 0; padding: 0; margin: 0;
  accent-color: var(--hs);
}

/* --- Mengen-Umschalter (Streifen 2) - dezent, Funktion folgt ----------- */
.hs-redesign .hs-more-row { margin-top: 24px; }
.hs-redesign .hs-show-count { margin: 0; font-size: 14px; color: var(--ink-soft); }
.hs-redesign .hs-show-count a { color: var(--ink-soft); text-decoration: none; padding: 0 5px; }
.hs-redesign .hs-show-count a:hover { color: var(--hs); }
.hs-redesign .hs-show-count a.is-active { color: var(--ink); font-weight: 700; }

/* --- Streifen 3: Gruenden - Logo + Button, zentriert ------------------- */
/* Logo ueber dem Knopf, nicht daneben (Nicole 17.07.2026). Nebeneinander war
   das PAAR zentriert, der Knopf selbst sass dadurch rechts aus der Mitte.
   Gestapelt steht er auf jeder Breite mittig - Desktop wie Handy. */
.hs-redesign .hs-gruenden {
  display: flex; flex-direction: column; flex-wrap: nowrap;
  align-items: center; justify-content: center; text-align: center; gap: 32px;
}
.hs-redesign .hs-create-button-wrapper { display: inline-flex; }
/* main.css pins the wrapper left (align-self: flex-start) - in the stacked
   band the button must follow the centre like the logo above it (Nicole,
   17.07.2026: "nicht mittig, sondern linksbuendig"). */
.hs-redesign .hs-gruenden .hs-create-button-wrapper {
  align-self: center;
  margin-bottom: 0;
}

/* ===========================================================================
   DER HUDDLE-UP-KNOPF - EIN Rezept fuer die ganze Seite (Nicole, 26.07.2026:
   "Es soll immer ein und derselbe Button sein. HUDDLE UP ist Gruenden.")

   Frueher gab es zwei: einen in home.css fuer die Startseite (ein <a>) und
   diesen hier fuer die Society-Seite (ein <button>). Jede Aenderung musste
   zweimal gemacht werden - und beim zweiten Mal wurde sie vergessen.
   Jetzt benutzen BEIDE Stellen diese Klasse.

   Deshalb steht dieser Block bewusst NICHT unter .hs-redesign: die Startseite
   hat diesen Wrapper nicht. Die Klasse .hs-btn-huddle gehoert dem Plugin
   allein, eine Kollision mit dem Theme ist ausgeschlossen.

   Warum das Rezept vom <button> gewonnen hat und nicht das vom <a>: Astra
   uebermalt button-Hintergruende mit !important, und !important schlaegt
   Animationen. Der Farbwechsel MUSS deshalb auf ::before liegen. Das ist beim
   <a> unnoetig, schadet dort aber nicht - umgekehrt waere es ein Fehler
   (genau das war bis 1.0.37 der Fall: der Knopf klebte auf Gelb).
   =========================================================================== */
.hs-btn-huddle {
  display: flex !important; justify-content: center; align-items: center; line-height: 1.1;
  box-sizing: border-box; width: 340px; max-width: 100%;
  /* Kein Element-Border: Kontur UND Farbe liegen zusammen auf ::before
     (Erklaerung dort). Das Padding ersetzt die 3px des frueheren Borders,
     damit der Text exakt an der alten Stelle sitzt. */
  padding: 18px 33px !important;
  border: none !important;
  /* Feste Rundung statt var(--radius): die Variable ist auf der Startseite
     12px und auf den Society-Seiten 14px - der Knopf sah dadurch je nach
     Seite anders aus. Genau so faellt "ein und derselbe Knopf" auseinander. */
  border-radius: 12px !important;
  color: var(--ink); cursor: pointer;
  font-family: var(--display) !important; font-size: 16px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .07em; text-decoration: none;
  box-shadow: none !important;
  transition: filter .12s ease;
  position: relative; isolation: isolate;
  background: transparent !important;   /* Astra malt button-Hintergruende durch */
}
/* Farbe + Kontur ZUSAMMEN auf einer Schicht (Blitzer-Fix 27.07.2026).
   Warum so kompliziert? Drei Zwaenge auf einmal:
   (1) Astra uebermalt button-Hintergruende mit !important - und !important
       schlaegt Animationen. Der Farbwechsel kann also NICHT auf dem Element
       liegen (dort klebte der Knopf bis 1.0.37 auf Gelb).
   (2) Ein Kind-Element unter dem ELEMENT-Border erzeugt den "Blitzer"
       (Nicole 27.07.): es misst sich an der Innenkante des Borders und
       laesst in den Rundungen eine helle Luecke.
   (3) Malt man es ueber den Border, verschwindet die Kontur.
   Loesung: die Kontur zieht MIT auf ::before um. Eine Schicht, die ihren
   eigenen Rand hat, malt ihre Farbe von selbst sauber darunter - bis ganz
   in die Rundungen. Astra kommt an Pseudo-Elemente nicht heran. */
.hs-btn-huddle::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border: 3px solid var(--ink);
  border-radius: 12px;
  background-color: var(--c-yellow);   /* Rueckfall, wenn die Animation aus ist */
  animation: hs-hue-cycle 60s linear infinite;
}
/* --- Die zwei Haende am Knopf (Nicoles Idee, 26.07.2026) -------------------
   Der Knopf wird zum Kettenglied: die Kontur ist die Kette, die Punkte sind
   die Haende aus dem Logo. Sie sitzen NUR auf diesem Knopf - er ist der
   Aufruf zum Mitmachen, dort bedeuten sie etwas.
   Beide Punkte stecken in EINEM Pseudo-Element. Die 99 % halten den
   Kreisrand hart - ohne sie franst er aus.
   21px Durchmesser, Mitte 30.5px von der Ecke, mittig auf der Kontur. */
.hs-btn-huddle::after {
  content: "";
  position: absolute;
  inset: -11px 0;          /* nur nach oben und unten hinausragen */
  pointer-events: none;    /* nie den Klick auf den Knopf abfangen */
  background:
    radial-gradient(circle 10.5px at calc(100% - 30.5px) 11px, var(--ink) 99%, transparent 100%),
    radial-gradient(circle 10.5px at 30.5px calc(100% - 11px), var(--ink) 99%, transparent 100%);
  background-repeat: no-repeat;
}

.hs-btn-huddle:hover,
.hs-btn-huddle:focus-visible { filter: brightness(1.06); }
.hs-btn-huddle .hs-btn-inner {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  /* Schwarz statt weiss. Der Textschatten war nur die Kruecke dafuer, dass
     weisse Schrift auf Gelb (1.6:1) unlesbar ist - mit Schwarz auf allen sechs
     Farben (mind. 5.9:1) braucht es ihn nicht mehr. */
  color: var(--ink);
  animation: hs-btn-bob 5s ease-in-out infinite;
}
.hs-btn-huddle .hs-btn-title { font-size: 22px; letter-spacing: .03em; }
.hs-btn-huddle .hs-btn-sub {
  font-family: var(--body) !important; font-weight: 600; font-size: 13px;
  text-transform: none; letter-spacing: 0; opacity: .95;
}

/* --- Der ruhige Knopf oben (Nicole, 29.07.2026) ----------------------------
   Steht auf der HUDDLE-UP-Seite direkt unter dem Zaehler, dort wo der Knopf
   von der Startseite landet. Die ruhige Fassung des bunten Bruders weiter
   unten: EINE lange Zeile statt eines 340px-Blocks, magenta Flaeche mit
   schwarzer Kontur, Schrift steht still - und statt zweier fester Punkte
   laufen zwei Haende auf der Kontur im Kreis.

   Er erbt ALLES vom Rezept oben, getauscht werden nur Farbe und Bewegung.
   Dieser Block MUSS hinter dem Rezept stehen: gleiche Spezifitaet, es
   gewinnt die spaetere Zeile.

   Die Breite kommt hier vom Text statt vom Rezept - die eine Stelle, an der
   dieser Knopf bewusst aus der Familie ausschert. */
.hs-btn-huddle-solo {
  width: auto;
  /* Das seitliche Polster schrumpft am Handy mit. Es war der eigentliche
     Platzfresser: mit festen 44px lief die eine Zeile bei 390px aus dem
     Bild (nachgemessen 29.07.). Die Haende bleiben davon unberuehrt, die
     haengen an der Ecke, nicht am Polster. */
  padding: 16px clamp(14px, 3vw, 30px) !important;
  position: relative;   /* Ankerpunkt fuer die beiden Laeufer */
}
/* Magenta Flaeche, schwarze Kontur. Ohne animation:none faerbte hs-hue-cycle
   aus dem Rezept die Flaeche weiter durch. */
.hs-btn-huddle-solo::before {
  background-color: #FA06C6;
  border-color: var(--ink, #0B0B0D);
  animation: none;
}
/* Schrift schwarz - Palette-Regel: jede Society-Farbe traegt schwarze
   Schrift. Und STILL: das Wippen gehoert dem bunten Knopf allein
   (Nicole, 29.07.2026). */
.hs-btn-huddle-solo,
.hs-btn-huddle-solo .hs-btn-inner { color: var(--ink, #0B0B0D); }
.hs-btn-huddle-solo .hs-btn-inner { animation: none; }

/* --- Die zwei klatschenden Haende (Nicoles Idee, 29.07.2026) ---------------
   offset-path: border-box laesst ein Kind exakt der Aussenkante folgen,
   Rundungen inklusive. Beide Punkte teilen sich einen Weg, laufen ihn aber
   GEGENEINANDER: der zweite per animation-direction rueckwaerts, eine halbe
   Runde versetzt gestartet. Dadurch treffen sie sich zweimal pro Runde,
   "klatschen quasi in die Haende" (Nicole) und laufen wieder auseinander.

   Und der Clou: die Farbe springt NUR beim Klatschen.

   ⚠️ Der zweite Punkt ist absichtlich langsamer (34s statt 30s). Sonst traefen
   sich beide ewig an denselben zwei Stellen - bei 25 % und 75 % des Weges. Mit
   dem Unterschied wandert der Treffpunkt jedes Mal um gut 6 % weiter (Nicole,
   29.07.2026: "so minimal, dass es nicht auffaellt, aber sie treffen sich an
   anderer Stelle"). Erst nach 32 Treffen, also nach gut 8 Minuten, ist der
   Kreis herum.

   Warum 34 und nicht 32: 30 und 32 haben einen gemeinsamen Teiler, der
   Treffpunkt springt dadurch nur halb so weit UND wiederholt sich frueher.
   Unbequeme Zahlenpaare sind hier die besseren.

   Der Trick dabei: der ORT wandert, der TAKT bleibt. Zwei gegenlaeufige
   Punkte begegnen sich immer im Abstand 1/(1/T1 + 1/T2) - das ist von der
   Position unabhaengig. Deshalb passt die Farbe weiter exakt auf jedes
   Treffen, obwohl es nicht mehr dieselbe Stelle ist:

     Runde A     30s  \  Treffen alle 1020/64 = 15.9375s
     Runde B     34s  /
     Farbkreis   95.625s = 6 x 15.9375s -> genau 6 Treffen, genau 6 Farben
     Sprungpunkte  8.333/25/41.667/58.333/75/91.667 % - dieselben Prozente
                   wie bei gleichem Tempo, weil sich nur der Massstab aendert.

   Wer eine Zahl aendert, muss alle nachrechnen: Farbkreis = 6 x T1 x T2/(T1+T2).

   Der Farbwechsel laeuft fuer BEIDE Punkte ohne Versatz (delay 0), damit sie
   immer dieselbe Farbe tragen. Nur die Bewegung ist versetzt.

   ⚠️ Magenta faellt aus dem Farbkreis raus - auf magenta Grund waeren die
   Punkte unsichtbar. Dafuer ist SCHWARZ dabei (Nicole, 29.07.2026): die Farbe
   der Kette im Logo, und auf Magenta der staerkste Kontrast von allen.

   Die festen Punkte des Rezepts werden ERST INNERHALB von @supports
   abgeschaltet: kann ein Browser den Weg nicht, behaelt er sie und der Knopf
   sieht nur unbewegt aus statt nackt. */
.hs-btn-huddle-solo .hs-btn-dot { display: none; }
@supports (offset-path: border-box) {
  .hs-btn-huddle-solo::after { background: none; }
  .hs-btn-huddle-solo .hs-btn-dot {
    display: block; position: absolute; top: 0; left: 0;
    width: 21px; height: 21px; border-radius: 50%;
    background: currentColor; pointer-events: none;
    offset-path: border-box;
    offset-anchor: center;
    offset-rotate: 0deg;
    /* Farben in einem Verlauf lassen sich nicht animieren, 'color' schon -
       deshalb wird der Punkt mit currentColor gefuellt. */
    animation: hs-dot-lauf 30s linear infinite,
               hs-dot-farbe 95.625s linear infinite;
  }
  /* Der zweite Punkt: etwas langsamer (34s), eine halbe Runde versetzt
     gestartet, Gegenrichtung. Der jeweils zweite Wert gilt der Farbe - die
     laeuft gleich schnell und ohne Versatz, sonst traegen die beiden Punkte
     verschiedene Farben. */
  .hs-btn-huddle-solo .hs-btn-dot-2 {
    animation-duration: 34s, 95.625s;
    animation-delay: -17s, 0s;
    animation-direction: reverse, normal;
  }
}
@keyframes hs-dot-lauf { from { offset-distance: 0%; } to { offset-distance: 100%; } }
/* Harte Spruenge statt Ueberblendung: die Doppelstops lassen dem Browser
   0.01 % zum Wechseln - das liest sich als Klack, nicht als Verlauf.
   Schwarz beginnt und endet den Kreis, damit der Rundenschluss nahtlos ist. */
@keyframes hs-dot-farbe {
  0%,       8.32%  { color: #0B0B0D; }   /* schwarz - wie die Kette im Logo */
  8.333%,  24.99%  { color: #60D34F; }
  25%,     41.65%  { color: #FAC306; }
  41.667%, 58.32%  { color: #0AB5FF; }
  58.333%, 74.99%  { color: #FF6613; }
  75%,     91.65%  { color: #9E80E8; }
  91.667%,100%     { color: #0B0B0D; }
}
/* Bewegung aus: die Punkte bleiben, aber schwarz und still - auf zwei
   gegenueberliegenden Plaetzen, damit es nicht nach Fehler aussieht. */
@media (prefers-reduced-motion: reduce) {
  .hs-btn-huddle-solo .hs-btn-dot {
    animation: none; color: var(--ink, #0B0B0D); offset-distance: 12%;
  }
  .hs-btn-huddle-solo .hs-btn-dot-2 { offset-distance: 62%; }
}
/* Eine Zeile, komme was wolle - die Schrift schrumpft am Handy mit, statt
   umzubrechen. Die Zahlen sind GEMESSEN, nicht geschaetzt (29.07.2026, Edge,
   in echten iframe-Viewports):

   "Jetzt deine HuddleSociety gruenden!" braucht rund 24.6px Breite je 1px
   Schriftgroesse. ⚠️ Nicht 21px, wie ein blosser Textausschnitt vermuten
   laesst: der Knopf setzt font-weight 800, Archivo Black hat aber nur EINEN
   Schnitt - der Browser fettet also kuenstlich nach, und DAS macht rund 15 %
   Extrabreite. Wer hier nachrechnet, muss am echten Knopf messen.

   Zwei Entscheidungen halten die Zeile seit 29.07. nachmittags kurz genug,
   dass sie auch am Handy in voller Groesse passt (Nicole):
   1. Der Text ist nur noch "HuddleSociety gruenden!" statt des langen Satzes.
   2. KEINE Versalien. Nicht nur schmaler - in "HUDDLESOCIETY" verschwindet
      das Binnen-S, der Markenname wird zum Klumpen. Deshalb steht dieser
      eine Knopf bewusst gegen die Hausregel "Knoepfe sind versal". */
.hs-btn-huddle-solo .hs-btn-title {
  text-transform: none;
  letter-spacing: .01em;
  font-size: clamp(15px, 4.4vw, 20px);
  white-space: nowrap;
}
/* Sicherheitsnetz fuer Uraltgeraete: unter 340px waere die eine Zeile nur
   noch mit Lupenschrift zu halten - da darf sie brechen. Lieber zwei
   lesbare Zeilen als eine, die aus dem Bild laeuft. */
@media (max-width: 339px) {
  .hs-btn-huddle-solo .hs-btn-title { white-space: normal; }
}
@keyframes hs-btn-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
/* Brand magenta first, then the logo left to right: gruen, gelb, cyan, orange, lila. */
@keyframes hs-hue-cycle {
  0%,12%  { background-color: #FA06C6; } 16%,29% { background-color: #60D34F; } 33%,46% { background-color: #FAC306; }
  50%,62% { background-color: #0AB5FF; } 66%,79% { background-color: #FF6613; } 83%,96% { background-color: #9E80E8; } 100% { background-color: #FA06C6; }
}
.hs-redesign .hs-panel-logo { width: 320px; max-width: 78%; }
.hs-redesign .hs-panel-logo .hs-logo-svg { display: block; width: 100%; height: auto; }
.hs-redesign .hs-panel-logo .fig,
.hs-redesign .hs-panel-logo .head { transform-box: fill-box; transform-origin: 50% 100%; }
.hs-redesign .hs-panel-logo .fig  { animation: hs-panel-bob 5s ease-in-out infinite; }
.hs-redesign .hs-panel-logo .head { animation: hs-panel-bob-head 5s ease-in-out infinite; }
/* Nach PLATZ, nicht nach Farbe - Reihenfolge im Logo: gruen, gelb, cyan, orange, lila. */
.hs-redesign .hs-panel-logo .f-gruen,  .hs-redesign .hs-panel-logo .h-gruen  { animation-delay: 0s;   animation-duration: 4.6s; }
.hs-redesign .hs-panel-logo .f-gelb,   .hs-redesign .hs-panel-logo .h-gelb   { animation-delay: .28s; animation-duration: 5.3s; }
.hs-redesign .hs-panel-logo .f-cyan,   .hs-redesign .hs-panel-logo .h-cyan   { animation-delay: .14s; animation-duration: 4.9s; }
.hs-redesign .hs-panel-logo .f-orange, .hs-redesign .hs-panel-logo .h-orange { animation-delay: .42s; animation-duration: 5.6s; }
.hs-redesign .hs-panel-logo .f-lila,   .hs-redesign .hs-panel-logo .h-lila   { animation-delay: .22s; animation-duration: 5.1s; }
@keyframes hs-panel-bob      { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-40px); } }
@keyframes hs-panel-bob-head { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-52px); } }

/* --- Streifen 4: einfarbige Society-Kacheln --------------------------- */
.hs-redesign .hs-soc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.hs-redesign .hs-soc-card {
  display: flex; flex-direction: column; border: 4px solid var(--ink);
  border-radius: var(--radius); overflow: hidden; text-decoration: none;
  transition: transform .1s ease;
  /* Die Kachel ist komplett eingefaerbt - Kopf, Koerper und Fuss stehen auf der
     Society-Farbe. Seit der neuen Palette traegt jede davon schwarze Schrift,
     die Ausnahmen fuer Gelb und Cyan sind weg. */
  background: var(--tile, var(--hs)); --card-fg: var(--tile-fg, var(--ink));
}
.hs-redesign .hs-soc-card:hover { transform: translateY(-3px); }
.hs-redesign .hs-soc-head {
  border-bottom: 2px solid var(--ink); padding: 13px 18px; background: transparent;
  /* Spalte statt Zeile: das DEMO-Abzeichen sitzt UEBER dem Titel. Nebeneinander
     blieben dem Namen nur 223 der 288 px - "DIE DONNERSTAGSRUNDE" braucht 237
     und brach um. So bekommt jeder Name die volle Breite. */
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
}
.hs-redesign .hs-soc-head h3 {
  font-family: var(--display) !important; margin: 0; color: var(--card-fg);
  /* Versalien wie beim Event-Titel - Archivo Black erscheint NIE gemischt. */
  font-size: 18px; text-transform: uppercase; letter-spacing: .04em; line-height: 1.25;
}
/* Society-Logo in der Verwaltung (Nicole, 17.09.2026): behaelt seine Form -
   ein breites Logo wurde im Quadrat winzig (Nicoles Live-Test 1.2.8).
   !important, weil Astra Bilder selbst stylt. */
.hs-redesign .hs-soc-logo--setting {
  display: block; box-sizing: border-box; height: 84px !important; width: auto !important;
  max-width: 100%; background: #fff; padding: 3px;
  border: 2px solid var(--ink, #000); border-radius: 0 !important;
}

/* BILDERBAND (Nicole, 17.09.2026, im Artifact-Labor entschieden): Rundeck im
   Kachel-Radius, Fotos OHNE Outline, nur das Logo MIT 2px-Linie (ein weisser
   Logo-Grund ginge sonst im weissen Streifen unter). Das Band steht direkt im
   weissen Bereich unter dem Kopf, nicht in einer Kachel. */
.hs-band-pics { position: relative; box-sizing: border-box; max-width: 100%; margin: 18px auto 0; --band-h: 170px; }
.hs-band-pics * { box-sizing: border-box; }
.hs-band-pics .hs-band-track {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px;
  /* Wenige Bilder: mittig statt links kleben. "safe" haelt den Anfang
     erreichbar, sobald das Band breiter ist als der Platz. */
  justify-content: safe center;
}
.hs-band-pics .hs-band-track::-webkit-scrollbar { display: none; }
.hs-band-pics .hs-band-track:focus-visible { outline: 3px solid #FA06C6; outline-offset: 2px; }
.hs-band-pics .hs-band-pic {
  flex: none; display: block; height: var(--band-h) !important; width: auto !important; max-width: none !important;
  object-fit: cover; border-radius: 14px !important; scroll-snap-align: start; background: #DFE1E9;
}
.hs-band-pics .hs-band-logo {
  flex: none; height: var(--band-h); padding: 10px; background: #fff;
  border: 2px solid #0B0B0D; border-radius: 14px; scroll-snap-align: start;
}
.hs-band-pics .hs-band-logo img {
  display: block; height: 100% !important; width: auto !important; max-width: none !important;
  object-fit: contain; border-radius: 0 !important;
}
.hs-band-pics .hs-band-arrow {
  position: absolute; top: calc(var(--band-h) / 2 - 18px); width: 40px !important; height: 40px !important;
  min-height: 0 !important; padding: 0 !important; border-radius: 50% !important;
  border: 2px solid #0B0B0D !important; background: #fff !important; color: #0B0B0D !important;
  font: 400 20px/1 "Archivo Black", sans-serif !important; cursor: pointer; box-shadow: none !important;
}
/* Nur mit echter Maus: am Handy bliebe der Pfeil nach dem Tippen gelb kleben. */
@media (hover: hover) { .hs-band-pics .hs-band-arrow:hover { background: #FAC306 !important; } }
.hs-band-pics .hs-band-arrow--l { left: -8px; }
.hs-band-pics .hs-band-arrow--r { right: -8px; }
/* Pfeile nur, wenn es etwas zu schieben gibt (main.js setzt die Klasse). */
.hs-band-pics:not(.hs-band-pics--scroll) .hs-band-arrow { display: none !important; }
/* Ein Pfeil zeigt sich nur, solange es in seine Richtung weitergeht - der
   rechte ist damit zugleich der Hinweis "da kommt noch mehr". */
.hs-band-pics--start .hs-band-arrow--l,
.hs-band-pics--end .hs-band-arrow--r { display: none !important; }
.hs-band-pics .hs-band-pic, .hs-band-pics .hs-band-logo img { cursor: zoom-in; }
/* Handy: Bilder etwas niedriger, Pfeile kleiner und IM Band (am Rand waere
   kein Platz) - wischen geht weiterhin. */
@media (max-width: 767px) {
  .hs-band-pics { --band-h: 140px; }
  .hs-band-pics .hs-band-arrow { width: 34px !important; height: 34px !important; top: calc(var(--band-h) / 2 - 15px); font-size: 17px !important; }
  .hs-band-pics .hs-band-arrow--l { left: 6px; }
  .hs-band-pics .hs-band-arrow--r { right: 6px; }
}
/* Grosses Bild aus dem Bilderband: gleiches Overlay wie die Event-Fotos,
   dazu unten "zurueck / 2 / 5 / weiter" als weisse Wortlinks. */
.hs-lightbox--band { cursor: zoom-out; flex-direction: column; gap: 14px; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.hs-lightbox--band img { min-height: 0; flex: 0 1 auto; max-height: calc(100% - 70px); background: #fff; }
.hs-lightbox--band .hs-lightbox-close { font-family: "Archivo", Arial, sans-serif !important; }
.hs-lightbox-nav { display: flex; align-items: center; gap: 22px; color: #fff; font: 700 15px "Archivo", Arial, sans-serif; }
.hs-lightbox-nav .hs-lightbox-step {
  background: none !important; border: 0 !important; box-shadow: none !important; padding: 10px !important; min-height: 0 !important;
  color: #fff !important; font: 700 16px "Archivo", Arial, sans-serif !important; text-transform: none !important; letter-spacing: 0 !important;
  text-decoration: underline; cursor: pointer;
}
.hs-lightbox-nav .hs-lightbox-step:hover { color: #FA06C6 !important; }
/* Verwaltung: kleine Vorschau-Reihe mit rotem Wortlink darunter. */
.hs-redesign .hs-band-count { margin: 0 0 12px; font-weight: 700; font-size: 14px !important; }
/* Bilder-Paket bestellen (22.09.2026): Wortlink-Muster unter dem Zaehler. */
.hs-redesign .hs-band-order { margin: 12px 0 0; font-size: 14px !important; }
.hs-redesign .hs-band-order .hs-text-link { color: #0B0B0D; font-weight: 800; text-decoration: underline; }
.hs-redesign .hs-band-order .hs-text-link:hover { color: #FA06C6; }
.hs-redesign .hs-band-order-price { color: #5a5d66; }
.hs-redesign .hs-band-admin-grid { display: flex; flex-wrap: wrap; gap: 14px 12px; margin: 0 0 14px; }
.hs-redesign .hs-band-admin-item { margin: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
/* Im Band = 2px schwarzer Rand (Zustand sichtbar im Ruhezustand), auf der
   Wand = ohne Rand. Der Rand liegt als transparenter Platzhalter an, damit
   nichts springt, wenn ein Bild ins Band wandert. */
.hs-redesign .hs-band-admin-item img { display: block; height: 84px !important; width: auto !important; border-radius: 8px !important; border: 2px solid transparent; }
.hs-redesign .hs-band-admin-item.is-band img { border-color: #0B0B0D; }
.hs-redesign .hs-band-admin-links { display: flex; gap: 10px; flex-wrap: wrap; }
.hs-redesign .hs-band-admin-pos { font-size: 11px !important; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #5a5d66; }
.hs-redesign .hs-band-legend { margin: 0 0 10px; font-size: 13px !important; color: #5a5d66; }
.hs-redesign .hs-band-legend-band { color: #0B0B0D; font-weight: 700; }
/* "ins Band" (grau, unterstrichen = waehlbar) / "aus dem Band" (schwarz = im Band). */
.hs-redesign .hs-band-toggle {
  background: none !important; border: 0 !important; padding: 0 !important;
  box-shadow: none !important; min-height: 0 !important; cursor: pointer;
  font-family: var(--body) !important; font-size: 14px !important; font-weight: 700;
  text-transform: none !important; letter-spacing: 0 !important;
  color: #5a5d66 !important; text-decoration: underline;
}
.hs-redesign .hs-band-admin-item.is-band .hs-band-toggle { color: #0B0B0D !important; }
.hs-redesign .hs-band-toggle:hover { color: #FA06C6 !important; }
/* ZWEI BEREICHE Band / Bilderwand (Nicole, 23.09.2026): je ein Kopf mit
   Ort-Satz und eigenem Upload-Knopf, 2px Linie darueber. Pro Bild: Haekchen
   oben links AUF dem Bild (Mehrfach-Loeschen), zwei schmale Textfelder
   (Begleittext, Quelle) und die Wortlinks. */
.hs-redesign .hs-band-area { margin: 18px 0 0; padding-top: 14px; border-top: 2px solid #0B0B0D; }
.hs-redesign .hs-band-area-title {
  font-family: var(--display) !important; font-size: 15px !important; text-transform: uppercase;
  letter-spacing: .04em; margin: 0 0 4px; color: #0B0B0D;
}
.hs-redesign .hs-band-area-n { font-family: var(--body) !important; font-weight: 400; text-transform: none; letter-spacing: 0; color: #5a5d66; margin-left: 6px; }
.hs-redesign .hs-band-area-where { margin: 0 0 4px; font-size: 14px !important; color: #0B0B0D; }
.hs-redesign .hs-band-area .hs-logo-actions { margin: 8px 0 12px; }
.hs-redesign .hs-band-area-empty { margin: 0; font-size: 14px !important; color: #5a5d66; }
.hs-redesign .hs-band-admin-item { width: 150px; }
.hs-redesign .hs-band-admin-check { position: relative; display: block; margin: 0; padding: 0; cursor: pointer; }
.hs-redesign .hs-band-admin-check img { width: 150px !important; height: 112px !important; object-fit: cover; }
.hs-redesign .hs-band-admin-check .hs-band-check {
  position: absolute; top: 8px; left: 8px; margin: 0; width: 22px; height: 22px;
  accent-color: #0B0B0D; background: #fff; border: 2px solid #0B0B0D; border-radius: 4px; cursor: pointer;
}
.hs-redesign .hs-band-admin-check .hs-band-admin-pos { position: absolute; right: 8px; bottom: 8px; background: #fff; padding: 1px 6px; border-radius: 4px; }
.hs-redesign .hs-band-admin-item.is-selected img { outline: 3px solid #FA06C6; outline-offset: -3px; }
.hs-redesign .hs-band-text {
  width: 100% !important; box-sizing: border-box; font-family: var(--body) !important;
  font-size: 16px !important; padding: 4px 6px !important; min-height: 0 !important;
  border: 2px solid #0B0B0D !important; border-radius: 0 !important; background: #fff !important; color: #0B0B0D !important;
}
.hs-redesign .hs-band-text::placeholder { color: #8a8d96; }
.hs-redesign .hs-band-credit { font-size: 14px !important; }
.hs-redesign .hs-band-bulk { margin: 14px 0 0; font-size: 14px !important; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* display:flex schlaegt das hidden-Attribut - ohne diese Zeile stand die
   Loesch-Zeile mit "(0)" dauerhaft da. */
.hs-redesign .hs-band-bulk[hidden] { display: none !important; }
.hs-redesign .hs-band-bulk .hs-danger-link { font-weight: 800; }
/* Roter LOESCHEN-Knopf je Sektion (Nicole, 23.09.2026): Gefahr ist ROT,
   Knopf-Rezept wie .hs-btn (Versalien, Pille), Astra-fest per !important. */
.hs-redesign .hs-btn-bulk-delete {
  display: inline-block; font-family: var(--display) !important; font-size: 14px !important;
  letter-spacing: .02em; text-transform: uppercase; color: #fff !important; background: #cc0000 !important;
  border: 0 !important; border-radius: 999px !important; padding: 10px 20px !important; min-height: 0 !important;
  box-shadow: none !important; cursor: pointer; line-height: 1.2;
}
.hs-redesign .hs-btn-bulk-delete:hover { background: #a80000 !important; color: #fff !important; }
/* Grossansicht: Begleittext + Quelle unter dem Bild. */
.hs-lightbox--band .hs-lightbox-cap { margin: 0; color: #fff; font: 700 16px/1.35 "Archivo", Arial, sans-serif; text-align: center; max-width: 720px; }
.hs-lightbox--band .hs-lightbox-credit { margin: -8px 0 0; color: #c9ccd6; font: 400 13px/1.3 "Archivo", Arial, sans-serif; text-align: center; }
/* Bilderwand: Quelle klein unter der Bildunterschrift. */
.hs-redesign .hs-wall-credit { display: block; font-size: 11px; line-height: 1.3; color: #5a5d66; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* REITER "FOTOS" (Nicole, 23.09.2026): drei Sektionen (Fotostreifen oben,
   Fotowand, Bilder-Paket), je Sektion Kopf in Versalien + 2px Linie, ein
   Ort-Satz, dann die Upload-Zeile: Haekchen, Textfelder, Knopf, Status -
   ALLES in einer Zeile beieinander. Darunter die Bilder. */
.hs-redesign .hs-photos-section { margin: 0 0 28px; }
.hs-redesign .hs-photos-section:last-child { margin-bottom: 0; }
.hs-redesign .hs-photos-title {
  font-family: var(--display) !important; font-size: 17px !important; text-transform: uppercase; letter-spacing: .04em;
  margin: 0 0 8px; padding-bottom: 6px; border-bottom: 2px solid #0B0B0D; color: #0B0B0D;
}
.hs-redesign .hs-photos-n { font-family: var(--body) !important; font-weight: 400; font-size: 14px !important; text-transform: none; letter-spacing: 0; color: #5a5d66; margin-left: 6px; }
.hs-redesign .hs-photos-where { margin: 0 0 12px; font-size: 14px !important; color: #0B0B0D; }
.hs-redesign .hs-photos-sub { margin: 0 0 18px; }
.hs-redesign .hs-photos-sub-title { margin: 0 0 6px; font-size: 14px !important; font-weight: 700; color: #0B0B0D; }
.hs-redesign .hs-photos-upload {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px;
}
.hs-redesign .hs-photos-upload .hs-checkbox-label { flex-basis: 100%; margin: 0; }
.hs-redesign .hs-photos-upload .hs-band-text { width: 240px !important; flex: 0 1 240px; }
.hs-redesign .hs-photos-upload .hs-photo-upload-btn { color: #fff !important; margin: 0; }
.hs-redesign .hs-photos-upload .hs-band-status { font-size: 14px !important; font-weight: 700; }
.hs-redesign .hs-photos-upload .hs-band-status:empty { display: none; }
.hs-redesign .hs-band-admin-item--logo img { height: 112px !important; width: auto !important; max-width: 220px; object-fit: contain; border: 2px solid #0B0B0D; border-radius: 8px !important; background: #fff; }
.hs-redesign .hs-band-admin-item select.hs-band-text { padding: 4px 4px !important; }
.hs-redesign #hs-band-bulk .hs-band-status { font-weight: 700; }
@media (max-width: 600px) {
  .hs-redesign .hs-photos-upload .hs-band-text { width: 100% !important; flex-basis: 100%; }
}
/* Fotowand in der Verwaltung: je Event eine Zeile mit Datum. */
.hs-redesign .hs-band-event { margin: 0 0 16px; }
.hs-redesign .hs-band-event-title { margin: 0 0 8px; font-size: 14px !important; font-weight: 700; color: #0B0B0D; }
.hs-redesign .hs-band-event-date { color: #5a5d66; font-weight: 400; }
.hs-redesign .hs-band-admin-by { font-size: 12px !important; color: #5a5d66; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.hs-redesign .hs-wall-add-status { font-size: 14px; font-weight: 700; color: var(--ink); }
.hs-redesign .hs-wall-add-status:empty { display: none; }
.hs-redesign .hs-wall-pic .hs-wall-del {
  display: block; background: none !important; border: 0 !important; padding: 0 !important; margin: 2px 0 0;
  box-shadow: none !important; min-height: 0 !important; font-family: var(--body) !important;
  font-size: 12px !important; font-weight: 700; text-transform: none !important; letter-spacing: 0 !important;
  cursor: pointer; text-decoration: underline;
}
/* WAR SCHON als KACHEL-LISTE (Nicole, 23.09.2026): jede Zeile eine flache
   Kachel in der Sprache der Event-Kacheln - 4px Outline, Rundung, weiss auf
   dem grauen Streifen, Datumsblock links mit 2px Trennlinie. Nichts oeffnet
   sich; nur der Wortlink "Fotos hinzufuegen" tut etwas. */
/* Zwei nebeneinander am Desktop (Nicole, 23.09.2026), wie das Event-Raster;
   am Handy eine Spalte. */
.hs-redesign .hs-past-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 22px; }
@media (max-width: 760px) { .hs-redesign .hs-past-rows { grid-template-columns: 1fr; gap: 12px; } }
.hs-redesign .hs-past-row {
  display: flex; align-items: stretch; background: var(--paper); color: var(--ink);
  border: 4px solid var(--ink); border-radius: var(--radius); overflow: hidden;
}
.hs-redesign .hs-past-when {
  flex: 0 0 96px; display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 10px 8px; border-right: 2px solid var(--ink); text-align: center; line-height: 1.1;
}
.hs-redesign .hs-past-day  { font-size: 13px; font-weight: 600; }
.hs-redesign .hs-past-num  { font-family: var(--display) !important; font-size: 24px; letter-spacing: -.02em; margin: 2px 0; }
.hs-redesign .hs-past-year { font-size: 12px; color: var(--ink-soft); }
.hs-redesign .hs-past-main { flex: 1 1 auto; min-width: 0; padding: 12px 16px; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.hs-redesign .hs-past-main p { margin: 0; }
.hs-redesign .hs-past-what {
  font-family: var(--display) !important; font-size: 15px; text-transform: uppercase; letter-spacing: .04em; line-height: 1.25;
}
.hs-redesign .hs-past-where { font-size: 15px; font-weight: 700; }
.hs-redesign .hs-past-n { flex: 0 0 auto; align-self: center; padding: 12px 16px; font-size: 14px; white-space: nowrap; color: var(--ink); }
.hs-redesign .hs-past-n b { font-family: var(--display) !important; font-size: 18px; font-weight: 400; }
/* BUTTON "Fotos hochladen" + aufklappendes Mini-Formular (Nicole, 23.09.2026). */
.hs-redesign .hs-past-actions { margin-top: 8px; }
.hs-redesign .hs-past-actions .hs-photo-upload-btn { color: #fff !important; margin: 0; padding: 8px 14px !important; font-size: 13px !important; }
.hs-redesign .hs-past-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.hs-redesign .hs-past-form[hidden] { display: none !important; }
.hs-redesign .hs-past-form .hs-band-text { width: 240px !important; flex: 0 1 240px; }
.hs-redesign .hs-past-form .hs-wall-add-status { flex-basis: 100%; }
@media (max-width: 600px) {
  .hs-redesign .hs-past-form .hs-band-text { width: 100% !important; flex-basis: 100%; }
}
.hs-redesign .hs-past-cancelled { opacity: .7; }
.hs-redesign .hs-past-cancelled .hs-past-what { text-decoration: line-through; }
.hs-redesign .hs-past-photo-hint { margin-top: -8px; }
@media (max-width: 600px) {
  .hs-redesign .hs-past-row { flex-wrap: wrap; }
  .hs-redesign .hs-past-when { flex-basis: 80px; }
  /* Basis 0 statt auto: sonst misst der Browser den langen Titel und
     wirft den Textblock unter das Datum. */
  .hs-redesign .hs-past-main { flex: 1 1 0; padding: 10px 12px; }
  .hs-redesign .hs-past-n { flex-basis: 100%; border-top: 2px solid var(--ink); padding: 8px 12px; align-self: auto; }
}
@media (max-width: 600px) {
  .hs-redesign .hs-band-admin-item { width: auto; }
  .hs-redesign .hs-band-admin-check img { width: 100% !important; height: auto !important; }
  .hs-redesign .hs-band-admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  .hs-redesign .hs-band-admin-item { min-width: 0; }
  .hs-redesign .hs-band-admin-item img { width: 100% !important; height: auto !important; aspect-ratio: 4 / 3; object-fit: cover; }
  /* Drei Spalten sind schmal: die zwei Wortlinks untereinander, damit
     "aus dem Band" nicht mitten im Wort umbricht. */
  .hs-redesign .hs-band-admin-links { flex-direction: column; gap: 2px; }
  .hs-redesign .hs-band-toggle, .hs-redesign .hs-band-delete { font-size: 13px !important; white-space: nowrap; }
}
.hs-redesign .hs-logo-current { margin: 0 0 12px; }
.hs-redesign .hs-logo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 12px; }
/* Der Knopf ist ein <label> - die Label-Regel der Verwaltung faerbte seine
   Schrift schwarz auf schwarz. */
.hs-redesign #hs-setting-logo .hs-photo-upload-btn,
.hs-redesign #hs-setting-band .hs-photo-upload-btn { color: #fff !important; margin: 0; }
.hs-redesign #hs-setting-logo .hs-photo-upload-btn:hover,
.hs-redesign #hs-setting-band .hs-photo-upload-btn:hover { color: var(--ink) !important; }
/* Astra malt Buttons durch - der rote Wortlink braucht jede Eigenschaft. */
.hs-redesign #hs-logo-delete,
.hs-redesign .hs-band-delete {
  background: none !important; border: 0 !important; padding: 0 !important;
  box-shadow: none !important; min-height: 0 !important; cursor: pointer;
  font-family: var(--body) !important; font-size: 14px !important; font-weight: 700;
  text-transform: none !important; letter-spacing: 0 !important;
}

/* The black pill: legible on every tile colour, which is why it is black and not
   a sixth hue. Seit 08.08.2026 nur noch fuer "GAST" (Event aus einer Partner-
   Society) - DEMO ist in den schwarzen Streifen unter dem Kopf gewandert. */
.hs-redesign .hs-ev-guest-badge {
  flex: none; background: var(--ink); color: #fff;
  font-family: var(--body) !important; font-weight: 700;
  font-size: 11px; letter-spacing: .12em; line-height: 1;
  padding: 4px 9px; border-radius: 999px;
}

.hs-redesign .hs-soc-body { padding: 16px 18px 20px; background: transparent; }
.hs-redesign .hs-s-ort {
  margin: 0 0 10px; font-family: var(--display) !important; font-size: 1.12em; font-weight: 900;
  text-transform: uppercase; letter-spacing: .03em; line-height: 1.15; color: var(--card-fg);
}
.hs-redesign .hs-s-line { margin: 0 0 10px; font-size: 15px; line-height: 1.45; color: var(--card-fg); }
.hs-redesign .hs-s-line:last-child { margin-bottom: 0; }
.hs-redesign .hs-soc-more {
  margin-top: auto; border-top: 2px solid var(--ink); padding: 12px 18px; background: transparent;
  font-family: var(--body) !important; font-size: 14px; color: var(--card-fg);
}

/* --- Streifen 5: kluger Satz (zentriert) ------------------------------ */
.hs-redesign .hs-kicker {
  margin: 44px auto 0; font-family: var(--serif) !important; font-style: italic; font-weight: 600;
  font-size: clamp(28px, 4.4vw, 46px); line-height: 1.25; text-align: center;
}
.hs-redesign .hs-kicker b {
  font-style: normal;
  background: linear-gradient(180deg, transparent 62%, color-mix(in srgb, var(--hs) 42%, transparent) 62%);
}

/* --- Society-overview responsive -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hs-redesign .hs-panel-logo .fig,
  .hs-redesign .hs-panel-logo .head,
  /* Der Knopf gilt seitenweit, also auch diese Ausnahme (ohne .hs-redesign). */
  .hs-btn-huddle,
  .hs-btn-huddle::before,   /* der Farbwechsel liegt hier */
  .hs-btn-huddle::after,    /* beim dunklen: der Farbwechsel der Haende */
  .hs-btn-huddle .hs-btn-inner { animation: none !important; }
}
@media (max-width: 820px) {
  .hs-redesign .hs-soc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .hs-redesign .hs-grid-events { grid-template-columns: 1fr; }
  .hs-redesign .hs-gruenden { gap: 24px; }
  /* Stacked, full width - four side-by-side fields do not fit a phone. */
  .hs-redesign .hs-filters { flex-direction: column; gap: 12px; }
  .hs-redesign .hs-filters .hs-f-group { width: 100%; }
  /* :not([type="checkbox"]): width:100% wuerde sonst auch die Kommerziell-
     Checkbox aufblasen und ihren Text in einen schmalen Dreizeiler quetschen
     (Nicoles iPhone-Fund, 02.08.2026) - gilt fuer BEIDE Filter. */
  .hs-redesign .hs-filters select,
  .hs-redesign .hs-filters input:not([type="checkbox"]) { width: 100%; min-width: 0; }
  .hs-redesign .hs-filters .hs-f-multi > summary { width: 100%; max-width: none; min-width: 0; }
}
@media (max-width: 600px) {
  .hs-redesign .hs-soc-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   PROFILE (Nicole, 18.07.2026): menu entry with a head-and-shoulders icon
   + modal with the notification switches and the account-delete link.
   ========================================================================= */

/* Menu icon: inline stroke SVG, inherits the menu's text colour (also its
   hover colour - currentColor). Sized to sit on the text line. */
.hs-menu-profile .hs-menu-profile-icon {
  width: 17px;
  height: 17px;
  vertical-align: -3px;
  margin-right: 7px;
}

/* =========================================================================
   DIE DREI HAUPTWOERTER: HOME · HUDDLE UP · HUDDLE IN (Nicole, 29.07.2026)

   Alle drei fett, das aktive in Magenta. Gilt nur fuer die OBERSTE Ebene
   (> .menu-item >), damit die Eintraege im Aufklapp-Menue normal bleiben -
   sonst waere alles gleich laut und nichts mehr betont.

   Astras Aktiv-Farbe kommt aus dem Customizer und ist dort ein dunkles
   Oliv - deshalb !important, sonst gewinnt sie.
   ========================================================================= */
.main-header-menu > .menu-item > .menu-link { font-weight: 700; }
.main-header-menu > .menu-item.current-menu-item > .menu-link,
.main-header-menu > .menu-item.current_page_item > .menu-link,
.main-header-menu > .menu-item.current-menu-ancestor > .menu-link,
.main-header-menu > .menu-item.current-menu-parent > .menu-link {
  color: var(--hs, #FA06C6) !important;
}

/* =========================================================================
   DAS AUFKLAPP-MENUE UNTER "HUDDLE IN" (Nicole, 29.07.2026)

   Astra liefert eine weisse Box ohne Kontur, sehr luftig, mit umbrechenden
   Eintraegen. Hier bekommt sie das Hausrezept: eckig, 2px schwarze Kontur,
   duennere Trennlinien dazwischen (Regel: Linien immer duenner als der
   Rahmen), Magenta erst beim Draufzeigen.

   Bewusst im PLUGIN-CSS und nicht im WordPress-Customizer: was dort steht,
   gilt nur fuer diese eine Installation - ein Kaeufer bekaeme ein nacktes
   Menue (siehe [[verkauf-multi-install]]).

   Nur DESKTOP: am Handy klappt Astra das Untermenue in die Schublade, dort
   gehoert kein Kasten hin. Astras eigene Grenze ist 921px.
   ========================================================================= */
@media (min-width: 922px) {
  .hs-menu-huddle-in .sub-menu {
    border: 2px solid var(--ink, #0B0B0D) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
    padding: 0 !important;
    /* Breit genug fuer "Die Donnerstagsrunde" in einer Zeile - umbrechende
       Society-Namen sahen aus wie zwei Eintraege. */
    min-width: 260px;
  }
  .hs-menu-huddle-in .sub-menu > li { border-top: 1px solid var(--ink, #0B0B0D); }
  .hs-menu-huddle-in .sub-menu > li:first-child { border-top: 0; }
  .hs-menu-huddle-in .sub-menu > li > .menu-link {
    padding: 11px 16px !important;
    line-height: 1.25 !important;
    white-space: nowrap;
  }
  .hs-menu-huddle-in .sub-menu > li > .menu-link:hover,
  .hs-menu-huddle-in .sub-menu > li > .menu-link:focus-visible {
    background: var(--hs, #FA06C6) !important;
    color: var(--ink, #0B0B0D) !important;   /* Magenta traegt schwarze Schrift */
  }
  /* Abmelden steht abgesetzt: es ist die einzige Zeile, die etwas beendet
     statt irgendwohin zu fuehren. Kraeftigere Linie statt roter Schrift -
     gefaehrlich ist es nicht, nur anders. */
  .hs-menu-huddle-in .sub-menu > li.hs-menu-logout { border-top-width: 2px; }
}

/* --- Handy: Trennlinien schwarz statt rosa (Nicole, 29.07.2026) -----------
   Astra faerbt die Linien in der Schublade rosa. Im Haus sind Linien schwarz
   - hier wird nur die FARBE ueberschrieben, die Staerke bleibt Astras Sache
   (Regel: Trennlinien immer duenner als die Outline drumherum).

   Mehrere Selektoren, weil Astra den Rand je nach Version mal am <li> und mal
   am Link haengen hat. Was nicht greift, schadet nicht. */
@media (max-width: 921px) {
  .ast-mobile-popup-drawer .main-header-menu .menu-item,
  .ast-mobile-popup-drawer .main-header-menu .menu-link,
  .ast-mobile-popup-drawer .ast-nav-menu .menu-item,
  .ast-mobile-popup-drawer .ast-nav-menu .menu-link,
  #ast-mobile-header .main-header-menu .menu-item,
  #ast-mobile-header .main-header-menu .menu-link {
    border-color: var(--ink, #0B0B0D) !important;
  }
}

/* --- Handy: HUDDLE IN steht offen (Nicole, 29.07.2026) --------------------
   In der Schublade schwebt nichts ueber der Seite - was drinsteht, schiebt
   nur nach unten. Also gleich alles zeigen, statt erst tippen zu lassen.
   Am Rechner geht das NICHT: dort haengt das Menue ueber dem Inhalt und
   wuerde ihn dauerhaft zudecken.

   Der Pfeil verschwindet mit: er verspraeche eine Bewegung, die es nicht
   mehr gibt. Astras Klapp-JS laeuft weiter, kommt aber gegen !important
   nicht an - deshalb kann die Schublade nicht versehentlich zuklappen. */
@media (max-width: 921px) {
  .hs-menu-huddle-in > .sub-menu {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
  .hs-menu-huddle-in > .ast-menu-toggle { display: none !important; }
  /* Eingerueckt, damit man sieht: das gehoert unter HUDDLE IN. */
  .hs-menu-huddle-in > .sub-menu > li > .menu-link { padding-left: 34px !important; }
}

/* Modal internals. All rules hang off descendants of .hs-modal-content -
   the outer div IS the .hs-redesign (see the modal hull notes above). */
.hs-redesign .hs-profile-who { margin: 0 0 18px; }
.hs-redesign .hs-profile-name { font-weight: 700; font-size: 16px; }
.hs-redesign .hs-profile-email { color: var(--ink); font-size: 14px; }

/* "E-Mail ändern" / "Passwort ändern": word links behind the address. */
.hs-redesign a#hs-profile-change-email,
.hs-redesign a#hs-profile-change-password,
.hs-redesign a#hs-profile-change-name,
.hs-redesign a#hs-profile-data-export {
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
}
.hs-redesign a#hs-profile-change-email:hover,
.hs-redesign a#hs-profile-change-password:hover,
.hs-redesign a#hs-profile-change-name:hover,
.hs-redesign a#hs-profile-data-export:hover { color: var(--hs); }
/* Fold-out forms = WHITE round cards with black outline (Nicole, 19.07.2026:
   "aus den weißen Rechtecken weiße Rundecke mit schwarzer Outline"). */
.hs-redesign #hs-profile-email-form,
.hs-redesign #hs-profile-password-form {
  margin: 0 0 18px;
  padding: 14px 16px;
  background: var(--paper);
  border: 4px solid var(--ink);
  border-radius: var(--radius);
}
.hs-redesign #hs-profile-email-form .hs-form-group,
.hs-redesign #hs-profile-password-form .hs-form-group { margin-bottom: 10px; }

/* Fields in the little fold-out forms: the shell recipe (square, 2px black
   frame) - the generic field style does not reach into the menu-rendered
   modal (Nicole: "weißer Kasten ohne Feld-Rahmen"). */
.hs-redesign #hs-profile-email-form .hs-input,
.hs-redesign #hs-profile-password-form .hs-input {
  background: var(--paper) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 0 !important;
  color: var(--ink) !important;
  font-family: var(--body) !important;
}
.hs-redesign #hs-profile-email-form label,
.hs-redesign #hs-profile-password-form label {
  color: var(--ink);
  font-weight: 700;
  font-size: 13px;
}

/* Section heads sit behind a 2px line - same voice as the event modal
   sections (Nicole, 19.07.2026: "Farbe & Linien"). */
.hs-redesign .hs-profile-section-title {
  font-family: var(--display) !important;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: 15px;
  color: var(--ink);
  border-top: 2px solid var(--ink);
  padding-top: 14px;
  margin: 18px 0 6px;
}
.hs-redesign .hs-profile-hint {
  font-size: 13px;
  color: var(--ink);
  margin: 0 0 12px;
}

/* Grouping (Nicole, 18.07.2026: "gleiche Abstände verwirren das Auge"):
   a society's name HUGS its switches (4px), the real air sits BETWEEN the
   societies (16px) - what belongs together stands together. */
.hs-redesign .hs-profile-notify-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0 0 4px;
}
/* Hairline between the societies (1px - thinner than the section lines). */
.hs-redesign .hs-profile-notify-row {
  display: block;
  border-bottom: 1px solid #E4E6EC;
  padding-bottom: 12px;
}
.hs-redesign .hs-profile-notify-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.hs-redesign .hs-profile-notify-society {
  display: block;
  font-weight: 700;
  margin-bottom: 4px;
}
.hs-redesign .hs-profile-notify-opts {
  display: flex;
  gap: 16px;
}
.hs-redesign .hs-profile-notify-opt {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 14px;
}
.hs-redesign .hs-profile-notify-toggle {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--ink);
  cursor: pointer;
}

/* Account delete: danger word link = RED (Nicole, 19.07.2026 - danger is
   red everywhere: Gefahrenzone, "Event absagen", this), behind a 2px line. */
.hs-redesign .hs-profile-footer {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 2px solid var(--ink);
}
/* Danger = red, everywhere (Nicole's decision, 19.07.2026). One recipe for
   every "this removes something" word link; #hs-profile-delete-account keeps
   its own selector so older markup without the class stays red too. */
.hs-redesign .hs-danger-link,
.hs-redesign a#hs-profile-delete-account {
  color: #cc0000;
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
}
.hs-redesign .hs-danger-link:hover,
.hs-redesign a#hs-profile-delete-account:hover {
  color: var(--hs);
}

/* MEINE SOCIETIES: one row per membership - name + role/date left, the
   leave link right. Hair lines between rows, same as the notify list. */
.hs-redesign .hs-profile-society-list { margin-bottom: 4px; }
.hs-redesign .hs-profile-society-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #E4E6EC;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.hs-redesign .hs-profile-society-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}
.hs-redesign .hs-profile-society-info { display: block; }
.hs-redesign a.hs-profile-society-name {
  display: block;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}
.hs-redesign a.hs-profile-society-name:hover { color: var(--hs); }
.hs-redesign .hs-profile-society-meta {
  display: block;
  font-size: 13px;
  color: var(--ink);
  margin-top: 2px;
}
.hs-redesign .hs-profile-society-meta .hs-status-admin {
  font-weight: 700;
  color: var(--hs);
}
.hs-redesign .hs-profile-society-meta .hs-status-pending {
  font-weight: 700;
  color: var(--hs);
}
/* The membership number (Nicole, 21.07.2026): bold and slightly spaced so it
   reads as a REFERENCE you might copy onto a bank transfer, not as prose. */
.hs-redesign .hs-member-number {
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}
/* A row that just lost its membership fades out instead of jumping away. */
.hs-redesign .hs-profile-society-row.hs-row-leaving {
  opacity: .4;
  transition: opacity .2s ease;
}

/* =========================================================================
   EVENT DETAIL MODAL: Ordnung + CI (Nicole, 18.07.2026). Clear sections
   separated by 2px lines (thinner than any outline), section headings in
   Archivo Black caps, the modal recipe for fields (grey surface, white
   fields), word links for the manage actions, new-palette green for the
   registered note. Everything hangs off .hs-modal-content descendants.
   ========================================================================= */

/* Info rows: bold black label, plain value. flex-direction: row is EXPLICIT:
   events.css stacks these rows to column on mobile (old design) - then the
   label's flex-basis 110px becomes 110px of HEIGHT and every row gapes open
   (Nicole's screenshot 19.07.2026). Long values wrap below the label. */
.hs-redesign .hs-event-detail-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 3px 0;
  font-size: 14px;
  color: var(--ink);
}
.hs-redesign .hs-event-detail-label {
  font-weight: 700;
  color: var(--ink);
  flex: 0 0 110px;
}
/* flex 1 1 200px: the value (also the multi-line description) stays BESIDE
   its label and wraps within its own column instead of dropping below. */
.hs-redesign .hs-event-detail-value {
  color: var(--ink);
  flex: 1 1 200px;
  min-width: 0;
}

/* Sections: 2px dividers, headings in caps. */
.hs-redesign .hs-event-participants-section,
.hs-redesign .hs-event-register-section,
.hs-redesign .hs-event-comments-section {
  border-top: 2px solid var(--ink);
  margin-top: 14px;
  padding-top: 12px;
}
.hs-redesign .hs-event-participants-header,
.hs-redesign .hs-event-comments-title {
  font-family: var(--display) !important;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: 15px;
  color: var(--ink);
  margin: 0 0 8px;
}

/* "Du bist angemeldet!": green FIELD, new palette, black text - same voice
   as the poll result note. */
/* "Du bist angemeldet!": NO box any more - the green textmarker bar in the
   type, same recipe as the active admin tab, just green (Nicole, 19.07.2026). */
.hs-redesign .hs-event-reg-status {
  display: inline-block;
  background: linear-gradient(180deg, transparent 62%, color-mix(in srgb, var(--c-green) 55%, transparent) 62%);
  background-clip: content-box;
  border: none;
  color: var(--ink);
  font-weight: 700;
  font-size: 14px;
  padding: 0;
  margin: 0 0 12px;
}

/* Registered row (Nicole, 19.07.2026): green field LEFT, Abmelden hard
   RIGHT in ORANGE - black text like every palette colour. */
.hs-redesign .hs-event-reg-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.hs-redesign .hs-event-reg-row .hs-event-reg-status { margin: 0; }
.hs-redesign .hs-event-reg-row #hs-event-unregister-btn {
  background: var(--c-pink) !important;   /* palette key "pink" = orange */
  color: var(--ink) !important;
  border: none !important;
}

/* The detail modal joins the grey modal shell like all the others
   (Nicole, 19.07.2026) - beats the theme-specific white in events.css. */
.hs-redesign .hs-modal-content.hs-event-modal-content {
  background: var(--paper-2) !important;
}

/* Notices (past / full / guest): quiet white fields, black text. */
.hs-redesign .hs-event-past-notice,
.hs-redesign .hs-event-coop-guest-notice {
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
}

/* Manage row (Bearbeiten/Absagen): WORD LINKS, flush left behind a 2px line.
   Only this row - Freigeben/Ablehnen keep their real buttons. The !important
   battle is against .hs-btn + Astra. */
/* "In meinen Kalender" - word link (recipe: black bold underline, hover
   magenta), right-aligned above the section line (Nicole, 19.07.2026). */
.hs-redesign .hs-event-ics-row {
  margin-top: 10px;
  text-align: right;
}
.hs-redesign .hs-event-ics-row .hs-event-ics-link {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: underline;
}
.hs-redesign .hs-event-ics-row .hs-event-ics-link:hover {
  color: var(--hs);
}

/* Modal section separators: black 2px lines above the registration status
   and the comments (Nicole, 19.07.2026 - thinner than the 4px outline). */
.hs-redesign .hs-modal-content .hs-event-register-section {
  border-top: 2px solid var(--ink);
  margin-top: 14px;
  padding-top: 14px;
}
.hs-redesign .hs-modal-content .hs-event-comments-section {
  border-top: 2px solid var(--ink);
  margin-top: 14px;
  padding-top: 14px;
}

/* Bearbeiten/Absagen: at the very bottom, each on its own line, lowercase
   word links (NO caps - "so sehen unsere Links nicht aus"). */
.hs-redesign .hs-event-manage-row {
  border-top: 2px solid var(--ink);
  margin-top: 14px;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.hs-redesign .hs-event-manage-row .hs-btn {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-family: var(--body) !important;
  font-size: 13px !important;
  font-weight: 700;
  color: var(--ink) !important;
  text-decoration: underline !important;
  cursor: pointer;
}
.hs-redesign .hs-event-manage-row .hs-btn:hover {
  color: var(--hs) !important;
}
.hs-redesign .hs-event-manage-row .hs-btn-danger {
  color: #cc0000 !important;
}
.hs-redesign .hs-event-manage-row .hs-btn-danger:hover {
  color: var(--hs) !important;
}

/* Comments: the pinnwand recipe - white boxes without frames on the grey
   surface (content, not fields), the write field with its 2px frame. */
.hs-redesign .hs-event-comment-item {
  background: var(--paper);
  border: none;
  border-radius: 0;
  padding: 8px 10px;
  margin-bottom: 8px;
}
.hs-redesign .hs-event-comment-date { color: var(--ink); }
.hs-redesign .hs-event-comments-empty {
  color: var(--ink);
  font-size: 13px;
  margin: 0 0 8px;
}
.hs-redesign .hs-event-add-comment {
  display: flex;
  flex-direction: column;
  align-items: flex-end;   /* Senden right-aligned (Nicole, 19.07.2026) */
  gap: 8px;
}
.hs-redesign .hs-event-add-comment textarea {
  width: 100%;
  font-family: var(--body) !important;
  background: var(--paper) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 0 !important;
  color: var(--ink) !important;
}

/* ==========================================================================
   Verwaltung (?admin=1) - Streifen + CI-Kopf
   The frontend admin joins the redesign: a white head band with the SAME
   head tile as the society page (colour bar in the 4px black outline), then
   every .hs-admin-box paints its own full-width stripe, alternating
   grey/white. Alternation is nth-of-type so it survives conditional boxes
   (cooperations tab renders 2-5 of them).
   ========================================================================== */

/* Old main.css skin (narrow grey centred column) steps back - the bands own
   the surface. Two classes beat the single-class .hs-admin-theme-* whites. */
.hs-redesign .hs-society-admin {
  max-width: none;
  background: transparent;
  padding: 0;
  border-radius: 0;
}

/* Head tile: colour bar + white body (the tabs), exactly like the society
   page head with its info bar (Nicole, 18.07.2026). The 2px divider between
   colour and white comes from .hs-society-header (main.css). Palette rule:
   every society colour carries black text. */
.hs-redesign.hs-society-admin-band .hs-society-header {
  padding: 28px 24px 20px;
}
.hs-redesign.hs-society-admin-band .hs-society-header h1 { color: var(--ink); }

/* "Zurück zur Society": stays on the colour, but bigger (Nicole). */
.hs-redesign.hs-society-admin-band .hs-header-back-link .hs-link {
  font-size: 18px;
  font-weight: 700;
}

/* Tabs = the white body of the head tile. Black is the UI accent (the light
   lila cannot do that job, see --c-accent above) - active black underline,
   hover brand magenta. No own divider: the tile's 4px outline closes it. */
.hs-redesign.hs-society-admin-band .hs-admin-tabs {
  margin: 0;
  border-bottom: 0;
  padding: 16px 20px 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Air between the head tile and the grey stripe (Nicole, 18.07.2026 -
   the tile sat directly on the grey). Explicit, so no outer rule can
   swallow the white gap again. */
.hs-redesign.hs-society-admin-band .hs-band {
  padding: 44px 0 40px;
}
/* All tabs black; the ACTIVE one carries the textmarker bar from the home
   claim (Nicole, 19.07.2026) - magenta here because magenta = active in the
   admin. background-clip keeps the marker on the text line, not the padding. */
.hs-redesign.hs-society-admin-band .hs-tab { color: var(--ink); }
.hs-redesign.hs-society-admin-band .hs-tab:hover { color: var(--hs); }
.hs-redesign.hs-society-admin-band .hs-tab.active {
  color: var(--ink);
  border-bottom-color: transparent;
  background: linear-gradient(180deg, transparent 62%, color-mix(in srgb, var(--hs) 42%, transparent) 62%);
  background-clip: content-box;
}

/* Stripes: each box is a full-width band; the readable width comes from the
   side padding (same 1080px line as .hs-wrap = 1040px content + 20px air). */
.hs-redesign .hs-admin-content { padding: 0; }
.hs-redesign .hs-admin-content .hs-admin-box {
  margin: 0;
  border-radius: 0;
  background: var(--paper);
  padding: 40px max(20px, calc((100% - 1040px) / 2));
}
.hs-redesign .hs-admin-content .hs-admin-box:nth-of-type(odd) {
  background: var(--paper-2);
}

/* Section headings on the stripes: same voice as the module headings. */
.hs-redesign .hs-admin-content .hs-admin-box > h3 {
  font-size: 24px;
  letter-spacing: .02em;
  margin: 0 0 20px;
}

/* Gefahrenzone: the stripe is BLACK, the red-bordered card inside is filled
   WHITE (Nicole, 19.07.2026). Last so it wins against the nth rule above. */
.hs-redesign .hs-admin-content .hs-admin-box.hs-danger-band {
  background: var(--ink);
}
.hs-redesign .hs-admin-content .hs-danger-zone {
  background: var(--paper);
  border: 2px solid #dc3232;
  border-radius: var(--radius);
  padding: 24px;
}
.hs-redesign .hs-admin-content .hs-danger-zone h3 {
  color: #dc3232;
  font-size: 24px;
  letter-spacing: .02em;
  margin: 0 0 20px;
}

@media (max-width: 760px) {
  .hs-redesign .hs-admin-content .hs-admin-box { padding-top: 24px; padding-bottom: 24px; }
}

/* --- Table (Nicole, 18.07.2026, final call) -----------------------------
   Rectangular table, black text on white, black 2px line under the column
   titles - and the CONTAINER is the round-cornered box with the thick black
   outline. NOTE: main.css paints its black on the th CELLS themselves
   (.hs-table thead th, line ~358) - that is why colouring the thead behind
   them did nothing. Overridden on th level here. The explicit fonts exist
   because .hs-table (main.css ~354) re-declares the theme font stack. */

.hs-redesign .hs-admin-content .hs-table-container {
  border: 4px solid var(--ink);
  border-radius: var(--radius);
  background: var(--paper);
  /* overflow-x: auto stays from main.css (phones scroll the table) and
     also clips the rows into the round corners. */
}
.hs-redesign .hs-admin-content .hs-table { background: var(--paper); }
.hs-redesign .hs-admin-content .hs-table thead { background: var(--paper); }
.hs-redesign .hs-admin-content .hs-table thead th {
  background: var(--paper);
  font-family: var(--display) !important;
  font-weight: 400 !important;
  font-size: 13px;
  color: var(--ink);
  /* !important: Astra paints its own (orange) border onto th - the plugin
     CSS has no orange anywhere near tables, the theme does. */
  border: 0 !important;
  border-bottom: 2px solid var(--ink) !important;
}
/* Both column-head arrows in one voice: same size, same black. */
.hs-redesign .hs-admin-content .hs-table .hs-sort-icon,
.hs-redesign .hs-admin-content .hs-table .hs-ort-arrow {
  color: var(--ink);
  font-size: 10px;
  margin-left: 4px;
}
/* Row lines live on the CELLS: with border-collapse the cell border beats
   the row border (main.css gives every td a white 1px border - that is why
   the row lines were invisible). Hairline grey between rows, cells top-
   aligned (Nicole, 18.07.2026). !important against the same main.css/Astra
   cell borders. */
.hs-redesign .hs-admin-content .hs-table td {
  font-family: var(--body) !important;
  vertical-align: top;
  border: 0 !important;
  border-bottom: 1px solid #E4E6EC !important;
}
.hs-redesign .hs-admin-content .hs-table tbody tr,
.hs-redesign .hs-admin-content .hs-table tbody tr:nth-child(odd),
.hs-redesign .hs-admin-content .hs-table tbody tr:nth-child(even),
.hs-redesign .hs-admin-content .hs-table tbody tr:hover {
  background: var(--paper);
}
/* No 1px line ON the 4px tile outline. */
.hs-redesign .hs-admin-content .hs-table tbody tr:last-child td { border-bottom: 0 !important; }

/* The orange/pink shimmer inside the tile outline came from theme borders/
   shadows on the table itself - kill every frame except the tile outline. */
.hs-redesign .hs-admin-content .hs-table,
.hs-redesign .hs-admin-content .hs-table tr {
  border: 0 !important;
  box-shadow: none !important;
}
.hs-redesign .hs-admin-content .hs-table-container { box-shadow: none !important; }

/* Checkboxes: black tick, never browser blue/lilac (Nicole, 18.07.2026).
   Whole admin, not just tables - the cooperation cards have them too. */
.hs-redesign .hs-admin-content input[type="checkbox"] { accent-color: var(--ink); }

/* Title cell: bold title, regular byline, quiet flags line. */
.hs-redesign .hs-admin-content .hs-ev-byline { font-weight: 400; }
.hs-redesign .hs-admin-content .hs-ev-flags { color: var(--ink-soft); font-size: 12px; }

/* Participants: the black pill WAS the "who is registered?" button - same
   click, now in the word-link voice (bold + underline; plain number = not
   clickable because nobody registered yet). */
.hs-redesign .hs-admin-content .hs-open-participants-modal {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  color: var(--ink) !important;
  font-family: var(--body) !important;
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
.hs-redesign .hs-admin-content .hs-open-participants-modal:hover { color: var(--hs) !important; }

/* FONTS, root cause (Nicole: "FONTS CHECKEN!!!!"): Astra styles p, label,
   li & co DIRECTLY - a direct rule always beats inheritance from our root.
   So: blanket Archivo on everything in the admin; the display voices below
   win it back through higher specificity. */
.hs-redesign .hs-admin-content,
.hs-redesign .hs-admin-content * { font-family: var(--body) !important; }
.hs-redesign .hs-admin-content h1,
.hs-redesign .hs-admin-content h2,
.hs-redesign .hs-admin-content h3,
.hs-redesign .hs-admin-content h4,
.hs-redesign .hs-admin-content .hs-btn,
.hs-redesign .hs-admin-content .hs-table thead th { font-family: var(--display) !important; }

/* Event actions: no underline - the AKTIONEN head already says these work
   (Nicole, 18.07.2026). Hover keeps the magenta answer. */
.hs-redesign .hs-admin-content .hs-actions-cell .hs-link { text-decoration: none !important; }
.hs-redesign .hs-admin-content .hs-actions-cell .hs-link:hover { color: var(--hs) !important; }

/* Participants column (events table only, 5th): numbers centred under the
   head - keeps them clear of the Ort column. Top-aligned as everywhere. */
.hs-redesign .hs-admin-content .hs-events-admin-tab .hs-table th:nth-child(5),
.hs-redesign .hs-admin-content .hs-events-admin-tab .hs-table td:nth-child(5) { text-align: center; }

/* Member role: ADMIN as a bold magenta word, no pill (Nicole, 18.07.2026). */
.hs-redesign .hs-admin-content .hs-role-badge {
  background: none;
  padding: 0;
  border-radius: 0;
  color: var(--hs);
  font-weight: 800;
  font-size: 13px;
}

/* Cooperations: active cooperation = white card with the standard black
   outline; the request form = round-cornered card, stripe-grey fill,
   white RECTANGULAR fields (Nicole, 18.07.2026). !important on the fields
   because Astra styles inputs. */
.hs-redesign .hs-admin-content .hs-coop-item {
  background: var(--paper);
  border: 4px solid var(--ink);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.hs-redesign .hs-admin-content .hs-coop-request-card {
  background: var(--paper-2);
  border: 4px solid var(--ink);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.hs-redesign .hs-admin-content .hs-coop-request-card .hs-input {
  background: var(--paper) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 0 !important;
}
/* main.css sets appearance:none on .hs-input selects (Astra fight) and
   thereby kills the native dropdown arrow - give it back, same fix as in
   the modal shell. */
.hs-redesign .hs-admin-content .hs-coop-request-card select.hs-input {
  appearance: auto !important;
  -webkit-appearance: auto !important;
}

/* Status = coloured WORD, not a pill (Nicole, 18.07.2026). The colours are
   meaning, not decoration: green = active, magenta = pending (sorted in
   with the rest, the word flags it), red = blocked/cancelled/rejected.
   Cancelled ROWS keep their pink surface from events.css - that stays. */
.hs-redesign .hs-admin-content .hs-status-badge {
  background: none;
  padding: 0;
  border-radius: 0;
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.hs-redesign .hs-admin-content .hs-status-active { color: #10A248; }   /* readable green, NOT the pale tile green */
.hs-redesign .hs-admin-content .hs-status-pending { color: var(--hs); } /* brand magenta */
.hs-redesign .hs-admin-content .hs-status-blocked { color: #dc3232; }

/* =========================================================================
   EVENT PHOTOS (Nicole, 20.07.2026). Square thumbnails so a mixed bag of
   portrait and landscape phone shots still forms a tidy grid.
   ========================================================================= */
/* Same divider recipe as the comments section above it. */
.hs-redesign .hs-event-photos-section,
.hs-redesign .hs-modal-content .hs-event-photos-section {
  border-top: 2px solid var(--ink);
  margin-top: 14px;
  padding-top: 14px;
}

.hs-redesign .hs-photos { margin-top: 8px; }

/* Section head in the modal, matching KOMMENTARE / TEILNEHMER. */
.hs-redesign .hs-modal-section-title {
  font-family: var(--display) !important;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: 15px;
  color: var(--ink);
  margin: 0 0 10px;
}

.hs-redesign .hs-photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.hs-redesign .hs-photo { margin: 0; }
.hs-redesign .hs-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 2px solid var(--ink);
  background: #fff;
}
.hs-redesign .hs-photo figcaption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  margin-top: 3px;
}
.hs-redesign .hs-photo-by { color: var(--ink); }
.hs-redesign .hs-photo-delete {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  font-size: 12px !important;
  cursor: pointer;
}

/* "Fotos hinzufügen" is a <label> wrapping a hidden file input - it has to
   look and behave like the black buttons everywhere else. */
.hs-redesign .hs-photo-upload {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.hs-redesign .hs-photo-upload-btn {
  display: inline-block;
  background: var(--ink);
  color: #fff;
  font-family: var(--display) !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 13px;
  padding: 8px 14px;
  cursor: pointer;
}
.hs-redesign .hs-photo-upload-btn:hover { background: var(--hs); color: var(--ink); }

.hs-redesign .hs-photo-hint,
.hs-redesign .hs-photo-progress { font-size: 13px; color: var(--ink); }

.hs-redesign .hs-photo-consent,
.hs-redesign .hs-photo-quota {
  font-size: 12px;
  color: var(--ink);
  margin: 8px 0 0;
}
.hs-redesign .hs-photos-empty { font-size: 14px; margin: 0 0 12px; }

/* The opened photo (Nicole, 21.07.2026). It lies OVER the page instead of in
   a new tab - in the installed web app there is no back button, so a new tab
   was a dead end. The close word link sits below the iPhone notch
   (safe-area-inset) and is white, because it stands on black. */
.hs-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(0, 0, 0, .92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.hs-lightbox img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}
.hs-lightbox-close {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top));
  right: 16px;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 10px !important;
  font-family: var(--body) !important;
  font-size: 16px;
  font-weight: 700;
  color: #fff !important;
  text-decoration: underline;
  cursor: pointer;
}

/* Three thumbnails on the archive tile - a taste, not a gallery. */
.hs-redesign .hs-ev-photos {
  display: flex;
  gap: 4px;
  padding: 8px 16px 12px;
}
.hs-redesign .hs-ev-photos img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border: 2px solid var(--ink);
  display: block;
}

/* =========================================================================
   "WAR SCHON" - the archive under the pinnwand (Nicole, 20.07.2026).
   White band: the pinnwand above it is grey, so the alternation continues.
   ========================================================================= */
/* The caesura sentence uses .hs-kicker (see "Streifen 5: kluger Satz") - no
   own recipe here on purpose. It only needs its spacing inside this band,
   since .hs-kicker brings a 44px top margin meant for the home page. */
.hs-redesign.hs-society-claim-band .hs-kicker {
  margin: 0 auto;
  max-width: 20ch;
}

/* FOTOWAND als ALBEN (Nicoles Design, 23.09.2026 abends): jede Gruppe ein
   Streifen wie der Fotostreifen oben - sechs Bilder sichtbar, mehr per
   Pfeil/Wischen (Pfeile + Scroll-Logik kommen von .hs-band-pics). "Unsere
   Society" = nur Bilder, kein Kopf, keine Linie. Event-Alben starten mit
   einer Kachel in der Society-Farbe ("Event vom ..."), darin das Haekchen
   "einklappen". */
.hs-redesign .hs-picture-wall { margin: 0 0 40px; }
.hs-redesign .hs-picture-wall * { font-family: var(--body) !important; }
.hs-redesign .hs-picture-wall .hs-past-title { font-family: var(--display) !important; }
.hs-redesign .hs-wall-intro { font-size: 15px; color: var(--ink); margin: 0 0 6px; }
.hs-redesign .hs-wall-album { margin: 0; }
/* Sechs Kacheln pro Blick; --wall-tile ist die Kachelbreite. Links buendig,
   nicht mittig wie der Fotostreifen. */
.hs-redesign .hs-wall-strip { margin: 12px auto 0; --wall-tile: calc((100% - 5 * 12px) / 6); }
.hs-redesign .hs-wall-strip .hs-band-track { justify-content: flex-start; align-items: flex-start; gap: 12px; padding: 2px; }
.hs-redesign .hs-wall-strip .hs-band-arrow { top: calc(var(--wall-tile) / 2 - 18px); }
.hs-redesign .hs-wall-pic { flex: 0 0 var(--wall-tile); width: var(--wall-tile); margin: 0; min-width: 0; scroll-snap-align: start; }
.hs-redesign .hs-wall-pic img {
  display: block; width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; object-fit: cover;
  border: 2px solid var(--ink); border-radius: 14px; background: #fff; cursor: zoom-in;
}
.hs-redesign .hs-wall-pic figcaption {
  font-size: 12px; line-height: 1.3; color: var(--ink); margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hs-redesign .hs-wall-credit { display: block; font-size: 11px; line-height: 1.3; color: #5a5d66; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-redesign .hs-wall-pic .hs-wall-del {
  display: block; background: none !important; border: 0 !important; padding: 0 !important; margin: 2px 0 0;
  box-shadow: none !important; min-height: 0 !important; font-family: var(--body) !important;
  font-size: 12px !important; font-weight: 700; text-transform: none !important; letter-spacing: 0 !important;
  cursor: pointer; text-decoration: underline;
}
/* Die Event-Kachel: gleiche Groesse wie ein Bild, Society-Farbe, Schrift
   kippt bei dunkler freier Farbe (--tile-fg). */
.hs-redesign .hs-wall-event-tile {
  flex: 0 0 var(--wall-tile); width: var(--wall-tile); aspect-ratio: 1 / 1; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 10px 12px;
  background: var(--tile, var(--hs)); color: var(--tile-fg, var(--ink));
  border: 2px solid var(--ink); border-radius: 14px; scroll-snap-align: start; min-width: 0;
}
.hs-redesign .hs-wall-event-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.hs-redesign .hs-wall-event-date { font-family: var(--display) !important; font-size: clamp(14px, 1.4vw, 19px); letter-spacing: -.01em; line-height: 1.1; }
.hs-redesign .hs-wall-event-name {
  font-size: 12px; line-height: 1.25; font-weight: 700;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hs-redesign .hs-wall-fold-box { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 12px; font-weight: 700; cursor: pointer; color: inherit; }
.hs-redesign .hs-wall-fold-box input { margin: 0; width: 16px; height: 16px; accent-color: var(--ink); cursor: pointer; }
/* Eingeklappt: nur die Event-Kachel bleibt stehen. */
.hs-redesign .hs-wall-album.is-folded .hs-wall-pic { display: none; }
@media (max-width: 767px) {
  .hs-redesign .hs-wall-strip { --wall-tile: calc((100% - 2 * 8px) / 3); }
  .hs-redesign .hs-wall-strip .hs-band-track { gap: 8px; }
  .hs-redesign .hs-wall-pic img, .hs-redesign .hs-wall-event-tile { border-radius: 10px; }
  .hs-redesign .hs-wall-event-tile { padding: 8px; overflow: hidden; }
  .hs-redesign .hs-wall-event-eyebrow { font-size: 9px; letter-spacing: .08em; }
  .hs-redesign .hs-wall-event-date { font-size: 12px; }
  .hs-redesign .hs-wall-event-name { font-size: 11px; -webkit-line-clamp: 1; }
  .hs-redesign .hs-wall-fold-box { font-size: 11px; }
  .hs-redesign .hs-wall-strip .hs-band-arrow { top: calc(var(--wall-tile) / 2 - 15px); }
}

.hs-redesign .hs-past-title {
  font-family: var(--display) !important;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: 24px;
  color: var(--ink);
  margin: 0 0 6px;
}
.hs-redesign .hs-past-intro {
  font-size: 15px;
  color: var(--ink);
  margin: 0 0 16px;
}

/* ⚠️ The global rule hides .hs-event-past (it exists so a past date can never
   linger in the calendar). The archive is the ONE place that must show them -
   without this line the section would render nothing at all. */
.hs-redesign .hs-society-past .hs-ev-card.hs-event-past {
  display: flex;
}

/* Past dates are history, not offers: they step back a little and do not
   pretend to be clickable buttons. The detail modal still opens. */
.hs-redesign .hs-society-past .hs-ev-card { opacity: .85; }
.hs-redesign .hs-society-past .hs-ev-card:hover { opacity: 1; transform: none; }

.hs-redesign .hs-past-toggle {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  font-family: var(--body) !important;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink) !important;
  text-decoration: underline;
  cursor: pointer;
}
.hs-redesign .hs-past-toggle:hover {
  color: var(--hs) !important;
  background: none !important;
}

.hs-redesign .hs-past-body { margin-top: 18px; }

.hs-redesign .hs-past-count {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

/* =========================================================================
   KACHELN sind DIE Ansicht (Nicole, 21.07.2026)

   The Kacheln/Liste switch and the whole .hs-view-list layout are gone -
   "Kachelansicht als Standard und nicht aenderbar ... keep it simple". One
   view means one layout to look after; the tile is the one Nicole designed.
   ========================================================================= */
/* =========================================================================
   OPERATOR NOTICE (Nicole, 20.07.2026): the platform operator's banner to
   society admins. Black band, white text - the same voice as the danger
   band, because this is "read me", not decoration. Deliberately NOT in a
   society colour: it does not belong to the society, it comes from outside.
   ========================================================================= */
/* SCHAUFENSTER (Nicole, 15.08.2026): die Demo-Verwaltung zum Ansehen.
   Weisser Kasten mit 2px schwarzem Rand wie jedes Feld - keine Pastellflaeche,
   kein Schatten. Der Marker links ist magenta: hier spricht die Marke, nicht
   die Society. */
.hs-redesign .hs-showcase-note {
  border: 2px solid var(--ink, #0B0B0D);
  border-left-width: 10px;
  border-left-color: var(--brand, #FA06C6);
  background: #fff;
  color: var(--ink, #0B0B0D);
  padding: 14px 16px;
  margin: 0 0 20px;
  font-family: var(--body) !important;
  font-size: 15px;
  line-height: 1.5;
  text-align: left;
}
/* Angetippt, obwohl nichts geht: der Hinweis blinkt EINMAL kurz auf - nur der
   Marker faerbt, nie der Text (Blink-Regel), und wer Bewegung abbestellt hat,
   bekommt keine. */
.hs-redesign .hs-showcase-note.is-pulse {
  animation: hs-showcase-pulse .6s ease-in-out 2;
}
@keyframes hs-showcase-pulse {
  0%, 100% { border-left-color: var(--brand, #FA06C6); }
  50%      { border-left-color: var(--ink, #0B0B0D); }
}
@media (prefers-reduced-motion: reduce) {
  .hs-redesign .hs-showcase-note.is-pulse { animation: none; }
}
/* Teilnahme-Spalte der Mitglieder-Verwaltung (seit 15.08.2026 anstelle der
   E-Mail-Adresse). Die Zahlen bleiben schwarz; nur "noch nichts" tritt zurueck,
   damit die Spalte beim Ueberfliegen nicht nach lauter Nullen aussieht. */
/* KEIN nowrap: am Handy schiebt eine starre Spalte Status und Aktionen aus
   dem Bild (selbst nachgesehen, 15.08.2026). Umbrochen steht "1 abgesagt"
   unter "12 zugesagt ·" - zwei kurze Zeilen statt einer langen. */
.hs-redesign .hs-member-attendance { min-width: 7em; }
.hs-redesign .hs-member-attendance span { white-space: nowrap; }
.hs-redesign .hs-attendance-none {
  color: #5a5d66;
  font-style: italic;
}
/* Stillgelegte Felder sollen lesbar bleiben - ausgegraut waere hier falsch,
   der Inhalt IST ja das, was gezeigt werden soll. */
.hs-redesign .hs-showcase .hs-admin-box input:disabled,
.hs-redesign .hs-showcase .hs-admin-box select:disabled,
.hs-redesign .hs-showcase .hs-admin-box textarea:disabled {
  background: #fff !important;
  color: var(--ink, #0B0B0D) !important;
  opacity: 1;
  -webkit-text-fill-color: var(--ink, #0B0B0D);
  cursor: default;
}
.hs-redesign .hs-operator-notice {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--ink);
  color: #fff;
  padding: 18px 20px;
  margin: 0 0 20px;
  /* The head tile centres its contents - without this the message drifted
     into the middle of the band and read like a caption (Nicole's screenshot,
     20.07.2026). A notice starts at the left edge, like every other text. */
  text-align: left;
  /* Magenta edge = the brand is speaking, not the society. The society's own
     colour is deliberately absent from this band. */
  border-left: 6px solid var(--hs);
}
.hs-redesign .hs-operator-notice-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display) !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 13px;
  color: var(--hs);
  white-space: nowrap;
  flex: none;
  padding-top: 2px;
}

/* The blinking marker (Nicole, 20.07.2026: "mach was blinkendes rein").
   The DOT blinks, never the text - blinking text cannot be read while it
   blinks, which would fight the message it is meant to draw attention to.

   Speed is deliberate: one pulse per 1.4s (~0.7 Hz). Anything above 3 Hz can
   trigger seizures in photosensitive people, so this stays far below - and it
   fades rather than hard-switching, which reads as a heartbeat instead of an
   alarm. */
.hs-redesign .hs-operator-notice-blink {
  width: 12px;
  height: 12px;
  flex: none;
  border-radius: 50%;
  background: var(--hs);
  animation: hs-notice-blink 1.4s ease-in-out infinite;
}

@keyframes hs-notice-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .15; }
}

/* Anyone who asked their system for less motion gets a solid dot instead. */
@media (prefers-reduced-motion: reduce) {
  .hs-redesign .hs-operator-notice-blink {
    animation: none;
    opacity: 1;
  }
}
.hs-redesign .hs-operator-notice-text {
  flex: 1 1 auto;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  text-align: left;
}
.hs-redesign .hs-operator-notice-close {
  flex: none;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  line-height: 1 !important;
  font-size: 22px;
  color: #fff !important;
  cursor: pointer;
}
.hs-redesign .hs-operator-notice-close:hover {
  color: var(--hs) !important;
  background: none !important;
}

@media (max-width: 600px) {
  .hs-redesign .hs-operator-notice {
    flex-wrap: wrap;
  }
  .hs-redesign .hs-operator-notice-text {
    flex: 1 1 100%;
    order: 3;
  }
}

/* MEMBERS: search box replacing the filter tabs (Nicole, 20.07.2026). Square
   white field with the 2px border, like every other field in the admin. */
.hs-redesign .hs-admin-content .hs-members-search {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
}
.hs-redesign .hs-admin-content .hs-members-search .hs-input {
  flex: 0 1 320px;
  border: 2px solid var(--ink) !important;
  border-radius: 0 !important;
  background: #fff !important;
  padding: 6px 10px !important;
}
.hs-redesign .hs-admin-content .hs-members-search-count {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

/* Sortable column heads. The arrow PAIR is drawn from the start in grey
   (Nicole, 20.07.2026: "ich sehe die Dreiecke erst, wenn ich klicke") - an
   invisible affordance is no affordance. The 18.07. rule still holds: grey
   means "you can sort here", and only the ACTIVE column blackens, and only
   the direction actually in force - so exactly one solid arrow on screen. */
.hs-redesign .hs-admin-content .hs-table th.hs-sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.hs-redesign .hs-admin-content .hs-table th.hs-sortable:hover {
  color: var(--hs);
}
.hs-redesign .hs-admin-content .hs-table th .hs-sort-icon {
  display: inline-flex;
  flex-direction: column;
  vertical-align: middle;
  margin-left: 6px;
  font-size: 8px;
  line-height: 0.85;
  color: #A9AEBC;
}
.hs-redesign .hs-admin-content .hs-table th .hs-sort-icon i {
  font-style: normal;
}
.hs-redesign .hs-admin-content .hs-table th.hs-sortable:hover .hs-sort-icon {
  color: var(--hs);
}
/* Active column: the arrow in force turns black, its counterpart fades back
   so the eye lands on one direction only. */
.hs-redesign .hs-admin-content .hs-table th.hs-sort-active .hs-sort-icon {
  color: var(--ink);
}
.hs-redesign .hs-admin-content .hs-table th.hs-sort-asc .hs-sort-icon i:last-child,
.hs-redesign .hs-admin-content .hs-table th.hs-sort-desc .hs-sort-icon i:first-child {
  opacity: 0.2;
}

/* ORT column: shortened with an ellipsis; ONE arrow in the column head
   expands/collapses it for all rows (events.js). */
.hs-redesign .hs-admin-content .hs-table td.hs-ort-cell {
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hs-redesign .hs-admin-content .hs-table.hs-ort-expanded td.hs-ort-cell {
  max-width: none;
  white-space: normal;
}
.hs-redesign .hs-admin-content .hs-ort-arrow { font-size: 12px; margin-left: 4px; }

/* Past events hide behind the word link below the table (black + bold,
   hover magenta - the standard word-link voice). */
.hs-redesign .hs-admin-content .hs-table tbody tr.hs-row-past { display: none; }
.hs-redesign .hs-admin-content .hs-table.hs-show-past tbody tr.hs-row-past { display: table-row; }
.hs-redesign .hs-admin-content .hs-past-events-row { margin: 14px 0 0; }
.hs-redesign .hs-admin-content .hs-past-events-link {
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}
.hs-redesign .hs-admin-content .hs-past-events-link:hover { color: var(--hs); }

/* Join button: ONE black button carrying the hint as its sub line, same
   pattern as the demo button. The sub line speaks the body voice. */
.hs-redesign.hs-society-head-band .hs-join-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.hs-redesign.hs-society-head-band .hs-join-btn-sub {
  font-family: var(--body) !important;
  font-size: 12px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* --- Settings sections in round cards (Nicole, 18.07.2026) -------------- */
/* Same recipe as the cooperation request: round grey card, black outline,
   white rectangular fields. .hs-link-card holds the invite / society links,
   the small one is the quieter society URL below the invite card. */
.hs-redesign .hs-admin-content .hs-form-card,
.hs-redesign .hs-admin-content .hs-link-card {
  background: var(--paper-2);
  border: 4px solid var(--ink);
  border-radius: var(--radius);
  padding: 18px 20px;
}
/* Explanatory texts in the admin are BLACK, not grey (Nicole, 19.07.2026 -
   grey only where it is deliberately subtle, e.g. the "Serie | öffentlich"
   flags line). main.css greys .hs-description. */
.hs-redesign .hs-admin-content .hs-description { color: var(--ink); }

/* Grey-text sweep (Nicole, 19.07.2026: "grey on grey does not work"): every
   hint/label/muted text in the admin goes black. Status words and word links
   keep their own colour rules (higher specificity). */
.hs-redesign .hs-admin-content .hs-setting-hint,
.hs-redesign .hs-admin-content .hs-hint,
.hs-redesign .hs-admin-content .hs-checkbox-label small.hs-hint,
.hs-redesign .hs-admin-content .hs-text-muted,
.hs-redesign .hs-admin-content .hs-empty-state p,
.hs-redesign .hs-admin-content .hs-setting-group label,
.hs-redesign .hs-admin-content .hs-form-group label {
  color: var(--ink);
}

/* One voice for the settings texts (Nicole, 19.07.2026): field/setting
   labels 16px bold, hint lines 14px, body texts keep their 16px. */
.hs-redesign .hs-admin-content .hs-setting-group label,
.hs-redesign .hs-admin-content .hs-form-group label {
  font-size: 16px;
  font-weight: 700;
}
.hs-redesign .hs-admin-content .hs-setting-hint,
.hs-redesign .hs-admin-content .hs-hint {
  font-size: 14px;
}

/* White variant: cards on a GREY stripe are white (band rule), e.g. the
   Society-Einstellungen block (Nicole, 19.07.2026). */
.hs-redesign .hs-admin-content .hs-form-card-white { background: var(--paper); }
.hs-redesign .hs-admin-content .hs-form-card .hs-input {
  background: var(--paper) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 0 !important;
}
.hs-redesign .hs-admin-content .hs-link-card + .hs-link-card {
  margin-top: 14px;
}

/* FREITEXT RULE (Nicole, 19.07.2026): multi-line text boxes are FILLED,
   never outlined - they take the OPPOSITE tone of their surface, same logic
   as cards on bands: WHITE field on a grey card, STRIPE-GREY field on a
   white card. Single-line fields keep the 2px black outline. */
.hs-redesign .hs-admin-content textarea.hs-input,
.hs-redesign .hs-admin-content .hs-form-card textarea.hs-input,
.hs-redesign .hs-admin-content .hs-coop-request-card textarea.hs-input {
  background: var(--paper) !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.hs-redesign .hs-admin-content .hs-form-card-white textarea.hs-input {
  background: var(--paper-2) !important;
}
/* The NEWS field previews the ticker: full palette ORANGE, black text
   (Nicole, 19.07.2026). Id selector beats the fill rules above. */
.hs-redesign .hs-admin-content textarea#hs-society-news {
  background: var(--c-pink) !important;   /* palette key "pink" = orange */
  color: var(--ink) !important;
}
.hs-redesign .hs-admin-content textarea#hs-society-news::placeholder {
  color: rgba(0, 0, 0, 0.55);
}

/* Air under the join button so it does not sit on the tile's divider
   (Nicole, 18.07.2026). */
.hs-redesign.hs-society-head-band .hs-join-btn { margin-bottom: 24px; }

/* Aufnahme-Anfrage, eingeloggter Weg (Nicole, 02.08.2026): Luft nach unten -
   Absenden-Knopf bzw. Antwort-Text klebten an der Kachelkante und ragten
   ueber die Rundung hinaus. */
.hs-redesign.hs-society-head-band .hs-society-auth { padding-bottom: 24px; }

/* Die Antwort nach dem Absenden ist Fliesstext, keine Meldebox - der
   2px-Rahmen (Login-Kasten-Muster, gedacht fuer Meldungen auf der vollen
   Society-FARBE) wirkte auf der weissen Kachel wie ein verirrtes Feld.
   Gilt fuer BEIDE Wege der Aufnahme-Anfrage; Fehler bleiben rot (Wort
   statt Rahmen). Login-/Registrier-Meldungen behalten ihre Box. */
.hs-redesign.hs-society-head-band #hs-request-loggedin-message,
.hs-redesign.hs-society-head-band #hs-request-message {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
}
.hs-redesign.hs-society-head-band #hs-request-loggedin-message.hs-message-error,
.hs-redesign.hs-society-head-band #hs-request-message.hs-message-error {
  color: #dc3232;
}

/* ==========================================================================
   Legal pages + FAQ (Impressum / Datenschutz / Nutzungsbedingungen / FAQ)
   Self-installing plugin pages, templates/frontend/legal-*.php
   ========================================================================== */

/* FONT ROOT CAUSE, same as the admin area: Astra styles p/li/td DIRECTLY,
   so the blanket rule first, then the display voice wins back the heads. */
.hs-redesign.hs-legal,
.hs-redesign.hs-legal * { font-family: var(--body) !important; }
.hs-redesign.hs-legal h1,
.hs-redesign.hs-legal h2,
.hs-redesign.hs-legal h3 {
  font-family: var(--display) !important;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--ink);
}

/* Long reading text wants a narrower column than the 1080px band width. */
.hs-redesign.hs-legal .hs-wrap { max-width: 860px; }

.hs-redesign.hs-legal h1 {
  font-size: clamp(30px, 6vw, 46px);
  line-height: 1.1;
  margin: 10px 0 6px;
}
.hs-redesign.hs-legal .hs-legal-stand {
  color: var(--ink-soft);
  font-size: 14px;
  margin: 0 0 8px;
}

/* Section heads carry the 2px divider - always thinner than any outline. */
.hs-redesign.hs-legal h2 {
  font-size: 19px;
  border-top: 2px solid var(--ink);
  padding-top: 20px;
  margin: 36px 0 12px;
}
.hs-redesign.hs-legal h3 { font-size: 16px; margin: 22px 0 8px; }

.hs-redesign.hs-legal p,
.hs-redesign.hs-legal li,
.hs-redesign.hs-legal address {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
}
.hs-redesign.hs-legal address { font-style: normal; }
.hs-redesign.hs-legal ul { padding-left: 22px; margin: 10px 0 16px; }

/* The closing kicker keeps the big serif voice of the home claim - the
   font sweep and the p-rule above must not flatten it (Nicole, 19.07.2026). */
.hs-redesign.hs-legal .hs-kicker,
.hs-redesign.hs-legal .hs-kicker b {
  font-family: var(--serif) !important;
}
.hs-redesign.hs-legal .hs-kicker {
  font-size: clamp(28px, 4.4vw, 46px);
  line-height: 1.25;
  margin: 44px auto 0;
  text-align: center;
}

/* Links speak the word-link voice: black + bold, hover magenta. */
.hs-redesign.hs-legal a {
  color: var(--ink) !important;
  font-weight: 700;
  text-decoration: underline;
}
.hs-redesign.hs-legal a:hover { color: var(--hs) !important; }

/* --- Das Rechtstext-Fenster (02.08.2026) -----------------------------------
   AGB + Datenschutz oeffnen aus den Zustimmungs-Haekchen (Registrierung,
   Gruenden, Aufnahme-Anfrage) im geteilten Modal-Gehaeuse - kein neues
   Fenster, die Web-App hat keinen Zurueck-Knopf. Der Text kommt 1:1 aus den
   legal-*.php-Templates und bringt seine Seiten-Verpackung (.hs-band /
   .hs-wrap) mit; hier wird sie auf Fenster-Masse zurueckgebaut. */
#hs-legal-modal .hs-modal-content { max-width: 720px; }
#hs-legal-modal .hs-legal-modal-body { padding: 0 18px 24px; }
#hs-legal-modal .hs-legal .hs-band { padding: 0; background: none; }
#hs-legal-modal .hs-legal .hs-wrap { max-width: none; padding: 0; }
/* Der Titel steht schon im Fensterkopf - die grosse H1 der Seite waere
   doppelt. Die Stand-Zeile bleibt. */
#hs-legal-modal .hs-legal h1 { display: none; }
#hs-legal-modal .hs-legal .hs-legal-stand { margin-top: 16px; }
#hs-legal-modal .hs-legal h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 20px; }

/* Der Zustimmungs-Satz unter der Aufnahme-Anfrage: kleine Schrift, Links im
   Wortlink-Muster (schwarz + fett, Hover magenta). */
.hs-legal-consent-hint { margin: 8px 0 0; }
.hs-legal-consent-hint a {
  color: var(--ink) !important;
  font-weight: 700;
  text-decoration: underline;
}
.hs-legal-consent-hint a:hover { color: var(--hs) !important; }

/* Cookie table: 2px black frame, 1px inner lines (thinner than the frame),
   square corners, head in the display voice. */
.hs-redesign.hs-legal table {
  width: 100%;
  border-collapse: collapse;
  border: 2px solid var(--ink);
  margin: 14px 0 18px;
}
.hs-redesign.hs-legal th,
.hs-redesign.hs-legal td {
  border: 1px solid var(--ink);
  padding: 10px 12px;
  text-align: left;
  font-size: 15px;
}
.hs-redesign.hs-legal thead th {
  font-family: var(--display) !important;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: 13px;
}
.hs-redesign.hs-legal code {
  font-family: ui-monospace, Consolas, monospace !important;
  font-size: 14px;
  background: var(--paper-2);
  padding: 1px 5px;
}

/* PLACEHOLDER marker: magenta + bold = "Nicole, das ist ERFUNDEN - bitte
   pruefen/ersetzen". Deliberately loud so nothing invented goes live. */
.hs-redesign.hs-legal .hs-fixme {
  color: var(--hs);
  font-weight: 800;
}

/* --- FAQ: white cards on the grey band (grey band -> white tiles), 4px
   outline + round corners like every tile, 2px inner divider when open.
   <details> needs no JS. --------------------------------------------------- */
.hs-redesign.hs-legal .hs-faq-item {
  background: var(--paper);
  border: 4px solid var(--ink);
  border-radius: var(--radius);
  margin: 0 0 16px;
  overflow: hidden;
}
.hs-redesign.hs-legal .hs-faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  font-size: 17px;
  font-weight: 700;
}
.hs-redesign.hs-legal .hs-faq-item summary::-webkit-details-marker { display: none; }
.hs-redesign.hs-legal .hs-faq-item summary::after {
  content: "+";
  font-family: var(--display) !important;
  font-size: 20px;
  line-height: 1;
  flex: 0 0 auto;
}
.hs-redesign.hs-legal .hs-faq-item[open] summary::after { content: "\2013"; }
.hs-redesign.hs-legal .hs-faq-item summary:hover { color: var(--hs); }
.hs-redesign.hs-legal .hs-faq-item[open] summary { border-bottom: 2px solid var(--ink); }
.hs-redesign.hs-legal .hs-faq-body { padding: 14px 18px 16px; }
.hs-redesign.hs-legal .hs-faq-body p { margin: 0 0 10px; }
.hs-redesign.hs-legal .hs-faq-body p:last-child { margin-bottom: 0; }

@media (max-width: 760px) {
  .hs-redesign.hs-legal h1 { font-size: clamp(26px, 8vw, 34px); }
  .hs-redesign.hs-legal .hs-faq-item summary { font-size: 15px; padding: 12px 14px; }
}

/* Scheduled-deletion countdown (Nicole's 7-Tage-Plan, 21.07.2026): red strip
   every member sees on the society page while the notice period runs.
   Red = Gefahr (rule), plain text, NO blinking (rule). */
.hs-deletion-notice {
  border: 2px solid #dc3232;
  background: #fff;
  padding: 12px 16px;
  margin: 16px 0 0;
  font-weight: 700;
  color: #dc3232;
}
.hs-deletion-notice span {
  display: block;
  margin-top: 4px;
  font-weight: 400;
  color: var(--hs-ink, #0B0B0D);
}

/* =====================================================================
   iOS-ZOOM-FALLE (Nicole, 03.08.2026)
   ---------------------------------------------------------------------
   Liegt die Schrift eines Eingabefelds unter 16px, zoomt das iPhone beim
   Antippen IN das Feld hinein - und die Seite bleibt danach vergroessert
   stehen, Fenster ragen seitlich aus dem Bild ("ich sehe die Fenster
   nicht gut"). Deshalb bekommen am Handy ALLE Text-/Auswahlfelder des
   Plugins mindestens 16px; die Desktop-Optik bleibt unveraendert.
   !important, weil einige der Ursprungsregeln (events.css, Modal-Felder)
   selbst mit !important oder hoeherer Spezifitaet arbeiten.
   Merkregel fuer neue Felder: am Handy NIE unter 16px.
   ===================================================================== */
@media (max-width: 767px) {
  .hs-input,
  .hs-textarea,
  .hs-select,
  .hs-redesign .hs-modal-content .hs-input,
  .hs-redesign .hs-modal-content .hs-textarea,
  .hs-redesign .hs-modal-content .hs-select,
  .hs-redesign .hs-filters select,
  .hs-redesign .hs-filters input:not([type="checkbox"]),
  .hs-filter-select,
  .hs-poll-form input[type="text"],
  .hs-poll-form textarea,
  .hs-poll-option-row .hs-poll-option-input,
  .hs-pinnwand-form input[type="text"].hs-pinnwand-title-input,
  .hs-pinnwand-form textarea,
  .hs-board-add-comment textarea,
  .hs-event-add-comment textarea {
    font-size: 16px !important;
  }
}

/* =====================================================================
   HUDDLE IN - die persoenliche Startseite (Nicole, 03.08.2026)
   ---------------------------------------------------------------------
   Entwurf: home-entwurf/huddle-in-entwurf.html. Schwarzer Kompakt-Kopf
   ("Maenner wollen kein Pink", Hoehe aufs Noetigste), darunter der
   Konto-Streifen (Societies-Zahl / angemeldet als / Profil) und die
   schwarzen Rundeck-News-Kacheln. Termine und Societies nutzen die
   normalen Kachel-Rezepte weiter oben.
   ===================================================================== */

/* Font-Leck-Heilung wie bei jedem neuen Bereich: Astra stylt p/label/li
   direkt - alles auf die Textschrift, Archivo Black gezielt zurueck.
   (Kachel-Innereien wie .hs-ev-num holen sich ihre Schrift ueber die
   spezifischeren !important-Regeln oben selbst zurueck.) */
.hs-huddle-in * { font-family: var(--body) !important; }
.hs-huddle-in h1, .hs-huddle-in h2, .hs-huddle-in h3,
.hs-huddle-in .hs-btn { font-family: var(--display) !important; }

.hs-huddle-in .hs-hi-card {
  border: 4px solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
}
.hs-huddle-in .hs-hi-hero {
  background: var(--ink);
  padding: 14px 24px;
  text-align: center;
}
.hs-huddle-in .hs-hi-hero h1 {
  margin: 0;
  font-size: clamp(24px, 4vw, 40px);
  letter-spacing: .01em;
  line-height: 1.15;
  color: #fff;
  text-transform: uppercase;
}
.hs-huddle-in .hs-hi-hero p {
  margin: 2px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}
.hs-huddle-in .hs-hi-strip {
  background: var(--paper);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.hs-huddle-in .hs-hi-strip p { margin: 0; font-size: 16px; color: var(--ink); }
.hs-huddle-in .hs-hi-account { font-size: 15px; color: var(--ink-soft); }
.hs-huddle-in .hs-hi-account strong { color: var(--ink); }
.hs-huddle-in a.hs-hi-profile {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink) !important;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none !important;
}
.hs-huddle-in a.hs-hi-profile:hover { color: var(--hs) !important; }
.hs-huddle-in a.hs-hi-profile svg { width: 20px; height: 20px; flex: 0 0 auto; }

/* News: Ueberschrift UEBER den Kacheln, dann pro Society ein schwarzes
   Rundeck - die GANZE Kachel ist der Klick (Nicole: Wortlinks sind am
   Handy zu klein). */
.hs-huddle-in .hs-hi-news { margin-top: 24px; }
.hs-huddle-in .hs-hi-news-label {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.hs-huddle-in .hs-hi-news-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.hs-huddle-in a.hs-hi-news-card {
  flex: 1 1 240px;
  max-width: 340px;
  background: var(--ink);
  border-radius: var(--radius);
  padding: 14px 18px;
  color: #fff;
  text-decoration: none !important;
}
.hs-huddle-in .hs-hi-news-name {
  display: block;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 4px;
  color: #fff;
}
.hs-huddle-in a.hs-hi-news-card:hover .hs-hi-news-name { color: var(--hs); }
.hs-huddle-in .hs-hi-news-line { display: block; font-size: 14px; color: #fff; }

@media (max-width: 767px) {
  .hs-huddle-in a.hs-hi-news-card { max-width: none; }
}

/* =========================================================================
   HELFT MIT - Beta-Fragebogen (Nicole, 07.08.2026). Optik aus dem
   abgesegneten Artifact-Entwurf: Fragen als 2px-Kaesten im Zebra der
   Streifen, Schulnoten-Skala als eckige Kacheln (gewaehlt = Magenta),
   Haekchen/Punkte in Magenta (accent-color). Temporaer fuer die Beta.
   ========================================================================= */
/* Eyebrow im Seiten-Standard (.hs-eyebrow-Rezept: Archivo, NICHT Archivo
   Black - Nicole, 07.08.2026: "falscher Font"). DREI Klassen noetig:
   .hs-redesign.hs-legal p (Rechtsseiten-Rezept) gewinnt sonst den
   Spezifitaets-Kampf und zwingt 16px/1.65 auf die Zeile. */
.hs-redesign.hs-legal.hs-helft .hs-helft-eyebrow {
  font-family: var(--body) !important;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--ink-soft, #5a5d66);
  margin: 0 0 6px;
}

/* Keine Trennlinien ueber den Abschnitts-Titeln (Nicole, 07.08.2026) -
   das 2px-Divider-Rezept der Rechtsseiten gilt hier nicht. Der Abstand
   UEBER dem Titel ist halbiert (Nicole: ~50% weniger, aber weiterhin
   mehr Luft oben als unten): oben 40px Streifen-Polster + 0 Titel-Rand,
   unten 28px. */
.hs-redesign.hs-legal.hs-helft h2 {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}
.hs-redesign.hs-helft .hs-band,
.hs-redesign.hs-helft .hs-band-grey {
  padding: 40px 0 28px;
}

/* Buendig mit dem Logo (Nicole, 07.08.2026): die 860px-Lesespalte der
   Rechtsseiten sitzt MITTIG und beginnt dadurch rechts vom Logo. Hier
   gilt die Standard-1080er-Flucht der uebrigen Seiten; die Fragen-Kacheln
   behalten ihre Lesebreite und haengen LINKS an der Flucht. */
.hs-redesign.hs-legal.hs-helft .hs-wrap { max-width: 1080px; }
.hs-helft .hs-helft-q {
  max-width: 860px;
  margin: 22px auto 0 0;
}
.hs-helft .hs-helft-q {
  border: 2px solid var(--ink, #0B0B0D);
  background: #fff;
  /* Rundeck-Logik wie die Kacheln (Nicole, 07.08.2026) - Felder INNEN
     bleiben eckig, das ist der Standard seit 1.0.56. */
  border-radius: var(--radius, 14px);
  padding: 20px 22px 22px;
  margin-top: 22px;
}
/* Zebra-Fuellung (Nicole, 07.08.2026): auf WEISSEN Streifen tragen die
   Rundecke das Standard-Hellgrau, auf grauen Streifen bleiben sie weiss. */
.hs-helft .hs-band .hs-helft-q { background: var(--paper-2, #DFE1E9); }
.hs-helft .hs-band-grey .hs-helft-q { background: #fff; }
.hs-helft .hs-helft-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}
.hs-helft .hs-helft-no {
  font-family: var(--display) !important;
  font-size: 24px;
  line-height: 1;
  color: var(--hs, #FA06C6);
  flex: none;
}
.hs-helft .hs-helft-title { font-weight: 800; font-size: 17px; }
.hs-helft .hs-helft-hint { font-size: 14px; color: #5a5d66; margin: -6px 0 12px; }
.hs-helft .hs-helft-sub { font-weight: 700; margin: 14px 0 4px; }

.hs-helft .hs-helft-opts { display: flex; flex-direction: column; gap: 10px; }
.hs-helft .hs-helft-opts label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-weight: 400;
  margin: 0;
}
/* RUNDE Auswahlkreise fuer Punkte UND Haekchen (Nicole, 07.08.2026:
   "runde Checkboxen, nicht eckige") - ein eigenes Rezept, damit beide
   gleich aussehen: 2px-Kreis, gewaehlt = magenta gefuellt. */
.hs-helft .hs-helft-opts input[type="radio"],
.hs-helft .hs-helft-opts input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  margin: 2px 0 0;
  flex: none;
  width: 19px;
  height: 19px;
  border: 2px solid var(--ink, #0B0B0D);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}
.hs-helft .hs-helft-opts input[type="radio"]:checked,
.hs-helft .hs-helft-opts input[type="checkbox"]:checked {
  background: var(--hs, #FA06C6);
  box-shadow: inset 0 0 0 3px #fff;
}
.hs-helft .hs-helft-opts input:focus-visible {
  outline: 3px solid var(--hs, #FA06C6);
  outline-offset: 1px;
}
.hs-helft .hs-helft-free { flex: 1; }

/* Schulnoten-Skala: eckige Kacheln, die gewaehlte wird magenta. */
.hs-helft .hs-helft-scale { display: flex; gap: 8px; flex-wrap: wrap; }
.hs-helft .hs-helft-scale label {
  position: relative;
  border: 2px solid var(--ink, #0B0B0D);
  padding: 8px 0;
  width: 52px;
  text-align: center;
  font-family: var(--display) !important;
  font-size: 18px;
  cursor: pointer;
  background: #fff;
  margin: 0;
}
.hs-helft .hs-helft-scale input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.hs-helft .hs-helft-scale label:has(input:checked) { background: var(--hs, #FA06C6); }
.hs-helft .hs-helft-scale label:has(input:focus-visible) {
  outline: 3px solid var(--hs, #FA06C6);
  outline-offset: 1px;
}
.hs-helft .hs-helft-scale-ends {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #5a5d66;
  margin-top: 6px;
  max-width: 352px;
}

/* Freifelder OHNE Outline (Nicole, 07.08.2026): die Fuellung liefert den
   Kontrast zur Kachel - auf grauer Kachel weisses Feld, auf weisser Kachel
   hellgraues. Grauer Platzhalter-Text laedt zum Schreiben ein. Astra malt
   sonst seine eigene Optik durch, daher !important. */
.hs-helft input[type="text"],
.hs-helft input[type="email"],
.hs-helft textarea {
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: var(--ink, #0B0B0D) !important;
  font: inherit !important;
  font-size: 16px !important; /* iOS-Zoom-Regel: nie unter 16px */
  padding: 9px 11px !important;
  width: 100%;
  box-sizing: border-box;
  box-shadow: none !important;
}
.hs-helft .hs-band-grey input[type="text"],
.hs-helft .hs-band-grey input[type="email"],
.hs-helft .hs-band-grey textarea {
  background: var(--paper-2, #DFE1E9) !important;
}
.hs-helft input::placeholder,
.hs-helft textarea::placeholder {
  color: var(--ink-soft, #5a5d66);
  opacity: 1;
}
.hs-helft input:focus-visible,
.hs-helft textarea:focus-visible {
  outline: 3px solid var(--hs, #FA06C6);
  outline-offset: 1px;
}
.hs-helft textarea { min-height: 74px; resize: vertical; }

.hs-helft .hs-helft-euro { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.hs-helft .hs-helft-euro input { width: 110px; flex: none; }
.hs-helft .hs-helft-euro span { font-weight: 800; white-space: nowrap; }
/* Am Handy sprengen die langen Zusaetze ("keine automatische Verlaengerung")
   die Zeile - Nicoles iPhone-Fund 08.08.2026. Der Betrag bleibt links stehen,
   die Preis-Zeile daneben, der Klammer-Zusatz rutscht leise darunter
   (min-width: 0, sonst laesst Flex den Text gar nicht erst umbrechen). */
@media (max-width: 640px) {
  .hs-helft .hs-helft-euro span { white-space: normal; flex: 1; min-width: 0; }
  .hs-helft .hs-helft-euro span small {
    display: block;
    font-weight: 400;
    font-size: 13px;
    color: #5a5d66;
    margin-top: 2px;
  }
}

/* Honigtopf: fuer Menschen unsichtbar, display:none meiden manche Bots. */
.hs-helft .hs-helft-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.hs-helft .hs-helft-send { margin-top: 26px; }
.hs-helft .hs-helft-thanks { font-size: 14px; color: #5a5d66; margin-top: 10px; }

@media (max-width: 480px) {
  .hs-helft .hs-helft-scale label { width: 44px; font-size: 16px; }
}

/* ==========================================================================
   COCKPIT - Betreiber-Verwaltung fuers Handy (07.08.2026, 1.1.71)
   Seite /cockpit/, Template templates/frontend/cockpit.php. Rundeck-Kacheln
   und Zebra-Fuellung wie HELFT MIT; jede Society-Farbe traegt SCHWARZE
   Schrift (Palette-Regel). Eingabefelder nie unter 16px (iOS-Zoom).
   ========================================================================== */

.hs-redesign.hs-legal.hs-cockpit .hs-wrap { max-width: 1080px; }

/* Keine Striche ueber den Titeln (Nicole, 07.08.2026) - die Rechtsseiten-
   Ueberschrift bringt eine border-top mit, im Cockpit trennen schon die
   Zebra-Baender die Bereiche. */
.hs-redesign.hs-legal.hs-cockpit h2 {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

.hs-redesign.hs-legal.hs-cockpit .hs-ck-eyebrow {
  font-family: var(--body) !important;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 600;
  margin: 0 0 10px;
}

/* ---- Kennzahlen-Kacheln: volle Society-Toene, schwarze Schrift ---------- */
.hs-cockpit .hs-ck-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.hs-cockpit .hs-ck-tile {
  border: 2px solid var(--ink, #0B0B0D);
  border-radius: var(--radius, 14px);
  padding: 14px 16px 16px;
  color: var(--ink, #0B0B0D);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hs-cockpit .hs-ck-green  { background: #60D34F; }
.hs-cockpit .hs-ck-yellow { background: #FAC306; }
.hs-cockpit .hs-ck-cyan   { background: #0AB5FF; }
.hs-cockpit .hs-ck-orange { background: #FF6613; }
.hs-cockpit .hs-ck-violet { background: #9E80E8; }
.hs-cockpit .hs-ck-num {
  font-family: var(--display, 'Archivo Black', sans-serif) !important;
  font-size: 34px;
  line-height: 1.1;
}
.hs-cockpit .hs-ck-label {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 12px;
  font-weight: 700;
}
.hs-cockpit .hs-ck-sub { font-size: 12.5px; font-weight: 600; }

.hs-cockpit .hs-ck-note { font-size: 14px; color: #5a5d66; margin-top: 14px; }

/* ---- Karten (Banner, Societies, Rechnungen): Zebra wie HELFT MIT -------- */
.hs-cockpit .hs-ck-card {
  border: 2px solid var(--ink, #0B0B0D);
  border-radius: var(--radius, 14px);
  padding: 18px 20px 20px;
  margin: 18px auto 0 0;
  background: #fff;
}
.hs-cockpit .hs-band .hs-ck-card { background: var(--paper-2, #DFE1E9); }
.hs-cockpit .hs-band-grey .hs-ck-card { background: #fff; }
.hs-cockpit .hs-ck-card h3 { margin: 0 0 10px; }
.hs-cockpit .hs-ck-h3 { margin-top: 30px; }

/* ---- Eingaben: eckig, 2px Rand, NIE unter 16px (iOS-Auto-Zoom) ---------- */
.hs-cockpit textarea,
.hs-cockpit select,
.hs-cockpit input[type="email"],
.hs-cockpit input[type="text"] {
  width: 100%;
  font-size: 16px !important;
  font-family: var(--body) !important;
  border: 2px solid var(--ink, #0B0B0D) !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: var(--ink, #0B0B0D) !important;
  padding: 10px 12px !important;
  box-shadow: none !important;
}
.hs-cockpit textarea { min-height: 90px; resize: vertical; }
.hs-cockpit textarea:focus-visible,
.hs-cockpit select:focus-visible {
  outline: 3px solid var(--hs, #FA06C6);
  outline-offset: 1px;
}
.hs-cockpit select { width: auto; max-width: 100%; }
.hs-cockpit .hs-ck-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-weight: 600;
}
.hs-cockpit .hs-ck-check input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: var(--hs, #FA06C6);
}

/* ---- Aktionen: eng beieinander, Wortlink-Muster ------------------------- */
.hs-cockpit .hs-ck-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 14px 0 0;
}
.hs-cockpit .hs-ck-link {
  color: var(--ink, #0B0B0D);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hs-cockpit .hs-ck-link:hover { color: var(--hs, #FA06C6); }
/* Gefahr ist ROT - .hs-ck-link ist spezifischer als das globale
   .hs-danger-link-Rezept und wuerde es sonst schwarz ueberschreiben. */
.hs-cockpit .hs-ck-link.hs-danger-link { color: #cc0000; font-size: inherit; }
.hs-cockpit .hs-ck-link.hs-danger-link:hover { color: var(--hs, #FA06C6); }
.hs-cockpit .hs-ck-status { font-size: 14px; font-weight: 700; }

/* ---- Status-Woerter (Status als farbiges WORT, keine Reiter) ------------ */
.hs-cockpit .hs-ck-st-offen    { color: #d63638; font-weight: 800; }
.hs-cockpit .hs-ck-st-bezahlt  { color: #00810a; font-weight: 800; }
.hs-cockpit .hs-ck-st-storniert{ color: #8c8f94; font-weight: 800; }
.hs-cockpit .hs-ck-trial {
  font-family: var(--body) !important;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  border: 2px solid var(--ink, #0B0B0D);
  border-radius: 999px;
  padding: 2px 10px;
  vertical-align: middle;
  margin-left: 6px;
}
.hs-cockpit .hs-ck-inv-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0 0 4px;
}
.hs-cockpit .hs-ck-inv-num { font-size: 15px; word-break: break-all; }
.hs-cockpit .hs-ck-facts { margin: 0; font-size: 14.5px; line-height: 1.6; }

/* ---- Feedback-Boegen: aufklappbare Karten ------------------------------- */
.hs-cockpit .hs-ck-fb {
  border: 2px solid var(--ink, #0B0B0D);
  border-radius: var(--radius, 14px);
  background: var(--paper-2, #DFE1E9);
  margin: 12px auto 0 0;
  padding: 0;
}
.hs-cockpit .hs-ck-fb summary {
  cursor: pointer;
  padding: 14px 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  font-size: 15px;
}
.hs-cockpit .hs-ck-fb[open] summary { border-bottom: 2px solid var(--ink, #0B0B0D); }
.hs-cockpit .hs-ck-fb-note { font-weight: 800; }
.hs-cockpit .hs-ck-fb-role { color: #5a5d66; font-size: 13.5px; }
.hs-cockpit .hs-ck-fb dl { margin: 0; padding: 14px 18px 18px; }
.hs-cockpit .hs-ck-fb dt {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #5a5d66;
  margin-top: 10px;
}
.hs-cockpit .hs-ck-fb dd { margin: 2px 0 0; font-size: 15px; white-space: pre-line; }

/* ==========================================================================
   HELFT MIT: 10er-Skala (Zufriedenheit + Sicherheitsgefuehl, 07.08.2026).
   Schmalere Kaestchen als die alte 6er-Schulnote; am Handy bricht die Reihe
   sauber in 2x5 um (flex-wrap). Die Ende-Beschriftung folgt der Reihenbreite.
   ========================================================================== */
.hs-helft .hs-helft-scale-10 label { width: 44px; }
.hs-helft .hs-helft-scale-ends-10 { max-width: 512px; }
/* Am Handy als sauberes 5+5-Raster statt zerrissenem Umbruch (7+3). */
@media (max-width: 640px) {
  .hs-helft .hs-helft-scale-10 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    max-width: 352px;
  }
  .hs-helft .hs-helft-scale-10 label { width: auto; }
  .hs-helft .hs-helft-scale-ends-10 { max-width: 352px; }
}

/* ---- Cockpit: Feedback-Auswertung (Balken + Durchschnitte, 07.08.2026) -- */
.hs-cockpit .hs-ck-stats-sub {
  font-family: var(--body) !important;
  font-size: 13px;
  font-weight: 400;
  color: #5a5d66;
  text-transform: none;
  letter-spacing: 0;
}
.hs-cockpit .hs-ck-stat-label {
  margin: 16px 0 4px;
  font-weight: 800;
  font-size: 14.5px;
}
.hs-cockpit .hs-ck-stat-label span {
  font-weight: 400;
  color: #5a5d66;
  font-size: 13px;
}
.hs-cockpit .hs-ck-stat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 3px 0;
  font-size: 14px;
}
.hs-cockpit .hs-ck-stat-text {
  flex: 0 0 42%;
  min-width: 0;
  overflow-wrap: anywhere;
}
.hs-cockpit .hs-ck-stat-bar {
  flex: 1;
  height: 14px;
  background: #fff;
  border: 1px solid var(--ink, #0B0B0D);
  overflow: hidden;
}
.hs-cockpit .hs-band-grey .hs-ck-stats .hs-ck-stat-bar { background: var(--paper-2, #DFE1E9); }
.hs-cockpit .hs-ck-stat-bar span {
  display: block;
  height: 100%;
  background: var(--ink, #0B0B0D);
}
.hs-cockpit .hs-ck-stat-count {
  flex: 0 0 2em;
  text-align: right;
  font-weight: 800;
}
.hs-cockpit .hs-ck-stat-avg {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
}

/* =====================================================================
   PROFIL: Mitgliedschafts-Guthaben (Nicole, 16.08.2026). Der FAQ-Link
   folgt dem Text-Link-Muster (schwarz + fett, Hover magenta) statt
   Browser-Blau; Auswahl und Knopf stehen als eine Zeile zusammen.
   ===================================================================== */
#hs-profile-modal .hs-profile-credit-balance {
  margin: 0 0 8px;
  font-size: 16px;
}
#hs-profile-modal .hs-profile-hint a {
  color: var(--ink, #0B0B0D);
  font-weight: 700;
  text-decoration: underline;
}
#hs-profile-modal .hs-profile-hint a:hover {
  color: var(--hs, #FA06C6);
}
#hs-profile-modal .hs-profile-credit-buy {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin-top: 4px;
}
#hs-profile-modal .hs-profile-credit-buy .hs-select {
  width: auto;
  border: 2px solid var(--ink, #0B0B0D) !important;
  border-radius: 0 !important;
  background: #fff !important;
}

/* Mitglieder-Verwaltung: Mitgliedsnummer als kleine graue Zeile unterm
   Namen (Nicole, 16.08.2026) - bei doppelten Profilnamen das einzige
   Unterscheidungsmerkmal fuer Society-Admins. Gleiche Referenz-Optik wie
   im Profil (.hs-member-number), nur kleiner und leiser. */
.hs-redesign .hs-member-number-line {
  font-size: 12px;
  color: #666;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}

/* Doppelname-Absage unterm Namensfeld (Nicole, 16.08.2026): ROT, denn hier
   geht es ohne anderen Namen nicht weiter - der Server weist ihn ab. */
.hs-name-taken-hint { color: #d63638 !important; }


/* BILD ZUSCHNEIDEN (Nicole, 17.09.2026) - haengt direkt an <body>, also
   AUSSERHALB von .hs-redesign: Schriften und Knoepfe brauchen deshalb jede
   Eigenschaft selbst und mit !important (Astra stylt Buttons und Labels). */
.hs-crop-overlay {
  position: fixed; inset: 0; z-index: 100001; background: rgba(11, 11, 13, .72);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.hs-crop-overlay, .hs-crop-overlay * { box-sizing: border-box; font-family: "Archivo", Arial, sans-serif !important; }
.hs-crop-box {
  width: 100%; max-width: 560px; margin: auto; background: #fff; color: #0B0B0D;
  border: 4px solid #0B0B0D; border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column; gap: 16px; padding: 0 0 18px;
}
.hs-crop-box > * { margin: 0 18px; }
.hs-crop-box > .hs-crop-head {
  margin: 0; padding: 13px 18px; border-bottom: 2px solid #0B0B0D; background: #DFE1E9;
  font-family: "Archivo Black", "Arial Black", sans-serif !important; font-size: 16px;
  text-transform: uppercase; letter-spacing: .05em; display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
}
.hs-crop-count { font-size: 13px; font-weight: 700; text-transform: none; letter-spacing: 0; }
.hs-crop-stage { display: flex; justify-content: center; align-items: center; min-height: 180px; }
.hs-crop-stage canvas {
  display: block; border: 2px solid #0B0B0D; border-radius: 14px; background: #fff;
  cursor: grab; touch-action: none; max-width: 100%;
}
.hs-crop-stage canvas:active { cursor: grabbing; }
/* Logo: Karo zeigt, wo das Bild durchsichtig bleibt. */
.hs-crop-stage--logo canvas {
  background: repeating-conic-gradient(#DFE1E9 0% 25%, #fff 0% 50%) 0 0 / 20px 20px;
}
.hs-crop-hint { font-size: 13px; line-height: 1.4; color: #0B0B0D; margin-top: -8px !important; }
.hs-crop-formats { display: flex; flex-wrap: wrap; gap: 0; }
.hs-crop-overlay button {
  -webkit-appearance: none; appearance: none; box-shadow: none !important; min-height: 0 !important;
  text-transform: none !important; letter-spacing: 0 !important; cursor: pointer; line-height: 1.2 !important;
}
.hs-crop-overlay .hs-crop-format {
  background: #fff !important; color: #0B0B0D !important; border: 2px solid #0B0B0D !important; border-radius: 0 !important;
  margin: 0 -2px 0 0; padding: 9px 13px !important; font-size: 14px !important; font-weight: 700 !important;
}
.hs-crop-overlay .hs-crop-format[aria-pressed="true"] { background: #0B0B0D !important; color: #fff !important; }
.hs-crop-zoom { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 700; color: #0B0B0D; }
.hs-crop-zoom input { flex: 1; min-width: 0; accent-color: #FA06C6; height: 28px; padding: 0; border: 0; background: none; }
.hs-crop-rot { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.hs-crop-overlay .hs-crop-link,
.hs-crop-overlay .hs-crop-cancel {
  background: none !important; border: 0 !important; padding: 0 !important; border-radius: 0 !important;
  color: #0B0B0D !important; font-size: 14px !important; font-weight: 700 !important;
}
.hs-crop-overlay .hs-crop-link:hover,
.hs-crop-overlay .hs-crop-cancel:hover { color: #FA06C6 !important; }
.hs-crop-foot { display: flex; justify-content: flex-end; align-items: center; gap: 22px; flex-wrap: wrap; }
.hs-crop-overlay .hs-crop-ok {
  background: #0B0B0D !important; color: #fff !important; border: 0 !important; border-radius: 4px !important;
  padding: 12px 20px !important; font-family: "Archivo Black", "Arial Black", sans-serif !important;
  font-size: 14px !important; text-transform: uppercase !important; letter-spacing: .06em !important;
}
.hs-crop-overlay .hs-crop-ok:hover { background: #FA06C6 !important; color: #0B0B0D !important; }
.hs-crop-overlay button:focus-visible, .hs-crop-zoom input:focus-visible { outline: 3px solid #FA06C6; outline-offset: 2px; }
@media (max-width: 767px) {
  .hs-crop-overlay { padding: 8px; align-items: flex-start; }
  .hs-crop-box { gap: 12px; }
}


/* =====================================================================
   FREIE FARBE (Nicole, 17.09.2026): Society UND Event duerfen jede Farbe
   tragen. PHP setzt am Element  data-hs-custom  +  style="--tile; --tile-fg"
   (HuddleSuite_Database::color_attr). Die Paletten-Klasse bleibt als
   Rueckfall stehen; hier stehen nur die Regeln, die mit FESTEN Farbwerten
   arbeiten und deshalb die Variable nicht von selbst sehen.
   --tile-fg ist Schwarz oder Weiss - je nachdem, was auf der Farbe traegt.
   Die alte Regel "jede Society-Farbe traegt schwarze Schrift" gilt damit
   nur noch fuer die fuenf Palettentoene.
   ===================================================================== */
.hs-society-page[data-hs-custom] .hs-society-header { background: var(--tile) !important; }
.hs-society-page[data-hs-custom] .hs-society-header,
.hs-society-page[data-hs-custom] .hs-society-header h1,
.hs-society-page[data-hs-custom] .hs-society-header .hs-news-ticker-item,
.hs-society-page[data-hs-custom] .hs-society-header .hs-news-ticker-item b,
.hs-society-page[data-hs-custom] .hs-society-header .hs-header-about,
.hs-society-page[data-hs-custom] .hs-society-header .hs-header-back-link .hs-link,
.hs-society-page[data-hs-custom] .hs-society-header .hs-header-username { color: var(--tile-fg) !important; }
/* Auf einer dunklen Society-Farbe waeren die schwarzen Kopf-Knoepfe kaum zu
   sehen - dort drehen sie auf die Schriftfarbe der Flaeche. */
.hs-society-page[data-hs-custom] .hs-society-header .hs-header-cta-btn { background: var(--tile-fg) !important; color: var(--tile) !important; }
/* Society-Kachel: die zwei Trennlinien folgen der Schrift, sonst verschwinden
   sie auf Dunkel. Die 4px-Outline bleibt schwarz - sie steht auf dem Band. */
.hs-redesign .hs-soc-card[data-hs-custom] .hs-soc-head { border-bottom-color: var(--tile-fg); }
.hs-redesign .hs-soc-card[data-hs-custom] .hs-soc-more { border-top-color: var(--tile-fg); }
.hs-redesign [data-hs-custom] .hs-btn-accent,
.hs-redesign .hs-btn-accent[data-hs-custom] { color: var(--tile-fg); }
/* Umfrage-Koepfe (Nicoles Fund 22.09.2026: dunkles Lila, Schrift blieb
   schwarz): Titel, Name, Datum, Status-Wort und die Wortlinks rechts kippen
   mit. Hover bleibt Magenta. */
.hs-redesign.hs-society-polls-band [data-hs-custom] .hs-poll-card-title,
.hs-redesign.hs-society-polls-band [data-hs-custom] .hs-poll-author,
.hs-redesign.hs-society-polls-band [data-hs-custom] .hs-poll-date,
.hs-redesign.hs-society-polls-band [data-hs-custom] .hs-poll-badge,
.hs-redesign.hs-society-polls-band [data-hs-custom] a.hs-poll-edit,
.hs-redesign.hs-society-polls-band [data-hs-custom] a.hs-poll-delete { color: var(--tile-fg) !important; }
.hs-redesign.hs-society-polls-band [data-hs-custom] a.hs-poll-edit:hover,
.hs-redesign.hs-society-polls-band [data-hs-custom] a.hs-poll-delete:hover { color: var(--hs) !important; }
/* Pinnwand: Beitrags-Koepfe und das farbige Schreib-Formular genauso. */
.hs-redesign.hs-society-pinnwand-band [data-hs-custom] .hs-board-post-title,
.hs-redesign.hs-society-pinnwand-band [data-hs-custom] .hs-board-post-author,
.hs-redesign.hs-society-pinnwand-band [data-hs-custom] .hs-board-post-date,
.hs-redesign.hs-society-pinnwand-band [data-hs-custom] .hs-board-post-delete,
.hs-redesign.hs-society-pinnwand-band [data-hs-custom] .hs-pinnwand-form,
.hs-redesign.hs-society-pinnwand-band [data-hs-custom] .hs-pinnwand-form label,
.hs-redesign.hs-society-pinnwand-band [data-hs-custom] .hs-pinnwand-form h3,
.hs-redesign.hs-society-pinnwand-band [data-hs-custom] .hs-pinnwand-form h4,
.hs-redesign.hs-society-pinnwand-band [data-hs-custom] .hs-pinnwand-form p { color: var(--tile-fg) !important; }
.hs-redesign.hs-society-pinnwand-band [data-hs-custom] .hs-board-post-delete:hover { color: var(--hs) !important; }

/* Farbfenster in der Verwaltung: sieht aus wie ein sechstes Farbfeld. */
.hs-redesign .hs-color-option--free input[type="color"],
.hs-redesign .hs-event-color-row input[type="color"] {
  -webkit-appearance: none; appearance: none; display: block; box-sizing: border-box;
  width: 44px !important; height: 44px !important; min-height: 0 !important; padding: 0 !important;
  border: 2px solid var(--ink) !important; border-radius: 10px !important; background: none !important; cursor: pointer;
}
.hs-redesign .hs-color-option--free input[type="color"]::-webkit-color-swatch-wrapper,
.hs-redesign .hs-event-color-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.hs-redesign .hs-color-option--free input[type="color"]::-webkit-color-swatch,
.hs-redesign .hs-event-color-row input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 8px; }
.hs-redesign .hs-color-option--free input[type="color"]::-moz-color-swatch,
.hs-redesign .hs-event-color-row input[type="color"]::-moz-color-swatch { border: 0; border-radius: 8px; }
.hs-redesign .hs-color-option--free.is-active input[type="color"] { transform: scale(1.15); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ink); }
.hs-redesign .hs-color-option--free.is-active .hs-color-label { font-weight: 700; color: var(--ink); }
/* Noch keine eigene Farbe gewaehlt: das Feld zeigt einen Regenbogen statt
   eines zufaelligen Tons - sonst saehe es aus wie eine sechste feste Farbe. */
.hs-redesign .hs-color-option--free:not(.is-active) input[type="color"]::-webkit-color-swatch { background: conic-gradient(#FF6613, #FAC306, #60D34F, #0AB5FF, #9E80E8, #FF6613) !important; }
.hs-redesign .hs-color-option--free:not(.is-active) input[type="color"]::-moz-color-swatch { background: conic-gradient(#FF6613, #FAC306, #60D34F, #0AB5FF, #9E80E8, #FF6613) !important; }

/* Event-Formular: Farbfeld + Zustand + Wortlink in einer Zeile. */
.hs-redesign .hs-event-color-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.hs-redesign .hs-event-color-state { font-size: 14px; font-weight: 700; }
.hs-redesign #hs-event-color-reset {
  background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; min-height: 0 !important;
  font-family: var(--body) !important; font-size: 14px !important; font-weight: 700; color: var(--ink) !important;
  text-transform: none !important; letter-spacing: 0 !important; text-decoration: underline; cursor: pointer;
}
.hs-redesign #hs-event-color-reset:hover { color: var(--hs) !important; }
.hs-redesign .hs-event-color-row.is-auto input[type="color"]::-webkit-color-swatch { background: conic-gradient(#FF6613, #FAC306, #60D34F, #0AB5FF, #9E80E8, #FF6613) !important; }
.hs-redesign .hs-event-color-row.is-auto input[type="color"]::-moz-color-swatch { background: conic-gradient(#FF6613, #FAC306, #60D34F, #0AB5FF, #9E80E8, #FF6613) !important; }

/* Bildnachweis im Zuschneiden-Fenster (Nicole, 17.09.2026). 16px: iOS-Zoom-Falle. */
.hs-crop-credit { display: flex; flex-direction: column; gap: 5px; font-size: 14px; font-weight: 700; color: #0B0B0D; }
.hs-crop-credit input {
  width: 100%; border: 2px solid #0B0B0D !important; border-radius: 0 !important; background: #fff !important; color: #0B0B0D !important;
  padding: 9px 11px !important; font-size: 16px !important; font-weight: 400; box-shadow: none !important; min-height: 0 !important;
}
.hs-crop-credit small { font-weight: 400; font-size: 12.5px; }


/* Umfragen + Terminfindung ANONYM (Nicole, 17.09.2026): statt der Namensliste
   eine ruhige Zeile "5 von 12 Mitgliedern haben abgestimmt". */
.hs-redesign .hs-poll-participation { margin: 0; padding: 4px 18px 16px; font-size: 14px; font-weight: 700; color: var(--ink); }

/* ERSCHWERNIS fuer Bilder (Nicole, 17.09.2026) - Gegenstueck zum Block am
   Ende von main.js. -webkit-touch-callout nimmt am iPhone das Menue "Bild
   sichern / Teilen" beim langen Druecken weg; user-drag das Herausziehen.
   Tippen (Grossansicht) und Wischen bleiben unberuehrt. KEIN Kopierschutz. */
.hs-band-pics img,
.hs-picture-wall img,
.hs-lightbox img,
.hs-photo img,
.hs-photo-open,
.hs-ev-photos img,
.hs-band-admin-item img,
[data-hs-guard] img {
  -webkit-touch-callout: none;
  -webkit-user-select: none; user-select: none;
  -webkit-user-drag: none;
}