/* ============================================================
   AUGS Portal – Amiga Workbench 3.x Skin
   Referenz: https://themes.sidneysacchi.com/amigawp2/ (two.css)
   ============================================================ */

/* --- Variablen ------------------------------------------- */
:root {
    --wb-desktop:    #adaaad;  /* Workbench grau  (amigawp2 body) */
    --wb-blue:       #5877b1;  /* Titlebar/Frame-Blau */
    --wb-white:      #ffffff;
    --wb-black:      #000000;
    --wb-gray:       #aaaaaa;  /* Button/Inhaltsbereich */
    --wb-orange:     #ff8800;
    --wb-red:        #cc0000;
    --wb-green:      #006600;
}

/* --- Reset & Basis --------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-family: 'Verdana', 'Geneva', sans-serif; }

body {
    background: var(--wb-desktop);
    color: var(--wb-black);
    font-family: 'Verdana', 'Geneva', sans-serif;
    font-size: 13px;
    line-height: 1.4;
    min-height: 100vh;
}

/* Textmarkierung */
::selection           { color: var(--wb-white); background: var(--wb-black); }
::-moz-selection      { color: var(--wb-white); background: var(--wb-black); }

/* Platzhalter */
::placeholder { font-family: 'Verdana', 'Geneva', sans-serif; color: var(--wb-black); }

/* Typografie */
h1, h2, h3, h4, h5, h6, ol, ul, li, p, a, a:visited {
    font-size: 13px;
    font-weight: normal;
    margin: 0; padding: 0;
    color: var(--wb-black);
}
h1 { font-size: 1.3em; margin-bottom: 6px; }
h2 { font-size: 1.15em; margin-bottom: 4px; }
h3 { font-size: 1.05em; margin-bottom: 3px; }
p  { margin-bottom: 0.8em; }

img { max-width: 100%; height: auto; border: 0; }
hr  {
    background: none;
    border: none;
    border-top: 3px dotted var(--wb-black);
    margin: 1em 0;
}
ul, ol { margin: 0.5em 0 0.8em 1.5em; }
ul { list-style: disc; }

/* Scrollbar */
::-webkit-scrollbar              { width: 14px; background: var(--wb-gray); }
::-webkit-scrollbar-thumb        { background: var(--wb-gray);
                                   border-top: 2px solid var(--wb-white);
                                   border-left: 2px solid var(--wb-white);
                                   border-right: 2px solid var(--wb-black);
                                   border-bottom: 2px solid var(--wb-black); }

/* --- Links ----------------------------------------------- */
a               { color: var(--wb-black); text-decoration: none; }
a:visited       { color: var(--wb-black); }
a:hover,
a:focus,
a:active        { color: var(--wb-black); background: var(--wb-white); text-decoration: none; outline: 0; }
a.plain         { color: inherit; background: none; }
a.plain:hover   { background: none; text-decoration: underline; }

/* --- Seitenlayout --------------------------------------- */
#page-wrapper {
    max-width: 900px;
    margin: 0 auto;
    padding: 4px;
}

/* --- Topbar (AUGS Branding) ------------------------------ */
#topbar {
    background: var(--wb-white);
    color: var(--wb-black);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    margin-bottom: 4px;
    font-size: 13px;
    gap: 8px;
    flex-wrap: wrap;
    border-bottom: 2px solid var(--wb-black);
}
#topbar .logo {
    display: flex;
    align-items: center;
    gap: 10px;
}
#topbar .logo img   { height: 53px; }
#topbar .logo span  { font-weight: bold; font-size: 15px; color: var(--wb-black); }
#topbar .logo a     { display: flex; align-items: center; gap: 10px; text-decoration: none;
                       color: var(--wb-black); background: none; }
#topbar .logo a:hover { background: none; }

#topbar .topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}
#topbar .theme-switcher a,
#topbar .lang-switcher a {
    color: var(--wb-black);
    padding: 1px 6px;
    border-top: 2px solid var(--wb-white);
    border-left: 2px solid var(--wb-white);
    border-bottom: 2px solid var(--wb-black);
    border-right: 2px solid var(--wb-black);
    background: var(--wb-gray);
    font-size: 12px;
}
#topbar .theme-switcher a:hover,
#topbar .theme-switcher a.theme-active,
#topbar .lang-switcher a:hover,
#topbar .lang-switcher a.lang-active {
    background: var(--wb-blue);
    color: var(--wb-white);
    border-top: 2px solid var(--wb-black);
    border-left: 2px solid var(--wb-black);
    border-bottom: 2px solid var(--wb-white);
    border-right: 2px solid var(--wb-white);
}
#topbar .topbar-user           { font-size: 12px; color: var(--wb-black); }
#topbar .topbar-user a         { color: var(--wb-black); background: none; }
#topbar .topbar-user a:hover   { background: var(--wb-white); }

/* --- Navigationsleiste (WB-Icons) ----------------------- */
#navbar {
    background: var(--wb-desktop);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 8px 10px;
    gap: 12px;
    margin-bottom: 4px;
    border-top: 2px solid var(--wb-white);
    border-left: 2px solid var(--wb-white);
    border-bottom: 2px solid var(--wb-black);
    border-right: 2px solid var(--wb-black);
}
#navbar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    padding: 2px;
    color: var(--wb-black);
    text-decoration: none;
    min-width: 48px;
}
#navbar a:hover { background: none; }

.nav-icon-img {
    width: 48px;
    height: 42px;
    display: block;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}
.nav-label {
    font-size: 11px;
    color: var(--wb-black);
    text-align: center;
    white-space: nowrap;
}
#navbar a.active .nav-icon-img {
    filter: invert(1);
}
#navbar a:hover .nav-label,
#navbar a.active .nav-label {
    color: var(--wb-white);
    background: var(--wb-black);
}
#navbar .nav-section {
    width: 1px;
    align-self: stretch;
    margin: 0 2px;
    border-right: 1px dotted var(--wb-black);
}

/* --- Unternavigation ------------------------------------ */
#subnav {
    background: var(--wb-desktop);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 4px 8px;
    gap: 4px;
    margin-bottom: 4px;
    border-top: 2px solid var(--wb-white);
    border-left: 2px solid var(--wb-white);
    border-bottom: 2px solid var(--wb-black);
    border-right: 2px solid var(--wb-black);
}
#subnav a {
    background: var(--wb-gray);
    color: var(--wb-black);
    padding: 1px 10px;
    font-size: 11px;
    white-space: nowrap;
    border-top: 2px solid var(--wb-white);
    border-left: 2px solid var(--wb-white);
    border-bottom: 2px solid var(--wb-black);
    border-right: 2px solid var(--wb-black);
}
#subnav a:hover,
#subnav a.active {
    background: var(--wb-blue);
    color: var(--wb-white);
    border-top: 2px solid var(--wb-black);
    border-left: 2px solid var(--wb-black);
    border-bottom: 2px solid var(--wb-white);
    border-right: 2px solid var(--wb-white);
    text-decoration: none;
}
#subnav .subnav-label {
    color: var(--wb-black);
    padding: 1px 4px 1px 6px;
    font-size: 10px;
    text-transform: uppercase;
    opacity: 0.6;
    font-weight: bold;
}
/* Zeilenumbruch im subnav: jede Sektion (Intern/Vorstand/Admin) auf eigener Zeile */
#subnav .subnav-break {
    width: 100%;
    height: 0;
}

/* --- WB-Fenster ----------------------------------------- */
/*
   Struktur wie amigawp2 #primary / .site-main:
   - Äusserer Rahmen mit Bevel + blauem Hintergrund (sichtbar als 2px-Streifen an Seiten/Unten)
   - Titelzeile bündig oben
   - Inhalt (grauer Bereich) mit inversem Bevel
*/
.wb-window {
    background: var(--wb-blue);        /* Blau blitzt an Seiten+Unten durch */
    border-top: 2px solid var(--wb-white);
    border-left: 2px solid var(--wb-white);
    border-bottom: 2px solid var(--wb-black);
    border-right: 2px solid var(--wb-black);
    padding: 0 2px 2px;               /* Oben 0 (Titlebar flush), Seiten+Unten 2px */
    margin-bottom: 10px;
}

/* Titelzeile */
.wb-titlebar {
    background: var(--wb-blue);
    display: flex;
    align-items: stretch;
    height: 20px;
    overflow: hidden;
    border-bottom: 2px solid var(--wb-black);
    position: relative;
    left: -2px;                        /* Deckungsgleich mit blauem Rahmen */
    width: calc(100% + 4px);
    margin-bottom: 0;
}

/* Close-Gadget links (GIF via PHP-Transform) */
.wb-titlebar-left {
    width: 28px;
    min-width: 28px;
    height: 20px;
    background: var(--wb-blue);
    flex-shrink: 0;
    line-height: 0;
    font-size: 0;
    border-right: 1px solid var(--wb-black);
    display: flex;
    align-items: center;
}

/* Titel-Text: weiss, linksbündig, mit Trennlinie links */
.wb-titlebar-title {
    flex: 0 0 auto;
    color: var(--wb-white);
    font-weight: bold;
    font-size: 13px;
    padding: 0 8px 0 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    border-left: 1px solid var(--wb-white);
}
.wb-titlebar-title *,
.wb-titlebar-title a          { color: var(--wb-white) !important; background: none !important; }
.wb-titlebar-title a:hover    { text-decoration: underline; }

/* Mittlere Füllzone */
.wb-titlebar-bar {
    flex: 1;
    background: var(--wb-blue);
}

/* Rechte Gadgets (GIF via PHP-Transform) */
.wb-titlebar-right {
    width: 51px;
    min-width: 51px;
    height: 20px;
    background: var(--wb-blue);
    flex-shrink: 0;
    line-height: 0;
    font-size: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Fenster-Inhalt (gray, inset bevel wie .site-main in amigawp2) */
.wb-content {
    background: var(--wb-gray);
    border-left: 1px solid var(--wb-black);
    border-right: 1px solid var(--wb-white);
    border-bottom: 2px solid var(--wb-white);
    padding: 10px 12px;
    color: var(--wb-black);
    font-size: 13px;
}
.wb-content a       { color: var(--wb-black); background: none; }
.wb-content a:hover { color: var(--wb-black); background: var(--wb-white); text-decoration: none; }
/* Echte Textlinks hervorheben – Buttons, Kacheln, .plain & Pagination ausgenommen */
.wb-content a:not(.btn):not(.intern-tile):not(.plain) {
    color: #46608e;
}
.wb-content a:not(.btn):not(.intern-tile):not(.plain):hover {
    color: #46608e;
    background: var(--wb-white);
}
/* Pagination behält ihre Button-Optik (höhere Spezifität als die Highlight-Regel) */
.wb-content .pagination a:not(.btn):not(.intern-tile):not(.plain) {
    color: var(--wb-black);
    text-decoration: none;
    font-weight: normal;
}
.wb-content .pagination a:not(.btn):not(.intern-tile):not(.plain):hover {
    color: var(--wb-white);
    font-weight: normal;
}

/* --- Formulare ------------------------------------------ */
.wb-form          { max-width: 600px; }
.form-group {
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.form-group label      { font-size: 13px; color: var(--wb-black); }
.form-group label .req { color: var(--wb-red); }

/* Alle Eingabefelder: inset bevel wie amigawp2 */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="tel"],
input[type="url"],
input[type="search"],
select,
textarea {
    background: var(--wb-gray);
    color: var(--wb-black);
    border-top: 2px solid var(--wb-black);
    border-left: 2px solid var(--wb-black);
    border-right: 2px solid var(--wb-white);
    border-bottom: 2px solid var(--wb-white);
    border-radius: 0;
    padding: 2px 6px;
    font-family: 'Verdana', 'Geneva', sans-serif;
    font-size: 13px;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    color: var(--wb-black);
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group input[type="datetime-local"],
.form-group input[type="tel"],
.form-group input[type="url"],
.form-group select,
.form-group textarea { width: 100%; }
textarea              { min-height: 80px; resize: vertical; }
select                { cursor: pointer; }
.form-row             { display: flex; gap: 12px; flex-wrap: wrap; }
.form-row .form-group { flex: 1; min-width: 140px; }

/* Checkboxen und Radios – normal lassen */
input[type="checkbox"],
input[type="radio"] {
    width: auto;
    border: none;
    background: none;
    padding: 0;
}

/* --- Buttons -------------------------------------------- */
.btn,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    background: var(--wb-gray);
    color: var(--wb-black);
    border-top: 2px solid var(--wb-white);
    border-left: 2px solid var(--wb-white);
    border-bottom: 2px solid var(--wb-black);
    border-right: 2px solid var(--wb-black);
    border-radius: 0;
    padding: 2px 14px;
    font-family: 'Verdana', 'Geneva', sans-serif;
    font-size: 13px;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px;
    -webkit-appearance: none;
    appearance: none;
}
.btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    background: var(--wb-blue);
    color: var(--wb-white);
    border-top: 2px solid var(--wb-black);
    border-left: 2px solid var(--wb-black);
    border-bottom: 2px solid var(--wb-white);
    border-right: 2px solid var(--wb-white);
    text-decoration: none;
}
.btn:active,
button:active,
input[type="submit"]:active {
    border-top: 2px solid var(--wb-black);
    border-left: 2px solid var(--wb-black);
    border-bottom: 2px solid var(--wb-white);
    border-right: 2px solid var(--wb-white);
}
.btn-danger       { background: #cc4444; color: var(--wb-white); }
.btn-danger:hover { background: #ff0000; color: var(--wb-white); }
.btn-ok           { background: #44aa44; color: var(--wb-white); }
.btn-ok:hover     { background: #006600; color: var(--wb-white); }
.btn-small        { padding: 1px 8px; font-size: 11px; }
button::-moz-focus-inner { padding: 0; border: 0; }

/* --- Tabellen ------------------------------------------- */
table.wb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
table.wb-table th {
    background: var(--wb-gray);
    color: var(--wb-black);
    padding: 2px 8px;
    text-align: left;
    border-top: 2px solid var(--wb-white);
    border-left: 2px solid var(--wb-white);
    border-bottom: 2px solid var(--wb-black);
    border-right: 2px solid var(--wb-black);
    font-weight: bold;
}
table.wb-table td {
    background: var(--wb-gray);
    padding: 2px 8px;
    border: 1px solid var(--wb-black);
    vertical-align: top;
}
table.wb-table tr:nth-child(even) td { background: var(--wb-desktop); }
table.wb-table tr:hover td {
    background: var(--wb-blue);
    color: var(--wb-white);
}
table.wb-table tr:hover td a { color: var(--wb-white); background: none; }

/* --- Meldungen ------------------------------------------ */
.msg-ok, .msg-error, .msg-info, .msg-warn {
    border-top: 2px solid var(--wb-white);
    border-left: 2px solid var(--wb-white);
    border-bottom: 2px solid var(--wb-black);
    border-right: 2px solid var(--wb-black);
    padding: 6px 10px;
    margin-bottom: 10px;
    font-size: 13px;
}
.msg-ok    { background: var(--wb-gray); color: var(--wb-black); }
.msg-error { background: #cc4444;        color: var(--wb-white); }
.msg-info  { background: var(--wb-blue); color: var(--wb-white); }
.msg-warn  { background: #cc8800;        color: var(--wb-white); }

/* --- Status-Badges -------------------------------------- */
.badge {
    display: inline-block;
    padding: 0 6px;
    font-size: 12px;
    border-top: 1px solid var(--wb-white);
    border-left: 1px solid var(--wb-white);
    border-bottom: 1px solid var(--wb-black);
    border-right: 1px solid var(--wb-black);
}
.badge-green  { background: #444; color: var(--wb-white); }
.badge-red    { background: #cc4444; color: var(--wb-white); }
.badge-yellow { background: #cc8800; color: var(--wb-white); }
.badge-gray   { background: var(--wb-gray); color: var(--wb-black); }
.badge-blue   { background: var(--wb-blue); color: var(--wb-white); }
.muted { color: #555; }

/* --- Galerie -------------------------------------------- */
.gallery-grid  { display: flex; flex-wrap: wrap; gap: 6px; }
.gallery-album, .gallery-thumb {
    border-top: 2px solid var(--wb-white);
    border-left: 2px solid var(--wb-white);
    border-bottom: 2px solid var(--wb-black);
    border-right: 2px solid var(--wb-black);
    overflow: hidden;
    flex: 0 0 auto;
}
.gallery-album            { width: 180px; text-align: center; padding-bottom: 4px; background: var(--wb-gray); }
.gallery-album img        { width: 180px; height: 120px; object-fit: cover; display: block; }
.gallery-album span       { font-size: 12px; display: block; padding: 3px; color: var(--wb-black); }
.gallery-thumb            { width: 120px; background: var(--wb-gray); }
.gallery-thumb img        { width: 120px; height: 80px; object-fit: cover; display: block; }
.gallery-caption          { font-size: 13px; color: var(--wb-black); padding: 2px 3px; text-align: center;
                            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }

/* --- Intern-Bereich Kacheln ----------------------------- */
.intern-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.intern-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 110px;
    background: var(--wb-gray);
    border-top: 2px solid var(--wb-white);
    border-left: 2px solid var(--wb-white);
    border-bottom: 2px solid var(--wb-black);
    border-right: 2px solid var(--wb-black);
    padding: 10px 8px 8px;
    color: var(--wb-black);
    text-decoration: none;
}
.intern-tile img           { width: 52px; height: 46px; image-rendering: pixelated; image-rendering: crisp-edges; }
.intern-tile-label         { font-size: 12px; font-weight: bold; text-align: center; color: var(--wb-black); }
.intern-tile-count         { font-size: 13px; color: var(--wb-black); text-align: center; }
.wb-content a.intern-tile:hover { background: var(--wb-blue); }
.intern-tile:hover .intern-tile-label,
.intern-tile:hover .intern-tile-count { color: var(--wb-white); }
/* Aktuelle Seite: hervorgehoben, eingedrückter Gadget-Look */
.wb-content a.intern-tile-active {
    background: var(--wb-blue);
    border-top-color: var(--wb-black);
    border-left-color: var(--wb-black);
    border-bottom-color: var(--wb-white);
    border-right-color: var(--wb-white);
}
.intern-tile-active .intern-tile-label,
.intern-tile-active .intern-tile-count { color: var(--wb-white); }

/* --- Flohmarkt ------------------------------------------ */
.flea-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.flea-item {
    border-top: 2px solid var(--wb-white);
    border-left: 2px solid var(--wb-white);
    border-bottom: 2px solid var(--wb-black);
    border-right: 2px solid var(--wb-black);
    padding: 8px;
    width: 200px;
    background: var(--wb-gray);
}
.flea-item .flea-title  { font-weight: bold; font-size: 13px; margin-bottom: 4px; color: var(--wb-black); }
.flea-item .flea-price  { color: var(--wb-black); font-size: 13px; margin-bottom: 4px; font-weight: bold; }
.flea-item .flea-seller { font-size: 12px; color: var(--wb-black); }
a.flea-item-link        { cursor: pointer; text-decoration: none; display: block; }
a.flea-item-link:hover  {
    border-top: 2px solid var(--wb-black);
    border-left: 2px solid var(--wb-black);
    border-bottom: 2px solid var(--wb-white);
    border-right: 2px solid var(--wb-white);
    background: var(--wb-blue);
    text-decoration: none;
}
a.flea-item-link:hover .flea-title,
a.flea-item-link:hover .flea-price,
a.flea-item-link:hover .flea-seller { color: var(--wb-white); }

/* --- News ------------------------------------------------ */
.news-item             { margin-bottom: 14px; }
.news-date, .news-item .news-date { font-size: 12px; color: var(--wb-black); margin-bottom: 2px; }
.news-item .news-title { font-weight: bold; font-size: 13px; }
.news-item .news-body  { margin-top: 4px; }

/* --- Events ---------------------------------------------- */
.event-item  { border-left: 3px solid var(--wb-black); padding-left: 10px; margin-bottom: 12px; }
.event-date  { color: var(--wb-black); font-size: 12px; font-weight: bold; }
.event-title { font-weight: bold; color: var(--wb-black); }
.event-loc   { font-size: 12px; color: var(--wb-black); }

/* --- Pagination ----------------------------------------- */
.pagination      { margin-top: 10px; }
.pagination a {
    color: var(--wb-black);
    border-top: 2px solid var(--wb-white);
    border-left: 2px solid var(--wb-white);
    border-bottom: 2px solid var(--wb-black);
    border-right: 2px solid var(--wb-black);
    padding: 1px 8px;
    margin-right: 2px;
    font-size: 12px;
    background: var(--wb-gray);
    display: inline-block;
}
.pagination a.active,
.pagination a:hover {
    background: var(--wb-blue);
    color: var(--wb-white);
    border-top: 2px solid var(--wb-black);
    border-left: 2px solid var(--wb-black);
    border-bottom: 2px solid var(--wb-white);
    border-right: 2px solid var(--wb-white);
    text-decoration: none;
}

/* --- Footer --------------------------------------------- */
#footer {
    border-top: 2px solid var(--wb-white);
    border-left: 2px solid var(--wb-white);
    border-bottom: 2px solid var(--wb-black);
    border-right: 2px solid var(--wb-black);
    background: var(--wb-gray);
    color: var(--wb-black);
    font-size: 12px;
    padding: 4px 8px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
}
#footer a       { color: var(--wb-black); background: none; }
#footer a:hover { background: var(--wb-white); }

/* --- Responsive ----------------------------------------- */
@media (max-width: 640px) {
    #page-wrapper              { padding: 2px; }
    .form-row                  { flex-direction: column; }
    .gallery-album, .flea-item, .merch-item { width: 100%; }
    body, input, select, textarea, button, .btn { font-size: 13px; }
}

/* --- Druckstil ------------------------------------------ */
@media print {
    body, #page-wrapper  { background: white; color: black; }
    #topbar, #navbar, #footer, .btn, .no-print { display: none !important; }
    .wb-window           { border: 1px solid black; background: white; }
    .wb-titlebar         { background: var(--wb-blue); }
    .wb-titlebar-title   { color: white; }
    .wb-content          { background: white; }
}

/* --- Benachrichtigungs-Glocke (Topbar) ------------------ */
#topbar .topbar-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    background: none;
}
#topbar .topbar-bell:hover { background: none; }
#topbar .topbar-bell img { width: 20px; height: 20px; display: block; }
#topbar .topbar-bell .bell-count {
    position: absolute;
    top: -6px;
    right: -10px;
    background: #cc2222;
    color: var(--wb-white);
    border: 1px solid var(--wb-black);
    font-size: 10px;
    font-weight: bold;
    line-height: 12px;
    padding: 0 3px;
    min-width: 8px;
    text-align: center;
}

/* --- Theme-bewusste Hilfsklassen (statt Inline-Farben) --- */
.form-panel  { background: #d6d6d6; border: 1px solid #888; padding: 10px; }
table.wb-table tr.row-group td { background: #c4c8d8; color: var(--wb-black); border-top: 2px solid #777; }
table.wb-table tr.row-overdue td { background: #f2c4c4; }

/* Button-Gruppe in Tabellen (Aktionen-Spalte): gleichmässiger Abstand, auch beim Umbruch */
.aktionen { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.aktionen form { margin: 0; }

/* --- Chat (chat/, intern/chat.php) ------------------------ */
.chat-layout  { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.chat-seite   { flex: 0 0 230px; min-width: 200px; }
.chat-haupt   { flex: 1 1 380px; min-width: 0; }
.chat-kanalliste { list-style: none; margin: 0; padding: 0; }
.chat-kanalliste li { padding: 2px 4px; }
.chat-kanalliste li.aktiv { background: var(--wb-blue); }
.chat-kanalliste li.chat-thema { padding-left: 14px; font-size: 12px; }
.chat-kanalliste li.aktiv a, .wb-content .chat-kanalliste li.aktiv a:not(.btn):not(.plain) { color: var(--wb-white); }
.chat-frame   { width: 100%; height: 420px; border: 2px inset var(--wb-white); background: var(--wb-white); display: block; margin-bottom: 8px; }
.chat-eingabe textarea { width: 100%; box-sizing: border-box; min-height: 48px; }
.chat-frame-body { margin: 0; padding: 6px 8px; font-size: 13px; background: var(--wb-white); color: var(--wb-black); }
.chat-msg     { padding: 4px 0; border-bottom: 1px dotted #999; }
.chat-msg-eigen .chat-kopf b { color: var(--wb-blue); }
.chat-zeit    { font-size: 11px; color: #555; }
.chat-aktionen { font-size: 11px; margin-left: 6px; }
.chat-inline  { display: inline; margin: 0; }
.chat-msg button.chat-link, .chat-msg button.chat-link:hover { background: none; border: 0; padding: 0; margin: 0; height: auto; min-width: 0;
    box-shadow: none; color: var(--wb-black); text-decoration: underline; cursor: pointer; font: inherit; font-size: 11px; }
.chat-msg button.chat-link:hover { color: var(--wb-blue); }
.chat-text    { word-wrap: break-word; overflow-wrap: anywhere; }
.chat-bild    { display: block; max-width: 240px; max-height: 180px; width: auto; height: auto; margin: 4px 0 2px; border: 1px solid #888; }
.chat-datei   { font-size: 11px; }
.chat-smiley  { vertical-align: -2px; image-rendering: pixelated; }
.chat-beta    { margin: 0 0 8px; font-size: 12px; }
.chat-beta-liste { columns: 220px; column-gap: 16px; max-height: 320px; overflow-y: auto; font-size: 12px; }
.chat-beta-liste label { display: block; break-inside: avoid; }
.chat-anhang  { margin-top: 4px; font-size: 12px; }
.chat-anhang input[type=file] { max-width: 100%; }
.chat-geloescht { color: #555; }
@media (max-width: 640px) { .chat-seite { flex: 1 1 100%; } .chat-frame { height: 360px; } }


/* --- Merchandise ---------------------------------------- */
.merch-item { width: 260px; }
.merch-bild { width: 100%; height: auto; display: block; margin-bottom: 8px; }
.merch-text { font-size: 12px; margin: 0 0 8px; }
.merch-detail  { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.merch-galerie { flex: 0 1 360px; max-width: 100%; }
.merch-thumbs  { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.merch-thumbs img { width: 56px; height: 56px; object-fit: cover; border: 1px solid #888; }
.merch-info    { flex: 1 1 260px; }

/* --- Hilfe (intern/hilfe.php) --------------------------- */
.hilfe-inhalt { display: flex; flex-wrap: wrap; gap: 6px 36px; font-size: 12px; }
.hilfe-inhalt ul { margin: 4px 0 0 18px; padding: 0; }
.hilfe-tabelle { width: 100%; }
.hilfe-tabelle th { width: 26%; text-align: left; vertical-align: top; white-space: normal; }
.hilfe-tabelle td { vertical-align: top; }

/* --- Handy (bis 640 px) --------------------------------- */
@media (max-width: 640px) {
    /* breite Tabellen im Fenster seitlich schieben statt die ganze Seite zu verbreitern */
    .wb-content { overflow-x: auto; }
    input, select, textarea { max-width: 100%; box-sizing: border-box; }
    /* lange Fenstertitel mit «…» kürzen statt hart abschneiden */
    .wb-titlebar-title { display: block; line-height: 20px; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
    /* Vorstands-/Admin-Menü kompakter */
    #subnav { gap: 3px; padding: 4px 6px; }
    #subnav a { padding: 1px 6px; font-size: 10px; }
    .theme-switcher a, .lang-switcher a, .topbar-user a { white-space: nowrap; }
}