/* ============================================================================
RPG Gesuche - Stylesheet
LA Midnight Brutalist Theme
Author: Rogue RPG BB
============================================================================ */
/* ============================================================================
1. WRAPPER & HEADER
Brutalist-Stil wie Memberlist: Ghost-Text, Label, Pipe-Separator
============================================================================ */
/* Aeusserer Container, zentriert mit max-width */
.gesuche-wrapper {
max-width: 1400px;
margin: 1.5rem auto;
padding: 0 1rem;
}
/* Header-Block mit unterem Trennstrich */
.gesuche-header {
position: relative;
padding: 3rem 0;
margin-bottom: 2rem;
border-bottom: 1px solid var(--text-dark);
}
/* Ghost-Text im Hintergrund (dekorativer Outline-Text) */
.gesuche-header::before {
content: 'WANTED';
position: absolute;
top: 0;
right: 0;
font-family: var(--font-display);
font-size: 12rem;
line-height: 0.8;
color: transparent;
-webkit-text-stroke: 1px var(--ghost-stroke);
pointer-events: none;
}
/* Title-Wrapper ueber dem Ghost-Text */
.gesuche-header__title-wrap {
position: relative;
z-index: 1;
}
/* Kleines Accent-Label ueber dem Titel (z.B. "WANTED_") */
.gesuche-header__label {
font-family: var(--font-mono);
font-size: 0.55rem;
color: var(--accent);
letter-spacing: 0.2em;
display: block;
margin-bottom: var(--space-sm);
}
/* Grosser Titel mit Pipe-Separator */
.gesuche-header__title {
font-family: var(--font-display);
font-size: clamp(3rem, 8vw, 5rem);
line-height: 0.95;
letter-spacing: -0.02em;
margin: 0;
color: var(--text);
}
/* Pipe-Zeichen im Titel in Accent-Farbe */
.gesuche-header__title .accent {
color: var(--accent);
}
/* ============================================================================
2. FILTER & BUTTONS
============================================================================ */
/* "Neues Gesuch erstellen" — nutzt globale .lam-btn Klasse */
.gesuche-create-action {
margin-bottom: var(--space-xl);
}
/* Filter-Container */
.gesuche-filters {
margin-bottom: var(--space-xl);
}
/* Einzelne Filter-Gruppe (Beziehungstyp, Status, Typ, Geschlecht) */
.gesuche-filter {
display: flex;
gap: var(--space-xs);
flex-wrap: wrap;
align-items: center;
margin-bottom: var(--space-sm);
}
/* Label vor Filter-Gruppen (z.B. "Geschlecht") */
.gesuche-filter label,
.gesuche-filter > span:first-child:not(.filter-btn) {
font-family: var(--font-mono);
font-size: 0.5rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--text-dark);
margin-right: var(--space-sm);
}
/* Filter-Button: einheitlicher Stil fuer alle Toggle-Gruppen */
.filter-btn {
padding: 0.4rem 0.75rem;
border: none;
background: transparent;
cursor: pointer;
font-family: var(--font-mono);
font-size: 0.5rem;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--text-dark);
text-decoration: none;
transition: color 0.2s;
}
.filter-btn:hover {
color: var(--text);
}
/* Aktiver Filter: Accent-Farbe */
.filter-btn.active {
color: var(--accent);
}
/* Status/Typ-Toggles entfernt: Alle Filter-Gruppen nutzen jetzt
einheitlich .gesuche-filter + .filter-btn (siehe Template + PHP) */
/* ============================================================================
3. GRID — gleiches Pattern wie Memberlist
============================================================================ */
/* Responsive Grid: 3 Spalten auf Desktop, 2 auf Tablet, 1 auf Mobil */
.gesuche-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}
/* ============================================================================
CARD — Brutalist-Stil wie Memberlist Cards
Border, Avatar oben, Info unten, Hover-Effekt
============================================================================ */
.gesuch-card {
background: rgba(255,255,255,0.01);
border: 1px solid var(--text-dark);
overflow: hidden;
transition: all 0.3s var(--ease);
position: relative;
display: flex;
flex-direction: column;
}
/* Hover: Border wird Accent, leichter Lift-Effekt */
.gesuch-card:hover {
border-color: var(--accent-dim);
transform: translateY(-2px);
}
/* Avatar-Link als Block (klickbar) */
.gesuch-card__avatar-link {
display: block;
width: 100%;
height: 200px;
overflow: hidden;
}
/* Avatar-Bild: komplett S/W, Farbe bei Hover */
.gesuch-card__avatar {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(100%) contrast(1.1);
transition: filter 0.5s var(--ease);
}
.gesuch-card:hover .gesuch-card__avatar {
filter: grayscale(0%) contrast(1);
}
/* Info-Block unter dem Avatar */
.gesuch-card__info {
padding: var(--space-md);
display: flex;
flex-direction: column;
flex: 1;
}
/* Badge-Leiste (Genre, Status) */
.gesuch-card__badges {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
margin-bottom: var(--space-sm);
}
/* Titel: Display-Font, gross, uppercase */
.gesuch-card__name {
font-family: var(--font-display);
font-size: 1.4rem;
letter-spacing: 0.03em;
margin: 0 0 var(--space-xs) 0;
line-height: 1.1;
}
.gesuch-card__name a {
color: var(--text);
text-decoration: none;
transition: color 0.2s;
}
.gesuch-card__name a:hover {
color: var(--accent);
}
/* Kurzbeschreibung: Body-Font, gedaempfte Farbe */
.gesuch-card__desc {
font-family: var(--font-body);
font-size: 0.8rem;
color: var(--text-dim);
line-height: 1.7;
margin: 0 0 var(--space-sm) 0;
}
/* Footer: Author + Edit-Buttons, am unteren Rand fixiert */
.gesuch-card__footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
padding-top: var(--space-sm);
border-top: 1px solid var(--text-dark);
}
/* Author-Info: Mono, klein, uppercase */
.gesuch-card__author {
font-family: var(--font-mono);
font-size: 0.45rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--text-dark);
}
.gesuch-card__author a {
color: var(--text-dim);
text-decoration: none;
}
.gesuch-card__author a:hover {
color: var(--accent);
}
/* Empty State */
.gesuche-empty {
padding: var(--space-2xl);
text-align: center;
color: var(--text-dim);
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.1em;
}
/* ============================================================================
BADGES - Brutalist Minimal
Inline-Styles wurden aus gesuche.php entfernt.
Kategorie-Farbe kommt jetzt als --kat-color CSS-Variable.
============================================================================ */
/* Alle Badges: Text-Only Basis */
.gesuch-badge,
.status-badge {
display: inline-flex;
align-items: center;
padding: 0;
font-family: var(--font-mono);
font-size: 0.5rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
background: transparent;
border: none;
border-radius: 0;
color: var(--text-dark);
}
/* Genre-Badge: nutzt --kat-color als Textfarbe (nicht als Hintergrund) */
.gesuch-badge.badge-genre {
color: var(--kat-color, var(--text-dim));
}
.gesuch-badge.badge-genre::before {
content: "/";
margin-right: 0.25rem;
color: var(--text-dark);
}
/* Typ-Badge */
.gesuch-badge.badge-typ {
color: var(--text-dim);
}
/* Status: Frei — gruener Punkt */
.status-badge.status-frei {
color: var(--success);
}
.status-badge.status-frei::before {
content: "●";
margin-right: 0.35rem;
}
/* Status: Reserviert/Teilreserviert — gelber Halbkreis */
.status-badge.status-reserviert,
.status-badge.status-teilreserviert {
color: var(--warning);
}
.status-badge.status-reserviert::before,
.status-badge.status-teilreserviert::before {
content: "◐";
margin-right: 0.35rem;
}
/* Status: Vergeben — leerer Kreis */
.status-badge.status-vergeben {
color: var(--text-dark);
}
.status-badge.status-vergeben::before {
content: "○";
margin-right: 0.35rem;
}
/* ============================================================================
BUTTONS - Brutalist
============================================================================ */
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-export {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 1.25rem;
font-family: var(--font-mono);
font-size: 0.55rem;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
cursor: pointer;
text-decoration: none;
transition: all 0.2s;
border: none;
background: transparent;
}
.btn-primary {
background: var(--accent) !important;
color: var(--bg) !important;
}
.btn-primary:hover {
background: var(--accent-hover) !important;
/* Text dunkel halten — globaler a:hover würde sonst accent setzen */
color: var(--bg);
}
.btn-secondary {
color: var(--text-dark) !important;
}
.btn-secondary:hover {
color: var(--text) !important;
}
.btn-danger {
color: var(--error) !important;
}
.btn-danger:hover {
background: var(--error) !important;
color: var(--bg) !important;
}
.btn-export {
color: var(--text-dim) !important;
}
.btn-export:hover {
color: var(--text) !important;
}
/* ============================================================================
DETAIL ANSICHT — Brutalist Layout
============================================================================ */
/* Aeusserer Container */
.gesuch-detail {
max-width: 1100px;
margin: 0 auto;
padding: 1.5rem;
background: transparent;
}
/* --- Header: Avatar + Info nebeneinander --- */
.gesuch-detail-header {
display: grid;
grid-template-columns: 300px 1fr;
gap: 2.5rem;
padding: 0;
margin-bottom: 0;
border-bottom: none;
}
/* Linke Spalte: Avatar + Action-Buttons darunter */
.gesuch-detail-header__left {
align-self: start;
}
/* Avatar: komplett S/W, Farbe nur bei Hover */
.gesuch-detail-header__avatar {
width: 100%;
height: auto;
display: block;
object-fit: cover;
filter: grayscale(100%) contrast(1.1);
transition: filter 0.5s var(--ease);
}
.gesuch-detail-header__left:hover .gesuch-detail-header__avatar {
filter: grayscale(0%) contrast(1);
}
/* Info-Block rechts neben Avatar */
.gesuch-detail-header__info {
display: flex;
flex-direction: column;
}
/* Badges oben im Header */
.gesuch-detail-header__badges {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
margin-bottom: var(--space-sm);
}
/* Grosser Titel: Display-Font */
.gesuch-detail-header__title {
font-family: var(--font-display);
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 400;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text);
line-height: 1;
margin: 0 0 var(--space-md) 0;
}
/* Kurzbeschreibung */
.gesuch-detail-header__desc {
font-family: var(--font-body);
font-size: 0.9rem;
color: var(--text-dim);
line-height: 1.8;
margin-bottom: var(--space-md);
}
/* Header-Fields Container: Name, Alter, Geschlecht etc. */
.gesuch-detail-header__fields {
margin-top: auto;
}
.sv-gesuch-header-fields {
margin-top: var(--space-md);
padding-top: var(--space-md);
border-top: 1px solid var(--text-dark);
}
/* Einzelnes Header-Field: Label + Wert */
.sv-gesuch-header-field {
font-family: var(--font-body);
font-size: 0.85rem;
color: var(--text-dim);
line-height: 1.8;
}
/* Field-Label: Mono, klein, uppercase */
.sv-gesuch-header-field strong {
font-family: var(--font-mono);
font-size: 0.5rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--text-dark);
margin-right: var(--space-xs);
}
/* Author-Zeile: am unteren Rand, keine eigene Border */
.gesuch-detail-header__author {
margin-top: var(--space-sm);
font-family: var(--font-mono);
font-size: 0.5rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--text-dark);
}
.gesuch-detail-header__author a {
color: var(--text-dim);
text-decoration: none;
}
.gesuch-detail-header__author a:hover {
color: var(--accent);
}
/* --- Action-Buttons: unter dem Avatar in der linken Spalte --- */
.gesuch-detail-header__actions,
.gesuch-detail-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs) var(--space-sm);
align-items: center;
margin-top: var(--space-sm);
padding-top: var(--space-sm);
border-top: 1px solid var(--text-dark);
}
/* Leere Actions ausblenden */
.gesuch-detail-header__actions:empty,
.gesuch-detail-actions:empty {
display: none;
}
/* Alle Buttons/Links in den Actions einheitlich: Text-Only, kein BG */
.gesuch-detail-header__actions a,
.gesuch-detail-header__actions button,
.gesuch-detail-header__actions .btn-secondary,
.gesuch-detail-header__actions .btn-danger,
.gesuch-detail-actions a,
.gesuch-detail-actions button {
display: inline-block;
padding: var(--space-xs) 0;
border: none;
background: transparent !important;
cursor: pointer;
font-family: var(--font-mono);
font-size: 0.5rem;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
text-decoration: none;
color: var(--text-dark);
transition: color 0.2s;
}
/* Hover: heller */
.gesuch-detail-header__actions a:hover,
.gesuch-detail-header__actions button:hover,
.gesuch-detail-actions a:hover,
.gesuch-detail-actions button:hover {
color: var(--text);
}
/* Loeschen: Accent-Rot als Textfarbe, kein gefuellter Button */
.gesuch-detail-header__actions .btn-danger,
.gesuch-detail-actions .btn-danger {
color: var(--error) !important;
}
.gesuch-detail-header__actions .btn-danger:hover,
.gesuch-detail-actions .btn-danger:hover {
color: var(--text) !important;
background: transparent !important;
}
/* Inline-Formulare (Reserviert/Vergeben) flach halten */
.gesuch-detail-header__actions .gesuch-inline-form,
.gesuch-detail-actions .gesuch-inline-form {
display: inline;
margin: 0;
}
/* --- Detail Body: Sektionen wie Hintergrundstory --- */
.gesuch-detail-body {
padding: var(--space-xl) 0 0 0;
border-top: 1px solid var(--text-dark);
margin-top: var(--space-lg);
}
/* Einzelne Sektion (Hintergrundstory, Beziehung, Sonstiges) */
.gesuch-section {
margin-bottom: var(--space-2xl);
}
.gesuch-section:last-child {
margin-bottom: 0;
}
/* Section-Label: Mono, uppercase, Accent-Unterstrich */
.gesuch-section__label {
font-family: var(--font-mono);
font-size: 0.55rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--text-dark);
margin: 0 0 var(--space-md) 0;
padding-bottom: var(--space-xs);
border-bottom: 2px solid var(--accent);
display: inline-block;
}
/* Section-Inhalt: Body-Font, weicher Farbton */
.gesuch-section__content,
.gesuch-section__content p {
font-family: var(--font-body);
font-size: 0.9rem;
color: var(--text-dim);
line-height: 1.8;
}
/* Fallback fuer alte h3 Selektoren */
.gesuch-section h3 {
font-family: var(--font-mono);
font-size: 0.55rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--text-dark);
margin-bottom: 1rem;
}
.gesuch-section p,
.gesuch-section div:not(.sub-gesuche-grid) {
font-family: var(--font-body);
font-size: 0.9rem;
color: var(--text-dim);
line-height: 1.8;
}
/* ============================================================================
SUCHENDER CHARAKTER — Brutalist Card-Stil
============================================================================ */
/* Suchender-Box: eine Trennlinie oben genuegt */
.suchender-box {
padding: var(--space-xl) 0;
background: transparent;
border-top: 1px solid var(--text-dark);
margin-top: 0;
}
/* Section-Label: Mono, Accent-Unterstrich */
.suchender-box__label {
font-family: var(--font-mono);
font-size: 0.55rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--text-dark);
margin: 0 0 var(--space-lg) 0;
padding-bottom: var(--space-xs);
border-bottom: 2px solid var(--accent);
display: inline-block;
}
/* Fallback fuer alte h3 Selektoren */
.suchender-box h3 {
font-family: var(--font-mono);
font-size: 0.55rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--text-dark);
margin: 0 0 1.5rem 0;
}
/* Content: Avatar + Info nebeneinander */
.suchender-content {
display: flex;
gap: var(--space-lg);
align-items: flex-start;
}
/* Avatar: fixe Groesse, Graustufen */
.suchender-avatar {
flex-shrink: 0;
width: 120px;
}
/* Avatar: komplett S/W, Farbe bei Hover */
.suchender-avatar img {
width: 120px;
max-height: 160px;
object-fit: cover;
filter: grayscale(100%) contrast(1.1);
transition: filter 0.5s var(--ease);
}
.suchender-avatar:hover img {
filter: grayscale(0%) contrast(1);
}
/* Info-Block */
.suchender-info {
flex: 1;
}
/* Name: Display-Font, Accent bei Hover */
.suchender-name {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 400;
letter-spacing: 0.03em;
margin: 0 0 var(--space-sm) 0;
}
.suchender-name a {
color: var(--text);
text-decoration: none;
transition: color 0.2s;
}
.suchender-name a:hover {
color: var(--accent);
}
/* Felder: Alter, Stadt etc. als Inline-Tags */
.suchender-fields {
display: flex;
flex-wrap: wrap;
gap: var(--space-md);
margin-bottom: var(--space-sm);
}
.suchender-field {
font-family: var(--font-mono);
font-size: 0.45rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--text-dark);
background: transparent;
border: none;
padding: 0;
}
.suchender-field strong {
color: var(--text-dim);
margin-right: 0.35rem;
}
/* Ueber-mich Text: linke Accent-Border, gleiche Farbe wie Gesuch-Body
Beide Klassennamen: .suchender-about (neues Template) und
.suchender-ueber-mich (falls alte Template-Version aktiv) */
.suchender-about,
.suchender-ueber-mich {
font-family: var(--font-body);
font-size: 0.9rem;
line-height: 1.8;
color: var(--text-dim);
margin-top: var(--space-md);
padding-left: var(--space-md);
border-left: 2px solid var(--accent);
}
/* ============================================================================
SUB-GESUCHE — Brutalist Card Grid
============================================================================ */
/* Grid fuer gesuchte Charaktere */
.sub-gesuche-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1rem;
}
/* Sub-Card: Border wie Hauptkarten */
.sub-gesuch-card {
background: rgba(255,255,255,0.01);
border: 1px solid var(--text-dark);
overflow: hidden;
transition: all 0.3s var(--ease);
}
.sub-gesuch-card:hover {
border-color: var(--accent-dim);
transform: translateY(-2px);
}
/* Sub-Avatar: Oben in der Card */
/* Sub-Avatar: komplett S/W, Farbe bei Hover */
.sub-gesuch-card__avatar {
width: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
filter: grayscale(100%) contrast(1.1);
transition: filter 0.5s var(--ease);
display: block;
}
.sub-gesuch-card:hover .sub-gesuch-card__avatar {
filter: grayscale(0%) contrast(1);
}
/* Info-Block unter Avatar */
.sub-gesuch-card__info {
padding: var(--space-md);
}
/* Sub-Name: Display-Font */
.sub-gesuch-card__name {
font-family: var(--font-display);
font-size: 1.2rem;
font-weight: 400;
letter-spacing: 0.03em;
color: var(--text);
margin: 0 0 var(--space-xs) 0;
}
/* Sub-Badges: Status + Felder */
.sub-gesuch-card__badges {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
margin-bottom: var(--space-sm);
}
/* Fallback fuer alte Klassen */
.sub-gesuch-avatar {
width: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
filter: grayscale(100%) contrast(1.1);
display: block;
}
.sub-gesuch-info h4 {
font-family: var(--font-display);
font-size: 1rem;
letter-spacing: 0.03em;
color: var(--text);
margin: 0 0 0.5rem 0;
}
/* ============================================================================
REPLIES — Brutalist Section
============================================================================ */
/* Replies: kein extra border-top, vorherige Section hat schon Abstand */
.gesuch-replies {
padding: var(--space-xl) 0 0 0;
border-top: 1px solid var(--text-dark);
margin-top: 0;
}
/* Section-Label mit Accent-Unterstrich */
.gesuch-replies__label {
font-family: var(--font-mono);
font-size: 0.55rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--text-dark);
margin: 0 0 var(--space-lg) 0;
padding-bottom: var(--space-xs);
border-bottom: 2px solid var(--accent);
display: inline-block;
}
/* Fallback fuer alte h3 Selektoren */
.gesuch-replies > h3 {
font-family: var(--font-mono);
font-size: 0.55rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--text-dark);
margin: 0 0 1.5rem 0;
}
.reply-item {
background: transparent;
padding: 0 0 1.5rem 0;
margin-bottom: 1.5rem;
border-bottom: 1px solid var(--text-dark);
}
.reply-item:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.reply-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.75rem;
}
.reply-header strong {
font-family: var(--font-body);
font-size: 0.9rem;
font-weight: 600;
color: var(--text);
}
.reply-header a {
color: var(--text);
text-decoration: none;
}
.reply-header a:hover {
color: var(--accent);
}
.reply-date {
font-family: var(--font-mono);
font-size: 0.5rem;
letter-spacing: 0.1em;
color: var(--text-dark);
}
.reply-message {
font-family: var(--font-body);
font-size: 0.85rem;
color: var(--text-dim);
line-height: 1.7;
}
.reply-actions {
margin-top: 0.75rem;
}
.reply-actions a {
font-family: var(--font-mono);
font-size: 0.5rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-dark);
text-decoration: none;
margin-right: 1rem;
}
.reply-actions a:hover {
color: var(--accent);
}
/* ============================================================================
REPLY FORM — Brutalist Section
============================================================================ */
/* Reply-Form: border-top als Trenner, kein doppelter Abstand */
.gesuch-reply-form {
padding: var(--space-xl) 0 0 0;
border-top: 1px solid var(--text-dark);
margin-top: 0;
}
/* Section-Label mit Accent-Unterstrich */
.gesuch-reply-form__label {
font-family: var(--font-mono);
font-size: 0.55rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--text-dark);
margin: 0 0 var(--space-lg) 0;
padding-bottom: var(--space-xs);
border-bottom: 2px solid var(--accent);
display: inline-block;
}
/* Reply-to Info-Box (bei verschachtelten Antworten) */
.gesuch-reply-to-info {
background: rgba(255,255,255,0.03);
border: 1px solid var(--text-dark);
padding: var(--space-sm);
margin-bottom: var(--space-md);
font-family: var(--font-mono);
font-size: 0.5rem;
color: var(--text-dim);
}
/* Fallback fuer alte h3 Selektoren */
.gesuch-reply-form h3 {
font-family: var(--font-mono);
font-size: 0.55rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--text-dark);
margin: 0 0 1.5rem 0;
}
/* ============================================================================
FORMULARE
============================================================================ */
.gesuch-form {
max-width: 800px;
margin: 1.5rem auto;
padding: 0 1rem;
}
.gesuch-form h1 {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 400;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text);
margin: 0 0 2rem 0;
padding-bottom: 1rem;
border-bottom: 1px solid var(--text-dark);
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
font-family: var(--font-mono);
font-size: 0.55rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
margin-bottom: 0.5rem;
color: var(--text-dim);
}
.form-group input[type="text"],
.form-group textarea,
.form-group select {
width: 100%;
padding: 0.75rem 0;
border: none;
border-bottom: 1px solid var(--text-dark);
background: transparent;
color: var(--text);
font-family: var(--font-body);
font-size: 0.9rem;
box-sizing: border-box;
transition: border-color 0.2s;
}
.form-group input[type="text"]:focus,
.form-group textarea:focus,
.form-group select:focus {
outline: none;
border-bottom-color: var(--accent);
}
.form-group textarea {
min-height: 150px;
resize: vertical;
line-height: 1.7;
}
.form-group select {
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23808080' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0 center;
}
.form-hint {
font-family: var(--font-mono);
font-size: 0.5rem;
letter-spacing: 0.1em;
color: var(--text-dark);
margin-top: 0.5rem;
}
.form-buttons {
display: flex;
gap: 1rem;
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid var(--text-dark);
}
.sub-gesuch-edit {
background: transparent;
padding: 1.5rem 0;
margin-bottom: 1.5rem;
border-bottom: 1px solid var(--text-dark);
}
/* ============================================================================
EXPORT MODAL
============================================================================ */
.export-modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.9);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
}
.export-modal {
background: var(--bg);
border: 1px solid var(--text-dark);
max-width: 800px;
width: 90%;
max-height: 90vh;
overflow: hidden;
display: flex;
flex-direction: column;
}
.export-modal-header {
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--text-dark);
display: flex;
justify-content: space-between;
align-items: center;
}
.export-modal-header h3 {
margin: 0;
font-family: var(--font-display);
font-size: 1rem;
font-weight: 400;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text);
}
.export-modal-close {
background: transparent;
border: none;
font-size: 1.5rem;
color: var(--text-dark);
cursor: pointer;
padding: 0;
line-height: 1;
transition: color 0.2s;
}
.export-modal-close:hover {
color: var(--text);
}
.export-modal-body {
padding: 1.5rem;
overflow-y: auto;
}
.export-preview {
padding: 1rem;
background: var(--bg-alt);
margin-bottom: 1rem;
max-height: 200px;
overflow-y: auto;
font-family: var(--font-body);
font-size: 0.85rem;
color: var(--text-dim);
line-height: 1.6;
}
.export-code textarea {
width: 100%;
height: 150px;
font-family: var(--font-mono);
font-size: 0.7rem;
padding: 0.75rem;
border: 1px solid var(--text-dark);
background: var(--bg);
color: var(--text);
resize: vertical;
}
.export-code textarea:focus {
outline: none;
border-color: var(--accent);
}
.export-modal-footer {
padding: 1rem 1.5rem;
border-top: 1px solid var(--text-dark);
display: flex;
justify-content: flex-end;
gap: 0.75rem;
}
/* ============================================================================
USER PROFILE GESUCHE
============================================================================ */
.user-gesuche-wrapper {
padding: 1rem 0;
}
.user-gesuche-header h2 {
font-family: var(--font-mono);
font-size: 0.55rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--text-dark);
margin: 0 0 1.5rem 0;
}
.user-gesuche-list {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.user-gesuch-item {
display: flex;
gap: 1.25rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--text-dark);
}
.user-gesuch-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.user-gesuch-avatar img {
width: 80px;
height: 100px;
object-fit: cover;
filter: grayscale(30%);
}
.user-gesuch-content {
flex: 1;
}
.user-gesuch-title {
font-family: var(--font-display);
font-size: 1rem;
font-weight: 400;
letter-spacing: 0.05em;
text-transform: uppercase;
margin: 0 0 0.5rem 0;
}
.user-gesuch-title a {
color: var(--text);
text-decoration: none;
}
.user-gesuch-title a:hover {
color: var(--accent);
}
.user-gesuch-meta {
display: flex;
gap: 1rem;
margin-bottom: 0.5rem;
}
.user-gesuch-desc {
font-family: var(--font-body);
font-size: 0.8rem;
color: var(--text-dim);
line-height: 1.6;
margin: 0 0 0.5rem 0;
}
.user-gesuch-date {
font-family: var(--font-mono);
font-size: 0.5rem;
letter-spacing: 0.1em;
color: var(--text-dark);
}
/* ============================================================================
NO RESULTS — .gesuche-empty ersetzt .no-results
============================================================================ */
/* ============================================================================
PAGINATION
============================================================================ */
.pagination {
display: flex;
justify-content: center;
gap: 0.5rem;
margin: 2rem 0;
}
.pagination a,
.pagination span {
padding: 0.5rem 0.75rem;
font-family: var(--font-mono);
font-size: 0.55rem;
letter-spacing: 0.1em;
color: var(--text-dark);
text-decoration: none;
transition: color 0.2s;
}
.pagination a:hover {
color: var(--text);
}
.pagination .active {
color: var(--accent);
}
/* ============================================================================
NAVIGATION (Zurueck-Link + Export)
============================================================================ */
/* Navigation: Zurueck + Export */
.gesuch-detail-nav,
.gesuch-back-link {
display: flex;
gap: var(--space-md);
align-items: center;
padding: var(--space-xl) 0;
margin-top: 0;
border-top: 1px solid var(--text-dark);
}
/* ============================================================================
RESPONSIVE
============================================================================ */
@media (max-width: 768px) {
/* Header-Titel kleiner auf Mobil */
.gesuche-header__title {
font-size: 2.5rem;
}
/* Ghost-Text ausblenden auf kleinem Screen */
.gesuche-header::before {
display: none;
}
/* Grid: eine Spalte auf Mobil */
.gesuche-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
/* Detail-Header: Stack auf Mobil */
.gesuch-detail-header {
grid-template-columns: 1fr;
gap: var(--space-md);
}
.gesuch-detail-header__title {
font-size: 2rem;
}
.sub-gesuche-grid {
grid-template-columns: 1fr;
}
.suchender-content {
flex-direction: column;
}
.suchender-avatar {
width: 100px;
}
.suchender-avatar img {
width: 100px;
height: 125px;
}
.user-gesuch-item {
flex-direction: column;
gap: 1rem;
}
.user-gesuch-avatar img {
width: 100%;
height: 200px;
}
}
/* v2.4: Kommentar-Zähler */
.gesuch-reply-count {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-xs) var(--space-sm);
font-size: 0.55rem;
color: var(--text-muted, #888888);
background: var(--bg-alt, #0a0a0a);
border: 1px solid var(--border-light, #2a2a2a);
border-radius: 0;
}
.gesuch-reply-count svg {
width: 14px;
height: 14px;
fill: none;
stroke: currentColor;
stroke-width: 2;
}
/* ============================================================================
v3.2: GESUCHE-WIDGET (Brutalist, analog rpg-calendar-header-widget)
Behaelt die alten Klassen .rpg-forumbit-* damit das PHP-Plugin
(rpg_gesuche.php, Funktion rpg_gesuche_forumbit_cards()) weiter
funktioniert. Big-Display-Wort "WANTED" + Link rechts. Cards mit
S/W-Bild und rotem mix-blend-mode:multiply Overlay bei Hover —
analog .lam-team__portrait (showteam.css).
============================================================================ */
/* Aussenrahmen: transparent mit Border oben + unten — wie Kalender-Widget */
.rpg-forumbit-wrapper {
background: transparent;
border: none;
border-top: 1px solid var(--text-dark);
border-bottom: 1px solid var(--text-dark);
padding: var(--space-xl) 0;
margin: var(--space-xl) 0;
position: relative;
}
/* Corner-Label oben links — analog "CAL" beim Kalender */
.rpg-forumbit-wrapper::before {
content: 'WTD';
position: absolute;
top: -0.5rem;
left: 0;
font-family: var(--font-mono);
font-size: 0.5rem;
color: var(--accent);
background: var(--bg);
padding: 0 var(--space-sm);
letter-spacing: 0.2em;
}
/* Title-Zeile: Big-Display-Wort links, Link mit Border-Frame rechts.
align-items:flex-end damit der Link an der Bebas-Baseline sitzt. */
.rpg-forumbit-title {
margin: 0 0 var(--space-lg) 0;
padding: 0;
border: none;
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 1.5rem;
}
/* Big-Display-Wort "WANTED" — analog .widget-year (2026) beim Kalender */
.rpg-forumbit-title__display {
font-family: var(--font-display);
font-size: clamp(4rem, 10vw, 6rem);
font-weight: 400;
color: var(--accent);
letter-spacing: 0.02em;
line-height: 0.85;
}
/* Link rechts mit dezenter Border — analog .widget-link beim Kalender.
align-self:flex-start + margin-top damit er oben am Display sitzt. */
.rpg-forumbit-title a {
font-family: var(--font-mono);
font-size: 0.55rem;
font-weight: 400;
color: var(--text-dark);
text-decoration: none;
letter-spacing: 0.1em;
padding: 0.25rem 0.75rem;
border: 1px solid var(--text-dark);
transition: all 0.3s var(--ease);
text-transform: uppercase;
align-self: flex-start;
margin-top: var(--space-lg);
}
.rpg-forumbit-title a:hover {
color: var(--accent);
border-color: var(--accent);
}
/* Cards-Grid: 4 Spalten Desktop */
.rpg-forumbit-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-lg);
}
/* Card: transparent + duenne Border, Bild oben statt links */
.rpg-forumbit-card {
background: transparent;
border: 1px solid var(--text-dark);
border-radius: 0;
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
padding: 0;
transition: border-color 0.3s var(--ease);
overflow: hidden;
transform: none;
}
.rpg-forumbit-card:hover {
border-color: var(--accent);
transform: none;
}
/* Bild-Wrapper: eigener Stacking-Context (isolation) damit das ::before
Multiply-Overlay nicht ueber andere Cards drueberlaeuft */
.rpg-forumbit-card-image {
position: relative;
width: 100%;
aspect-ratio: 16 / 10;
overflow: hidden;
isolation: isolate;
background: var(--bg-alt);
}
/* Bild s/w mit leichtem Kontrast — analog .lam-team__portrait img */
.rpg-forumbit-card-avatar {
position: relative;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0;
display: block;
filter: grayscale(100%) contrast(1.1);
transition: filter 0.6s var(--ease);
}
.rpg-forumbit-card:hover .rpg-forumbit-card-avatar {
/* Kontrast hoch fuer kraeftigeren Duotone-Look */
filter: grayscale(100%) contrast(1.35) brightness(1.05);
}
/* Roter Multiply-Overlay nur bei Hover — analog .lam-team__portrait::before.
Schatten bleiben schwarz, Lichter werden rein rot. */
.rpg-forumbit-card-image::before {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background: var(--accent);
mix-blend-mode: multiply;
opacity: 0;
transition: opacity 0.6s var(--ease);
pointer-events: none;
}
.rpg-forumbit-card:hover .rpg-forumbit-card-image::before {
opacity: 1;
}
/* Info-Bereich unter dem Bild */
.rpg-forumbit-card-info {
padding: var(--space-md);
display: flex;
flex-direction: column;
gap: var(--space-sm);
flex: 1;
min-width: 0;
}
/* Card-Title in Display-Font fuer Brutalist-Feeling */
.rpg-forumbit-card-title {
font-family: var(--font-display);
font-size: 1.15rem;
font-weight: 400;
letter-spacing: 0.05em;
line-height: 1.1;
color: var(--text);
margin-bottom: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Meta-Zeile: Badges */
.rpg-forumbit-card-meta {
display: flex;
gap: var(--space-xs);
flex-wrap: wrap;
margin-top: auto;
}
/* Brutalist-Badge: nur Border + Text, keine bunten Flaechen mehr.
DB-Farbe kommt als Custom-Property --badge-c aus dem Template
(Inline-Style, da pro Kategorie/Status dynamisch aus rpg_gesuche_categories
/ rpg_gesuche_status_types). Fallback: text-dim/text-dark. */
.rpg-forumbit-card-badge {
font-family: var(--font-mono);
font-size: 0.5rem;
font-weight: 400;
letter-spacing: 0.15em;
text-transform: uppercase;
padding: 0.25rem 0.5rem;
border: 1px solid var(--badge-c, var(--text-dark));
color: var(--badge-c, var(--text-dim));
background: transparent;
border-radius: 0;
}
/* Responsive: Mobile-first */
@media (max-width: 1200px) {
.rpg-forumbit-cards { grid-template-columns: repeat(3, 1fr); }
.rpg-forumbit-title__display { font-size: 4rem; }
}
@media (max-width: 900px) {
.rpg-forumbit-cards { grid-template-columns: repeat(2, 1fr); }
.rpg-forumbit-title { flex-wrap: wrap; }
.rpg-forumbit-title__display { font-size: 3rem; }
.rpg-forumbit-title a { margin-top: 0; }
}
@media (max-width: 480px) {
.rpg-forumbit-cards {
grid-template-columns: 1fr;
gap: var(--space-md);
}
.rpg-forumbit-wrapper {
padding: var(--space-lg) 0;
}
.rpg-forumbit-title__display { font-size: 2.5rem; }
}
/* ============================================================================
KLASSEN AUS PHP (ersetzt Inline-Styles)
============================================================================ */
/* Custom-Filter Label (z.B. "Geschlecht") */
.custom-field-filter {
margin-bottom: var(--space-md);
}
.custom-field-label {
font-family: var(--font-mono);
font-size: 0.5rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--text-dark);
margin-bottom: var(--space-xs);
}
/* Inline-Formulare (Status-Aenderung) */
.gesuch-inline-form {
display: inline;
margin-left: var(--space-xs);
}
/* Status-Aenderung Block */
.gesuch-status-change {
margin-top: var(--space-md);
}
.gesuch-status-label {
font-family: var(--font-mono);
font-size: 0.55rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-dark);
}
/* Detail-Actions (Bearbeiten, Status, Loeschen) */
.gesuch-detail-actions {
margin-top: var(--space-xl);
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
align-items: center;
}
/* Antworten-Char-Info (z.B. "→ Charname") */
.gesuch-reply-char {
color: var(--info);
font-size: 0.85rem;
}
/* Avatar-Preview im Bearbeitungsformular */
.gesuch-edit-avatar-preview {
margin-top: var(--space-sm);
}
.gesuch-edit-avatar-preview img {
max-width: 150px;
max-height: 100px;
border: 1px solid var(--border);
padding: 3px;
}
/* Radio/Checkbox Gruppen */
.gesuch-radio-group {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.gesuch-form-label {
display: flex;
align-items: center;
gap: var(--space-sm);
font-family: var(--font-body);
font-size: 0.85rem;
color: var(--text-dim);
cursor: pointer;
}
/* Card-Actions (Bearbeiten | Loeschen auf der Karte) */
.gesuch-actions {
font-family: var(--font-mono);
font-size: 0.55rem;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-top: var(--space-sm);
}
.gesuch-actions a {
color: var(--text-dark);
text-decoration: none;
transition: color 0.2s;
}
.gesuch-actions a:hover {
color: var(--text);
}
/* 12) SUCHENDER-BADGES (v2.5) - werden in den Export-Vorlagen
ueber {$suchender_felder_html} gerendert. Eine Badge pro konfiguriertem
Profilfeld aus dem ACP-Tab "Suchender-Felder". */
.sv-suchender-badge {
display: inline-block;
background: #fff;
border: 1px solid #e5e7eb;
padding: .35rem .75rem;
margin: 0 .4rem .4rem 0;
border-radius: 6px;
font-size: 13px;
line-height: 1.4;
vertical-align: middle;
}
.sv-suchender-badge-label {
color: #6b7280;
font-weight: 600;
margin-right: .25rem;
}
.sv-suchender-badge-value {
color: #111827;
}
/* 13) HERO-BLOCK (v3.0 - LA MIDNIGHT BRUTALIST) - wird ueber
{$rpg_gesuche_hero} ausgegeben. Kompaktes, horizontales Layout fuer den
hero-sidebar-block ("CURRENT WANTEDS"). Bewusst klein gehalten, damit
der Hero nicht aufgeblaeht wird. */
/* Aeusserer Container - kein eigener Hintergrund/Border, reiht sich
dezent in den Sidebar-Block ein. */
.rpg-gesuche-hero {
margin: 0;
}
/* Klick-Wrapper umschliesst Bild + Info, damit der ganze Block linkbar ist */
.rpg-gesuche-hero-link {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
text-decoration: none;
color: inherit;
padding: var(--space-xs) 0;
transition: opacity 0.3s var(--ease);
}
.rpg-gesuche-hero-link:hover {
opacity: 0.85;
}
/* Bild links - klein und quadratisch, brutalist scharfkantig */
.rpg-gesuche-hero-avatar {
flex-shrink: 0;
width: 56px;
height: 56px;
object-fit: cover;
/* grayscale wie im restlichen Hero-Bereich, Farbe bei Hover */
filter: grayscale(100%);
transition: filter 0.5s var(--ease);
}
.rpg-gesuche-hero-link:hover .rpg-gesuche-hero-avatar {
filter: grayscale(0%);
}
/* Textbereich rechts neben dem Bild */
.rpg-gesuche-hero-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.15rem;
}
/* Typ-Label - winzig, mono, accent. Setzt den Kontext "Gruppe/Einzel". */
.rpg-gesuche-hero-type {
font-family: var(--font-mono);
font-size: 0.55rem;
font-weight: 700;
letter-spacing: 0.18em;
color: var(--accent);
text-transform: uppercase;
line-height: 1.2;
}
/* Haupttitel - display-Font, aber klein gehalten. Max 2 Zeilen. */
.rpg-gesuche-hero-title {
font-family: var(--font-display);
font-size: 1.1rem;
line-height: 1.05;
color: var(--text);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Description wird in der kompakten Variante NICHT angezeigt -
Klasse bleibt fuer Template-Kompatibilitaet erhalten. */
.rpg-gesuche-hero-desc {
display: none;
}
/* Meta-Zeile: Tags + "von Username". Eng zusammen, klein. */
.rpg-gesuche-hero-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.3rem;
margin-top: 0.2rem;
}
/* Tags: kleine farbige Pills (Kategorie + Status). Background kommt
inline aus dem Template, weil dynamisch pro Eintrag aus der DB. */
.rpg-gesuche-hero-badge {
font-family: var(--font-mono);
font-size: 0.5rem;
font-weight: 700;
letter-spacing: 0.1em;
padding: 0.15rem 0.35rem;
color: var(--bg);
text-transform: uppercase;
line-height: 1.2;
}
/* Autor - sehr leise, am Ende der Meta-Zeile */
.rpg-gesuche-hero-author {
font-family: var(--font-mono);
font-size: 0.55rem;
letter-spacing: 0.05em;
color: var(--text-muted);
}
/* ============================================================================
ROUND 2 — UX-FIXES (User-Feedback nach Light-Mode-Roll-out)
Author: Rogue RPG BB
Vier konkrete Probleme aus dem Live-Setup:
1) Filter-Label "Geschlecht" rendert als großer Body-Text statt Mono-Label
2) Badges (ARBEIT/GRUPPENGESUCH/FREI) sind mit 0.5rem fast unlesbar
3) Gruppengesuche-Cards werden durch lange Texte ewig hoch — passen nicht
zum 300×200-Avatar-Format und brauchen den Duotone-Hover wie bei Crime
4) Einzelgesuch-Detail-Felder (Name/Alter/Geschlecht/…) wirken verloren
============================================================================ */
/* ---------- (1) Custom-Field-Filter-Label ----------------------------------
Das Plugin rendert das Label vermutlich ohne unsere .custom-field-label-
Klasse — daher greift unser ursprünglicher Stil nicht und "Geschlecht"
erscheint als großer Body-Text. Wir kontern hier mit breiten Selektoren,
die alle plausiblen Tag-Varianten (p, h3, h4, label, span) innerhalb des
.custom-field-filter Containers in den Mono-Label-Stil zwingen. */
.custom-field-filter > p,
.custom-field-filter > h3,
.custom-field-filter > h4,
.custom-field-filter > h5,
.custom-field-filter > label,
.custom-field-filter > strong,
.custom-field-filter > span:not(.filter-btn) {
display: block;
font-family: var(--font-mono);
font-size: 0.55rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--text-muted);
margin: 0 0 var(--space-xs) 0;
line-height: 1.4;
}
/* Falls das Label gar nicht in einem Tag steckt sondern als Text-Node
direkt im Container vorkommt — den Container selbst stylen, aber die
Button-Kinder nicht erben lassen */
.custom-field-filter {
font-family: var(--font-mono);
font-size: 0.55rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--text-muted);
}
.custom-field-filter .filter-btn,
.custom-field-filter button {
/* Filter-Buttons bekommen ihren eigenen Stil aus dem Original-CSS,
erben aber sonst die Mono-Stilangaben vom Container (siehe oben).
Hier zurücksetzen damit der Button-Look erhalten bleibt. */
font-size: inherit;
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* ---------- (2) Badges (ARBEIT/GRUPPENGESUCH/FREI) leserlich machen -------
Vorher: font-size 0.5rem (~8px) → praktisch unlesbar.
Plus: das Plugin gibt für Genre-Badges einen Inline-Style mit
Pastell-Hintergrund mit (style="background:{$kategorie_color}") —
den nehmen wir hier mit !important raus und nutzen die Kategorie-Farbe
stattdessen als Text + dezenten Border (Brutalist-Idiom).
Höhere Specificity über den Card-Kontext (.gesuch-card__badges) +
.gesuch-detail-header__badges) damit wir nicht überall im Theme
Badge-Defaults brechen. */
.gesuch-card__badges .gesuch-badge,
.gesuch-card__badges .status-badge,
.gesuch-detail-header__badges .gesuch-badge,
.gesuch-detail-header__badges .status-badge,
.sub-gesuch-card__badges .gesuch-badge,
.sub-gesuch-card__badges .status-badge {
/* Lesbarer als 0.5rem — entspricht ~10.4px */
font-size: 0.65rem;
padding: 0.2rem 0.5rem;
/* Inline-Hintergrund aus dem Plugin neutralisieren — Brutalist nutzt
die Kategorie-Farbe als Text/Border, nicht als Pastell-Block */
background: transparent !important;
}
/* Genre-Badge: Kategorie-Farbe NUR als Border + Text — kein Pastell-Block */
.gesuch-card__badges .gesuch-badge.badge-genre,
.gesuch-detail-header__badges .gesuch-badge.badge-genre,
.sub-gesuch-card__badges .gesuch-badge.badge-genre {
color: var(--kat-color, var(--accent)) !important;
border: 1px solid var(--kat-color, var(--text-dim));
font-weight: 600;
}
/* "/"-Präfix beim Genre-Badge wegnehmen — sah inside-Box komisch aus */
.gesuch-card__badges .gesuch-badge.badge-genre::before,
.gesuch-detail-header__badges .gesuch-badge.badge-genre::before,
.sub-gesuch-card__badges .gesuch-badge.badge-genre::before {
content: none;
}
/* Typ-Badge (GRUPPENGESUCH/EINZELGESUCH): dezent mit Border */
.gesuch-card__badges .gesuch-badge.badge-typ,
.gesuch-detail-header__badges .gesuch-badge.badge-typ {
color: var(--text-dim);
border: 1px solid var(--border-light);
}
/* Status-Badges behalten ihren Punkt davor, bekommen aber auch das
neue Padding und die größere Schrift */
.gesuch-card__badges .status-badge,
.gesuch-detail-header__badges .status-badge,
.sub-gesuch-card__badges .status-badge {
border: 1px solid transparent;
}
/* ---------- (2b) Brute-Force-Override für Detail-Header-Badges -----------
Im Live-System bleibt der Inline-Pastell-Background hartnäckig sichtbar
und die Schrift-Farbe wird rot — vermutlich rendert das Plugin im
Detail-Header andere/keine .gesuch-badge-Klassen, sondern direkt Spans
mit Inline-Styles. Wir gehen jetzt mit dem Holzhammer dran: alle
direkten Kinder von .gesuch-detail-header__badges bekommen den
neutralisierten Look. */
.gesuch-detail-header__badges > span,
.gesuch-detail-header__badges > a,
.gesuch-detail-header__badges > strong,
.gesuch-detail-header__badges > div {
background: transparent !important;
color: var(--text) !important;
border: 1px solid var(--border-light);
padding: 0.2rem 0.5rem;
font-family: var(--font-mono);
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
border-radius: 0;
}
/* Wenn eines davon eine kat-color als Inline-Style mitbringt, dann
wenigstens den Border in dieser Farbe vorzeigen — über attr() geht
das nicht generisch, also bleiben wir bei border-light. */
/* ---------- (3) Gruppengesuche-Cards: 300×200 + Duotone-Hover -------------
Avatar-Format aus dem Plugin: 300×200 → aspect-ratio 3/2.
Duotone-Trick wie bei .lam-crime__rolecard:
- Container hat weißen Hintergrund (default → Bild bleibt S/W
weil multiply mit weiß = Original)
- Hover: Container-bg wird --accent → multiply tönt das Bild rot
Beschreibung mit -webkit-line-clamp auf 2 Zeilen begrenzt damit
die Cards nicht endlos lang werden. */
/* Avatar-Container: festes 3:2-Format (300×200), weißer bg für Multiply.
isolation: eigener Stacking-Context damit mix-blend-mode durchgreift. */
.gesuch-card__avatar-link {
height: auto;
aspect-ratio: 3 / 2;
background: #ffffff;
isolation: isolate;
overflow: hidden;
transition: background 0.5s var(--ease);
}
.gesuch-card:hover .gesuch-card__avatar-link {
background: var(--accent);
}
/* Bild s/w + multiply → bg-Wechsel auf Akzent tönt das Bild rot. */
.gesuch-card__avatar {
filter: grayscale(1) contrast(1.05);
mix-blend-mode: multiply;
transition: transform 0.6s var(--ease), filter 0.5s var(--ease);
}
.gesuch-card:hover .gesuch-card__avatar {
filter: grayscale(1) contrast(1.15);
transform: scale(1.03);
}
/* Beschreibung auf 2 Zeilen clampen — Card bleibt kompakt */
.gesuch-card__desc {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
/* Etwas engere line-height — vorher 1.7 war zu luftig fürs Clamp */
line-height: 1.5;
}
/* Sub-Gesuch-Cards (innerhalb von Gruppengesuchen, "gesuchte Charaktere").
Card-Breite zurück auf ~300px (passend zum 300×200 Avatar-Format aus
den Plugin-Einstellungen). "Beziehung zum Charakter" wird auf 6 Zeilen
geclamped — die anderen Felder (Status, Geschlecht, Avatar, Job) sind
kurz und brauchen kein Clamp. */
.sub-gesuche-grid {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: var(--space-md);
}
.sub-gesuch-card {
background: rgba(255, 255, 255, 0.01);
}
/* Media-Container ums ![]()
: weißer bg, eigener Stacking-Context.
Wird vom neuen Template gerendert (). */
.sub-gesuch-card__media {
width: 100%;
aspect-ratio: 3 / 2;
background: #ffffff;
isolation: isolate;
overflow: hidden;
transition: background 0.5s var(--ease);
}
.sub-gesuch-card:hover .sub-gesuch-card__media {
background: var(--accent);
}
.sub-gesuch-card__avatar {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: grayscale(1) contrast(1.05);
mix-blend-mode: multiply;
transition: filter 0.5s var(--ease), transform 0.6s var(--ease);
}
.sub-gesuch-card:hover .sub-gesuch-card__avatar {
filter: grayscale(1) contrast(1.15);
transform: scale(1.02);
}
/* ---------- Sub-Card Inhalt strukturiert ----------------------------------
Die Sub-Card bekommt eine klare 3-Sektion-Struktur:
1) Status-Badge (eigene Zeile)
2) Kurze Felder (Mono-Label + Wert, kompakt)
3) Lange Felder (sv-sub-field-long): Label als Headline, Text in
scrollbarer Box mit fester max-height — kein JS-Toggle nötig
4) Status-Change-Buttons (RESERVIERT/VERGEBEN) bleiben unten
Status-Buttons hängen am Card-Boden — info wird zum flex column,
damit der Text-Block dazwischen den verfügbaren Raum frisst. */
.sub-gesuch-card__info {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
/* Status-Badge als eigene Zeile, nicht inline mit Feldern */
.sub-gesuch-card__badges {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-sm);
margin-bottom: 0;
}
/* Kurze Felder (alles außer sv-sub-field-long): Mono-Label inline mit Wert */
.sub-gesuch-card .sv-sub-field:not(.sv-sub-field-long) {
font-family: var(--font-body);
font-size: 0.85rem;
color: var(--text);
line-height: 1.5;
margin: 0;
}
.sub-gesuch-card .sv-sub-field:not(.sv-sub-field-long) strong {
font-family: var(--font-mono);
font-size: 0.6rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-muted);
margin-right: var(--space-xs);
}
/* ╔════════════════════════════════════════════════════════════════════════╗
║ ║
║ GESUCHE-ÜBERSICHT REWRITE — Sidebar + Toolbar + Active-Filter-Chips ║
║ ║
║ Layout: ║
║ ┌─────────────────────────────────────────┐ ║
║ │ Hero (// Wanted_ / GE | SUCHE) │ ║
║ ├─────────────┬───────────────────────────┤ ║
║ │ Sidebar │ Toolbar (Search + Sort) │ ║
║ │ (sticky) │ Active-Filter-Chips │ ║
║ │ + Neues │ Result-Count │ ║
║ │ Filter- │ Card-Grid │ ║
║ │ Gruppen │ Multipage │ ║
║ └─────────────┴───────────────────────────┘ ║
║ ║
╚════════════════════════════════════════════════════════════════════════╝ */
/* ─── Layout-Container ─────────────────────────────────────────────────── */
.gesuche-layout {
display: grid;
grid-template-columns: 240px 1fr;
gap: var(--space-2xl);
align-items: start;
margin-top: var(--space-xl);
}
/* ─── Sidebar (sticky) ─────────────────────────────────────────────────── */
.gesuche-sidebar {
position: sticky;
top: var(--space-lg);
display: flex;
flex-direction: column;
gap: var(--space-xl);
}
/* "Neues Gesuch erstellen"-Button — prominenter Akzent oben in der Sidebar.
Greift das vorhandene .gesuche-create-action und stylet es passend. */
.gesuche-sidebar .gesuche-create-action {
margin: 0;
}
.gesuche-sidebar .gesuche-create-action .lam-btn {
display: block;
width: 100%;
padding: var(--space-md);
background: var(--accent);
border: 1px solid var(--accent);
color: var(--bg) !important;
text-align: center;
font-family: var(--font-mono);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
text-decoration: none;
transition: background 0.2s;
}
.gesuche-sidebar .gesuche-create-action .lam-btn:hover {
background: var(--accent-hover);
color: var(--bg) !important;
}
/* Filter-Gruppe (eigene Klasse für eigene Wrapper-Templates,
PLUS .custom-field-filter weil das Plugin diesen Wrapper für
Custom-Field-Filter (Geschlecht etc.) selber rendert). */
.gesuche-filter-group,
.gesuche-sidebar .custom-field-filter {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.gesuche-filter-group__label,
.gesuche-sidebar .custom-field-filter-label,
.gesuche-sidebar .custom-field-label {
font-family: var(--font-mono);
font-size: 0.6rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--text-muted);
padding-bottom: var(--space-xs);
border-bottom: 1px solid var(--text-dark);
margin-bottom: var(--space-xs);
}
/* Filter-Link — sowohl eigene .gesuche-filter-link Klasse, als auch die
Plugin-Klassen .filter-btn / .btn-secondary innerhalb der Sidebar.
So sehen alle Filter-Gruppen einheitlich aus, egal welche Klasse das
Plugin verwendet.
Mono-Caps-Style passend zum Brutalist-Theme. */
.gesuche-filter-link,
.gesuche-sidebar .filter-btn,
.gesuche-sidebar .btn-secondary,
.gesuche-sidebar .custom-field-filter .gesuche-filter > a {
display: block !important;
padding: 0.35rem var(--space-sm) !important;
color: var(--text-dim) !important;
text-decoration: none !important;
font-family: var(--font-mono) !important;
font-size: 0.7rem !important;
font-weight: 500 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
background: transparent !important;
border: none !important;
border-left: 2px solid transparent !important;
margin-left: -2px !important;
/* Linksbündig — überstimmt das align-items:center aus der globalen
.gesuche-filter Regel (war für die alte Flex-Row gedacht) */
text-align: left !important;
align-self: flex-start !important;
transition: var(--transition);
}
.gesuche-filter-link:hover,
.gesuche-sidebar .filter-btn:hover,
.gesuche-sidebar .btn-secondary:hover,
.gesuche-sidebar .custom-field-filter .gesuche-filter > a:hover {
color: var(--text) !important;
padding-left: calc(var(--space-sm) + 4px) !important;
}
/* Aktiver Filter — Akzent + linker Border */
.gesuche-filter-link.is-active,
.gesuche-filter-link.active,
.gesuche-sidebar .filter-btn.active,
.gesuche-sidebar .btn-secondary.active,
.gesuche-sidebar .custom-field-filter .gesuche-filter > a.active {
color: var(--accent) !important;
border-left-color: var(--accent) !important;
font-weight: 700 !important;
}
/* Plugin rendert custom-field-filter > .gesuche-filter als Flex-Row mit
align-items:center — in der Sidebar brauchen wir Flex-Column UND
align-items:flex-start damit die Items links und nicht zentriert sind. */
.gesuche-sidebar .custom-field-filter .gesuche-filter {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: flex-start !important;
gap: var(--space-xs) !important;
margin-bottom: 0 !important;
}
/* ─── Main: Toolbar (Search + Sort), Active-Filters, Cards ─────────────── */
.gesuche-main {
display: flex;
flex-direction: column;
gap: var(--space-lg);
min-width: 0; /* Verhindert Overflow im Grid-Container */
}
/* Toolbar */
.gesuche-toolbar {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--space-md);
align-items: center;
}
.gesuche-search {
position: relative;
}
.gesuche-search input {
width: 100%;
padding: var(--space-md) var(--space-lg);
padding-left: 2.75rem;
background: var(--bg-input);
border: 1px solid var(--border-light);
color: var(--text);
font-family: var(--font-body);
font-size: 0.9rem;
transition: border-color 0.2s;
}
.gesuche-search input:focus {
outline: none;
border-color: var(--accent);
}
.gesuche-search::before {
content: '⌕';
position: absolute;
left: var(--space-md);
top: 50%;
transform: translateY(-50%);
font-size: 1.1rem;
color: var(--text-muted);
pointer-events: none;
}
.gesuche-sort {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.gesuche-sort-label {
font-family: var(--font-mono);
font-size: 0.6rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--text-muted);
}
.gesuche-sort select {
padding: var(--space-sm) var(--space-md);
background: var(--bg-input);
border: 1px solid var(--border-light);
color: var(--text);
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
}
.gesuche-sort select:focus {
outline: none;
border-color: var(--accent);
}
/* Active-Filter-Chips — wird per JS gefüllt */
.gesuche-active-filters {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
align-items: center;
}
/* Wenn keine aktiven Filter, Container ausblenden */
.gesuche-active-filters:empty {
display: none;
}
.gesuche-active-filters__label {
font-family: var(--font-mono);
font-size: 0.6rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--text-muted);
margin-right: var(--space-xs);
}
.gesuche-chip {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: 0.3rem 0.6rem;
background: var(--bg-alt);
border: 1px solid var(--accent);
color: var(--accent);
font-family: var(--font-mono);
font-size: 0.65rem;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
text-decoration: none;
transition: var(--transition);
}
.gesuche-chip:hover {
background: var(--accent);
color: var(--bg);
}
.gesuche-chip-x {
opacity: 0.6;
font-size: 0.85rem;
line-height: 1;
}
.gesuche-chip:hover .gesuche-chip-x {
opacity: 1;
}
/* Result-Count */
.gesuche-result-count {
font-family: var(--font-mono);
font-size: 0.65rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--text-muted);
}
/* ─── Responsive für Index-Layout ──────────────────────────────────────── */
@media (max-width: 900px) {
.gesuche-layout {
grid-template-columns: 1fr;
}
.gesuche-sidebar {
position: static;
order: 2; /* Filter unter Cards verschoben */
}
.gesuche-main {
order: 1;
}
.gesuche-toolbar {
grid-template-columns: 1fr;
}
}
║ ║
║ RPG-GESUCHE VIEW REWRITE — LAM_GV BEM-System ║
║ Author: Rogue RPG BB ║
║ ║
║ Komplett-Refresh des Einzelgesuch- und Gruppengesuch-Views. ║
║ Brutalist LA-Midnight-Idiom mit cinematic Hero, kompakter Meta-Bar, ║
║ Story-Sektionen, Suchender-Box, Replies + Reply-Form. ║
║ Sub-Gesuche als Akkordeon-Reihen (Klick öffnet, nur eine offen). ║
║ ║
║ Prefix: .lam-gv__ ║
║ ║
╚════════════════════════════════════════════════════════════════════════╝ */
/* ─── Layout-Container ─────────────────────────────────────────────────── */
.lam-gv {
max-width: 1280px;
margin: 0 auto;
padding: var(--space-2xl) var(--space-xl);
}
/* ─── Header (statt Hero-Banner): Cover-Bild links, Intro rechts ────────
Ersetzt den vorherigen Hero-Banner — Bild bleibt in moderater Größe
(380px breit, 3:2 = ~253px hoch). Bei kleinen Source-Bildern (300×200,
GIFs) ist die Hochskalierung nur ~1.3× und damit weitgehend scharf. */
.lam-gv__header {
display: grid;
grid-template-columns: 380px 1fr;
gap: var(--space-2xl);
align-items: start;
margin-bottom: var(--space-2xl);
}
/* Cover-Container: weißer bg für Multiply-Trick, Hover wechselt zu Akzent */
.lam-gv__cover {
width: 100%;
aspect-ratio: 3 / 2;
background: #ffffff;
isolation: isolate;
overflow: hidden;
transition: background 0.5s var(--ease);
}
.lam-gv__cover:hover {
background: var(--accent);
}
.lam-gv__cover-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
filter: grayscale(1) contrast(1.05);
mix-blend-mode: multiply;
transition: filter 0.5s var(--ease);
}
.lam-gv__cover:hover .lam-gv__cover-img {
filter: grayscale(1) contrast(1.15);
}
/* Intro-Spalte: ID + Badges + Title + Kurzbeschreibung */
.lam-gv__intro {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
/* Tech-Detail: REQ.ID-Marker oben in der Intro-Spalte */
.lam-gv__intro-id {
font-family: var(--font-mono);
font-size: 0.65rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--text-muted);
margin: 0;
}
.lam-gv__intro-id .label { opacity: 0.5; }
.lam-gv__intro-id .value { color: var(--text-dim); }
/* Title in Display-Font, groß */
.lam-gv__intro-title {
font-family: var(--font-display);
font-size: clamp(2rem, 4vw, 3.5rem);
font-weight: 400;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--text);
margin: 0;
line-height: 0.95;
}
/* Kurzbeschreibung direkt unter dem Titel.
max-height + overflow: lange Texte verzerren das Header-Layout nicht
mehr, sondern werden in einer scrollbaren Box angezeigt. */
.lam-gv__intro-desc {
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.7;
color: var(--text-dim);
margin: 0;
max-height: 12rem;
overflow-y: auto;
padding-right: var(--space-sm);
scrollbar-width: thin;
scrollbar-color: var(--border-light) transparent;
}
.lam-gv__intro-desc::-webkit-scrollbar { width: 4px; }
.lam-gv__intro-desc::-webkit-scrollbar-track { background: transparent; }
.lam-gv__intro-desc::-webkit-scrollbar-thumb { background: var(--border-light); }
.lam-gv__intro-desc::-webkit-scrollbar-thumb:hover { background: var(--accent); }
/* ─── Hero: kompakter Banner ───────────────────────────────────────────
Feste Höhe 360px statt großer aspect-ratio — bei 1280px Container-
Breite skaliert ein 300×200-Bild mit object-fit:cover nur ~1.9× hoch
(statt 4× bei 21:9-Hero). Banner-Feel bleibt, Qualität ist ok.
Bei großen Bildern (1600×x) wird verkleinert → scharf. */
.lam-gv__hero {
position: relative;
margin-bottom: var(--space-2xl);
background: #ffffff;
isolation: isolate;
overflow: hidden;
width: 100%;
height: 360px;
transition: background 0.6s var(--ease);
}
.lam-gv__hero:hover {
background: var(--accent);
}
.lam-gv__hero-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
filter: grayscale(1) contrast(1.05);
mix-blend-mode: multiply;
transition: filter 0.5s var(--ease);
image-rendering: auto;
}
.lam-gv__hero:hover .lam-gv__hero-img {
filter: grayscale(1) contrast(1.15);
}
/* Dunkler Gradient unten für Lesbarkeit des Titels */
.lam-gv__hero::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.85) 0%,
rgba(0, 0, 0, 0.3) 40%,
transparent 70%
);
pointer-events: none;
}
[data-theme="light"] .lam-gv__hero::after {
background: linear-gradient(
to top,
rgba(245, 245, 240, 0.95) 0%,
rgba(245, 245, 240, 0.4) 40%,
transparent 70%
);
}
/* Title-Overlay unten links */
.lam-gv__hero-overlay {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: var(--space-xl);
z-index: 2;
display: flex;
flex-direction: column;
gap: var(--space-md);
/* Im Dark-Mode überschreiben wir die Text-Farbe weil der Gradient
die Farbe sonst zu dunkel macht */
color: var(--text);
}
[data-theme="dark"] .lam-gv__hero-overlay { color: #fff; }
.lam-gv__hero-badges {
display: flex;
gap: var(--space-sm);
flex-wrap: wrap;
}
/* Brutalist Badges — nur Border + Text-Farbe, kein Pastell-Block */
.lam-gv__badge {
display: inline-flex;
align-items: center;
padding: 0.3rem 0.6rem;
font-family: var(--font-mono);
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
border: 1px solid currentColor;
background: transparent;
}
.lam-gv__badge--genre { color: var(--accent); }
.lam-gv__badge--type { color: var(--text-muted); }
.lam-gv__badge--status-frei { color: var(--success); border-color: var(--success); }
.lam-gv__badge--status-frei::before { content: '● '; }
.lam-gv__badge--status-reserviert { color: var(--warning); border-color: var(--warning); }
.lam-gv__badge--status-reserviert::before { content: '◐ '; }
.lam-gv__badge--status-vergeben { color: var(--text-muted); border-color: var(--text-muted); }
.lam-gv__badge--status-vergeben::before { content: '○ '; }
/* Plugin-Badges (.gesuch-badge, .status-badge) im Hero-Overlay mit
Brutalist-Look stylen — analog zu unserem .lam-gv__badge. JS oben
normalisiert dabei den Inline-Pastell-Background und packt die Farbe
als --kat-color zurück. */
.lam-gv__hero-badges .gesuch-badge,
.lam-gv__hero-badges .status-badge {
display: inline-flex;
align-items: center;
padding: 0.3rem 0.6rem;
font-family: var(--font-mono);
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
border: 1px solid currentColor;
background: transparent !important;
}
.lam-gv__hero-badges .gesuch-badge.badge-genre {
color: var(--kat-color, var(--accent)) !important;
}
.lam-gv__hero-badges .gesuch-badge.badge-genre::before { content: none; }
.lam-gv__hero-badges .gesuch-badge.badge-typ {
color: var(--text-muted);
border-color: var(--text-muted);
}
.lam-gv__hero-badges .status-badge.status-frei {
color: var(--success);
border-color: var(--success);
}
.lam-gv__hero-badges .status-badge.status-reserviert,
.lam-gv__hero-badges .status-badge.status-teilreserviert {
color: var(--warning);
border-color: var(--warning);
}
.lam-gv__hero-badges .status-badge.status-vergeben {
color: var(--text-muted);
border-color: var(--text-muted);
}
.lam-gv__hero-title {
font-family: var(--font-display);
font-size: clamp(2.5rem, 6vw, 4.5rem);
font-weight: 400;
letter-spacing: 0.03em;
text-transform: uppercase;
color: inherit;
margin: 0;
line-height: 0.95;
}
[data-theme="dark"] .lam-gv__hero-title { color: #fff; }
/* ─── Meta-Bar: kompakte Custom-Field-Cells unter dem Hero ─────────────── */
/* Das Plugin gibt die Felder als aus — wir layouten diese als
Grid mit auto-fit/minmax Cells. Jede Cell zeigt Label oben (Mono),
Wert darunter (Body). */
/* Plugin rendert