/* ============================================================
   AUGS Portal – Amiga Workbench 1.3 Style
   ============================================================ */

/* --- Variablen ------------------------------------------- */
:root {
    --wb-desktop:   #0055aa;   /* Workbench blau */
    --wb-white:     #ffffff;
    --wb-black:     #000000;
    --wb-gray:      #aaaaaa;
    --wb-title-fg:  #00519e;   /* Titeltext */
    --wb-orange:    #ff8800;   /* Auswahl / Highlight */
    --wb-yellow:    #ffff00;
    --wb-red:       #cc0000;
    --wb-green:     #007700;
    --wb-border:    2px solid var(--wb-white);
}

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

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

a                { color: var(--wb-yellow); text-decoration: none; }
a:hover          { color: var(--wb-orange); text-decoration: underline; }
a.plain          { color: inherit; }
p                { margin-bottom: 0.8em; }
ul, ol           { margin: 0.5em 0 0.8em 1.5em; }
h1               { font-size: 1.3em; margin-bottom: 0.5em; }
h2               { font-size: 1.15em; margin-bottom: 0.4em; }
h3               { font-size: 1.05em; margin-bottom: 0.3em; }
img              { max-width: 100%; height: auto; }
hr               { border: none; border-top: 1px solid var(--wb-gray); margin: 1em 0; }

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

/* --- Topbar (Titelleiste der ganzen Seite) -------------- */
#topbar {
    background: var(--wb-desktop);
    color: var(--wb-white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 10px;
    margin-bottom: 6px;
    font-size: 12px;
    gap: 8px;
    flex-wrap: wrap;
}
#topbar .logo {
    display: flex;
    align-items: center;
    gap: 10px;
}
#topbar .logo img  { height: 53px; }
#topbar .logo span { font-weight: bold; font-size: 15px; }
#topbar .topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}
#topbar .lang-switcher a {
    color: var(--wb-white);
    padding: 1px 5px;
    border: 1px solid transparent;
    font-size: 11px;
}
#topbar .lang-switcher a:hover,
#topbar .lang-switcher a.lang-active {
    background: var(--wb-white);
    color: var(--wb-black);
    border-color: var(--wb-gray);
    text-decoration: none;
}
#topbar .topbar-user {
    font-size: 11px;
    color: var(--wb-white);
}
#topbar .topbar-user a { color: var(--wb-white); }
#topbar .topbar-user a:hover { color: var(--wb-yellow); }

/* --- Navigationsleiste (WB-Icons) ----------------------- */
#navbar {
    background: var(--wb-desktop);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 10px 10px 8px;
    gap: 14px;
    margin-bottom: 6px;
}
#navbar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    padding: 2px;
    color: var(--wb-white);
    text-decoration: none;
    min-width: 48px;
}
.nav-icon-img {
    width: 48px;
    height: 42px;
    display: block;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}
.nav-label {
    font-size: 11px;
    color: var(--wb-white);
    text-align: center;
    white-space: nowrap;
}
#navbar a:hover .nav-icon-img,
#navbar a.active .nav-icon-img {
    filter: brightness(0.6) sepia(1) hue-rotate(0deg) saturate(5);
}
#navbar a:hover { text-decoration: none; }
#navbar a.active .nav-label { color: var(--wb-orange); }

/* --- Unternavigation (Vorstand / Admin) ------------------ */
#subnav {
    background: var(--wb-desktop);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 5px 8px;
    gap: 4px;
    margin-bottom: 6px;
}
#subnav a {
    background: var(--wb-white);
    color: var(--wb-black);
    padding: 2px 10px;
    font-size: 11px;
    white-space: nowrap;
    border: 1px solid var(--wb-black);
}
#subnav a:hover, #subnav a.active {
    background: var(--wb-orange);
    color: var(--wb-black);
    text-decoration: none;
}
#subnav .subnav-label {
    color: var(--wb-white);
    padding: 1px 4px 1px 8px;
    font-size: 10px;
    display: flex;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.7;
}
#navbar .nav-section {
    width: 1px;
    background: rgba(255,255,255,0.35);
    align-self: stretch;
    margin: 0 2px;
}

/* --- WB-Fenster ----------------------------------------- */
.wb-window {
    border: var(--wb-border);
    margin-bottom: 12px;
    background-color: var(--wb-desktop);
}

/* Titelzeile (weisser Balken oben) */
.wb-titlebar {
    background: var(--wb-white);
    display: flex;
    align-items: stretch;
    height: 20px;
    border-bottom: 1px solid var(--wb-black);
    overflow: hidden;
}
.wb-titlebar-left {
    width: 28px;
    min-width: 28px;
    background: url('../images/wbleftcorner.gif') no-repeat left center;
    background-color: var(--wb-white);
    border-right: 1px solid var(--wb-black);
}
.wb-titlebar-title {
    color: var(--wb-title-fg);
    font-weight: bold;
    font-size: 12px;
    padding: 0 6px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    min-width: 80px;
}
.wb-titlebar-bar {
    flex: 1;
    background: url('../images/wbbar1p.gif') repeat-x center;
    background-color: var(--wb-desktop);
}
.wb-titlebar-right {
    width: 51px;
    min-width: 51px;
    background: url('../images/wbrightcorner.gif') no-repeat right center;
    background-color: var(--wb-white);
    border-left: 1px solid var(--wb-black);
}

/* Fenster-Inhalt */
.wb-content {
    padding: 12px 14px;
}

/* --- Formulare ------------------------------------------ */
.wb-form { max-width: 600px; }
.form-group {
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.form-group label {
    font-size: 12px;
    color: var(--wb-white);
}
.form-group label .req { color: var(--wb-orange); }
.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="tel"],
.form-group input[type="url"],
.form-group select,
.form-group textarea {
    background: var(--wb-white);
    color: var(--wb-black);
    border: var(--wb-border);
    padding: 4px 6px;
    font-family: inherit;
    font-size: 13px;
    width: 100%;
}
.form-group textarea  { min-height: 80px; resize: vertical; }
.form-group select    { cursor: pointer; }
.form-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.form-row .form-group { flex: 1; min-width: 140px; }

/* --- Buttons -------------------------------------------- */
.btn, button[type="submit"], button[type="button"], input[type="submit"] {
    background: var(--wb-white);
    color: var(--wb-black);
    border: var(--wb-border);
    padding: 3px 14px;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    margin-right: 6px;
}
.btn:hover, button:hover, input[type="submit"]:hover {
    background: var(--wb-orange);
    color: var(--wb-black);
    text-decoration: none;
}
.btn-danger { background: #ffcccc; }
.btn-danger:hover { background: var(--wb-red); color: var(--wb-white); }
.btn-ok     { background: #ccffcc; }
.btn-ok:hover { background: var(--wb-green); color: var(--wb-white); }
.btn-small  { padding: 1px 8px; font-size: 11px; }

/* --- Tabellen ------------------------------------------- */
table.wb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
table.wb-table th {
    background: var(--wb-white);
    color: var(--wb-black);
    padding: 3px 8px;
    text-align: left;
    border: 1px solid var(--wb-black);
    font-weight: bold;
}
table.wb-table td {
    padding: 3px 8px;
    border: 1px solid var(--wb-gray);
    vertical-align: top;
}
table.wb-table tr:nth-child(even) td { background: rgba(255,255,255,0.07); }
table.wb-table tr:hover td { background: rgba(255,136,0,0.15); }

/* --- Meldungen ------------------------------------------ */
.msg-ok    { background: #004400; color: #88ff88; border: 1px solid #88ff88; padding: 6px 10px; margin-bottom: 10px; }
.msg-error { background: #440000; color: #ff8888; border: 1px solid #ff8888; padding: 6px 10px; margin-bottom: 10px; }
.msg-info  { background: #002244; color: #88ccff; border: 1px solid #88ccff; padding: 6px 10px; margin-bottom: 10px; }
.msg-warn  { background: #443300; color: #ffcc44; border: 1px solid #ffcc44; padding: 6px 10px; margin-bottom: 10px; }

/* --- Status-Badges -------------------------------------- */
.badge {
    display: inline-block;
    padding: 1px 6px;
    font-size: 11px;
    border: 1px solid;
}
.badge-green  { border-color: #88ff88; color: #88ff88; }
.badge-red    { border-color: #ff8888; color: #ff8888; }
.badge-yellow { border-color: #ffcc44; color: #ffcc44; }
.badge-gray   { border-color: var(--wb-gray); color: var(--wb-gray); }

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

/* --- Galerie -------------------------------------------- */
.gallery-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.gallery-album, .gallery-thumb {
    border: var(--wb-border);
    overflow: hidden;
    flex: 0 0 auto;
}
.gallery-album { width: 180px; text-align: center; padding-bottom: 4px; }
.gallery-album img { width: 180px; height: 120px; object-fit: cover; display: block; }
.gallery-album span { font-size: 11px; display: block; padding: 3px; }
.gallery-thumb { width: 120px; overflow: visible; }
.gallery-thumb img { width: 120px; height: 80px; object-fit: cover; display: block; }
.gallery-caption { font-size: 10px; color: var(--wb-gray); 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: 10px;
}
.intern-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 110px;
    background: var(--wb-white);
    border: 2px solid var(--wb-black);
    padding: 12px 8px 10px;
    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: 10px;
    color: #555555;
    text-align: center;
}
.intern-tile:hover {
    background: var(--wb-orange);
    text-decoration: none;
}
.intern-tile:hover .intern-tile-label,
.intern-tile:hover .intern-tile-count {
    color: var(--wb-black);
}

/* --- Flohmarkt ------------------------------------------ */
.flea-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.flea-item {
    border: var(--wb-border);
    padding: 8px;
    width: 200px;
    background: rgba(0,0,0,0.15);
}
.flea-item .flea-title  { font-weight: bold; font-size: 12px; margin-bottom: 4px; }
.flea-item .flea-price  { color: var(--wb-yellow); font-size: 13px; margin-bottom: 4px; }
.flea-item .flea-seller { font-size: 11px; color: var(--wb-gray); }
a.flea-item-link        { cursor: pointer; text-decoration: none; display: block; }
a.flea-item-link:hover  { border-color: var(--wb-orange); background: rgba(255,136,0,0.1); text-decoration: none; }
a.flea-item-link:hover .flea-title { color: var(--wb-orange); }

/* --- News ------------------------------------------------ */
.news-item { margin-bottom: 16px; }
.news-item .news-date { font-size: 11px; color: var(--wb-gray); margin-bottom: 3px; }
.news-date            { font-size: 11px; color: var(--wb-gray); }
.news-item .news-title { font-weight: bold; font-size: 14px; }
.news-item .news-body  { margin-top: 4px; }

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

/* --- Footer --------------------------------------------- */
#footer {
    border: var(--wb-border);
    background: var(--wb-white);
    color: var(--wb-black);
    font-size: 11px;
    padding: 4px 8px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
}
#footer a { color: var(--wb-black); }
#footer a:hover { color: var(--wb-desktop); text-decoration: none; }

/* --- Responsive ----------------------------------------- */
@media (max-width: 640px) {
    #page-wrapper { padding: 2px; }
    .form-row     { flex-direction: column; }
    .gallery-album, .flea-item { width: 100%; }
    #navbar a     { padding: 4px 8px; }
    table.wb-table { font-size: 11px; }
    table.wb-table td, table.wb-table th { padding: 2px 4px; }
}

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