/* ============================================================================
 * social.css - Galerie & Gaestebuch (Seiten-Glue)
 * ----------------------------------------------------------------------------
 * Enthaelt NUR noch seiten-spezifische Anordnung. Alle wiederverwendbaren
 * Komponenten sind in der Library (component-library.html) + css/components/:
 *   tc-media-viewer · tc-comment-thread · tc-like-button ·
 *   tc-member-chip/-picker · tc-upload-drop
 * Weiter wiederverwendet: tc-avatar · tc-stat-block · tc-page-header ·
 *   tc-tabs--pills · tc-badge--count · tc-gallery(+__card/__img-wrap).
 *
 * Hier bleibt nur die Foto-Karten-Erweiterung auf tc-gallery__card
 * (Autor-Fuss + Like/Kommentar-Zaehler + Notiz + Datum + Tag-Marker),
 * plus zwei Layout-Wrapper. ASCII-safe.
 * ============================================================================ */

/* Layout-Wrapper */
.social-stats { display: flex; gap: var(--tc-space-2); flex-wrap: wrap; margin-bottom: var(--tc-space-4); }
#social-folders { margin-bottom: var(--tc-space-5); }

/* === FOTO-KARTE (erweitert tc-gallery__card) ============================== */
.social-card .tc-gallery__img-wrap { background: rgba(0,0,0,0.35); }

/* Tag-Marker oben links auf dem Bild */
.social-card__tagmark {
  position: absolute;
  top: 8px; left: 8px;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 8px;
  font-size: 0.68rem; font-weight: 700;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(var(--tc-accent-rgb), 0.5);
  border-radius: var(--tc-radius-sm);
  color: var(--tc-highlight);
  backdrop-filter: blur(4px);
}

/* Der Stapelzaehler — ein Upload ist EIN Beitrag (27.08.2026, Noswads
   Baustellen-Wunsch Platz 1). Bewusst RECHTS oben, damit er nicht mit der
   Markierungs-Marke links kollidiert: Ein Foto kann beides tragen. */
.social-card__stapel {
  position: absolute;
  top: 8px; right: 8px;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 8px;
  font-size: 0.68rem; font-weight: 700;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(var(--tc-accent-rgb), 0.5);
  border-radius: var(--tc-radius-sm);
  color: var(--tc-highlight);
  backdrop-filter: blur(4px);
}

/* DER POKAL AM BILD (01.09.2026, Taskwerk #522).
   Er sitzt UNTEN RECHTS — die zwei anderen Marken sind oben belegt
   (Markierung links, Stapel rechts), und ein Foto kann alle drei tragen.

   ⚠️ ECHTES MEDAILLENGOLD, KEIN THEME-TOKEN. Das ist nach CLAUDE.md §9
   eine Datenfarbe: Sie sagt „das hat jemanden 100 Schattengold gekostet",
   nicht „hier ist der Akzent des Systems". Dieselbe Sorte harte Farbe wie
   die Rangabzeichen — und sie muss in allen sieben Themes dasselbe
   bedeuten. */
.social-card__pokal {
  position: absolute;
  bottom: 8px; right: 8px;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 8px;
  font-size: 0.68rem; font-weight: 700;
  background: rgba(0, 0, 0, 0.62);
  border: 1px solid rgba(212, 175, 55, 0.65);
  border-radius: var(--tc-radius-sm);
  color: #d4af37;
  backdrop-filter: blur(4px);
  /* Ein Pokal ist selten. Ein sehr leiser Schein macht ihn beim Scrollen
     erkennbar, ohne dass er blinkt. */
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.28);
}

/* „Bild 2 von 4 in diesem Beitrag" — ohne diese Zeile versteckt der Stapel
   Bilder, statt sie zu ordnen. */
.social-viewer__stapel {
  font-size: 0.78rem;
  color: var(--tc-text-muted);
  padding: 2px 0 6px;
  letter-spacing: 0.01em;
}

/* Karten-Fuss: Autor links, Zaehler rechts */
.social-card__foot {
  display: flex;
  align-items: center;
  gap: var(--tc-space-2);
  padding: var(--tc-space-2) var(--tc-space-3);
}
.social-card__author {
  flex: 1;
  min-width: 0;
  font-size: var(--tc-text-sm);
  color: var(--tc-text-default);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ⚠️ `-webkit-line-clamp` GREIFT HIER NICHT — im Browser gemessen
   (01.09.2026, Tims Meldung „bricht seltsam um"). Die Regel unten setzt
   `display: -webkit-box` und ist die EINZIGE, die `display` an diesem Element
   setzt (per CSSOM geprueft: genau ein Treffer) — der berechnete Wert ist
   trotzdem `flow-root`. Damit ist es kein Clamp mehr, sondern nur noch
   `overflow: hidden`: Der Text wird MITTEN IN DER DRITTEN ZEILE hart
   abgeschnitten, ohne Ellipse, und die halbe Zeile sieht aus, als liefe sie
   in das Datum darunter. 13 von 29 Notizen waren betroffen.

   `max-height` ist die Sicherung, die unabhaengig vom Clamp haelt: zwei
   Zeilen à `--tc-leading-snug` (1.4). Damit liegt der Schnitt an der
   Zeilengrenze — mit Clamp gibt es die Ellipse dazu, ohne ihn wenigstens
   keine angeschnittene Zeile.
   *Eine Regel, die im Quelltext richtig aussieht und deren berechneter Wert
   ein anderer ist, findet man nur im Browser.* */
.social-card__note {
  padding: 0 var(--tc-space-3) var(--tc-space-2);
  font-size: var(--tc-text-xs);
  color: var(--tc-text-muted);
  line-height: var(--tc-leading-snug);
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
  max-height: calc(var(--tc-leading-snug) * 2em);
}
.social-card__date {
  padding: 0 var(--tc-space-3) var(--tc-space-2);
  font-size: var(--tc-text-2xs);
  color: var(--tc-text-disabled);
}

/* Zaehler (Like/Kommentar) auf der Karte */
.social-counts { display: inline-flex; gap: var(--tc-space-2); flex-shrink: 0; }
.social-count {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: var(--tc-text-xs);
  color: var(--tc-text-muted);
  font-variant-numeric: tabular-nums;
}
.social-count.is-active { color: var(--tc-secondary-light); }

/* === GAESTEBUCH (Seiten-Glue) ============================================ */
/* Compose-Box + Eintraege komponieren tc-card + tc-comment-thread +
 * tc-like-button; hier nur die Anordnung. */
.gb-compose { margin-bottom: var(--tc-space-5); }
.gb-compose__head { display: flex; align-items: center; gap: var(--tc-space-2); margin-bottom: var(--tc-space-2); }
.gb-compose__label { font-size: var(--tc-text-sm); color: var(--tc-text-muted); }
.gb-compose__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--tc-space-2); margin-top: var(--tc-space-2); }

.gb-entry { margin-bottom: var(--tc-space-4); }

/* Der ueber #gb=<id> angesprungene Eintrag (#325, 08.09.2026).
   Zweieinhalb Sekunden Rand und Schein, dann ist es wieder eine Karte wie
   jede andere — die Hervorhebung beantwortet „welcher war gemeint?", sie
   markiert nichts dauerhaft.
   Die Farbe kommt aus dem Theme (--tc-highlight), nicht hart: Sie sagt
   nichts ueber die Daten, sie zeigt nur hin (§9). */
.gb-entry--gefunden {
  animation: gb-gefunden 2.6s ease-out;
}
@keyframes gb-gefunden {
  0%   { box-shadow: 0 0 0 2px var(--tc-highlight), 0 0 18px rgba(0,0,0,0.35); }
  70%  { box-shadow: 0 0 0 2px var(--tc-highlight), 0 0 18px rgba(0,0,0,0.35); }
  100% { box-shadow: 0 0 0 0 transparent, 0 0 0 transparent; }
}
/* Der globale Block in tokens.css kollabiert jede Animation auf 0,01ms —
   fuer eine Hervorhebung ist das genau richtig (der Endzustand ist
   „unauffaellig"), aber dann saehe man sie gar nicht. Deshalb hier ein
   eigener Rand statt der Bewegung: sichtbar, ohne zu blinken. */
@media (prefers-reduced-motion: reduce) {
  .gb-entry--gefunden {
    animation: none;
    outline: 2px solid var(--tc-highlight);
    outline-offset: 2px;
  }
}
.gb-entry__head { display: flex; align-items: center; gap: var(--tc-space-2); margin-bottom: var(--tc-space-2); }
.gb-entry__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gb-entry__author { font-family: var(--tc-font-display); font-size: var(--tc-text-base); color: var(--tc-text-strong); }
.gb-entry__date { font-size: var(--tc-text-xs); color: var(--tc-text-muted); }
.gb-entry__text { font-size: var(--tc-text-base); color: var(--tc-text-default); line-height: var(--tc-leading-normal); white-space: pre-wrap; word-break: break-word; }
.gb-entry__foot { display: flex; gap: var(--tc-space-2); margin-top: var(--tc-space-3); }
.gb-entry__comments { margin-top: var(--tc-space-3); padding-top: var(--tc-space-3); border-top: 1px solid var(--tc-border-subtle); }
.gb-entry__comments .tc-comment-thread { margin-bottom: var(--tc-space-3); }
.gb-entry__comments .tc-comment-form { border-top: none; background: transparent; padding: 0; }

/* Gaestebuch: Foto-Upload in der Compose-Box + Foto im Eintrag */
.gb-compose__photo:not(:empty) { margin-top: var(--tc-space-2); }
.gb-compose__preview {
  position: relative;
  display: inline-block;
  max-width: 200px;
  border-radius: var(--tc-radius-md);
  overflow: hidden;
  border: 1px solid var(--tc-border-default);
}
.gb-compose__preview img { display: block; max-width: 200px; max-height: 150px; object-fit: cover; }
.gb-compose__preview-remove {
  position: absolute; top: 4px; right: 4px;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: rgba(0,0,0,0.6); color: #fff;
  cursor: pointer; font-size: 1.1rem; line-height: 1;
}
.gb-compose__preview-remove:hover { background: var(--tc-danger); }

.gb-entry__photo { margin: var(--tc-space-2) 0; }
.gb-entry__photo img {
  max-width: 100%;
  max-height: 340px;
  border-radius: var(--tc-radius-md);
  border: 1px solid var(--tc-border-subtle);
  cursor: pointer;
  display: block;
  transition: transform var(--tc-motion-fast);
}
.gb-entry__photo img:hover { transform: scale(1.01); }

/* Galerie: Personen-Filter (von/mit mir bzw. beliebige Person) */
.social-member-filter {
  display: flex;
  align-items: center;
  gap: var(--tc-space-2);
  margin-top: var(--tc-space-3);
  flex-wrap: wrap;
}
.social-member-filter__label { font-size: var(--tc-text-sm); color: var(--tc-text-muted); }
.social-member-filter__select {
  background: var(--tc-bg-surface-2, #2a2a2a);
  /* --tc-text-primary gibt es nicht (13.08.2026 gefunden). Der Wert kam
     bisher aus dem Rueckfall #e0e0e0 — sichtbar richtig, aber am
     Token-System vorbei: Ein Theme-Wechsel haette die Farbe nicht
     erreicht. Die Namen sind --tc-text-strong / -default / -muted,
     nicht primary/secondary (CLAUDE.md §9). */
  color: var(--tc-text-default);
  border: 1px solid var(--tc-border-default);
  border-radius: var(--tc-radius-sm);
  padding: 6px 10px;
  font-size: var(--tc-text-sm);
  cursor: pointer;
}
.social-member-filter__select:focus { outline: none; border-color: var(--tc-accent); }

/* Galerie: Batch-Upload (Mehrfach-Vorschau im Upload-Dialog) */
.social-upload-grid { display: flex; flex-wrap: wrap; gap: var(--tc-space-2); }
.social-upload-thumb {
  position: relative; width: 90px; height: 90px;
  border-radius: var(--tc-radius-md); overflow: hidden;
  border: 1px solid var(--tc-border-default); background: rgba(0, 0, 0, 0.3);
}
.social-upload-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.social-upload-thumb__remove {
  position: absolute; top: 3px; right: 3px;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: rgba(0, 0, 0, 0.65); color: #fff;
  cursor: pointer; font-size: 1rem; line-height: 1;
}
.social-upload-thumb__remove:hover { background: var(--tc-danger); }
.social-upload-add {
  width: 90px; height: 90px;
  border-radius: var(--tc-radius-md);
  border: 1px dashed var(--tc-border-default); background: transparent;
  color: var(--tc-text-muted); font-size: 1.8rem; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.social-upload-add:hover { border-color: var(--tc-accent); color: var(--tc-highlight); }
.social-upload-count { margin-top: var(--tc-space-2); font-size: var(--tc-text-sm); color: var(--tc-text-muted); }
.social-upload-hint { margin-top: var(--tc-space-2); font-size: var(--tc-text-xs); color: var(--tc-text-muted); }

/* ===================================================================
   DIE RUECKMELDEZEILE AM ARBEITSNACHWEIS (22.08.2026)
   -------------------------------------------------------------------
   Tim: „Ich bin jetzt gescheitert, weil ich einfach nicht verstanden habe,
   was ich wo eingeben soll."

   Die Zeile sagt, was das Foto beitraegt und ob es bei einem laufenden
   Vorhaben ankommt. Sie steht bewusst DIREKT unter den Feldern und nicht
   als Hilfetext daneben: Sie aendert sich beim Tippen, also gehoert sie
   dorthin, wo der Blick ohnehin ist.

   Farben nach CLAUDE.md §9: Erfolg und Warnung sind DATEN-Farben (sie
   bedeuten etwas ueber den Zustand, nicht ueber die Stimmung), also die
   Zustandstoken — kein Theme-Akzent. */
.social-werk-treffer { color: var(--tc-success); }
.social-werk-warnung { color: var(--tc-warning); }

/* Der Knopf in der Warnung ("Auf 100 setzen") traegt die Korrektur gleich
   ein. ⚠️ Er ist bewusst KEIN tc-button: Er sitzt mitten im Fliesstext einer
   Hinweiszeile, und ein Knopf mit 36px Trefferflaeche (Heuristik 5) wuerde
   die Zeile auseinanderreissen. Fuer Fliesstext-Aktionen ist der
   unterstrichene Link die richtige Form — die Trefferflaeche kommt ueber
   das Innenabstands-Polster, nicht ueber die Hoehe. */
.social-werk-fix {
  background: none;
  border: 0;
  padding: 2px 4px;
  margin: 0 0 0 2px;
  font: inherit;
  color: var(--tc-highlight);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  border-radius: var(--tc-radius-sm);
}
.social-werk-fix:hover,
.social-werk-fix:focus-visible { background: rgba(255, 255, 255, 0.08); }

#social-werk-rechnung {
  line-height: 1.55;
  /* Die Zeile waechst von einer auf drei Zeilen, je nach Lage. Ohne
     Mindesthoehe springt das Formular bei jedem Tastendruck. */
  min-height: 1.55em;
}

/* ============================================================================
 * DER ARBEITSNACHWEIS (13.08.2026)
 * ----------------------------------------------------------------------------
 * Die Auswertung der Galerie, nicht ihr Zwilling: Kennzahlen oben als
 * tc-stat-block wie im Rest der Plattform, darunter die Verteilung als
 * ZEILEN. Bewusst keine Kacheln — dieselbe Lehre wie beim Dashboard-Block
 * "Meine Spiele" am selben Tag: Fuer eine Verteilung ist eine Zeile mit
 * Balken die ehrlichere Form, und sie kostet ein Fuenftel der Hoehe.
 * ========================================================================== */

.werk-verteilung { margin-top: var(--tc-space-4); }

.werk-zeile {
  display: flex;
  align-items: center;
  gap: var(--tc-space-3);
  padding: 6px 0;
}

.werk-zeile__name {
  flex: 0 0 auto;
  min-width: 9rem;
  font-size: var(--tc-text-sm);
  color: var(--tc-text-default);
}

.werk-zeile__balken {
  flex: 1 1 auto;
  height: 6px;
  min-width: 3rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.werk-zeile__balken > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--tc-accent);
}

.werk-zeile__wert {
  flex: 0 0 auto;
  min-width: 2.5rem;
  text-align: right;
  font-family: var(--tc-font-display);
  font-weight: var(--tc-weight-semibold);
  color: var(--tc-highlight);
}

.werk-nachtragen { margin-top: var(--tc-space-4); }

/* Am Handy nimmt der Name die ganze Zeile, Balken und Wert ruecken darunter —
   9rem Name plus Balken plus Wert passen in 343px nicht nebeneinander. */
@media (max-width: 480px) {
  .werk-zeile { flex-wrap: wrap; }
  .werk-zeile__name { flex: 1 1 100%; min-width: 0; }
}

/* ============================================================================
   BEITRAG ODER TRASHTALK (15.08.2026)
   ----------------------------------------------------------------------------
   Tim: "Vielleicht sollten wir hier zwischen Trashtalk und Beitrag
   unterscheiden und ich sortiere das ein?"

   Zwei Knoepfe statt eines Auswahlfelds: Es sind genau zwei Werte, einer ist
   immer gewaehlt, und ein <select> mit zwei Eintraegen verlangt zwei
   Handgriffe fuer das, was hier einer ist. Steht im Hochlade-Dialog und im
   Bearbeiten-Dialog in derselben Form — es ist dieselbe Entscheidung.
   ========================================================================== */

.social-art-wahl {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tc-space-2, 8px);
}

.social-art {
  /* 40px: ueber der 36px-Grenze der Touch-Heuristik, aber flacher als ein
     tc-button — es ist eine Auswahl, kein Aufruf zur Handlung. */
  min-height: 40px;
  padding: 0 var(--tc-space-4, 16px);
  border: 1px solid var(--tc-border-subtle, rgba(255, 255, 255, 0.1));
  border-radius: var(--tc-radius-full, 999px);
  background: var(--tc-bg-surface-2, #2d2d2d);
  color: var(--tc-text-muted, #9e9e9e);
  font-family: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  transition: border-color var(--tc-motion-normal, 0.2s),
              color var(--tc-motion-normal, 0.2s),
              background var(--tc-motion-normal, 0.2s);
}

.social-art:hover { color: var(--tc-text-strong, #e0e0e0); }

.social-art:focus-visible {
  outline: 2px solid var(--tc-highlight, #d4c4a0);
  outline-offset: 2px;
}

/* Der gewaehlte Zustand traegt Rahmen UND Flaeche UND Textfarbe — nicht nur
   die Farbe: Bei zwei nebeneinanderliegenden Knoepfen ist ein reiner
   Farbunterschied auf einem dunklen Grund zu leise, und wer die Seite mit
   erhoehtem Kontrast oder bei Sonnenlicht bedient, sieht ihn gar nicht. */
.social-art.is-aktiv {
  border-color: var(--tc-accent, #a1917a);
  background: var(--tc-bg-surface-3, #3a3a3a);
  /* Getoent in der Akzentfarbe (14.09.2026). Tim am iPhone: „Ich kann hier
     ‚Arbeitsnachweis' nicht anklicken" — er WAR gewaehlt, nur sah man es auf
     dem kleinen Schirm nicht. Rand und Schriftstaerke allein waren zu leise. */
  background: color-mix(in srgb, var(--tc-accent, #a1917a) 26%, var(--tc-bg-surface-2, #2d2d2d));
  box-shadow: inset 0 0 0 1px var(--tc-accent, #a1917a);
  color: var(--tc-text-strong, #e0e0e0);
  font-weight: 600;
}

.social-art.is-aktiv::before {
  content: '\2713\00a0';
}

/* Die Zeile unter der Fotoauswahl: Stand der Umwandlung, oder warum ein Foto
   nicht ging. Im Dialog statt im Toast — der ist nach drei Sekunden weg. */
.social-upload-meldung {
  margin-top: var(--tc-space-2, 8px);
}

.social-upload-meldung.is-fehler {
  color: var(--tc-danger, #e57373);
  font-weight: var(--tc-weight-semibold, 600);
}

@media (prefers-reduced-motion: reduce) {
  .social-art { transition-duration: 0.01ms; }
}

/* ===================================================================
   DER FORTSCHRITTS-REGLER (22.08.2026, Tims Umbau)
   -------------------------------------------------------------------
   Tim: „An jedem Upload hängt ein Fortschritt. Vielleicht einfach sowas wie
   0-10 als Schieberegler und so voll ist dann auch die Progressbar."

   Er ersetzt vier Felder (Kategorie, Stückzahl, Stufe, Prozent) durch eines.
   Die Beschriftung darunter kommt aus Tims Skalen und wird beim Ziehen
   mitgeführt — ohne sie wäre „7" nur eine Zahl. */
.social-regler { display: flex; align-items: center; gap: var(--tc-space-3); }
.social-regler input[type="range"] {
  flex: 1;
  /* Heuristik 5: die Trefferfläche des Griffs muss am Tablet zu treffen sein. */
  min-height: 36px;
  accent-color: var(--tc-accent);
  cursor: pointer;
}
.social-regler__wert {
  flex: 0 0 auto;
  min-width: 4.5em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--tc-text-strong);
  font-weight: 600;
}

/* Das optionale Stufen-Etikett — eingeklappt, weil es die Ausnahme ist.
   Tim wollte es behalten („Regler plus optionales Stufen-Etikett"), aber es
   darf nicht wie eine Pflichtangabe aussehen. */
.social-werk-mehr { margin-top: var(--tc-space-2); }
.social-werk-mehr > summary {
  cursor: pointer;
  font-size: var(--tc-text-xs);
  color: var(--tc-text-muted);
  padding: var(--tc-space-1) 0;
  /* Die Trefferfläche des Aufklappers darf nicht kleiner sein als eine Zeile. */
  min-height: 24px;
}
.social-werk-mehr > summary:hover { color: var(--tc-text-default); }

@media (pointer: coarse) {
  .social-regler input[type="range"] { min-height: 44px; }
}


/* ============================================================================
 * DIE ZWEI SORTEN IM ALBUM (03.09.2026, Taskwerk #551)
 * ----------------------------------------------------------------------------
 * Tim: „Da ist keine Struktur drin — wobei wir wie gesagt keine Hierarchie
 * wollen. […] Bilder vom Spieltisch und Veranstaltungen (als Erinnerungen)
 * und […] Projekte, in denen Bilder liegen."
 *
 * Beide Koepfe sind GLEICH — das ist der ganze Punkt. Ein groesserer Kopf
 * ueber den Projekten haette eine Rangfolge behauptet, die es nicht gibt.
 * Unterschieden wird durch das Zeichen und die Zahl, nicht durch Gewicht.
 * ========================================================================== */

.social-sorte + .social-sorte {
  /* Der Abstand gehoert zum FOLGENDEN Abschnitt — dieselbe Regel wie bei den
     Werkbank-Koepfen. Oben viel, damit der Bruch sichtbar ist. */
  margin-top: var(--tc-space-7, 40px);
  padding-top: var(--tc-space-4, 16px);
  border-top: 1px solid var(--tc-border-subtle);
}

.social-sorte__titel {
  margin: 0 0 var(--tc-space-3, 12px);
}

/* Die Zahl zaehlt, was man SIEHT — also Kacheln, nicht Einzelbilder. Oben im
   Kopf steht „N Fotos", und das ist etwas anderes: Ein Projekt mit sieben
   Fotos ist hier EINE Kachel. Ohne diese Zahl kaeme, wer nachzaehlt, auf ein
   anderes Ergebnis als die Kopfzeile und hielte eines von beiden fuer kaputt. */
.social-sorte__zahl {
  margin-left: auto;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--tc-border-subtle);
  background: var(--tc-bg-surface-2);
  font-family: var(--tc-font-body, inherit);
  font-size: var(--tc-text-xs, 0.72rem);
  font-weight: var(--tc-weight-normal);
  font-variant-numeric: tabular-nums;
  color: var(--tc-text-muted);
}


/* Die Kennzahlen der Galerie als ZEILE (03.09.2026, Taskwerk #550).
   Tim: „Die Stats sind riesig, die Filter nicht." Die Zahlen liest man
   einmal, die Filterleiste darunter braucht man bei jedem Besuch — als drei
   `tc-stat-block` standen sie vor den Bildern und nahmen bei 375px rund
   100px. Dieselbe Auskunft, ein Fuenftel der Hoehe. */
.social-zahlen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tc-space-2, 8px) var(--tc-space-4, 16px);
  margin: 0 0 var(--tc-space-3, 12px);
  font-size: var(--tc-text-sm);
  color: var(--tc-text-muted);
  font-variant-numeric: tabular-nums;
}


/* ============================================================================
 * DIE KLADDE ALS REDAKTIONELLE TEASER (03.09.2026, Taskwerk #552)
 * ----------------------------------------------------------------------------
 * Tim: „Und das Gaestebuch sieht leider auch nicht gut aus. Das sollte eher
 * wie redaktionelle Blog-Teaser daherkommen."
 *
 * Die alte Anordnung war ein FORMULAR MIT PROTOKOLL: Eingabefeld zuerst, dann
 * drei Stat-Kacheln, dann die Beitraege als schmucklose Zeilen. Ein Teaser
 * fuehrt dagegen mit dem Bild, zeigt einen Anriss und den Weg zum Ganzen.
 * ========================================================================== */

/* Das Bild fuehrt — es steht jetzt als erstes Kind der Karte. Randlos bis an
   die Kanten, wie in einem Blatt: Der weisse Rahmen um ein Foto ist die
   Sprache eines Formulars, nicht die einer Seite.
   ⚠️ Seit die Gaestebuchbilder aus dem Album heraus sind (#551), ist dies der
   einzige Ort, an dem man sie ueberhaupt noch sieht — das erhoeht ihr
   Gewicht, und der Umzug nach oben ist die Folge davon. */
.gb-entry__photo:first-child {
  margin: calc(var(--tc-space-4, 16px) * -1) calc(var(--tc-space-4, 16px) * -1) var(--tc-space-3, 12px);
}

.gb-entry__photo:first-child img {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  border: none;
  border-radius: var(--tc-radius-md, 10px) var(--tc-radius-md, 10px) 0 0;
}

/* Der Anriss. Vier Zeilen sind der Kompromiss aus „man erkennt, worum es
   geht" und „zehn Beitraege ergeben eine Flaeche, keine Kette".
   ⚠️ OB GEKLEMMT WIRD, ENTSCHEIDET DER TEXT — der Knopf darunter erscheint
   nur, wenn `_gbAnrisse()` einen echten Ueberlauf gemessen hat. Eine
   Zeichengrenze im JS und eine Zeilenklemme hier waeren zwei Wahrheiten
   darueber, was „lang" heisst, und bei 375px etwas anderes als am
   Schreibtisch. */
.gb-entry__text--anriss {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gb-entry__mehr {
  margin-top: var(--tc-space-1, 4px);
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--tc-font-body, inherit);
  font-size: var(--tc-text-sm);
  font-weight: var(--tc-weight-semibold);
  color: var(--tc-highlight);
}
.gb-entry__mehr:hover { text-decoration: underline; }

/* Das Schreibfeld ist eine HANDLUNG, kein Formularkopf (Taskwerk #552:
   „Das Eingabefeld bleibt erreichbar, nur nicht mehr als Erstes. Wer
   schreiben will, findet es; wer lesen will, wird nicht erst gefragt.").
   Zugeklappt ist es eine Zeile, aufgeklappt das vertraute Feld. */
.gb-anstoss {
  display: flex;
  align-items: center;
  gap: var(--tc-space-2, 8px);
  width: 100%;
  margin-bottom: var(--tc-space-4, 16px);
  padding: var(--tc-space-3, 12px) var(--tc-space-4, 16px);
  border: 1px dashed var(--tc-border-default);
  border-radius: var(--tc-radius-md, 10px);
  background: var(--tc-bg-surface-1);
  cursor: pointer;
  text-align: left;
  font-family: var(--tc-font-body, inherit);
  font-size: var(--tc-text-sm);
  color: var(--tc-text-muted);
  /* Touch-Target (Heuristik 5) */
  min-height: 44px;
  transition: border-color var(--tc-motion-fast, 150ms), color var(--tc-motion-fast, 150ms);
}
.gb-anstoss:hover,
.gb-anstoss:focus-visible {
  border-color: var(--tc-accent);
  color: var(--tc-text-default);
}