/* style.css (modular, layered) – Core + Module-Imports */ @layer reset, base, modules.grid, modules.contact, modules.guestbook; /* Module importieren (eigene Layers) */ @import url('./grid.css') layer(modules.grid); @import url('./contactform.css') layer(modules.contact); @import url('./guestbook.css') layer(modules.guestbook); /* Core in @layer base gekapselt, damit Module gezielt übersteuern können */ @layer base { /* template/aurelia/css/style.css */ /* ==================================================================== ZENTRALE DESIGN-KONFIGURATION (alle Optionen hier anpassen) -------------------------------------------------------------------- ▸ Content-Breite --content-max-w: (fluid; z.B. 1140px, 1280px) --content-fixed-w: (fixed; z.B. 1200px) ► FIXED-BREITE aktivieren (optional, inline auf ): ← ohne/mit Leerzeichen erlaubt ▸ Content-Höhe --content-min-h: (auto; z.B. 60vh, 70vh) --content-fixed-h: (fixed; z.B. 900px) ► FIXED-HÖHE aktivieren (optional, inline auf ): ← ohne/mit Leerzeichen erlaubt ▸ Navigations-Layout (empfohlen im -Tag setzen) --nav-justify: flex-start|center|flex-end (Ausrichtung für top/bottom) --nav-gap: (Abstand zwischen Items) ► NAV innerhalb der Content-Breite einsperren (nur top/bottom, optional): ▸ Hamburger-Position (nur Mobile) ► Alternativ per CSS-Variablen (fein): --toggle-left|--toggle-right|--toggle-top|--toggle-bottom (Längen), --toggle-tx|--toggle-ty (Übersetzung, z.B. -50%) ▸ Sidebar-Breite (Desktop, left/right) --sidebar-w: 280px (260px Sidebar + 20px Puffer) ► Content/Breadcrumbs bleiben zentriert; Abstand innen via Padding. ▸ Bereichs-Hintergründe (optional) --area-header-bg / --area-header-img / --area-header-size / --area-header-pos --area-nav-bg / --area-nav-img / --area-nav-size / --area-nav-pos --area-main-bg / --area-main-img / --area-main-size / --area-main-pos --area-footer-bg / --area-footer-img / --area-footer-size / --area-footer-pos ==================================================================== */ :root{ /* Farben (Light) */ --bg:#ffffff; --fg:#0f172a; --muted:#475569; --surface:#f8fafc; --border:#e2e8f0; --brand:#1d4ed8; --brand-600:#1e40af; --brand-700:#172554; /* Alerts & Badges (Light) */ --ok:#15803d; --ok-ink:#052e16; --warn:#f5be00; --warn-ink:#451a03; --err:#b91c1c; --err-ink:#450a0a; --info:#0ea5e9; --info-ink:#082f49; /* Typografie & Maße */ --font:16px/1.65 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; --radius:12px; /* Content-Breite/Höhe (Default) */ --content-max-w:1140px; /* z.B. 960|1140|1280|1440px */ --content-fixed-w:1200px; /* feste Breite, wenn Flag aktiv */ --content-min-h:60vh; /* Mindesthöhe (auto) */ --content-fixed-h:900px; /* feste Höhe, wenn Flag aktiv */ /* Header/Offsets */ --header-h:64px; /* Navigation (top/bottom) */ --nav-justify:center; /* flex-start | center | flex-end */ --nav-gap:.5rem; /* .25rem | .5rem | 1rem */ /* Sidebar (Desktop) */ --sidebar-w: 280px; /* 260px + Puffer */ /* Bereichs-Hintergründe */ --area-header-bg: var(--bg); --area-header-img:none; --area-header-size:cover; --area-header-pos:center; --area-nav-bg: var(--bg); --area-nav-img:none; --area-nav-size:cover; --area-nav-pos:center; --area-main-bg: var(--bg); --area-main-img:none; --area-main-size:cover; --area-main-pos:center; --area-footer-bg: var(--bg); --area-footer-img:none; --area-footer-size:cover;--area-footer-pos:center; /* Hamburger (CSS-Alternative zu data-toggle-*) */ --toggle-left:auto; --toggle-right:.75rem; --toggle-top:.5rem; --toggle-bottom:auto; --toggle-tx:0; --toggle-ty:0; --toggle-border:0px; } /* Dark-Mode (Kontrast) */ :root[data-theme="dark"]{ --bg:#0b1220; --fg:#e6edf3; --muted:#aab4c0; --surface:#0f172a; --border:#1f2937; --brand:#9bb8ff; --brand-600:#b8c9ff; --brand-700:#d4e0ff; --ok:#34d399; --ok-ink:#052e16; --warn:#f5be00; --warn-ink:#3f1f05; --err:#f87171; --err-ink:#450a0a; --info:#60a5fa; --info-ink:#0b2742; } @media (prefers-color-scheme: dark){ :root:not([data-theme]){ --bg:#0b1220; --fg:#e6edf3; --muted:#aab4c0; --surface:#0f172a; --border:#1f2937; --brand:#9bb8ff; --brand-600:#b8c9ff; --brand-700:#d4e0ff; --ok:#34d399; --ok-ink:#052e16; --warn:#f5be00; --warn-ink:#3f1f05; --err:#f87171; --err-ink:#450a0a; --info:#60a5fa; --info-ink:#0b2742; } } /* ====== Basis ====== */ *{box-sizing:border-box} html,body{height:100%} body{margin:0;background:var(--bg);color:var(--fg);font:var(--font)} a{color:var(--brand);text-decoration:underline;text-underline-offset:2px} a:hover{color:var(--brand-600)} img,svg{max-width:100%;height:auto} /* Content-Breite: fluid (Default) */ .container{width:min(var(--content-max-w), 92%);margin-inline:auto} /* ► Content-Breite FIXED (robust; matcht mit/ohne Leerzeichen im style-Attribut) */ :root[style*="--content-use-fixed:1"] .container, :root[style*="--content-use-fixed: 1"] .container{ width:var(--content-fixed-w); } /* Content-Höhe: auto (Default) */ main{ padding:1.25rem 0;min-height:var(--content-min-h); background:var(--area-main-bg);background-image:var(--area-main-img); background-size:var(--area-main-size);background-position:var(--area-main-pos) } /* ► Content-Höhe FIXED (robust; matcht mit/ohne Leerzeichen) */ :root[style*="--content-use-fixed-h:1"] main, :root[style*="--content-use-fixed-h: 1"] main{ min-height:initial;height:var(--content-fixed-h) } .skiplink{position:absolute;left:-9999px} .skiplink:focus{left:8px;top:8px;background:#fff8;border:1px solid var(--border);backdrop-filter:blur(6px);padding:.5rem .75rem;border-radius:8px} /* ====== Header ====== */ /* Grid-Areas: 'top' → NAV über der BAR, 'bottom' → NAV unter der BAR */ .site-header{ position:sticky;top:0;z-index:50; display:grid;grid-template-areas:"bar" "nav"; border-bottom:1px solid var(--border); background:var(--area-header-bg);background-image:var(--area-header-img); background-size:var(--area-header-size);background-position:var(--area-header-pos) } html[data-nav="top"] .site-header{ grid-template-areas:"nav" "bar"; } .header-bar{grid-area:bar;display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-height:var(--header-h);position:relative} .navigation{grid-area:nav} .brand .logo{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;color:inherit;font-weight:700} /* Hamburger-Button */ .menu-toggle{ appearance:none; border: var(--toggle-border, 1px solid var(--border)); background: var(--toggle-bg, var(--surface)); color: var(--toggle-fg, inherit); border-radius: var(--toggle-radius, 10px); padding: var(--toggle-pad-y, .45rem) var(--toggle-pad-x, .6rem); display:inline-flex;align-items:center;justify-content:center; box-shadow: var(--toggle-shadow, none); z-index: var(--toggle-z, 80); } .menu-toggle .burger{ display:inline-block; width: var(--toggle-icon-w, 18px); height: var(--toggle-icon-h, 2px); background: currentColor; position:relative; } .menu-toggle .burger:before, .menu-toggle .burger:after{ content:""; position:absolute;left:0; width: var(--toggle-icon-w, 18px); height: var(--toggle-icon-h, 2px); background: currentColor; } .menu-toggle .burger:before{ top: calc(-1 * var(--toggle-gap, 6px)); } .menu-toggle .burger:after { top: var(--toggle-gap, 6px); } /* ► Mobile: Burger per Variablen positionieren (keine direkten top/bottom Overrides) */ @media (max-width: 959.98px){ .header-bar{ position:relative; } .menu-toggle{ position:absolute; left: var(--toggle-left); right: var(--toggle-right); top: var(--toggle-top); bottom: var(--toggle-bottom); transform: translate(var(--toggle-tx), var(--toggle-ty)); } /* X-Achse */ html[data-toggle-x="left"]{ --toggle-left: .75rem; --toggle-right: auto; --toggle-tx: 0; } html[data-toggle-x="center"]{ --toggle-left: 50%; --toggle-right: auto; --toggle-tx: -50%; } html[data-toggle-x="right"]{ --toggle-left: auto; --toggle-right: .25rem; --toggle-tx: 0; } /* Y-Achse */ html[data-toggle-y="top"]{ --toggle-top: 4.9rem; --toggle-bottom: auto; --toggle-ty: 0; } html[data-toggle-y="middle"]{ --toggle-top: 50%; --toggle-bottom: auto; --toggle-ty: -50%; } html[data-toggle-y="bottom"]{ --toggle-top: auto; --toggle-bottom: .5rem; --toggle-ty: 0; } } /* ► Desktop: Toggle ausblenden (top/bottom & left/right) */ @media (min-width: 960px){ html[data-nav="top"] .menu-toggle, html[data-nav="bottom"] .menu-toggle, html[data-nav="left"] .menu-toggle, html[data-nav="right"] .menu-toggle{ display:none } } /* Theme-Toggle */ .theme-toggle{border:1px solid var(--border);background:var(--surface);color:inherit;border-radius:10px;padding:.45rem .6rem} /* ====== Navigation ====== */ .nav{ /* Position (über/unter) via Grid-Area, s.o. */ border-bottom:1px solid var(--border); background:var(--area-nav-bg);background-image:var(--area-nav-img); background-size:var(--area-nav-size);background-position:var(--area-nav-pos) } .nav ul{display:flex;flex-wrap:wrap;gap:var(--nav-gap);list-style:none;margin:0;padding:.5rem 0;justify-content:var(--nav-justify)} .nav a{display:block;padding:.5rem .7rem;border-radius:10px;text-decoration:none;color:inherit} .nav a:hover{background:color-mix(in oklab, var(--surface), var(--brand) 10%)} .nav a.active,[aria-current="page"],.nav li.current > a,.navigation li.current > a{background:var(--surface);font-weight:600} /* ► TOP/BOTTOM Linie */ html[data-nav="bottom"] .nav{border-top:1px solid var(--border);border-bottom:none} /* ► Optional: NAV innerhalb der Content-Breite einsperren (nur top/bottom) Aktivieren via */ :root[style*="--nav-contained:1"] html[data-nav="top"] .nav > ul, :root[style*="--nav-contained: 1"] html[data-nav="top"] .nav > ul, :root[style*="--nav-contained:1"] html[data-nav="bottom"] .nav > ul, :root[style*="--nav-contained: 1"] html[data-nav="bottom"] .nav > ul{ width:min(var(--content-max-w), 92%); margin-inline:auto; padding-inline:.5rem; } /* in Kombination mit FIXED-BREITE */ :root[style*="--nav-contained:1"][style*="--content-use-fixed:1"] html[data-nav="top"] .nav > ul, :root[style*="--nav-contained: 1"][style*="--content-use-fixed: 1"] html[data-nav="top"] .nav > ul, :root[style*="--nav-contained:1"][style*="--content-use-fixed:1"] html[data-nav="bottom"] .nav > ul, :root[style*="--nav-contained: 1"][style*="--content-use-fixed: 1"] html[data-nav="bottom"] .nav > ul{ width:var(--content-fixed-w); } /* ► LEFT/RIGHT – vertikale Sidebar (Desktop) */ @media (min-width: 960px){ html[data-nav="left"] .nav, html[data-nav="right"] .nav{ position:fixed;top:var(--header-h);bottom:0;overflow:auto;background:var(--surface); border-right:1px solid var(--border);width:260px;padding:.25rem .5rem;z-index:45 } html[data-nav="right"] .nav{right:0;left:auto;border-left:1px solid var(--border);border-right:none} html[data-nav="left"] .nav{left:0} /* ALT (verschiebt Container; deaktivieren) */ /* html[data-nav="left"] main.container{margin-left:280px} html[data-nav="right"] main.container{margin-right:280px} html[data-nav="left"] .breadcrumbs .container{margin-left:280px} html[data-nav="right"] .breadcrumbs .container{margin-right:280px} */ /* NEU: Content/Breadcrumbs zentriert lassen; Abstand innen per Padding */ html[data-nav="left"] main.container, html[data-nav="right"] main.container, html[data-nav="left"] .breadcrumbs .container, html[data-nav="right"] .breadcrumbs .container{ margin-left:auto;margin-right:auto; } html[data-nav="left"] main.container{ padding-left: var(--sidebar-w); } html[data-nav="right"] main.container{ padding-right: var(--sidebar-w); } html[data-nav="left"] .breadcrumbs .container{ padding-left: var(--sidebar-w); } html[data-nav="right"] .breadcrumbs .container{ padding-right: var(--sidebar-w); } /* Vertikale Liste in der Sidebar */ html[data-nav="left"] .nav ul, html[data-nav="right"] .nav ul{flex-direction:column;justify-content:flex-start} } /* ► Sichtbarkeit & Overlay (Mobile) – Menü als Overlay, Content bleibt stehen */ @media (max-width: 959.98px){ html[data-nav="top"] .navigation, html[data-nav="bottom"] .navigation, html[data-nav="left"] .navigation, html[data-nav="right"] .navigation{ position: fixed; left:0; right:0; top: var(--header-h); /* unter der Header-Bar */ max-height: calc(100dvh - var(--header-h)); /* Scroll im Menü */ overflow:auto; z-index:60; background: var(--area-nav-bg); background-image: var(--area-nav-img); background-size: var(--area-nav-size); background-position: var(--area-nav-pos); border-bottom:1px solid var(--border); display:block; transform: translateY(-16px); opacity:0; pointer-events:none; visibility:hidden; transition: transform .24s ease, opacity .20s ease, visibility 0s linear .24s; } html[data-nav="top"] .navigation.open, html[data-nav="bottom"] .navigation.open, html[data-nav="left"] .navigation.open, html[data-nav="right"] .navigation.open{ transform:none; opacity:1; pointer-events:auto; visibility:visible; transition: transform .24s ease, opacity .20s ease, visibility 0s; } .navigation ul{ display:flex; flex-direction:column; align-items: var(--nav-mobile-align, flex-start); gap:var(--nav-gap); margin:0; padding:.5rem 1rem; list-style:none; } } /* ====== Breadcrumbs ====== */ .breadcrumbs{border-bottom:1px dashed var(--border);background:var(--surface)} .breadcrumbs ol{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0;padding:.6rem 0} .breadcrumbs li+li:before{content:"›";margin:0 .25rem;color:var(--muted)} /* ====== Prose ====== */ .prose h1,.prose h2,.prose h3{line-height:1.25} .prose h1{font-size:clamp(1.8rem,3.5vw,2.4rem);margin:.2rem 0 .6rem} .prose h2{font-size:clamp(1.35rem,2.5vw,1.8rem);margin:1.3rem 0 .5rem} .prose h3{font-size:clamp(1.1rem,1.7vw,1.25rem);margin:1rem 0 .4rem} .prose p{margin:.7rem 0} .prose blockquote{border-left:4px solid var(--brand);padding:.35rem .75rem;margin:1rem 0;background:color-mix(in oklab, var(--surface), var(--brand) 12%)} hr{border:0;border-top:1px solid var(--border);margin:1.25rem 0} /* ====== Buttons ====== */ .btn{--btn-bg:var(--brand);--btn-fg:#fff;display:inline-flex;align-items:center;gap:.45rem;padding:.55rem .85rem;border-radius:10px;border:1px solid transparent;background:var(--btn-bg);color:var(--btn-fg);text-decoration:none;cursor:pointer} .btn:hover{background:var(--brand-600)} .btn:active{transform:translateY(1px)} .btn-ghost{--btn-bg:transparent;--btn-fg:inherit;border-color:var(--border)} /* Sekundär (Hover kontrastreich in Light/Dark) */ .btn-secondary{--btn-bg:var(--surface);--btn-fg:var(--fg);border-color:var(--border);background:var(--surface);color:var(--fg)} .btn-secondary:hover{background:color-mix(in oklab, var(--surface), var(--brand) 12%);color:var(--fg)} :root[data-theme="dark"] .btn-secondary:hover{background:color-mix(in oklab, var(--surface), white 8%);color:var(--fg)} /* Hover-Kontrast fix */ .btn:hover,.btn:focus-visible{ background:var(--brand-600); color:#fff; } .btn-ghost:hover,.btn-ghost:focus-visible{ background: color-mix(in oklab, var(--brand), white 88%); color: var(--brand-700); border-color: color-mix(in oklab, var(--brand), black 20%); } :root[data-theme="dark"] .btn:hover,:root[data-theme="dark"] .btn:focus-visible{ background: color-mix(in oklab, var(--brand-600), black 6%); color:#fff; } :root[data-theme="dark"] .btn-ghost:hover,:root[data-theme="dark"] .btn-ghost:focus-visible{ background: color-mix(in oklab, var(--brand), black 70%); color:#e6edf3; border-color: color-mix(in oklab, var(--brand), black 35%); } /* ====== Badges & Alerts ====== */ /* Basis (falls nötig etwas angleichen) */ .alert{ padding: 0.75rem 0.9rem; margin: 0.8rem 0; border-radius: var(--radius, 12px); font: inherit; background: var(--surface); border: 1px solid var(--border); color: inherit; } /* Error / Danger */ .alert.err, .alert.error, .alert.danger{ background: color-mix(in oklab, var(--err), white 88%); border-color: color-mix(in oklab, var(--err), black 15%); color: var(--err-ink); } /* Success / OK */ .alert.ok, .alert.success{ background: color-mix(in oklab, var(--ok), white 88%); border-color: color-mix(in oklab, var(--ok), black 15%); color: var(--ok-ink); } /* Info */ .alert.info{ background: color-mix(in oklab, var(--info), white 88%); border-color: color-mix(in oklab, var(--info), black 15%); color: var(--info-ink); } /* Warning */ .alert.warn, .alert.warning{ background: color-mix(in oklab, var(--warn), white 88%); border-color: color-mix(in oklab, var(--warn), black 15%); color: var(--warn-ink); } .badge{display:inline-block;padding:.15rem .45rem;border-radius:999px;border:1px solid var(--border);font-size:.8rem} /* Primary (Brand, gefüllt) */ .badge-primary, .badge.brand { background: var(--brand); color: #fff; border-color: transparent; /* Base hat i. d. R. 1px Border */ } /* Secondary (dezent, wie .btn-secondary) */ .badge-secondary { background: var(--surface); color: var(--fg); border-color: var(--border); } /* Success / OK */ .badge-success, .badge.ok { background: color-mix(in oklab, var(--ok), white 90%); color: var(--ok-ink); border-color: color-mix(in oklab, var(--ok), black 15%); } /* Warning / Warn */ .badge-warning, .badge.warn { background: color-mix(in oklab, var(--warn), white 90%); color: var(--warn-ink); border-color: color-mix(in oklab, var(--warn), black 15%); } /* Info */ .badge-info, .badge.info { background: color-mix(in oklab, var(--info), white 90%); color: var(--info-ink); border-color: color-mix(in oklab, var(--info), black 15%); } /* Danger / Error */ .badge-danger, .badge.err { background: color-mix(in oklab, var(--err), white 90%); color: var(--err-ink); border-color: color-mix(in oklab, var(--err), black 15%); } /* ====== Formulare (vollständig) ====== */ .form{max-width: 720px} .field{margin:1rem 0} label{display:block;margin-bottom:.35rem;font-weight:600} .input, select, textarea{width:100%;padding:.6rem .7rem;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:inherit} .input:focus, select:focus, textarea:focus{outline:2px solid color-mix(in oklab, var(--brand), transparent 70%);outline-offset:2px} input[disabled], select[disabled], textarea[disabled]{opacity:.6;cursor:not-allowed} .help{font-size:.9rem;color:var(--muted)} /* Inline-Validation */ .is-invalid{border-color: color-mix(in oklab, var(--err), black 15%);background: color-mix(in oklab, var(--err), white 94%)} .is-valid{border-color: color-mix(in oklab, var(--ok), black 15%);background: color-mix(in oklab, var(--ok), white 94%)} .error-msg{color: var(--err-ink); font-size: .9rem; margin-top:.25rem} /* Checkbox/Radio */ .control{display:flex;align-items:center;gap:.5rem;margin:.35rem 0} /* Input-Gruppe */ .input-group{display:flex} .input-group > .input{border-radius:10px 0 0 10px} .input-group > .btn{border-radius:0 10px 10px 0} /* Range/File */ input[type="range"]{width:100%} /* Dateiupload: Control & Button an Button-Design angleichen */ input[type="file"]{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .35rem .5rem; color: inherit; } input[type="file"]::file-selector-button, input[type="file"]::-webkit-file-upload-button{ font: inherit; padding: .55rem .85rem; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--fg); margin-right:.6rem; cursor:pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } input[type="file"]::file-selector-button:hover, input[type="file"]::file-selector-button:focus-visible, input[type="file"]::-webkit-file-upload-button:hover, input[type="file"]::-webkit-file-upload-button:focus-visible{ background: color-mix(in oklab, var(--surface), var(--brand) 12%); color: var(--fg); border-color: color-mix(in oklab, var(--border), var(--brand) 25%); outline:none; } :root[data-theme="dark"] input[type="file"]::file-selector-button:hover, :root[data-theme="dark"] input[type="file"]::file-selector-button:focus-visible, :root[data-theme="dark"] input[type="file"]::-webkit-file-upload-button:hover, :root[data-theme="dark"] input[type="file"]::-webkit-file-upload-button:focus-visible{ background: color-mix(in oklab, var(--surface), white 8%); color: var(--fg); border-color: color-mix(in oklab, var(--border), white 20%); } /* ====== Code ====== */ pre{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1rem;overflow:auto} code{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace} /* ====== Tabellen ====== */ .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch} .table{width:100%;border-collapse:collapse;table-layout:auto} /* ► Optional bei vielen Spalten: .table{ min-width: 900px } */ .table th,.table td{padding:.6rem .75rem;text-align:left;border-bottom:1px solid var(--border);vertical-align:top} .table thead th{background:var(--surface);position:static} .table tbody tr:hover{ background: color-mix(in oklab, var(--surface), var(--brand) 10%); } .table.table-sticky thead th{position:sticky;top:calc(var(--header-h) + .5rem);z-index:1} /* ====== Grid & Cards ====== */ .grid{display:grid;gap:1rem} .grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))} .grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))} @media (max-width: 900px){.grid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width: 640px){.grid.cols-2,.grid.cols-3{grid-template-columns:1fr}} .card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1rem;transition:box-shadow .2s ease, transform .08s ease} .card:hover{box-shadow:0 8px 24px rgba(15,23,42,.08)} .card h3{margin-top:.2rem} /* ====== Newsfeed ====== */ :root{ --feed-lines: 3; --feed-gap: .85rem; --feed-shadow: 0 8px 24px rgba(15,23,42,.06); } feed-header{ display:block; margin:0 0 .25rem 0; } .feed-item{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; transition: box-shadow .18s ease, transform .06s ease, border-color .18s ease; } .feed-item:hover{ box-shadow: var(--feed-shadow); border-color: color-mix(in oklab, var(--border), var(--brand) 12%); } .feed-title{ margin:0; font-size:1.05rem; line-height:1.3; } .feed-title a{ color:inherit; text-decoration:none; border-radius:6px; } .feed-title a:hover{ color:var(--brand-600); text-decoration:underline; text-underline-offset:2px; } .feed-title a:focus-visible{ outline:3px solid color-mix(in oklab, var(--brand), transparent 70%); outline-offset:2px; } .feed-title a[target="_blank"]::after{ content:"↗"; margin-left:.35rem; font-size:.85em; color:var(--muted); } .feed-meta{ margin:.25rem 0 0 0; color:var(--muted); font-size:.9rem; } .feed-content{ margin-top: var(--feed-gap); color:inherit; display:-webkit-box; -webkit-line-clamp: var(--feed-lines); -webkit-box-orient: vertical; overflow:hidden; } .feed-item.is-expanded .feed-content{ display:block; } .feed-list{ display:grid; gap:1rem; } .feed-list.cols-2{ grid-template-columns: repeat(2, minmax(0,1fr)); } .feed-list.cols-3{ grid-template-columns: repeat(3, minmax(0,1fr)); } @media (max-width: 960px){ .feed-list.cols-2, .feed-list.cols-3{ grid-template-columns:1fr; } } .feed-item.feed--dense{ padding:.75rem; } .feed-item.feed--dense .feed-title{ font-size:1rem; } .feed-item.feed--dense .feed-content{ -webkit-line-clamp: 2; } :root[data-theme="dark"] .feed-item:hover{ border-color: color-mix(in oklab, var(--border), white 14%); box-shadow: 0 10px 28px rgba(0,0,0,.22); } /* ====== Newsfeed – Tabellenübersicht (contentpane) ====== */ table.contentpane{ width:100%; border-collapse:collapse; table-layout:auto; background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden; } table.contentpane thead th{ background: color-mix(in oklab, var(--surface), var(--brand) 8%); color:inherit; text-align:left; font-weight:700; padding:.6rem .75rem; border-bottom:1px solid var(--border); white-space:nowrap; } table.contentpane tbody td{ padding:.6rem .75rem; border-bottom:1px solid var(--border); vertical-align:top; color:inherit; } table.contentpane tbody tr:nth-child(even){ background: color-mix(in oklab, var(--surface), var(--brand) 4%); } table.contentpane tbody tr:hover{ background: color-mix(in oklab, var(--surface), var(--brand) 10%); } table.contentpane th.header-num, table.contentpane td.num{ text-align:right; width: 4ch; white-space:nowrap; } table.contentpane th.header-posts, table.contentpane td.posts{ text-align:right; width: 8ch; white-space:nowrap; } table.contentpane th.header-feed, table.contentpane td.feed-name{ text-align:left; } table.contentpane .feed-name a.category{ text-decoration:none; color:inherit; border-radius:6px; padding:.1rem .15rem; } table.contentpane .feed-name a.category:hover{ color:var(--brand-600); text-decoration:underline; text-underline-offset:2px; } table.contentpane .feed-name a.category:focus-visible{ outline:3px solid color-mix(in oklab, var(--brand), transparent 70%); outline-offset:2px; } table.contentpane tfoot td{ padding:.5rem .75rem; border-top:1px solid var(--border); color:var(--muted); text-align:right; background:var(--surface); } table.contentpane tfoot td.sectiontablefooter{ text-align:left; background: color-mix(in oklab, var(--surface), var(--brand) 6%); color:inherit; } table.contentpane.sticky thead th{ position:sticky; top:calc(var(--header-h) + .5rem); z-index:1; } .contentpane-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; } /* ====== Gästebuch (Form + Einträge) ====== */ /* Alerts (Erfolg/Fehler) – an globale Farben angepasst */ .gb_error{ padding:.75rem .9rem; margin:.8rem 0; background:color-mix(in oklab, var(--err), white 88%); color:var(--err-ink); border:1px solid color-mix(in oklab, var(--err), black 15%); border-radius:12px; max-width:700px; } .gb_message{ padding:.75rem .9rem; margin:.8rem 0; background:color-mix(in oklab, var(--ok), white 88%); color:var(--ok-ink); border:1px solid color-mix(in oklab, var(--ok), black 15%); border-radius:12px; max-width:700px; } .gb_clear{ clear:both; } /* Paginierung */ .gb_new_entry_link{ font-weight:700; font-size:1rem; } .gb_pagebrowser{ margin-top:1rem; display:flex; align-items:center; justify-content:space-between; gap:.5rem; } .gb_pagebrowser p{ margin:0; } .gb_pagebrowser_left{ display:flex; align-items:center; gap:.4rem; } .gb_pagebrowser_right{ display:flex; align-items:center; } .gb_pagebrowser_input{ width:2.5rem; border:1px solid var(--border); padding:.35rem .45rem; border-radius:8px; background:var(--bg); color:inherit; font:inherit; } .gb_pagebrowser_submit{ background:none; border:none; cursor:pointer; font-weight:700; color:var(--brand); padding:.35rem .5rem; border-radius:8px; } .gb_pagebrowser_prev a,.gb_pagebrowser_next a{ font-weight:700; text-decoration:none; border:1px dashed var(--border); padding:.1rem .35rem; border-radius:6px; color:inherit; } .gb_pagebrowser_prev a:hover,.gb_pagebrowser_next a:hover{ background:color-mix(in oklab, var(--surface), var(--brand) 12%); } /* Einträge */ .gb_entries{ width:100%; margin:1rem 0; display:grid; gap:1rem; } .gb_entry{ margin:0 !important; padding-bottom:0 !important; background:none !important; } .gb_entry_body{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; transition: box-shadow .18s ease, border-color .18s ease; } .gb_entry_body:hover{ box-shadow:0 8px 24px rgba(15,23,42,.08); border-color: color-mix(in oklab, var(--border), var(--brand) 12%); } /* Header (flex) */ .gb_entry_header{ background: color-mix(in oklab, var(--surface), var(--brand) 8%); border:none; border-radius:10px; padding:.5rem .75rem; font-size:.95rem; color:inherit; display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin:-.25rem 0 .35rem; } .gb_entry_header strong{ font-weight:700; } .gb_entry_header_left{ color:inherit; float:none !important; flex:1 1 auto; min-width:200px; } .gb_entry_header_right{ float:none !important; margin-left:auto; display:flex; align-items:center; justify-content:flex-end; gap:.4rem; flex:0 0 auto; } .gb_entry_header > .gb_clear{ display:none !important; } /* Icons */ .gb_entry_email,.gb_entry_web{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border:1px solid var(--border); border-radius:8px; background:var(--surface); text-decoration:none; background-repeat:no-repeat; background-position:center; background-size:16px 16px; } .gb_entry_email{ background-image:url(../../../includes/guestbook/images/email.png); } .gb_entry_web { background-image:url(../../../includes/guestbook/images/web.png); } .gb_entry_email:hover,.gb_entry_web:hover{ background-color: color-mix(in oklab, var(--surface), var(--brand) 12%); border-color: color-mix(in oklab, var(--border), var(--brand) 25%); } .gb_entry_text{ padding:.25rem 0 0 0; color:inherit; } .gb_entry_text p{ margin:.6rem 0; padding-bottom:.75rem; border-bottom:1px solid var(--border); } .gb_entry_text p:last-child{ padding-bottom:0; border-bottom:none; } /* Kommentar */ .gb_entry_comment{ margin:.75rem 0 0 0; border:1px solid color-mix(in oklab, var(--info), black 15%); background: color-mix(in oklab, var(--info), white 90%); border-radius:10px; } .gb_entry_comment .gb_entry_comment_header{ border-bottom:1px solid color-mix(in oklab, var(--info), black 10%); padding:.4rem .6rem; font-weight:600; } .gb_entry_comment p{ padding:.6rem .75rem; margin:0; } /* Formular */ .gb_form_back_link{ text-align:center; } .gb_form{ width:100%; margin:1rem 0; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; } .gb_form_box{ margin:1rem 0; padding-bottom:.25rem; border:1px solid var(--border); border-radius:10px; } .gb_form_header{ background: color-mix(in oklab, var(--surface), var(--brand) 8%); border-bottom:1px solid var(--border); padding:.5rem .75rem; font-size:1.05rem; font-weight:700; color:inherit; border-top-left-radius:10px; border-top-right-radius:10px; } .gb_form_body{ padding:.75rem; } .gb_hidden_row{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } .gb_form_row,.gb_form_message{ margin:.6rem 0; clear:both; } .gb_form_row label{ display:block; font-weight:600; margin-bottom:.35rem; } .gb_form_row label span,.gb_form_message label span{ font-weight:400; font-size:.9rem; padding-left:.25rem; color:var(--muted); } .gb_form .gb_form_message input{ width:3.5rem; } .gb_form input,.gb_form textarea{ width:100%; max-width:46rem; padding:.6rem .7rem; border:1px solid var(--border); border-radius:10px; background:var(--bg); color:inherit; } .gb_form_message{ margin-top:1rem; } .gb_form_message label{ font-weight:700; } .gb_form_message p{ margin:.35rem 0 .5rem; font-size:.95rem; color:var(--muted); } .gb_form_message textarea{ width:100%; height:auto; min-height:12rem; } .gb_form_smileys div{ display:inline-flex; cursor:pointer; padding:.35rem; border:1px solid var(--border); border-radius:8px; background:var(--surface); margin:.2rem .25rem .2rem 0; transition: background-color .15s ease, border-color .15s ease; } .gb_form_smileys div:hover{ background: color-mix(in oklab, var(--surface), var(--brand) 10%); border-color: color-mix(in oklab, var(--border), var(--brand) 25%); } .gb_form_securequestion{ margin-top:1rem; } .gb_form_securequestion label{ width:auto; float:none; display:block; line-height:1.35; } .gb_form_securequestion label span{ padding-left:0; font-size:.95rem; } .gb_form_securequestion input{ width:12rem; margin-top:.35rem; } .gb_form_buttons{ margin-top:.75rem; display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; } .gb_form_buttons p{ margin:0; } .gb_form_buttons input{ font:inherit; width:auto; min-width:9.5rem; background:var(--brand); color:#fff; cursor:pointer; height:auto; border:1px solid transparent; border-radius:10px; padding:.55rem .85rem; margin:0 .2rem; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .gb_form_buttons input:hover{ background:var(--brand-600); } .gb_form_buttons a{ text-decoration:none; } .gb_form_buttons input.btn-secondary{ background:var(--surface); color:var(--fg); border-color:var(--border); } .gb_form_buttons input.btn-secondary:hover{ background: color-mix(in oklab, var(--surface), var(--brand) 12%); } @media (max-width: 640px){ .gb_form, .gb_entry_body{ padding:.85rem; } .gb_entry_header{ padding:.45rem .6rem; } } /* ====== Footer ====== */ .site-footer{ border-top:1px solid var(--border);padding:1.5rem 0;margin-top:2rem; background:var(--area-footer-bg);background-image:var(--area-footer-img); background-size:var(--area-footer-size);background-position:var(--area-footer-pos) } .footer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem} .footer-grid h4{margin:.2rem 0 .6rem} @media (max-width: 800px){.footer-grid{grid-template-columns:1fr}} /* ===================================================================== BASE-ERWEITERUNGEN (Prose, Code, Buttons, Badges) – Layer: base ===================================================================== */ /* Richtext-Tabellen im Fließtext (ohne .table/.contentpane) */ .prose table:not(.table):not(.contentpane){ width:100%; border-collapse:collapse; table-layout:auto; background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden; margin:.75rem 0; } .prose table:not(.table):not(.contentpane) caption{ caption-side: top; padding:.5rem .75rem; font-weight:700; text-align:left; color:var(--muted); } .prose table:not(.table):not(.contentpane) thead th{ background: color-mix(in oklab, var(--surface), var(--brand) 8%); color:inherit; text-align:left; font-weight:700; padding:.6rem .75rem; border-bottom:1px solid var(--border); } .prose table:not(.table):not(.contentpane) th, .prose table:not(.table):not(.contentpane) td{ padding:.6rem .75rem; border-bottom:1px solid var(--border); vertical-align:top; } .prose table:not(.table):not(.contentpane) tbody tr:nth-child(even){ background: color-mix(in oklab, var(--surface), var(--brand) 4%); } .prose table:not(.table):not(.contentpane) tfoot td{ background:var(--surface); color:var(--muted); border-top:1px solid var(--border); } /* Inline-Elemente im Fließtext */ .prose mark{ background: color-mix(in oklab, var(--brand), white 85%); color: inherit; padding:0 .15rem; border-radius:.25rem; } .prose kbd{ display:inline-block; border:1px solid var(--border); border-bottom-width:2px; border-radius:6px; padding:.05rem .3rem; background:var(--surface); font:.9rem/1.2 ui-monospace, Menlo, Consolas, monospace; } .prose u{ text-decoration: underline; text-underline-offset:.15em; } .prose small{ font-size:.875em; color:var(--muted); } .prose sup,.prose sub{ font-size:.8em; line-height:0; position:relative; } .prose sup{ top:-.35em; } .prose sub{ bottom:-.15em; } /* Code-Fences & Inline-Code */ .prose pre{ margin:.75rem 0; } .prose pre code{ background:transparent; padding:0; } .prose :not(pre) > code{ background:var(--surface); border:1px solid var(--border); padding:.05rem .25rem; border-radius:.35rem; } /* Inline-Liste */ .list-inline{ display:flex; flex-wrap:wrap; gap:.5rem .85rem; list-style:none; margin:0; padding:0; } .list-inline > li{ margin:0; } .list-inline.list-dotted > li{ position:relative; padding-left:.85rem; } .list-inline.list-dotted > li::before{ content:"•"; position:absolute; left:0; color:var(--muted); } /* Buttons (Erweiterungen) */ .btn-outline{ background:transparent; color:var(--brand); border:1px solid var(--brand); } .btn-outline:hover,.btn-outline:focus-visible{ background:color-mix(in oklab, var(--brand), white 92%); color:var(--brand-700); } .btn-sm{ padding:.35rem .6rem; font-size:.925rem; } .btn-lg{ padding:.7rem 1.1rem; font-size:1.05rem; } /* Überschriften + Lead im Fließtext */ .prose h4{ font-size:clamp(1rem,1.6vw,1.125rem); margin:.85rem 0 .45rem; } .prose h5{ font-size:clamp(.95rem,1.4vw,1.05rem); margin:.75rem 0 .35rem; } .prose .lead{ font-size:clamp(1.05rem,1.8vw,1.2rem); color:var(--muted); } /* Badges: zusätzliche Varianten & Größen */ .badge.primary,.badge.brand{ background:color-mix(in oklab, var(--brand), white 90%); border-color:color-mix(in oklab, var(--brand), black 15%); color:var(--brand-700); } .badge.secondary{ background:var(--surface); border-color:var(--border); color:var(--fg); } .badge.neutral{ background:color-mix(in oklab, var(--surface), var(--brand) 8%); border-color:color-mix(in oklab, var(--border), var(--brand) 20%); color:inherit; } .badge.sm{ font-size:.75rem; padding:.05rem .35rem } .badge.lg{ font-size:.95rem; padding:.2rem .6rem } }