-Elemente an.
Diese sollen keine zusätzliche Höhe erzeugen.
*/
#items-loop-pg66bcd41cea47 .item.mix > p.wp-block-paragraph:empty {
display: none;
margin: 0 !important;
padding: 0 !important;
}
/*
Innerer Team-Block
--------------------------------------------------
Der innere Block füllt die komplette Kartenhöhe.
Dadurch bleiben Bild, Name, Info und Kontakt sauber innerhalb
gleich hoher Karten angeordnet.
*/
#items-loop-pg66bcd41cea47 .team-block,
#items-loop-pg66bcd41cea47 .team-block > .wp-block-group__inner-container {
display: flex !important;
flex-direction: column;
flex: 1 1 auto;
min-height: 100%;
height: 100%;
box-sizing: border-box;
max-width: none !important;
width: 100%;
margin: 0 !important;
padding: 0 !important;
}
/* ==================================================
16-03 TEAM-BILDER
================================================== */
/*
Team-Bildbereich
--------------------------------------------------
Das Bild füllt die Breite der Karte bündig aus.
Wichtig:
Kein padding im Bildbereich.
Kein object-fit: contain.
Kein heller Innenrand.
Stattdessen:
- object-fit: cover
- kontrollierter Bildausschnitt über object-position
- gleichmäßige Bildfläche über aspect-ratio
*/
#items-loop-pg66bcd41cea47 .team-block .pg34109fc44c7b {
width: 100%;
max-width: 100%;
aspect-ratio: 1.12 / 1;
margin: 0;
padding: 0;
overflow: hidden;
flex-shrink: 0;
background-color: transparent;
}
/*
Team-Bilder
--------------------------------------------------
Das Bild füllt den Bildbereich vollständig.
object-position sitzt etwas unterhalb von "top", damit Porträts
ruhiger wirken und nicht zu hart am oberen Rand kleben.
*/
#items-loop-pg66bcd41cea47 .team-block .pg34109fc44c7b img {
display: block;
width: 100% !important;
height: 100% !important;
max-width: 100%;
object-fit: cover;
object-position: center 18%;
margin: 0 !important;
padding: 0 !important;
border-radius: 23px 23px 0 0;
}
/* ==================================================
16-04 NAME
================================================== */
/*
Name
--------------------------------------------------
Der Name steht direkt unter dem Bild.
Der Abstand zur Tätigkeit ist bewusst kompakt.
*/
#items-loop-pg66bcd41cea47 .team-name {
margin: 0 !important;
padding: clamp(0.9rem, 3.2cqw, 1.2rem) clamp(1.2rem, 4.2cqw, 1.6rem) 0.15rem;
}
#items-loop-pg66bcd41cea47 .team-name > .wp-block-group__inner-container {
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
#items-loop-pg66bcd41cea47 .team-name h2 {
display: flex;
align-items: flex-start;
min-height: 3rem;
margin: 0 !important;
color: var(--kl-color-text);
font-family: var(--kl-font-bold) !important;
font-size: var(--kl-font-size-card-title-fluid-small);
line-height: 1.18;
letter-spacing: 0.02em;
text-align: left;
}
/* ==================================================
16-05 TEAM-INFOS / TÄTIGKEIT
================================================== */
/*
Info-Bereich
--------------------------------------------------
Tätigkeit, Telefon und E-Mail werden kompakt dargestellt.
Der Abstand direkt unter dem Namen ist reduziert.
Die Schriftgröße reagiert auf die Breite der Team-Kachel.
*/
#items-loop-pg66bcd41cea47 .team-info {
display: flex;
flex-direction: column;
flex: 1 1 auto;
margin: 0 !important;
padding: 0.15rem clamp(1.2rem, 4.2cqw, 1.6rem) clamp(1.15rem, 4cqw, 1.45rem);
color: var(--kl-color-text);
font-family: var(--kl-font-main) !important;
font-size: var(--kl-font-size-fluid-145-180);
line-height: 1.4;
}
#items-loop-pg66bcd41cea47 .team-info > .wp-block-group__inner-container {
display: flex;
flex-direction: column;
flex: 1 1 auto;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
/*
Tätigkeit
--------------------------------------------------
Der Tätigkeitsbereich ist bewusst auf 3 Zeilen geplant.
Der Abstand zum Telefonbereich ist kompakter als vorher.
*/
#items-loop-pg66bcd41cea47 .pgff6de10e7d4a {
min-height: calc(3 * 1.4em + 1.65rem);
margin: 0 0 0.45rem;
}
/*
Tätigkeit: Titel
*/
#items-loop-pg66bcd41cea47 .team-department-titel {
margin-bottom: 0.1rem;
font-family: var(--kl-font-bold) !important;
font-weight: bold;
font-size: var(--kl-font-size-fluid-145-180);
color: var(--kl-color-text);
}
/*
Tätigkeit: Text
--------------------------------------------------
Der Tätigkeitstext wird auf maximal 3 Zeilen begrenzt.
Längere Texte werden abgeschnitten, damit die Karten
optisch gleichmäßig bleiben.
*/
#items-loop-pg66bcd41cea47 .team-department {
height: calc(3 * 1.4em);
min-height: calc(3 * 1.4em);
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
font-family: var(--kl-font-main) !important;
font-size: var(--kl-font-size-fluid-145-180);
line-height: 1.4;
color: var(--kl-color-text);
}
/* ==================================================
16-06 KONTAKT / TELEFON / E-MAIL
================================================== */
/*
Kontaktbereiche: Telefon und E-Mail
--------------------------------------------------
Telefon und E-Mail nutzen in der Ausgabe dieselbe Klasse.
Deshalb wird die Klasse allgemein als Kontaktzeile behandelt.
Wichtig:
Kein margin-top:auto mehr — dadurch rücken Telefon und E-Mail
näher an die Tätigkeit.
*/
#items-loop-pg66bcd41cea47 .pg74664ec03d42 {
margin-top: 0.35rem;
padding-top: 0;
font-size: var(--kl-font-size-fluid-145-180);
}
/*
Abstand zwischen Telefon und E-Mail
--------------------------------------------------
Wenn zwei Kontaktzeilen aufeinander folgen,
bleibt der Abstand klein und gleichmäßig.
*/
#items-loop-pg66bcd41cea47 .pg74664ec03d42 + .pg74664ec03d42 {
margin-top: 0.35rem;
}
/*
Leere Kontaktzeilen ausblenden
--------------------------------------------------
Falls bei Telefon kein Wert vorhanden ist, gibt PostGrid aktuell
trotzdem einen leeren Link aus. Diese komplette Kontaktzeile wird
ausgeblendet, damit keine leeren "Telefon:"-Blöcke sichtbar bleiben.
*/
#items-loop-pg66bcd41cea47 .pg74664ec03d42:has(a[href="mailto:"]:empty),
#items-loop-pg66bcd41cea47 .pg74664ec03d42:has(a[href="tel:"]:empty) {
display: none;
}
/*
Zusätzliche Sicherheit:
Falls ein leerer Link nur Leerraum enthält, wird der Link selbst
unsichtbar gemacht.
*/
#items-loop-pg66bcd41cea47 .pg74664ec03d42 a[href="mailto:"],
#items-loop-pg66bcd41cea47 .pg74664ec03d42 a[href="tel:"] {
display: none !important;
}
/*
Kontakt-Titel
--------------------------------------------------
Gilt für Telefon und E-Mail, da beide aktuell dieselbe Titelklasse nutzen.
*/
#items-loop-pg66bcd41cea47 .team-contact-email-titel {
margin-bottom: 0.1rem;
font-family: var(--kl-font-bold) !important;
font-weight: bold;
font-size: var(--kl-font-size-fluid-145-180);
color: var(--kl-color-text);
}
/*
Kontakt-Link
--------------------------------------------------
Gilt für Telefon und E-Mail, da beide aktuell dieselbe Linkklasse nutzen.
Lange E-Mail-Adressen dürfen umbrechen.
*/
#items-loop-pg66bcd41cea47 .team-contact-email {
color: var(--kl-color-magenta);
text-decoration: underline;
text-decoration-color: var(--kl-color-magenta);
font-size: var(--kl-font-size-fluid-145-180);
overflow-wrap: anywhere;
word-break: break-word;
}
/*
Kontakt-Link Hover/Fokus
*/
#items-loop-pg66bcd41cea47 .team-contact-email:hover,
#items-loop-pg66bcd41cea47 .team-contact-email:focus {
color: var(--kl-color-text);
text-decoration-color: var(--kl-color-text);
}
/* ==================================================
16-07 ALTE TEAM-REGELN / ALLGEMEINE TEAM-BEREICHE
================================================== */
/*
Alte Team-Regeln / allgemeine Team-Bereiche
--------------------------------------------------
Diese bestehenden Klassen bleiben erhalten, werden aber so gesetzt,
dass sie das neue Team-Grid nicht stören.
*/
.team-bufdi-block {
padding-top: 2em;
}
.team-typ-titel {
color: var(--kl-color-text);
text-align: left;
font-size: var(--kl-font-size-em-180);
border-bottom: 0.2rem solid var(--kl-color-brown);
}
.team-directors-block div,
.team-worker-block div,
.team-bufdi-block div {
max-width: none !important;
font-family: var(--kl-font-main);
}
.team-department-titel,
.team-contact-tel-titel,
.team-location-titel,
.team-contact-email-titel,
.team-description-titel {
font-weight: bold;
}
.team-contact-email {
text-decoration-color: var(--kl-color-magenta);
}
.team-stars-block div {
min-width: 15em;
}
/* ==================================================
16-08 RESPONSIVE / BILDAUSSCHNITT UND MOBILE KANTE
================================================== */
/*
Tablet / schmale Desktop-Ansicht
--------------------------------------------------
Von 1299px bis 1060px: 2 Karten pro Reihe.
Durch justify-content:center im Flex-Container steht eine einzelne
Karte in der letzten Reihe automatisch mittig.
align-items:stretch und min-height sorgen dafür, dass Karten in
einer Reihe gleich hoch bleiben.
*/
@media (max-width: 1299px) and (min-width: 1060px) {
.entry-content .pg66bcd41cea47.PGBlockPostGrid,
.entry-content [class*="__inner-container"] > .pg66bcd41cea47.PGBlockPostGrid {
width: 100% !important;
max-width: var(--kl-layout-width) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
#items-loop-pg66bcd41cea47 {
display: flex !important;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
gap: 2.2rem !important;
width: 100% !important;
max-width: var(--kl-layout-width) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
#items-loop-pg66bcd41cea47 .item.mix {
flex: 0 1 calc((100% - 2.2rem) / 2) !important;
width: calc((100% - 2.2rem) / 2) !important;
max-width: calc((100% - 2.2rem) / 2) !important;
min-height: 58rem;
align-self: stretch;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
}
#items-loop-pg66bcd41cea47 .team-block,
#items-loop-pg66bcd41cea47 .team-block > .wp-block-group__inner-container {
height: 100%;
min-height: 100%;
}
#items-loop-pg66bcd41cea47 .team-block .pg34109fc44c7b {
aspect-ratio: 1.12 / 1 !important;
}
#items-loop-pg66bcd41cea47 .team-block .pg34109fc44c7b img {
object-fit: cover !important;
object-position: center 18% !important;
padding: 0 !important;
}
}
/*
Einzelansicht
--------------------------------------------------
Ab 1059px und kleiner wird das Team einspaltig.
Wichtig:
Die Mitarbeiterkarte bekommt eine maximale Breite und wird
über den Flex-Container sauber mittig ausgerichtet.
*/
@media (max-width: 1059px) {
.entry-content .pg66bcd41cea47.PGBlockPostGrid,
.entry-content [class*="__inner-container"] > .pg66bcd41cea47.PGBlockPostGrid {
width: min(42rem, calc(100% - 2rem)) !important;
max-width: min(42rem, calc(100% - 2rem)) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
#items-loop-pg66bcd41cea47 {
display: flex !important;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
gap: 1.8rem !important;
width: 100% !important;
max-width: 42rem !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
#items-loop-pg66bcd41cea47 .item.mix {
flex: 0 1 42rem !important;
width: 100% !important;
max-width: 42rem !important;
min-height: 56rem;
align-self: stretch;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
#items-loop-pg66bcd41cea47 .team-block,
#items-loop-pg66bcd41cea47 .team-block > .wp-block-group__inner-container {
height: 100%;
min-height: 100%;
}
#items-loop-pg66bcd41cea47 .team-block .pg34109fc44c7b {
width: 100% !important;
max-width: 100% !important;
aspect-ratio: 4 / 3 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
#items-loop-pg66bcd41cea47 .team-block .pg34109fc44c7b img {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
object-fit: cover !important;
object-position: center 18% !important;
margin: 0 !important;
padding: 0 !important;
}
#items-loop-pg66bcd41cea47 .team-name h2 {
min-height: 0;
}
#items-loop-pg66bcd41cea47 .pgff6de10e7d4a {
min-height: calc(3 * 1.4em + 1.65rem);
margin-bottom: 0.45rem;
}
}
/*
Sehr kleine Displays
--------------------------------------------------
Gleiche Einspaltenlogik, aber mit kleinerer Kartenrundung.
*/
@media (max-width: 480px) {
.entry-content .pg66bcd41cea47.PGBlockPostGrid,
.entry-content [class*="__inner-container"] > .pg66bcd41cea47.PGBlockPostGrid,
#items-loop-pg66bcd41cea47 {
width: min(42rem, calc(100% - 2rem)) !important;
max-width: min(42rem, calc(100% - 2rem)) !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
#items-loop-pg66bcd41cea47 .item.mix {
flex: 0 1 42rem !important;
width: 100% !important;
max-width: 42rem !important;
min-height: 56rem;
margin-left: auto !important;
margin-right: auto !important;
border-radius: 18px !important;
}
#items-loop-pg66bcd41cea47 .team-block .pg34109fc44c7b {
aspect-ratio: 4 / 3 !important;
}
#items-loop-pg66bcd41cea47 .team-block .pg34109fc44c7b img {
object-fit: cover !important;
object-position: center 18% !important;
border-radius: 16px 16px 0 0 !important;
padding: 0 !important;
}
}
/* ==================================================
17 ACCORDIONS / ARCHIVE / ADRESSEN
================================================== */
/* Förder, Sponsoren, Partner + Pressearchiv News Archiv - Accordions */
.pg1affe9253c1c .accordion-header,
.pg9d799e0667ee .accordion-header,
.accordion-location-block .accordion-header {
background-color: var(--kl-color-brown) !important;
font-family: var(--kl-font-main);
font-size: var(--kl-font-size-280);
}
.pg9d799e0667ee .accordion-header {
font-family: var(--kl-font-main);
font-size: var(--kl-font-size-280);
box-shadow: var(--kl-alpha-shadow-015) 0 5px 15px 0,
0 0 0 3px var(--kl-color-white);
border-radius: 50px 50px 15px 15px;
cursor: pointer;
text-transform: uppercase;
border-inline: solid var(--kl-color-magenta-vivid) 0.75rem;
border-top: solid var(--kl-color-magenta-vivid) 2px;
border-bottom: solid var(--kl-color-magenta-vivid) 2px;
}
/* Förder, Sponsoren, Partner */
.pg1affe9253c1c .accordion-header:after {
color: var(--kl-color-white);
content: "Diesen Bereich - Öffnen";
}
.pg1affe9253c1c .ui-accordion-header-active:after {
content: "Diesen Bereich - Schließen";
}
/* Pressearchiv - Accordions */
.press-block .pg9d799e0667ee .accordion-header:before {
color: var(--kl-color-white);
white-space: nowrap;
content: 'Das Jahr\00a0';
}
.press-block .pg9d799e0667ee .accordion-header:after {
color: var(--kl-color-white);
content: '\00a0- Öffnen';
}
.press-block .pg9d799e0667ee .ui-accordion-header-active:after {
content: '\00a0- Schließen';
}
/* Adressen - Accordions */
.accordion-location-block .accordion-header:before {
color: var(--kl-color-white);
white-space: nowrap;
content: 'Den Bezirk\00a0';
}
.accordion-location-block .accordion-icon {
padding-right: 0.5rem;
}
.accordion-location-block .accordion-header:after {
color: var(--kl-color-white);
content: '\00a0- Öffnen';
}
.accordion-location-block .accordion-header-active:after {
content: '\00a0- Schließen';
}
/* Accordion Rahmen */
.press-block .ui-accordion,
.news-archiv-block .ui-accordion,
.accordion-location-block .ui-accordion {
border-color: var(--kl-color-text);
border-left: solid var(--kl-color-text) 0.5rem;
border-right: solid var(--kl-color-text) 0.5rem;
border-bottom: solid var(--kl-color-text) 0.5rem;
}
/* Accordion Innenabstand */
.news-archiv-block .items-loop,
.press-block .items-loop {
margin: 1rem;
}
/* News Archiv - Accordions */
.news-archiv-block .pg9d799e0667ee .accordion-header:before {
color: var(--kl-color-white);
white-space: nowrap;
content: 'Das News\00a0';
}
.news-archiv-block .pg9d799e0667ee .accordion-header:after {
color: var(--kl-color-white);
content: '\00a0Öffnen';
}
.news-archiv-block .pg9d799e0667ee .ui-accordion-header-active:after {
content: '\00a0Schließen';
}
/* ==================================================
18 KONTAKT / ADRESSBLOCK / GÄSTETELEFON
================================================== */
/* Zweigstellen Block */
.branchoffice .wp-block-group {
width: 21em;
}
/* Hauptcontainer für Gästetelefon und Adressblock */
.guestphone,
.adress-block {
padding: 2rem;
background: none;
border: none;
box-shadow: none;
}
/* Post Grid Block innerhalb von guestphone */
.guestphone .PGBlockPostGrid {
margin-top: 1rem;
}
/* Ladeanzeige für dynamische Inhalte */
.guestphone .loop-loading {
text-align: center;
}
/* Filterformular-Gruppenlayout */
.guestphone .filterable-group-wrap {
display: flex;
gap: 1rem;
margin-bottom: 1rem;
}
/* Container für die einzelnen Einträge */
.guestphone .items-loop {
display: flex;
flex-wrap: wrap;
gap: 2rem;
}
/* Einzelner Eintrag */
.guestphone .item,
.adress-block .item {
padding: 1rem;
flex: 1 1 calc(50% - 2rem);
box-shadow: none;
background: none;
border: none;
}
/* Adressblock innerhalb eines Eintrags */
.guestphone .adress-block,
.adress-block .adress-block {
padding: 1rem;
}
/* Spaltenlayout für Bild und Text nebeneinander */
.guestphone .wp-block-columns,
.adress-block .wp-block-columns {
display: flex;
gap: 1rem;
}
.guestphone .wp-block-column,
.adress-block .wp-block-column {
padding: 0.5rem;
}
/* Bildgestaltung im linken Bereich */
.guestphone .pg3e57a1adcfa8,
.adress-block .pg3e57a1adcfa8 {
text-align: center;
}
.guestphone .pg3e57a1adcfa8 img,
.adress-block .pg3e57a1adcfa8 img {
max-width: 100%;
height: auto;
border-radius: 4px;
}
/* Telefonnummern, Fax, E-Mail, Zeiten */
.guestphone .pgbe4873ee750c,
.adress-block .pgbe4873ee750c {
margin-bottom: 1rem;
}
.guestphone .pgbe4873ee750c a,
.adress-block .pgbe4873ee750c a {
text-decoration: none;
font-weight: bold;
}
.guestphone .pgbe4873ee750c a:hover,
.adress-block .pgbe4873ee750c a:hover {
text-decoration: underline;
}
/* Titel wie Telefon oder Partnerkontakt */
.guestphone .team-location-titel,
.adress-block .location-typ {
font-weight: bold;
margin-bottom: 0.5rem;
}
/* Zusatzinfo unterhalb der Kontaktzeiten */
.guestphone .pg98132e66c1b5 .location-info,
.adress-block .location-info {
font-size: var(--kl-font-size-150);
margin-top: 0.5rem;
}
/* Paginierung */
.guestphone .pagination {
text-align: center;
margin-top: 2rem;
}
.guestphone .pagination .pager-list {
display: inline-block;
padding: 0.5rem 1rem;
border-radius: 4px;
}
/* Geschäftsstellen Block */
.projectrooms .adress-block {
width: 75rem;
}
/* Kontakt und Anmeldestellen */
.branchoffice .wp-block-group,
.pg0b31a0873c0d .wp-block-group {
margin: 0 !important;
font-size: var(--kl-font-size-200);
}
.location-time h4 {
margin-bottom: 0;
font-size: var(--kl-font-size-300);
}
.branchoffice .wp-block-group,
.pg0b31a0873c0d .wp-block-group h2 {
font-size: var(--kl-font-size-220);
font-weight: normal;
}
.location-info {
color: red;
font-weight: bold;
}
/* Büros */
.adress-block .wp-block-group {
display: block;
border: solid var(--kl-color-white) 0.1rem;
padding: 10px;
}
.location-typ {
font-weight: bold;
}
.adress-block h2 {
font-size: var(--kl-font-size-280);
}
#items-loop-pg47ee8e3840ec > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) {
margin-top: 1rem;
}
/* ==================================================
19 SEITE - DER VEREIN
================================================== */
.has-background-color p,
.has-background-color .wp-block-heading {
color: var(--kl-color-white);
}
/* ==================================================
20 BUTTONS
================================================== */
/* Buttons vom Modul Verein */
#verein h5 {
text-align: center;
color: var(--kl-color-brown);
background: var(--kl-color-white);
border: solid var(--kl-color-white) 15px;
border-top: solid var(--kl-color-white) 20px;
margin-bottom: 0;
}
#verein h5,
#verein .wp-block-group.tpfs-block {
-webkit-box-shadow: 4px 4px 3px 0 var(--kl-color-black);
box-shadow: 4px 4px 3px 0 var(--kl-color-black);
}
.wp-block-group .tpfs-block {
border: solid var(--kl-color-white) 10px;
border-top: solid var(--kl-color-white) 0.5em;
border-bottom: solid var(--kl-color-white) 40px;
background: var(--kl-color-white);
}
.vpfs-block .wp-block-button__link,
.tpfs-block .wp-block-button .wp-block-button__link {
width: 35rem !important;
}
.vpfs-block .wp-block-button .wp-element-button,
.tpfs-block .wp-block-button .wp-element-button {
font-size: var(--kl-font-size-em-100);
color: var(--kl-color-brown);
background-color: var(--kl-color-white);
padding: 10px 30px;
box-shadow: var(--kl-alpha-shadow-015) 0 5px 15px 0,
0 0 0 1px var(--kl-color-white);
border-radius: 3px;
cursor: pointer;
border-inline: solid var(--kl-color-magenta-vivid) 2px;
border-top: solid var(--kl-color-magenta-vivid) 2px;
border-bottom: solid var(--kl-color-magenta-vivid) 2px;
max-width: 20em;
}
.vpfs-block .wp-block-button .wp-element-button:hover,
.tpfs-block .wp-block-button .wp-element-button:hover {
color: var(--kl-color-magenta-vivid);
background-color: var(--kl-color-white);
border-inline: solid var(--kl-color-brown) 4px;
border-top: solid var(--kl-color-brown) 2px;
border-bottom: solid var(--kl-color-brown) 2px;
text-decoration: none;
}
.vpfs-block .wp-block-button .wp-element-button:active,
.tpfs-block .wp-block-button .wp-element-button:active {
color: var(--kl-color-magenta-vivid);
background-color: var(--kl-color-white);
border-inline: solid var(--kl-color-brown) 4px;
border-top: solid var(--kl-color-brown) 2px;
border-bottom: solid var(--kl-color-brown) 2px;
text-decoration: none;
}
/* ==================================================
21 FILE / DOWNLOAD BLOCKS
================================================== */
.gb-download-files h5,
.org-download-files h5 {
padding-top: 4rem;
}
.pdf-file .wp-block-media-text__content,
.gb-download-files,
.org-download-files {
padding: 0 !important;
}
/* ==================================================
22 PRESSE / PRESSEKONTAKT
================================================== */
/*
Pressekontakt / Mitarbeiter-Kontakt-Teaser
Gilt für PostGrid-/Kontaktblöcke mit:
- .Team-side-block
- Bild links
- Name und Kontaktinformationen rechts
Ziel:
- passt optisch zum allgemeinen Seitenlayout
- bleibt bis in kleine Ansichten nebeneinander
- erst in sehr schmaler Ansicht untereinander
- Bild/Text-Verhältnis stabil
- Bild beginnt in der Nebeneinander-Ansicht etwas unterhalb der Namensoberkante
- Bild ist etwas größer als vorher
- in der kleinsten Ansicht ist das Bild etwas nach rechts eingerückt
- keine übergroßen Namen
- keine seitlichen Ausbrüche
- lange E-Mail-Adressen brechen sauber
- Abstand zwischen "Telefon:" und Telefonnummer entspricht E-Mail-Abstand
- komische alleinstehende tel-Links mit Umbruch werden ausgeblendet
- funktioniert auch für weitere ähnliche Mitarbeiter-Kontaktblöcke
*/
/* ==================================================
22-01 AUSSENBEREICH / ÜBERSCHRIFT
================================================== */
/*
Container, in dem ein Team-side-block liegt.
Damit wird der gesamte Pressekontaktbereich an die normale
100rem-Seitenbreite angebunden.
*/
.entry-content .wp-block-group:has(.Team-side-block),
.entry-content .PGBlockPostGrid:has(.Team-side-block) {
box-sizing: border-box;
max-width: var(--kl-layout-width);
width: 100%;
margin-left: auto;
margin-right: auto;
}
/*
Überschrift wie "Pressekontakt"
Der Block enthält teilweise ein
am Anfang der Überschrift.
Das wird optisch abgefangen, indem die Überschrift sauber
kompakt gesetzt wird.
*/
.entry-content .wp-block-group:has(.Team-side-block) h3.wp-block-heading {
margin-top: 0 !important;
margin-bottom: 1.8rem !important;
color: var(--kl-color-text);
font-family: var(--kl-font-bold) !important;
font-size: var(--kl-font-size-fluid-240-340);
line-height: 1.15;
letter-spacing: 0.01em;
text-align: left;
}
/*
Falls in der Überschrift ein einzelnes
als Abstand steckt,
soll es keine riesige Lücke erzeugen.
*/
.entry-content .wp-block-group:has(.Team-side-block) h3.wp-block-heading br:first-child {
display: none;
}
/* ==================================================
22-02 POSTGRID-GRUNDSTRUKTUR
================================================== */
/*
PostGrid-Listen mit Team-side-blocks neutralisieren.
*/
.entry-content .PGBlockPostGrid:has(.Team-side-block),
.entry-content .PGBlockPostGrid:has(.Team-side-block) .items-loop {
box-sizing: border-box;
width: 100%;
max-width: 100%;
margin-left: auto;
margin-right: auto;
overflow: visible;
}
/*
Items in diesen Kontakt-PostGrids.
*/
.entry-content .PGBlockPostGrid:has(.Team-side-block) .items-loop {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 2rem;
}
.entry-content .PGBlockPostGrid:has(.Team-side-block) .item {
box-sizing: border-box;
width: 100%;
max-width: 100%;
margin: 0 !important;
padding: 0 !important;
overflow: visible;
}
/*
Leere Pagination bei diesen Kontaktblöcken ausblenden.
*/
.entry-content .PGBlockPostGrid:has(.Team-side-block) .pagination {
display: none !important;
}
/* ==================================================
22-03 KONTAKTKARTE / LAYOUT
================================================== */
/*
Hauptkarte
Wichtig:
WordPress setzt hier teilweise is-nowrap / Flex-Klassen.
Diese werden gezielt überschrieben, damit Bild und Text stabil
nebeneinander stehen.
align-items:flex-start sorgt dafür, dass Bild und Text oben geführt werden.
Die Bildspalte bekommt ihre Feinausrichtung in 22-04.
*/
.Team-side-block {
box-sizing: border-box;
width: 100%;
max-width: 100%;
display: grid !important;
grid-template-columns: clamp(14rem, 24vw, 21rem) minmax(0, 1fr);
align-items: flex-start;
column-gap: clamp(2rem, 4.2vw, 3.8rem);
row-gap: 1.4rem;
margin: 0 0 3rem 0 !important;
padding: clamp(1.4rem, 3vw, 2.2rem);
border-left: 0.2rem solid var(--kl-alpha-magenta-080);
border-right: 0.2rem solid var(--kl-alpha-magenta-080);
background: transparent;
box-shadow: none;
overflow: visible;
}
/*
Direkte Kind-Elemente der Karte dürfen nicht ausbrechen.
*/
.Team-side-block > * {
box-sizing: border-box;
min-width: 0;
max-width: 100%;
}
/*
WordPress-Inner-Container innerhalb des Textbereichs neutralisieren.
*/
.Team-side-block .wp-block-group,
.Team-side-block .wp-block-group__inner-container {
box-sizing: border-box;
max-width: none !important;
width: 100%;
margin: 0 !important;
padding: 0 !important;
}
/* ==================================================
22-04 BILD
================================================== */
/*
Bildspalte
Achtung:
.pg74664ec03d42 kommt auch bei E-Mail-/Kontaktzeilen vor.
Deshalb wird für das Bild nur der direkte Kind-Wrapper
von .Team-side-block angesprochen.
Das Bild wird in den Nebeneinander-Ansichten etwas tiefer gesetzt,
damit es ruhiger neben dem Namen/Text steht.
*/
.Team-side-block > .pg74664ec03d42 {
box-sizing: border-box;
width: 100% !important;
max-width: 100%;
display: flex;
align-items: flex-start;
justify-content: center;
margin: 0 !important;
padding: 0.95rem 0 0 0 !important;
}
/*
Bild selbst
Das Bild bleibt kontrolliert groß, quadratisch und läuft nicht aus.
*/
.Team-side-block > .pg74664ec03d42 img {
display: block;
width: 100% !important;
max-width: clamp(13rem, 24vw, 21rem) !important;
aspect-ratio: 1 / 1;
height: auto !important;
object-fit: cover;
object-position: center center;
margin: 0 !important;
border: 2px solid var(--kl-color-brown);
border-radius: 18px;
box-shadow: 0 4px 8px var(--kl-alpha-shadow-010);
filter: none;
}
/* ==================================================
22-05 NAME / TEXT / KONTAKTINFOS
================================================== */
/*
Name-Block.
*/
.Team-side-block .team-name {
margin: 0 0 0.75rem 0 !important;
padding: 0 !important;
}
/*
Name / H2
Nicht so riesig wie vorher, aber deutlich sichtbar.
*/
.Team-side-block .team-name h2,
.Team-side-block .team-name .pgd28067c72f91 {
display: block;
margin: 0 !important;
padding: 0 !important;
color: var(--kl-color-text);
font-family: var(--kl-font-bold) !important;
font-size: var(--kl-font-size-fluid-260-380) !important;
line-height: 1.12;
letter-spacing: 0.01em;
text-align: left;
min-height: 0;
height: auto;
overflow-wrap: normal;
word-break: normal;
}
/*
Info-Bereich.
*/
.Team-side-block .team-info {
margin: 0 !important;
padding: 0 !important;
color: var(--kl-color-text);
font-family: var(--kl-font-main) !important;
font-size: var(--kl-font-size-fluid-155-190);
line-height: 1.38;
}
/*
Inner-Container des Info-Bereichs.
*/
.Team-side-block .team-info > .wp-block-group__inner-container {
display: block;
}
/*
Einzelne Infozeilen.
Grundsätzlich kompakt, damit Labels und Werte nah zusammenbleiben.
*/
.Team-side-block .team-info .pgff6de10e7d4a,
.Team-side-block .team-info .pg7d614b4b65c2,
.Team-side-block .team-info .pg74664ec03d42 {
box-sizing: border-box;
width: 100%;
max-width: 100%;
margin: 0 0 0.38rem 0 !important;
padding: 0 !important;
color: var(--kl-color-text);
font-family: var(--kl-font-main) !important;
overflow-wrap: anywhere;
word-break: normal;
}
/*
Labels wie Abteilung, Standort, Telefon, E-Mail.
*/
.Team-side-block .team-department-titel,
.Team-side-block .team-location-titel,
.Team-side-block .team-contact-email-titel {
display: block;
margin: 0 0 0.06rem 0 !important;
color: var(--kl-color-text);
font-family: var(--kl-font-bold) !important;
font-weight: bold;
font-size: var(--kl-font-size-em-100);
line-height: 1.25;
}
/*
Textwerte.
*/
.Team-side-block .team-department,
.Team-side-block .team-location {
display: block;
margin: 0 !important;
padding: 0 !important;
color: var(--kl-color-text);
font-family: var(--kl-font-main) !important;
font-size: var(--kl-font-size-em-100);
line-height: 1.38;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
-webkit-line-clamp: unset;
-webkit-box-orient: initial;
overflow-wrap: anywhere;
word-break: normal;
}
/*
Telefon- und E-Mail-Links.
*/
.Team-side-block .team-info a,
.Team-side-block .team-contact-email {
color: var(--kl-color-magenta);
font-family: var(--kl-font-main) !important;
font-size: var(--kl-font-size-em-100);
line-height: 1.35;
text-decoration: underline;
text-decoration-color: var(--kl-color-magenta);
text-underline-offset: 0.18em;
overflow-wrap: anywhere;
word-break: normal;
}
.Team-side-block .team-info a:hover,
.Team-side-block .team-info a:focus,
.Team-side-block .team-contact-email:hover,
.Team-side-block .team-contact-email:focus {
color: var(--kl-color-text);
text-decoration-color: var(--kl-color-text);
}
/*
Komische / leere Telefonlinks aus PostGrid entfernen.
Wichtig:
PostGrid erzeugt teilweise:
- einen leeren tel-Link direkt im Telefon-Label-Block
- zusätzlich einen alleinstehenden tel-Link als direktes Kind
des Inner-Containers
- danach erst die eigentliche Telefonnummer in einem eigenen Block
Der alleinstehende Link enthält oft nur Leerzeichen/Zeilenumbrüche.
:empty greift dann nicht zuverlässig. Deshalb werden direkte tel-Links
im Inner-Container grundsätzlich ausgeblendet. Die echte Telefonnummer
liegt weiterhin innerhalb .pg7d614b4b65c2 und bleibt sichtbar.
*/
.Team-side-block .team-info > .wp-block-group__inner-container > a[href^="tel:"] {
display: none !important;
width: 0 !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
font-size: var(--kl-font-size-zero) !important;
overflow: hidden !important;
}
/*
Leere tel-Links innerhalb des Telefon-Label-Blocks entfernen.
*/
.Team-side-block .team-info .pg7d614b4b65c2:has(.team-location-titel) > a[href^="tel:"] {
display: none !important;
width: 0 !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
font-size: var(--kl-font-size-zero) !important;
overflow: hidden !important;
}
/*
Zusätzliche Sicherheit für tatsächlich leere Links.
*/
.Team-side-block .team-info a[href^="tel:"]:empty {
display: none !important;
}
/*
Telefonbereich kompakter machen.
Die Label-Zeile "Telefon:" und die Telefonnummer-Zeile bekommen
denselben engen Abstand wie "E-Mail:" und die E-Mail-Adresse.
*/
.Team-side-block .team-info .pg7d614b4b65c2:has(.team-location-titel):has(a[href^="tel:"]) {
margin-bottom: 0.06rem !important;
}
.Team-side-block .team-info .pg7d614b4b65c2:has(.team-location-titel):has(a[href^="tel:"]) + .pg7d614b4b65c2,
.Team-side-block .team-info .pg7d614b4b65c2:has(.team-location-titel):has(a[href^="tel:"]) ~ .pg7d614b4b65c2:has(a[href^="tel:"]) {
margin-top: 0 !important;
margin-bottom: 0.38rem !important;
}
.Team-side-block .team-info .pg7d614b4b65c2:has(a[href^="tel:"]) {
margin-top: 0 !important;
}
.Team-side-block .team-info .pg7d614b4b65c2 a[href^="tel:"] {
display: inline-block;
margin-top: 0 !important;
}
/*
E-Mail-Bereich etwas dichter an die Telefonnummer führen.
*/
.Team-side-block .team-info .pg7d614b4b65c2:has(a[href^="tel:"]) ~ .pg74664ec03d42 {
margin-top: 0.05rem !important;
}
/*
E-Mail-Label und E-Mail-Adresse behalten ebenfalls den kompakten Abstand.
*/
.Team-side-block .team-info .pg74664ec03d42:has(.team-contact-email-titel) {
margin-top: 0.05rem !important;
}
.Team-side-block .team-contact-email-titel + .team-contact-email {
display: inline-block;
margin-top: 0 !important;
}
/* ==================================================
22-06 RESPONSIVE
================================================== */
/*
Mittlere Breiten:
Bild und Text bleiben nebeneinander.
Das Bild wird etwas tiefer geführt und bleibt größer als vorher.
*/
@media (max-width: 760px) {
.Team-side-block {
grid-template-columns: clamp(10.5rem, 24vw, 15rem) minmax(0, 1fr);
align-items: flex-start;
column-gap: 1.7rem;
padding: 1.4rem 1.2rem;
}
.Team-side-block > .pg74664ec03d42 {
align-items: flex-start;
justify-content: center;
padding-top: 0.85rem !important;
}
.Team-side-block > .pg74664ec03d42 img {
max-width: clamp(10.5rem, 24vw, 15rem) !important;
border-radius: 14px;
}
.Team-side-block .team-name h2,
.Team-side-block .team-name .pgd28067c72f91 {
font-size: var(--kl-font-size-fluid-235-310) !important;
line-height: 1.1;
}
.Team-side-block .team-info {
font-size: var(--kl-font-size-fluid-148-170);
line-height: 1.36;
}
}
/*
Schmale, aber noch nebeneinander sinnvolle Ansicht:
Bild bleibt links, wird nicht winzig, Text bleibt rechts.
*/
@media (max-width: 620px) {
.Team-side-block {
grid-template-columns: clamp(9.5rem, 25vw, 12.5rem) minmax(0, 1fr);
column-gap: 1.4rem;
padding: 1.3rem 1rem;
}
.Team-side-block > .pg74664ec03d42 {
padding-top: 0.78rem !important;
}
.Team-side-block > .pg74664ec03d42 img {
max-width: clamp(9.5rem, 25vw, 12.5rem) !important;
}
.Team-side-block .team-name h2,
.Team-side-block .team-name .pgd28067c72f91 {
font-size: var(--kl-font-size-fluid-215-280) !important;
}
.Team-side-block .team-info {
font-size: var(--kl-font-size-150);
}
}
/*
Sehr kleine Ansicht:
Erst hier wird untereinander gestapelt.
Das Bild steht dann über dem Text und wird etwas nach rechts eingerückt.
*/
@media (max-width: 520px) {
.Team-side-block {
grid-template-columns: 1fr;
align-items: flex-start;
row-gap: 1.2rem;
padding: 1.3rem 1rem;
}
.Team-side-block > .pg74664ec03d42 {
justify-content: flex-start;
padding-top: 0 !important;
padding-left: 1.7rem !important;
}
.Team-side-block > .pg74664ec03d42 img {
width: clamp(11rem, 42vw, 15rem) !important;
max-width: clamp(11rem, 42vw, 15rem) !important;
border-radius: 14px;
}
.Team-side-block .team-name h2,
.Team-side-block .team-name .pgd28067c72f91 {
font-size: var(--kl-font-size-fluid-210-280) !important;
}
.Team-side-block .team-info {
font-size: var(--kl-font-size-155);
}
}
/* ==================================================
23 COUNTER
================================================== */
.wpsm_counter_b_row {
min-height: 40rem;
background-position: center center;
background-image: url('/wp-content/uploads/2023/04/auditorium-2584269-counter.png');
}
/* Counter Zentrierung */
.wpsm_row {
margin-top: 4%;
display: flex !important;
flex-wrap: wrap;
justify-content: space-around;
}
/* Zähler Counter */
.wpsm_counterbox .counter {
color: var(--kl-color-magenta-alt);
font-size: var(--kl-font-size-em-400);
text-shadow: 1px 1px 1px var(--kl-color-white),
1px -1px 1px var(--kl-color-white),
-1px 1px 1px var(--kl-color-white),
-1px -1px 1px var(--kl-color-white);
}
/* Titel Counter */
.wpsm_counterbox .wpsm_count-title {
color: var(--kl-color-white) !important;
font-size: var(--kl-font-size-em-110) !important;
text-shadow: 1px 1px 1px black,
1px -1px 1px black,
-1px 1px 1px black,
-1px -1px 1px black;
}
/* Counter - Abstände entfernen */
.wpsm_counterbox {
margin: 0 !important;
}
/* ==================================================
24 KSK INFO
================================================== */
.ksk-info {
max-height: 7em;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* KSK - Schrift */
.ksk-teaser p {
color: var(--kl-color-blue-brand);
}
/* KSK - Icon - Bildgröße ändern */
.ksk-img img {
max-width: 7.5em;
margin-left: 0.5em;
}
/* ==================================================
25 PDF SYMBOL / INLINE LINK
================================================== */
/*
PDF-Link mit Inline-Icon
Ziel:
- Lange Linktexte dürfen umbrechen.
- Der Link darf nicht nach rechts ausbrechen.
- Der Text steht in .pdf-link-text.
- Das PDF-Symbol steht rechts neben dem Textblock.
- Bei mehrzeiligen Links sitzt das Symbol vertikal mittig zu allen Zeilen.
- Horizontal sitzt das Symbol am Ende der längsten sichtbaren Textzeile.
*/
.pdf-link {
display: inline-flex !important;
align-items: center;
justify-content: flex-start;
gap: 0.35em;
width: fit-content;
max-width: 100%;
box-sizing: border-box;
white-space: normal !important;
text-decoration: none;
vertical-align: middle;
}
/*
Textteil des PDF-Links
Der Text darf umbrechen.
Der Textblock darf kleiner werden, damit das Icon rechts daneben
im sichtbaren Bereich bleibt.
*/
.pdf-link-text {
display: inline;
min-width: 0;
max-width: 100%;
box-sizing: border-box;
white-space: normal !important;
overflow-wrap: anywhere;
word-break: normal;
text-decoration: underline;
text-decoration-color: currentColor;
text-underline-offset: 0.15em;
}
/*
PDF-Icon im Link
Das Icon bleibt rechts neben dem Textblock.
align-items:center auf .pdf-link sorgt dafür, dass das Icon bei
mehrzeiligem Text vertikal mittig neben allen Zeilen steht.
*/
.pdf-inline-icon {
display: inline-block !important;
width: 24px;
max-width: 24px;
height: auto;
flex: 0 0 auto;
margin-left: 0;
vertical-align: middle;
}
/*
Absätze mit PDF-Links dürfen nicht nach rechts ausbrechen.
*/
.wp-block-paragraph:has(.pdf-link),
p:has(.pdf-link) {
max-width: 100%;
box-sizing: border-box;
overflow-wrap: anywhere;
word-break: normal;
}
/*
Links in farbigen WordPress-Gruppen stabilisieren.
Das betrifft z.B. rosa Infoboxen mit langen Formular-/PDF-Links.
*/
.wp-block-group.has-background a,
.wp-block-group.has-background p,
.wp-block-group.has-background li {
max-width: 100%;
box-sizing: border-box;
overflow-wrap: anywhere;
word-break: normal;
}
/*
Bilder, Diagramme, SVGs und Figures in farbigen Gruppen
dürfen nicht rechts aus dem Inhaltsbereich herauslaufen.
Wichtig:
.pdf-inline-icon wird ausgenommen, damit das kleine PDF-Symbol
nicht versehentlich wie ein normales Inhaltsbild skaliert wird.
*/
.wp-block-group.has-background img:not(.pdf-inline-icon),
.wp-block-group.has-background svg,
.wp-block-group.has-background figure,
.wp-block-group.has-background .wp-block-image {
max-width: 100% !important;
height: auto !important;
box-sizing: border-box;
}
/*
Falls ein sehr breites Bild/Diagramm bewusst groß ist,
wird es innerhalb der Gruppe scrollbar statt die ganze Seite
nach rechts aufzuziehen.
*/
.wp-block-group.has-background figure,
.wp-block-group.has-background .wp-block-image {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/*
Zusätzliche Sicherheit für direkte Inhalte in farbigen Gruppen.
*/
.wp-block-group.has-background .wp-block-group__inner-container {
max-width: 100%;
box-sizing: border-box;
overflow-wrap: anywhere;
word-break: normal;
}
/* ==================================================
26 BREITEN-FIX FÜR FULL-WIDTH TEMPLATE
================================================== */
body.template-full-width .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide),
body.template-full-width [class*="__inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
max-width: var(--kl-layout-width);
}
/* ==================================================
27 SPENDENBLOCK
================================================== */
/*
Grundbox für den gesamten Spendenblock
--------------------------------------------------
.klsp-box ist vermutlich als Link oder klickbare Fläche gedacht.
Deshalb:
- display:block für saubere Blockdarstellung
- cursor:pointer für klickbare Wirkung
- text-decoration:none, damit Link-Unterstreichungen entfernt werden
- text-align:center für zentrierte Inhalte
Typografie:
Der Block übernimmt bewusst die allgemeine Seitenschrift.
*/
.klsp-box,
.klsp-box * {
box-sizing: border-box;
}
.klsp-box {
display: block;
margin: 32px 0 30px;
cursor: pointer;
text-align: center;
color: var(--kl-color-text);
text-decoration: none;
font-family: var(--kl-font-main) !important;
font-size: var(--kl-font-size-180);
line-height: 1.5;
}
/*
Überschrift im Spendenblock
--------------------------------------------------
Die Überschrift ist etwas kräftiger und größer als der Fließtext,
bleibt aber optisch im Stil der übrigen Seite.
*/
.klsp-title {
font-family: var(--kl-font-bold) !important;
font-size: var(--kl-font-size-240);
line-height: 1.25;
font-weight: bold;
color: var(--kl-color-text);
margin-bottom: 1.5rem;
}
/*
Beschreibungstext im Spendenblock
--------------------------------------------------
Normaler Erklärungstext unterhalb der Überschrift.
Schriftgröße und Zeilenhöhe orientieren sich am allgemeinen Inhalt.
*/
.klsp-text {
font-family: var(--kl-font-main) !important;
font-size: var(--kl-font-size-180);
line-height: 1.5;
color: var(--kl-color-text);
margin: 0;
}
/*
Bereich um den Fortschrittsbalken
--------------------------------------------------
Sorgt für Abstand oberhalb und unterhalb des Balkens.
*/
.klsp-bar-zone {
padding: 28px 0 10px;
}
/*
Wrapper des Fortschrittsbalkens
--------------------------------------------------
position:relative ist notwendig, damit Pulse-Effekt,
Balken und Label sauber innerhalb dieses Bereichs
positioniert werden können.
*/
.klsp-bar-wrap {
position: relative;
width: 78%;
margin: 0 auto;
}
/*
Puls-Rahmen um den Spendenbalken
--------------------------------------------------
Dieser Rahmen liegt absolut um den Balken herum.
Standardmäßig ist er unsichtbar.
Aktiviert wird die Animation erst über .is-active.
*/
.klsp-pulse {
position: absolute;
inset: -16px;
border: 2px solid var(--kl-alpha-pink-glow);
border-radius: 999px;
opacity: 0;
transform: scale(1.12);
}
/*
Aktiver Puls-Effekt
--------------------------------------------------
Die Klasse .is-active startet die dezente Puls-Animation.
*/
.klsp-pulse.is-active {
animation: klspPulseIn 2.6s ease-in-out infinite;
}
/*
Animation für den Puls-Rahmen
--------------------------------------------------
Der Rahmen wird langsam kleiner und blendet dabei aus.
*/
@keyframes klspPulseIn {
0% {
opacity: 0.42;
transform: scale(1.12);
}
100% {
opacity: 0;
transform: scale(1);
}
}
/*
Äußerer Fortschrittsbalken
--------------------------------------------------
Helle rosa Grundfläche.
overflow:hidden sorgt dafür, dass die innere Füllung
sauber innerhalb der Rundung bleibt.
*/
.klsp-bar {
position: relative;
height: 46px;
background: var(--kl-color-magenta-soft-2);
border: 1px solid var(--kl-color-border-soft);
border-radius: 999px;
overflow: hidden;
}
/*
Innere Füllung des Fortschrittsbalkens
--------------------------------------------------
Die Breite wird vermutlich per JavaScript gesetzt.
Startwert ist 0%.
*/
.klsp-fill {
height: 100%;
width: 0%;
border-radius: 999px;
background: linear-gradient(135deg,var(--kl-color-magenta-light) 0%,var(--kl-color-magenta-light-2) 45%,var(--kl-color-magenta-light) 100%);
transition: width 2s cubic-bezier(0.4,0,0.2,1);
position: relative;
}
/*
Glanz-Effekt auf der Füllung
--------------------------------------------------
Wird nur aktiv, wenn .is-shimmer gesetzt ist.
*/
.klsp-fill.is-shimmer::after {
content: "";
position: absolute;
top: 0;
left: -40%;
width: 40%;
height: 100%;
background: linear-gradient(
90deg,
var(--kl-alpha-white-000) 0%,
var(--kl-alpha-white-280) 50%,
var(--kl-alpha-white-000) 100%
);
animation: klspShine 3.4s linear infinite;
}
/*
Animation für den Glanz-Effekt
--------------------------------------------------
Der helle Streifen wandert von links nach rechts
über den Fortschrittsbalken.
*/
@keyframes klspShine {
from {
left: -40%;
}
to {
left: 120%;
}
}
/*
Beschriftung im Fortschrittsbalken
--------------------------------------------------
Das Label liegt absolut über dem gesamten Balken
und wird horizontal sowie vertikal zentriert.
Schriftart und Farbe sind an die allgemeine Seite angepasst.
*/
.klsp-label {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--kl-font-bold) !important;
font-size: var(--kl-font-size-170);
line-height: 1;
font-weight: bold;
color: var(--kl-color-text);
}
/*
Mobile Anpassung
--------------------------------------------------
Auf kleinen Displays wird die Schrift etwas reduziert
und der Balken bekommt mehr Breite.
*/
@media (max-width: 700px) {
.klsp-box {
font-size: var(--kl-font-size-160);
}
.klsp-title {
font-size: var(--kl-font-size-210);
}
.klsp-text {
font-size: var(--kl-font-size-160);
}
.klsp-bar-wrap {
width: 92%;
}
.klsp-label {
font-size: var(--kl-font-size-150);
}
}
/* ==================================================
28 FORMULARE (KONTAKT + NEWSLETTER)
================================================== */
/*
Formular-Außencontainer
--------------------------------------------------
Der dezente Rahmen liegt bewusst auf den WordPress-Gruppen:
- .contact-form.wp-block-group
- .newsletter-form.wp-block-group
Beide Formulare sind gleich breit und sitzen mittig im 100rem-Layout.
*/
.contact-form.wp-block-group,
.newsletter-form.wp-block-group {
max-width: 60rem;
margin-left: auto;
margin-right: auto;
padding: 2.2rem 3rem;
border-left: 0.2rem solid var(--kl-alpha-magenta-080);
border-right: 0.2rem solid var(--kl-alpha-magenta-080);
font-family: var(--kl-font-main) !important;
color: var(--kl-color-text);
}
/*
Formular-Grundabstände
--------------------------------------------------
Entfernt unnötige Außenabstände der Formular-Plugins.
*/
.contact-form.wp-block-group form,
.newsletter-form.wp-block-group form {
margin: 0;
}
/*
Absätze in Formularen
--------------------------------------------------
Contact Form 7 erzeugt viele
-Blöcke.
Diese werden grundsätzlich kompakter gesetzt.
*/
.contact-form.wp-block-group form p,
.newsletter-form.wp-block-group form p {
margin-top: 0;
margin-bottom: 1.05rem;
}
/*
Überflüssige Zeilenumbrüche kompakter behandeln
--------------------------------------------------
In beiden Formularen stehen viele
-Elemente.
Die Felder selbst werden über display:block sauber gesetzt,
deshalb dürfen die
-Abstände reduziert werden.
*/
.contact-form.wp-block-group form br,
.newsletter-form.wp-block-group form br {
display: none;
}
/*
Überschriften im Formularbereich
*/
.contact-form.wp-block-group h3,
.newsletter-form.wp-block-group h3 {
margin-top: 0;
margin-bottom: 1.5rem;
color: var(--kl-color-text);
}
/*
Feld-Labels
--------------------------------------------------
Normale Feldbeschriftungen stehen klar über dem jeweiligen Eingabefeld.
*/
.contact-form.wp-block-group label,
.newsletter-form.wp-block-group form > label {
display: block;
font-family: var(--kl-font-bold) !important;
font-size: var(--kl-font-size-form-label);
line-height: 1.35;
color: var(--kl-color-text);
margin-bottom: 0.25rem;
}
/*
Contact Form 7 Feld-Wrappers
--------------------------------------------------
Damit Eingabefelder trotz ausgeblendeter
-Tags sauber
unter dem Label stehen.
*/
.contact-form.wp-block-group .wpcf7-form-control-wrap {
display: block;
}
/*
Eingabefelder
--------------------------------------------------
Einheitliches Feldlayout für Kontaktformular und Newsletter.
*/
.contact-form.wp-block-group input[type="text"],
.contact-form.wp-block-group input[type="email"],
.contact-form.wp-block-group input[type="tel"],
.contact-form.wp-block-group textarea,
.newsletter-form.wp-block-group input[type="text"],
.newsletter-form.wp-block-group input[type="email"] {
width: 100%;
max-width: 100%;
margin-top: 0.25rem;
margin-bottom: 0.65rem;
padding: 0.85rem 1rem;
border: 0.1rem solid var(--kl-alpha-brown-border);
border-radius: 0;
background-color: var(--kl-color-white);
font-family: var(--kl-font-main) !important;
font-size: var(--kl-font-size-form-field);
line-height: 1.35;
color: var(--kl-color-text);
}
/*
Fokuszustand
--------------------------------------------------
Ruhige Orientierung beim Ausfüllen.
*/
.contact-form.wp-block-group input[type="text"]:focus,
.contact-form.wp-block-group input[type="email"]:focus,
.contact-form.wp-block-group input[type="tel"]:focus,
.contact-form.wp-block-group textarea:focus,
.newsletter-form.wp-block-group input[type="text"]:focus,
.newsletter-form.wp-block-group input[type="email"]:focus {
outline: none;
border-color: var(--kl-color-magenta);
}
/*
Nachrichtentextfeld
--------------------------------------------------
Kompakter Start, aber weiterhin vertikal vergrößerbar.
*/
.contact-form.wp-block-group textarea {
min-height: 12rem;
height: 12rem;
resize: vertical;
}
/*
Datenschutz- und Hinweistexte
*/
.contact-form.wp-block-group .datenschutz,
.newsletter-form.wp-block-group em,
.newsletter-form.wp-block-group p {
font-family: var(--kl-font-main) !important;
font-size: var(--kl-font-size-form-note);
line-height: 1.45;
color: var(--kl-color-text);
}
/*
Links in Formulartexten
*/
.contact-form.wp-block-group a,
.newsletter-form.wp-block-group a {
color: var(--kl-color-magenta);
text-decoration: underline;
text-decoration-color: var(--kl-color-magenta);
}
/*
Checkboxen allgemein
--------------------------------------------------
Checkboxen bekommen etwas mehr Luft und bleiben sauber
am Text ausgerichtet.
*/
.contact-form.wp-block-group input[type="checkbox"],
.newsletter-form.wp-block-group input[type="checkbox"] {
margin-right: 0.75rem;
vertical-align: middle;
}
/*
Kontaktformular: Datenschutzbereich
--------------------------------------------------
Der Datenschutzbereich bekommt mehr vertikalen Abstand,
damit Checkbox-Zeile und Datenschutz-Link auf Touch-Geräten
nicht zu dicht beieinander liegen.
*/
.contact-form.wp-block-group label.datenschutz {
display: block;
margin-top: 1.2rem;
font-family: var(--kl-font-main) !important;
font-size: var(--kl-font-size-form-note);
line-height: 1.5;
}
/*
Contact Form 7 Checkbox-Zeile
--------------------------------------------------
Die gesamte Checkbox-Zeile wird höher und besser anklickbar.
*/
.contact-form.wp-block-group .wpcf7-checkbox .wpcf7-list-item {
display: inline-flex;
align-items: center;
margin-left: 0;
margin-bottom: 0.9rem;
line-height: 1.45;
}
/*
Datenschutz-Link im Kontaktformular
--------------------------------------------------
Der Link steht mit ausreichend Abstand unter der Checkbox-Zeile.
Dadurch ist er mit Touchscreen besser separat anklickbar.
*/
.contact-form.wp-block-group label.datenschutz a {
display: inline-block;
margin-top: 0.75rem;
padding-top: 0.15rem;
}
/*
Newsletter-Listen-Auswahl
--------------------------------------------------
Die Newsletter-Optionen werden als eigene, größere Klickzeilen
dargestellt. Dadurch sind "Newsletter von KulturLeben Berlin"
und "Newsletter der Werkstatt Utopia" auf Touch-Geräten besser
getrennt und einfacher anwählbar.
*/
.newsletter-form.wp-block-group .lm-lists,
.newsletter-form.wp-block-group .lm-lists + div {
display: flex;
align-items: flex-start;
margin-top: 0.95rem;
margin-bottom: 0.95rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
font-size: var(--kl-font-size-form-note);
line-height: 1.45;
}
/*
Newsletter-Checkboxen
--------------------------------------------------
Leicht nach unten gesetzt, damit Checkbox und Text optisch
sauber auf einer Linie sitzen.
*/
.newsletter-form.wp-block-group .lm-lists input[type="checkbox"],
.newsletter-form.wp-block-group .lm-lists + div input[type="checkbox"] {
flex: 0 0 auto;
margin-top: 0.25rem;
margin-right: 0.75rem;
}
/*
Newsletter-Checkbox-Labels
--------------------------------------------------
Die Labels dürfen nicht als große Feldlabels erscheinen.
Sie bleiben neben der Checkbox, erhalten aber genug Zeilenhöhe.
*/
.newsletter-form.wp-block-group .lm-lists label,
.newsletter-form.wp-block-group .lm-lists + div label {
display: inline-block;
font-family: var(--kl-font-main) !important;
font-size: var(--kl-font-size-form-note);
line-height: 1.45;
color: var(--kl-color-text);
}
/*
Newsletter-Hinweistext
--------------------------------------------------
Der Einverständnistext bekommt etwas Abstand nach oben,
damit er nicht direkt an der letzten Checkbox klebt.
*/
.newsletter-form.wp-block-group .lm-lists + div + p {
margin-top: 1.35rem;
}
/*
Einheitlicher Button für Senden und Abonnieren
--------------------------------------------------
Dieser Button ist bewusst gut lesbar:
- moderater Buchstabenabstand
- klare KulturLeben-Farben
- keine Unterstreichung
- ruhiger, stabiler Button-Look
*/
.contact-form.wp-block-group input[type="submit"],
.newsletter-form.wp-block-group input[type="submit"] {
display: inline-block;
margin-top: 0.9rem;
padding: 1rem 2.4rem;
border: 0.2rem solid var(--kl-color-magenta);
border-radius: 0;
background-color: var(--kl-color-brown);
color: var(--kl-color-white);
font-family: var(--kl-font-bold) !important;
font-size: var(--kl-font-size-form-button);
line-height: 1.2;
letter-spacing: 0.045em;
text-decoration: none !important;
text-transform: none;
cursor: pointer;
}
/*
Newsletter: Abstand nach unten
--------------------------------------------------
Gibt dem gesamten Newsletter-Block mehr Luft zum nachfolgenden Inhalt.
*/
.newsletter-form.wp-block-group {
margin-bottom: 4rem !important;
}
/*
Button Hover/Fokus
--------------------------------------------------
Gleiche Größe, kein Springen, keine Unterstreichung.
Nur ruhiger Farbwechsel.
*/
.contact-form.wp-block-group input[type="submit"]:hover,
.contact-form.wp-block-group input[type="submit"]:focus,
.newsletter-form.wp-block-group input[type="submit"]:hover,
.newsletter-form.wp-block-group input[type="submit"]:focus {
background-color: var(--kl-color-magenta);
border-color: var(--kl-color-brown);
color: var(--kl-color-white);
text-decoration: none !important;
outline: none;
}
/*
Contact Form 7 Spinner
*/
.contact-form.wp-block-group .wpcf7-spinner {
vertical-align: middle;
margin-left: 1rem;
}
/*
Contact Form 7 Rückmeldungen
*/
.contact-form.wp-block-group .wpcf7-response-output {
margin: 1.4rem 0 0;
padding: 1rem 1.2rem;
font-size: var(--kl-font-size-form-note);
line-height: 1.4;
}
/*
Versteckte Honeypot-Felder
--------------------------------------------------
Diese Felder sollen keinen sichtbaren Platz erzeugen.
*/
.contact-form.wp-block-group .hp-message,
.contact-form.wp-block-group [class*="-wrap"][style*="width: 0px"] {
margin: 0 !important;
padding: 0 !important;
}
/*
Mobile Ansicht
--------------------------------------------------
Auf kleinen Displays nutzen die Formulare wieder die volle Breite
innerhalb des normalen Seitenabstands. Touch-Abstände bleiben erhalten.
*/
@media (max-width: 700px) {
.contact-form.wp-block-group,
.newsletter-form.wp-block-group {
max-width: none;
padding: 1.6rem 1.4rem;
border-left-width: 0.15rem;
border-right-width: 0.15rem;
}
.contact-form.wp-block-group form p,
.newsletter-form.wp-block-group form p {
margin-bottom: 1rem;
}
.contact-form.wp-block-group label,
.newsletter-form.wp-block-group form > label {
font-size: var(--kl-font-size-150);
}
.contact-form.wp-block-group input[type="text"],
.contact-form.wp-block-group input[type="email"],
.contact-form.wp-block-group input[type="tel"],
.contact-form.wp-block-group textarea,
.newsletter-form.wp-block-group input[type="text"],
.newsletter-form.wp-block-group input[type="email"] {
font-size: var(--kl-font-size-150);
padding: 0.8rem 0.9rem;
}
.contact-form.wp-block-group textarea {
min-height: 11rem;
height: 11rem;
}
.contact-form.wp-block-group .wpcf7-checkbox .wpcf7-list-item {
margin-bottom: 1rem;
}
.contact-form.wp-block-group label.datenschutz a {
margin-top: 0.9rem;
}
.newsletter-form.wp-block-group .lm-lists,
.newsletter-form.wp-block-group .lm-lists + div {
margin-top: 1rem;
margin-bottom: 1rem;
padding-top: 0.35rem;
padding-bottom: 0.35rem;
}
.contact-form.wp-block-group input[type="submit"],
.newsletter-form.wp-block-group input[type="submit"] {
font-size: var(--kl-font-size-155);
letter-spacing: 0.035em;
padding: 0.9rem 2rem;
}
}
/* ==================================================
29 STANDORTE / ZEITEN / TELEFON
================================================== */
/* ==================================================
29-01 GRUNDLAYOUT / VARIABLEN
================================================== */
.kl-standorte {
--accent-blue: var(--kl-color-blue);
--magenta: var(--kl-color-magenta);
--braun: var(--kl-color-brown-soft);
--braun-hell: var(--kl-color-brown-muted);
--hell: var(--kl-color-surface-page);
--weiss: var(--kl-color-white);
--schatten: 0 2px 6px var(--kl-alpha-shadow-012);
--schatten-strong: 0 10px 26px var(--kl-alpha-shadow-018);
--accent-base: var(--magenta);
--accent-hover: var(--accent-blue);
--accent-active: var(--magenta);
font-family: var(--kl-font-main);
color: var(--kl-color-black);
font-size: var(--kl-font-size-122);
line-height: 1.65;
}
.kl-standorte *,
.kl-standorte *::before,
.kl-standorte *::after {
box-sizing: border-box;
}
.kl-standorte .is-hidden {
display: none !important;
}
.kl-standorte button {
min-height: 44px;
font: inherit;
text-transform: none !important;
letter-spacing: normal !important;
}
.kl-standorte button:focus-visible,
.kl-standorte a:focus-visible {
outline: 4px solid var(--kl-alpha-magenta-350);
outline-offset: 2px;
}
/* ==================================================
29-02 SYSTEMMELDUNGEN / LADEZUSTAND
================================================== */
.kl-standorte .sysbox {
display: none;
background: var(--hell);
border: 2px solid var(--magenta);
border-left-width: 8px;
padding: .7rem .9rem;
margin: 0 0 .7rem 0;
border-radius: 14px;
box-shadow: 0 6px 16px var(--kl-alpha-shadow-010);
}
.kl-standorte .sysbox.is-show {
display: block;
}
.kl-standorte .loading {
display: block;
margin: .6rem 0 .8rem;
color: var(--kl-alpha-shadow-075);
padding: .65rem .8rem;
background: var(--kl-alpha-blue-080);
border: 1px solid var(--kl-alpha-blue-180);
border-radius: 14px;
font-weight: 800;
}
/* ==================================================
29-03 ÜBERSCHRIFTEN / SECTION-HEADINGS
================================================== */
.kl-standorte .section-heading {
margin: 1.35rem 0 .9rem;
padding: .55rem .75rem .62rem 1rem;
border-left: 8px solid var(--accent-base);
border-radius: 12px;
background: var(--kl-alpha-surface-950);
box-shadow: 0 2px 10px var(--kl-alpha-shadow-060);
font-weight: 900;
display: flex;
align-items: center;
gap: .85rem;
color: var(--kl-color-brown-dark);
}
.kl-standorte .section-logo {
width: 5.6rem;
height: 5.6rem;
object-fit: contain;
border-radius: 10px;
background: var(--kl-alpha-white-180);
padding: .18rem;
box-shadow: inset 0 0 0 1px var(--kl-alpha-white-220);
}
/* ==================================================
29-04 DETAILS / AKKORDEONS (FIX: ACTION IMMER RECHTS + BEZIRKSWAPPEN)
================================================== */
.kl-standorte .toggle-details {
margin: 1rem 0 1.25rem;
border-radius: 18px;
}
.kl-standorte .toggle-details.gap-before {
margin-top: 2.7rem;
}
/*
Akkordeon-Kopf / Summary
--------------------------------------------------
Wichtig:
- Der Button bleibt rechts.
- Der linke Titelbereich darf schrumpfen.
- Bezirkswappen dürfen den geschlossenen Kopf nicht aufziehen.
*/
.kl-standorte .toggle-details > summary {
list-style: none;
cursor: pointer;
margin: 0;
padding: .78rem .95rem;
background: var(--braun);
color: var(--kl-color-white);
border-left: 6px solid var(--accent-base);
border-radius: 18px;
box-shadow: 0 8px 22px var(--kl-alpha-shadow-012);
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
gap: .85rem;
min-height: 4.8rem;
box-sizing: border-box;
font-weight: 900;
transition:
border-radius .24s ease,
background-color .24s ease,
box-shadow .24s ease;
}
.kl-standorte .toggle-details > summary::-webkit-details-marker {
display: none;
}
.kl-standorte .toggle-details > summary:hover {
background: var(--braun-hell);
box-shadow: 0 12px 28px var(--kl-alpha-shadow-016);
}
.kl-standorte .toggle-details[open] > summary {
border-radius: 18px 18px 0 0;
}
.kl-standorte .toggle-details[open] {
box-shadow: 0 10px 24px var(--kl-alpha-shadow-010);
}
/*
Linker Bereich
--------------------------------------------------
Enthält entweder:
- .toggle-icon bei normalen Akkordeons
- .district-logo bei Bezirks-Akkordeons
- danach den Titeltext
*/
.kl-standorte .toggle-title {
display: flex;
align-items: center;
gap: .75rem;
flex: 1 1 auto;
min-width: 0;
max-width: 100%;
}
/*
Titeltext im linken Bereich
--------------------------------------------------
Lange Namen dürfen umbrechen, aber nicht den Button verdrängen.
*/
.kl-standorte .toggle-title > span:last-child {
min-width: 0;
max-width: 100%;
line-height: 1.2;
word-break: normal;
overflow-wrap: anywhere;
}
/*
Rundes Standard-Icon für normale Akkordeons
--------------------------------------------------
Betrifft z.B.:
- Nächste Öffnung
- Unsere Büros
- Unser Gästetelefon
*/
.kl-standorte .toggle-icon {
width: 4.7rem;
min-width: 4.7rem;
height: 4.7rem;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
border-radius: 999px;
background: var(--kl-alpha-white-180);
box-shadow: inset 0 0 0 1px var(--kl-alpha-white-240);
font-size: var(--kl-font-size-290);
line-height: 1;
}
/*
Bezirkswappen im Akkordeon-Kopf
--------------------------------------------------
Bugfix:
Ohne feste Begrenzung werden die PNG-Wappen in Originalgröße
angezeigt und ziehen den geschlossenen Akkordeon-Kopf riesig hoch.
*/
.kl-standorte .district-details > summary .district-logo {
display: block;
flex: 0 0 auto;
width: 3.2rem !important;
min-width: 3.2rem !important;
height: 3.2rem !important;
max-width: 3.2rem !important;
max-height: 3.2rem !important;
object-fit: contain;
object-position: center;
}
/*
Bezirks-Akkordeons etwas kompakter halten
*/
.kl-standorte .district-details > summary {
min-height: 4.8rem;
}
/*
Button immer rechts
*/
.kl-standorte .toggle-action {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .38rem;
border-radius: 999px;
background: var(--kl-color-white);
color: var(--kl-color-dark);
padding: .38rem .82rem;
font-weight: 900;
box-shadow: 0 2px 8px var(--kl-alpha-shadow-020);
transition:
transform .18s ease,
box-shadow .18s ease;
white-space: nowrap;
margin-left: auto;
flex: 0 0 auto;
}
/*
Hover bleibt ruhig und sichtbar
*/
.kl-standorte .toggle-details > summary:hover .toggle-action {
transform: translateY(-1px);
box-shadow: 0 6px 14px var(--kl-alpha-shadow-022);
}
/*
Umschalten: Aufklappen / Zuklappen
*/
.kl-standorte .toggle-action .is-open {
display: none;
}
.kl-standorte .toggle-action .is-closed::before {
content: "+";
margin-right: .35rem;
font-weight: 900;
}
.kl-standorte .toggle-action .is-open::before {
content: "–";
margin-right: .35rem;
font-weight: 900;
}
.kl-standorte .toggle-details[open] .toggle-action .is-closed {
display: none;
}
.kl-standorte .toggle-details[open] .toggle-action .is-open {
display: inline;
}
/*
Details-Body
--------------------------------------------------
Wird vom JavaScript animiert.
Diese Grundregel verhindert Layout-Ausreißer.
*/
.kl-standorte .details-body {
box-sizing: border-box;
}
/*
Mobile Anpassungen
--------------------------------------------------
Auf kleineren Displays:
- Summary etwas kompakter
- Standard-Icons kleiner
- Bezirkswappen kleiner
- Button bleibt rechts, darf aber kompakter werden
*/
@media (max-width: 700px) {
.kl-standorte .toggle-details > summary {
min-height: 4.4rem;
padding: .65rem .8rem;
gap: .7rem;
}
.kl-standorte .toggle-title {
gap: .65rem;
}
.kl-standorte .toggle-icon {
width: 3.8rem;
min-width: 3.8rem;
height: 3.8rem;
font-size: var(--kl-font-size-225);
}
.kl-standorte .district-details > summary .district-logo {
width: 2.8rem !important;
min-width: 2.8rem !important;
height: 2.8rem !important;
max-width: 2.8rem !important;
max-height: 2.8rem !important;
}
.kl-standorte .toggle-action {
padding: .32rem .62rem;
font-size: var(--kl-font-size-115);
}
}
/*
Sehr kleine Displays
--------------------------------------------------
Wenn Bezirkstitel sehr lang sind, bleibt der Button rechts.
Der Titel darf links sauber umbrechen.
*/
@media (max-width: 420px) {
.kl-standorte .toggle-details > summary {
align-items: center;
gap: .55rem;
}
.kl-standorte .toggle-title {
gap: .55rem;
}
.kl-standorte .toggle-title > span:last-child {
font-size: var(--kl-font-size-135);
line-height: 1.15;
}
.kl-standorte .toggle-action {
padding: .28rem .5rem;
font-size: var(--kl-font-size-105);
}
}
/* ==================================================
29-05 LISTEN / KARTEN
================================================== */
.kl-standorte .quick-list,
.kl-standorte .location-list {
display: grid;
grid-template-columns: 1fr;
gap: .85rem;
}
.kl-standorte .quick-card,
.kl-standorte .location-card {
width: 100%;
background: var(--kl-color-surface-cream);
border: 1px solid var(--kl-alpha-shadow-070);
border-left: 8px solid var(--accent-base);
border-radius: 12px;
box-shadow: 0 3px 8px var(--kl-alpha-shadow-045);
}
.kl-standorte .quick-card {
padding: .85rem 1rem .95rem;
}
.kl-standorte .location-card {
padding: .95rem 1rem 1.05rem;
}
.kl-standorte .paged-item.is-hidden {
display: none !important;
}
.kl-standorte .quick-card.type-buero,
.kl-standorte .location-card.type-buero {
border-left-color: var(--magenta);
}
.kl-standorte .quick-card.type-anmeldestelle,
.kl-standorte .location-card.type-anmeldestelle {
border-left-color: var(--accent-blue);
}
.kl-standorte .quick-card.type-sozialpartner,
.kl-standorte .location-card.type-sozialpartner {
border-left-color: var(--kl-color-green-light);
}
.kl-standorte .quick-card.type-telefonservice,
.kl-standorte .location-card.type-telefonservice {
border-left-color: var(--kl-color-orange-light);
}
.kl-standorte .location-top {
display: flex;
justify-content: flex-start;
gap: .6rem;
align-items: flex-start;
margin-bottom: .55rem;
flex-wrap: wrap;
}
.kl-standorte .location-tag {
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .42rem 1rem;
border-radius: 2px;
font-weight: 900;
font-size: var(--kl-font-size-115);
border: 0;
border-bottom: 1px solid var(--kl-alpha-shadow-010);
background: var(--kl-color-yellow-soft);
color: var(--kl-color-dark);
white-space: nowrap;
box-shadow: none;
min-height: 1.55rem;
}
.kl-standorte .type-icon {
display: inline-block;
font-size: var(--kl-font-size-em-220);
line-height: 1;
}
.kl-standorte .quick-title {
font-weight: 900;
font-size: var(--kl-font-size-135);
line-height: 1.25;
margin: .1rem 0 .5rem;
}
.kl-standorte .location-name {
font-weight: 900;
font-size: var(--kl-font-size-140);
line-height: 1.25;
margin: .2rem 0 .75rem;
}
.kl-standorte .location-line {
margin: .35rem 0;
line-height: 1.5;
}
.kl-standorte .location-line .lbl {
display: inline-block;
min-width: 8.5ch;
color: var(--kl-alpha-shadow-072);
font-weight: 800;
}
.kl-standorte .location-muted {
color: var(--kl-alpha-shadow-072);
}
.kl-standorte .empty-card {
padding: .85rem 1rem;
background: var(--kl-color-white);
border: 1px dashed var(--kl-alpha-shadow-018);
border-radius: 12px;
color: var(--kl-alpha-shadow-072);
font-weight: 800;
}
/* ==================================================
29-06 BUTTONS / LINKS / KOPIEREN
================================================== */
.kl-standorte a,
.kl-standorte a:hover,
.kl-standorte a:focus,
.kl-standorte a *,
.kl-standorte a:hover * {
text-decoration: none !important;
}
.kl-standorte .link-line {
display: flex;
align-items: flex-start;
gap: .45rem;
flex-wrap: wrap;
}
.kl-standorte .link-buttons {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
}
.kl-standorte .soft-link {
display: inline-flex;
align-items: center;
border: 1px solid var(--kl-alpha-shadow-013);
border-radius: 999px;
background: var(--kl-alpha-white-780);
color: var(--kl-color-dark);
text-decoration: none;
font-weight: 800;
line-height: 1.25;
box-shadow: 0 1px 5px var(--kl-alpha-shadow-060);
transition:
background-color .18s ease,
box-shadow .18s ease,
transform .18s ease,
border-color .18s ease;
}
.kl-standorte .soft-link:hover {
background: var(--kl-color-white);
box-shadow: 0 4px 10px var(--kl-alpha-shadow-012);
transform: translateY(-1px);
border-color: var(--kl-alpha-magenta-280);
}
.kl-standorte .details-body a,
.kl-standorte .quick-card a,
.kl-standorte .location-card a {
color: var(--kl-color-blue-dark);
font-weight: 800;
text-decoration: none;
}
.kl-standorte .details-body a:hover,
.kl-standorte .quick-card a:hover,
.kl-standorte .location-card a:hover {
color: var(--kl-color-blue-darker);
text-decoration: none;
}
.kl-standorte .phone-link {
display: inline-flex;
align-items: center;
gap: .32rem;
padding: .18rem .6rem;
border: 1px solid var(--kl-alpha-blue-dark-180);
border-radius: 999px;
background: var(--kl-alpha-white-820);
color: var(--kl-color-blue-dark) !important;
font-weight: 900 !important;
text-decoration: none !important;
line-height: 1.25;
box-shadow: 0 1px 5px var(--kl-alpha-shadow-070);
transition:
background-color .18s ease,
box-shadow .18s ease,
transform .18s ease,
border-color .18s ease;
}
.kl-standorte .phone-link:hover,
.kl-standorte .phone-link:focus {
background: var(--kl-color-white);
color: var(--kl-color-blue-darker) !important;
box-shadow: 0 4px 10px var(--kl-alpha-shadow-012);
transform: translateY(-1px);
border-color: var(--kl-alpha-blue-340);
text-decoration: none !important;
}
.kl-standorte .phone-icon {
display: inline-block;
font-size: var(--kl-font-size-em-135);
line-height: 1;
transform: translateY(-.02em);
}
.kl-standorte .address-copy {
appearance: none;
border: 0 !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
color: inherit !important;
text-align: left !important;
font: inherit;
text-decoration: none !important;
cursor: pointer;
min-height: 0;
text-transform: none !important;
letter-spacing: normal !important;
box-shadow: none !important;
border-radius: 0 !important;
font-weight: inherit !important;
}
.kl-standorte .address-copy:hover {
color: var(--accent-base);
text-decoration: none;
}
.kl-standorte .copy-feedback {
display: inline-block;
}
/* ==================================================
29-07 QUICK-ZEITEN / BADGES
================================================== */
.kl-standorte .quick-time {
display: inline-block;
margin: .18rem .45rem .62rem 0;
padding: .34rem .82rem .34rem .72rem;
border-radius: 0 14px 14px 0;
background: var(--kl-color-warning-soft);
border-left: 8px solid var(--kl-color-orange);
color: var(--kl-color-dark);
font-size: var(--kl-font-size-112);
line-height: 1.35;
font-weight: 900;
box-shadow:
inset 0 0 0 1px var(--kl-alpha-orange-240),
0 1px 4px var(--kl-alpha-shadow-060);
}
.kl-standorte .quick-time-list {
display: flex;
align-items: center;
gap: .55rem;
flex-wrap: wrap;
margin: .3rem 0 .75rem;
}
.kl-standorte .quick-time-badge {
display: inline-flex;
align-items: center;
padding: .34rem .82rem .34rem .72rem;
border-radius: 0 14px 14px 0;
background: var(--kl-color-warning-soft);
border-left: 8px solid var(--kl-color-orange);
color: var(--kl-color-dark);
font-size: var(--kl-font-size-112);
line-height: 1.35;
font-weight: 900;
box-shadow:
inset 0 0 0 1px var(--kl-alpha-shadow-010),
0 1px 4px var(--kl-alpha-shadow-060);
white-space: nowrap;
}
.kl-standorte .quick-time-badge.is-today {
background: var(--kl-color-green-soft);
border-left-color: var(--kl-color-green);
}
.kl-standorte .quick-time-badge.is-tomorrow {
background: var(--kl-color-warning-soft);
border-left-color: var(--kl-color-orange);
}
.kl-standorte .quick-time-badge.is-after-tomorrow {
background: var(--kl-color-blue-soft);
border-left-color: var(--kl-color-blue);
}
.kl-standorte .quick-time-badge.is-plus-3 {
background: var(--kl-color-accent-soft-bg);
border-left-color: var(--kl-color-magenta);
}
.kl-standorte .quick-time-badge.is-plus-4 {
background: var(--kl-color-turquoise-soft);
border-left-color: var(--kl-color-turquoise);
}
.kl-standorte .quick-time-badge.is-plus-5 {
background: var(--kl-color-purple-soft);
border-left-color: var(--kl-color-purple);
}
.kl-standorte .quick-time-badge.is-plus-6 {
background: var(--kl-color-orange-soft);
border-left-color: var(--kl-color-orange-strong);
}
.kl-standorte .quick-time-badge.is-plus-7 {
background: var(--kl-color-surface-cool);
border-left-color: var(--kl-color-muted-bluegrey);
}
/* ==================================================
29-08 ZEITENLISTEN
================================================== */
.kl-standorte .time-block {
margin-top: .85rem;
padding-top: .75rem;
border-top: 1px solid var(--kl-alpha-shadow-012);
}
.kl-standorte .time-groups {
display: grid;
grid-template-columns: 1fr;
gap: .9rem 1.4rem;
}
.kl-standorte .time-groups.is-multi {
grid-template-columns: repeat(2,minmax(0,1fr));
}
.kl-standorte .time-title {
font-weight: 900;
margin: .4rem 0 .35rem;
}
.kl-standorte .time-list {
margin: .25rem 0 0 0;
padding-left: 1.15rem;
}
.kl-standorte .time-list li {
margin: .22rem 0;
line-height: 1.45;
}
.kl-standorte .time-list li.time-row-continuation {
list-style: none;
}
.kl-standorte .time-row {
display: grid;
grid-template-columns: minmax(14.8rem,max-content) max-content max-content 1fr;
column-gap: 1rem;
align-items: baseline;
}
.kl-standorte .time-day {
font-weight: 800;
white-space: nowrap !important;
}
.kl-standorte .time-hours {
white-space: nowrap !important;
word-break: keep-all !important;
overflow-wrap: normal !important;
}
.kl-standorte .time-rel {
white-space: nowrap;
font-weight: inherit;
font-size: inherit;
color: inherit;
}
.kl-standorte .time-rel-word {
font-weight: inherit;
font-size: inherit;
}
.kl-standorte .time-rel-today {
color: var(--kl-color-green);
}
.kl-standorte .time-rel-tomorrow {
color: var(--kl-color-warning-brown);
}
.kl-standorte .time-rel-after-tomorrow {
color: var(--kl-color-blue);
}
.kl-standorte .time-note {
margin: .12rem 0 .25rem 1.15rem;
color: var(--kl-alpha-shadow-068);
font-style: italic;
}
.kl-standorte .time-note-inline {
color: var(--kl-alpha-shadow-068);
font-style: italic;
white-space: nowrap;
}
/* ==================================================
29-09 MEHR-ANZEIGEN / PAGING
================================================== */
.kl-standorte .quick-more {
justify-self: center;
margin: .35rem auto 0;
border: 2px solid var(--kl-alpha-shadow-016);
border-radius: 999px;
background: var(--kl-color-white);
color: var(--kl-color-dark);
font-weight: 900;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: .55rem;
box-shadow: 0 3px 10px var(--kl-alpha-shadow-010);
transition:
transform .18s ease,
box-shadow .18s ease,
border-color .18s ease,
background-color .18s ease;
}
.kl-standorte .quick-more:hover {
transform: translateY(-1px);
box-shadow: 0 7px 16px var(--kl-alpha-shadow-016);
border-color: var(--kl-alpha-magenta-420);
background: var(--kl-alpha-surface-950);
}
.kl-standorte .quick-more .more-arrow {
font-weight: 900;
transform: translateY(-.03em);
}
/* ==================================================
29-10 ERWEITERUNG V17.12 / SCHLIESSHINWEISE / TOUCH
================================================== */
.kl-standorte .details-body,
.kl-standorte .sysbox,
.kl-standorte .loading {
font-size: var(--kl-font-size-em-130);
}
.kl-standorte .toggle-title {
font-size: var(--kl-font-size-fluid-185-245);
line-height: 1.12;
}
.kl-standorte .section-heading {
font-size: var(--kl-font-size-fluid-185-245);
line-height: 1.12;
}
.kl-standorte .location-name,
.kl-standorte .quick-title {
font-size: var(--kl-font-size-200);
line-height: 1.25;
margin: .48rem 0 1rem;
}
.kl-standorte .toggle-action {
font-size: var(--kl-font-size-160);
line-height: 1.1;
min-width: 9.4rem;
}
.kl-standorte .toggle-action .is-closed::before,
.kl-standorte .toggle-action .is-open::before {
font-size: var(--kl-font-size-160);
line-height: 1;
color: var(--magenta);
}
.kl-standorte .link-buttons {
gap: .72rem;
row-gap: .55rem;
}
.kl-standorte .location-line.link-line {
position: relative;
margin: .58rem 0;
}
.kl-standorte .location-line.link-line + .location-line.link-line {
margin-top: .85rem;
}
.kl-standorte .soft-link {
padding: .24rem .68rem;
font-size: var(--kl-font-size-em-086);
gap: .34rem;
}
.kl-standorte .soft-link .route-icon {
display: inline-block;
font-size: var(--kl-font-size-em-155);
line-height: 1;
transform: translateY(.02em);
}
.kl-standorte .soft-link .route-label {
display: inline-block;
line-height: 1.15;
}
.kl-standorte .quick-more {
padding: .72rem 1.45rem;
font-size: var(--kl-font-size-135);
line-height: 1.12;
border-width: 3px;
}
.kl-standorte .quick-more .more-arrow {
font-size: var(--kl-font-size-195);
color: var(--magenta);
line-height: .7;
}
.kl-standorte .time-closure-note {
display: block;
margin: .12rem 0 .16rem -1.02rem;
padding: .05rem .52rem .05rem .46rem;
border-left: 4px solid var(--kl-alpha-red-dark-350);
border-radius: 0 7px 7px 0;
background: var(--kl-alpha-white-380);
color: var(--kl-color-alert-red);
font-size: var(--kl-font-size-em-096);
line-height: 1.35;
font-weight: 500;
box-shadow: none;
}
.kl-standorte .time-closure-note .closure-date {
font-weight: 600;
color: var(--kl-color-alert-red);
}
.kl-standorte .copy-feedback {
position: absolute;
left: 9rem;
top: 100%;
transform: translateY(.18rem);
margin-left: 0;
padding: .18rem .62rem;
border-radius: 999px;
background: var(--kl-color-green-soft);
color: var(--kl-color-green-dark);
font-size: var(--kl-font-size-108);
font-weight: 900;
line-height: 1.15;
box-shadow: 0 3px 10px var(--kl-alpha-shadow-014);
white-space: nowrap;
z-index: 20;
pointer-events: none;
opacity: 0;
transition: opacity .12s ease;
}
.kl-standorte .copy-feedback:not(:empty) {
opacity: 1;
}
/* ==================================================
29-11 RESPONSIVE
================================================== */
@media (max-width: 700px) {
.kl-standorte .toggle-details > summary {
align-items: flex-start;
flex-direction: column;
}
.kl-standorte .toggle-action {
align-self: flex-start;
min-width: 0;
}
.kl-standorte .time-groups.is-multi {
grid-template-columns: 1fr;
}
}
@media (max-width: 560px) {
.kl-standorte .quick-time {
display: block;
width: fit-content;
max-width: 100%;
}
.kl-standorte .time-row {
grid-template-columns: minmax(13.5rem,max-content) max-content max-content 1fr;
column-gap: .85rem;
overflow-x: auto;
}
.kl-standorte .location-line .lbl {
display: block;
min-width: 0;
}
.kl-standorte .link-line {
display: block;
}
.kl-standorte .link-buttons {
margin-top: .25rem;
}
}
@media (prefers-reduced-motion: reduce) {
.kl-standorte * {
transition: none !important;
animation: none !important;
}
}
/* ######################################################## */
/* #### 29-12 GRID-/READMORE-LINKS ########################### */
/* ######################################################## */
/* Mehr-Link in Grid-Karten:
langer Domaintext darf umbrechen, Pfeil bleibt mittig */
.grid-readmore-link {
display: inline-flex;
align-items: center;
gap: 0.35em;
max-width: 100%;
line-height: 1.25;
}
.grid-readmore-text {
display: inline-block;
max-width: 100%;
overflow-wrap: anywhere;
word-break: normal;
}
.grid-readmore-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
line-height: 1;
}
/* ==================================================
30 Willkommes Text
================================================== */
.kl-welcome-text,
.entry-content .kl-welcome-text {
box-sizing: border-box;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
max-width: var(--kl-layout-width);
width: calc(100% - (var(--kl-layout-side-gap) * 2));
margin: 0 auto 1.6rem auto;
padding: 0;
color: var(--kl-color-text);
font-family: var(--kl-font-main);
text-align: center;
}
/* Wenn der Shortcode in einer Spalte / Willkommensspalte sitzt:
Spaltenbreite nutzen, nicht auf volle 100rem ziehen. */
.wp-block-column .kl-welcome-text,
.wp-block-group .kl-welcome-text,
.welcome-colum .kl-welcome-text,
.entry-content .wp-block-column .kl-welcome-text,
.entry-content .welcome-colum .kl-welcome-text {
max-width: 100%;
width: 100%;
margin-left: 0;
margin-right: 0;
}
/* Fester Willkommenstitel */
.kl-welcome-text > .kl-welcome-heading,
.entry-content .kl-welcome-text > .kl-welcome-heading,
h2.kl-welcome-heading {
box-sizing: border-box;
display: block !important;
flex: 0 0 auto !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 0 0.55rem 0 !important;
padding: 0 !important;
color: var(--kl-color-text);
font-family: var(--kl-font-bold) !important;
font-size: var(--kl-font-size-h2);
font-weight: 700;
line-height: 1.12;
letter-spacing: normal;
text-align: center !important;
white-space: normal;
overflow-wrap: normal;
word-break: normal;
hyphens: none;
}
/* Dynamischer Wetter-/Kulturtext darunter – kleiner als h2, nicht fett, keine Worttrennung */
.kl-welcome-text > .kl-welcome-message,
.entry-content .kl-welcome-text > .kl-welcome-message,
p.kl-welcome-message {
box-sizing: border-box;
display: block !important;
flex: 0 0 auto !important;
clear: both;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
color: var(--kl-color-text);
font-family: var(--kl-font-main) !important;
font-size: var(--kl-font-size-fluid-142-168);
font-weight: 400 !important;
line-height: 1.42;
letter-spacing: normal;
text-align: center !important;
white-space: normal;
overflow-wrap: normal;
word-break: normal;
hyphens: none;
}
/* Tablet */
@media (max-width: 900px) {
.kl-welcome-text,
.entry-content .kl-welcome-text {
margin-bottom: 1.4rem;
}
.kl-welcome-text > .kl-welcome-heading,
.entry-content .kl-welcome-text > .kl-welcome-heading,
h2.kl-welcome-heading {
font-size: clamp(2.35rem, 5.2vw, var(--kl-font-size-h2));
line-height: 1.14;
margin-bottom: 0.45rem !important;
overflow-wrap: normal;
word-break: normal;
hyphens: none;
}
.kl-welcome-text > .kl-welcome-message,
.entry-content .kl-welcome-text > .kl-welcome-message,
p.kl-welcome-message {
font-family: var(--kl-font-main) !important;
font-size: var(--kl-font-size-fluid-134-152);
font-weight: 400 !important;
line-height: 1.43;
text-align: center !important;
overflow-wrap: normal;
word-break: normal;
hyphens: none;
}
}
/* Kleine Displays: sauber gestapelt und mittig */
@media (max-width: 700px) {
.kl-welcome-text,
.entry-content .kl-welcome-text {
width: calc(100% - 4rem);
max-width: calc(100% - 4rem);
margin: 0 auto 1.25rem auto;
align-items: center !important;
text-align: center;
}
.wp-block-column .kl-welcome-text,
.wp-block-group .kl-welcome-text,
.welcome-colum .kl-welcome-text,
.entry-content .wp-block-column .kl-welcome-text,
.entry-content .welcome-colum .kl-welcome-text {
width: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0;
}
.kl-welcome-text > .kl-welcome-heading,
.entry-content .kl-welcome-text > .kl-welcome-heading,
h2.kl-welcome-heading {
font-size: var(--kl-font-size-fluid-205-255);
line-height: 1.15;
margin: 0 0 0.4rem 0 !important;
text-align: center !important;
overflow-wrap: normal;
word-break: normal;
hyphens: none;
}
.kl-welcome-text > .kl-welcome-message,
.entry-content .kl-welcome-text > .kl-welcome-message,
p.kl-welcome-message {
font-family: var(--kl-font-main) !important;
font-size: var(--kl-font-size-fluid-124-143);
font-weight: 400 !important;
line-height: 1.45;
text-align: center !important;
overflow-wrap: normal;
word-break: normal;
hyphens: none;
}
}
/* Sehr kleine Displays */
@media (max-width: 420px) {
.kl-welcome-text,
.entry-content .kl-welcome-text {
width: calc(100% - 3rem);
max-width: calc(100% - 3rem);
}
.wp-block-column .kl-welcome-text,
.wp-block-group .kl-welcome-text,
.welcome-colum .kl-welcome-text,
.entry-content .wp-block-column .kl-welcome-text,
.entry-content .welcome-colum .kl-welcome-text {
width: 100%;
max-width: 100%;
}
.kl-welcome-text > .kl-welcome-heading,
.entry-content .kl-welcome-text > .kl-welcome-heading,
h2.kl-welcome-heading {
font-size: var(--kl-font-size-fluid-190-225);
line-height: 1.16;
overflow-wrap: normal;
word-break: normal;
hyphens: none;
}
.kl-welcome-text > .kl-welcome-message,
.entry-content .kl-welcome-text > .kl-welcome-message,
p.kl-welcome-message {
font-family: var(--kl-font-main) !important;
font-size: var(--kl-font-size-fluid-116-132);
font-weight: 400 !important;
line-height: 1.46;
overflow-wrap: normal;
word-break: normal;
hyphens: none;
}
}
/* ==================================================
31 MULTISITE / FARBVARIANTE BLAU
================================================== */
/*
Utopia / blaue Multisite-Variante
Die Klasse .kl-theme-blue wird per Blog-ID in functions.php auf dem body gesetzt.
Grundprinzip:
- KulturLeben bleibt standardmäßig Magenta.
- Utopia überschreibt zentrale Akzentwerte lokal auf Blau.
- Bestehende Regeln mit var(--kl-color-magenta) werden automatisch blau.
- Gutenberg-/TwentyTwenty-Akzentklassen wie .has-accent-color und
.has-accent-background-color werden ebenfalls überschrieben.
- Separatoren mit currentColor werden dadurch auf Utopia blau.
- Pfeil-Icons, die den magenta Pfeil nutzen, werden auf Utopia auf den
blauen Pfeil umgeleitet.
- Pink-/Glow-Effekte werden für Utopia auf ein weiches Blau umgestellt.
*/
body.kl-theme-blue {
/* Hauptakzent: Magenta wird für Utopia lokal zu Blau */
--kl-color-magenta: rgb(1, 125, 199);
--kl-color-magenta-alt: rgb(1, 125, 199);
--kl-color-magenta-vivid: rgb(1, 125, 199);
--kl-color-magenta-light: rgb(72, 166, 220);
--kl-color-magenta-light-2: rgb(105, 186, 230);
/* Weiche Utopia-Flächen */
--kl-color-magenta-soft: rgb(230, 244, 252);
--kl-color-magenta-soft-2: rgb(208, 233, 248);
--kl-color-active-underline: rgb(122, 195, 234);
--kl-color-accent-soft-bg: rgb(230, 244, 252);
/*
WordPress/Gutenberg-Akzentvariable.
Wichtig für Block-Klassen wie:
.has-accent-color
.has-accent-background-color
*/
--wp--preset--color--accent: rgb(1, 125, 199);
/*
Bestehende ältere/zusätzliche Akzent-Aliase.
Diese bleiben hier bewusst erhalten, damit ältere Regeln oder Plugin-Ausgaben,
die noch auf diese Variablen zugreifen, automatisch Utopia-Blau nutzen.
*/
--magenta: rgb(1, 125, 199);
--accent-base: rgb(1, 125, 199);
--accent-blue: rgb(1, 125, 199);
/* Transparente Utopia-Akzentwerte */
--kl-alpha-magenta-080: rgba(1, 125, 199, .08);
--kl-alpha-magenta-180: rgba(1, 125, 199, .18);
--kl-alpha-magenta-280: rgba(1, 125, 199, .28);
--kl-alpha-magenta-350: rgba(1, 125, 199, .35);
--kl-alpha-magenta-420: rgba(1, 125, 199, .42);
--kl-alpha-magenta-450: rgba(1, 125, 199, .45);
--kl-alpha-magenta-620: rgba(1, 125, 199, .62);
--kl-alpha-magenta-820: rgba(1, 125, 199, .82);
/*
Utopia-Glow:
Ersetzt den pinken Glow, z.B. beim Spendenbalken .klsp-pulse,
durch ein weiches Blau.
*/
--kl-alpha-pink-glow: rgba(1, 125, 199, .35);
/*
Pfeil-Icons:
Alle bestehenden Regeln, die den magenta Pfeil verwenden,
bekommen auf Utopia automatisch den blauen Pfeil.
*/
--kl-icon-pfeil-magenta: var(--kl-icon-pfeil-blau);
}
/* --------------------------------------------------
31-01 UTOPIA / WORDPRESS-AKZENTFARBEN
-------------------------------------------------- */
/*
TwentyTwenty und Gutenberg setzen Akzentfarben teilweise direkt über:
:root .has-accent-color
:root .has-accent-background-color
Diese Regeln überschreiben das gezielt nur auf Utopia.
*/
body.kl-theme-blue .has-accent-color,
body.kl-theme-blue :where(.has-accent-color),
body.kl-theme-blue .color-accent,
body.kl-theme-blue .color-accent-hover:hover,
body.kl-theme-blue .color-accent-hover:focus,
body.kl-theme-blue .has-drop-cap:not(:focus)::first-letter,
body.kl-theme-blue .wp-block-button.is-style-outline,
body.kl-theme-blue .entry-content .has-accent-color {
color: var(--kl-color-magenta) !important;
}
body.kl-theme-blue .has-accent-background-color,
body.kl-theme-blue :where(.has-accent-background-color),
body.kl-theme-blue .bg-accent,
body.kl-theme-blue .bg-accent-hover:hover,
body.kl-theme-blue .bg-accent-hover:focus,
body.kl-theme-blue .wp-block-button__link,
body.kl-theme-blue .wp-block-file .wp-block-file__button,
body.kl-theme-blue .comment-reply-link,
body.kl-theme-blue .entry-content .has-accent-background-color {
background-color: var(--kl-color-magenta) !important;
}
/*
Wenn ein Block gleichzeitig has-accent-background-color nutzt,
soll der Text wie bei KulturLeben weiß bleiben.
*/
body.kl-theme-blue .has-accent-background-color,
body.kl-theme-blue .entry-content .has-accent-background-color {
color: var(--kl-color-white) !important;
}
/* --------------------------------------------------
31-02 UTOPIA / SEPARATOREN UND TRENNLINIEN
-------------------------------------------------- */
/*
Gutenberg-/TwentyTwenty-Separatoren nutzen currentColor.
Darum muss die Farbe des hr selbst auf Utopia blau gesetzt werden.
Betrifft z.B.:
*/ body.kl-theme-blue .entry-content hr.has-accent-color, body.kl-theme-blue .entry-content hr.has-accent-background-color, body.kl-theme-blue .entry-content hr.wp-block-separator.has-accent-color, body.kl-theme-blue .entry-content hr.wp-block-separator.has-accent-background-color, body.kl-theme-blue hr.wp-block-separator.has-accent-color, body.kl-theme-blue hr.wp-block-separator.has-accent-background-color, body.kl-theme-blue hr.styled-separator.has-accent-color, body.kl-theme-blue hr.styled-separator.has-accent-background-color { color: var(--kl-color-magenta) !important; background-color: transparent !important; border-color: var(--kl-color-magenta) !important; } /* TwentyTwenty zeichnet die Separator-Linie über currentColor als Gradient. Diese Regel stellt sicher, dass Linie und Mittelzeichen auf Utopia blau sind. */ body.kl-theme-blue .entry-content hr, body.kl-theme-blue hr.styled-separator { color: var(--kl-color-magenta); } /* Falls ein Separator durch Gutenberg eine Accent-Hintergrundfarbe bekommt, darf diese nicht als gefüllter Balken erscheinen. Die eigentliche Linie bleibt über currentColor/Gradient sichtbar. */ body.kl-theme-blue .entry-content hr.wp-block-separator.has-accent-background-color, body.kl-theme-blue hr.wp-block-separator.has-accent-background-color { background-color: transparent !important; } /* Pseudo-Elemente der TwentyTwenty-Separatoren: Sie nutzen background: currentColor. Diese Zusatzregel erzwingt auf Utopia Blau. */ body.kl-theme-blue .entry-content hr::before, body.kl-theme-blue .entry-content hr::after, body.kl-theme-blue hr.styled-separator::before, body.kl-theme-blue hr.styled-separator::after { background: var(--kl-color-magenta) !important; } /* -------------------------------------------------- 31-03 UTOPIA / COOKIE-HINWEIS BLAU -------------------------------------------------- */ /* BST DSGVO Cookie Hinweis: Das Plugin setzt die Hintergrundfarbe teilweise direkt als Inline-Style. Deshalb braucht Utopia hier ein gezieltes !important-Override. Betrifft: