/* zadeo Design-System — zadeo.de/assets/zadeo.css * Darf von allen Zadeo-Apps eingebunden werden (siehe INTEGRATION.md §7). * Tokens zuerst; Komponenten nutzen ausschließlich Tokens. */ /* Schriften (SIL Open Font License, liegen unter static/fonts/): Barlow für alles, Barlow Semi Condensed für große Zahlen, Montserrat nur für Logos/Produktnamen am Logo – nie im Fließtext. Marken-Regeln: brand.py (TYPE). */ @font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/barlow-400.woff2") format("woff2"); } @font-face { font-family: "Barlow"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/barlow-400-italic.woff2") format("woff2"); } @font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/barlow-500.woff2") format("woff2"); } @font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/barlow-600.woff2") format("woff2"); } @font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/barlow-700.woff2") format("woff2"); } @font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/barlow-semi-condensed-600.woff2") format("woff2"); } @font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/barlow-semi-condensed-700.woff2") format("woff2"); } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/montserrat-600.woff2") format("woff2"); } :root { --z-blue: #2E609F; --z-navy: #07112a; --z-coral: #EE7F4B; --bg: #f6f8fb; --bg-soft: #edf1f7; --surface: #ffffff; --text: #0f1b33; --muted: #56627a; --border: #e1e6ef; --primary: var(--z-blue); --primary-hover: #244e84; --primary-soft: #e6eef9; --on-primary: #ffffff; --accent: var(--z-coral); --accent-soft: #fdeee6; --success: #1f8a5b; --danger: #c0392b; --shadow-sm: 0 1px 2px rgba(15, 27, 51, .06), 0 1px 3px rgba(15, 27, 51, .05); --shadow: 0 6px 24px -8px rgba(15, 27, 51, .14), 0 2px 6px rgba(15, 27, 51, .05); --shadow-lg: 0 24px 60px -20px rgba(15, 27, 51, .25); --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; --font: "Barlow", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --font-num: "Barlow Semi Condensed", var(--font); --font-logo: "Montserrat", var(--font); --mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace; --wrap: 1140px; --gutter: clamp(16px, 4vw, 32px); color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #07112a; --bg-soft: #0b1734; --surface: #0f1d3e; --text: #e9eef8; --muted: #9ba8c4; --border: #1e2c4f; --primary: #6d9be3; --primary-hover: #8ab0ec; --primary-soft: #14264d; --on-primary: #07112a; --accent: #f59a6c; --accent-soft: #2a1e22; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow: 0 8px 28px -10px rgba(0, 0, 0, .6); --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, .7); color-scheme: dark; } } :root[data-theme="dark"] { --bg: #07112a; --bg-soft: #0b1734; --surface: #0f1d3e; --text: #e9eef8; --muted: #9ba8c4; --border: #1e2c4f; --primary: #6d9be3; --primary-hover: #8ab0ec; --primary-soft: #14264d; --on-primary: #07112a; --accent: #f59a6c; --accent-soft: #2a1e22; --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 8px 28px -10px rgba(0,0,0,.6); --shadow-lg: 0 24px 60px -20px rgba(0,0,0,.7); color-scheme: dark; } /* ── Basis ─────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.6 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg { max-width: 100%; height: auto; } a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--primary-hover); } h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -.01em; margin: 0 0 .5em; font-weight: 700; } h1 { font-size: clamp(2.2rem, 5.4vw, 3.6rem); letter-spacing: -.02em; } h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); } h3 { font-size: 1.2rem; } p { margin: 0 0 1em; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .skip { position: absolute; left: -999px; } .skip:focus { left: 16px; top: 12px; z-index: 100; background: var(--surface); padding: 8px 14px; } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); } .narrow { max-width: 760px; } .muted { color: var(--muted); } .eyebrow { display: inline-block; font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: .8rem; } .section { padding: clamp(56px, 9vw, 104px) 0; } .section-soft { background: var(--bg-soft); } .section-head { max-width: 640px; margin-bottom: 40px; } .section-head p { color: var(--muted); font-size: 1.08rem; } /* ── Buttons ───────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: .5em; justify-content: center; padding: .72em 1.25em; border-radius: 999px; border: 1px solid transparent; font: 600 .98rem/1.2 var(--font); text-decoration: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .15s, box-shadow .15s; } .btn:hover { transform: translateY(-1px); } .btn-primary { background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--primary-hover); color: var(--on-primary); } .btn-ghost { background: transparent; color: var(--text); border-color: var(--border); } .btn-ghost:hover { border-color: var(--primary); color: var(--primary); } .btn-accent { background: var(--accent); color: #fff; } .btn-accent:hover { color: #fff; filter: brightness(1.05); } .btn-row { display: flex; flex-wrap: wrap; gap: 12px; } /* ── Kopfzeile ─────────────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); } .site-header .wrap { display: flex; align-items: center; gap: 24px; height: 68px; } .brand { display: flex; align-items: center; color: var(--text); text-decoration: none; } .brand .logo { height: 26px; width: auto; } .logo-dot { fill: var(--primary); } .brand-sub { margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--border); font: 600 .74rem/1.15 var(--font-logo); color: var(--muted); } .nav { display: flex; align-items: center; gap: 4px; margin-left: auto; } .nav a { color: var(--text); text-decoration: none; font-weight: 500; font-size: .96rem; padding: 8px 12px; border-radius: 999px; } .nav a:hover, .nav a[aria-current="page"] { background: var(--primary-soft); color: var(--primary); } .nav .btn { margin-left: 8px; padding: .55em 1.1em; } .nav .btn-primary, .nav .btn-primary:hover { color: var(--on-primary); } .nav .btn-primary:hover { background: var(--primary-hover); } .menu { display: none; margin-left: auto; } .menu summary { list-style: none; cursor: pointer; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border); font-weight: 600; font-size: .92rem; } .menu summary::-webkit-details-marker { display: none; } .menu[open] summary { background: var(--primary-soft); } .menu-panel { position: absolute; left: 12px; right: 12px; top: 64px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 10px; display: grid; gap: 2px; } .menu-panel a { padding: 12px 14px; border-radius: 10px; color: var(--text); text-decoration: none; font-weight: 500; } .menu-panel a:hover { background: var(--primary-soft); } @media (max-width: 860px) { .nav { display: none; } .menu { display: block; } .brand-sub { display: none; } } /* ── Hero ──────────────────────────────────────────────────────────────── */ .hero { position: relative; overflow: hidden; padding: clamp(64px, 11vw, 132px) 0 clamp(56px, 8vw, 96px); } .hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; z-index: -1; } .hero::before { width: 520px; height: 520px; right: -120px; top: -160px; background: radial-gradient(circle, color-mix(in srgb, var(--primary) 45%, transparent), transparent 70%); } .hero::after { width: 420px; height: 420px; left: -160px; bottom: -200px; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 40%, transparent), transparent 70%); } .hero h1 { max-width: 16ch; } .hero h1 em { font-style: normal; color: var(--primary); background: linear-gradient(transparent 62%, var(--accent-soft) 62%); } .hero .lead { font-size: clamp(1.08rem, 2vw, 1.25rem); color: var(--muted); max-width: 58ch; margin-bottom: 2rem; } .hero-badges { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 2.2rem; color: var(--muted); font-size: .93rem; } .hero-badges span::before { content: "✓"; color: var(--success); font-weight: 700; margin-right: 6px; } /* ── Karten & Raster ───────────────────────────────────────────────────── */ .grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); } .card h3 { margin-bottom: .35em; } .card p:last-child { margin-bottom: 0; } .card-link { display: block; color: inherit; text-decoration: none; transition: transform .18s, box-shadow .18s, border-color .18s; } .card-link:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); color: inherit; } .icon { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); margin-bottom: 16px; } .icon svg { width: 24px; height: 24px; } .icon-accent { background: var(--accent-soft); color: var(--accent); } .tag { display: inline-block; font-size: .75rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--bg-soft); color: var(--muted); border: 1px solid var(--border); } .tag-soon { background: var(--accent-soft); color: var(--accent); border-color: transparent; } .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; } .product-card { --p: var(--primary); position: relative; overflow: hidden; } .product-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--p); } .product-card .pc-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; } .product-card img.pc-logo { width: 48px; height: 48px; object-fit: contain; border-radius: 12px; background: var(--bg-soft); padding: 4px; } .pc-initial { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--p) 16%, var(--surface)); color: var(--p); font-weight: 800; font-size: 1.3rem; } .product-card h3 { margin: 0; } .product-card .pc-cat { font-size: .82rem; color: var(--muted); } .empty { text-align: center; padding: 48px 24px; border: 1.5px dashed var(--border); border-radius: var(--radius); color: var(--muted); } /* ── Über mich ─────────────────────────────────────────────────────────── */ .about { display: grid; gap: clamp(28px, 5vw, 64px); grid-template-columns: 1fr 1.25fr; align-items: center; } .about-visual { aspect-ratio: 1; border-radius: var(--radius-lg); position: relative; overflow: hidden; background: linear-gradient(140deg, var(--z-blue), #17345f 55%, var(--z-navy)); display: grid; place-items: center; box-shadow: var(--shadow-lg); } .about-visual .logo { width: 62%; color: #fff; } .about-visual .logo-dot { fill: var(--z-coral); } .about-visual .loc { position: absolute; left: 20px; bottom: 18px; color: rgba(255,255,255,.8); font-size: .9rem; } .checks { list-style: none; padding: 0; margin: 1.2em 0 1.6em; display: grid; gap: 10px; } .checks li { padding-left: 30px; position: relative; } .checks li::before { content: ""; position: absolute; left: 0; top: .3em; width: 20px; height: 20px; border-radius: 50%; background: var(--primary-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%232E609F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; } @media (max-width: 760px) { .about { grid-template-columns: 1fr; } .about-visual { max-width: 340px; } } /* ── Ablauf ────────────────────────────────────────────────────────────── */ .steps { counter-reset: s; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } .step { counter-increment: s; padding-top: 8px; } .step::before { content: counter(s, decimal-leading-zero); display: block; font-weight: 800; font-size: 2rem; color: color-mix(in srgb, var(--primary) 30%, transparent); margin-bottom: 6px; } /* ── Formulare ─────────────────────────────────────────────────────────── */ .form { display: grid; gap: 16px; } .form-row { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; } @media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } } label { display: grid; gap: 6px; font-weight: 600; font-size: .92rem; } label .opt { font-weight: 400; color: var(--muted); } input, select, textarea { font: inherit; color: var(--text); background: var(--surface); width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: .7em .9em; transition: border-color .15s, box-shadow .15s; } textarea { min-height: 150px; resize: vertical; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent); } .check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: .92rem; color: var(--muted); } .check input { width: 18px; height: 18px; margin-top: 3px; flex: none; accent-color: var(--primary); } .hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; } .alert { padding: 14px 18px; border-radius: 12px; border: 1px solid; margin-bottom: 18px; } .alert-error { background: color-mix(in srgb, var(--danger) 9%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 35%, transparent); } .alert-ok { background: color-mix(in srgb, var(--success) 10%, var(--surface)); border-color: color-mix(in srgb, var(--success) 35%, transparent); } .alert ul { margin: 0; padding-left: 1.1em; } .contact-grid { display: grid; gap: 32px; grid-template-columns: 1fr 1.5fr; align-items: start; } @media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } } .contact-info dl { margin: 0; display: grid; gap: 14px; } .contact-info dt { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; } .contact-info dd { margin: 0; } /* ── Produktseite ──────────────────────────────────────────────────────── */ .product-hero { --p: var(--primary); padding: clamp(48px, 8vw, 88px) 0 40px; position: relative; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--p) 10%, var(--bg)), var(--bg)); } .product-hero .ph-top { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; } .product-hero .ph-logo { width: 72px; height: 72px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); padding: 8px; object-fit: contain; } .product-hero .pc-initial { --p: inherit; width: 72px; height: 72px; font-size: 2rem; border-radius: 18px; } .product-hero h1 { margin: 0; font-size: clamp(2rem, 4.4vw, 3rem); } .product-hero .lead { font-size: 1.18rem; color: var(--muted); max-width: 60ch; } .product-hero .btn-primary { background: var(--p); } .product-hero .btn-primary:hover { background: color-mix(in srgb, var(--p) 85%, #000); } .subnav { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 28px; } .subnav a { padding: 7px 14px; border-radius: 999px; text-decoration: none; color: var(--muted); font-weight: 500; font-size: .93rem; } .subnav a:hover { color: var(--text); background: var(--bg-soft); } .subnav a[aria-current="page"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); } .layout-aside { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } .aside { position: sticky; top: 92px; display: grid; gap: 16px; } @media (max-width: 960px) { .layout-aside { grid-template-columns: 1fr; } .aside { position: static; } } .own-site { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; justify-content: space-between; } /* ── Fließtext aus Markdown (Produkte, Rechtstexte) ────────────────────── */ .prose { font-size: 1.04rem; } .prose h2 { margin-top: 1.8em; font-size: 1.6rem; } .prose h3 { margin-top: 1.5em; } .prose > :first-child { margin-top: 0; } .prose ul, .prose ol { padding-left: 1.25em; } .prose li { margin: .3em 0; } .prose img { border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow); } .prose blockquote { margin: 1.5em 0; padding: 4px 20px; border-left: 4px solid var(--accent); color: var(--muted); } .prose code { font-family: var(--mono); font-size: .9em; background: var(--bg-soft); padding: .12em .4em; border-radius: 6px; } .prose pre { background: var(--bg-soft); padding: 16px; border-radius: var(--radius-sm); overflow-x: auto; } .prose pre code { background: none; padding: 0; } .prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: .95rem; display: block; overflow-x: auto; } .prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); } .prose th { font-weight: 600; background: var(--bg-soft); } .prose hr { border: 0; border-top: 1px solid var(--border); margin: 2.5em 0; } .legal h2 { font-size: 1.3rem; } .legal h3 { font-size: 1.08rem; } .md-features { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); margin: 1.5em 0; } .md-features .card h3 { margin-top: 0; font-size: 1.05rem; } .md-faq { display: grid; gap: 10px; margin: 1.5em 0; } .md-faq details { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 0 18px; } .md-faq summary { cursor: pointer; font-weight: 600; padding: 15px 0; list-style: none; position: relative; padding-right: 28px; } .md-faq summary::-webkit-details-marker { display: none; } .md-faq summary::after { content: "+"; position: absolute; right: 0; top: 12px; font-size: 1.3rem; color: var(--muted); } .md-faq details[open] summary::after { content: "–"; } .md-faq details > div { padding-bottom: 14px; color: var(--muted); } .md-gallery { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); margin: 1.5em 0; } .md-gallery figure { margin: 0; } .md-gallery img { width: 100%; aspect-ratio: 16/10; object-fit: cover; } .md-steps ol { counter-reset: st; list-style: none; padding: 0; display: grid; gap: 14px; } .md-steps li { counter-increment: st; position: relative; padding-left: 52px; min-height: 36px; } .md-steps li::before { content: counter(st); position: absolute; left: 0; top: -2px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--primary-soft); color: var(--primary); } .md-cta, .md-pricing { margin: 2em 0; padding: 28px; border-radius: var(--radius-lg); text-align: center; background: linear-gradient(135deg, var(--primary-soft), var(--accent-soft)); border: 1px solid var(--border); } .md-cta p:last-child, .md-pricing p:last-child { margin-bottom: 0; } /* ── CTA-Band & Fußzeile ───────────────────────────────────────────────── */ .cta-band { border-radius: var(--radius-lg); padding: clamp(32px, 5vw, 56px); color: #fff; background: linear-gradient(130deg, var(--z-blue), #1b3f72 60%, var(--z-navy)); box-shadow: var(--shadow-lg); display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; } .cta-band h2 { color: #fff; margin: 0 0 .2em; } .cta-band p { color: rgba(255,255,255,.82); margin: 0; } .cta-band .btn-ghost { color: #fff; border-color: rgba(255,255,255,.4); } .cta-band .btn-ghost:hover { border-color: #fff; color: #fff; } .site-footer { border-top: 1px solid var(--border); padding: 56px 0 32px; margin-top: 40px; font-size: .94rem; color: var(--muted); } .footer-grid { display: grid; gap: 32px; grid-template-columns: 1.4fr repeat(3, 1fr); } @media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > :first-child { grid-column: 1 / -1; } } .site-footer h4 { color: var(--text); font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; } .site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .site-footer a { color: var(--muted); text-decoration: none; } .site-footer a:hover { color: var(--primary); } .site-footer .logo { height: 22px; color: var(--text); margin-bottom: 12px; } .footer-bottom { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .86rem; } .page-head { padding: clamp(48px, 7vw, 80px) 0 24px; } .page-head p { color: var(--muted); font-size: 1.1rem; max-width: 60ch; } .notfound { text-align: center; padding: 100px 0; } .notfound .big { font-size: clamp(4rem, 14vw, 8rem); font-weight: 800; letter-spacing: -.05em; color: color-mix(in srgb, var(--primary) 25%, transparent); line-height: 1; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } } /* ── Konto & Admin ─────────────────────────────────────────────────────── */ .small { font-size: .88rem; } .right { text-align: right; } .pre { white-space: pre-wrap; margin: 0; } .plain { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; } .stack { display: grid; gap: 14px; margin-bottom: 20px; } .stack > h3, .stack > h4 { margin: 0; } .row-between { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; } .btn-block { width: 100%; } .btn-sm { padding: .42em .9em; font-size: .86rem; } .linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--primary); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } form.inline { display: inline; } .form-inline { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; } .form-inline label { flex: 0 1 auto; } .form-inline .grow { flex: 1 1 220px; } .form-inline select { width: auto; } .label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 6px; } .checks-inline { display: flex; flex-wrap: wrap; gap: 8px 20px; } fieldset { border: 0; padding: 0; margin: 0; min-width: 0; } .switch-group { display: grid; gap: 8px; } .switch-group legend { font-weight: 600; font-size: .92rem; margin-bottom: 8px; padding: 0; } .switch-group .check { color: var(--text); } details.more summary { cursor: pointer; color: var(--primary); font-weight: 500; } details.more[open] summary { margin-bottom: 12px; } .badge { display: inline-block; font-size: .74rem; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--bg-soft); color: var(--muted); border: 1px solid var(--border); vertical-align: middle; } .badge-ok { background: color-mix(in srgb, var(--success) 14%, var(--surface)); color: var(--success); border-color: transparent; } .badge-bad { background: color-mix(in srgb, var(--danger) 14%, var(--surface)); color: var(--danger); border-color: transparent; } .card-warn { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); box-shadow: 0 0 0 3px var(--accent-soft); } .table-wrap { overflow-x: auto; margin: 0 -4px; } .table { width: 100%; border-collapse: collapse; } .table th, .table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); vertical-align: top; } .table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; } .table tr:last-child td { border-bottom: 0; } .table td.right { text-align: right; } .auth { padding: clamp(40px, 8vw, 88px) var(--gutter); display: grid; place-items: center; } .auth-card { width: 100%; max-width: 440px; padding: clamp(24px, 5vw, 36px); box-shadow: var(--shadow); } .auth-card h1 { font-size: 1.7rem; margin-bottom: .7em; } .auth-links { margin: 18px 0 0; text-align: center; font-size: .92rem; color: var(--muted); } .app { padding: 36px 0 64px; } .app-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; align-items: start; } .app-nav { position: sticky; top: 92px; display: grid; gap: 16px; } .app-nav nav { display: grid; gap: 2px; } .app-nav nav a, .app-soon { padding: 9px 12px; border-radius: 10px; color: var(--text); text-decoration: none; font-weight: 500; } .app-nav nav a:hover { background: var(--bg-soft); } .app-nav nav a[aria-current="page"] { background: var(--primary-soft); color: var(--primary); } .app-soon { color: var(--muted); display: flex; justify-content: space-between; align-items: center; font-size: .94rem; } .app-user { display: grid; gap: 2px; font-size: .92rem; overflow-wrap: anywhere; } .app-org { font-size: .92rem; } .org-switch { display: grid; gap: 6px; } .app-main h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: .8em; } @media (max-width: 860px) { .app-grid { grid-template-columns: 1fr; gap: 20px; } .app-nav { position: static; } .app-nav nav { display: flex; flex-wrap: wrap; gap: 4px; } .app-soon { display: none; } } .stats .card { display: grid; gap: 2px; } .stat { font-family: var(--font-num); font-size: 2rem; font-weight: 800; letter-spacing: 0; } .grid.stats { margin-bottom: 20px; } .codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-top: 12px; } .codes code { font-family: var(--mono); background: var(--surface); padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border); text-align: center; } .qr { background: #fff; padding: 10px; border-radius: 12px; width: 200px; margin: 10px 0; } .qr svg { width: 100%; height: auto; display: block; } .setup-steps { padding-left: 1.2em; display: grid; gap: 10px; margin: 0; } .offline-bar { background: var(--accent); color: #fff; text-align: center; padding: 8px 16px; font-size: .92rem; } .offline-bar a { color: #fff; font-weight: 600; } /* ── Offline-Seite ─────────────────────────────────────────────────────── */ .offline-page { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(ellipse at top, var(--primary-soft), var(--bg) 60%); } .offline { width: 100%; max-width: 400px; padding: 48px 16px; display: grid; gap: 24px; justify-items: center; } .offline-logo .logo { width: 210px; height: auto; color: var(--text); } .offline-msg { text-align: center; margin: 0; } .offline-card { width: 100%; box-shadow: var(--shadow); } .offline-legal { font-size: .85rem; color: var(--muted); margin: 0; } .offline-legal a { color: var(--muted); } /* ── Preistabelle ──────────────────────────────────────────────────────── */ .pricing { margin-top: 2.5em; scroll-margin-top: 90px; } .pricing h2 { margin-top: 0; } .iv-radio { position: absolute; opacity: 0; pointer-events: none; } .iv-toggle { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--border); margin-bottom: 20px; } .iv-toggle label { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 999px; font-weight: 600; font-size: .92rem; cursor: pointer; color: var(--muted); } #iv-month:checked ~ .iv-toggle label[for="iv-month"], #iv-year:checked ~ .iv-toggle label[for="iv-year"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); } #iv-month:focus-visible ~ .iv-toggle label[for="iv-month"], #iv-year:focus-visible ~ .iv-toggle label[for="iv-year"] { outline: 3px solid var(--accent); } #iv-month:checked ~ .pricing-grid .price-year, #iv-year:checked ~ .pricing-grid .price-month { display: none; } .pricing-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); } .plan { position: relative; display: flex; flex-direction: column; gap: 10px; } .plan h3 { margin: 0; } .plan p { margin: 0; } .plan-recommended { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 30%, transparent), var(--shadow); } .plan-badge { position: absolute; top: -11px; right: 18px; background: var(--primary); color: var(--on-primary); font-size: .74rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; } .plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; } .plan-price .amount { font-family: var(--font-num); font-size: 1.9rem; font-weight: 800; letter-spacing: 0; } .plan-price .per { color: var(--muted); font-size: .9rem; } .plan .checks { margin: 4px 0; font-size: .95rem; } .plan-actions { margin-top: auto; display: grid; gap: 8px; padding-top: 8px; } .pricing-note { margin-top: 14px; } .prose .pricing .checks { padding: 0; } .prose .pricing .checks li { margin: 0; } .lic-off { opacity: .75; } textarea.mono, .mono { font-family: var(--mono); font-size: .9rem; } /* ── Entwicklung ───────────────────────────────────────────────────────── */ pre.log { max-height: 480px; overflow: auto; background: var(--bg-soft); padding: 12px; border-radius: var(--radius-sm); } details.card > summary { cursor: pointer; font-weight: 600; } details.card[open] > summary { margin-bottom: 10px; } details.card { margin-bottom: 20px; } .proposal-plan { border-top: 1px solid var(--border); padding-top: 12px; display: grid; gap: 8px; } /* ── Produktseite v2 (ein Template für alle Produkte) ──────────────────── */ .ph-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: center; } @media (max-width: 900px) { .ph-grid { grid-template-columns: 1fr; gap: 24px; } } .ph-facts { display: grid; gap: 12px; border-top: 4px solid var(--p); } .ph-facts .checks { margin: 0; } .ph-price { font-size: 1rem; } .ph-price strong { font-size: 2rem; letter-spacing: -.03em; color: var(--text); } .product-hero .btn-accent, .product-body .btn-accent { background: var(--accent); } .prose-product > p, .prose-product > ul, .prose-product > ol, .prose-product > blockquote, .prose-product > table, .prose-product > .md-steps, .prose-product > .md-faq { max-width: 780px; } .prose-product > h2 { margin-top: 2.2em; } .prose-product .md-features { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); } .prose-product .md-features .card { border-top: 3px solid color-mix(in srgb, var(--p, var(--primary)) 70%, transparent); } .prose-product .pricing { margin-top: 1.5em; } .prose-product .pricing-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 22px; } .plan { padding: 26px; gap: 14px; } .plan-head p { font-size: .95rem; } .plan-price { display: grid; gap: 8px; } .plan-amount { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; } .plan-note { font-size: .85rem; color: var(--muted); min-height: 1.3em; } .plan-once { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; padding-top: 12px; border-top: 1px dashed var(--border); font-size: .92rem; } .plan-once span { display: block; margin-top: 2px; } .plan-once-link { font-weight: 600; white-space: nowrap; text-decoration: none; } .prose .plan-actions .btn, .prose .plan-price .btn { text-decoration: none; } .prose .pricing h3 { margin: 0; } /* ── Funktionsvergleich (site/compare.toml) ────────────────────────────── */ .compare { margin-top: 28px; } .compare h3 { margin: 0 0 12px; } .compare-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .compare-table { width: 100%; border-collapse: collapse; font-size: .93rem; display: table; margin: 0; } .prose .compare-table th, .prose .compare-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); background: none; } .compare-table thead th { font-weight: 700; text-align: center; white-space: nowrap; font-size: .95rem; } .compare-table tbody th { text-align: left; font-weight: 500; min-width: 220px; } .compare-table td { text-align: center; white-space: nowrap; } .compare-table tr:last-child th, .compare-table tr:last-child td { border-bottom: 0; } .compare-group th { background: var(--bg-soft) !important; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700 !important; } .compare-rec { background: color-mix(in srgb, var(--p, var(--primary)) 6%, transparent) !important; } .compare .yes { color: var(--p, var(--primary)); font-weight: 800; } .compare .no { color: var(--muted); opacity: .6; } .compare-hint { display: block; font-size: .8rem; color: var(--muted); font-weight: 400; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* kompaktere Funktionskarten auf Produktseiten */ .prose-product .md-features { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 14px; } .prose-product .md-features .card { padding: 18px 20px; } .prose-product .md-features .card h3 { font-size: 1rem; margin-bottom: .3em; } .prose-product .md-features .card p { font-size: .93rem; color: var(--muted); } .prose .compare-table { display: table; width: 100%; margin: 0; } /* Großer Screenshot unter dem Produktkopf (product.toml: screenshot = "…") */ .product-shot { margin-top: -8px; } .product-shot img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-lg); background: var(--surface); } .md-gallery figure a { display: block; } .md-gallery figcaption { font-size: .85rem; color: var(--muted); margin-top: 6px; text-align: center; } .md-gallery img { transition: transform .15s; } .md-gallery a:hover img { transform: scale(1.015); } /* ── Angemeldet: Avatar mit Initialen ──────────────────────────────────── */ .avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; flex: none; background: var(--primary); color: var(--on-primary); font-weight: 700; font-size: .82rem; letter-spacing: .02em; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px color-mix(in srgb, var(--primary) 35%, transparent); text-decoration: none; } .nav .nav-account { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; margin-left: 6px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); } .nav .nav-account:hover, .nav .nav-account[aria-current="page"] { border-color: var(--primary); background: var(--primary-soft); } .nav-account-name { font-weight: 600; font-size: .92rem; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .avatar-mobile { display: none; margin-left: auto; } .avatar-mobile:hover { color: var(--on-primary); } .menu-account { display: flex !important; align-items: center; gap: 10px; flex-wrap: wrap; border-bottom: 1px solid var(--border); } .menu-account .avatar { width: 30px; height: 30px; font-size: .75rem; } @media (max-width: 860px) { .avatar-mobile { display: inline-grid; } .avatar-mobile + .menu { margin-left: 10px; } } .nav-account-text { display: grid; line-height: 1.2; text-align: left; min-width: 0; } .nav-account-name { max-width: 190px; } .nav-account-org { font-size: .74rem; font-weight: 500; color: var(--muted); max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav .nav-account { padding-right: 14px; } /* ── Mehrfachauswahl Sichtbarkeit ──────────────────────────────────────── */ .picker { display: grid; gap: 12px; border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; } .picker legend { font-weight: 600; font-size: .92rem; padding: 0 6px; } .picker-options { display: grid; gap: 6px; } .picker .check { color: var(--text); } .picker-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 8px; border-radius: 999px; background: var(--primary-soft); border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent); font-size: .9rem; font-weight: 500; cursor: pointer; } .chip input { width: 16px; height: 16px; accent-color: var(--primary); } .chip:has(input[type="checkbox"]:not(:checked)) { opacity: .5; text-decoration: line-through; } .picker-search { position: relative; } .picker-results { display: grid; gap: 2px; margin-top: 4px; } .picker-hit { text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; font: inherit; color: var(--text); cursor: pointer; } .picker-hit:hover, .picker-hit:focus { border-color: var(--primary); background: var(--primary-soft); } .picker-hit[disabled] { opacity: .5; cursor: default; } .picker-empty { padding: 6px 2px; } /* ── Buchhaltung ───────────────────────────────────────────────────────── */ .acc-sub { margin: -4px 0 20px; } .settings-grid { display: grid; gap: 12px 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); } .settings-grid .span2 { grid-column: 1 / -1; } .lh-row { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--border); } table.tiers input { width: 100%; } table.tiers td { padding: 6px 4px; } .table tfoot td { border-top: 2px solid var(--border); } .badge-warn { background: var(--accent-soft); color: var(--accent); border-color: transparent; text-decoration: none; } .amount-input { width: 7.5em; text-align: right; } .inline-form { display: inline; } .op-table tr.overdue td:first-child { box-shadow: inset 3px 0 0 var(--danger); } .op-pay { display: grid; gap: 12px; } .op-pay h3 { margin: 0; } .op-pay-row { display: grid; grid-template-columns: 180px 200px minmax(0, 1fr) auto; gap: 12px; align-items: end; } .op-pay-row input, .op-pay-row select { height: 44px; box-sizing: border-box; } .op-pay-row .btn { height: 44px; } @media (max-width: 800px) { .op-pay-row { grid-template-columns: 1fr 1fr; } .op-pay-row .btn { grid-column: 1 / -1; } } /* Auswertungen – Reihenfarben validiert (dataviz-Validator: hell gegen #fff, dunkel gegen --surface) */ :root { --series-1: #2E609F; --series-2: #EE7F4B; --st-good: #1f8a5b; --st-warn: #b7791f; --st-crit: #c0392b; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --series-1: #5b8ad6; --series-2: #cf6a36; --st-good: #3fb27f; --st-warn: #e0a43a; --st-crit: #e5675a; } } :root[data-theme="dark"] { --series-1: #5b8ad6; --series-2: #cf6a36; --st-good: #3fb27f; --st-warn: #e0a43a; --st-crit: #e5675a; } .viz { margin: 0 0 18px; } .viz figcaption { margin-bottom: 4px; } .viz-legend { display: flex; gap: 16px; color: var(--muted); margin-bottom: 4px; } .viz-legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; } .sw-1 { background: var(--series-1); } .sw-2 { background: var(--series-2); } .viz-plot { position: relative; } .viz svg { width: 100%; height: auto; display: block; overflow: visible; } .viz .grid { stroke: var(--border); stroke-width: 1; } .viz .axis { stroke: var(--muted); stroke-width: 1; } .viz .tick { fill: var(--muted); font-size: 11px; font-family: var(--font); } .viz .bar.s1 { fill: var(--series-1); } .viz .bar.s2 { fill: var(--series-2); } .viz .hit { fill: transparent; cursor: default; } .viz .hit:hover { fill: color-mix(in srgb, var(--text) 5%, transparent); } .viz-tip { position: absolute; pointer-events: none; background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow); border-radius: var(--radius-sm); padding: 6px 10px; font-size: .82rem; white-space: nowrap; transform: translate(-50%, -100%); } .viz-tip b { display: block; } .viz-tip i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; } .ku { margin-bottom: 6px; } .ku-bar { position: relative; height: 10px; border-radius: 999px; background: var(--bg-soft); overflow: hidden; margin: 6px 0 2px; } .ku-bar span { display: block; height: 100%; border-radius: 999px; } .ku-bar i { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--muted); } .ku-bar .ku-good { background: var(--st-good); } .ku-bar .ku-warning { background: var(--st-warn); } .ku-bar .ku-critical { background: var(--st-crit); } .ku-state { font-size: .85rem; font-weight: 600; } .ku-state.ku-good { color: var(--st-good); } .ku-state.ku-warning { color: var(--st-warn); } .ku-state.ku-critical { color: var(--st-crit); } .rank td:first-child { position: relative; padding-bottom: 14px; } .rank-bar { position: absolute; left: 8px; bottom: 6px; height: 4px; border-radius: 2px; background: var(--series-1); max-width: calc(100% - 16px); } .grid.two { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); } .grid.two > .card { align-self: start; } .rank td.right { white-space: nowrap; } /* Bestell-Dialog (site.js) */ dialog.modal { border: 0; padding: 0; width: min(640px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); overflow: auto; } dialog.modal::backdrop { background: rgba(7, 17, 42, .55); backdrop-filter: blur(3px); } dialog.modal .modal-body { padding: clamp(18px, 4vw, 32px); } dialog.modal .modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; } dialog.modal .modal-head h2 { font-size: 1.35rem; margin: 0; } dialog.modal .modal-close { background: none; border: 0; font-size: 1.8rem; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 4px; } dialog.modal .modal-close:hover { color: var(--text); } dialog.modal .card { box-shadow: none; border: 0; padding: 0; background: none; } @media (prefers-reduced-motion: no-preference) { dialog.modal[open] { animation: modal-in .18s ease-out; } @keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } } } .paychoice { border: 0; padding: 0; margin: 4px 0; display: grid; gap: 8px; } .paychoice legend { font-weight: 700; margin-bottom: 6px; } .payopt { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; font-weight: 400; } .payopt:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); } .payopt input { margin-top: 4px; } /* ── Buchhaltung (eigener Bereich /buchhaltung) ──────────────────────────── */ .acc { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 0; max-width: 1640px; margin: 0 auto; min-height: calc(100dvh - 72px); } .acc-nav { position: sticky; top: 72px; align-self: start; max-height: calc(100dvh - 72px); overflow-y: auto; padding: 24px 16px 32px; border-right: 1px solid var(--border); display: grid; gap: 14px; } .acc-brand { font-weight: 800; font-size: 1.1rem; letter-spacing: -.01em; color: var(--text); text-decoration: none; padding: 0 10px; } .acc-nav nav { display: grid; gap: 1px; } .acc-nav nav a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: .93rem; font-weight: 500; } .acc-nav nav a:hover { background: var(--bg-soft); } .acc-nav nav a[aria-current="page"] { background: var(--primary-soft); color: var(--primary); } .acc-nav-h { margin: 14px 10px 4px; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .acc-count { min-width: 20px; padding: 1px 7px; border-radius: 999px; background: var(--bg-soft); color: var(--muted); font-size: .72rem; font-weight: 700; text-align: center; } .acc-count-warn { background: var(--accent-soft); color: var(--accent); } .acc-new { position: relative; } .acc-new summary { list-style: none; cursor: pointer; } .acc-new summary::-webkit-details-marker { display: none; } .acc-new-menu { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); display: grid; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow); } .acc-new-menu a { padding: 8px 10px; border-radius: 6px; color: var(--text); text-decoration: none; font-size: .93rem; } .acc-new-menu a:hover { background: var(--bg-soft); } .acc-new-menu a:nth-child(2), .acc-new-menu a:nth-child(6) { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 10px; } .acc-nav-sub { margin-top: 10px; } .acc-main { min-width: 0; padding: 28px clamp(16px, 3vw, 40px) 64px; } .acc-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 22px; } .acc-head h1 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); margin: 0; letter-spacing: -.02em; } .acc-crumb { margin: 0 0 4px; font-size: .85rem; color: var(--muted); } .acc-crumb a { color: inherit; } .acc-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .acc-main > .card + .card, .acc-main > .card + .table-card, .acc-main > .table-card + .card, .acc-main > form + .card, .acc-main > .table-card + details { margin-top: 16px; } .acc-main > .alert { margin-bottom: 16px; } .table-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .table-card .table th { background: var(--bg-soft); } .table-card .table th, .table-card .table td { padding: 11px 14px; } .table-card .table tbody tr { cursor: default; } .table-card .table tbody tr:hover { background: color-mix(in srgb, var(--primary-soft) 45%, transparent); } .table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .table .muted-cell { color: var(--muted); font-size: .88rem; } .table a.rowlink { color: var(--text); text-decoration: none; font-weight: 600; } .table a.rowlink:hover { color: var(--primary); text-decoration: underline; } .filterbar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 14px; } .filterbar .search { flex: 1 1 260px; max-width: 420px; } .filterbar input, .filterbar select { padding: 8px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); font: inherit; font-size: .93rem; } .filterbar .search input { width: 100%; } .acc .chips { display: flex; flex-wrap: wrap; gap: 6px; } .acc .chip { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); text-decoration: none; font-size: .86rem; font-weight: 500; } .acc .chip:hover { border-color: var(--primary); } .acc .chip[aria-current="true"] { background: var(--text); color: var(--surface); border-color: var(--text); } .status { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; white-space: nowrap; } .status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .status-draft { color: var(--muted); } .status-issued { color: var(--primary); } .status-sent { color: #7a5af8; } .status-paid, .status-accepted { color: var(--success); } .status-cancelled, .status-declined { color: var(--danger); } .status-overdue { color: var(--accent); } .kpis { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 18px; } .kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; display: grid; gap: 4px; text-decoration: none; color: var(--text); } a.kpi:hover { border-color: var(--primary); } .kpi .kpi-v { font-family: var(--font-num); font-size: 1.55rem; font-weight: 800; letter-spacing: 0; font-variant-numeric: tabular-nums; } .kpi .kpi-l { color: var(--muted); font-size: .88rem; } .kpi .kpi-s { color: var(--muted); font-size: .8rem; } .todo { display: grid; gap: 0; } .todo a { display: flex; justify-content: space-between; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; } .todo a:last-child { border-bottom: 0; } .todo a:hover { color: var(--primary); } .acc-split { display: grid; gap: 16px; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; } .empty-state { text-align: center; padding: 40px 16px; color: var(--muted); } .empty-state strong { display: block; color: var(--text); font-size: 1.05rem; margin-bottom: 6px; } @media (max-width: 1100px) { .acc-split { grid-template-columns: 1fr; } } @media (max-width: 860px) { .acc { grid-template-columns: 1fr; } .acc-nav { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--border); padding: 12px 16px; grid-template-columns: 1fr auto; align-items: center; } .acc-nav nav { grid-column: 1 / -1; display: flex; overflow-x: auto; gap: 4px; padding-bottom: 4px; } .acc-nav nav a { white-space: nowrap; } .acc-nav-h { display: none; } .acc-new { width: auto; } } /* Beleg-Editor: Blatt links (skaliert), Seitenleiste rechts */ .doc-editor { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; } .doc-stage { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; min-width: 0; overflow: hidden; } .doc-host { transform-origin: top left; width: 210mm; } .doc-side { position: sticky; top: 88px; display: grid; gap: 14px; min-width: 0; } .doc-side .card { min-width: 0; margin: 0; } .doc-side input, .doc-side select { width: 100%; min-width: 0; box-sizing: border-box; } .doc-side .form-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } .doc-side .form { gap: 10px; } .doc-side .card { padding: 16px 18px; } .doc-side h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 0 0 10px; } .doc-side dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; font-size: .92rem; } .doc-side dt { color: var(--muted); } .doc-side dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; } .doc-total { font-family: var(--font-num); font-size: 1.6rem; font-weight: 800; letter-spacing: 0; font-variant-numeric: tabular-nums; } .doc-save { font-size: .82rem; color: var(--muted); min-height: 1.2em; } .doc-save.err { color: var(--danger); } .btn-stack { display: grid; gap: 8px; } .menu-more { position: relative; } .menu-more summary { list-style: none; cursor: pointer; } .menu-more summary::-webkit-details-marker { display: none; } .menu-more-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 230px; display: grid; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow); } .menu-more-list a, .menu-more-list button { text-align: left; padding: 8px 10px; border-radius: 6px; color: var(--text); text-decoration: none; font: inherit; font-size: .93rem; background: none; border: 0; cursor: pointer; width: 100%; } .menu-more-list a:hover, .menu-more-list button:hover { background: var(--bg-soft); } .menu-more-list .danger { color: var(--danger); } .menu-more-list form { margin: 0; } .chain { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .88rem; } .chain a { text-decoration: none; } .chain .sep { color: var(--muted); } @media (max-width: 1280px) { .doc-editor { grid-template-columns: 1fr; } .doc-side { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } } @media (max-width: 700px) { .doc-stage { padding: 10px; } } .acc .chip:has(input:checked) { background: var(--text); color: var(--surface); border-color: var(--text); } .acc label.chip { cursor: pointer; } .payinfo { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-soft); } .facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; } .facts dt { color: var(--muted); } .facts dd { margin: 0; } .layout-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 440px); gap: 24px; align-items: start; } .layout-preview { position: sticky; top: 88px; } .layout-preview .doc-stage { padding: 16px; } @media (max-width: 1100px) { .layout-split { grid-template-columns: 1fr; } .layout-preview { position: static; max-width: 520px; } } /* Vorgang: Logbuch */ .log-form textarea { width: 100%; } .acc .log-form .chip { font-size: .8rem; padding: 4px 10px; } .timeline { list-style: none; margin: 4px 0 0; padding: 0 0 0 14px; border-left: 2px solid var(--border); display: grid; gap: 14px; } .timeline li { position: relative; } .timeline li::before { content: ""; position: absolute; left: -20px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); border: 2px solid var(--surface); } .timeline .tl-note::before, .timeline .tl-call::before, .timeline .tl-mail::before, .timeline .tl-meeting::before { background: var(--primary); } .timeline .tl-pay::before { background: var(--success); } .timeline .tl-dun::before, .timeline .tl-ticket::before { background: var(--accent); } .tl-meta { font-size: .78rem; color: var(--muted); } .tl-label { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .7rem; } .tl-text { font-size: .93rem; white-space: pre-line; overflow-wrap: anywhere; } .tl-follow { font-size: .82rem; color: var(--muted); margin-top: 2px; } .tl-follow.due { color: var(--accent); font-weight: 600; } /* Verwaltung: eigener Balken unter dem Hauptmenü (nur Admin/Support/Entwickler) */ .admin-bar { background: var(--z-navy); color: #c9d4ea; font-size: .86rem; } .admin-bar .wrap { display: flex; align-items: center; gap: 4px 6px; flex-wrap: wrap; min-height: 40px; } .admin-bar-label { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8796b5; margin-right: 8px; } .admin-bar a { color: #e9eef8; text-decoration: none; padding: 5px 10px; border-radius: 7px; font-weight: 500; } .admin-bar a:hover { background: rgba(255, 255, 255, .08); } .admin-bar a[aria-current="page"] { background: rgba(255, 255, 255, .14); color: #fff; } .admin-bar .admin-bar-offline { margin-left: auto; color: #ffb38a; } .acc { min-height: calc(100dvh - 112px); } .acc-nav { top: 112px; max-height: calc(100dvh - 112px); } /* Verwaltungsbalken bleibt beim Scrollen oben stehen (unter der Kopfzeile) – klebende Seitenteile rutschen darunter */ @media (min-width: 900px) { .admin-bar { position: sticky; top: 69px; z-index: 49; } body:has(> .admin-bar) .doc-side, body:has(> .admin-bar) .layout-preview { top: 124px; } body:has(> .admin-bar) .aside, body:has(> .admin-bar) .app-nav { top: 128px; } body:has(> .admin-bar) .p-preview { top: 160px; max-height: calc(100dvh - 176px); } } /* Startseite: Produkt im Fokus */ .spotlight { display: grid; grid-template-columns: minmax(160px, 260px) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: center; } .spotlight-logo { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); aspect-ratio: 1; display: grid; place-items: center; padding: 28px; box-shadow: var(--shadow); } .spotlight-logo img { width: 100%; height: auto; } .spotlight h2 { margin: 6px 0 8px; } @media (max-width: 720px) { .spotlight { grid-template-columns: 1fr; } .spotlight-logo { max-width: 180px; } } /* Preistabelle: Testphase als eigener Block über den Paketen */ .trial-band { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; margin: 8px 0 24px; padding: 20px 24px; border-radius: var(--radius); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); } .trial-band .trial-text { flex: 1 1 420px; } .trial-band h3 { margin: 0 0 4px; font-size: 1.2rem; } .trial-band p { margin: 0; color: var(--text); font-size: .95rem; } .trial-band form { margin: 0; } /* Buchhaltung: Einkauf (Eingangsrechnungen, Prognose) */ .p-split { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .p-preview { position: sticky; top: 124px; display: grid; gap: 12px; max-height: calc(100dvh - 140px); overflow-y: auto; } .p-preview img { width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); } @media (max-width: 1100px) { .p-split { grid-template-columns: 1fr; } .p-preview { position: static; max-height: none; } } .src { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; font-size: .7rem; font-weight: 600; vertical-align: 1px; } .src-xml { background: color-mix(in srgb, var(--success) 14%, var(--surface)); color: var(--success); } .src-rule { background: var(--primary-soft); color: var(--primary); } .src-text { background: var(--accent-soft); color: var(--accent); } .table.kv th { width: 34%; color: var(--muted); font-weight: 500; text-align: left; } .todo-row { padding: 12px 4px; border-bottom: 1px solid var(--border); align-items: center; } .todo-row:last-child { border-bottom: 0; } .kpi .kpi-v.neg { color: var(--danger); } .fin-cols { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; } @media (max-width: 720px) { .fin-cols { grid-template-columns: 1fr; } } .fin-table td.num, .fin-table th.num { white-space: nowrap; } .fin-table tr.sum td { font-weight: 700; border-top: 2px solid var(--border); } .fin-result { padding: 10px 14px; border-radius: 10px; background: var(--primary-soft); font-size: 1.05rem; } .fin-bars { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; height: 160px; align-items: end; padding-bottom: 20px; } .fin-bar { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; } .fin-bar span { display: block; width: 38%; max-width: 16px; border-radius: 4px 4px 0 0; min-height: 0; } .fin-bar .b-in, .fin-sw-in { background: var(--series-1); } .fin-bar .b-out, .fin-sw-out { background: var(--series-2); } .fin-bar.future span { opacity: .35; } .fin-bar i { position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-style: normal; font-size: .72rem; color: var(--muted); } /* Beleg: „Ausstellen & senden“-Menü mit Adressfeld */ .menu-more-list.menu-send { min-width: 300px; padding: 12px; } .menu-more-list.menu-send .btn-primary { background: var(--primary); color: var(--on-primary); text-align: center; padding: .55em 1em; } .menu-more-list.menu-send .btn-primary:hover { background: var(--primary-hover); } .menu-more-list.menu-send input { width: 100%; } /* „Weiter zu …“ in Tabellen: Menü klappt in der Zeile auf (wird nicht vom Tabellen-Scroll abgeschnitten) */ .menu-more.menu-inline { display: inline-block; text-align: left; } .menu-more.menu-inline .menu-more-list { position: static; margin-top: 6px; min-width: 190px; box-shadow: none; } /* Versand-Fenster + Versandprotokoll */ .send-dialog textarea { width: 100%; font: inherit; line-height: 1.5; } .mail-log { display: grid; gap: 8px; margin-top: 8px; } .mail-log details { border-top: 1px solid var(--border); padding-top: 8px; } .mail-log summary { cursor: pointer; font-size: .86rem; } .mail-text { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: .86rem; background: var(--bg-soft); border-radius: 8px; padding: 10px 12px; margin: 6px 0 0; } .mail-failed { color: var(--danger); font-weight: 600; } /* Stift neben Überschriften (Titel ändern) */ .title-edit { background: none; border: 0; padding: 0 4px; margin-left: 4px; font-size: .7em; color: var(--muted); cursor: pointer; vertical-align: middle; border-radius: 6px; } .title-edit::before { content: "✎"; } .title-edit:hover { color: var(--primary); background: var(--bg-soft); } /* Einstellungen: Ordnerbaum Rechnungspostfach */ .folder-tree { margin: 0; padding: 10px 14px; background: var(--bg-soft); border-radius: 10px; font-size: .82rem; line-height: 1.5; overflow-x: auto; } .skonto-pay { padding: 10px 12px; border-radius: 10px; background: var(--accent-soft); } /* Doppelklick-Schutz: abgeschickter Knopf */ .is-busy { opacity: .65; cursor: progress; pointer-events: none; } /* Inklusive-Produkte (z. B. Farbkarte zu jedem Programm) */ .lic-included { border-color: color-mix(in srgb, var(--success) 35%, var(--border)); } .bundle-note { margin-bottom: 16px; } /* Konto: Startseite, Meine Programme, Team */ .k-h2 { font-size: 1.15rem; margin: 0; } .app-main section + section { margin-top: 28px; } .k-todos { display: grid; gap: 8px; } .k-todo { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); text-decoration: none; } .k-todo strong { white-space: nowrap; color: var(--primary); font-size: .9rem; } .k-todo:hover { border-color: var(--primary); } .k-todo-bad { border-left: 4px solid var(--danger); } .k-todo-warn { border-left: 4px solid var(--accent); } .k-todo-info { border-left: 4px solid var(--primary); } .k-progs { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .k-prog { display: grid; gap: 6px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .k-prog-off { opacity: .7; } .k-prog-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .k-prog p { margin: 0; } .k-prog-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .k-quick { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .k-quick a { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--bg-soft); color: var(--text); text-decoration: none; } .k-quick a span { color: var(--muted); font-size: .85rem; } .k-quick a:hover { background: var(--primary-soft); } .k-card { display: grid; gap: 14px; } .k-card + .k-card { margin-top: 16px; } .k-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .k-card-head h2 { font-size: 1.2rem; margin: 0 0 2px; } .k-card-head p { margin: 0; } .k-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .k-block { border-top: 1px solid var(--border); padding-top: 12px; display: grid; gap: 8px; } .k-block h3 { font-size: .95rem; margin: 0; } .k-seats { display: flex; flex-wrap: wrap; gap: 6px; } .k-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px 4px 12px; border-radius: 999px; background: var(--bg-soft); font-size: .88rem; } .k-chip-sm { padding: 2px 10px; font-size: .78rem; } .k-chip form { display: inline; } .k-chip-x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 1.05rem; line-height: 1; padding: 0 4px; border-radius: 50%; } .k-chip-x:hover { color: var(--danger); background: var(--surface); } .k-seat-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .k-seat-add select { padding: 6px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); font: inherit; font-size: .9rem; } .k-more { border-top: 1px solid var(--border); padding-top: 10px; } .k-more summary { cursor: pointer; font-weight: 600; font-size: .92rem; } .k-dev { padding: 8px 0; border-bottom: 1px solid var(--border); } .k-members { display: grid; } .k-member { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); } .k-member:last-child { border-bottom: 0; } .k-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-weight: 700; } .k-member-progs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .k-member-side { display: grid; gap: 4px; justify-items: end; } @media (max-width: 640px) { .k-member { grid-template-columns: 40px minmax(0, 1fr); } .k-member-side { grid-column: 2; justify-items: start; } } .k-fieldset { border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; display: grid; gap: 6px; } .k-fieldset legend { font-weight: 600; font-size: .9rem; padding: 0 6px; } /* Einrichtungs-Assistent */ .wiz-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 18px; counter-reset: none; } .wiz-steps li a { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--bg-soft); color: var(--muted); text-decoration: none; font-size: .88rem; font-weight: 600; } .wiz-steps .wiz-n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); font-size: .8rem; } .wiz-steps li.current a { background: var(--primary); color: var(--on-primary); } .wiz-steps li.current .wiz-n { background: rgba(255, 255, 255, .25); } .wiz-steps li.done a { color: var(--success); } .wiz-card { max-width: 760px; padding: clamp(20px, 4vw, 36px); } .wiz-card h2 { margin: 0; } .wiz-card p { margin: 0; } .wiz-emoji { font-size: 2.2rem; line-height: 1; } .wiz-facts { list-style: none; padding: 0; margin: 0; display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .wiz-facts li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--surface); } .wiz-facts li span { color: var(--muted); } .wiz-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 16px; margin-top: 4px; } .wiz-seats { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } .wiz-member { padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; color: var(--text); } .wiz-howto { display: grid; gap: 14px; padding-left: 22px; margin: 0; } .wiz-howto li { line-height: 1.55; } .wiz-howto li > strong:first-child { display: block; margin-bottom: 2px; } .wiz-howto li > .muted, .wiz-howto li > .btn-row { display: block; margin-top: 4px; } .wiz-bonus { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--success) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--success) 25%, var(--border)); } .wiz-where { display: grid; gap: 8px; padding-left: 18px; margin: 0; } .btn-lg { padding: .8em 1.4em; font-size: 1.05rem; } /* ── Gestaltung mit dem Logo-Element: der blaue Eckwinkel unten rechts (wie im „o“ von zadeo) ── */ .z-corner, .k-card, .wiz-card, .k-prog { position: relative; } .k-card::after, .wiz-card::after, .k-prog::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 30px; height: 30px; pointer-events: none; border-right: 4px solid var(--primary); border-bottom: 4px solid var(--primary); border-bottom-right-radius: var(--radius); } .k-prog::after { width: 22px; height: 22px; border-width: 3px; opacity: 0; transition: opacity .18s, width .18s, height .18s; } .k-prog:hover::after { opacity: 1; width: 30px; height: 30px; } .lic-off::after, .k-prog-off::after { border-color: var(--border); } .lic-included::after { border-color: var(--success); } /* Seitentitel im Konto enden mit dem Winkel – wie das Logo */ .app-main > h1 { display: flex; align-items: flex-end; gap: 10px; letter-spacing: -.025em; } .app-main > h1::after { content: ""; width: 12px; height: 12px; margin-bottom: .32em; flex: none; border-right: 3px solid var(--primary); border-bottom: 3px solid var(--primary); border-bottom-right-radius: 5px; } /* Konto-Navigation: aktive Seite mit Winkel statt Fläche */ .app-nav nav a { position: relative; padding-left: 22px; } .app-nav nav a[aria-current="page"] { background: none; color: var(--text); font-weight: 700; } .app-nav nav a[aria-current="page"]::before { content: ""; position: absolute; left: 6px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2.5px solid var(--primary); border-bottom: 2.5px solid var(--primary); border-bottom-right-radius: 3px; } .app-nav nav a:hover { background: var(--bg-soft); } /* Programm-Logos */ .plogo { flex: none; border-radius: 22%; object-fit: contain; background: var(--surface); } .plogo-mono { display: grid; place-items: center; font-weight: 800; font-size: 1.1rem; color: var(--text); background: var(--bg-soft); border-radius: 22%; position: relative; } .plogo-mono::after { content: ""; position: absolute; right: 0; bottom: 0; width: 38%; height: 38%; border-right: 3px solid var(--primary); border-bottom: 3px solid var(--primary); border-bottom-right-radius: 22%; } .k-prog-head { gap: 12px; justify-content: flex-start; } .k-prog-head strong { line-height: 1.25; } .k-prog-head .badge { margin-left: auto; } .k-prog { padding: 18px 20px 20px; } .k-card-head { justify-content: flex-start; align-items: center; gap: 14px; } .k-card-head .k-card-title { flex: 1; min-width: 0; } .k-card { padding: 22px 24px 24px; } .btn-sub { font-weight: 500; opacity: .75; margin-left: 4px; font-size: .9em; } .wiz-title { display: inline-flex; align-items: center; gap: 14px; } .wiz-bonus .grow { flex: 1; } .wiz-bonus { justify-content: flex-start; } /* Assistent: Schritte als Leiste, Nummern als kleine „o“-Kacheln */ .wiz-steps { gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 22px; } .wiz-steps li a { background: none; border-radius: 0; padding: 8px 16px 12px 0; margin-right: 8px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; } .wiz-steps .wiz-n { border-radius: 7px; background: var(--bg-soft); color: var(--muted); position: relative; } .wiz-steps li.current a { background: none; color: var(--text); border-bottom-color: var(--primary); } .wiz-steps li.current .wiz-n { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--text); } .wiz-steps li.current .wiz-n::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-right: 3px solid var(--primary); border-bottom: 3px solid var(--primary); border-bottom-right-radius: 7px; } .wiz-steps li.done a { color: var(--text); } .wiz-steps li.done .wiz-n { background: var(--primary-soft); color: var(--primary); } .wiz-card h2 { letter-spacing: -.02em; } /* „Zu tun“: ruhiger, Akzent nur als Winkel links unten */ .k-todo { border-left-width: 1px; position: relative; padding-left: 22px; } .k-todo::before { content: ""; position: absolute; left: 8px; top: 50%; width: 7px; height: 7px; margin-top: -5px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; border-bottom-right-radius: 2px; } .k-todo-bad { border-left: 1px solid var(--border); } .k-todo-bad::before { color: var(--danger); } .k-todo-warn { border-left: 1px solid var(--border); } .k-todo-warn::before { color: var(--accent); } .k-todo-info { border-left: 1px solid var(--border); } .k-todo-info::before { color: var(--primary); } .wiz-card h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); line-height: 1.25; } .k-prog-actions .btn { white-space: nowrap; } .offline-card .btn + .offline-links, .offline-links { font-size: .9rem; text-align: center; margin: 10px 0 14px; } .offline-card .btn-primary { margin-top: 6px; } /* Feedback-Knopf (unten rechts) + Fenster */ .fb-fab { position: fixed; right: 18px; bottom: 18px; z-index: 900; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; font-size: .88rem; font-weight: 600; box-shadow: var(--shadow); cursor: pointer; } .fb-fab:hover { border-color: var(--primary); } .fb-fab-icon { position: relative; width: 18px; height: 18px; border: 2px solid currentColor; border-radius: 5px; } .fb-fab-icon::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 8px; height: 8px; border-right: 3px solid var(--primary); border-bottom: 3px solid var(--primary); border-bottom-right-radius: 5px; } @media (max-width: 640px) { .fb-fab-text { display: none; } .fb-fab { padding: 10px; } } @media print { .fb-fab { display: none; } } .fb-kinds { display: flex; flex-wrap: wrap; gap: 6px; } .fb-kind input { position: absolute; opacity: 0; pointer-events: none; } .fb-kind span { display: inline-block; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; font-size: .88rem; cursor: pointer; } .fb-kind input:checked + span { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); font-weight: 600; } .fb-kind input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; } .fb-dialog textarea { width: 100%; font: inherit; } .fb-tools { display: flex; flex-wrap: wrap; gap: 6px; } .fb-file { cursor: pointer; } .fb-hint { margin: -4px 0 0; } .fb-preview { display: grid; gap: 4px; justify-items: start; } .fb-preview img { max-width: 100%; max-height: 200px; border: 1px solid var(--border); border-radius: 8px; } .fb-picked { margin: 0; color: var(--primary); } body.fb-picking, body.fb-picking * { cursor: crosshair !important; } .fb-hover { outline: 2px dashed var(--accent) !important; outline-offset: 2px; } .fb-marked { outline: 2px solid var(--accent) !important; outline-offset: 2px; } .fb-toast { position: fixed; right: 18px; bottom: 72px; z-index: 950; padding: 10px 16px; border-radius: 12px; background: var(--z-navy); color: #fff; font-size: .9rem; box-shadow: var(--shadow-lg); } .admin-bar-count { display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 2px; border-radius: 999px; background: var(--accent); color: #fff; font-size: .72rem; font-weight: 700; text-align: center; } /* Todo-Liste */ .todo-row td { vertical-align: top; } .todo-text { white-space: pre-line; overflow-wrap: anywhere; } .todo-shot { max-width: 100%; border: 1px solid var(--border); border-radius: 10px; } .todo-ctx th { width: 30%; color: var(--muted); font-weight: 500; text-align: left; vertical-align: top; } .todo-ctx td { overflow-wrap: anywhere; } .prio-hoch { color: var(--danger); font-weight: 700; } /* Balken für Angemeldete: Kunden hell (user-bar), Admins dunkel (admin-bar); rechts die eigenen Programme */ .user-bar { background: var(--surface); border-bottom: 1px solid var(--border); font-size: .86rem; } .user-bar .wrap { display: flex; align-items: center; gap: 4px 6px; flex-wrap: wrap; min-height: 40px; } .user-bar .admin-bar-label { color: var(--muted); } .user-bar a { color: var(--text); text-decoration: none; padding: 5px 10px; border-radius: 7px; font-weight: 500; position: relative; } .user-bar a:hover { background: var(--bg-soft); } .user-bar a[aria-current="page"] { font-weight: 700; } .user-bar a[aria-current="page"]::after { content: ""; position: absolute; right: 2px; bottom: 3px; width: 7px; height: 7px; border-right: 2px solid var(--primary); border-bottom: 2px solid var(--primary); border-bottom-right-radius: 3px; } .bar-progs { margin-left: auto; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .bar-prog { display: inline-flex !important; align-items: center; gap: 6px; } .bar-prog img { width: 16px; height: 16px; border-radius: 4px; } .bar-ext { font-size: .75em; opacity: .6; } .admin-bar .bar-prog { color: #e9eef8; } .admin-bar .bar-progs + .admin-bar-offline { margin-left: 8px; } .admin-bar .admin-bar-offline:first-child, .admin-bar .wrap > .admin-bar-offline { white-space: nowrap; } @media (max-width: 760px) { .bar-progs { margin-left: 0; } } /* Entwicklung → Versionen: je Produkt ein Freigabe-Weg Alpha → Beta → Stabil */ .rel-card { display: grid; gap: 16px; padding: 22px 24px 24px; } .rel-card + .rel-card { margin-top: 18px; } .rel-head { display: flex; align-items: center; gap: 14px; } .rel-head h2 { font-size: 1.25rem; margin: 0; } .rel-head .grow { flex: 1; min-width: 0; } .rel-customers { margin: 2px 0 0; font-size: .92rem; } .rel-warn { color: var(--accent); font-weight: 600; } .rel-lanes { display: grid; grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr) 22px minmax(0, 1fr); align-items: stretch; gap: 0; } .rel-lane { display: grid; align-content: start; gap: 6px; padding: 14px 16px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-soft); position: relative; } .rel-lane-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .rel-ch { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .rel-alpha .rel-ch { color: var(--danger); } .rel-beta .rel-ch { color: var(--accent); } .rel-stable .rel-ch { color: var(--success); } .rel-stable { background: var(--surface); border-color: color-mix(in srgb, var(--success) 35%, var(--border)); } .rel-stable:not(.rel-empty)::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 22px; height: 22px; border-right: 3px solid var(--success); border-bottom: 3px solid var(--success); border-bottom-right-radius: 12px; } .rel-empty { opacity: .65; } .rel-version { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; } .rel-none { font-size: 1.5rem; color: var(--muted); } .rel-files { display: flex; flex-wrap: wrap; gap: 4px; } .rel-file { padding: 2px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: .76rem; } .rel-notes summary { cursor: pointer; color: var(--muted); } .rel-notes .pre { white-space: pre-line; margin-top: 4px; max-height: 160px; overflow: auto; } .rel-promote { margin-top: 4px; } .rel-arrow { align-self: center; justify-self: center; width: 10px; height: 10px; border-right: 2.5px solid var(--muted); border-bottom: 2.5px solid var(--muted); transform: rotate(-45deg); } @media (max-width: 900px) { .rel-lanes { grid-template-columns: 1fr; gap: 8px; } .rel-arrow { transform: rotate(45deg); } } /* ── Buchhaltung v2: Erklärungen, Reiter, Belegart-Kürzel, Akten ─────────────────────────────── */ .info { position: relative; display: inline-flex; vertical-align: middle; margin-left: 4px; cursor: help; outline: none; text-transform: none; letter-spacing: 0; font-weight: 400; } .info-i { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; border: 1px solid currentColor; color: var(--muted); font: italic 600 10px/1 Georgia, "Times New Roman", serif; opacity: .65; transition: opacity .15s; } .info:hover .info-i, .info:focus-visible .info-i { opacity: 1; color: var(--primary); } .info-tip { position: absolute; z-index: 60; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); width: max-content; max-width: 280px; padding: 9px 12px; border-radius: 8px; background: var(--text); color: var(--surface); font: 400 .8rem/1.45 var(--font); text-align: left; white-space: normal; box-shadow: var(--shadow); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s; } .info-tip::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--text); } .info:hover .info-tip, .info:focus .info-tip { opacity: 1; visibility: visible; } .info-tip.info-tip-fixed { position: fixed; bottom: auto; right: auto; transform: none; } .info-tip.info-tip-fixed::after { display: none; } th.th-sort { cursor: pointer; user-select: none; white-space: nowrap; } th.th-sort:hover { color: var(--text); } th.th-sort::after { content: "↕"; margin-left: 4px; opacity: .3; font-size: .85em; } th.th-sort[aria-sort="ascending"]::after { content: "↑"; opacity: .9; } th.th-sort[aria-sort="descending"]::after { content: "↓"; opacity: .9; } th .info-tip, .acc-nav .info-tip { bottom: auto; top: calc(100% + 8px); } th .info-tip::after, .acc-nav .info-tip::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--text); } .num .info-tip, th.num .info-tip { left: auto; right: -6px; transform: none; } .num .info-tip::after { left: auto; right: 8px; } /* Belegart-Kürzel: neutral, unterscheidbar über Text */ .kt { display: inline-block; min-width: 26px; padding: 1px 5px; margin-right: 6px; border-radius: 4px; border: 1px solid var(--border); background: var(--bg-soft); color: var(--muted); font: 600 .7rem/1.4 var(--mono); letter-spacing: .02em; text-align: center; vertical-align: 1px; } .kt-RE, .kt-GS { color: var(--text); border-color: color-mix(in srgb, var(--text) 25%, var(--border)); } .kt-ER { background: transparent; } /* Bereiche: feiner Akzent an der Überschrift */ .acc { --area: transparent; } .acc[data-area="sale"] { --area: var(--primary); } .acc[data-area="buy"] { --area: #8a6d4f; } .acc-head { position: relative; } .acc[data-area] .acc-title { border-left: 3px solid var(--area); padding-left: 14px; } .acc-area { display: block; margin: 0 0 2px; font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--area); } /* Navigation */ .acc-nav-h { display: flex; align-items: center; gap: 8px; margin: 18px 10px 4px; } .acc-nav-h::after { content: ""; flex: 1; height: 1px; background: var(--border); } .acc-nav-admin { margin-top: 18px; padding-top: 10px; border-top: 1px solid var(--border); display: grid; gap: 1px; } .acc-nav-admin a { font-size: .86rem; color: var(--muted); padding: 5px 10px !important; } .acc-new-menu .acc-new-h { margin: 6px 10px 2px; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .acc-new-menu .acc-new-h:first-child { margin-top: 2px; } .acc-new-menu a:nth-child(2), .acc-new-menu a:nth-child(6) { border-top: 0; margin-top: 0; padding-top: 8px; } .acc-new-menu hr { border: 0; border-top: 1px solid var(--border); margin: 6px 4px; } /* Reiter */ .acc-tabs { display: flex; gap: 2px; margin: 0 0 20px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: thin; } .acc-tabs a { display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--muted); text-decoration: none; font-weight: 600; font-size: .92rem; white-space: nowrap; } .acc-tabs a:hover { color: var(--text); } .acc-tabs a[aria-current] { color: var(--text); border-bottom-color: var(--area, var(--primary)); } .acc[data-area=""] .acc-tabs a[aria-current], .acc:not([data-area]) .acc-tabs a[aria-current] { border-bottom-color: var(--primary); } .acc-tabs .acc-count { font-size: .7rem; } /* Kennzahlenleiste (Akte, Übersicht): eine Fläche, Trennlinien statt Einzelkästen */ .figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 0 0 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .fig { display: grid; align-content: start; gap: 2px; padding: 14px 18px; border-left: 1px solid var(--border); color: var(--text); text-decoration: none; margin-left: -1px; } a.fig:hover { background: var(--bg-soft); } .fig[aria-current] { box-shadow: inset 0 -2px 0 var(--area, var(--primary)); } .fig-l { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .fig-v { font-size: 1.3rem; font-weight: 750; letter-spacing: -.01em; font-variant-numeric: tabular-nums; } .fig-v small { font-size: .85rem; font-weight: 600; color: var(--muted); } .fig-s { font-size: .8rem; color: var(--muted); } .fig-warn .fig-v { color: var(--accent); } .fig-bad .fig-v { color: var(--danger); } /* Akte (Kunde/Lieferant) */ .file-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 6px 0 0; color: var(--muted); font-size: .9rem; } .file-meta span + span::before { content: ""; } .doc-group { margin: 0 0 22px; } .doc-group-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 8px; padding: 0 2px; } .doc-group-h h3 { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); } .doc-group-h .sum { font-size: .88rem; color: var(--muted); font-variant-numeric: tabular-nums; } .doc-group-h .sum strong { color: var(--text); } .table td.num, .table th.num { font-variant-numeric: tabular-nums; } .chain { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; } .chain a { display: inline-flex; align-items: center; gap: 0; padding: 3px 8px 3px 4px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); text-decoration: none; font-size: .8rem; } .chain a:hover { border-color: var(--primary); } .chain a .kt { margin-right: 6px; } .chain .sep { color: var(--muted); font-size: .8rem; } .chain .st { margin-left: 6px; } .chain .status { font-size: .74rem; } .case-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; padding: 14px 18px; border-top: 1px solid var(--border); } .case-row:first-child { border-top: 0; } .case-row h4 { margin: 0; font-size: 1rem; } .case-row h4 a { color: var(--text); text-decoration: none; } .case-row h4 a:hover { color: var(--primary); } .timeline { list-style: none; margin: 0; padding: 0; } .timeline li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 12px 18px; border-top: 1px solid var(--border); } .timeline li:first-child { border-top: 0; } .timeline .when { color: var(--muted); font-size: .82rem; font-variant-numeric: tabular-nums; } .section-note { margin: -8px 0 16px; color: var(--muted); font-size: .88rem; } @media (max-width: 760px) { .fig { border-left: 0; border-top: 1px solid var(--border); margin: -1px 0 0; } .timeline li { grid-template-columns: 1fr; gap: 2px; } } .doc-table { table-layout: fixed; min-width: 760px; } .doc-table .c-nr { width: 25%; } .doc-table .c-date { width: 11%; } .doc-table .c-amt { width: 12%; } .doc-table .c-st { width: 13%; } .doc-table .c-act { width: 150px; } .doc-table td { overflow: hidden; text-overflow: ellipsis; } .doc-table td:last-child { overflow: visible; } .fig-l { white-space: nowrap; letter-spacing: .04em; } @media (max-width: 860px) { .acc-nav-admin { display: contents; } .acc-area { display: none; } .acc-nav-h { display: none; } } /* ── Vorgänge v2: Phasen im Menü, Tafel, Vorgangsmappe, Dateien, Korrekturabzug ── */ .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } @media (max-width: 560px) { .grid-2 { grid-template-columns: 1fr; } } .js .js-hide { display: none !important; } .acc-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--muted); } .acc-dot-lg { width: 12px; height: 12px; margin-right: 10px; vertical-align: middle; } .acc-link { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } .acc-nav nav a.acc-muted { color: var(--muted); } .acc-quick { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 6px; margin-top: 14px; } .acc-quick .acc-new { position: static; width: auto; } /* Menü über die volle Breite der Seitenleiste – sonst ragt es links heraus und .acc-nav (overflow) schneidet es ab */ .acc-quick .acc-new-menu { left: 0; right: 0; min-width: 0; } .acc-search { margin-top: 10px; } .acc-search input { width: 100%; padding: 7px 10px; font-size: .88rem; border-radius: var(--radius-sm); } .acc-group > summary { list-style: none; cursor: pointer; user-select: none; } .acc-group > summary::-webkit-details-marker { display: none; } .acc-group > summary::before { content: "▾"; font-size: .7rem; width: 10px; transition: transform .15s; } .acc-group:not([open]) > summary::before { transform: rotate(-90deg); } .acc-group > summary:hover { color: var(--text); } .acc-group-list { display: grid; gap: 1px; } .stage-pick { display: inline-flex; align-items: center; gap: 8px; padding: 2px 4px 2px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); } .stage-pick select { border: 0; background: transparent; padding: 6px 4px; font-weight: 600; min-width: 0; } .stage-badge { display: inline-flex; align-items: center; gap: 7px; font-size: .86rem; white-space: nowrap; } .seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; } .seg a { padding: 7px 12px; font-size: .88rem; color: var(--muted); text-decoration: none; } .seg a + a { border-left: 1px solid var(--border); } .seg a[aria-current="page"] { background: var(--primary-soft); color: var(--primary); font-weight: 600; } .check-col { width: 36px; } .bulk-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .chip-check:has(input[type="checkbox"]:not(:checked)) { opacity: .55; text-decoration: none; } .search-wide { flex: 1; min-width: 220px; } .search-wide input { width: 100%; } .table-title { margin: 0; padding: 12px 18px 4px; font-size: .95rem; } /* Tafel */ .board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 12px; align-items: start; } .board-col { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; min-height: 160px; transition: background .12s, border-color .12s; } .board-col.over { background: var(--primary-soft); border-color: var(--primary); } .board-col-closed { opacity: .8; } .board-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px 10px; font-weight: 700; font-size: .9rem; } .board-head a { color: var(--text); text-decoration: none; flex: 1; } .board-cards { display: grid; gap: 8px; } .board-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; box-shadow: var(--shadow-sm); display: grid; gap: 4px; } .board-card[draggable="true"] { cursor: grab; } .board-card.dragging { opacity: .45; } .board-title { font-weight: 600; color: var(--text); text-decoration: none; line-height: 1.3; } .board-title:hover { color: var(--primary); } .board-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .board-move select { width: 100%; font-size: .8rem; padding: 3px 6px; color: var(--muted); } /* Vorgangsmappe */ .tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .task { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); } .task.due { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); background: var(--accent-soft); } .tree-cell { display: flex; align-items: flex-start; gap: 6px; } .tree-branch { color: var(--muted); margin-right: 2px; } .tree-d1 .tree-cell { padding-left: 14px; } .tree-d2 .tree-cell { padding-left: 34px; } .tree-d3 .tree-cell { padding-left: 54px; } .tree-d4 .tree-cell { padding-left: 74px; } .proof-comment { margin: 0; padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; white-space: pre-wrap; } .timeline .tl-proof::before, .timeline .tl-stage::before { background: var(--primary); } .timeline .tl-task::before { background: var(--accent); } .timeline .tl-file::before { background: var(--muted); } /* Dateien */ .file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; } .file-grid > .card { grid-column: 1 / -1; } .file-row { display: flex; flex-wrap: wrap; gap: 10px; } .file-row .file-card { width: 150px; } .file-card { margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; display: grid; } .file-card figcaption { display: grid; gap: 4px; padding: 8px 10px 10px; font-size: .86rem; min-width: 0; } .file-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); text-decoration: none; } .file-thumb { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--bg-soft); overflow: hidden; text-decoration: none; } .file-row > .file-thumb { width: 110px; border-radius: var(--radius-sm); border: 1px solid var(--border); } .file-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; } .file-ext { font-weight: 800; letter-spacing: .06em; color: var(--muted); font-size: .9rem; } .file-actions { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .file-actions form:first-child { flex: 1; min-width: 0; } .file-actions select { width: 100%; font-size: .8rem; padding: 3px 6px; } .upload-card { display: grid; gap: 10px; } .dropzone { display: grid; gap: 4px; place-items: center; text-align: center; padding: 22px 16px; border: 2px dashed var(--border); border-radius: var(--radius); cursor: pointer; position: relative; transition: border-color .12s, background .12s; } .dropzone.over, .dropzone:hover { border-color: var(--primary); background: var(--primary-soft); } .dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; max-height: 280px; overflow-y: auto; } .pick-file { display: grid; gap: 4px; padding: 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; font-weight: 400; position: relative; } .pick-file:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); } .pick-file input { position: absolute; top: 8px; left: 8px; } .pick-file img, .pick-file .file-ext { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--bg-soft); display: grid; place-items: center; border-radius: 4px; } .pick-file .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .proof-dialog { width: min(720px, calc(100vw - 32px)); } .qc-new > summary { list-style: none; width: fit-content; } .qc-new > summary::-webkit-details-marker { display: none; } .qc-new[open] > summary { margin-bottom: 10px; } .qc-new-fields { padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-soft); } /* Verwaltung: Phasen */ .stage-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .stage-form input[name="name"] { width: 180px; } .stage-new { padding-top: 12px; border-top: 1px solid var(--border); } .swatches { display: inline-flex; gap: 4px; } .swatch { width: 18px; height: 18px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; } .swatch:has(input:checked) { border-color: var(--text); box-shadow: 0 0 0 2px var(--surface) inset; } .order-col { width: 54px; white-space: nowrap; } .order-col .linkish:disabled, .cat-list .linkish:disabled { opacity: .3; } .cat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .cat-list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* Freigabeseite für Kunden */ .proof-page { padding-block: 32px 64px; display: grid; gap: 20px; } .proof-head h1 { margin: 4px 0 0; } .proof-files { display: grid; gap: 16px; } .proof-file { margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .proof-file img { display: block; width: 100%; max-height: 70vh; object-fit: contain; background: var(--bg-soft); } .proof-file .file-thumb { aspect-ratio: auto; padding: 40px; } .proof-file figcaption { padding: 10px 14px; } .proof-decide { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; } .proof-foot { text-align: center; } .stage-form > input, .stage-form > select { width: auto; flex: none; } .stage-form > select { min-width: 210px; } .stage-form .check { flex: none; align-items: center; } .timeline-compact li { grid-template-columns: 1fr; gap: 2px; padding: 10px 4px; } .pick-file input { z-index: 1; } @media (max-width: 860px) { .acc-search { grid-column: 1 / -1; margin-top: 4px; } .acc-quick { margin-top: 0; } .acc-nav nav, .acc-group-list { display: flex; flex-wrap: nowrap; gap: 4px; } .acc-group { flex: none; } .acc-group > summary { display: none; } } .stage-form > input[name="name"] { width: 170px; } .proof-page { max-width: 980px; } /* Freigabeseite: Entwurf als Seitenbild + Markieren (static/proof.js) */ .site-footer-bare .footer-bottom { border-top: 0; margin-top: 0; padding-top: 0; } .proof-tools { position: sticky; top: 8px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 4px 16px rgba(0,0,0,.06); } .proof-tools[hidden] { display: none; } .proof-tools-label { font-weight: 600; font-size: .92rem; } .proof-tools [data-tool][aria-pressed="true"] { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); } .proof-tools-hint { flex: 1 1 260px; } .proof-sheet .proof-canvas { position: relative; background: var(--bg-soft); line-height: 0; } .proof-sheet .proof-canvas img { width: 100%; height: auto; max-height: none; object-fit: fill; user-select: none; -webkit-user-select: none; } .proof-canvas canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .proof-drawing .proof-canvas canvas { pointer-events: auto; cursor: crosshair; touch-action: none; } [data-proof-tool="pin"] .proof-canvas canvas { cursor: copy; } .proof-pin-note { position: absolute; z-index: 2; width: min(260px, 60%); margin: 14px 0 0 14px; padding: 6px 8px; font: inherit; font-size: .88rem; line-height: 1.35; border: 2px solid #e11d48; border-radius: var(--radius-sm); background: var(--surface); color: var(--text); box-shadow: 0 4px 14px rgba(0,0,0,.15); resize: vertical; } .proof-pin-note.left { transform: translateX(-100%); margin-left: -14px; } .proof-marks-info { margin: 0; color: var(--primary); font-weight: 600; } .proof-marks-info[hidden] { display: none; } .ocr-text { margin-top: 12px; } .ocr-text pre { margin: 8px 0 0; max-height: 420px; overflow: auto; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: .8rem; line-height: 1.45; white-space: pre-wrap; user-select: text; } .auth-goal { margin: 0 0 14px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--primary-soft); color: var(--primary); font-weight: 600; font-size: .94rem; } .auth-alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border); font-size: .94rem; } .trial-start-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; } .trial-start-head p { margin: 0; } .rel-extra h3 { margin: 0 0 8px; font-weight: 700; } /* Eingangsrechnung: unsichtbare Textebene über dem Seitenbild (markieren & kopieren) */ .p-page { position: relative; container-type: inline-size; } .p-page img { display: block; } .p-textlayer { position: absolute; inset: 1px; overflow: hidden; line-height: 1; } .p-textlayer span { position: absolute; display: inline-block; overflow: hidden; white-space: pre; color: transparent; font-family: Arial, sans-serif; cursor: text; } .p-textlayer span::selection { background: color-mix(in srgb, var(--primary) 35%, transparent); color: transparent; } /* Buchhaltung-Menü: klare Gruppen-Überschriften, Punkte darunter eingerückt und normal gewichtet */ .acc-nav .acc-nav-h { margin: 16px 0 2px; padding: 6px 10px; font-size: .95rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--text); } .acc-nav .acc-nav-h::after { display: none; } .acc-nav .acc-group:first-of-type .acc-nav-h { margin-top: 6px; } .acc-nav .acc-group-list { margin-left: 14px; padding-left: 4px; border-left: 1px solid var(--border); } .acc-nav .acc-group-list a { font-weight: 400; font-size: .9rem; padding-top: 5px; padding-bottom: 5px; } .acc-nav nav a.acc-top { font-weight: 700; font-size: .95rem; } .acc-nav nav.acc-nav-admin a { color: var(--muted); font-size: .86rem; } .acc-nav nav.acc-nav-admin a:hover, .acc-nav nav.acc-nav-admin a[aria-current="page"] { color: var(--text); } @media (max-width: 860px) { .acc-nav .acc-nav-h { display: none; } .acc-nav .acc-group-list { margin: 0; padding: 0; border: 0; display: contents; } } /* Buchhaltung-Menü: jede Kategorie als eigener Kasten */ .acc-nav nav:not(.acc-nav-admin) { gap: 10px; } .acc-nav .acc-group { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .acc-nav .acc-group .acc-nav-h, .acc-nav .acc-group:first-of-type .acc-nav-h { margin: 0; padding: 9px 12px; background: var(--bg-soft); } .acc-nav .acc-group[open] .acc-nav-h { border-bottom: 1px solid var(--border); } .acc-nav .acc-group-list { margin: 0; padding: 4px; border-left: 0; } .acc-nav .acc-group-list a { padding-left: 8px; padding-right: 6px; gap: 6px; } @media (max-width: 860px) { .acc-nav .acc-group { display: contents; } } /* Support (Entwicklung → Support) */ .alert-info { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 30%, transparent); } .sup-box { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: -4px 0 14px; } .sup-err { color: var(--danger); } .sup-head { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; align-items: flex-start; } .sup-head p { margin: 0 0 12px; } .sup-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .sup-actions select { padding: 6px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); font: inherit; font-size: .9rem; } .sup-thread { display: flex; flex-direction: column; gap: 10px; } .sup-msg { border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; background: var(--surface); max-width: 92%; } .sup-msg header { margin-bottom: 4px; } .sup-msg .pre { white-space: pre-wrap; overflow-wrap: anywhere; } .sup-msg.sup-in { align-self: flex-start; background: var(--bg-soft); } .sup-msg.sup-out { align-self: flex-end; background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 25%, transparent); } .sup-msg.sup-note { align-self: stretch; max-width: none; background: color-mix(in srgb, #f59e0b 10%, var(--surface)); border-style: dashed; } .sup-msg.sup-notice { align-self: stretch; max-width: none; color: var(--muted); } .sup-buttons { display: flex; flex-wrap: wrap; gap: 8px; } .sup-spell { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; background: var(--bg-soft); } .sup-spell-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 3px 0; } .sup-spell-word { color: var(--danger); text-decoration: underline wavy var(--danger); font-weight: 600; } .sup-spell-ok { color: var(--success); margin: 0; } .sup-review-box { border-left: 3px solid var(--primary); padding: 6px 12px; background: var(--bg-soft); border-radius: 0 8px 8px 0; } .sup-review-box .pre, .sup-review .pre { white-space: pre-wrap; } .todo-prog { font-size: .75rem; } .sup-actions form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .sup-form input, .sup-form textarea, .sup-todo textarea { font-weight: 400; } /* Support: Bearbeitungsmodus */ .sup-start { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0 0 12px; } .sup-mode { position: sticky; top: 8px; z-index: 20; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; margin: 0 0 16px; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--primary) 8%, var(--surface)); box-shadow: var(--shadow-sm); } .sup-mode-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .sup-mode .sup-del { color: var(--danger); } /* Meine Programme: Pakete während der Testphase */ .k-offers { display: grid; gap: 8px; margin-bottom: 8px; } .k-offer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); } .k-offer-current { border-color: var(--primary); background: var(--primary-soft); } /* ── CI-Seite /marke/ (brand.py) ────────────────────────────────── */ .ci-ai { margin: 8px 0 22px; max-width: 760px; } .ci-ai p { margin: 4px 0 0; } .ci-toc { display: flex; flex-wrap: wrap; gap: 8px; } .ci-toc a { padding: 5px 14px; border: 1px solid var(--border); border-radius: 999px; text-decoration: none; color: var(--text); font-size: .92rem; background: var(--surface); } .ci-toc a:hover { border-color: var(--primary); color: var(--primary); } .ci-logos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); } .ci-logo { margin: 0; padding: 0; overflow: hidden; display: grid; } .ci-logo-stage { aspect-ratio: 16 / 7; display: grid; place-items: center; padding: 28px; border-bottom: 1px solid var(--border); } .ci-logo-stage img { max-height: 70px; width: auto; } .ci-logo-stage .logo { width: 72%; color: #fff; } .ci-logo-coral .logo-dot { fill: var(--z-coral); } .ci-logo figcaption { padding: 16px 20px 20px; display: grid; gap: 4px; font-size: .94rem; } .ci-logo figcaption a { font-size: .82rem; word-break: break-all; } .ci-gradient { background: linear-gradient(130deg, #2E609F, #1B3F72 60%, #07112A); color: #fff; } .ci-gradient-bar { border-radius: var(--radius); padding: 34px 24px; margin-top: 24px; font-weight: 600; } .ci-rules { margin: 24px 0 0; padding-left: 1.2em; display: grid; gap: 8px; max-width: 860px; } .ci-colors { grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); } .ci-color { display: grid; gap: 6px; align-content: start; padding: 0 0 18px; overflow: hidden; font-size: .92rem; } .ci-color > :not(.ci-swatch) { margin: 0 18px; justify-self: start; } .ci-swatch { height: 86px; border-bottom: 1px solid var(--border); margin-bottom: 8px; } .ci-color code { font-size: .82rem; } .ci-ratio { display: flex; margin-top: 16px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); font-size: .85rem; font-weight: 600; color: #fff; } .ci-ratio span { padding: 12px 14px; white-space: nowrap; overflow: hidden; } .ci-type-demo { padding: clamp(24px, 4vw, 44px); } .ci-type-h { font-size: clamp(1.8rem, 4.4vw, 3rem); letter-spacing: -.035em; max-width: 18ch; } .ci-type-h em { font-style: normal; color: var(--primary); background: linear-gradient(transparent 62%, var(--accent-soft) 62%); } .ci-dl { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 10px 24px; margin: 28px 0 0; } .ci-dl dt { font-weight: 700; } .ci-dl dd { margin: 0; color: var(--muted); } @media (max-width: 640px) { .ci-dl { grid-template-columns: 1fr; gap: 2px; } .ci-dl dd { margin-bottom: 12px; } } #formen .grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 40px; } .ci-gap, #sprache h3 { margin-top: 36px; } #sprache .table-wrap + p { margin-top: 20px; } .ci-table td { width: 50%; } .ci-product { margin-bottom: 20px; } .ci-product-head { display: flex; gap: 18px; align-items: flex-start; } .ci-product-head img { border-radius: 14px; flex: none; } .ci-product-head p { margin: 0 0 6px; } .ci-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: -2px; margin-right: 6px; } .ci-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px; margin-top: 16px; } .ci-shots img { border-radius: var(--radius-sm); border: 1px solid var(--border); aspect-ratio: 16 / 10; object-fit: cover; width: 100%; } .ci-admin { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-top: 32px; } /* Programm-CI auf der CI-Seite (brand.toml je Programm) */ .ci-prog { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); } .ci-prog h4 { margin: 0 0 6px; } .ci-prog h5 { margin: 0 0 6px; font-size: .95rem; } .ci-prog ul { margin: 0; padding-left: 18px; } .ci-prog li { margin: 3px 0; } .ci-slogans { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; margin: 12px 0; } .ci-slogan { padding: 14px 16px; border-radius: 14px; background: var(--bg-soft); display: grid; gap: 6px; } .ci-slogan-text { font-weight: 800; font-size: 1.15rem; line-height: 1.15; text-transform: uppercase; } .ci-slogan-text strong { color: var(--pa); } .ci-prog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; margin-top: 12px; } /* Testumgebung (nur SITE_DEMO=1) */ .demo-note { background: #f5c400; color: #1a1a1a; font-size: .8rem; font-weight: 600; text-align: center; padding: .3rem 1rem; }