/*
* Gemeinsames Design der oeffentlichen Seiten ("Listing-Tool-Look").
*
* Herkunft: pages/listing-tool/listing-tool.css bzw. das Mockup
* docs/seo/mockups/listing-tool-landing.html - ruhige helle Flaechen,
* 1px-Linienraster statt Schatten, kleine Radien (3-4px), schmale
* Versal-Headlines, Monospace fuer Labels und Zahlen, gruener Akzent.
*
* ZWEI STUFEN, beide von views/kopf.php am gesetzt:
*
* .lt-body - der Rahmen: Farbtokens, Navigationsleiste, Seitengrund,
* Typografie, Buttons, Formularfelder, Fusszeile, dunkles
* Schema. Gilt auf JEDER Seite, auch im angemeldeten Bereich.
*
* .lt-public - zusaetzlich auf den oeffentlichen Seiten: Panels, Tabellen,
* Dialoge, das Vokabular aus css/home.css, Preistabelle,
* Kontaktseite, FAQ und die 1180px-Bahn. Diese Regeln greifen
* tief in den Seiteninhalt ein - die Werkzeugseiten des
* angemeldeten Bereichs (Editor, Listener, Rechnungen) bringen
* dafuer eigene Raster mit und bleiben vorerst aussen vor.
*
* Ohne Klasse bleibt eine Seite komplett unberuehrt (Preise, Vorlagen,
* Registrierung) - dort gilt weiter css/global.css mit --home-blue /
* --home-green.
*
* Diese Datei ueberschreibt drei Ebenen:
* 1. Bootstrap 3 (Buttons, Formulare, Tabellen, Panels)
* 2. css/home.css (.frame, .content, .section-header, .pricing-table ...)
* 3. css/global.css (Navigationsleiste, Seitenhintergrund)
* Deshalb steht sie in kopf.php NACH global.css; gegen die spaeter im Body
* eingebundene home.css gewinnt sie ueber die hoehere Spezifitaet
* (.lt-body bzw. .lt-body.lt-public).
*
* Siehe docs/seo/oeffentliches-design.md
*/
/* --- Farb- und Schrifttokens ------------------------------------------- */
.lt-body {
--lt-ground: #f1f3f1;
--lt-surface: #ffffff;
--lt-surface-2: #f7f9f8;
--lt-ink: #0f1917;
--lt-muted: #5c6b67;
--lt-line: #dbe2de;
--lt-line-soft: #e7edea;
--lt-accent: #0b6e5f;
--lt-accent-ink: #ffffff;
--lt-accent-wash: #e4f0ed;
--lt-accent-light: #3dbba2;
--lt-bonus: #a85f0b;
--lt-bonus-wash: #fbf0df;
--lt-bad: #a3372c;
--lt-shadow: 0 1px 2px rgba(15, 25, 23, .05), 0 8px 24px -16px rgba(15, 25, 23, .25);
--lt-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
--lt-font-display: "Roboto Condensed", "Arial Narrow", "Liberation Sans Narrow", system-ui, sans-serif;
--lt-font-mono: ui-monospace, "Roboto Mono", "SFMono-Regular", Consolas, monospace;
}
/* --- Navigationsleiste -------------------------------------------------- *
* Die Leiste steht ausserhalb des Seiteninhalts, die Tokens auf .lt-body
* greifen hier aber, weil sie am body haengen.
*/
/* --lt-nav / --lt-nav-ink setzt das gewaehlte Farbthema (css/lt-palettes.css).
Ohne Thema bleibt es beim bisherigen Bild: Leiste in der Schriftfarbe. */
.lt-body .navbar-inverse {
background-color: var(--lt-nav, var(--lt-ink));
border-color: var(--lt-nav, var(--lt-ink));
border-bottom: 1px solid var(--lt-accent);
box-shadow: none;
}
.lt-body .navbar-inverse .navbar-nav > li > a,
.lt-body .navbar-inverse .navbar-brand {
color: var(--lt-nav-ink, #cfdad6);
font-size: 14px;
}
.lt-body .navbar-inverse .navbar-nav > li > a:hover,
.lt-body .navbar-inverse .navbar-nav > li > a:focus {
color: var(--lt-accent-light);
background-color: transparent;
}
.lt-body .navbar-inverse .navbar-nav > .open > a,
.lt-body .navbar-inverse .navbar-nav > .open > a:hover,
.lt-body .navbar-inverse .navbar-nav > .open > a:focus,
.lt-body .navbar-inverse .navbar-nav > .active > a,
.lt-body .navbar-inverse .navbar-nav > .active > a:hover {
background-color: var(--lt-accent);
color: #ffffff;
}
.lt-body .navbar-inverse .navbar-toggle {
border-color: #2c3f3a;
}
.lt-body .navbar-inverse .navbar-toggle:hover,
.lt-body .navbar-inverse .navbar-toggle:focus {
background-color: var(--lt-accent);
}
.lt-body .navbar-inverse .navbar-collapse,
.lt-body .navbar-inverse .navbar-form {
border-color: #22302c;
}
.lt-body .navbar-inverse .dropdown-menu {
border: 1px solid var(--lt-line);
border-radius: 0 0 3px 3px;
box-shadow: var(--lt-shadow);
padding: 6px 0;
}
.lt-body .navbar-inverse .dropdown-menu > li > a {
padding: 7px 18px;
color: var(--lt-ink);
font-size: 14px;
}
.lt-body .navbar-inverse .dropdown-menu > li > a:hover,
.lt-body .navbar-inverse .dropdown-menu > li > a:focus {
background: var(--lt-accent-wash);
color: var(--lt-accent);
}
.lt-body .navbar-inverse .dropdown-menu .divider {
background-color: var(--lt-line-soft);
}
.lt-body .navbar-inverse .dropdown-header {
font-family: var(--lt-font-mono);
font-size: 11px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--lt-muted);
}
/* --- Seitengrund und Typografie ---------------------------------------- */
.lt-body {
/* !important, weil css/dashboard.css (die Kontaktseite bindet sie ein)
`body { background-color: var(--bg-color) !important }` setzt. Ohne das
hier blieb die Kontaktseite im Dunkelmodus hellgrau, waehrend die Schrift
schon hell war - unlesbar. */
background-color: var(--lt-ground) !important;
color: var(--lt-ink);
font-family: var(--lt-font) !important;
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
.lt-body h1,
.lt-body h2,
.lt-body h3,
.lt-body h4 {
font-family: var(--lt-font-display);
font-weight: 700;
line-height: 1.08;
letter-spacing: .005em;
text-transform: uppercase;
color: var(--lt-ink);
}
.lt-body h1 {
font-size: clamp(30px, 4.4vw, 48px);
}
.lt-body h2 {
font-size: clamp(24px, 3vw, 34px);
}
.lt-body h3 {
font-size: 20px;
letter-spacing: .01em;
}
.lt-body h4 {
font-size: 16px;
letter-spacing: .02em;
}
.lt-body a {
color: var(--lt-accent);
}
.lt-body a:hover,
.lt-body a:focus {
color: var(--lt-accent);
text-decoration: underline;
}
.lt-body :focus-visible {
outline: 2px solid var(--lt-accent);
outline-offset: 3px;
}
.lt-body hr,
.lt-body .featurette-divider {
border-top: 1px solid var(--lt-line);
border-bottom: 0;
margin: 34px 0;
}
/* Kleines Label ueber einer Ueberschrift - dieselbe Rolle wie .lt-eyebrow
auf der Landingpage, hier fuer Seiten ohne eigenes Markup. */
.lt-body .lt-eyebrow {
font-family: var(--lt-font-mono);
font-size: 12px;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--lt-muted);
margin: 0 0 10px 0;
}
/* --- Buttons ------------------------------------------------------------ */
.lt-body .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 11px 20px;
border-radius: 3px;
border: 1px solid transparent;
font-family: var(--lt-font);
font-weight: 700;
font-size: 15px;
line-height: 1.2;
text-shadow: none;
box-shadow: none;
background-image: none;
white-space: normal;
transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.lt-body .btn:active {
transform: translateY(1px);
box-shadow: none;
}
.lt-body .btn-primary,
.lt-body .btn-primary:focus,
.lt-body .btn-success,
.lt-body .btn-success:focus {
background: var(--lt-accent);
border-color: var(--lt-accent);
color: var(--lt-accent-ink);
}
.lt-body .btn-primary:hover,
.lt-body .btn-success:hover {
filter: brightness(1.12);
background: var(--lt-accent);
border-color: var(--lt-accent);
color: var(--lt-accent-ink);
}
.lt-body .btn-default,
.lt-body .btn-default:focus {
background: transparent;
border-color: var(--lt-line);
color: var(--lt-ink);
}
.lt-body .btn-default:hover {
background: transparent;
border-color: var(--lt-ink);
color: var(--lt-ink);
}
.lt-body .btn-danger,
.lt-body .btn-danger:focus {
background: var(--lt-bad);
border-color: var(--lt-bad);
color: #fff;
}
.lt-body .btn-lg {
padding: 14px 24px;
font-size: 16px;
}
.lt-body .btn-sm,
.lt-body .btn-xs {
padding: 7px 13px;
font-size: 13px;
}
/* --- Formulare ---------------------------------------------------------- */
.lt-body .form-control,
.lt-body input[type="text"],
.lt-body input[type="email"],
.lt-body input[type="password"],
.lt-body input[type="number"],
.lt-body select,
.lt-body textarea {
background: var(--lt-surface);
border: 1px solid var(--lt-line);
border-radius: 3px;
box-shadow: none;
color: var(--lt-ink);
font-family: var(--lt-font);
font-size: 15px;
height: auto;
padding: 10px 12px;
}
.lt-body .form-control:focus,
.lt-body select:focus,
.lt-body textarea:focus {
border-color: var(--lt-accent);
box-shadow: none;
outline: none;
}
.lt-body.lt-public label,
.lt-body.lt-public .control-label {
font-family: var(--lt-font-mono);
font-size: 12px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--lt-muted);
font-weight: 400;
}
/* --- Flaechen: Panels, Wells, Boxen ------------------------------------- */
.lt-body.lt-public .panel,
.lt-body.lt-public .well,
.lt-body.lt-public .thumbnail {
background: var(--lt-surface);
border: 1px solid var(--lt-line);
border-radius: 4px;
box-shadow: none;
}
.lt-body.lt-public .panel-heading {
background: var(--lt-surface-2);
border-bottom: 1px solid var(--lt-line);
border-radius: 4px 4px 0 0;
font-family: var(--lt-font-mono);
font-size: 12px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--lt-muted);
}
.lt-body.lt-public .panel-title {
font-family: var(--lt-font-display);
text-transform: uppercase;
font-size: 18px;
}
.lt-body.lt-public .alert {
border-radius: 3px;
border: 1px solid var(--lt-line);
background: var(--lt-surface-2);
color: var(--lt-ink);
}
.lt-body.lt-public .alert-success {
border-color: rgba(11, 110, 95, .32);
background: var(--lt-accent-wash);
color: var(--lt-accent);
}
.lt-body.lt-public .alert-danger {
border-color: rgba(163, 55, 44, .32);
background: #fbeceb;
color: var(--lt-bad);
}
.lt-body.lt-public .alert-warning,
.lt-body.lt-public .alert-info {
border-color: rgba(168, 95, 11, .3);
background: var(--lt-bonus-wash);
color: var(--lt-bonus);
}
/* --- Tabellen ----------------------------------------------------------- */
.lt-body.lt-public .table {
background: var(--lt-surface);
border: 1px solid var(--lt-line);
border-radius: 4px;
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
}
.lt-body.lt-public .table > thead > tr > th {
background: var(--lt-surface-2);
border-bottom: 1px solid var(--lt-line);
font-family: var(--lt-font-mono);
font-size: 12px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--lt-muted);
font-weight: 400;
padding: 13px 16px;
}
.lt-body.lt-public .table > tbody > tr > td {
border-top: 1px solid var(--lt-line-soft);
padding: 13px 16px;
font-size: 15px;
}
.lt-body.lt-public .table-striped > tbody > tr:nth-of-type(odd) {
background: var(--lt-surface-2);
}
/* --- Modale Dialoge ----------------------------------------------------- */
.lt-body.lt-public .modal-content {
border: 1px solid var(--lt-line);
border-radius: 5px;
box-shadow: var(--lt-shadow);
}
.lt-body.lt-public .modal-header {
border-bottom: 1px solid var(--lt-line);
}
.lt-body.lt-public .modal-title {
font-family: var(--lt-font-display);
text-transform: uppercase;
letter-spacing: .01em;
}
.lt-body.lt-public .modal-footer {
border-top: 1px solid var(--lt-line);
}
/* --- Vokabular aus css/home.css ---------------------------------------- *
* Die oeffentlichen Seiten (Preise, Vorlagen, Kontakt, Rechtstexte) sind mit
* diesen Klassen gebaut. Sie werden hier umgefaerbt, statt in jeder Seite
* das Markup zu tauschen - so bleibt der Diff klein und keine Seite faellt
* durchs Raster.
*/
/* home.css gibt .frame 80px Innenabstand und 80% Breite. Hier stattdessen
dieselbe Bahn wie auf der Landingpage (zentriert, max. 1180px).
Die 15px bleiben stehen: Bootstrap-Zeilen (.row) haben -15px Aussenabstand
und stuenden sonst seitlich ueber - auf der Vorlagenseite waren das 15px
waagerechter Ueberlauf. */
.lt-body.lt-public .frame,
.lt-body.lt-public .frame2 {
padding-left: 15px;
padding-right: 15px;
width: auto;
max-width: 1180px;
margin: 0 auto;
}
.lt-body.lt-public .bg-grey,
.lt-body.lt-public .img-background {
background-color: var(--lt-surface-2);
}
.lt-body.lt-public .green {
color: var(--lt-accent);
}
/* Abschnittsueberschrift: statt blau/orange mit Unterstrich jetzt das
Eyebrow-Raster der Landingpage. */
.lt-body.lt-public .section-header {
max-width: 70ch;
margin: 0 0 34px 0;
}
.lt-body.lt-public .section-header h1,
.lt-body.lt-public .section-header h2 {
color: var(--lt-ink);
font-family: var(--lt-font-display);
text-transform: uppercase;
padding-bottom: 16px;
position: relative;
}
.lt-body.lt-public .section-header h1::before,
.lt-body.lt-public .section-header h2::before {
background: var(--lt-accent);
height: 2px;
width: 44px;
}
.lt-body.lt-public .section-header p {
color: var(--lt-muted);
font-size: 17px;
line-height: 1.55;
margin-top: 14px;
}
.lt-body.lt-public .content {
padding: clamp(38px, 5vw, 64px) 0;
border-top: 1px solid var(--lt-line);
}
.lt-body.lt-public .content h2 {
color: var(--lt-ink);
font-family: var(--lt-font-display);
font-size: clamp(24px, 3vw, 34px);
text-transform: uppercase;
}
.lt-body.lt-public .content h3 {
color: var(--lt-muted);
font-family: var(--lt-font);
font-style: normal;
font-size: 17px;
font-weight: 400;
line-height: 1.55;
text-transform: none;
}
.lt-body.lt-public .content p {
line-height: 1.6;
color: var(--lt-muted);
}
.lt-body.lt-public .content i {
color: var(--lt-accent);
}
.lt-body.lt-public .content ul li {
padding-bottom: 8px;
}
/* Kachel-Vokabular: flache Flaeche mit 1px-Linie statt Schlagschatten. */
.lt-body.lt-public #services .box,
.lt-body.lt-public .article-box {
background: var(--lt-surface);
border: 1px solid var(--lt-line);
border-radius: 4px;
box-shadow: none;
transition: border-color .15s ease;
}
.lt-body.lt-public #services .box:hover,
.lt-body.lt-public .article-box:hover {
border-color: var(--lt-accent);
box-shadow: none;
}
.lt-body.lt-public #services .box .icon i,
.lt-body.lt-public #services .box .icon i:before {
color: var(--lt-accent);
}
.lt-body.lt-public #services .box h4,
.lt-body.lt-public #services .box h4 a {
color: var(--lt-ink);
font-family: var(--lt-font-display);
text-transform: uppercase;
}
.lt-body.lt-public #services .box p,
.lt-body.lt-public .article-box p {
color: var(--lt-muted);
}
.lt-body.lt-public .home-title {
font-family: var(--lt-font-display);
text-transform: uppercase;
color: var(--lt-ink);
}
.lt-body.lt-public .home-text-title {
font-family: var(--lt-font-display);
text-transform: uppercase;
color: var(--lt-ink);
}
.lt-body.lt-public .home-text {
color: var(--lt-muted);
}
/* --- Preistabelle (pages/prices, modules/price) ------------------------- */
.lt-body.lt-public .pricing-table .block-heading h2 {
color: var(--lt-ink);
font-family: var(--lt-font-display);
text-transform: uppercase;
}
.lt-body.lt-public .pricing-table .block-heading p {
color: var(--lt-muted);
}
.lt-body.lt-public .pricing-table .item {
background: var(--lt-surface);
border: 1px solid var(--lt-line);
border-radius: 4px;
box-shadow: none;
}
.lt-body.lt-public .pricing-table .item:hover {
border-color: var(--lt-accent);
box-shadow: none;
}
.lt-body.lt-public .pricing-table .heading h3,
.lt-body.lt-public .pricing-table .heading {
font-family: var(--lt-font-mono);
font-size: 12px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--lt-muted);
}
.lt-body.lt-public .pricing-table .price h4,
.lt-body.lt-public .pricing-table .price {
font-family: var(--lt-font-display);
color: var(--lt-ink);
}
.lt-body.lt-public .pricing-table .ribbon {
background: var(--lt-bonus);
color: #fff;
font-family: var(--lt-font-mono);
font-size: 11px;
letter-spacing: .1em;
text-transform: uppercase;
}
.lt-body.lt-public .pricing-table .features .feature {
color: var(--lt-muted);
font-size: 15px;
}
.lt-body.lt-public .price-features li::before {
color: var(--lt-accent);
}
/* --- Fusszeile ---------------------------------------------------------- */
.lt-body .fuss {
background: var(--lt-ink);
color: #cfdad6;
border-top: 1px solid var(--lt-accent);
}
.lt-body .fuss a {
color: #cfdad6;
}
.lt-body .fuss a:hover {
color: var(--lt-accent-light);
text-decoration: none;
}
.lt-body .fuss ul {
padding: 0;
margin: 0;
}
.lt-body .fuss li {
list-style: none;
padding: 3px 0;
font-size: 14px;
}
.lt-body .fuss address {
font-size: 14px;
line-height: 1.6;
}
/* --- Kontaktseite (home.css #contact) ---------------------------------- */
.lt-body.lt-public #contact .contact-info i,
.lt-body.lt-public #contact .contact-info a:hover {
color: var(--lt-accent);
}
.lt-body.lt-public #contact .contact-info address,
.lt-body.lt-public #contact .contact-info p,
.lt-body.lt-public #contact .contact-info a {
color: var(--lt-ink);
}
.lt-body.lt-public #contact .contact-info h3 {
color: var(--lt-muted);
font-family: var(--lt-font-mono);
font-size: 12px;
letter-spacing: .12em;
}
.lt-body.lt-public #contact .contact-phone {
border-left-color: var(--lt-line);
border-right-color: var(--lt-line);
}
.lt-body.lt-public #contact .form input[type="button"] {
background: var(--lt-accent);
border-radius: 3px;
color: var(--lt-accent-ink);
font-weight: 700;
}
.lt-body.lt-public #contact .form input[type="button"]:hover {
background: var(--lt-accent);
filter: brightness(1.12);
}
.lt-body.lt-public #contact .form #sendmessage {
color: var(--lt-accent);
border-color: var(--lt-accent);
}
.lt-body.lt-public #contact .form #errormessage,
.lt-body.lt-public #contact .form .validation {
color: var(--lt-bad);
border-color: var(--lt-bad);
}
/* --- Dunkles Farbschema ------------------------------------------------- *
* Umgeschaltet ueber data-lt-theme am (js/lt-theme-toggle.js, der
* Schalter sitzt in der Navigationsleiste). Standard ist HELL - die
* Systemeinstellung des Besuchers (prefers-color-scheme) wird bewusst nicht
* ausgewertet, dunkel bekommt nur, wer den Schalter benutzt.
*
* Gilt auf JEDER Seite. Damit das auch im angemeldeten Bereich lesbar bleibt,
* wo die Farben noch im jeweils eigenen CSS der Seite stecken, folgt weiter
* unten eine Vertraeglichkeitsschicht ("Dunkelmodus: Vertraeglichkeit").
*
* Das Attribut haengt bewusst am und nicht am : gesetzt wird es
* von einem Skript im , und dort gibt es noch keinen body. Ein
* Inline-Skript nach waere die Alternative gewesen - das verbieten
* aber die strengeren CSP-Regeln von /login/ und /contact/ (script-src 'self').
*
* Es werden ausschliesslich Tokens neu gesetzt - einmal fuer .lt-body und
* einmal fuer #listing-tool-page, weil die Landingpage ihre eigene Kopie der
* Tokens mitbringt (pages/listing-tool/listing-tool.css).
*/
[data-lt-theme="dark"] .lt-body,
[data-lt-theme="dark"] .lt-body #listing-tool-page {
--lt-ground: #0d1513;
--lt-surface: #131f1c;
--lt-surface-2: #182724;
--lt-ink: #e6ede9;
--lt-muted: #9aaaa5;
--lt-line: #26382f;
--lt-line-soft: #1e2d29;
--lt-accent: #3dbba2;
--lt-accent-ink: #05201b;
--lt-accent-wash: #12312b;
--lt-accent-light: #6fd6c1;
--lt-bonus: #e2a24a;
--lt-bonus-wash: #2a2116;
--lt-bad: #e0796c;
--lt-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px -16px rgba(0, 0, 0, .8);
}
/* Im Dunkelmodus ist die Leiste heller als der Seitengrund, sonst
verschwindet die Kante zwischen beiden. */
[data-lt-theme="dark"] .lt-body .navbar-inverse {
background-color: var(--lt-nav, var(--lt-surface));
border-color: var(--lt-nav, var(--lt-surface));
}
[data-lt-theme="dark"] .lt-body .fuss {
background: var(--lt-surface);
}
/* Bootstrap-Reste, die feste helle Werte mitbringen. */
.lt-body .modal-content,
.lt-body .dropdown-menu {
background-color: var(--lt-surface);
color: var(--lt-ink);
}
.lt-body .close {
color: var(--lt-ink);
text-shadow: none;
opacity: .7;
}
/* --- Umschalter Hell/Dunkel -------------------------------------------- */
.lt-themeswitch {
background: none;
border: 1px solid #2c3f3a;
border-radius: 3px;
color: #cfdad6;
cursor: pointer;
line-height: 1;
margin: 10px 6px 0 6px;
padding: 7px 10px;
}
.lt-themeswitch:hover,
.lt-themeswitch:focus {
border-color: var(--lt-accent-light);
color: var(--lt-accent-light);
}
.lt-themeswitch__ico {
display: block;
height: 17px;
width: 17px;
}
/* Nur das jeweils passende Symbol zeigen: Mond im hellen Modus (= "schalte
auf dunkel"), Sonne im dunklen. */
.lt-themeswitch__ico--sun {
display: none;
}
[data-lt-theme="dark"] .lt-body .lt-themeswitch__ico--sun {
display: block;
}
[data-lt-theme="dark"] .lt-body .lt-themeswitch__ico--moon {
display: none;
}
@media (max-width: 767px) {
.lt-themeswitch {
margin: 8px 15px;
}
}
/* --- Waagerechter Ueberlauf unter 1000px -------------------------------- *
* css/global.css nimmt .container ab 1000px abwaerts den Innenabstand
* (`padding: 0`). Bootstrap-Zeilen (.row) haben aber -15px Aussenabstand und
* standen dadurch 15px ueber den Bildschirmrand hinaus - die Seite liess sich
* seitlich schieben. Hier nur fuer die oeffentlichen Seiten zurueckgeholt.
*/
@media (max-width: 1000px) {
.lt-body.lt-public .container {
padding-left: 15px;
padding-right: 15px;
}
}
/* --- Hinweisbalken der Testumgebung ------------------------------------- *
* views/test-page-notification.php bringt `background-color: aliceblue` und
* `color: red` mit. Auf hellblauem Grund hatte der gruene Link nur 2.2:1
* Kontrast - hier auf die Flaechen des Designs umgestellt (der Balken laeuft
* nur auf Test- und Entwicklungsdomains, aber eben taeglich).
*/
.lt-body .test-info {
background-color: var(--lt-bonus-wash);
border-bottom: 1px solid var(--lt-line);
color: var(--lt-bonus);
}
.lt-body .test-info a:not(.btn) {
color: var(--lt-bonus);
text-decoration: underline;
}
/* --- Breite Bildschirme: eine gemeinsame Bahn --------------------------- *
* css/global.css zieht .container site-weit auf width:100%. Auf grossen
* Bildschirmen laeuft der Inhalt dadurch bis an beide Raender. Die
* Landingpage deckelt sich seit jeher auf 1180px - dieselbe Bahn gilt jetzt
* fuer alle oeffentlichen Seiten, damit die Navigationsleiste ueberall an
* derselben Kante steht (vorher war sie nur auf der Startseite zentriert,
* auf Kontakt und Anmelden dagegen ueber die volle Breite gezogen).
*
* Die Fusszeile bleibt aussen vor (`:not(.fuss)`): sie ist eine durchgehende
* dunkle Flaeche und war auch auf der Startseite nie eingerueckt.
*/
@media (min-width: 1500px) {
/* Die Navigationsleiste steht auf JEDER Seite auf der Bahn - auch im
angemeldeten Bereich. Sonst klebt das Menue auf breiten Bildschirmen
am linken Rand, waehrend es auf Handbuch, Startseite & Co. mittig
sitzt. */
.lt-body .navbar-fixed-top .container {
max-width: 1180px;
margin-left: auto;
margin-right: auto;
}
/* Im angemeldeten Bereich ist das Menue deutlich laenger (Rechnung,
Editor, Kategorien, Werkzeuge, Benutzer, Videos, dazu rechts die
eBay-Kontenwahl, die Glocke, die Sprachwahl und der Hell/Dunkel-
Schalter). Auf der 1180px-Bahn blieb rechts kein Platz, und die Glocke
fiel unter die Leiste. Diese Seiten bekommen darum eine breitere Bahn -
ihr Inhalt laeuft ohnehin ueber die volle Breite. Die oeffentlichen
Seiten (.lt-public) behalten die 1180px und damit die gemeinsame Kante
mit ihrem Inhalt. */
.lt-body:not(.lt-public) .navbar-fixed-top .container {
max-width: 1400px;
}
/* Der INHALT dagegen nur auf den oeffentlichen Seiten: die Werkzeugseiten
brauchen die volle Breite fuer ihre Tabellen. */
.lt-body.lt-public .container:not(.fuss) {
max-width: 1180px;
margin-left: auto;
margin-right: auto;
}
}
/* --- FAQ (pages/faq mit css/faq.css) ------------------------------------ *
* faq.css schreibt feste helle Werte (#ffffff als Flaeche, #2B3648 /
* #4b5863 als Schrift). Im dunklen Schema stand dunkelblaue Schrift auf
* dunklem Grund - Kontrast 1.4:1. Hier auf die Tokens umgestellt, damit
* beide Schemata stimmen.
*/
.lt-body.lt-public .faqHeader {
color: var(--lt-ink);
font-family: var(--lt-font-display);
text-transform: uppercase;
}
.lt-body.lt-public #accordion .panel,
.lt-body.lt-public .panel-default > .panel-heading,
.lt-body.lt-public .panel-heading {
background-color: var(--lt-surface);
border-color: var(--lt-line);
color: var(--lt-ink);
}
.lt-body.lt-public .panel-heading:hover {
background-color: var(--lt-surface-2);
}
.lt-body.lt-public .panel-body {
background-color: var(--lt-surface);
color: var(--lt-muted);
}
.lt-body.lt-public .accordion-toggle,
.lt-body.lt-public .panel-heading [data-toggle="collapse"],
.lt-body.lt-public .panel-heading [data-toggle="collapse"]:after {
color: var(--lt-ink);
}
.lt-body.lt-public .panel-heading [data-toggle="collapse"].collapsed:after {
color: var(--lt-muted);
}
/* --- Vom Browser ausgefuellte Felder (Autofill) -------------------------- *
* Chrome und Edge malen ausgefuellte Felder mit einer eigenen hellblauen
* Flaeche (#e8f0fe) und ignorieren dabei `background-color` - im Dunkelmodus
* leuchteten die Anmeldefelder deshalb weiss, sobald der Passwortmanager sie
* gefuellt hatte.
*
* Ueber die Flaeche kommt man nur mit einem Innenschatten: der wird gezeichnet
* wie ein Hintergrund, unterliegt aber nicht der Autofill-Sonderbehandlung.
* Die Schriftfarbe braucht -webkit-text-fill-color, `color` allein zieht dort
* ebenfalls nicht.
*
* Der lange transition-Wert ist der uebliche Kniff: Chrome blendet seine
* Farbe kurz nach dem Ausfuellen ein - mit einer praktisch endlosen
* Uebergangszeit bleibt sie unsichtbar.
*/
.lt-body input:-webkit-autofill,
.lt-body input:-webkit-autofill:hover,
.lt-body input:-webkit-autofill:focus,
.lt-body input:-webkit-autofill:active,
.lt-body textarea:-webkit-autofill,
.lt-body select:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px var(--lt-surface) inset;
box-shadow: 0 0 0 1000px var(--lt-surface) inset;
-webkit-text-fill-color: var(--lt-ink);
caret-color: var(--lt-ink);
border-color: var(--lt-line);
transition: background-color 5000s ease-in-out 0s;
}
/* Firefox faerbt Autofill ueber eine eigene Pseudoklasse. */
.lt-body input:autofill,
.lt-body textarea:autofill,
.lt-body select:autofill {
background-color: var(--lt-surface) !important;
color: var(--lt-ink);
filter: none;
}
/* --- Dunkelmodus: Vertraeglichkeit ------------------------------------- *
* Die oeffentlichen Seiten laufen ueber die Tokens und kippen sauber ins
* Dunkle. Der angemeldete Bereich tut das NICHT: dort stehen Flaechen und
* Schriftfarben in ~60 eigenen Stylesheets, meist hart als #fff / #333 / #555.
* Ohne die Schicht hier waere der Umschalter dort ein Knopf, der Seiten
* unlesbar macht (gemessen auf pages/home: 36 Textstellen unter 4.5:1).
*
* Die Schicht macht zwei Dinge, und zwar NUR im dunklen Schema:
* 1. Sie zieht die ueblichen Container-Flaechen auf die dunklen Tokens.
* 2. Sie setzt die Schriftfarbe der ueblichen Textelemente auf --lt-ink.
*
* Ausgenommen bleibt alles, was Farbe als BEDEUTUNG traegt: .text-success und
* Verwandte, Bootstrap-Label/Badges, Buttons, Alerts, die Statusfarben der
* Anwendung (.green/.red/.orange) und alles innerhalb der Vorlagen-Vorschau -
* dort zeigt der Rahmen fremdes HTML, das nicht umgefaerbt werden darf.
*
* Das ist bewusst grob. Sauberer ist es, die Farben der jeweiligen Seite auf
* Tokens umzustellen; dann kann die Ausnahme hier wieder schrumpfen.
* Siehe docs/seo/oeffentliches-design.md
*/
/* Die Flaechen mit !important: die Anwendung setzt sie teils ueber
ID-Selektoren (#services .box), gegen die eine Klassenregel nicht ankommt.
Bei einem Hintergrund ist das unbedenklich - Farbe traegt dort keine
Bedeutung. Die Schriftfarben weiter unten kommen bewusst OHNE !important
aus, damit rote Warnungen und gruene Erfolgsmeldungen rot und gruen
bleiben. */
/* Die Anwendung hat laengst eigene Farbvariablen (css/dashboard.css:
--bg-color, --card-bg, --sidebar-bg, --text-color, --text-muted,
--border-color). Sie im dunklen Schema umzubelegen ist der kuerzeste Hebel:
alles, was sie benutzt, zieht mit - z. B. die klebende Kopfzeile der
Artikeluebersicht (`#article_list thead td { background: var(--card-bg) }`),
die sonst weiss ueber der dunklen Tabelle stand. */
/* Ueber die Tokens, NICHT ueber feste Werte: sonst bliebe der angemeldete
Bereich im Hausgruen stehen, waehrend Leiste und Knoepfe laengst die Farbe
des gewaehlten Themas tragen (css/lt-palettes.css belegt genau diese Tokens
um). Genau das war der Fehler, als die Farbthemen dazukamen.
Die Umbelegung gilt NUR im ausdruecklich gewaehlten dunklen Schema - genau
wie der Rest dieser Schicht, und zwar als EINE Einheit aus Flaechen und
Schrift. Eine kurze Fassung dieser Regel stand einmal ungeschuetzt an
`.lt-body` (Flaechen in beiden Schemata, Schrift nur dunkel). Das ergab fuer
Besucher mit dunkel eingestelltem System, die den Umschalter nie angefasst
haben, dunkle Flaechen aus den Tokens UND die helle Anwendungsschrift
(#2B3674) darauf: 1.53:1, unlesbar. Flaechen und Schrift gehoeren deshalb
unter dieselbe Bedingung.
Preis dafuer: im hellen Schema behaelt der angemeldete Bereich die
Neutraltoene der Anwendung, das Thema traegt dort ueber Leiste, Knoepfe,
Links und die Panel-Regeln von lt-theme.css. */
[data-lt-theme="dark"] .lt-body {
--bg-color: var(--lt-ground);
--sidebar-bg: var(--lt-surface);
--card-bg: var(--lt-surface);
--border-color: var(--lt-line);
--text-color: var(--lt-ink);
--text-muted: var(--lt-muted);
}
[data-lt-theme="dark"] .lt-body .panel,
[data-lt-theme="dark"] .lt-body .panel-body,
[data-lt-theme="dark"] .lt-body .well,
[data-lt-theme="dark"] .lt-body .thumbnail,
[data-lt-theme="dark"] .lt-body .card,
[data-lt-theme="dark"] .lt-body .box,
[data-lt-theme="dark"] .lt-body .article-box,
[data-lt-theme="dark"] .lt-body .testimonial-item,
[data-lt-theme="dark"] .lt-body .modal-content,
[data-lt-theme="dark"] .lt-body .dropdown-menu,
[data-lt-theme="dark"] .lt-body .list-group-item,
[data-lt-theme="dark"] .lt-body .tab-content,
[data-lt-theme="dark"] .lt-body .main-content,
[data-lt-theme="dark"] .lt-body .content-area {
background-color: var(--lt-surface) !important;
border-color: var(--lt-line);
color: var(--lt-ink);
}
[data-lt-theme="dark"] .lt-body .panel-heading,
[data-lt-theme="dark"] .lt-body .modal-header,
[data-lt-theme="dark"] .lt-body .modal-footer,
[data-lt-theme="dark"] .lt-body .nav-tabs > li > a,
[data-lt-theme="dark"] .lt-body thead td,
[data-lt-theme="dark"] .lt-body .bg-grey,
[data-lt-theme="dark"] .lt-body .img-background,
[data-lt-theme="dark"] .lt-body table > thead > tr > th {
background-color: var(--lt-surface-2) !important;
border-color: var(--lt-line);
color: var(--lt-ink);
}
[data-lt-theme="dark"] .lt-body table,
[data-lt-theme="dark"] .lt-body table > tbody > tr > td,
[data-lt-theme="dark"] .lt-body table > tbody > tr > th {
background-color: transparent;
border-color: var(--lt-line);
}
[data-lt-theme="dark"] .lt-body .table-striped > tbody > tr:nth-of-type(odd),
[data-lt-theme="dark"] .lt-body .table-hover > tbody > tr:hover {
background-color: var(--lt-surface-2);
}
/* Schrift: die ueblichen Textelemente auf die Tokenfarbe ziehen.
Mit !important, weil die Anwendung ihre Farben ueber ID-Selektoren setzt
(`#testimonials .testimonial-item h3 { color:#111 }`) - dagegen kommt keine
Klassenregel an. Die :not()-Kette haelt heraus, was Farbe als BEDEUTUNG
traegt (.text-danger, .label-*, .green/.red/.orange).
Preis dafuer: eine Farbe, die eine Seite per style="color:..." direkt ins
Markup schreibt, wird im Dunkelmodus mit uebermalt. Wo das stoert, gehoert
die Seite auf Tokens umgestellt und aus dieser Schicht herausgenommen. */
[data-lt-theme="dark"] .lt-body p:not([class*="text-"]):not([class*="label-"]):not([class*="alert-"]):not(.green):not(.red):not(.orange),
[data-lt-theme="dark"] .lt-body li:not([class*="text-"]):not([class*="label-"]):not([class*="alert-"]),
[data-lt-theme="dark"] .lt-body td:not([class*="text-"]):not([class*="label-"]):not([class*="alert-"]):not(.green):not(.red),
[data-lt-theme="dark"] .lt-body th:not([class*="text-"]),
[data-lt-theme="dark"] .lt-body dt,
[data-lt-theme="dark"] .lt-body dd,
[data-lt-theme="dark"] .lt-body legend,
[data-lt-theme="dark"] .lt-body h1:not([class*="text-"]),
[data-lt-theme="dark"] .lt-body h2:not([class*="text-"]),
[data-lt-theme="dark"] .lt-body h3:not([class*="text-"]),
[data-lt-theme="dark"] .lt-body h4:not([class*="text-"]),
[data-lt-theme="dark"] .lt-body h5:not([class*="text-"]),
[data-lt-theme="dark"] .lt-body h6:not([class*="text-"]),
[data-lt-theme="dark"] .lt-body .home-title,
[data-lt-theme="dark"] .lt-body .home-text-title,
[data-lt-theme="dark"] .lt-body .home-text,
[data-lt-theme="dark"] .lt-body .description,
[data-lt-theme="dark"] .lt-body .panel-title,
[data-lt-theme="dark"] .lt-body .list-group-item {
color: var(--lt-ink) !important;
}
/* Verweise im Seiteninhalt.
*
* Bewusst die normale TEXTFARBE, nicht der Akzent: In den Werkzeugseiten ist
* die halbe Tabelle verlinkt (ID, Name, SKU, Status, Vorlage ...) - alles
* gruen einzufaerben war ein Fehler des ersten Anlaufs, die Seite bestand
* danach nur noch aus Akzentfarbe.
*
* Bewusst an die Inhaltscontainer gebunden statt an ein blankes `a`: die
* Navigationsleiste und die Fusszeile stehen ausserhalb und behalten dadurch
* ihre eigenen Farben.
*/
[data-lt-theme="dark"] .lt-body .main-content a:not(.btn):not([class*="text-"]),
[data-lt-theme="dark"] .lt-body .content-area a:not(.btn):not([class*="text-"]),
[data-lt-theme="dark"] .lt-body .panel a:not(.btn):not([class*="text-"]),
[data-lt-theme="dark"] .lt-body .box a:not(.btn):not([class*="text-"]),
[data-lt-theme="dark"] .lt-body td a:not(.btn):not([class*="text-"]),
[data-lt-theme="dark"] .lt-body th a:not(.btn):not([class*="text-"]) {
color: var(--lt-ink) !important;
}
/* Nebentext bleibt Nebentext, aber lesbar. */
[data-lt-theme="dark"] .lt-body .text-muted,
[data-lt-theme="dark"] .lt-body small,
[data-lt-theme="dark"] .lt-body .help-block {
color: var(--lt-muted);
}
/* Fremdes HTML nicht anfassen: die Vorlagen-Vorschau rendert Kundenvorlagen,
die ihre eigenen Farben mitbringen und exakt so aussehen muessen wie
spaeter im Angebot.
Ausgenommen der Einwilligungs-Manager (#footer-iframe): der liegt als
durchsichtiges Overlay ueber der Seite und zeigt nur einen kleinen Knopf.
Mit weissem Grund stand dort unten links ein weisser Block von 200x680 -
siehe docs/design/farbthemen.md. */
[data-lt-theme="dark"] .lt-body iframe:not(#footer-iframe) {
background: #ffffff;
}
/* --- Statusfarben im Dunkelmodus ---------------------------------------- *
* Die Artikeluebersicht baut ihre Datumsspalten aus Bootstrap-Alerts
* (`vor 9 Tagen
`, siehe getTimestamp() in
* scripts/template/utils.js). Deren Pastellflaechen blieben im Dunkelmodus
* hell, waehrend die Schrift schon hell war - die Zellen sahen leer aus.
*
* Hier bekommen sie gedaempfte Flaechen mit farbiger Schrift: der Status
* bleibt auf einen Blick erkennbar (gruen/gelb/rot), ohne zu leuchten.
*/
[data-lt-theme="dark"] .lt-body .alert-success,
[data-lt-theme="dark"] .lt-body .bxs-box.alert-success {
background-color: #12312b !important;
border-color: #1d5a4d;
color: #6fd6c1 !important;
}
[data-lt-theme="dark"] .lt-body .alert-warning,
[data-lt-theme="dark"] .lt-body .bxs-box.alert-warning {
background-color: #2a2116 !important;
border-color: #5a4526;
color: #e2a24a !important;
}
[data-lt-theme="dark"] .lt-body .alert-danger,
[data-lt-theme="dark"] .lt-body .alert-error,
[data-lt-theme="dark"] .lt-body .bxs-box.alert-danger {
background-color: #2d1a17 !important;
border-color: #5c322c;
color: #e0796c !important;
}
[data-lt-theme="dark"] .lt-body .alert-info {
background-color: #16262b !important;
border-color: #2b4a52;
color: #7ec8d6 !important;
}
/* --- Bildlaufleisten ---------------------------------------------------- *
* css/global.css setzt `scrollbar-color: #888 #f1f1f1` fuer .main-content und
* die Dialoge - im Dunkelmodus lief damit eine hellgraue Leiste neben der
* dunklen Tabelle. Hier auf die Tokens gezogen, und zwar zweimal:
*
* scrollbar-color Firefox und aktuelle Chromium-Versionen
* ::-webkit-scrollbar-* aeltere Chromium/Safari, die den Standard noch
* nicht kennen
*
* Auch das Wurzelelement bekommt die Farben, sonst bleibt die Leiste des
* Fensters selbst hell.
*/
[data-lt-theme="dark"] .lt-body,
[data-lt-theme="dark"] .lt-body *,
html[data-lt-theme="dark"] {
scrollbar-color: var(--lt-line) var(--lt-surface);
}
[data-lt-theme="dark"] .lt-body ::-webkit-scrollbar,
[data-lt-theme="dark"] .lt-body::-webkit-scrollbar {
width: 11px;
height: 11px;
}
[data-lt-theme="dark"] .lt-body ::-webkit-scrollbar-track,
[data-lt-theme="dark"] .lt-body::-webkit-scrollbar-track {
background: var(--lt-surface);
}
[data-lt-theme="dark"] .lt-body ::-webkit-scrollbar-thumb,
[data-lt-theme="dark"] .lt-body::-webkit-scrollbar-thumb {
background: var(--lt-line);
border-radius: 6px;
border: 2px solid var(--lt-surface);
}
[data-lt-theme="dark"] .lt-body ::-webkit-scrollbar-thumb:hover,
[data-lt-theme="dark"] .lt-body::-webkit-scrollbar-thumb:hover {
background: var(--lt-muted);
}
[data-lt-theme="dark"] .lt-body ::-webkit-scrollbar-corner,
[data-lt-theme="dark"] .lt-body::-webkit-scrollbar-corner {
background: var(--lt-surface);
}
/* --- Dunkelmodus: Vorlagen-Editor -------------------------------------- *
* Der Editor (index.php?action=template_editor -> public/template_editor.php)
* bringt sein Layout in css/resizeable.css und in einem