/* tagebuch.de Design-System — Modern Clean/Flat — 2026-06-13 * * Schicht 2 von 3. Lädt NACH layout.css (überschreibt dessen Fixwerte) und VOR * dem inline User-Design. Reskinnt die BESTEHENDEN Klassen (kein Markup-Umbau nötig). * * User-Override-Prinzip: var(--c-user-X, var(--c-X)) * - ausgeloggt: --c-user-* ungesetzt -> modernes Theme (Light/Dark) greift voll * - eingeloggt: --c-user-* gesetzt -> individuelles Theme gewinnt */ /* ============================ Reset / Basis ============================ */ *, *::before, *::after { box-sizing: border-box; } /* Robuste Basis auf : garantiert IMMER cleane Schrift/Farbe. Falls ein User-Var leer ist, wird die body-Regel ungültig und erbt von hier (statt auf den Browser-Default = Times zu fallen). */ html { font-size: var(--fs-base); -webkit-text-size-adjust: 100%; font-family: var(--ff); color: var(--c-text); background-color: var(--c-bg); } body { margin: 0; font-family: var(--c-user-font, var(--ff)); font-size: 1rem; line-height: var(--lh-base); color: var(--c-user-text, var(--c-text)); background-color: var(--c-user-bg, var(--c-bg)); background-image: var(--c-user-bg-image, none); background-position: var(--c-user-bg-pos, center top); background-repeat: var(--c-user-bg-rep, no-repeat); background-attachment: fixed; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img { max-width: 100%; height: auto; } a { color: var(--c-user-link, var(--c-link)); text-decoration: none; transition: color .12s ease; } a:hover { color: var(--c-user-link-hover, var(--c-link-hover)); } p { margin: 0 0 var(--sp-3); } /* Überschriften modern + dezente Akzentlinie (flat) */ .h1, h1.h1, .add_bereiche_headline, .title_big { font-family: var(--ff-head); font-weight: var(--fw-bold); color: var(--c-user-text, var(--c-text)); line-height: 1.25; border: 0; } .h1, h1.h1 { font-size: var(--fs-h2); margin: 0 0 var(--sp-3); padding: 0 0 var(--sp-2); border-bottom: 2px solid var(--c-accent); } .title_big { font-size: var(--fs-h1); margin: 0 0 var(--sp-3); } .add_bereiche_headline { font-size: var(--fs-h3); color: var(--c-text-soft); margin: var(--sp-5) 0 var(--sp-2); padding-bottom: var(--sp-1); border-bottom: var(--line); } /* ============================ Layout-Container ============================ */ /* #main war fix 800px -> jetzt voll, einzelne Bereiche zentriert auf --maxw */ #main, #container { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0; } /* zentrierter, gepolsterter Inhaltsbereich für die Hauptbereiche */ .tab_haupt, .hg_box, #footer > .footer-inner { max-width: var(--maxw); margin-left: auto; margin-right: auto; box-sizing: border-box; } .tab_haupt { padding: var(--sp-5) var(--sp-4); } /* Haupt-Layout-Tabelle -> responsives Flex (Inhalt + Sidebar) ohne Markup-Umbau */ .tab_haupt { border-collapse: separate; border-spacing: 0; width: 100%; } .tab_haupt > tbody { display: block; } .tab_haupt > tbody > tr { display: flex; flex-wrap: wrap; gap: var(--sp-5); align-items: flex-start; } .tab_haupt > tbody > tr > td { display: block; } .tab_haupt > tbody > tr > .td_center { display: none; } .td_left, .td_left_addedit { flex: 1 1 60%; min-width: 0; width: auto !important; } .td_right { flex: 1 1 var(--sidebar-w); max-width: 380px; width: auto !important; } /* ============================ Surfaces / Panels (Flat) ============================ */ .td_left, .td_right, .td_left_addedit { background: var(--c-surface); border: 0; border-radius: var(--radius); padding: var(--sp-5); box-shadow: var(--shadow); } .td_left { background: var(--c-user-surface-left, var(--c-surface)); } .td_right { background: var(--c-user-surface-right, var(--c-surface)); } .profil_func, .diary_des, .group_des, .about_box, .box_iso, .optbox { background: var(--c-user-profil, var(--c-surface-2)); border: 0; border-radius: var(--radius-sm); padding: var(--sp-3); margin-bottom: var(--sp-3); } .about_title { background: transparent; border-bottom: var(--line); padding-bottom: var(--sp-1); font-weight: var(--fw-medium); } /* Einträge / Listen */ .box_entrys { padding: var(--sp-4) 0; border-bottom: 1px solid var(--c-user-border, var(--c-border)); margin: 0; } .box_entrys:last-child { border-bottom: 0; } /* Mindestgröße wie auf der Startseite; größere User-Einstellungen bleiben erhalten */ .entry { font-size: max(var(--fs-entry), 15px); line-height: 1.6; min-height: 0; height: auto !important; } .comment_text { font-size: max(var(--fs-comment), 14px); } .text_big { font-size: max(var(--fs-detail), 15px); } .text, .text2 { color: var(--c-user-text, var(--c-text)); } .font_grau, .emty { color: var(--c-text-mute); } .font_10 { font-size: .8125rem; } .font_12 { font-size: .875rem; } .font_orange, .font_green { } /* Farben aus layout.css belassen */ /* Trennlinien, die im Original border-Farbe nutzen */ .user_menue, .profil_edit, .vbreite_links, .filter, .settings { border-color: var(--c-user-border, var(--c-border)) !important; } /* ============================ Einträge / Momente ============================ */ .box_entrys { display: flow-root; padding: var(--sp-4) var(--sp-2); } .box_entrys > img[align="left"] { border-radius: var(--radius-sm); margin: 2px var(--sp-3) 4px 0 !important; } .entry a.orange, a.orange { color: var(--c-accent); } .add_bereiche { margin: var(--sp-2) 0; } /* aufgeklappte Unterbereiche (Kommentare/Tags/Bilder/Karte) als dezente Einschübe */ .add_bereiche:not([style*="none"]) { background: var(--c-surface-2); border: 0; border-radius: var(--radius-sm); padding: var(--sp-3); } .zumprodukt { display: inline-block; background: var(--c-user-buttons, var(--c-chip-bg)); color: var(--c-chip-text); border: 0; border-radius: var(--radius-pill); padding: 3px 10px; margin: 2px; font-size: .82rem; text-decoration: none; line-height: 1.5; } .zumprodukt:hover { border-color: var(--c-accent); color: var(--c-accent); } .in2 { border-radius: var(--radius-sm); } /* ============================ Kurzmitteilung / Quick-Post (Profil) ============================ */ .shortpost { margin: var(--sp-3) 0 var(--sp-4); } .shortpost__head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); font-size: .9rem; } .shortpost__count { color: var(--c-text-mute); } .shortpost__add { margin-left: auto; font-weight: var(--fw-medium); white-space: nowrap; } .shortpost__row { display: flex; gap: var(--sp-2); align-items: stretch; } .shortpost__field { flex: 1 1 auto; min-width: 0; min-height: 42px; resize: vertical; max-width: 100%; } .shortpost__btn { flex: 0 0 auto; } @media (max-width: 520px) { .shortpost__row { flex-direction: column; } .shortpost__btn { align-self: flex-start; } } /* ============================ Profil: Sub-Nav & Filter/Sortieren ============================ */ /* Float-Leiste (Einträge/Lese · Filter|Sortieren · Übersicht) -> saubere Flex-Toolbar, fängt die Floats ein, sonst rutscht der erste Eintrag nach rechts. */ .areas2 { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); height: auto !important; min-height: 0; background: none !important; background-image: none !important; padding: var(--sp-2) 0; margin: 0 0 var(--sp-3); border-bottom: var(--line); } .areas2 > div, .areas2 > font, .areas2 > a { float: none !important; margin: 0 !important; } .areas2 [style*="float:right"], .areas2 font[style*="float"] { margin-left: auto !important; } .areas2 .in2, .areas2 .out2 { float: none !important; margin: 0 !important; display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border: 0 !important; border-radius: var(--radius-sm); cursor: pointer; font-weight: var(--fw-medium); background: var(--c-chip-bg); color: var(--c-chip-text); } .areas2 .in2 { background: var(--c-primary-2); color: #fff; } /* aktiver Tab */ .areas2 a { color: var(--c-link); } .areas2 .in2 a { color: #fff; } /* Font im aktiven Tab weiß (überschreibt Link-Farbe) */ /* Filter-/Sortier-Panel (per JS ein-/ausgeblendet) sauber & nicht abgeschnitten */ #prefs_filter, #prefs_sort { height: auto !important; background: var(--c-surface-2); border: 0; border-radius: var(--radius-sm); padding: var(--sp-3); margin: 0 0 var(--sp-3); } #prefs_filter table, #prefs_sort table { width: 100%; border-collapse: collapse; } #prefs_filter td, #prefs_sort td { padding: 5px 6px; vertical-align: middle; } #prefs_filter label, #prefs_sort label { cursor: pointer; } /* ============================ Tag-Cloud ============================ */ .box_tags, .box_tags div, .box_tags_start, .box_tags_start_new { background-color: var(--c-user-tag-bg, var(--c-tag-bg)); border-radius: var(--radius-sm); padding: var(--sp-3); color: var(--c-tag-link); } /* leere clear:both-Helfer-Divs in der Tag-Box nicht als gepolsterten Block rendern (sonst Extra-Abstand unter den Jahreszahlen auf /archive + User-Seiten) */ .box_tags div[style*="clear"] { padding: 0 !important; background: none !important; border-radius: 0; } /* oberen Abstand der Cloud-Box (getCloud auf /archive + User-Seiten) etwas knapper */ #timetags .box_tags, #wordtags .box_tags { padding-top: var(--sp-1); } .box_tags2, .font_whites, .cloud0,.cloud1,.cloud2,.cloud3,.cloud4,.cloud5,.cloud6,.cloud7,.cloud8,.cloud9 { color: var(--c-user-tag-link, var(--c-tag-link)); text-decoration: none; } .tagau { display: inline-block; float: none; background: var(--c-chip-bg); color: var(--c-chip-text); border-radius: var(--radius-pill); padding: 2px 10px; margin: 0 4px 4px 0; font-size: .85rem; } .tags_aktiv { color: var(--c-accent); } /* ============================ Formulare & Buttons ============================ */ input[type="text"], input[type="password"], input[type="email"], input[type="search"], input[type="number"], input[type="url"], input[type="tel"], input[type="date"], textarea, select { font-family: inherit; font-size: 1rem; color: var(--c-text); background: var(--c-surface); border: 1px solid var(--c-border-2); border-radius: var(--radius-sm); padding: 8px 10px; max-width: 100%; box-sizing: border-box; } textarea { line-height: 1.5; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--c-primary-2); box-shadow: var(--ring); } /* Submit-/Action-Buttons (echte Controls) — flat, Akzent, User-Buttonfarbe respektiert */ button, input[type="submit"]:not(.search_lupe), input[type="button"]:not(.search_lupe), input[type="reset"], .btn, a.btn { display: inline-block; font-family: inherit; font-size: .95rem; font-weight: var(--fw-medium); line-height: 1.2; color: var(--c-on-buttons); background: var(--c-buttons); /* solides Blau, NICHT die oft helle User-Buttonfarbe (sonst weiße Schrift unlesbar) */ border: 1px solid transparent; border-radius: var(--radius-sm); padding: 9px 16px; cursor: pointer; transition: background .12s ease, filter .12s ease; } button:hover, input[type="submit"]:not(.search_lupe):hover, input[type="button"]:not(.search_lupe):hover, .btn:hover, a.btn:hover { filter: brightness(1.06); color: var(--c-on-buttons); } .btn-accent { background: var(--c-accent); } /* Button-Varianten (a.* mitgefuehrt, damit sie die a.btn-Basisregel sicher schlagen) */ .btn-danger, a.btn-danger { background: var(--c-err); color: #fff; } .btn-danger:hover, a.btn-danger:hover { background: var(--c-err); filter: brightness(1.06); color: #fff; } .btn-ghost, a.btn-ghost { background: transparent; color: var(--c-text); border: 1px solid var(--c-border-2); } .btn-ghost:hover, a.btn-ghost:hover { background: var(--c-surface-2); color: var(--c-text); filter: none; } .btn-sm, a.btn-sm { padding: 6px 12px; font-size: .9rem; } /* ===== Lösch-Bestätigung (Inline-Box bei Kommentaren & Einträgen) ===== Ersetzt die alte harte rote Border-Box (.delbox in layout*.css) durch eine dezente Warn-Karte mit echten Buttons. JS togglet weiterhin display:block. */ .delbox { display: none; background: var(--c-err-bg); border: 1px solid var(--c-err); border-left: 3px solid var(--c-err); color: var(--c-text); border-radius: var(--radius-sm); padding: var(--sp-3); margin: var(--sp-2) 0; font-size: .95rem; } .delbox__q { display: block; margin-bottom: var(--sp-2); font-weight: var(--fw-medium); } .delbox__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; } /* ===== Kompakte Sortier-Buttons (prefs_sort) — Toggle statt Radio+Label ===== */ .sortbar { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-top: var(--sp-1); } .sortbar__msg { font-size: .8rem; color: var(--c-text-soft); margin-bottom: var(--sp-2); } .sortbar .sortbtn { display: inline-block; font-size: .8rem; line-height: 1.2; padding: 5px 11px; border-radius: var(--radius-pill); background: var(--c-surface-2); color: var(--c-text-soft); border: 1px solid var(--c-border-2); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .12s ease, color .12s ease, border-color .12s ease; } .sortbar .sortbtn:hover { border-color: var(--c-ok); color: var(--c-text); text-decoration: none; } .sortbar .sortbtn.is-active { background: var(--c-ok); border-color: var(--c-ok); color: #fff; font-weight: var(--fw-medium); } .sortbar .sortbtn.is-active:hover { color: #fff; } .sortbar .sortbtn.is-disabled { opacity: .45; cursor: default; pointer-events: none; } /* ============================ Notices / Status ============================ */ .notice { background: var(--c-warn-bg); color: var(--c-text); border-radius: var(--radius-sm); padding: var(--sp-3); } .notice-l { background: var(--c-warn-bg); color: var(--c-text); border-radius: var(--radius-sm); padding: var(--sp-3); } .notice-2 { background: var(--c-ok-bg); color: var(--c-text); border-radius: var(--radius-sm); padding: var(--sp-3); } .infobox { background: var(--c-surface-2); border: 0; border-radius: var(--radius-sm); padding: var(--sp-3); color: var(--c-text); } .errmsg { background: var(--c-err-bg); border: 1px solid var(--c-err); color: var(--c-err); border-radius: var(--radius-sm); padding: var(--sp-4); margin: var(--sp-3) 0; } div.messages { background: var(--c-ok-bg); border: 1px solid var(--c-ok); color: var(--c-text); border-radius: var(--radius-sm); } div.errors { background: var(--c-err-bg); border: 1px solid var(--c-err); color: var(--c-text); border-radius: var(--radius-sm); } /* ============================ Header (sticky, modern, Flat) ============================ */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--c-user-headerfooter, var(--c-headerfooter)); border-bottom: 1px solid rgba(255,255,255,.10); } .site-header__bar { display: flex; align-items: center; gap: var(--sp-4); max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-4); min-height: 62px; } /* Wortmarke statt Logo */ .brand { display: inline-flex; flex-direction: column; justify-content: center; flex: 0 0 auto; line-height: 1; } .brand:hover { text-decoration: none; } .brand__name { font-size: 1.55rem; font-weight: var(--fw-bold); color: #fff; letter-spacing: -.01em; } .brand__tag { font-size: .66rem; font-weight: var(--fw-medium); color: var(--c-on-header); opacity: .8; letter-spacing: .08em; text-transform: uppercase; margin-top: 3px; } .main-nav { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; } .nav-link { display: inline-flex; align-items: center; justify-content: center; height: 36px; margin: 0; float: none; line-height: 1; /* Alt-Klassen .In/.Out aus layout.css neutralisieren (margin-top/float) */ color: #fff; font-weight: var(--fw-medium); font-size: .92rem; padding: 0 16px; border: 0; border-radius: var(--radius-sm); white-space: nowrap; background: var(--c-headerbtn); transition: background .12s ease; } .nav-link:hover { color: #fff; background: var(--c-headerbtn-hover); } .nav-link.In { background: #fff; color: var(--brand-700); } /* aktiver Menüpunkt: weiß + unser Blau */ .nav-search { display: flex; align-items: center; gap: 6px; flex: 0 1 auto; margin: 0; } .nav-search__field { width: 180px; max-width: 42vw; height: 36px; padding: 6px 10px; border: 1px solid transparent; border-radius: var(--radius-sm); background: rgba(255,255,255,.96); color: #1b2735; font-size: .9rem; } .nav-search__mode { height: 36px; border: 1px solid transparent; border-radius: var(--radius-sm); background: rgba(255,255,255,.96); color: #1b2735; font-size: .85rem; padding: 0 6px; } .nav-search__field:focus, .nav-search__mode:focus { outline: none; box-shadow: var(--ring); } .nav-search__btn.search_lupe { width: 38px; height: 36px; padding: 0; border: 0; cursor: pointer; flex: 0 0 auto; border-radius: var(--radius-sm); background-color: var(--c-headerbtn); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 18px 18px; transition: background-color .12s ease; } .nav-search__btn.search_lupe:hover { background-color: var(--c-headerbtn-hover); } .user-menu { display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; } .user-menu__profile { display: inline-flex; align-items: center; height: 36px; color: #fff; font-weight: var(--fw-bold); white-space: nowrap; } .user-menu__link { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 14px; color: #fff; font-size: .9rem; font-weight: var(--fw-medium); background: var(--c-headerbtn); border-radius: var(--radius-sm); white-space: nowrap; } .user-menu__link:hover { color: #fff; background: var(--c-headerbtn-hover); } .user-menu .badge { display: inline-block; min-width: 18px; padding: 1px 6px; margin-left: 3px; background: var(--c-accent); color: #fff; border-radius: var(--radius-pill); font-size: .72rem; font-weight: var(--fw-bold); text-align: center; line-height: 1.4; } /* CSS-only Burger — nur Mobile sichtbar (siehe Responsive) */ .nav-burger { display: none; flex: 0 0 auto; cursor: pointer; padding: 8px; border-radius: var(--radius-sm); } .nav-burger span { display: block; width: 24px; height: 2px; margin: 4px 0; background: var(--c-on-header); border-radius: 2px; transition: .2s; } .nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; } .nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* Header-Buttons 50% transparent (nur Hintergrund, Text/Icon bleibt voll sichtbar) */ .site-header .nav-link, .site-header .user-menu__link, .site-header .nav-search__btn.search_lupe { background-color: rgba(52, 80, 126, .5); } .site-header .nav-link.In { background-color: rgba(255, 255, 255, .5); } /* aktiver Button: weiß, 50% */ .site-header .nav-link:hover, .site-header .user-menu__link:hover, .site-header .nav-search__btn.search_lupe:hover { background-color: rgba(65, 97, 143, .65); } /* topnavi Info-Leiste */ .hg_box { background: var(--c-user-infobox, var(--c-surface-2)); border: 0; border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); margin: var(--sp-3) auto; font-size: .9rem; color: var(--c-text-soft); } /* ============================ Footer ============================ */ #footer { background: var(--c-user-headerfooter, var(--c-headerfooter)); color: var(--c-on-header); margin: var(--sp-8) 0 0; padding: var(--sp-5) var(--sp-4); font-size: .88rem; } #footer .footer-inner { max-width: var(--maxw); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); } .footer-links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: center; } .footer-sep { opacity: .4; } .footer-copy { color: var(--c-on-header); opacity: .85; } #footer a { color: var(--c-on-header); text-decoration: none; } #footer a:hover { color: #fff; text-decoration: underline; } /* ============================ Bilder / Galerie ============================ */ .prev_imgth, .prev_imgth2 { border: 1px solid var(--c-border) !important; border-radius: var(--radius-sm); overflow: hidden; } .prev_imgth:hover, .prev_imgth2:hover { border-color: var(--c-accent) !important; } /* ============================ Startseite ============================ */ .hp-hero { margin-bottom: var(--sp-5); } .hp-hero .h1 { font-size: var(--fs-h1); } .hp-usp { list-style: none; padding: 0; margin: 0 0 var(--sp-4); display: grid; gap: var(--sp-2); } .hp-usp li { position: relative; padding-left: 24px; color: var(--c-text-soft); } .hp-usp li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--c-check); font-weight: var(--fw-bold); } .hp-cta { font-size: 1rem; } .hp-section { margin-bottom: var(--sp-5); } .hp-list { list-style: none; padding: 0; margin: 0; } .hp-list li { padding: 8px 0; border-bottom: var(--line); font-size: .95rem; } .hp-list li:last-child { border-bottom: 0; } .hp-date { color: var(--c-text-mute); font-variant-numeric: tabular-nums; margin-right: 6px; font-size: .85rem; } .hp-loginbox { margin-bottom: var(--sp-4); } .hp-loginbox form { display: grid; gap: var(--sp-2); } .hp-loginbox input[type="text"], .hp-loginbox input[type="password"] { width: 100%; } .hp-remember { display: flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--c-text-soft); } .hp-remember input { width: auto; } .hp-activeusers { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sp-4); } .hp-avatar img { display: block; width: 38px; height: 38px; border-radius: var(--radius-sm); object-fit: cover; } .hp-avatar { line-height: 0; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--c-border); } .hp-avatar:hover { border-color: var(--c-accent); } /* ============================ Diverse ============================ */ hr { border: 0; border-top: var(--line); margin: var(--sp-4) 0; } table.content, .test-data table { border-radius: var(--radius-sm); overflow: hidden; } /* ============================ Account-Bereich ============================ */ .account-nav { display: flex; flex-direction: column; gap: var(--sp-4); } .account-nav__group { display: flex; flex-direction: column; gap: 1px; } .account-nav__title { font-size: .72rem; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .05em; color: var(--c-text-mute); margin: 0 0 var(--sp-1); } .account-nav__item { display: block; padding: 7px 10px; border-radius: var(--radius-sm); color: var(--c-link); font-size: .92rem; line-height: 1.3; } .account-nav__item:hover { background: var(--c-surface-2); color: var(--c-accent); text-decoration: none; } .account-nav__item.is-active { background: var(--c-chip-bg); color: var(--brand-700); font-weight: var(--fw-medium); box-shadow: inset 3px 0 0 var(--c-primary-2); } /* Account-Formulare: label/input-Tabellen -> saubere Reihen, moderne Felder */ .account-page .inhalt_links { max-width: 660px; } .account-page .inhalt_links form table { width: 100%; border-collapse: collapse; } .account-page .inhalt_links form td { padding: 6px 8px 6px 0; vertical-align: middle; } .account-page .inhalt_links form tr > td:first-child { color: var(--c-text-soft); white-space: nowrap; width: 1%; padding-right: var(--sp-4); } .account-page .inhalt_links input:not([type]), .account-page .inhalt_links input[type="text"], .account-page .inhalt_links input[type="password"], .account-page .inhalt_links input[type="email"], .account-page .inhalt_links input[type="number"], .account-page .inhalt_links input[type="url"], .account-page .inhalt_links select, .account-page .inhalt_links textarea { width: 100%; max-width: 340px; font: inherit; padding: 8px 10px; border: 1px solid var(--c-border-2); border-radius: var(--radius-sm); background: var(--c-surface); color: var(--c-text); box-sizing: border-box; } .account-page .inhalt_links input:focus, .account-page .inhalt_links select:focus, .account-page .inhalt_links textarea:focus { outline: none; border-color: var(--c-primary-2); box-shadow: var(--ring); } .account-page .inhalt_links input[type="submit"], .account-page .inhalt_links button { margin-top: var(--sp-3); } @media (max-width: 640px) { .account-page .inhalt_links form td { display: block; width: auto !important; padding: 2px 0; } .account-page .inhalt_links form tr > td:first-child { padding-right: 0; padding-top: var(--sp-2); } .account-page .inhalt_links input:not([type]), .account-page .inhalt_links input[type="text"], .account-page .inhalt_links input[type="password"], .account-page .inhalt_links input[type="email"], .account-page .inhalt_links select, .account-page .inhalt_links textarea { max-width: 100%; } } /* ============================ Eintrag hinzufügen/bearbeiten (/archive/add) ============================ */ /* Fokussiertes, ZENTRIERTES Formular — keine News-Sidebar, nicht rechtsbündig */ .addevent-page .td_center, .addevent-page .td_right { display: none !important; } .addevent-page .tab_haupt { padding: var(--sp-5) var(--sp-4); } .addevent-page .tab_haupt > tbody > tr { display: block; } .addevent-page .td_left, .addevent-page .td_left_addedit { flex: none !important; width: 100% !important; max-width: 760px !important; margin: 0 auto !important; float: none !important; } .addevent-page #b_title { width: 100% !important; max-width: 100%; box-sizing: border-box; } .addevent-page #b_comm { width: 100% !important; max-width: 100%; box-sizing: border-box; min-height: 200px; border: 1px solid var(--c-border-2); border-radius: var(--radius); resize: vertical; /* plain Textarea ziehbar; TinyMCE hat eigenen Resize-Griff */ } .addevent-page input[type="text"], .addevent-page select, .addevent-page textarea { max-width: 100%; box-sizing: border-box; } /* Zeit-Controls sauber auf EINER Zeile (KEIN display-!important, sonst kann das +/- die Felder nicht per display:none aus-/einblenden). */ .addevent-page #t_year, .addevent-page #t_month, .addevent-page #t_day, .addevent-page #t_hour, .addevent-page #t_minute { vertical-align: middle; width: auto !important; margin: 0 5px 6px 0; } .addevent-page #t_year { width: 64px !important; } /* Direkteingabe, gleiche Optik/Größe wie die Selects */ .addevent-page #live_word { margin-left: 6px; color: var(--c-text-soft); } /* großes, sauberes Live-Datum/-Zeit-Label */ .addevent-page .live-clock { font-size: 1.3rem; font-weight: var(--fw-medium); color: var(--c-text); font-variant-numeric: tabular-nums; letter-spacing: .01em; } .addevent-page .time-inputs { display: inline-block; } .addevent-page .time-inputs select { vertical-align: middle; } /* +/- Genauigkeits-Buttons als saubere runde Buttons */ .addevent-page #pos_adder, .addevent-page #pos_deadder { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--radius-pill); background: var(--c-chip-bg); margin: 0 2px; vertical-align: middle; cursor: pointer; } .addevent-page #pos_adder:hover, .addevent-page #pos_deadder:hover { background: var(--c-primary-2); } .addevent-page #pos_adder img, .addevent-page #pos_deadder img { display: block; } .addevent-page #edit_atime_div, .addevent-page #edit_ctime_div { margin-top: 6px; } .addevent-page #edit_atime_div a, .addevent-page #edit_ctime_div a { font-weight: var(--fw-medium); } /* NUR die Haupt-Formular-Tabelle stapeln (Label/Titel ÜBER dem Feld) — über die eigene Klasse + DIREKTE Kind-Selektoren, damit TinyMCEs interne und andere verschachtelte Tabellen NICHT betroffen sind. */ .addevent-page .addform-grid, .addevent-page .addform-grid > tbody { display: block; width: 100%; max-width: 100%; } .addevent-page .addform-grid > tbody > tr { display: block; margin-bottom: 12px; } .addevent-page .addform-grid > tbody > tr > td { display: block; width: 100% !important; padding: 0; vertical-align: top; } .addevent-page .addform-grid > tbody > tr > td:first-child { font-weight: var(--fw-medium); color: var(--c-text); padding: 0 0 4px; } .addevent-page .addform-grid > tbody > tr > td:first-child:empty { display: none; } /* TinyMCE nur auf volle Breite bringen — Innenleben NICHT anfassen */ .addevent-page .mceEditor, .addevent-page table.mceLayout, .addevent-page .mce-tinymce, .addevent-page .tox-tinymce { width: 100% !important; max-width: 100% !important; } /* HTML5-Bildupload sauber */ .addevent-page #file, .addevent-page input[type="file"] { display: inline-block; padding: 9px 12px; border: 1px dashed var(--c-border-2); border-radius: var(--radius-sm); background: var(--c-surface-2); cursor: pointer; max-width: 100%; } #uploaded { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } #uploaded img { border-radius: var(--radius-sm); max-width: 100%; height: auto; } /* Zusatz-Optionen (Tags / Photos / Video) als klickbare Chips statt Pfeil-Links */ .addevent-page .links_umenue { display: inline-block; margin: 0 6px 6px 0; padding: 6px 14px; background: var(--c-chip-bg) !important; color: var(--c-chip-text) !important; border-radius: var(--radius-pill); background-image: none !important; padding-left: 14px !important; } .addevent-page .links_umenue:hover { background: var(--c-primary-2) !important; color: #fff !important; text-decoration: none; } .addevent-page .links_umenue strong { font-weight: var(--fw-medium); } .addevent-page .optbox { margin-top: var(--sp-2); } /* Speichern-Button prominent & klar */ .addevent-page #event-save { background: var(--c-buttons); color: #fff; font-size: 1rem; font-weight: var(--fw-medium); padding: 11px 24px; border: 0; border-radius: var(--radius-sm); cursor: pointer; margin-top: var(--sp-2); } .addevent-page #event-save:hover { filter: brightness(1.07); } /* ============================ Responsive ============================ */ @media (max-width: 900px) { .tab_haupt > tbody > tr { flex-direction: column; } .td_left, .td_right, .td_left_addedit { flex: 1 1 100%; max-width: 100% !important; } .tab_haupt { padding: var(--sp-4) var(--sp-3); } } /* Header-Collapse (Burger) auf schmaleren Screens */ @media (max-width: 820px) { .site-header__bar { flex-wrap: wrap; gap: var(--sp-2); padding: 0 var(--sp-3); } .nav-burger { display: block; margin-left: auto; } .main-nav, .nav-search, .user-menu { display: none; flex-basis: 100%; } .nav-toggle:checked ~ .main-nav, .nav-toggle:checked ~ .nav-search, .nav-toggle:checked ~ .user-menu { display: flex; flex-wrap: wrap; padding-bottom: var(--sp-2); } .main-nav { flex-direction: column; align-items: stretch; gap: 2px; } .nav-link { padding: 12px; } .nav-search { gap: 6px; } .nav-search__field { flex: 1; width: auto; max-width: none; } .user-menu { flex-wrap: wrap; gap: var(--sp-2); padding-bottom: var(--sp-2); } } /* Feste px-Inline-Breiten (Legacy-Markup) mobil fluid machen — modulübergreifend */ @media (max-width: 760px) { [style*="width:3"], [style*="width: 3"], [style*="width:4"], [style*="width: 4"], [style*="width:5"], [style*="width: 5"], [style*="width:6"], [style*="width: 6"], [style*="width:7"], [style*="width: 7"], [style*="width:8"], [style*="width: 8"], [style*="width:9"], [style*="width: 9"] { max-width: 100% !important; } img[width] { max-width: 100%; height: auto; } .vbreite, .hg_box, .settings, .col1, .col2 { width: auto !important; float: none; max-width: 100%; } } @media (max-width: 640px) { :root { --fs-base: 16px; } .tab_haupt { padding: var(--sp-3) var(--sp-2); } .td_left, .td_right, .td_left_addedit { padding: var(--sp-3); } #footer .footer-inner { flex-direction: column; align-items: flex-start; } } @media print { .site-header, .hg_box, #footer, form { display: none !important; } body { background: #fff !important; color: #000 !important; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* Saubere Kommentar-Zeilen (Sidebar /archive/ + Profil in/out) statt Plain-Text */ .opt-comment { display: block; padding: 8px 0; border-bottom: 1px solid var(--c-border); text-decoration: none; line-height: 1.4; } .opt-comment:last-child { border-bottom: 0; } .opt-comment__date { display: block; font-size: .78em; color: var(--c-text-mute); margin-bottom: 2px; } .opt-comment__text { display: block; color: var(--c-text); } .opt-comment:hover .opt-comment__text { color: var(--c-link); } /* Profil-Sidebar: Vorschau-Avatare (gleiche Größe) + großes User-Bild abgerundet */ #opt_friendsbox_images img, #opt_followers_images img, #opt_readers img { border-radius: var(--radius-sm); vertical-align: middle; } .profil-userimg { border-radius: var(--radius); } /* User-Autocomplete (Nachrichten „An"-Feld) */ .user-ac { position: absolute; z-index: 60; background: var(--c-surface, #fff); border: 1px solid var(--c-border); border-radius: var(--radius-sm); box-shadow: 0 4px 14px rgba(0,0,0,.12); max-height: 240px; overflow-y: auto; } .user-ac__item { padding: 6px 12px; cursor: pointer; white-space: nowrap; color: var(--c-text); } .user-ac__item:hover { background: var(--c-primary-2); color: #fff; } /* Nachrichten-Formular (An/Titel/Nachricht) — sauber gestapelt, klare Abstände */ .pm-form { max-width: 560px; } .pm-form__label { display: block; font-weight: var(--fw-medium); color: var(--c-user-text, var(--c-text)); margin: var(--sp-3) 0 var(--sp-1); } .pm-form__label:first-child { margin-top: 0; } .pm-form__input { width: 100%; } .pm-form__textarea { min-height: 170px; resize: vertical; } .pm-form__actions { margin-top: var(--sp-4); } /* /archive/add: Zeit-Umschalter (Live ⇄ Zeitpunkt ändern) */ .addevent-page .time-toggle { margin-top: 6px; font-size: .9em; } .addevent-page .time-inputs.time-live select, .addevent-page .time-inputs.time-live input { opacity: .9; } /* Datums-Tag-Matrix: Spalten Jahr / Monat / Tag eng nebeneinander in EINER Zeile. Geerbtes Padding/Hintergrund von ".box_tags div" entfernen (frisst sonst Breite). */ .time-matrix { display: flex !important; gap: 10px; flex-wrap: nowrap; align-items: flex-start; padding: 0 !important; background: none !important; } .time-matrix > .box_tags2 { float: none; flex: 0 1 auto; min-width: 0; padding: 0 !important; background: none !important; line-height: 1.35; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; } .time-matrix > .box_tags2 b u { white-space: nowrap; } /* leere +/- Platzhalter-Spans +
raus: Flex-Spalte stapelt die Chips selbst */ .time-matrix > .box_tags2 br, .time-matrix > .box_tags2 span.plusminus { display: none; } .time-matrix .plusminus { padding: 0 1px; font-weight: normal; white-space: nowrap; } /* Wort-Tags in der Liste ebenfalls nicht fett */ .plusminus_word .plusminus, .plusminus_word a { font-weight: normal; } /* Zeit- + Wort-Tags als kleine Buttons: halbtransparent weiß, runde Ecken, knapp um den Text */ .time-matrix a.plusminus, .plusminus_word a.plusminus { display: inline-block; background: rgba(255, 255, 255, .5); color: #283e64; border-radius: var(--radius-sm); padding: 0 6px; margin: 1px 0; font-weight: normal; line-height: 1.6; text-decoration: none; } .time-matrix a.plusminus { text-align: center; } .time-matrix a.plusminus:hover, .plusminus_word a.plusminus:hover { background: rgba(255, 255, 255, .85); color: #283e64; }