/* =====================================================================
Karley CI — Vereinheitlichungs-Layer für karley.eu (Porto/Phoenix-CMS)
---------------------------------------------------------------------
Additiv. NACH assets/custom.css laden — überschreibt nur Farb-, Schrift-
und Fokus-Tokens, keine Layout-Regeln. Ziel: alle Blau-/Türkis-Töne auf
das offizielle Karley Blau #264796 (CI Guidance, RGB 38/71/150) bringen.
Einbau: siehe README.md in diesem Ordner (eine -Zeile in layout.php).
===================================================================== */
/* --- Poppins, SELBST-GEHOSTET auf cdn.karley.de (DSGVO: kein Google Fonts/Dritt-CDN) ---
Lizenz: SIL Open Font License 1.1 (Selbst-Hosting erlaubt). woff2-Dateien und OFL.txt
nach cdn.karley.de/fonts/ legen. cdn.karley.de muss CORS senden:
Access-Control-Allow-Origin: * (oder die konkreten Karley-Origins). */
@font-face { font-family:"Poppins"; font-style:normal; font-weight:400; font-display:swap; src:url("https://cdn.karley.de/fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family:"Poppins"; font-style:normal; font-weight:500; font-display:swap; src:url("https://cdn.karley.de/fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family:"Poppins"; font-style:normal; font-weight:600; font-display:swap; src:url("https://cdn.karley.de/fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family:"Poppins"; font-style:normal; font-weight:700; font-display:swap; src:url("https://cdn.karley.de/fonts/poppins-700.woff2") format("woff2"); }
:root {
/* --- Karley Palette (aus CI Guidance abgeleitet) --- */
--karley-blue: #264796; /* CI „Karley Blau" — primär, Marke + Interaktion */
--karley-blue-dark: #1c3572; /* Hover / Pressed */
--karley-blue-700: #16264f; /* Text auf hellen Blau-Flächen */
--karley-blue-light: #e9edf7; /* getönte Flächen, Hover-Hintergrund */
--karley-blue-lighter:#f4f6fb;
--karley-grey-dark: #808080; /* CI „Logo Dunkelgrau" (K50) */
--karley-grey-light: #e7e7e7; /* CI „Logo Hellgrau" (K10) — Ränder/Trenner */
--karley-ink: #1c1c1c; /* Fließtext */
--karley-red: #e2231a; /* Signal: Sonderpreise (auffällig) */
--karley-orange: #f39200; /* Signal: Hinweise / „NEU" (sparsam) */
/* --- Theme-Tokens auf Karley Blau umbiegen (kaskadiert durch Porto + custom.css) --- */
--phoenix-primary: #264796;
--phoenix-primary-rgb: 38, 71, 150;
--bs-primary: #264796;
--bs-primary-rgb: 38, 71, 150;
--bs-link-color: #264796;
--bs-link-color-rgb: 38, 71, 150;
--bs-link-hover-color: #1c3572;
}
/* --- Schrift: Poppins durchgehend (frei/OFL, überall gleich) statt Poppins/Helvetica/Open Sans gemischt --- */
body,
button, input, select, textarea,
#main-menu .main-menu > li > a,
.btn {
font-family: "Poppins", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
/* --- Links --- */
a { color: var(--karley-blue); }
a:hover, a:focus { color: var(--karley-blue-dark); }
/* --- Buttons (Porto .btn-primary / .btn-special + Bootstrap-Kontextvarianten
.btn-info/-secondary/-dark/-success/-warning/-danger -- alle auf die eine
Marken-/Interaktionsfarbe, sonst waere das genau die verbotene "Buntheit"). --- */
.btn-primary,
.btn-special,
.btn-info,
.btn-secondary,
.btn-dark,
.btn-success,
.btn-warning,
.btn-danger,
.wp-block-button__link {
background-color: var(--karley-blue) !important;
border-color: var(--karley-blue) !important;
color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus,
.btn-special:hover, .btn-special:focus,
.btn-info:hover, .btn-info:focus,
.btn-secondary:hover, .btn-secondary:focus,
.btn-dark:hover, .btn-dark:focus,
.btn-success:hover, .btn-success:focus,
.btn-warning:hover, .btn-warning:focus,
.btn-danger:hover, .btn-danger:focus,
.wp-block-button__link:hover {
background-color: var(--karley-blue-dark) !important;
border-color: var(--karley-blue-dark) !important;
color: #fff !important;
}
.wp-block-button.is-style-outline .wp-block-button__link {
background-color: transparent !important;
border-color: currentColor !important;
color: var(--karley-blue) !important;
}
/* Buttons hatten bisher keine abgerundeten Ecken (0px) -- CI-Guide zeigt Buttons
durchgehend mit 6px. .btn-special ausgenommen: das ist die bewusst pillenfoermige
Such-Schaltflaeche am rechten Ende des Suchfelds (0 20px 20px 0), nicht anfassen. */
.btn:not(.btn-special),
.wp-block-button__link {
border-radius: 6px;
}
/* --- Hartkodierte Blau-/Türkis-Literale aus custom.css auf Karley Blau ziehen --- */
.team-member .team-member-role { color: var(--karley-blue); }
.job-posting .job-badge {
background: var(--karley-blue-light);
color: var(--karley-blue-700);
}
.job-apply > summary {
color: var(--karley-blue);
border-color: var(--karley-blue);
}
.job-apply > summary:hover,
.job-apply[open] > summary { background: var(--karley-blue-dark); color: #fff; }
.cookie-notice__btn--ok { background: var(--karley-blue); }
.cookie-notice__btn--ok:hover { background: var(--karley-blue-dark); }
.cookie-notice__text a { color: #9db4e6; }
/* --- Trenner/Ränder auf CI-Hellgrau --- */
.wp-block-separator,
.wp-block-table td, .wp-block-table th { border-color: var(--karley-grey-light); }
/* --- Signalfarben: Sonderpreise ROT & auffällig, Hinweise/„NEU" ORANGE (sparsam) --- */
.price .price-new,
.product-price .price-new,
.special-price,
.price-sale { color: var(--karley-red) !important; font-weight: 700; }
.badge-sale, .label-sale, .tag-neu {
background: var(--karley-orange); color: #fff;
}
/* --- Getönte Blöcke: Hover/aktiv aus Karley-Blau statt Bootstrap-Blau --- */
#main-menu .sub-menu a:hover,
#main-menu .sub-menu a:hover > i,
.news-card:hover .news-title a,
.news-card .read-more { color: var(--karley-blue); }
/* --- Breadcrumb-Leiste ("Home" ist dort ein Link, hart auf #0088cc) --- */
.breadcrumb a, .breadcrumbs-wrap a { color: var(--karley-blue) !important; }
/* --- Aktiver Menuepunkt als blaue Pille (border-radius kommt schon aus
custom.css; hier nur Fuellung + Textfarbe) --- */
#main-menu .main-menu > li.current-menu-item > a,
#main-menu .main-menu > li.current-menu-ancestor > a {
background: var(--karley-blue) !important;
color: #fff !important;
}
#main-menu .main-menu > li.current-menu-item > a > i,
#main-menu .main-menu > li.current-menu-ancestor > a > i { color: #fff !important; }
/* --- Fokus-Ring: CI statt Browser-Blau (Barrierefreiheit). !important noetig,
da Porto ID-Selektoren (z.B. #main-menu ... a:focus) sonst outline:none setzen
und diese hoehere Spezifitaet unser einfaches a:focus-visible schlaegt. --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--karley-blue) !important;
outline-offset: 2px !important;
}
/* --- Auswahlmarkierung --- */
::selection { background: rgba(38, 71, 150, .18); }
/* --- Shape-Divider im Seiteninhalt (Gutenberg-HTML, z.B. Jobs-Seite) hat
inline style="fill:#0088cc" -> nur per !important ueberschreibbar, da
Inline-Style ohne !important sonst gewinnt. --- */
.shape-divider { fill: var(--karley-blue) !important; }
/* --- Porto-Mehrfarben-Schema (primary=#0088cc/secondary=rot/tertiary=tuerkis
sind in der gemergten Porto-CSS hart codiert, NICHT ueber --phoenix-primary
gesteuert) auf die eine Marken-/Interaktionsfarbe vereinheitlichen. Betrifft
Feature-Box-Icons (.text-color-*) und Gutenberg-Farbpalette (.has-*-color /
.has-*-background-color) -- z.B. "Warum wir"-Karten auf der Startseite. --- */
.text-color-primary, .text-color-secondary, .text-color-tertiary, .text-color-quaternary,
.has-primary-color, .has-secondary-color, .has-tertiary-color, .has-quaternary-color {
color: var(--karley-blue) !important;
}
.has-primary-background-color, .has-secondary-background-color, .has-tertiary-background-color {
background-color: var(--karley-blue) !important;
}
/* Kontrast: Karten/Kacheln hatten dunklen Text passend zum urspruenglich HELLEN
Primary/Tertiary (#0088cc/#2baab1) -- auf dem jetzt dunkleren Karley Blau kaum
lesbar. Die Textfarbe kommt dabei mal ueber die Klasse has-dark-color, mal als
frei gewaehlte Inline-Farbe (style="color:#000000") -- daher pauschal auf Weiss
erzwingen, unabhaengig davon wie die dunkle Farbe gesetzt wurde. --- */
.has-primary-background-color,
.has-primary-background-color *,
.has-secondary-background-color,
.has-secondary-background-color *,
.has-tertiary-background-color,
.has-tertiary-background-color * {
color: #fff !important;
}
/* --- Pastell-Farbkacheln im Seiteninhalt (Gutenberg Custom-Color statt Palette,
z.B. /service/-Uebersicht: Hellblau/Lavendel/Gelb/Lachs) -- gleiches Muster wie
has-*-background-color, nur als frei gewaehlte Inline-Hexfarbe statt CSS-Klasse. --- */
.wp-block-column[style*="background-color:#c0ebf1"],
.wp-block-column[style*="background-color:#d1d1e1"],
.wp-block-column[style*="background-color:#ffe97d"],
.wp-block-column[style*="background-color:#f2c8c2"] {
background-color: var(--karley-blue) !important;
}
.wp-block-column[style*="background-color:#c0ebf1"] *,
.wp-block-column[style*="background-color:#d1d1e1"] *,
.wp-block-column[style*="background-color:#ffe97d"] *,
.wp-block-column[style*="background-color:#f2c8c2"] * {
color: #fff !important;
}
/* --- Feature-Box-Ueberschriften haben ebenfalls hartkodierte Inline-Farben
(style="color:#0099e6" / "#6b21a8" / "#2baab1" / "black" pro Kachel im
Seiteninhalt) -- wie beim Shape-Divider nur per !important zu bezwingen. --- */
.featured-box h4 { color: var(--karley-blue) !important; }
/* --- Feature-Box-Variante mit Visual-Composer-Markup (z.B. /software/): eigenes
Icon-Element (.icon-featured / .porto-just-icon-wrapper, je nach gewaehltem
Icon-Stil "none"/"text-info"/"text-secondary" ...) und ein farbiger Rahmen am
umgebenden .box-content -- beides je nach featured-box-primary/-secondary/
-tertiary/-quaternary/-info/-success/-warning/-danger (Bootstrap-Kontext-Set,
volle Regenbogen-Palette) in Portos CSS hart codiert. --- */
.featured-box-primary .icon-featured, .featured-box-primary .porto-just-icon-wrapper,
.featured-box-secondary .icon-featured, .featured-box-secondary .porto-just-icon-wrapper,
.featured-box-tertiary .icon-featured, .featured-box-tertiary .porto-just-icon-wrapper,
.featured-box-quaternary .icon-featured, .featured-box-quaternary .porto-just-icon-wrapper,
.featured-box-info .icon-featured, .featured-box-info .porto-just-icon-wrapper,
.featured-box-success .icon-featured, .featured-box-success .porto-just-icon-wrapper,
.featured-box-warning .icon-featured, .featured-box-warning .porto-just-icon-wrapper,
.featured-box-danger .icon-featured, .featured-box-danger .porto-just-icon-wrapper {
color: var(--karley-blue) !important;
border-color: var(--karley-blue) !important;
}
.featured-box-primary .box-content,
.featured-box-secondary .box-content,
.featured-box-tertiary .box-content,
.featured-box-quaternary .box-content,
.featured-box-info .box-content,
.featured-box-success .box-content,
.featured-box-warning .box-content,
.featured-box-danger .box-content {
border-top-color: var(--karley-blue) !important;
}
/* --- Hauptmenue-Icons: in der gemergten Porto-CSS hart auf #0088cc gesetzt
(nicht ueber --phoenix-primary gesteuert), unabhaengig vom Breakpoint. --- */
#main-menu .main-menu > li > a,
#main-menu .main-menu > li > a > i { color: var(--karley-blue) !important; }
.mobile-toggle { background: var(--karley-blue) !important; color: #fff !important; }
/* --- Hauptmenue-Hover: war hell-blau (#0088cc) bei weiterhin blauer Schrift ->
schlechter Kontrast. Dunkles Hover-Blau + weisse Schrift, wie ein Button-Hover. --- */
#main-menu .main-menu > li > a:hover,
#main-menu .main-menu > li:hover > a {
background: var(--karley-blue-dark) !important;
color: #fff !important;
}
#main-menu .main-menu > li > a:hover > i,
#main-menu .main-menu > li:hover > a > i { color: #fff !important; }
/* --- Bilder im Seiteninhalt: CI-Guide zeigt Fotos/Karten durchgehend mit
abgerundeten Ecken (8px), Seiteninhalt lieferte bisher scharfe Ecken. --- */
.wp-block-image img,
.entry-content > img,
.page-content > img { border-radius: 8px; }
/* --- Bootstrap-Utility-Klassen (.bg-primary/.text-primary/.border-primary) sind
in der gemergten Porto-CSS ebenfalls hart auf #0088cc codiert -- kommen z.B. in
"Call to Action"-Boxen im Seiteninhalt vor (Kassensysteme-Seite u.a.). --- */
.bg-primary { background-color: var(--karley-blue) !important; }
.text-primary { color: var(--karley-blue) !important; }
.border-primary { border-color: var(--karley-blue) !important; }
/* --- "Call to Action"-Box (Label + Kontakt-Button) hatte keinen Abstand zwischen
Text und Button -- beide stiessen direkt aneinander. --- */
.call-to-action-button { margin-left: 1.25rem; flex-shrink: 0; }
.d-flex.p-3 { align-items: center; }
/* --- Farbige Inhaltskaesten (Gutenberg-Spalten mit Hintergrund) bekommen runde
Ecken wie im CI-Guide (8px). Stehen mehrere davon direkt nebeneinander OHNE
Abstand (z.B. "Warum wir"-Karten, /service/-Kachelreihen), gehoeren sie optisch
zusammen -> nur die AEUSSEREN Ecken der Reihe runden, nicht die Naht dazwischen.
Steht eine farbige Spalte dagegen neben einer UNGEFAERBTEN (z.B. Textbox neben
einem Foto, mit normalem Spalten-Abstand), ist sie eigenstaendig -> alle 4 Ecken
rund. Erkennung ueber :has() -- ob der Nachbar auch farbig ist. --- */
.wp-block-column.has-primary-background-color,
.wp-block-column.has-secondary-background-color,
.wp-block-column.has-tertiary-background-color,
.wp-block-column.has-quaternary-background-color,
.wp-block-column[style*="background-color:#c0ebf1"],
.wp-block-column[style*="background-color:#d1d1e1"],
.wp-block-column[style*="background-color:#ffe97d"],
.wp-block-column[style*="background-color:#f2c8c2"] {
border-radius: 8px;
}
.wp-block-column.has-primary-background-color:has(+ .wp-block-column.has-primary-background-color),
.wp-block-column.has-primary-background-color:has(+ .wp-block-column.has-secondary-background-color),
.wp-block-column.has-primary-background-color:has(+ .wp-block-column.has-tertiary-background-color),
.wp-block-column.has-primary-background-color:has(+ .wp-block-column.has-quaternary-background-color),
.wp-block-column.has-secondary-background-color:has(+ .wp-block-column.has-primary-background-color),
.wp-block-column.has-secondary-background-color:has(+ .wp-block-column.has-secondary-background-color),
.wp-block-column.has-secondary-background-color:has(+ .wp-block-column.has-tertiary-background-color),
.wp-block-column.has-secondary-background-color:has(+ .wp-block-column.has-quaternary-background-color),
.wp-block-column.has-tertiary-background-color:has(+ .wp-block-column.has-primary-background-color),
.wp-block-column.has-tertiary-background-color:has(+ .wp-block-column.has-secondary-background-color),
.wp-block-column.has-tertiary-background-color:has(+ .wp-block-column.has-tertiary-background-color),
.wp-block-column.has-tertiary-background-color:has(+ .wp-block-column.has-quaternary-background-color),
.wp-block-column.has-quaternary-background-color:has(+ .wp-block-column.has-primary-background-color),
.wp-block-column.has-quaternary-background-color:has(+ .wp-block-column.has-secondary-background-color),
.wp-block-column.has-quaternary-background-color:has(+ .wp-block-column.has-tertiary-background-color),
.wp-block-column.has-quaternary-background-color:has(+ .wp-block-column.has-quaternary-background-color),
.wp-block-column[style*="background-color:#c0ebf1"]:has(+ .wp-block-column[style*="background-color:#d1d1e1"]),
.wp-block-column[style*="background-color:#d1d1e1"]:has(+ .wp-block-column[style*="background-color:#ffe97d"]),
.wp-block-column[style*="background-color:#f2c8c2"]:has(+ .wp-block-column.has-tertiary-background-color),
.wp-block-column.has-tertiary-background-color:has(+ .wp-block-column.has-primary-background-color) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.wp-block-column.has-primary-background-color + .wp-block-column.has-primary-background-color,
.wp-block-column.has-primary-background-color + .wp-block-column.has-secondary-background-color,
.wp-block-column.has-primary-background-color + .wp-block-column.has-tertiary-background-color,
.wp-block-column.has-primary-background-color + .wp-block-column.has-quaternary-background-color,
.wp-block-column.has-secondary-background-color + .wp-block-column.has-primary-background-color,
.wp-block-column.has-secondary-background-color + .wp-block-column.has-secondary-background-color,
.wp-block-column.has-secondary-background-color + .wp-block-column.has-tertiary-background-color,
.wp-block-column.has-secondary-background-color + .wp-block-column.has-quaternary-background-color,
.wp-block-column.has-tertiary-background-color + .wp-block-column.has-primary-background-color,
.wp-block-column.has-tertiary-background-color + .wp-block-column.has-secondary-background-color,
.wp-block-column.has-tertiary-background-color + .wp-block-column.has-tertiary-background-color,
.wp-block-column.has-tertiary-background-color + .wp-block-column.has-quaternary-background-color,
.wp-block-column.has-quaternary-background-color + .wp-block-column.has-primary-background-color,
.wp-block-column.has-quaternary-background-color + .wp-block-column.has-secondary-background-color,
.wp-block-column.has-quaternary-background-color + .wp-block-column.has-tertiary-background-color,
.wp-block-column.has-quaternary-background-color + .wp-block-column.has-quaternary-background-color,
.wp-block-column[style*="background-color:#d1d1e1"] + .wp-block-column[style*="background-color:#ffe97d"],
.wp-block-column[style*="background-color:#c0ebf1"] + .wp-block-column[style*="background-color:#d1d1e1"],
.wp-block-column[style*="background-color:#f2c8c2"] + .wp-block-column.has-tertiary-background-color,
.wp-block-column.has-primary-background-color + .wp-block-column.has-tertiary-background-color {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
/* --- Bootstrap .alert-info: Pastell-Cyan-Kasten (z.B. "Neugierig..."-Hinweis auf
/ki/ und 7 weiteren Seiten) -- nie auf CI umgestellt, weder Farbe noch Ecken. --- */
.alert-info {
background-color: var(--karley-blue-light) !important;
border-color: var(--karley-blue) !important;
color: var(--karley-blue-700) !important;
border-radius: 8px !important;
}
/* --- Bootstrap-Pagination (.page-link, z.B. /news-2/): aktive Seite hart auf
#0088cc -- auf Karley Blau + Button-Radius ziehen. --- */
.page-link { color: var(--karley-blue) !important; border-radius: 6px !important; }
.page-link:hover { background-color: var(--karley-blue-light) !important; color: var(--karley-blue-dark) !important; }
.page-item.active .page-link {
background-color: var(--karley-blue) !important;
border-color: var(--karley-blue) !important;
color: #fff !important;
}
/* --- Porto-Preistabelle (.porto-price-box, z.B. Datenschutzbeauftragter-Seite):
Plan-Highlight hart auf #0088cc, Karten selbst eckig. --- */
.porto-price-box { border-radius: 8px !important; overflow: hidden; }
.porto-price-box.plan-custom strong { background-color: var(--karley-blue) !important; }
/* --- Rohes ohne Gutenberg-Klasse (z.B. Testimonials auf der
Datenschutzbeauftragter-Seite) faellt auf Portos Theme-Default zurueck (helles
Blau als Hintergrund) -- auf den gleichen dezenten Rahmen-Stil wie
.wp-block-quote ziehen, statt eine eigene Blautoenung zu zeigen. --- */
blockquote:not(.wp-block-quote) {
background: transparent !important;
border: 0 !important;
border-left: 4px solid var(--karley-grey-light) !important;
padding: 0 0 0 1rem !important;
color: inherit !important;
}
/* --- .bg-dark-Kaesten (z.B. Presse-Kontaktbox) sind farblich neutral (dunkles
Grau, kein Blau/Regenbogen) -- bekommen nur noch die CI-Kartenrundung dazu. --- */
.bg-dark.p-3, .bg-dark.p-4, .bg-dark.p-5 { border-radius: 8px; }
/* --- Owl-Carousel-Container (.cms-slider): Bibliotheks-Standardradius (0.4rem)
auf den einheitlichen 8px-Kartenwert ziehen. --- */
.cms-slider { border-radius: 8px; }
/* --- Einzelner Download-Button im Seiteninhalt mit eigener Inline-Farbe
(style="background-color:#2981ba") -- auf Karley Blau + Standard-Button-Radius. --- */
[style*="background-color:#2981ba"] {
background-color: var(--karley-blue) !important;
border-radius: 6px !important;
}
/* --- Falsches/abweichendes Signal-Rot im Autopilot-generierten Content
(News-/Material-Seiten, mehrere Domains: etikett-aufkleber.de,
etiketten-karley.de): #e2001a statt des freigegebenen #e2231a -- und dabei
nicht erkennbar an ein echtes Sonderpreis-Signal gebunden, daher auf die
einzige Marken-/Interaktionsfarbe vereinheitlicht statt auf Signal-Rot
korrigiert. Zwei Verwendungen mit unterschiedlicher Behandlung: als
Button-/Flaechenfarbe (voll auf Blau) vs. als 4px-Akzentbalken bei
Zitat-/Hinweis-Absaetzen (nur die Randfarbe, Hintergrund/Text bleiben). --- */
[style*="background:#e2001a"], [style*="background-color:#e2001a"] {
color: #fff !important;
background-color: var(--karley-blue) !important;
border-color: var(--karley-blue) !important;
}
[style*="border-left:4px solid #e2001a"], [style*="border-left: 4px solid #e2001a"] {
border-left-color: var(--karley-blue) !important;
}
/* Outline-Variante desselben Buttons: weisser Hintergrund, Text+Rahmen in #e2001a.
:not(...) verhindert Ueberschneidung mit der Voll-Flaechen-Regel oben (dort
soll der Text weiss bleiben, hier soll er blau werden). */
[style*="color:#e2001a"]:not([style*="background:#e2001a"]):not([style*="background-color:#e2001a"]) {
color: var(--karley-blue) !important;
border-color: var(--karley-blue) !important;
}
/* --- Tailwind-Slate-Kacheln/Hinweisboxen aus derselben Content-Pipeline
(z.B. Themen-Pills "Wein" auf etiketten-karley.de, Hinweis-Absaetze) --
background:#f1f5f9 + border:#e2e8f0 statt der CI-getoenten Flaeche. --- */
[style*="background:#f1f5f9"] {
background-color: var(--karley-blue-light) !important;
border-color: var(--karley-blue) !important;
}
/* --- Startseiten-Hero-Banner der News-Klone (home_intro_page_slug
"startseite-intro", eigener Inline-