/* tagtt.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: var(--line); 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: var(--line); 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; } .entry { font-size: var(--fs-entry); line-height: 1.6; min-height: 0; height: auto !important; } .comment_text { font-size: var(--fs-comment); } .text_big { font-size: var(--fs-detail); } .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: var(--line); 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: 1px solid var(--c-border); 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); } /* ============================ 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); } .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-user-buttons, var(--c-buttons)); 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); } /* ============================ 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: var(--line); 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-3); max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-4); min-height: var(--header-h); } .brand { display: inline-flex; align-items: center; flex: 0 0 auto; } .brand__logo { height: 30px; width: auto; filter: brightness(0) invert(1); } .main-nav { display: flex; align-items: center; gap: 2px; flex: 1 1 auto; } .nav-link { color: var(--c-on-header); font-weight: var(--fw-medium); font-size: .95rem; padding: 8px 12px; border-radius: var(--radius-sm); line-height: 1; white-space: nowrap; } .nav-link:hover { color: #fff; background: rgba(255,255,255,.10); } .nav-link.In { color: #fff; background: rgba(255,255,255,.18); } /* aktiver Menüpunkt */ .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: var(--c-accent) center / 18px 18px no-repeat url(/images/lupe.gif); } .user-menu { display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; } .user-menu__profile { color: #fff; font-weight: var(--fw-bold); white-space: nowrap; } .user-menu__link { color: var(--c-on-header); font-size: .9rem; padding: 6px 8px; border-radius: var(--radius-sm); white-space: nowrap; } .user-menu__link:hover { color: #fff; background: rgba(255,255,255,.10); } .user-menu__link.btn { background: var(--c-accent); color: #fff; padding: 7px 14px; } .user-menu__link.btn:hover { filter: brightness(1.06); color: #fff; } .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); } /* topnavi Info-Leiste */ .hg_box { background: var(--c-user-infobox, var(--c-surface-2)); border: var(--line); 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-accent); 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: 34px; height: 34px; 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: var(--line); border-radius: var(--radius-sm); overflow: hidden; } /* ============================ 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; } }