/* Tauchclub - zentrales Stylesheet (Design: Poseidon-Style, individual-diving.de) */ :root { --brand:#005e91; --accent:#22aadd; --teal:#0084b7; --bg:#ffffff; --line:#e4e8ec; --ink:#404040; --muted:#777777; --font-body:"Ubuntu", arial, helvetica, sans-serif; --font-head:"Raleway", arial, helvetica, sans-serif; } * { box-sizing: border-box; } body { margin:0; font-family:var(--font-body); background:var(--bg); color:var(--ink); font-size:16px; line-height:1.5; } h1,h2,h3,h4,h5,h6 { font-family:var(--font-head); font-weight:700; letter-spacing:.2px; color:var(--ink); line-height:1.35; } /* Navigation (eingeloggt) - Poseidon: weißer Kopf, dunkle Schrift, 4px-Akzentbalken */ nav { background:#fff; color:var(--ink); border-bottom:1px solid var(--line); padding:.4rem 1.1rem 0; display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap; } nav a { color:var(--ink); text-decoration:none; font-weight:600; } nav > .brand { display:flex; align-items:center; gap:.5rem; line-height:1.05; padding:.35rem 0; } nav > .brand .brand-text { display:flex; flex-direction:column; } nav > .brand .brand-name { font-family:var(--font-head); font-weight:700; font-size:1.25rem; letter-spacing:.2px; color:var(--ink); } nav > .brand .brand-subtitle { font-family:var(--font-body); font-weight:500; font-size:.7rem; letter-spacing:.03em; text-transform:none; color:var(--muted,#5b6b78); line-height:1.3; } nav > .brand:hover .brand-name { color:var(--accent); } nav a:hover { color:var(--accent); text-decoration:none; } nav .spacer { flex:1; } nav .nav-group { display:flex; gap:.15rem; flex-wrap:wrap; align-items:flex-end; } nav .nav-group a { display:flex; align-items:center; color:var(--ink); font-family:var(--font-head); font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; padding:.55rem .5rem; border-bottom:3px solid transparent; } nav .nav-group a:hover { color:var(--accent); border-bottom-color:var(--accent); text-decoration:none; } nav .nav-item { position:relative; display:flex; align-items:flex-end; } nav .nav-item.has-children > .nav-trigger { display:flex; align-items:center; cursor:pointer; font-family:var(--font-head); font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; padding:.55rem .5rem; border-bottom:3px solid transparent; color:var(--ink); } nav .nav-item.has-children > .nav-trigger:hover, nav .nav-item.has-children:hover > .nav-trigger { color:var(--accent); border-bottom-color:var(--accent); } nav .nav-submenu { position:absolute; top:100%; left:0; min-width:180px; background:var(--panel,#fff); border:1px solid var(--line,#dbe6ee); border-top:3px solid var(--accent); box-shadow:0 8px 22px rgba(0,40,70,.12); z-index:60; padding:.3rem 0; } nav .nav-submenu a { display:block; font-family:var(--font-head); font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink,#1c2b36); padding:.5rem .8rem; border-bottom:none; white-space:nowrap; } nav .nav-submenu a:hover { background:var(--brand,#005e91); color:#fff; } /* Desktop: Untermenü per Hover, Parent bleibt echter Link. */ @media (hover:hover) and (pointer:fine) { nav .nav-item.has-children > .nav-submenu { display:none; } nav .nav-item.has-children:hover > .nav-submenu, nav .nav-item.has-children:focus-within > .nav-submenu { display:block; } } /* Touch: Untermenü per .open (Tap) sichtbar. */ @media (hover:none), (pointer:coarse) { nav .nav-item.has-children > .nav-submenu { display:none; } nav .nav-item.has-children.open > .nav-submenu { display:block; } } nav .login-btn { background:var(--accent); border:none; color:#fff; border-radius:0; padding:.45rem 1rem; font-family:var(--font-head); font-weight:700; text-transform:uppercase; font-size:.8rem; letter-spacing:.04em; } nav .login-btn:hover { background:var(--ink); color:#fff; text-decoration:none; } /* Admin-Impersonation: Person-Picker in der Nav */ nav .nav-impersonate { display:flex; align-items:center; gap:.25rem; flex-shrink:0; } nav .nav-impersonate .persons-control { max-width:235px; } nav .nav-impersonate .pc-input { background:#fff; color:#1c2b36; } nav .nav-impersonate .pc-chip { background:#fff; } nav .nav-impersonate .nav-imp-label { font-size:1rem; line-height:1; } .impersonate-flag { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; background:#eef7fc; border:1px dashed var(--accent); color:var(--ink); padding:.32rem .7rem; border-radius:6px; font-size:.85rem; font-weight:600; } .impersonate-flag .imp-back { color:var(--accent); text-decoration:underline; } /* Hauptseite (Gäste) - Hero-Band wie auf individual-diving.de */ .home-hero { text-align:center; padding:3.2rem 1.4rem; margin-bottom:1.5rem; background:linear-gradient(160deg,#005e91 0%,#0084b7 55%,#22aadd 135%); border:0; border-radius:12px; color:#fff; box-shadow:0 12px 30px rgba(0,94,145,.22); } .home-hero * { color:#fff; } .home-title { font-family:var(--font-head); font-weight:700; font-size:2.7rem; margin:.4rem 0 0; letter-spacing:.5px; } .home-hero .muted { color:rgba(255,255,255,.85); font-size:1rem; } /* Öffentlicher Kopf (Berichte) - Poseidon */ .pnav { background:#fff; color:var(--ink); border-bottom:1px solid var(--line); padding:.4rem 1.2rem; display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; } .pnav a { color:var(--ink); text-decoration:none; font-weight:600; } .pnav a:first-child { font-family:var(--font-head); font-weight:700; font-size:1.25rem; } .pnav a:hover { color:var(--accent); text-decoration:none; } .pnav .spacer { flex:1; } .pnav a[aria-current], .pnav a.pnav-active { color:var(--accent); border-bottom:3px solid var(--accent); padding-bottom:.15rem; } .container { max-width:960px; margin:1.5rem auto; padding:0 1rem; } .card { background:#fff; border:1px solid var(--line); border-radius:8px; padding:1.25rem; margin-bottom:1rem; } h1 { font-size:1.4rem; margin:0 0 1rem; } /* Überschrift mit rechtsbündigen Aktionen (Bearbeiten/Löschen) */ .evt-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; } .evt-head-main { display:inline-flex; align-items:center; gap:.4rem; flex-wrap:wrap; min-width:0; } .evt-head-actions { display:inline-flex; align-items:center; margin-left:auto; } /* Personen-Sicht: Überschrift mit rechtsbündigem "+"-Icon + Suchfeld darunter */ .person-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; } .person-head-actions { display:inline-flex; align-items:center; margin-left:auto; } .person-search { margin:0 0 .8rem; } .person-search label { display:inline-block; } .person-search > div { margin-top:.25rem; } table { width:100%; border-collapse:collapse; margin:.5rem 0; } th,td { text-align:left; padding:.5rem .6rem; border-bottom:1px solid var(--line); font-size:.92rem; } th { background:#eef3f8; } input,select,textarea { padding:.45rem .6rem; border:1px solid var(--line); border-radius:6px; font:inherit; width:100%; max-width:420px; } label { display:block; margin:.6rem 0 .2rem; font-weight:600; font-size:.9rem; } .form-row { display:flex; gap:1rem; flex-wrap:wrap; } .form-row > div { flex:1; min-width:200px; } .req { color:#c0392b; font-weight:700; } .btn { display:inline-block; padding:.5rem .9rem; border:none; border-radius:6px; background:var(--accent); color:#fff; cursor:pointer; font-size:.9rem; text-decoration:none; } .btn:hover { filter:brightness(1.08); } .btn-danger { background:#b3261e; } .btn-light { background:#6c757d; } .btn-sm { padding:.25rem .5rem; font-size:.82rem; } .btn-plus { display:inline-grid; place-items:center; width:34px; height:31px; border:1px solid transparent; border-radius:6px; background:var(--accent); color:#fff; cursor:pointer; font-size:1.25rem; line-height:1; vertical-align:middle; text-decoration:none; font-weight:800; } .btn-plus:hover { filter:brightness(1.08); } .btn-plus svg { width:22px; height:22px; display:block; } .list-head { display:flex; align-items:center; justify-content:space-between; gap:.8rem; flex-wrap:wrap; } .list-head h1 { margin:0; } .list-head .btn-plus { margin-left:auto; } .btn-plus svg path { stroke-width:4; } .form-danger { display:inline-flex; align-items:center; vertical-align:middle; } .form-danger.right { margin-left:auto; margin-top:0; } .btn-outline { background:transparent; border:1px solid var(--line); color:var(--accent); } .flash { padding:.7rem 1rem; border-radius:6px; margin-bottom:1rem; } .flash.success { background:#e6f6ea; border:1px solid #b7e0c1; color:#1d6f33; } .flash.error { background:#fdebec; border:1px solid #f3b7b8; color:#a12622; } .flash.info { background:#e8f1fc; border:1px solid #bcd4f0; color:#1f4e79; } .badge { display:inline-block; padding:.15rem .5rem; border-radius:999px; font-size:.75rem; background:#e9eef5; color:#334; } .badge-danger { background:#fbe2e2; color:#b3261e; } .badge-project { background:#e3ecfa; color:#1f4e8f; } .badge.published { background:#e6f6ea; color:#1d6f33; } .badge.draft { background:#fdf3d7; color:#8a6d1a; } /* Projekt-Aufgabenliste: Status-Farbschema */ .badge.st-in_progress { background:#fff3c4; color:#7a5b00; } .badge.st-open { background:#fde2df; color:#b3261e; } .badge.st-done { background:#d6f0dd; color:#1d6f33; } .badge.st-cancelled { background:#1b1e23; color:#fff; } /* Teilnehmer-Status: Farbschema */ .badge.ps-registered { background:#d6f0dd; color:#1d6f33; } .badge.ps-attended { background:#d6f0dd; color:#1d6f33; } .badge.ps-interested { background:#fff3c4; color:#7a5b00; } .badge.ps-not_interested { background:#fde2df; color:#b3261e; } .badge.ps-no_participation { background:#fbe9e7; color:#b3261e; } .badge.ps-no_participation_parent { background:#fbe9e7; color:#b3261e; } .badge.ps-cancelled { background:#fde2df; color:#b3261e; } .badge.ps-no_show { background:#fde2df; color:#b3261e; } /* Notfallkontakte */ .contact-list { list-style:none; margin:0 0 1rem; padding:0; } .contact-item { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.55rem .1rem; border-bottom:1px solid var(--line); } .contact-item:last-child { border-bottom:none; } /* Abgesagte Termine */ .cancelled-row { background:#fbecec; } .cancelled-row a { color:#b3261e; } .cancel-banner { margin:.5rem 0 1rem; padding:.75rem 1rem; border:1px solid var(--line); border-left:4px solid #b3261e; border-radius:6px; background:#fbecec; color:#7a1510; } .interested-row { background:#f4f1fd; } details summary.btn { list-style:none; } details[open] summary { border-radius:6px 6px 0 0; } /* Benutzermenü mit Profilfoto */ .user-menu { position:relative; display:inline-block; z-index:20; } .user-menu a.avatar-trigger { display:inline-block; line-height:0; text-decoration:none; vertical-align:middle; cursor:pointer; color:inherit; padding:.2rem 0; } .user-menu a.avatar-trigger:hover .avatar-img, .user-menu a.avatar-trigger:hover .avatar-fallback { border-color:var(--accent); } .avatar-img, .avatar-fallback { width:32px; height:32px; border-radius:50%; object-fit:cover; border:2px solid var(--line); display:inline-block; } .avatar-fallback { background:#fff; color:var(--brand); font-weight:700; font-size:.8rem; line-height:32px; text-align:center; vertical-align:top; } .avatar-img[hidden], .avatar-fallback[hidden] { display:none; } /* Profilfoto in Tabellen (Teilnehmerlisten) */ .avatar-cell { width:40px; padding:4px 8px; } .avatar-cell img, .avatar-cell .avatar-fallback { width:36px; height:36px; } .user-menu-dropdown { position:absolute; right:0; top:100%; margin-top:8px; background:#fff; color:#223; border:1px solid var(--line); border-radius:10px; min-width:190px; max-width:260px; box-shadow:0 12px 30px rgba(0,0,0,.18); z-index:60; overflow:hidden; text-align:left; display:none; } /* Transparente Hover-Brücke über die 8px Lücke. Sie ist rechsjustiert wie das Dropdown und deckt dessen volle Breite ab, damit die Maus beim diagonalen Weg von Avatar zu Menü das Hover-Gebiet (.user-menu:hover) behält. */ .user-menu.has-children::after { content:""; position:absolute; right:0; top:100%; width:260px; height:14px; pointer-events:auto; } .user-menu-dropdown a { display:block; padding:.6rem .9rem; color:#223; text-decoration:none; font-weight:500; } .user-menu-dropdown a:hover { background:#eef4f9; } .user-menu-dropdown a.logout { border-top:1px solid var(--line); color:#a12622; } .user-menu-head { padding:.65rem .9rem; border-bottom:1px solid var(--line); font-weight:600; font-size:.9rem; background:#f6f9fc; word-break:break-word; } .user-menu-head .badge { margin-left:.25rem; } /* Desktop: Hover/Fokus öffnet das Untermenü; das Foto bleibt echter Link → Dashboard. */ @media (hover:hover) and (pointer:fine) { .user-menu.has-children:hover .user-menu-dropdown, .user-menu.has-children:focus-within .user-menu-dropdown, .user-menu.has-children.keep-open .user-menu-dropdown { display:block; } } /* Touch: Tap klappt das Untermenü auf; Link springt nicht. */ @media (hover:none), (pointer:coarse) { .user-menu.has-children.open .user-menu-dropdown { display:block; } } /* Profilfoto-Upload */ .avatar-upload { display:flex; gap:1.5rem; align-items:flex-start; margin-bottom:1.2rem; } .avatar-left { display:flex; flex-direction:column; align-items:center; gap:.6rem; } .avatar-preview { width:96px; height:96px; border-radius:50%; object-fit:cover; border:2px solid var(--line); background:#eef3f8; } .avatar-actions { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; justify-content:center; } .avatar-name { display:flex; flex-direction:column; line-height:1.25; margin-top:.4rem; } .avatar-name strong { font-size:1.35rem; color:var(--ink); line-height:1.15; } .avatar-status { margin-top:.35rem; width:max-content; } .avatar-join { margin-top:.4rem; } .muted { color:#6b757d; font-size:.85rem; } .grid { display:grid; gap:1rem; } .grid-2 { grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); } .grid-3 { grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); } .stat { background:#fff; border:1px solid var(--line); border-radius:8px; padding:1rem; } .stat .num { font-size:1.6rem; font-weight:700; color:var(--brand); } .stat .stat-title { font-weight:600; color:#1f2d38; margin-top:.1rem; } .stat .stat-sub { font-size:.8rem; color:#5b6b79; margin-top:.05rem; } .stat .stat-flag { display:inline-block; font-size:.72rem; font-weight:600; color:#a12622; background:#fbe2e2; border-radius:5px; padding:.1rem .4rem; margin-top:.35rem; } a.stat-button.has-expired { border-color:#e6b3b3; } .child-select-list { list-style:none; padding:0; margin:.4rem 0; display:grid; gap:.5rem; } .child-select { display:flex; align-items:center; gap:.55rem; padding:.6rem .8rem; border:1px solid var(--line); border-radius:7px; background:#fff; text-decoration:none; color:#1f2d38; transition:all .12s ease; } .child-select:hover { border-color:var(--accent); background:#eef5fc; } .child-select .cs-name { font-weight:600; flex:1; } .child-select .badge { margin-left:auto; } /* Single-Kind button im Dashboard */ .stat.child-single { flex-direction:column !important; align-items:center !important; text-align:center; padding:.9rem .8rem !important; } .cs-avatar { position:relative; display:block; width:52px; height:52px; border-radius:50%; overflow:hidden; background:#e9f0f7; box-shadow:0 1px 3px rgba(0,0,0,.12); margin:0 auto .45rem auto; } .cs-avatar img { display:block; width:100%; height:100%; object-fit:cover; } .cs-fallback { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.05rem; color:var(--brand); z-index:0; } a.stat-button { display:block; text-decoration:none; color:inherit; transition:box-shadow .15s ease, transform .05s ease; } a.stat-button:hover { box-shadow:0 1px 4px rgba(0,0,0,.12); transform:translateY(-1px); } a.stat-button:hover .num { color:var(--brand); text-decoration:none; } /* Seitenlayout mit Seitenmenü (links) und Inhalt (rechts) */ .side-layout { display:grid; grid-template-columns:220px 1fr; gap:1.5rem; align-items:start; } .side-menu { background:#fff; border:1px solid var(--line); border-top:4px solid var(--brand); border-radius:8px; padding:.7rem; position:sticky; top:1rem; box-shadow:0 8px 24px rgba(0,0,0,.06); } .side-menu nav { display:flex; flex-direction:column; gap:.1rem; } .side-menu a { display:block; padding:.5rem .7rem; border-radius:6px; color:var(--ink); text-decoration:none; font-family:var(--font-head); font-weight:600; font-size:.85rem; text-transform:uppercase; letter-spacing:.03em; border-left:3px solid transparent; } .side-menu a:hover { background:#eef7fc; color:var(--accent); border-left-color:var(--accent); } .side-menu a.active { background:#eef7fc; color:var(--accent); border-left-color:var(--accent); } .side-group { display:flex; flex-direction:column; gap:.1rem; margin-top:.35rem; } .side-group-title { display:block; padding:.45rem .7rem .1rem; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-family:var(--font-head); font-weight:700; border-radius:6px; } a.side-group-title:hover { color:var(--accent); background:#eef7fc; } a.side-group-title.active { color:var(--accent); background:#eef7fc; } .side-content { min-width:0; } .card-actions { display:flex; justify-content:space-between; align-items:center; margin-top:.7rem; } .icon-btn { border:1px solid var(--line); background:#fff; border-radius:6px; padding:.4rem .5rem; line-height:0; cursor:pointer; color:var(--ink); text-decoration:none; display:inline-block; } .icon-btn svg { width:16px; height:16px; display:block; } .icon-btn-danger { background:#b3261e; border-color:#b3261e; color:#fff; } .icon-btn-danger:hover { background:#9b1f18; border-color:#9b1f18; } .icon-btn-light { background:#6c757d; border-color:#6c757d; color:#fff; } .icon-btn-light:hover { background:#5a636a; border-color:#5a636a; } /* Ausleihe-Kasse (loan_checkout.php) */ .loancart-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; } .loancart-cols { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; align-items:start; } @media (max-width: 860px) { .loancart-cols { grid-template-columns:1fr; } } .loancart-pane { display:flex; flex-direction:column; gap:.75rem; } table.loancart-items td { vertical-align:middle; } .loancart-checkout { border-top:1px solid var(--line); padding-top:.75rem; margin-top:.25rem; } /* Suchzeile (rechter Suchen-Button) + Material-Autocomplete */ .loancart-searchform { display:block; } .loancart-search-row { display:flex; align-items:flex-end; gap:.6rem; } .loancart-search-row .material-control { flex:1 1 auto; } .loancart-search-row .mp-btns { display:flex; gap:.5rem; align-items:center; } .material-control { position:relative; width:100%; font-size:.9rem; } .material-control .mp-input { width:100%; padding:.3rem .55rem; border:1px solid var(--line); border-radius:6px; font-size:.9rem; } .material-control .mp-menu { position:absolute; z-index:30; top:calc(100% + 4px); left:0; right:0; background:#fff; border:1px solid var(--line); border-radius:6px; box-shadow:0 4px 14px rgba(16,32,52,.12); max-height:220px; overflow:auto; margin:0; padding:.2rem; list-style:none; } .material-control .mp-item { padding:.3rem .5rem; border-radius:4px; cursor:pointer; color:#1c2b36; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .material-control .mp-item:hover, .material-control .mp-item.active { background:#dbe7f2; } .icon-btn-primary { background:var(--brand); border-color:var(--brand); color:#fff; } .icon-btn-primary:hover { background:var(--accent); border-color:var(--accent); } .icon-btn-green { background:#1e7d3f; border-color:#1e7d3f; color:#fff; } .icon-btn-green:hover { background:#186533; border-color:#186533; } .icon-btn-green:disabled, .icon-btn-green[disabled] { background:#9cc5a9; border-color:#9cc5a9; color:#fff; cursor:not-allowed; } .icon-group { display:inline-flex; gap:.35rem; align-items:center; } .name-link { color:var(--brand); text-decoration:none; font-weight:600; } .name-link:hover { text-decoration:underline; } .family-row { display:flex; justify-content:space-between; align-items:center; gap:.75rem; padding:.35rem 0; } .family-row form { margin:0; } .actions-cell { white-space:nowrap; vertical-align:middle; text-align:right; padding-right:0; } .actions-cell form { display:inline-flex; align-items:center; gap:.35rem; margin:0; vertical-align:middle; } .actions-cell .icon-group { vertical-align:middle; } table thead th:last-child { text-align:right; padding-right:0; } table.event-view thead th:last-child { text-align:left; padding-right:.6rem; } table tbody td.actions-cell { text-align:right; padding-right:0; } /* Materialliste: alle Aktions-Icons in einer Zeile exakt auf gleicher Höhe */ .inventory-table .actions-cell { display:flex; align-items:center; justify-content:flex-end; gap:.4rem; } .inventory-table .actions-cell form, .inventory-table .actions-cell .icon-group { margin:0; } .inventory-table .actions-cell .icon-btn { line-height:0; } .cat-edit-form { align-items:center; gap:.4rem; margin:.1rem 0; } .cat-edit-form input[type="text"] { width:190px; } .cat-edit-form button { white-space:nowrap; } .meta-table { width:100%; border-collapse:collapse; } .meta-table th { text-align:left; padding:.4rem .8rem .4rem 0; color:#6b757d; font-weight:600; width:30%; white-space:nowrap; } .meta-table td { padding:.4rem 0; } @media (max-width: 720px) { .side-layout { grid-template-columns:1fr; } .side-menu { position:static; } } .error-page { text-align:center; padding:4rem 1rem; } .seite-404 { display:flex; flex-direction:column; align-items:center; gap:1rem; max-width:520px; margin:2rem auto 3rem; } .seite-404-code { font-family:var(--font-head); font-weight:700; font-size:5rem; line-height:1; color:var(--brand); opacity:.85; letter-spacing:.04em; } .seite-404-title { font-family:var(--font-head); font-size:1.6rem; margin:.2rem 0 0; color:var(--ink); } .seite-404-slug { display:inline-block; padding:.1rem .45rem; margin:.1rem 0; background:#f1f4f7; border:1px solid var(--line); border-radius:5px; font-size:.85rem; } .seite-404-create { margin:.8rem 0; padding:1rem 1.2rem; width:100%; background:#f2f8f5; border:1px solid #cfe3d7; border-radius:10px; text-align:left; } .seite-404-create p { margin:0 0 .8rem; color:var(--ink); } .seite-404-create .btn { display:inline-flex; align-items:center; gap:.4rem; } .seite-404-plus { font-size:1.1rem; font-weight:700; line-height:1; } .seite-404-links { display:flex; gap:.6rem; margin-top:.4rem; } /* Fassungshistorie (Seiten) */ .revisions { display:flex; flex-direction:column; gap:1.2rem; } .revisions-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; } .revisions-open { text-decoration:none; font-weight:600; margin-left:.35rem; } .revision-table { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden; } .revision-table th, .revision-table td { text-align:left; padding:.6rem .75rem; border-bottom:1px solid var(--line); vertical-align:middle; } .revision-table thead th { background:#f5f7f9; font-family:var(--font-head); font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); } .revision-table tbody tr:last-child td { border-bottom:none; } .revision-current { background:#f2f8f5; } .revision-diff { max-width:26rem; } .revision-actions .form-inline { display:inline; margin:0 .35rem 0; } .revision-actions .btn { margin-right:.35rem; } .revision-preview-card { display:flex; flex-direction:column; gap:.7rem; } .revision-preview-head { display:flex; align-items:center; justify-content:space-between; gap:.8rem; flex-wrap:wrap; } .revision-preview-body h2 { font-size:1.3rem; } .revision-preview-actions { border-top:1px dashed var(--line); padding-top:.9rem; } footer { text-align:center; color:#8a94a0; font-size:.8rem; padding:1.5rem; } /* Berichte: öffentliche Liste */ .bericht-list { display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); } .bericht-card { background:#fff; border:1px solid var(--line); border-radius:12px; padding:1.15rem 1.3rem; box-shadow:0 2px 10px rgba(0,94,145,.06); display:flex; flex-direction:column; gap:.45rem; } .bericht-card a { color:var(--brand); text-decoration:none; } .bericht-card h2 { margin:0; font-size:1.15rem; } .bericht-card h2 a:hover { text-decoration:underline; } .bericht-card .snippet { color:#45586b; font-size:.9rem; line-height:1.5; } .bericht-card .meta { color:#8393a3; font-size:.8rem; margin-top:auto; } /* Berichte: Artikel-Typografie */ .bericht { background:#fff; border:1px solid var(--line); border-radius:12px; padding:1.6rem 1.8rem; line-height:1.65; } .bericht .bericht-meta { color:#8393a3; font-size:.85rem; margin-bottom:1.2rem; } .bericht h1 { font-size:1.8rem; margin:0 0 .4rem; } .bericht h2 { font-size:1.35rem; margin:1.6rem 0 .6rem; color:var(--brand); } .bericht h3 { font-size:1.15rem; margin:1.4rem 0 .5rem; color:var(--brand); } .bericht h4 { font-size:1rem; margin:1.2rem 0 .4rem; color:var(--ink); } .bericht h5 { font-size:.92rem; margin:1.1rem 0 .35rem; color:var(--ink); text-transform:uppercase; letter-spacing:.04em; } .bericht h6 { font-size:.85rem; margin:1rem 0 .3rem; color:#4a5a6a; font-weight:600; letter-spacing:.05em; text-transform:uppercase; } .bericht p { margin:.7rem 0; } .bericht img { max-width:100%; height:auto; border-radius:10px; box-shadow:0 4px 16px rgba(0,0,0,.12); margin:.8rem 0; display:block; } .bericht ul, .bericht ol { margin:.7rem 0; padding-left:1.4rem; } .bericht blockquote { margin:1rem 0; padding:.5rem 1rem; border-left:3px solid var(--teal); background:#f2f8f7; color:#2c4a5e; border-radius:0 8px 8px 0; } .bericht pre { background:#0f2233; color:#dce9f2; padding:.9rem 1rem; border-radius:8px; overflow-x:auto; } .bericht code { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.88em; } .bericht pre code { background:none; padding:0; } .bericht a { color:var(--accent); } /* Icons in der Seite-Aktionen-Headerleiste: weiß auf farbigen Hintergrund, auch im Hover-Zustand (sonst würde .bericht a die Vordergrundfarbe setzen). */ .bericht .icon-btn, .bericht .icon-btn:hover { color:#fff; } .ns-path { color:#8393a3; font-size:.8rem; letter-spacing:.02em; margin:0 0 1.1rem; } .ns-path::before { content:""; } a.ns-broken, span.ns-broken { color:#c0392b; border-bottom:1px dashed #c0392b; } a.ns-broken { cursor:not-allowed; } a.ns-broken::after, span.ns-broken::after { content:" (Seite fehlt)"; font-size:.78em; color:#c0392b; } a.ns-create { color:#1a5e3a; border-bottom:1px dashed #1a5e3a; } a.ns-create::after { content:" (neu anlegen)"; font-size:.78em; color:#1a5e3a; } /* Editor (Bericht bearbeiten) */ .editor-toolbar { display:flex; gap:4px; flex-wrap:wrap; align-items:center; background:#f0f4f9; border:1px solid var(--line); border-radius:10px 10px 0 0; padding:6px; } .editor-toolbar button { min-width:32px; height:32px; padding:0 .5rem; border:1px solid var(--line); border-radius:6px; background:#fff; color:#2c3e50; font-weight:600; cursor:pointer; } .editor-toolbar button:hover { background:#e6eef6; } .editor-toolbar button.active { background:var(--teal); color:#fff; border-color:var(--teal); } .editor-toolbar .tb-ic { display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:32px; padding:0 6px; } .editor-toolbar .tb-ic svg { display:block; } .editor-toolbar .tb-ic.active svg { color:#fff; } .editor-toolbar .sep { width:1px; height:22px; background:var(--line); margin:0 4px; } .editor { min-height:320px; border:1px solid var(--line); border-top:none; border-radius:0 0 10px 10px; padding:1rem 1.2rem; background:#fff; line-height:1.6; overflow-y:auto; max-width:760px; } .editor:focus { outline:none; box-shadow:0 0 0 3px rgba(26,158,141,.18); } .editor img { max-width:100%; height:auto; border-radius:8px; box-shadow:0 3px 12px rgba(0,0,0,.12); margin:.6rem 0; } .editor blockquote { margin:.8rem 0; padding:.4rem .9rem; border-left:3px solid var(--teal); background:#f2f8f7; } .editor pre { background:#0f2233; color:#dce9f2; padding:.7rem .9rem; border-radius:8px; overflow-x:auto; } .editor table { width:100%; border-collapse:collapse; margin:.8rem 0; } .editor table th, .editor table td { border:1px solid var(--line); padding:.45rem .55rem; text-align:left; vertical-align:top; } .editor table th { background:#eef3f8; color:var(--brand); } .editor table td[contenteditable], .editor table th[contenteditable] { outline:none; } .editor table td:hover, .editor table th:hover { background:#fff7ec; } .editor-table-hint { margin-top:4px; } /* Textart-Dropdown & Farb-Picker in der Editor-Toolbar */ .editor-toolbar .blockpick { display:inline-flex; align-items:center; height:32px; border:1px solid var(--line); border-radius:6px; background:#fff; padding:0 2px 0 8px; font-size:.85rem; color:#2c3e50; cursor:pointer; } .editor-toolbar .blockpick:hover { background:#e6eef6; } .editor-toolbar .blockpick select { border:none; background:transparent; font-size:.85rem; color:#2c3e50; padding:0 2px; outline:none; cursor:pointer; height:28px; max-width:140px; } .editor-toolbar .sizepick { display:inline-flex; align-items:center; height:32px; border:1px solid var(--line); border-radius:6px; background:#fff; padding:0 2px 0 8px; font-size:.85rem; color:#2c3e50; cursor:pointer; } .editor-toolbar .sizepick:hover { background:#e6eef6; } .editor-toolbar .sizepick select { border:none; background:transparent; font-size:.85rem; color:#2c3e50; padding:0 2px; outline:none; cursor:pointer; height:28px; max-width:130px; } .editor-toolbar .colorpick { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border:1px solid var(--line); border-radius:6px; background:#fff; cursor:pointer; position:relative; } .editor-toolbar .colorpick:hover { background:#e6eef6; } .editor-toolbar .colorpick input { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; margin:0; } .editor-toolbar .colorpick-sw { width:14px; height:8px; border-radius:2px; background:linear-gradient(90deg,#1a9e89,#e0533d,#2b6cb0); display:inline-block; } .editor-toolbar .scbtn { font-variant:small-caps; font-weight:700; letter-spacing:.02em; } .editor-toolbar .scbtn.active { color:#fff; } /* Mode-Umschalter Visuell ⇄ Wiki */ .editor-toolbar .tb-spacer { flex:1 1 auto; } .editor-toolbar .mode-switch { display:inline-flex; border:1px solid var(--line); border-radius:7px; overflow:hidden; background:#fff; } .editor-toolbar .tb-mode { border:none; border-radius:0; min-width:58px; height:30px; padding:0 .7rem; background:transparent; color:#4c6579; font-weight:600; font-size:.82rem; cursor:pointer; } .editor-toolbar .tb-mode:hover { background:#e6eef6; } .editor-toolbar .tb-mode.active { background:var(--teal); color:#fff; } .editor-toolbar .tb-mode + .tb-mode { border-left:1px solid var(--line); } /* Wiki-Textarea (DokuWiki-Quelltext) */ .editor-wiki { display:block; min-height:320px; width:100%; max-width:760px; box-sizing:border-box; border:1px solid var(--line); border-top:none; border-radius:0 0 10px 10px; padding:1rem 1.2rem; background:#fbfdfe; line-height:1.55; resize:vertical; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.9rem; color:#1c2b36; white-space:pre; } .editor-wiki:focus { outline:none; box-shadow:0 0 0 3px rgba(26,158,141,.18); } .editor-wiki[hidden] { display:none; } .editor[hidden] { display:none; } /* Wiki-Modus: Format-Toolbar deaktiviert (nur Code + Umschalter bleiben aktiv) */ .editor-toolbar.is-wiki > * { opacity:.38; pointer-events:none; } .editor-toolbar.is-wiki .mode-switch, .editor-toolbar.is-wiki .mode-switch .tb-mode { opacity:1; pointer-events:auto; } .editor-toolbar.is-wiki [id="codeBtn"] { opacity:1; pointer-events:auto; } .editor-toolbar.is-wiki .tb-spacer { opacity:1; } /* Editor: neue Elemente (Überschriften 4–6, Kapitälchen) wie im veröffentlichten Text */ .editor h1 { font-size:1.8rem; margin:.2rem 0 .4rem; } .editor h2 { font-size:1.35rem; margin:.6rem 0 .4rem; color:var(--brand); } .editor h3 { font-size:1.15rem; margin:.5rem 0 .35rem; color:var(--brand); } .editor h4 { font-size:1rem; margin:.4rem 0 .3rem; } .editor h5 { font-size:.92rem; margin:.35rem 0 .25rem; text-transform:uppercase; letter-spacing:.04em; } .editor h6 { font-size:.85rem; margin:.3rem 0 .25rem; color:#4a5a6a; letter-spacing:.05em; text-transform:uppercase; } .editor small, .bericht small { font-variant:small-caps; letter-spacing:.03em; } /* PDF-Badge (Admin + Editor) */ .pdf-badge { display:inline-block; background:#c0392b; color:#fff; font-size:.62rem; font-weight:700; letter-spacing:.05em; padding:.1rem .42rem; border-radius:4px; line-height:1; } /* Bildbibliothek im Editor */ .gallery-box { width:min(680px, 92vw); } .gallery-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:.5rem; max-height:320px; overflow-y:auto; } .gallery-item { padding:0; border:2px solid var(--line); border-radius:8px; background:#fff; cursor:pointer; overflow:hidden; display:block; width:100%; line-height:0; } .gallery-item:hover, .gallery-item:focus { border-color:var(--accent); outline:none; } .gallery-item img { width:100%; height:64px; object-fit:cover; display:block; } .slug-row { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; } .slug-row input { flex:1; min-width:200px; } .slug-row .slug-preview { color:#8393a3; font-size:.82rem; } .checkbox-line { display:flex; align-items:center; gap:.55rem; margin:1rem 0; } .checkbox-line input { width:auto; } .checkbox-line label { margin:0; } .media-badge { font-size:.78rem; color:#4c6579; background:#eef3f8; border:1px solid var(--line); padding:.1rem .5rem; border-radius:999px; } /* Personenliste: Name + Status-Icons (Admin/Altersgruppe) rechts daneben, untereinander */ .person-cell { display:flex; align-items:center; justify-content:space-between; gap:.55rem; } .person-cell .avatar-img.avatar-row, .person-cell .avatar-fallback.avatar-row { width:30px; height:30px; flex:0 0 auto; } .person-cell .name-link { flex:1; } /* Nichtmitglieder: Name blasser */ .name-nonmember { color:#98a2b0; opacity:.75; } .name-nonmember:hover { color:#6b757d; } .person-cell .avatar-fallback.avatar-row { line-height:28px; font-size:.72rem; } .icon-col { display:flex; flex-direction:column; gap:.2rem; } .ico { display:inline-flex; } .ico svg { width:18px; height:18px; display:block; } .ico-admin { color:#c0392b; } .ico-age-kind { color:var(--teal); } .ico-age-youth { color:#d97706; } /* Kompakte Personenliste */ table.compact, table.compact th, table.compact td { font-size:.88rem; } table.compact th, table.compact td { padding:.32rem .5rem; } table.compact .badge { font-size:.7rem; padding:.1rem .42rem; } /* Person-Picker (Autocomplete-Textfeld als Ersatz für Person-