/** * com_azsorbit — Frontend-Styles. * * Bewusst zurückhaltend und template-neutral: Farben werden vom Template * geerbt, es gibt keine festen Markenfarben. Kann in den Komponenten-Optionen * deaktiviert werden („Eigenes CSS laden"), wenn das Template alles selbst löst. */ /** * Farbtöne werden aus der Textfarbe des Templates abgeleitet (currentColor), * nicht aus dem Betriebssystem. * * WICHTIG: Hier NIEMALS `@media (prefers-color-scheme: dark)` verwenden. Das * folgt der Einstellung des Besuchers, nicht dem Template — auf einem hellen * Template ergibt das weiße Schrift auf weißem Grund. Über currentColor passen * sich Rahmen und gedämpfte Texte automatisch an helle wie dunkle Templates an. */ .azso { --azso-border: rgba(0, 0, 0, .14); --azso-muted: rgba(0, 0, 0, .55); --azso-soft: rgba(0, 0, 0, .03); } /** * Dunkles Template? Dann `azso-dark` am oder am Wrapper setzen. * Bewusst als ausdrückliche Entscheidung und NICHT über prefers-color-scheme * (siehe Hinweis oben). */ .azso-dark .azso, .azso.azso-dark { --azso-border: rgba(255, 255, 255, .20); --azso-muted: rgba(255, 255, 255, .68); --azso-soft: rgba(255, 255, 255, .05); } .azso-head { margin-bottom: 1.25rem; } .azso-eyebrow { margin: 0 0 .15rem; font-size: .95rem; color: var(--azso-muted); } .azso-title { margin: 0; line-height: 1.15; } .azso-intro { margin: 0 0 1.25rem; max-width: 60ch; color: var(--azso-muted); } /* ── Hinweise ─────────────────────────────────────────────────────────── */ .azso-note { padding: 1rem 1.25rem; border: 1px solid var(--azso-border); border-radius: .5rem; color: var(--azso-muted); } .azso-note--warn { border-color: rgba(180, 83, 9, .35); background: rgba(251, 191, 36, .1); color: inherit; } /* ── Übersichts-Kacheln ───────────────────────────────────────────────── */ .azso-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 640px) { .azso-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .azso-grid { grid-template-columns: repeat(3, 1fr); } } .azso-card { display: flex; flex-direction: column; gap: .25rem; padding: 1.25rem; border: 1px solid var(--azso-border); border-radius: .5rem; text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease; } .azso-card:hover, .azso-card:focus-visible { border-color: currentColor; transform: translateY(-2px); text-decoration: none; } .azso-card-title { font-size: 1.15rem; font-weight: 600; } .azso-card-sub, .azso-card-meta { font-size: .9rem; color: var(--azso-muted); } /* ── Allgemeiner Kontakt (z. B. Sammelpostfach) ───────────────────────── */ .azso-general { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1rem; margin-bottom: 1.25rem; padding: .85rem 1.1rem; border: 1px solid var(--azso-border); border-radius: .5rem; background: var(--azso-soft); } .azso-general-label { font-weight: 600; } .azso-general-pos { color: var(--azso-muted); } /* ── Suche ────────────────────────────────────────────────────────────── */ .azso-search { margin-bottom: 1rem; max-width: 22rem; } .azso-search input { width: 100%; padding: .55rem .85rem; border: 1px solid var(--azso-border); border-radius: .4rem; font: inherit; background: transparent; color: inherit; } .azso-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ── Tabelle ──────────────────────────────────────────────────────────── */ .azso-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .azso-table { width: 100%; border-collapse: collapse; font-size: .95rem; } .azso-table th, .azso-table td { padding: .7rem .85rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--azso-border); } .azso-table thead th { font-weight: 500; color: var(--azso-muted); white-space: nowrap; } .azso-table tbody tr.azso-row:hover { background: var(--azso-soft); } .azso-table .azso-name { font-weight: 600; white-space: nowrap; } .azso-table .azso-col-phone, .azso-table .azso-col-phone2, .azso-table .azso-col-mobile, .azso-table .azso-col-fax, .azso-table .azso-col-email { white-space: nowrap; } .azso-grouprow th { padding-top: 1.4rem; font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--azso-muted); border-bottom-width: 2px; } .azso-empty { color: var(--azso-muted); } .azso-noresults { padding: 2rem 0; text-align: center; color: var(--azso-muted); }