/*
Theme Name: Solaranlage.blog
Theme URI: https://solaranlage.blog
Template: smart-mag
Description: Child-Theme von SmartMag mit der Marken-CI von Solaranlage.blog:
Navy-/Sonnengelb-Palette, Poppins-/Public-Sans-Typografie und abgestimmte
UI-Bausteine. Enthaelt ausschliesslich CSS - kein PHP-Override, keine
kopierten Templates. Das Eltern-Theme bleibt updatefaehig.
Author: Solaranlage.blog
Version: 1.0.0
Requires PHP: 7.1
License: ThemeForest Split Licence
License URI: https://themeforest.net/licenses/standard
Text Domain: solaranlage-blog
*/
/* ---------------------------------------------------------------------
WICHTIG: "Template:" oben muss exakt dem Ordnernamen des Eltern-Themes
entsprechen. Standard bei SmartMag ist "smart-mag". Weicht der Ordner
auf deinem Server ab, hier anpassen - sonst laesst WordPress das
Child-Theme nicht aktivieren.
Die Marken-Schriften werden in functions.php eingereiht (nicht per
@import), damit sie parallel laden und das Rendering nicht blockieren.
--------------------------------------------------------------------- */
/* =====================================================================
SOLARANLAGE.BLOG · CORPORATE IDENTITY
Diese Datei laedt NACH dem Eltern-Stylesheet (Handle: smartmag-core)
und ueberschreibt damit dessen Standard-Tokens.
Farben aendern? -> Abschnitt 01, Token-Block ganz unten.
===================================================================== */
/* ==========================================================================
SOLARANLAGE.BLOG · CORPORATE IDENTITY FÜR SMARTMAG
--------------------------------------------------------------------------
Aufbau:
01 Design-Tokens (Farben + Marken-Variablen)
02 Typografie (Poppins + Public Sans)
03 Buttons & CTAs
04 Tags & Badges / Kategorie-Labels
05 Formulare & Newsletter
06 Artikel-Karten & Medien
07 Header / Navigation / Logo
08 Footer
09 Feinschliff (Links, Auswahl, Dark Mode)
========================================================================== */
/* ==========================================================================
01 · DESIGN-TOKENS
SmartMag ist vollständig über CSS-Variablen aufgebaut. Wir überschreiben
die zentrale Marken-Farbe und legen die restliche Palette als eigene
--sb-* Tokens ab. Dadurch färbt sich das komplette Theme automatisch um.
========================================================================== */
:root {
/* --- Marken-Palette aus dem Styleguide --- */
--sb-navy: #1E3A5F; /* Navy · Primärfarbe */
--sb-navy-dark: #152B45; /* Navy dunkel · Hover/aktiv */
--sb-navy-tint: #E8EBEF; /* Navy Tint · Flächen, Badges */
--sb-yellow: #FFB547; /* Sonnengelb · Akzent (Flächen/Linien) */
--sb-yellow-dark: #8F580B; /* Gelb dunkel · Akzent-TEXT (kontraststark) */
--sb-yellow-tint: #FDF1DF; /* Gelb Tint · Flächen, Badges */
--sb-ink: #1E3A5F; /* Navy · Überschriften, Text */
--sb-sand: #F0EEE9; /* Sand · Hintergrund/Sektionen */
--sb-line: #E2DED5; /* Linie · Rahmen, Trenner */
--sb-text-2: #566B87; /* Text sekundär (Navy 75%) */
--sb-text-muted: #5D718C; /* Text gedämpft · Labels, Captions */
/* --- Rundungen & UI --- */
--sb-radius: 14px; /* Karten, Flächen */
--sb-radius-sm: 10px; /* Eingaben */
--sb-btn-radius: 999px; /* Pill-Buttons – aus der Vorlage uebernommen.
CI-Styleguide zeigt ~6px: hier auf 6px aendern. */
/* --- Schriften --- */
--sb-h-font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
--sb-ui-font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
--sb-text-font: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
/*
* Kern-Farbtokens von SmartMag auf die Marke mappen.
* Wichtig: exakt derselbe Selektor wie im Eltern-Theme (`:root, .s-light`),
* damit wir sauber überschreiben. --c-main NICHT mit !important belegen –
* so bleiben pro-Kategorie-Akzentfarben (Photovoltaik/Speicher …) möglich.
*/
:root,
.s-light {
--c-main: var(--sb-navy);
--c-main-rgb: 30, 58, 95;
/* Schrift-Tokens */
--body-font: var(--sb-text-font);
--ui-font: var(--sb-ui-font);
--text-font: var(--sb-text-font);
--h-font: var(--sb-h-font);
--title-font: var(--sb-h-font);
/* Text- & Flächenfarben an die Marke angleichen */
--body-color: var(--sb-ink);
--c-headings: var(--sb-ink);
--c-links: var(--sb-navy);
--c-a-hover: var(--sb-yellow-dark);
--c-excerpts: var(--sb-text-2);
--c-post-meta: var(--sb-text-muted);
--c-nav: var(--sb-ink);
/* Rahmen/Trenner im Linien-Ton */
--c-separator: var(--sb-line);
--c-separator2: var(--sb-line);
/* Footer in Sand */
--footer-bg: var(--sb-sand);
--footer-lower-bg: #E7E4DE;
}
/* Sand-Seitenhintergrund; Karten/Inhalte bleiben weiß (--c-contrast-0) */
body {
background: var(--sb-sand);
}
/* ==========================================================================
02 · TYPOGRAFIE
========================================================================== */
body {
font-family: var(--sb-text-font);
}
/* Überschriften auf Poppins – Sicherheitsnetz für Elemente mit fester Schrift */
h1, h2, h3, h4, h5, h6,
.post-title,
.entry-title,
.widget-title,
.section-head,
.block-head,
.page-title,
.slide-title {
font-family: var(--sb-h-font);
letter-spacing: -0.01em;
}
/* Fließtext im Artikel angenehm lesbar (CI: Zeilenhöhe ~1.6–1.7) */
.the-content,
.entry-content {
--post-content-lh: 1.7;
}
/* ==========================================================================
03 · BUTTONS & CTAs
Styleguide: gemischte Groß-/Kleinschreibung (kein UPPERCASE),
Poppins 600/700. Primär = Navy-Fläche. Sonnengelb NIE als Button-Fläche.
========================================================================== */
input[type=submit],
button,
.ts-button,
.ts-button-alt,
.ts-button-b,
.read-more-btn,
.read-more-btn-b {
--btn-f-size: 13px;
font-family: var(--sb-ui-font);
font-weight: 700;
letter-spacing: 0.01em;
text-transform: none;
border-radius: var(--sb-btn-radius);
}
/* Primär-Button: Hover in Navy dunkel statt Schwarz */
input[type=submit]:hover,
button:hover,
.ts-button:hover {
background: var(--sb-navy-dark);
border-color: var(--sb-navy-dark);
color: #fff;
}
/* Sekundär-Button (weiche Umrandung) */
.ts-button-alt {
border-color: var(--sb-line);
color: var(--sb-ink);
}
.ts-button-alt:hover {
background: var(--sb-navy-tint);
border-color: var(--sb-navy);
color: var(--sb-navy-dark);
}
/*
* Primär-CTA (Navy) – Opt-in-Klasse `he-cta` / `sb-cta`.
* Verwendung: einem Button/Link die CSS-Klasse `he-cta` geben, z. B. auch
* einem Menüpunkt (Menü › CSS-Klassen) für den „Newsletter“-Button im Header.
* Laut CI: Navy-Fläche mit weißer Schrift – kein gelber Button.
*/
.he-cta, .sb-cta,
.ts-button.he-cta, .ts-button.sb-cta,
a.he-cta, a.sb-cta {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--sb-navy);
color: #fff;
border: 1px solid var(--sb-navy);
border-radius: var(--sb-btn-radius);
padding: 9px 20px;
font-family: var(--sb-ui-font);
font-weight: 700;
line-height: 1;
text-transform: none;
letter-spacing: 0.01em;
transition: 0.25s ease-in-out;
}
.he-cta:hover, .sb-cta:hover,
.ts-button.he-cta:hover, .ts-button.sb-cta:hover,
a.he-cta:hover, a.sb-cta:hover {
background: var(--sb-navy-dark);
border-color: var(--sb-navy-dark);
color: #fff;
}
/* Textlink mit Pfeil – Opt-in-Klasse `he-textlink` */
.he-textlink, .sb-textlink {
color: var(--sb-navy);
font-family: var(--sb-ui-font);
font-weight: 600;
text-transform: none;
text-decoration: underline;
text-decoration-color: var(--sb-yellow);
text-decoration-thickness: 2px;
text-underline-offset: 5px;
}
.he-textlink:hover, .sb-textlink:hover {
color: var(--sb-yellow-dark);
text-decoration-color: var(--sb-yellow-dark);
}
/* Inhalts-Links: Navy mit gelber Unterlinie (Styleguide "Text-Link / Ghost") */
.the-content a:not(.ts-button):not(.he-cta),
.entry-content a:not(.ts-button):not(.he-cta) {
text-decoration: underline;
text-decoration-color: var(--sb-yellow);
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
.the-content a:not(.ts-button):not(.he-cta):hover,
.entry-content a:not(.ts-button):not(.he-cta):hover {
text-decoration-color: var(--sb-yellow-dark);
}
/* Gelber Blip unter dem aktiven Menüpunkt (Menü-Layout bleibt unverändert) */
:root,
.s-light {
--c-nav-blip: var(--sb-yellow);
}
/* ==========================================================================
04 · TAGS & BADGES / KATEGORIE-LABELS
========================================================================== */
/* Kategorie-Labels auf Bildern: Pills, keine Versalien */
.cat-labels a,
.cat-labels .category {
border-radius: var(--sb-btn-radius);
padding: 0 12px;
font-family: var(--sb-ui-font);
font-weight: 700;
letter-spacing: 0.01em;
text-transform: none;
}
/* Kategorie-Kicker (Artikel-Card) in Gelb dunkel – kontraststark */
.post-meta .post-cat > a {
color: var(--sb-yellow-dark);
}
.post-meta .post-cat > a:hover {
color: var(--sb-navy);
}
/*
* Marken-Badges für freien Einsatz in Inhalten/Widgets:
* Photovoltaik
* Ratgeber
* Neu
*/
.he-badge, .sb-badge {
display: inline-block;
background: var(--sb-navy-tint);
color: var(--sb-navy-dark);
border-radius: var(--sb-btn-radius);
padding: 3px 12px;
font-family: var(--sb-ui-font);
font-size: 12px;
font-weight: 700;
line-height: 1.5;
}
.he-badge--terra, .sb-badge--accent {
background: var(--sb-yellow-tint);
color: var(--sb-yellow-dark);
}
.he-badge--new, .sb-badge--new {
background: var(--sb-ink);
color: #fff;
}
/* ==========================================================================
05 · FORMULARE & NEWSLETTER
========================================================================== */
input[type=text],
input[type=email],
input[type=search],
input[type=url],
input[type=tel],
input[type=number],
input[type=password],
textarea {
border: 1px solid var(--sb-line);
border-radius: var(--sb-radius-sm);
background: #fff;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=search]:focus,
input[type=url]:focus,
input[type=tel]:focus,
input[type=number]:focus,
input[type=password]:focus,
textarea:focus {
border-color: var(--sb-navy);
box-shadow: 0 0 0 3px rgba(var(--c-main-rgb), 0.12);
outline: 0;
}
/* Newsletter-Block als Sand-Fläche mit Rahmen */
.block-newsletter,
.spc-newsletter {
background: var(--sb-sand);
border: 1px solid var(--sb-line);
border-radius: var(--sb-radius);
}
.block-newsletter.s-dark {
background: var(--sb-ink);
border-color: rgba(255, 255, 255, 0.08);
}
/* ==========================================================================
06 · ARTIKEL-KARTEN & MEDIEN
Standard-Grid-Beiträge werden zu weißen Karten mit sanftem Schatten
(wie „Artikel-Card“ im Styleguide). Overlay-/Slider-Layouts bleiben
unberührt und erhalten nur abgerundete Bildkanten.
========================================================================== */
.grid-post {
background: var(--c-contrast-0); /* weiß im Light-Mode */
border: 1px solid var(--sb-line);
border-radius: var(--sb-radius);
overflow: hidden;
box-shadow: 0 6px 22px -16px rgba(30, 58, 95, 0.30);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.grid-post:hover {
transform: translateY(-3px);
box-shadow: 0 16px 32px -18px rgba(30, 58, 95, 0.34);
}
.grid-post .media {
margin: 0;
border-radius: 0; /* Karte beschneidet das Bild bündig */
}
.grid-post .content {
padding: 16px 18px 20px;
}
/* Abgerundete Bildkanten für Kachel-/Overlay-Layouts & Slider */
.feat-grid .item,
.overlay-post .media,
.main-slider .slide-inner,
.grid-overlay .item {
border-radius: var(--sb-radius);
overflow: hidden;
}
/* Beitragsbild im Einzelartikel dezent runden */
.single .featured img,
.post-thumbnail img {
border-radius: var(--sb-radius);
}
/* ==========================================================================
07 · HEADER / NAVIGATION / LOGO
========================================================================== */
/* Text-Logo (falls kein Bild-Logo genutzt wird) in Poppins/Navy */
.logo .site-name,
.logo-text,
.site-title {
font-family: var(--sb-h-font);
color: var(--sb-ink);
font-weight: 700;
}
/* Aktiver/hover Menüpunkt in Navy dunkel */
.main-nav .menu > li > a:hover,
.main-nav .menu > .current-menu-item > a,
.main-nav .menu > .current_page_item > a {
color: var(--sb-navy);
}
/* ==========================================================================
08 · FOOTER
========================================================================== */
.main-footer .widget-title,
.footer-widgets .widget-title {
font-family: var(--sb-h-font);
color: var(--sb-ink);
}
/* ==========================================================================
09 · FEINSCHLIFF
========================================================================== */
/* Textauswahl in dezentem Navy */
::selection {
background: rgba(var(--c-main-rgb), 0.22);
color: var(--sb-ink);
}
/* Zitat-Akzent in Sonnengelb */
blockquote {
border-color: var(--sb-yellow);
}
/* Dark-Mode: Sonnengelb als Linkfarbe (8.5:1 auf Navy) */
.s-dark,
.site-s-dark {
--c-links: #FFB547;
--c-a-hover: #FFC670;
}
/* =====================================================================
SOLARANLAGE.BLOG · Header & Footer – hell & modern
Erzwingt ein helles, warmes Schema (auch wenn in den SmartMag-Optionen
"dunkel" gewählt ist) und gibt Header & Footer ein modernes CI-Design.
===================================================================== */
/* -- 1) Dunkles Schema in Header-Zeilen & Footer aufheben ---------------
Holt die helle Kontrast-Palette (Sand/Navy) zurück, damit
Text, Rahmen und Flächen zur Marke passen. ------------------------ */
.smart-head-row.s-dark,
.s-dark .smart-head-row,
.main-footer.s-dark {
--c-contrast-0: #ffffff;
--c-contrast-10: #fbfaf8;
--c-contrast-50: #f5f4f1;
--c-contrast-75: #efeeeb;
--c-contrast-100: #e2ded5;
--c-contrast-125: #d4d8db;
--c-contrast-150: #c9cfd4;
--c-contrast-200: #bec6d1;
--c-contrast-300: #9eaaba;
--c-contrast-400: #8191a5;
--c-contrast-450: #74859c;
--c-contrast-500: #667992;
--c-contrast-600: #526784;
--c-contrast-650: #425a79;
--c-contrast-700: #375071;
--c-contrast-800: #294467;
--c-contrast-850: #223e62;
--c-contrast-900: #1e3a5f;
--c-contrast: #000000;
--c-rgba: 0, 0, 0;
--c-headings: var(--sb-ink);
--c-links: var(--sb-ink);
--c-excerpts: var(--sb-text-2);
--c-nav: var(--sb-ink);
--c-nav-blip: var(--sb-yellow);
--c-post-meta: var(--sb-text-muted);
--c-separator: var(--sb-line);
--c-separator2: var(--sb-line);
--footer-bg: var(--sb-sand);
--footer-lower-bg: #E7E4DE;
}
/* ============================= HEADER ================================ */
.smart-head {
position: relative;
background: #fff;
}
/* Weiße Header-Zeilen, dezente Trennlinie + weicher Schatten */
.smart-head-main {
border-bottom: 1px solid var(--sb-line);
box-shadow: 0 8px 26px -20px rgba(30, 58, 95, 0.28);
}
.smart-head-main .smart-head-row {
--c-bg: #fff;
}
/* Schlanke sonnengelbe Akzentlinie ganz oben im Header */
.smart-head-main::before {
content: "";
display: block;
height: 3px;
background: var(--sb-yellow);
}
/* Navigation: Navy, Hover/aktiv in Navy dunkel */
.main-nav .menu > li > a,
.smart-head .menu > li > a {
color: var(--sb-ink);
font-family: var(--sb-ui-font);
font-weight: 700;
}
.main-nav .menu > li > a:hover,
.main-nav .menu > .current-menu-item > a,
.main-nav .menu > .current-menu-ancestor > a,
.smart-head .menu > li > a:hover,
.smart-head .menu > .current-menu-item > a {
color: var(--sb-navy-dark);
}
/* Header-Icons (Suche, Konto, Menü-Toggle) in Navy */
.smart-head .s-icon,
.smart-head .header-el a,
.smart-head .toggle-menu {
color: var(--sb-ink);
}
.smart-head .s-icon:hover,
.smart-head .header-el a:hover {
color: var(--sb-navy-dark);
}
/* Sticky-Header bleibt hell */
.smart-head.is-sticky,
.smart-head-clone,
.is-sticky .smart-head-main {
background: #fff;
box-shadow: 0 10px 30px -22px rgba(30, 58, 95, 0.34);
}
/* ============================= FOOTER ================================ */
.main-footer {
position: relative;
--footer-mt: 64px;
--footer-bg: var(--sb-sand);
--footer-lower-bg: #E7E4DE;
background: var(--sb-sand);
color: var(--sb-text-2);
}
.main-footer:not(.s-dark) {
color: var(--sb-text-2);
}
/* Sonnengelbe Akzentlinie oben am Footer */
.main-footer::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 3px;
background: var(--sb-yellow);
}
.upper-footer {
background: var(--sb-sand);
}
/* Untere Copyright-Leiste: einen Tick tiefer für klare Trennung */
.lower-footer {
background: #E7E4DE;
border-top: 1px solid var(--sb-line);
color: var(--sb-text-muted);
}
/* Footer-Widget-Titel: Poppins mit kleinem Sonnengelb-Strich */
.main-footer .widget-title {
font-family: var(--sb-h-font);
color: var(--sb-ink);
font-size: 15px;
font-weight: 600;
letter-spacing: .2px;
position: relative;
padding-bottom: 12px;
margin-bottom: 20px;
}
.main-footer .widget-title::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 34px;
height: 3px;
border-radius: 3px;
background: var(--sb-yellow);
}
/* Footer-Text & Links */
.main-footer,
.main-footer p,
.main-footer li {
color: var(--sb-text-2);
}
.main-footer a {
color: var(--sb-text-2);
}
.main-footer a:hover {
color: var(--sb-navy-dark);
}
.lower-footer,
.lower-footer p {
color: var(--sb-text-muted);
}
.lower-footer a {
color: var(--sb-text-2);
}
.lower-footer a:hover {
color: var(--sb-navy-dark);
}
/* Footer-Logo/Name in Poppins/Navy */
.footer-logo .site-name,
.main-footer .footer-logo {
color: var(--sb-ink);
}
/* Legacy-Feedburner-Widget (falls genutzt) hell statt dunkelblau */
.upper-footer .feedburner input {
background: #fff;
color: var(--sb-ink);
border: 1px solid var(--sb-line);
}
.upper-footer input.feedburner-subscribe {
background: var(--sb-navy);
color: #fff;
}
/* --------------------------------------------------------------------
FOOTER-AUSBAU · Marken-Spalte links + Widget-Raster + untere Leiste
---------------------------------------------------------------------
Der Inhalt kommt aus Design -> Widgets -> Bereich "Footer".
Empfehlung fuer die LINKE Marken-Spalte: ein Widget "Individuelles
HTML" mit der Klasse .sb-footer-brand (Snippet siehe Uebergabe-Doku).
Die restlichen Spalten: Widgets "Navigationsmenue".
Spaltenzahl stellst du unter Customizer -> Footer -> "Upper Footer
Columns" ein (z. B. 3 gleiche Spalten oder ein eigenes Verhaeltnis).
-------------------------------------------------------------------- */
/* Grosszuegiger Innenabstand oben */
.upper-footer {
padding-top: 56px;
padding-bottom: 44px;
}
.upper-footer .widgets .widget {
margin-bottom: 8px;
}
/* Footer-Menues (Nav-Menu-Widget) als klare Link-Listen */
.main-footer .widget_nav_menu ul,
.main-footer .widget ul.menu,
.main-footer .menu {
list-style: none;
margin: 0;
padding: 0;
}
.main-footer .widget_nav_menu li,
.main-footer .menu li {
margin: 0 0 10px;
padding: 0;
border: 0;
}
.main-footer .widget_nav_menu a,
.main-footer .menu a {
display: inline-block;
font-size: 14px;
line-height: 1.4;
color: var(--sb-text-2);
text-decoration: none;
transition: color .15s ease;
}
.main-footer .widget_nav_menu a:hover,
.main-footer .menu a:hover {
color: var(--sb-yellow-dark);
}
/* --- Marken-Spalte (erstes Footer-Widget) ---------------------------- */
.sb-footer-brand {
max-width: 300px;
}
.sb-footer-brand .brand-logo,
.upper-footer .widget:first-child img {
max-width: 190px;
height: auto;
display: block;
margin-bottom: 16px;
}
.sb-footer-brand .brand-claim {
font-family: var(--sb-text-font);
font-size: 14px;
line-height: 1.65;
color: var(--sb-text-2);
margin: 0 0 18px;
}
.sb-footer-brand .brand-social {
display: flex;
gap: 10px;
}
.sb-footer-brand .brand-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 999px;
background: #fff;
border: 1px solid var(--sb-line);
color: var(--sb-navy);
transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.sb-footer-brand .brand-social a:hover {
background: var(--sb-navy);
border-color: var(--sb-navy);
color: #fff;
}
.sb-footer-brand .brand-social svg {
width: 18px;
height: 18px;
fill: currentColor;
}
/* --- Untere Leiste: Copyright links, Footer-Menue rechts -------------- */
.lower-footer {
padding-top: 20px;
padding-bottom: 20px;
}
.lower-footer .inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px 24px;
}
.lower-footer .copyright {
font-size: 13px;
color: var(--sb-text-muted);
}
.lower-footer .links ul,
.lower-footer .links .menu {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 6px 22px;
margin: 0;
padding: 0;
}
.lower-footer .links li {
margin: 0;
padding: 0;
border: 0;
}
.lower-footer .links a {
font-size: 13px;
color: var(--sb-text-2);
}
.lower-footer .links a:hover {
color: var(--sb-yellow-dark);
}
/* --- Responsiv: Spalten stapeln, untere Leiste zentrieren ------------- */
@media (max-width: 782px) {
.upper-footer {
padding-top: 40px;
padding-bottom: 28px;
}
.sb-footer-brand {
max-width: none;
margin-bottom: 28px;
}
.lower-footer .inner {
flex-direction: column;
text-align: center;
justify-content: center;
}
.lower-footer .links ul,
.lower-footer .links .menu {
justify-content: center;
}
}
/* =====================================================================
SOLARANLAGE.BLOG · Header-Layout „Logo oben – Menü volle Breite darunter"
---------------------------------------------------------------------
SmartMag legt Logo UND Menü standardmäßig in denselben Slot. Diese
Regeln brechen das Menü INNERHALB seines Slots auf eine eigene volle
Zeile unter das Logo. Sucht die richtige Zeile automatisch (per :has),
egal ob top/mid/bot. Menü linksbündig an der Logo-Kante.
Nur Desktop; mobiler Header bleibt unberührt.
===================================================================== */
@media (min-width: 992px) {
/* Die Header-Zeile, die das Menü enthält: feste Höhe lösen */
.smart-head-main .smart-head-row:has(.nav-wrap) {
height: auto;
min-height: var(--head-mid-h, 90px);
padding-top: 14px;
padding-bottom: 4px;
}
.smart-head-main .smart-head-row:has(.nav-wrap) > .inner {
height: auto;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
/* Leere Slots einklappen, damit sie keinen Platz belegen */
.smart-head-main .smart-head-row:has(.nav-wrap) > .inner > .items.empty {
flex: 0 0 0;
padding: 0;
}
/* Der Slot mit Logo + Menü: auf volle Breite wachsen, Inhalt umbrechbar */
.smart-head-main .smart-head-row:has(.nav-wrap) > .inner > .items:has(.nav-wrap) {
flex: 1 1 auto;
display: flex;
flex-wrap: wrap;
align-items: center;
}
/* Logo bleibt in Zeile 1 */
.smart-head-main .smart-head-row:has(.nav-wrap) > .inner > .items:has(.nav-wrap) > .ts-logo,
.smart-head-main .smart-head-row:has(.nav-wrap) > .inner > .items:has(.nav-wrap) > .logo {
flex: 0 0 auto;
}
/* Das MENÜ bricht auf eine eigene volle Zeile UNTER das Logo */
.smart-head-main .smart-head-row:has(.nav-wrap) > .inner > .items:has(.nav-wrap) > .nav-wrap {
flex: 1 0 100%;
order: 10;
margin-top: 12px;
padding-top: 8px;
border-top: 1px solid var(--sb-line);
}
/* Suche / Social bleiben oben rechts auf der Logo-Zeile */
.smart-head-main .smart-head-row:has(.nav-wrap) > .inner > .items-right {
flex: 0 0 auto;
align-self: flex-start;
margin-top: 6px;
}
/* Menü über die volle Breite, linksbündig, luftig */
.smart-head-main .smart-head-row:has(.nav-wrap) .navigation-main > ul {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
gap: 2px;
width: 100%;
}
.smart-head-main .smart-head-row:has(.nav-wrap) .navigation-main > ul > li > a {
padding-top: 15px;
padding-bottom: 15px;
}
.smart-head-main .smart-head-row:has(.nav-wrap) .navigation-main > ul > li:first-child > a {
padding-left: 0;
}
.smart-head-main .smart-head-row:has(.nav-wrap) .navigation-main > ul ul {
text-align: left;
}
}