Ziel:
- Überschrift zuerst, linksbündig an der 100rem-Layoutkante
- darunter Beitragsbild mittig im Layout
- normales WordPress-Veröffentlichungsdatum wird nicht angezeigt
- darunter Beitragstext mit ruhigem Abstand zum Bild
- Beitragstext selbst wird NICHT neu formatiert
*/
article.type-news {
display: flex;
flex-direction: column;
}
/*
Header optisch auflösen, damit Titel, Bild und Inhalt
sauber in der gewünschten Reihenfolge erscheinen können.
*/
article.type-news > .entry-header,
article.type-news > .entry-header > .entry-header-inner {
display: contents;
}
/*
1. Überschrift
--------------------------------------------------
Die Überschrift steht linksbündig an der allgemeinen 100rem-Vorgabe.
*/
article.type-news .entry-title {
order: 1;
box-sizing: border-box;
max-width: var(--kl-layout-width);
width: calc(100% - (var(--kl-layout-side-gap) * 2));
margin: 3rem auto 2rem !important;
padding: 0 !important;
text-align: left;
}
/*
2. Beitragsbild / Featured Media
--------------------------------------------------
Der äußere Figure-Block läuft neutral.
Der innere Bildcontainer sitzt mittig in der 100rem-Layoutbreite.
Unter dem Bild bleibt ein ruhiger Abstand zum Beitragstext.
*/
article.type-news > .featured-media {
order: 2;
display: block;
width: 100% !important;
max-width: none !important;
margin: 0 0 2.2rem !important;
padding: 0 !important;
background: transparent !important;
position: relative;
left: auto !important;
right: auto !important;
transform: none !important;
}
article.type-news > .featured-media::before,
article.type-news > .featured-media::after {
content: none !important;
display: none !important;
}
/*
Innerer Bildcontainer
--------------------------------------------------
Hier wird das Bild wirklich mittig gesetzt.
*/
article.type-news .featured-media-inner {
box-sizing: border-box;
max-width: var(--kl-layout-width) !important;
width: calc(100% - (var(--kl-layout-side-gap) * 2)) !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 0 !important;
background: transparent !important;
position: relative !important;
left: auto !important;
right: auto !important;
transform: none !important;
}
/*
Beitragsbild selbst
--------------------------------------------------
Das Bild füllt den mittigen Bildcontainer.
Rundung, Rahmen und Schatten bleiben erhalten.
*/
article.type-news .featured-media img,
article.type-news .featured-media .wp-post-image {
display: block;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin: 0 auto !important;
border: 2px solid var(--kl-color-brown);
border-radius: 25px;
box-shadow: 0 4px 10px var(--kl-alpha-shadow-012);
object-fit: contain;
object-position: center center;
position: static !important;
left: auto !important;
right: auto !important;
transform: none !important;
}
/*
3. Veröffentlichungsdatum ausblenden
--------------------------------------------------
Das normale WordPress-Veröffentlichungsdatum wird auf
News-Einzelseiten nicht mehr angezeigt.
Wichtig:
Fachliche Datumsangaben im Beitragstext bleiben sichtbar,
z. B. Veranstaltungstag, Zeitraum oder Projektlaufzeit.
*/
article.type-news .post-meta-wrapper.post-meta-single-top,
article.type-news .post-meta-wrapper.post-meta-single,
article.type-news .post-meta .post-date {
display: none !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/*
4. Beitragstext
--------------------------------------------------
Der Beitragstext soll nach Titel und Bild kommen.
Wichtig:
Der Beitragstext wird hier NICHT optisch neu formatiert.
WordPress/TwentyTwenty behält seine normale Textformatierung.
*/
article.type-news > .post-inner {
order: 4;
}
/*
Nachgelagerte Bereiche bleiben nach dem Beitragstext.
*/
article.type-news > .section-inner {
order: 5;
}
article.type-news > .pagination-single {
order: 6;
}
/*
Tablet und Mobile
*/
@media (max-width: 900px) {
article.type-news .entry-title {
margin-top: 2.2rem !important;
margin-bottom: 1.4rem !important;
}
article.type-news > .featured-media {
margin-bottom: 1.8rem !important;
}
article.type-news .featured-media img,
article.type-news .featured-media .wp-post-image {
border-radius: 18px;
}
}
@media (max-width: 480px) {
article.type-news .entry-title,
article.type-news .featured-media-inner {
width: calc(100% - 4rem) !important;
}
article.type-news > .featured-media {
margin-bottom: 1.6rem !important;
}
article.type-news .featured-media img,
article.type-news .featured-media .wp-post-image {
border-radius: 16px;
}
}
/* ==================================================
16 TEAM
================================================== */
/*
Team-Grid / Team-Übersicht
--------------------------------------------------
Gilt ausschließlich für das neue Shortcode-Team-Grid:
[kl-team]
[kl-team-kl]
[kl-team-ut]
[kl-team-all]
Ziel:
- Desktop: 3 Karten pro Reihe
- Tablet: 2 Karten pro Reihe
- Mobil: 1 Karte pro Reihe
- keine gequetschten Karten
- keine Full-Width-Karten im Desktop
- Karten optisch passend zum bisherigen Team-Layout
- Standort wird im Team-Grid ausgeblendet
- Vita und Beschreibung werden nur angezeigt, wenn befüllt
- Bilder bleiben randlos und gleichmäßig beschnitten
*/
/* ==================================================
16-01 TEAM-GRID / AUSSENLAYOUT
================================================== */
.entry-content .grid-team,
.entry-content [class*="__inner-container"] > .grid-team {
box-sizing: border-box !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;
}
/*
Eigentliches Team-Layout.
*/
.grid-team .team-loop,
.grid-team .grid-loop.team-loop,
.entry-content .grid-team .team-loop,
.entry-content .grid-team .grid-loop.team-loop {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: stretch !important;
gap: 2.4rem !important;
box-sizing: border-box !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;
}
/*
Desktop: 3 Karten pro Reihe.
*/
.grid-team .team-loop > .grid-team-item,
.grid-team .grid-loop.team-loop > .grid-team-item,
.entry-content .grid-team .team-loop > article.grid-team-item,
.entry-content .grid-team .grid-loop.team-loop > article.grid-team-item {
flex: 0 1 calc((100% - 4.8rem) / 3) !important;
width: calc((100% - 4.8rem) / 3) !important;
max-width: calc((100% - 4.8rem) / 3) !important;
min-width: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* ==================================================
16-02 TEAM-KARTEN / GRUNDSTRUKTUR
================================================== */
.grid-team .team-loop > .grid-team-item,
.grid-team .grid-loop.team-loop > .grid-team-item,
.entry-content .grid-team .team-loop > article.grid-team-item,
.entry-content .grid-team .grid-loop.team-loop > article.grid-team-item {
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
container-type: inline-size;
height: auto !important;
min-height: 54rem;
align-self: stretch !important;
border: 2px solid var(--kl-color-brown);
border-radius: 25px;
background-color: var(--kl-color-surface-card);
box-shadow: 0 4px 8px var(--kl-alpha-shadow-010);
overflow: hidden;
}
/*
Leere Absätze am Kartenende.
*/
.grid-team .team-loop > .grid-team-item > p.wp-block-paragraph:empty,
.grid-team .grid-loop.team-loop > .grid-team-item > p.wp-block-paragraph:empty {
display: none !important;
margin: 0 !important;
padding: 0 !important;
}
/*
Teamkarte selbst.
*/
.grid-team .team-loop > .grid-team-item.team-block,
.grid-team .grid-loop.team-loop > .grid-team-item.team-block,
.entry-content .grid-team article.grid-team-item.team-block {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
min-height: 100% !important;
height: 100% !important;
box-sizing: border-box !important;
max-width: none !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* ==================================================
16-03 TEAM-BILDER
================================================== */
.grid-team .team-block .team-image,
.grid-team .team-block .pg34109fc44c7b,
.entry-content .grid-team .team-block .team-image.pg34109fc44c7b {
display: block !important;
width: 100% !important;
max-width: 100% !important;
aspect-ratio: 1.12 / 1;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
flex-shrink: 0 !important;
background-color: transparent !important;
}
.grid-team .team-block .team-image img,
.grid-team .team-block .pg34109fc44c7b img,
.entry-content .grid-team .team-block .team-image.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;
border-radius: 23px 23px 0 0 !important;
}
/* ==================================================
16-04 NAME
================================================== */
.grid-team .team-name,
.entry-content .grid-team .team-name {
margin: 0 !important;
padding: clamp(0.9rem, 3.2cqw, 1.2rem) clamp(1.2rem, 4.2cqw, 1.6rem) 0.15rem !important;
}
.grid-team .team-name > .wp-block-group__inner-container {
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
.grid-team .team-name h2,
.grid-team .team-name .team-title,
.entry-content .grid-team .team-name h2.team-title {
display: flex !important;
align-items: flex-start !important;
min-height: 3rem;
margin: 0 !important;
padding: 0 !important;
color: var(--kl-color-text) !important;
font-family: var(--kl-font-bold) !important;
font-size: var(--kl-font-size-card-title-fluid-small) !important;
line-height: 1.18 !important;
letter-spacing: 0.02em;
text-align: left !important;
}
/* ==================================================
16-05 TEAM-INFOS / TÄTIGKEIT
================================================== */
.grid-team .team-info,
.entry-content .grid-team .team-info {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
margin: 0 !important;
padding: 0.15rem clamp(1.2rem, 4.2cqw, 1.6rem) clamp(1.15rem, 4cqw, 1.45rem) !important;
color: var(--kl-color-text) !important;
font-family: var(--kl-font-main) !important;
font-size: var(--kl-font-size-fluid-145-180) !important;
line-height: 1.4 !important;
}
.grid-team .team-info > .wp-block-group__inner-container {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
/*
Tätigkeit.
*/
.grid-team .team-department-wrap,
.entry-content .grid-team .team-department-wrap {
min-height: calc(3 * 1.4em + 1.65rem);
margin: 0 0 0.45rem !important;
}
.grid-team .team-department-titel,
.entry-content .grid-team .team-department-titel {
margin-bottom: 0.1rem !important;
font-family: var(--kl-font-bold) !important;
font-weight: bold !important;
font-size: var(--kl-font-size-fluid-145-180) !important;
color: var(--kl-color-text) !important;
}
.grid-team .team-department,
.entry-content .grid-team .team-department {
height: calc(3 * 1.4em);
min-height: calc(3 * 1.4em);
overflow: hidden !important;
display: -webkit-box !important;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
font-family: var(--kl-font-main) !important;
font-size: var(--kl-font-size-fluid-145-180) !important;
line-height: 1.4 !important;
color: var(--kl-color-text) !important;
}
/* ==================================================
16-06 STANDORT AUSBLENDEN
================================================== */
/*
Standort wird im Team-Grid bewusst nicht angezeigt,
damit das Shortcode-Grid dem bisherigen sichtbaren Team-Layout entspricht.
*/
.grid-team .team-location-wrap,
.entry-content .grid-team .team-location-wrap {
display: none !important;
}
/* ==================================================
16-07 KONTAKT / TELEFON / E-MAIL
================================================== */
.grid-team .team-contact-tel-wrap,
.grid-team .team-contact-email-wrap,
.entry-content .grid-team .team-contact-tel-wrap,
.entry-content .grid-team .team-contact-email-wrap {
margin-top: 0.35rem !important;
padding-top: 0 !important;
font-size: var(--kl-font-size-fluid-145-180) !important;
}
.grid-team .team-contact-tel-wrap + .team-contact-email-wrap,
.grid-team .team-contact-email-wrap + .team-contact-email-wrap,
.grid-team .team-contact-tel-wrap + .team-contact-tel-wrap {
margin-top: 0.35rem !important;
}
/*
Leere Kontaktzeilen ausblenden.
*/
.grid-team .team-contact-tel-wrap:has(a[href="tel:"]:empty),
.grid-team .team-contact-email-wrap:has(a[href="mailto:"]:empty) {
display: none !important;
}
.grid-team .team-contact-tel-wrap a[href="tel:"],
.grid-team .team-contact-email-wrap a[href="mailto:"] {
display: none !important;
}
/*
Kontakt-Titel.
*/
.grid-team .team-contact-email-titel,
.grid-team .team-contact-tel-titel,
.entry-content .grid-team .team-contact-email-titel,
.entry-content .grid-team .team-contact-tel-titel {
margin-bottom: 0.1rem !important;
font-family: var(--kl-font-bold) !important;
font-weight: bold !important;
font-size: var(--kl-font-size-fluid-145-180) !important;
color: var(--kl-color-text) !important;
}
/*
Kontakt-Link.
*/
.grid-team .team-contact-email,
.grid-team .team-contact-tel,
.entry-content .grid-team .team-contact-email,
.entry-content .grid-team .team-contact-tel {
color: var(--kl-color-magenta) !important;
text-decoration: underline !important;
text-decoration-color: var(--kl-color-magenta) !important;
font-size: var(--kl-font-size-fluid-145-180) !important;
overflow-wrap: anywhere;
word-break: break-word;
}
.grid-team .team-contact-email:hover,
.grid-team .team-contact-email:focus,
.grid-team .team-contact-tel:hover,
.grid-team .team-contact-tel:focus {
color: var(--kl-color-text) !important;
text-decoration-color: var(--kl-color-text) !important;
}
/* Utopia: Kontaktlinks blau */
body.kl-theme-blue .grid-team .team-contact-email,
body.kl-theme-blue .grid-team .team-contact-tel {
color: var(--kl-color-blue-brand) !important;
text-decoration-color: var(--kl-color-blue-brand) !important;
}
body.kl-theme-blue .grid-team .team-contact-email:hover,
body.kl-theme-blue .grid-team .team-contact-email:focus,
body.kl-theme-blue .grid-team .team-contact-tel:hover,
body.kl-theme-blue .grid-team .team-contact-tel:focus {
color: var(--kl-color-text) !important;
text-decoration-color: var(--kl-color-text) !important;
}
/* ==================================================
16-08 VITA / BESCHREIBUNG
================================================== */
/*
Vita und Beschreibung sind optionale Zusatzfelder.
Sie werden nur vom PHP ausgegeben, wenn sie befüllt sind.
Das CSS hält sie kompakt, damit das Teamkarten-Layout ruhig bleibt.
*/
.grid-team .team-vita-wrap,
.grid-team .team-description-wrap,
.entry-content .grid-team .team-vita-wrap,
.entry-content .grid-team .team-description-wrap {
margin-top: 0.75rem !important;
padding-top: 0.65rem !important;
border-top: 0.1rem solid var(--kl-alpha-brown-border);
color: var(--kl-color-text) !important;
font-family: var(--kl-font-main) !important;
font-size: var(--kl-font-size-fluid-145-180) !important;
line-height: 1.42 !important;
}
/*
Wenn direkt nach Kontakt ein Zusatzfeld kommt,
bleibt der Abstand bewusst ruhig und nicht zu groß.
*/
.grid-team .team-contact-tel-wrap + .team-vita-wrap,
.grid-team .team-contact-email-wrap + .team-vita-wrap,
.grid-team .team-contact-tel-wrap + .team-description-wrap,
.grid-team .team-contact-email-wrap + .team-description-wrap {
margin-top: 0.8rem !important;
}
/*
Wenn Beschreibung direkt nach Vita kommt,
soll keine doppelte Trennlinie wie zwei harte Blöcke wirken.
*/
.grid-team .team-vita-wrap + .team-description-wrap,
.entry-content .grid-team .team-vita-wrap + .team-description-wrap {
margin-top: 0.6rem !important;
padding-top: 0.55rem !important;
}
/*
Titel für Vita.
*/
.grid-team .team-vita-titel,
.entry-content .grid-team .team-vita-titel {
margin-bottom: 0.12rem !important;
font-family: var(--kl-font-bold) !important;
font-weight: bold !important;
font-size: var(--kl-font-size-fluid-145-180) !important;
color: var(--kl-color-text) !important;
}
/*
Vita-Text kompakt halten.
*/
.grid-team .team-vita,
.entry-content .grid-team .team-vita {
display: -webkit-box !important;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden !important;
color: var(--kl-color-text) !important;
font-family: var(--kl-font-main) !important;
font-size: var(--kl-font-size-fluid-145-180) !important;
line-height: 1.42 !important;
}
/*
Beschreibung als kurzer Zusatztext.
*/
.grid-team .team-description,
.entry-content .grid-team .team-description {
display: -webkit-box !important;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden !important;
color: var(--kl-color-text) !important;
font-family: var(--kl-font-main) !important;
font-size: var(--kl-font-size-fluid-145-180) !important;
line-height: 1.42 !important;
}
/*
Leere optionale Zusatzblöcke sicher ausblenden.
*/
.grid-team .team-vita-wrap:empty,
.grid-team .team-description-wrap:empty,
.grid-team .team-vita:empty,
.grid-team .team-description:empty {
display: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
/* ==================================================
16-09 ALLGEMEINE TEAM-BEREICHE
================================================== */
.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,
.team-vita-titel {
font-weight: bold;
}
.team-contact-email,
.team-contact-tel {
text-decoration-color: var(--kl-color-magenta);
}
.team-stars-block div {
min-width: 15em;
}
/* ==================================================
16-10 RESPONSIVE / TABLET: 2 KARTEN
================================================== */
/*
Wenn 3 Karten zu eng werden:
2 Karten pro Reihe.
*/
@media (max-width: 1059px) {
.entry-content .grid-team,
.entry-content [class*="__inner-container"] > .grid-team {
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;
}
.grid-team .team-loop,
.grid-team .grid-loop.team-loop {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: stretch !important;
gap: 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;
}
.grid-team .team-loop > .grid-team-item,
.grid-team .grid-loop.team-loop > .grid-team-item,
.entry-content .grid-team .team-loop > article.grid-team-item,
.entry-content .grid-team .grid-loop.team-loop > article.grid-team-item {
flex: 0 1 calc((100% - 2rem) / 2) !important;
width: calc((100% - 2rem) / 2) !important;
max-width: calc((100% - 2rem) / 2) !important;
min-height: 56rem;
align-self: stretch !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
}
.grid-team .team-loop > .grid-team-item.team-block,
.grid-team .grid-loop.team-loop > .grid-team-item.team-block {
height: 100% !important;
min-height: 100% !important;
}
.grid-team .team-block .team-image,
.grid-team .team-block .pg34109fc44c7b {
aspect-ratio: 1.12 / 1 !important;
}
.grid-team .team-block .team-image img,
.grid-team .team-block .pg34109fc44c7b img {
object-fit: cover !important;
object-position: center 18% !important;
padding: 0 !important;
}
}
/* ==================================================
16-11 RESPONSIVE / MOBIL: 1 KARTE
================================================== */
/*
Wenn 2 Karten zu eng werden:
1 Karte pro Reihe.
*/
@media (max-width: 700px) {
.entry-content .grid-team,
.entry-content [class*="__inner-container"] > .grid-team {
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;
}
.grid-team .team-loop,
.grid-team .grid-loop.team-loop {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: stretch !important;
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;
}
.grid-team .team-loop > .grid-team-item,
.grid-team .grid-loop.team-loop > .grid-team-item,
.entry-content .grid-team .team-loop > article.grid-team-item,
.entry-content .grid-team .grid-loop.team-loop > article.grid-team-item {
flex: 0 1 42rem !important;
width: 100% !important;
max-width: 42rem !important;
min-height: 56rem;
align-self: stretch !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
.grid-team .team-loop > .grid-team-item.team-block,
.grid-team .grid-loop.team-loop > .grid-team-item.team-block {
height: 100% !important;
min-height: 100% !important;
}
.grid-team .team-block .team-image,
.grid-team .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;
}
.grid-team .team-block .team-image img,
.grid-team .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;
}
.grid-team .team-name h2,
.grid-team .team-name .team-title {
min-height: 0;
}
.grid-team .team-department-wrap {
min-height: calc(3 * 1.4em + 1.65rem);
margin-bottom: 0.45rem !important;
}
.grid-team .team-vita,
.entry-content .grid-team .team-vita,
.grid-team .team-description,
.entry-content .grid-team .team-description {
-webkit-line-clamp: 6;
}
}
/* ==================================================
16-12 RESPONSIVE / SEHR KLEINE DISPLAYS
================================================== */
@media (max-width: 480px) {
.entry-content .grid-team,
.entry-content [class*="__inner-container"] > .grid-team,
.grid-team .team-loop,
.grid-team .grid-loop.team-loop {
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;
}
.grid-team .team-loop > .grid-team-item,
.grid-team .grid-loop.team-loop > .grid-team-item,
.entry-content .grid-team .team-loop > article.grid-team-item,
.entry-content .grid-team .grid-loop.team-loop > article.grid-team-item {
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;
}
.grid-team .team-block .team-image,
.grid-team .team-block .pg34109fc44c7b {
aspect-ratio: 4 / 3 !important;
}
.grid-team .team-block .team-image img,
.grid-team .team-block .pg34109fc44c7b img {
object-fit: cover !important;
object-position: center 18% !important;
border-radius: 16px 16px 0 0 !important;
padding: 0 !important;
}
.grid-team .team-vita,
.entry-content .grid-team .team-vita,
.grid-team .team-description,
.entry-content .grid-team .team-description {
-webkit-line-clamp: 7;
}
}
/* ==================================================
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 UTOPIA / FARBVARIANTE BLAU
================================================== */
/*
Bereichsübersicht
--------------------------------------------------
31-00 Utopia-Grundvariablen / blaue Multisite-Variante
31-01 Utopia / WordPress-Akzentfarben
31-02 Utopia / Separatoren und Trennlinien
31-03 Utopia / Cookie-Hinweis blau
31-04 Utopia / Logo-Tausch
31-05 Utopia / Mobile Header- und Logo-Korrektur
31-06 Utopia / Sprach-Icons einzeln ausblenden
*/
/* --------------------------------------------------
31-00 Utopia-Grundvariablen / 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:
-------------------------------------------------- */
body.kl-theme-blue .bst-panel,
body.kl-theme-blue .bst-panel.group,
body.kl-theme-blue .bst-panel-fixed-top,
body.kl-theme-blue .bst-panel.group.bst-panel-fixed-top {
background: var(--kl-color-magenta) !important;
background-color: var(--kl-color-magenta) !important;
border-bottom-color: var(--kl-color-magenta) !important;
}
/*
Cookie-Hinweis Text und Links:
Text bleibt weiß, damit der Kontrast auf Blau erhalten bleibt.
*/
body.kl-theme-blue .bst-panel,
body.kl-theme-blue .bst-panel .bst-msg,
body.kl-theme-blue .bst-panel .bst-links,
body.kl-theme-blue .bst-panel .bst-links a,
body.kl-theme-blue .bst-panel .bst-info-btn {
color: var(--kl-color-white) !important;
}
/*
Cookie-Hinweis Button:
Normalzustand:
- Button im Utopia-Blau
- Rahmen weiß
- Schrift weiß
Wichtig:
Der Text "Verstanden" muss im Normalzustand weiß bleiben,
weil Blau auf Weiß sonst zu schwach wirkt bzw. schlechter lesbar ist.
*/
body.kl-theme-blue .bst-panel .bst-accept,
body.kl-theme-blue .bst-panel .bst-accept-btn,
body.kl-theme-blue .bst-panel button,
body.kl-theme-blue .bst-panel .btn {
background-color: var(--kl-color-magenta) !important;
border-color: var(--kl-color-white) !important;
color: var(--kl-color-white) !important;
}
/*
Link im Button:
Viele Cookie-Plugins setzen den Button-Text als
innerhalb des Buttons.
Darum muss auch dieser Link separat überschrieben werden.
Normalzustand:
- Schrift weiß
- Unterstreichung weiß bzw. transparent je nach Plugin-Stil
*/
body.kl-theme-blue .bst-panel .bst-accept a,
body.kl-theme-blue .bst-panel .bst-accept-btn a,
body.kl-theme-blue .bst-panel button a,
body.kl-theme-blue .bst-panel .btn a {
color: var(--kl-color-white) !important;
text-decoration-color: var(--kl-color-white) !important;
}
/*
Hover/Fokus:
Ruhiger Hover mit weiß/blauer Umkehrung.
Hoverzustand:
- Hintergrund weiß
- Schrift blau
- Rahmen weiß
Das Plugin setzt Hover teilweise per JavaScript,
deshalb ebenfalls mit hoher Spezifität und !important.
*/
body.kl-theme-blue .bst-panel .bst-accept:hover,
body.kl-theme-blue .bst-panel .bst-accept:focus,
body.kl-theme-blue .bst-panel .bst-accept-btn:hover,
body.kl-theme-blue .bst-panel .bst-accept-btn:focus,
body.kl-theme-blue .bst-panel button:hover,
body.kl-theme-blue .bst-panel button:focus,
body.kl-theme-blue .bst-panel .btn:hover,
body.kl-theme-blue .bst-panel .btn:focus {
background-color: var(--kl-color-white) !important;
border-color: var(--kl-color-white) !important;
color: var(--kl-color-magenta) !important;
}
body.kl-theme-blue .bst-panel .bst-accept:hover a,
body.kl-theme-blue .bst-panel .bst-accept:focus a,
body.kl-theme-blue .bst-panel .bst-accept-btn:hover a,
body.kl-theme-blue .bst-panel .bst-accept-btn:focus a,
body.kl-theme-blue .bst-panel button:hover a,
body.kl-theme-blue .bst-panel button:focus a,
body.kl-theme-blue .bst-panel .btn:hover a,
body.kl-theme-blue .bst-panel .btn:focus a {
color: var(--kl-color-magenta) !important;
text-decoration-color: var(--kl-color-magenta) !important;
}
/*
Weitere-Informationen-Link:
Der Link bleibt auf dem blauen Cookie-Balken weiß.
Bei Hover/Fokus bleibt er ebenfalls weiß, bekommt aber eine klare
weiße Unterstreichung.
*/
body.kl-theme-blue .bst-panel .bst-info-btn,
body.kl-theme-blue .bst-panel .bst-info-btn:visited {
color: var(--kl-color-white) !important;
text-decoration-color: var(--kl-color-white) !important;
}
body.kl-theme-blue .bst-panel .bst-info-btn:hover,
body.kl-theme-blue .bst-panel .bst-info-btn:focus {
color: var(--kl-color-white) !important;
text-decoration: underline !important;
text-decoration-color: var(--kl-color-white) !important;
}
/* --------------------------------------------------
31-04 Utopia / Logo-Tausch
--------------------------------------------------
Auf der Utopia-Subsite wird das geklonte KulturLeben-Logo
visuell durch das Werkstatt-Utopia-Logo aus dem Child-Theme ersetzt.
Voraussetzung:
enthält .kl-theme-blue
Logo-Datei:
/wp-content/themes/twentytwenty-child/Logo_WerkstattUtopia_web.png
Wichtig:
Die mobile Größe wird in 31-05 nochmals gezielt überschrieben,
damit der Utopia-Header mobil unabhängig von KulturLeben sauber
ausbalanciert werden kann.
-------------------------------------------------- */
body.kl-theme-blue .site-logo img.custom-logo,
body.kl-theme-blue .header-titles-wrapper .site-logo img,
body.kl-theme-blue .custom-logo-link img,
body.kl-theme-blue img.custom-logo {
content: url("Logo_WerkstattUtopia_web.png");
width: auto !important;
height: auto !important;
max-width: 34rem !important;
max-height: 11rem !important;
object-fit: contain;
}
/*
Hover-Verhalten vom allgemeinen Header bleibt erhalten,
aber das Logo soll nicht verzerrt oder gequetscht werden.
*/
body.kl-theme-blue .custom-logo-link {
display: inline-flex;
align-items: center;
justify-content: center;
}
/* --------------------------------------------------
31-05 Utopia / Mobile Header- und Logo-Korrektur
--------------------------------------------------
Diese Regeln korrigieren ausschließlich den mobilen Utopia-Header.
Ziel:
- Das Werkstatt-Utopia-Logo wird mobil deutlich größer dargestellt.
- Der Header wird vertikal sauber ausbalanciert.
- Der 3-Punkte-Menübutton sitzt rechts, aber nicht direkt am Rand.
- Der 3-Punkte-Menübutton wird nicht mehr unter bzw. über das Logo
in die Mitte gezogen.
- KulturLeben wird nicht verändert, weil alles auf
body.kl-theme-blue begrenzt ist.
Hinweis:
Diese Regeln stehen bewusst im Utopia-Bereich und nicht in Abschnitt 06,
damit alle Utopia-spezifischen Abweichungen an einer Stelle bleiben.
-------------------------------------------------- */
@media (max-width: 700px) {
body.kl-theme-blue .header-inner.section-inner {
min-height: 15.5rem;
display: grid;
grid-template-columns: minmax(6rem, 1fr) auto minmax(6rem, 1fr);
align-items: center;
position: relative;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
body.kl-theme-blue .header-titles-wrapper,
body.kl-theme-blue .site-logo {
grid-column: 2;
justify-self: center;
align-self: center;
display: flex;
align-items: center;
justify-content: center;
}
body.kl-theme-blue .custom-logo-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
max-width: calc(100vw - 15rem);
}
body.kl-theme-blue .site-logo img.custom-logo,
body.kl-theme-blue .header-titles-wrapper .site-logo img,
body.kl-theme-blue .custom-logo-link img,
body.kl-theme-blue img.custom-logo {
width: min(34rem, calc(100vw - 15rem)) !important;
height: auto !important;
max-width: min(34rem, calc(100vw - 15rem)) !important;
max-height: 12.5rem !important;
margin: 0 !important;
object-fit: contain;
}
/*
Rechte Header-Seite:
Der Toggle-Bereich wird absolut gesetzt, damit er nicht vom
mittigen Logo-Raster verschoben wird.
right: 2.4rem sorgt dafür, dass der Button rechts sitzt,
aber nicht direkt am Bildschirmrand klebt.
*/
body.kl-theme-blue .header-toggles {
grid-column: auto;
justify-self: auto;
align-self: auto;
position: absolute;
top: 50%;
right: 2.4rem;
bottom: auto;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
width: auto;
height: auto;
margin: 0;
z-index: 20;
}
/*
Wichtig:
Hier bewusst NICHT allgemein .nav-toggle oder .menu-toggle außerhalb
von .header-toggles ansprechen. Sonst können andere 3-Punkte-Elemente
oder Slider-/Carousel-Punkte versehentlich mitverschoben werden.
*/
body.kl-theme-blue .header-toggles .toggle,
body.kl-theme-blue .header-toggles button,
body.kl-theme-blue .header-toggles .nav-toggle,
body.kl-theme-blue .header-toggles .menu-toggle {
position: static;
top: auto;
right: auto;
bottom: auto;
left: auto;
display: flex;
align-items: center;
justify-content: center;
transform: none;
margin: 0;
}
body.kl-theme-blue .header-inner.section-inner .language-switch {
grid-column: 3;
justify-self: end;
align-self: center;
}
}
@media (max-width: 420px) {
body.kl-theme-blue .header-inner.section-inner {
min-height: 15rem;
grid-template-columns: minmax(5.5rem, 1fr) auto minmax(5.5rem, 1fr);
}
body.kl-theme-blue .custom-logo-link {
max-width: calc(100vw - 13rem);
}
body.kl-theme-blue .site-logo img.custom-logo,
body.kl-theme-blue .header-titles-wrapper .site-logo img,
body.kl-theme-blue .custom-logo-link img,
body.kl-theme-blue img.custom-logo {
width: min(31rem, calc(100vw - 13rem)) !important;
max-width: min(31rem, calc(100vw - 13rem)) !important;
max-height: 11.5rem !important;
}
body.kl-theme-blue .header-toggles {
right: 2rem;
}
}
/* --------------------------------------------------
31-06 Utopia / Sprach-Icons einzeln ausblenden
--------------------------------------------------
Die Icons bzw. Kacheln für Einfache/Leichte Sprache und Gebärdensprache
können auf Utopia einzeln ausgeblendet werden.
Bereichsübersicht:
31-06-01 Grundlayout Sprachschalter und mobile Sprach-Widgets
31-06-02 Mobile Menüansicht: abgeschnittene Beschriftung verhindern
31-06-03 Aktiv: Gebärdensprache auf Utopia ausblenden
31-06-04 Option A: Einfache/Leichte Sprache ausblenden
31-06-05 Option B: Beide Sprach-Icons ausblenden, mobilen Platz entfernen
31-06-06 Option C: Beide Sprach-Icons ausblenden, mobilen Platz erhalten
31-06-07 Sicherheit: Fallback über WordPress-Bildklassen
Unterschied Desktop / Mobile:
Desktop:
- Der Platz soll erhalten bleiben.
- Deshalb NICHT display:none verwenden.
- visibility:hidden erhält den Layout-Platz.
- pointer-events:none verhindert Klicks auf unsichtbare Links.
Mobile:
- Wenn nur ein Icon ausgeblendet wird, bleibt der Platz ebenfalls erhalten.
- Wenn beide Icons ausgeblendet werden, fällt der komplette mobile
Sprachbereich optional weg, damit kein leerer Abstand im mobilen Menü bleibt.
Aktueller Wunsch:
- Einfache/Leichte Sprache bleibt sichtbar.
- Gebärdensprache wird ausgeblendet.
-------------------------------------------------- */
/* --------------------------------------------------
31-06-01 Grundlayout Sprachschalter und mobile Sprach-Widgets
-------------------------------------------------- */
/* Grundsicherheit: Sprachschalter bleibt als Layout-Block erhalten */
body.kl-theme-blue .language-switch {
display: flex;
align-items: center;
justify-content: center;
}
/* Grundsicherheit: mobile Sprach-Widgets behalten ihr Raster */
body.kl-theme-blue .menu-modal .mobile-widgets {
display: grid;
}
/* --------------------------------------------------
31-06-02 Mobile Menüansicht: abgeschnittene Beschriftung verhindern
--------------------------------------------------
Auf Utopia kann im geöffneten mobilen Menü der Text oberhalb der
Sprach-Icons angeschnitten werden. Ursache ist die abweichende
mobile Widget-/Icon-Konstellation im Utopia-Menü.
Deshalb bekommt der mobile Widget-Bereich nur auf Utopia etwas mehr
oberen Innenabstand. Zusätzlich werden Overflow-Beschränkungen
gelockert, damit Beschriftungen nicht abgeschnitten werden.
-------------------------------------------------- */
@media (max-width: 700px) {
body.kl-theme-blue .menu-modal .mobile-widgets {
padding-top: 3.2rem;
overflow: visible;
}
body.kl-theme-blue .menu-modal .mobile-widgets .widget,
body.kl-theme-blue .menu-modal .mobile-widgets .widget-content {
overflow: visible;
}
body.kl-theme-blue .menu-modal .mobile-widgets .widget-title,
body.kl-theme-blue .menu-modal .mobile-widgets p,
body.kl-theme-blue .menu-modal .mobile-widgets a {
line-height: 1.25;
overflow: visible;
}
}
/* --------------------------------------------------
31-06-03 Aktiv: Gebärdensprache auf Utopia ausblenden
--------------------------------------------------
Gebärdensprache wird auf Utopia ausgeblendet.
Desktop:
- Platz bleibt erhalten.
Mobile:
- Platz der Gebärdensprache-Kachel bleibt erhalten,
weil nur ein Icon ausgeblendet wird.
-------------------------------------------------- */
/* Desktop: Gebärdensprache ausblenden, Platz erhalten */
body.kl-theme-blue .language-switch a[href="/gebaerdensprache/"],
body.kl-theme-blue .language-switch a[href*="gebaerdensprache"] {
visibility: hidden !important;
pointer-events: none !important;
}
/* Mobile: Gebärdensprache-Kachel ausblenden, Platz erhalten */
body.kl-theme-blue .menu-modal .mobile-widgets .widget:has(a[href*="gebaerdensprache"]),
body.kl-theme-blue .menu-modal .mobile-widgets .widget-content:has(a[href*="gebaerdensprache"]) {
visibility: hidden !important;
pointer-events: none !important;
}
/* --------------------------------------------------
31-06-04 Option A: Einfache/Leichte Sprache ausblenden
--------------------------------------------------
Einfache/Leichte Sprache auf Utopia ausblenden.
Wenn NUR Einfache/Leichte Sprache ausgeblendet wird:
- Desktop: Platz bleibt erhalten.
- Mobile: Platz bleibt erhalten.
Zum Aktivieren Kommentarzeichen entfernen.
-------------------------------------------------- */
/*
body.kl-theme-blue .language-switch a[href="/einfache-sprache/"],
body.kl-theme-blue .language-switch a[href*="einfache-sprache"] {
visibility: hidden !important;
pointer-events: none !important;
}
body.kl-theme-blue .menu-modal .mobile-widgets .widget:has(a[href*="einfache-sprache"]),
body.kl-theme-blue .menu-modal .mobile-widgets .widget-content:has(a[href*="einfache-sprache"]) {
visibility: hidden !important;
pointer-events: none !important;
}
*/
/* --------------------------------------------------
31-06-05 Option B: Beide Sprach-Icons ausblenden, mobilen Platz entfernen
--------------------------------------------------
Beide Sprach-Icons/Kacheln auf Utopia ausblenden.
Desktop:
- Beide Icon-Plätze bleiben erhalten.
Mobile:
- Der gesamte Sprach-Widget-Bereich fällt weg.
- Dadurch entsteht im mobilen Menü kein leerer Abstand.
Zum Aktivieren Kommentarzeichen entfernen.
Wichtig:
Wenn diese Option aktiv ist, können die Einzelregeln oben bleiben.
-------------------------------------------------- */
/*
body.kl-theme-blue .language-switch a[href="/einfache-sprache/"],
body.kl-theme-blue .language-switch a[href="/gebaerdensprache/"],
body.kl-theme-blue .language-switch a[href*="einfache-sprache"],
body.kl-theme-blue .language-switch a[href*="gebaerdensprache"] {
visibility: hidden !important;
pointer-events: none !important;
}
body.kl-theme-blue .menu-modal .mobile-widgets {
display: none !important;
margin: 0 !important;
padding: 0 !important;
height: 0 !important;
min-height: 0 !important;
overflow: hidden !important;
}
*/
/* --------------------------------------------------
31-06-06 Option C: Beide Sprach-Icons ausblenden, mobilen Platz erhalten
--------------------------------------------------
Beide Sprach-Icons/Kacheln auf Utopia ausblenden,
aber auch im mobilen Menü den Platz erhalten.
Diese Option ist nur als Alternative gedacht.
Nicht gleichzeitig mit Option B aktivieren.
Zum Aktivieren Kommentarzeichen entfernen.
-------------------------------------------------- */
/*
body.kl-theme-blue .language-switch a[href="/einfache-sprache/"],
body.kl-theme-blue .language-switch a[href="/gebaerdensprache/"],
body.kl-theme-blue .language-switch a[href*="einfache-sprache"],
body.kl-theme-blue .language-switch a[href*="gebaerdensprache"] {
visibility: hidden !important;
pointer-events: none !important;
}
body.kl-theme-blue .menu-modal .mobile-widgets .widget:has(a[href*="einfache-sprache"]),
body.kl-theme-blue .menu-modal .mobile-widgets .widget:has(a[href*="gebaerdensprache"]),
body.kl-theme-blue .menu-modal .mobile-widgets .widget-content:has(a[href*="einfache-sprache"]),
body.kl-theme-blue .menu-modal .mobile-widgets .widget-content:has(a[href*="gebaerdensprache"]) {
visibility: hidden !important;
pointer-events: none !important;
}
*/
/* --------------------------------------------------
31-06-07 Sicherheit: Fallback über WordPress-Bildklassen
--------------------------------------------------
Falls Bilder direkt über ihre WordPress-Bildklassen erkannt werden müssen.
Leichte Sprache: wp-image-15447
Gebärdensprache: wp-image-15448
Diese Regeln sind bewusst deaktiviert und nur als Fallback gedacht.
-------------------------------------------------- */
/*
body.kl-theme-blue .language-switch img.wp-image-15447,
body.kl-theme-blue .menu-modal .mobile-widgets img.wp-image-15447 {
visibility: hidden !important;
pointer-events: none !important;
}
body.kl-theme-blue .language-switch img.wp-image-15448,
body.kl-theme-blue .menu-modal .mobile-widgets img.wp-image-15448 {
visibility: hidden !important;
pointer-events: none !important;
}
*/
/* ==================================================
32 ADMIN / GUTENBERG METABOXEN
================================================== */
/* KL_ADMIN_METABOX_LAYOUT_CSS_START */
/*
* KulturLeben Admin Metabox Layout
* --------------------------------------------------
* Dieser Block wird von functions.php gezielt aus der style.css gelesen
* und nur im WordPress-Editor ausgegeben.
*
* Ziel:
* - Metabox-Bereich optisch kompakter darstellen
* - ACF-/Metabox-Felder etwas dichter darstellen
* - sehr breite ACF-Felder begrenzen
*
* Wichtig:
* Hier wird bewusst KEINE feste Höhe gesetzt.
* Die Start-Höhe wird einmalig per JavaScript gesetzt,
* damit der Gutenberg-Regler danach weiterhin verschiebbar bleibt.
*/
body.block-editor-page .edit-post-meta-boxes-main__liner {
overflow: auto !important;
}
body.block-editor-page .edit-post-meta-boxes-area,
body.block-editor-page .edit-post-layout__metaboxes {
margin-top: 0 !important;
}
body.block-editor-page .editor-resizable-editor,
body.block-editor-page .editor-visual-editor {
min-height: 90px !important;
}
body.block-editor-page .edit-post-meta-boxes-area .postbox {
margin-bottom: 10px !important;
}
body.block-editor-page .edit-post-meta-boxes-area .postbox-header {
min-height: 36px !important;
}
body.block-editor-page .edit-post-meta-boxes-area .inside {
padding-top: 10px !important;
}
body.block-editor-page .acf-postbox .acf-fields > .acf-field {
padding-top: 10px !important;
padding-bottom: 10px !important;
}
body.block-editor-page .acf-postbox .acf-label {
margin-bottom: 4px !important;
}
body.block-editor-page .acf-postbox .acf-label label {
margin-bottom: 3px !important;
}
body.block-editor-page .acf-postbox .description {
margin-top: 3px !important;
}
body.block-editor-page .acf-postbox input[type="text"],
body.block-editor-page .acf-postbox input[type="url"],
body.block-editor-page .acf-postbox input[type="email"],
body.block-editor-page .acf-postbox textarea,
body.block-editor-page .acf-postbox select {
margin-top: 0 !important;
}
/*
* ACF-Felder mit width:200% begrenzen.
*/
body.block-editor-page .edit-post-meta-boxes-main .acf-field {
max-width: 100% !important;
}
body.block-editor-page .edit-post-meta-boxes-main .acf-field[style*="width:200%"],
body.block-editor-page .edit-post-meta-boxes-main .acf-field[style*="width: 200%"] {
width: 100% !important;
}
/*
* Kleine optische Korrektur für den Metabox-Kopf.
*/
body.block-editor-page .edit-post-meta-boxes-main__presenter {
border-top: 1px solid #dcdcde;
}
/* KL_ADMIN_METABOX_LAYOUT_CSS_END */
/* --------------------------------------------------
32-03 ADMIN / ÜBERSICHTSTABELLEN CPTS
-------------------------------------------------- */
/* KL_ADMIN_COLUMNS_CSS_START */
/*
* KulturLeben Admin-Tabellen
* --------------------------------------------------
* Gehört zu /partials/kl-admin-columns.php.
*
* Aufgabe:
* - gestaltet die WordPress-Listenansichten im Backend
* - regelt Spaltenbreiten, Badges, Zuordnungen und Quick Edit
* - zeigt Statushinweise nur über Schriftfarben
*
* Wichtig:
* - PHP erzeugt Spalten, Inhalte und Zeilen-Klassen.
* - CSS gestaltet nur die Darstellung.
* - Die Inline-CSS-Funktion in kl-admin-columns.php kann nach Einbau
* dieses Blocks entfernt werden, wenn diese CSS-Datei im Admin geladen wird.
*/
.wp-list-table.fixed,
.wp-list-table.widefat.fixed.posts {
table-layout: fixed;
}
.wp-list-table th,
.wp-list-table td {
vertical-align: top;
}
.wp-list-table td {
overflow-wrap: break-word;
word-break: normal;
}
.wp-list-table .column-cb {
width: 2.2rem;
}
/*
* Native WordPress-Titelspalte.
* Wichtig: nicht durch kl_title ersetzen, sonst kann Quick Edit kaputtgehen.
*/
.wp-list-table .column-title,
.wp-list-table .column-kl_title {
width: 11rem;
}
.wp-list-table .column-date {
width: 7.5rem;
}
.wp-list-table .column-kl_event_datetime {
width: 8.5rem;
}
.wp-list-table .column-kl_image,
.wp-list-table.widefat.fixed.posts .column-kl_image,
.wp-list-table.widefat.fixed.posts td.column-kl_image {
width: 5.2rem !important;
max-width: 5.2rem !important;
text-align: center;
}
.wp-list-table .column-kl_site_scope,
.wp-list-table .column-kl_news_type,
.wp-list-table .column-kl_event_type,
.wp-list-table .column-kl_team_type,
.wp-list-table .column-kl_project_type,
.wp-list-table .column-kl_sponsor_type,
.wp-list-table .column-kl_completed,
.wp-list-table .column-kl_active {
width: 8.8rem;
}
.wp-list-table .column-kl_subtitle,
.wp-list-table .column-kl_keyword,
.wp-list-table .column-kl_event_location,
.wp-list-table .column-kl_project_location,
.wp-list-table .column-kl_location_ref,
.wp-list-table .column-kl_project_time,
.wp-list-table .column-kl_timeline,
.wp-list-table .column-kl_location_address,
.wp-list-table .column-kl_location_hint,
.wp-list-table .column-kl_comment,
.wp-list-table .column-kl_location_type,
.wp-list-table .column-kl_department,
.wp-list-table .column-kl_vita {
width: 8.8rem;
}
.wp-list-table .column-kl_location_external_managed {
width: 7.4rem;
}
.wp-list-table .column-kl_location_coords {
width: 7.2rem;
}
.wp-list-table .column-kl_description,
.wp-list-table .column-kl_info {
width: 11.5rem;
}
.wp-list-table .column-kl_project_sponsors,
.wp-list-table .column-kl_event_sponsors {
width: 10rem;
}
.wp-list-table .column-kl_related_project,
.wp-list-table .column-kl_used_in_projects,
.wp-list-table .column-kl_used_in_events,
.wp-list-table .column-kl_used_in_news {
width: 9.5rem;
}
.wp-list-table .column-kl_link,
.wp-list-table .column-kl_project_url,
.wp-list-table .column-kl_url,
.wp-list-table .column-kl_email {
width: 7.5rem;
}
.wp-list-table .column-kl_phone {
width: 6.8rem;
}
/* Inhalt/Auszug unter Titel ausblenden */
.wp-list-table .column-title > p,
.wp-list-table .column-title .post-excerpt,
.wp-list-table .column-title .excerpt {
display: none !important;
}
.wp-list-table .kl-admin-text,
.wp-list-table .kl-admin-link,
.wp-list-table .kl-admin-title-link {
display: inline-block;
max-width: 100%;
line-height: 1.35;
overflow-wrap: break-word;
word-break: normal;
}
.wp-list-table .kl-admin-link {
max-height: 3.9em;
overflow: hidden;
}
.kl-admin-title-link,
.wp-list-table .row-title {
font-weight: 600;
}
.wp-list-table.widefat.fixed.posts .kl-admin-thumb,
.wp-list-table.widefat.fixed.posts .kl-admin-thumb a,
.kl-admin-thumb {
display: flex;
align-items: center;
justify-content: center;
width: 4.5rem;
max-width: 4.5rem;
height: 3.8rem;
border-radius: 8px;
background: #f3f3f3;
overflow: hidden;
line-height: 0;
box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}
.wp-list-table.widefat.fixed.posts .kl-admin-thumb img,
.wp-list-table.widefat.fixed.posts td.column-kl_image img,
.kl-admin-thumb img {
display: block;
width: auto !important;
max-width: 4.5rem !important;
height: auto !important;
max-height: 3.8rem !important;
object-fit: contain;
}
.kl-admin-empty {
color: #777;
}
.kl-admin-location-address,
.kl-admin-location-fallback {
display: block;
margin-top: 0.2rem;
color: #646970;
font-size: 11px;
line-height: 1.25;
}
/* Orte / Adressen: externe und lokale Standortwerte */
.wp-list-table .column-kl_location_address { width: 13.5rem; }
.wp-list-table .column-kl_location_hint { width: 13rem; }
.wp-list-table .column-kl_location_external_managed { width: 6.2rem; }
.wp-list-table .column-kl_location_coords { width: 7.4rem; }
.wp-list-table .kl-admin-location-line { display: block; margin: 0 0 0.22rem; line-height: 1.25; }
.wp-list-table .kl-admin-location-label { color: #50575e; font-weight: 600; }
.wp-list-table .kl-admin-location-value { color: #50575e; font-weight: 400; }
.wp-list-table .kl-admin-location-value-external,
.wp-list-table a .kl-admin-location-value-external,
.wp-list-table .kl-admin-location-external-yes { color: #1f7a32; font-weight: 700; }
.wp-list-table .kl-admin-location-value-wp,
.wp-list-table .kl-admin-location-value-fallback,
.wp-list-table .kl-admin-location-value-legacy { color: #646970; font-weight: 400; }
.wp-list-table .kl-admin-location-external-no { color: #646970; font-weight: 600; }
.wp-list-table .kl-admin-location-external-id { display:block; margin-top:.18rem; color:#1f7a32; font-size:11px; line-height:1.2; font-weight:600; }
.wp-list-table .kl-admin-location-external-missing { display:block; margin-top:.24rem; color:#b35a00; font-size:11px; line-height:1.2; font-weight:600; }
.wp-list-table .kl-admin-location-link { display:inline-block; max-width:100%; line-height:1.25; }
/* --------------------------------------------------
32-03-01 STATUSFARBEN / NUR SCHRIFT
-------------------------------------------------- */
/*
* Statusfarben in Admin-Tabellen.
* --------------------------------------------------
* Es wird bewusst nur die Schrift gefärbt.
* Keine Zellflächen, keine Hintergrundfarben.
* WordPress-Aktionslinks wie „Papierkorb“ behalten ihre eigenen Farben.
*/
.wp-list-table.widefat.fixed.posts tr.kl-admin-location-external-managed > th.check-column {
color: #1f7a32;
}
.wp-list-table.widefat.fixed.posts tr.kl-admin-partner-inactive > th.check-column,
.wp-list-table.widefat.fixed.posts tr.kl-admin-partner-inactive > td,
.wp-list-table.widefat.fixed.posts tr.kl-admin-partner-inactive > td a:not(.submitdelete) {
color: #7a3fa1;
}
.wp-list-table.widefat.fixed.posts tr.kl-admin-event-past > th.check-column,
.wp-list-table.widefat.fixed.posts tr.kl-admin-event-past > td,
.wp-list-table.widefat.fixed.posts tr.kl-admin-event-past > td a:not(.submitdelete) {
color: #b35a00;
}
.wp-list-table.widefat.fixed.posts tr.kl-admin-event-upcoming > th.check-column,
.wp-list-table.widefat.fixed.posts tr.kl-admin-event-upcoming > td,
.wp-list-table.widefat.fixed.posts tr.kl-admin-event-upcoming > td a:not(.submitdelete) {
color: #1f7a32;
}
/*
* WordPress-Aktionslinks.
* --------------------------------------------------
* Normale Aktionen dürfen die Zeilenfarbe erben.
* Papierkorb bleibt rot, damit die kritische Aktion erkennbar bleibt.
*/
.wp-list-table.widefat.fixed.posts tr .row-actions,
.wp-list-table.widefat.fixed.posts tr .row-actions a,
.wp-list-table.widefat.fixed.posts tr .row-actions span {
color: inherit;
}
.wp-list-table.widefat.fixed.posts tr .row-actions .trash a,
.wp-list-table.widefat.fixed.posts tr .row-actions .submitdelete {
color: #b32d2e;
}
.wp-list-table.widefat.fixed.posts .kl-admin-location-external-yes {
display: inline-block;
font-weight: 700;
color: #1f7a32;
line-height: 1.35;
}
/* --------------------------------------------------
32-03-02 BADGES / HINWEISMARKEN
-------------------------------------------------- */
.kl-admin-badges {
display: flex;
flex-wrap: wrap;
gap: .25rem;
align-items: flex-start;
}
.kl-admin-badge {
display: inline-flex;
align-items: center;
max-width: 100%;
padding: .15rem .48rem;
border-radius: 999px;
font-size: 11px;
line-height: 1.45;
font-weight: 600;
white-space: nowrap;
color: #4a4a4a;
background: #eeeeee;
border: 1px solid rgba(0, 0, 0, .06);
}
/* Sichtbarkeit */
.kl-admin-badge-kulturleben {
color: #9b0056;
background: #ffe2f1;
border-color: #f3a4ce;
}
.kl-admin-badge-utopia {
color: #005a9c;
background: #dcecff;
border-color: #99c9ff;
}
/* News-Typen */
.kl-admin-badge-eigene {
color: #0f5132;
background: #d1e7dd;
border-color: #9fd5b5;
}
.kl-admin-badge-extern {
color: #842029;
background: #f8d7da;
border-color: #f1aeb5;
}
/* Fallback Typ-Badges */
.kl-admin-badge-type {
color: #4b3a00;
background: #fff0bf;
border-color: #eed37b;
}
/* Team-Typen */
.kl-admin-badge-vorstand {
color: #ffffff;
background: #5b2a86;
border-color: #5b2a86;
}
.kl-admin-badge-geschaeftsfuehrung {
color: #ffffff;
background: #005ea8;
border-color: #005ea8;
}
.kl-admin-badge-mitarbeiter {
color: #0f5132;
background: #d1e7dd;
border-color: #9fd5b5;
}
.kl-admin-badge-freiwillige {
color: #005f73;
background: #d8f3f5;
border-color: #9bdde4;
}
.kl-admin-badge-orchester {
color: #7a3b00;
background: #ffe0b2;
border-color: #f5bc72;
}
.kl-admin-badge-schirmherr-botschafter {
color: #664d03;
background: #fff3cd;
border-color: #ffda6a;
}
/* Unterstützer-Typen */
.kl-admin-badge-hauptfoerderer {
color: #5c4200;
background: #ffe08a;
border-color: #e5b900;
}
.kl-admin-badge-foerderer {
color: #6b5200;
background: #fff4b8;
border-color: #e8cf64;
}
.kl-admin-badge-sponsor {
color: #8a3b00;
background: #ffd8b5;
border-color: #f0a45d;
}
.kl-admin-badge-kulturpartner {
color: #5a2375;
background: #ead7f5;
border-color: #cba2df;
}
.kl-admin-badge-sozialpartner {
color: #155724;
background: #d9f2df;
border-color: #9fd5aa;
}
.kl-admin-badge-mitglied-bei {
color: #084298;
background: #d6e9ff;
border-color: #9ec5fe;
}
.kl-admin-badge-ausgezeichnet {
color: #343a40;
background: #e9ecef;
border-color: #c6cbd1;
}
/* Projekt-Typen */
.kl-admin-badge-angebot {
color: #084298;
background: #d6e9ff;
border-color: #9ec5fe;
}
.kl-admin-badge-projekt {
color: #ffffff;
background: #174a7c;
border-color: #174a7c;
}
.kl-admin-badge-kulturformat {
color: #5a2375;
background: #ead7f5;
border-color: #cba2df;
}
.kl-admin-badge-kulturgruppe {
color: #9b0056;
background: #ffe2f1;
border-color: #f3a4ce;
}
.kl-admin-badge-werkstatt {
color: #7a3b00;
background: #ffe0b2;
border-color: #f5bc72;
}
.kl-admin-badge-workshopreihe {
color: #8a3b00;
background: #ffd8b5;
border-color: #f0a45d;
}
.kl-admin-badge-chor {
color: #005f73;
background: #d8f3f5;
border-color: #9bdde4;
}
.kl-admin-badge-ensemble {
color: #155724;
background: #d9f2df;
border-color: #9fd5aa;
}
.kl-admin-badge-musikgruppe {
color: #004c4c;
background: #d2f4ea;
border-color: #8bdac7;
}
.kl-admin-badge-theatergruppe {
color: #842029;
background: #f8d7da;
border-color: #f1aeb5;
}
/* Veranstaltungstypen */
.kl-admin-badge-auffuehrung {
color: #5a2375;
background: #ead7f5;
border-color: #cba2df;
}
.kl-admin-badge-konzert {
color: #004c4c;
background: #d2f4ea;
border-color: #8bdac7;
}
.kl-admin-badge-kulturveranstaltung {
color: #9b0056;
background: #ffe2f1;
border-color: #f3a4ce;
}
.kl-admin-badge-lesung {
color: #084298;
background: #d6e9ff;
border-color: #9ec5fe;
}
.kl-admin-badge-probe {
color: #334155;
background: #e2e8f0;
border-color: #bac4d1;
}
.kl-admin-badge-theater {
color: #842029;
background: #f8d7da;
border-color: #f1aeb5;
}
.kl-admin-badge-workshop {
color: #8a3b00;
background: #ffd8b5;
border-color: #f0a45d;
}
.tablenav .actions select[name^="kl_filter_"],
.tablenav .actions select[name^="kl_filter_meta_"] {
max-width: 14rem;
}
/* --------------------------------------------------
32-03-03 QUICK EDIT KOMPAKT
-------------------------------------------------- */
.inline-edit-row .inline-edit-wrapper {
padding: 0.75rem 0.9rem 0.85rem !important;
}
.inline-edit-row fieldset {
margin: 0 !important;
}
.inline-edit-row fieldset.inline-edit-col-left,
.inline-edit-row fieldset.inline-edit-col-center,
.inline-edit-row fieldset.inline-edit-col-right {
box-sizing: border-box;
padding: 0 0.9rem 0 0 !important;
}
.inline-edit-row .inline-edit-col-left {
width: 43% !important;
}
.inline-edit-row .inline-edit-col-center {
width: 42% !important;
}
.inline-edit-row .inline-edit-col-right {
width: 15% !important;
}
.inline-edit-row .inline-edit-legend {
margin: 0 0 0.35rem !important;
font-weight: 700;
}
.inline-edit-row label {
margin-bottom: 0.28rem !important;
}
.inline-edit-row label .title,
.inline-edit-row fieldset.inline-edit-date legend .title,
.inline-edit-row .inline-edit-categories-label {
width: 5.8rem !important;
font-weight: 600;
}
.inline-edit-row .input-text-wrap input[type="text"] {
min-height: 28px !important;
}
.inline-edit-row .inline-edit-date {
margin-top: 0.15rem !important;
}
.inline-edit-row .timestamp-wrap input,
.inline-edit-row .timestamp-wrap select {
min-height: 26px !important;
}
/* Passwort/Privat ausblenden */
.inline-edit-row .inline-edit-group:has(input[name="post_password"]),
.inline-edit-row label:has(input[name="post_password"]),
.inline-edit-row .inline-edit-or,
.inline-edit-row .inline-edit-private {
display: none !important;
}
/* Taxonomie-Boxen kompakt */
.inline-edit-row .inline-edit-categories .title,
.inline-edit-row .inline-edit-categories-label {
display: block !important;
margin: 0.05rem 0 0.2rem !important;
}
.inline-edit-row .cat-checklist,
.inline-edit-row .kl-admin-qe-checklist {
max-height: 8.5rem;
overflow: auto;
margin: 0;
padding: 0.45rem 0.6rem;
border: 1px solid #c3c4c7;
background: #fff;
}
.inline-edit-row .cat-checklist li,
.inline-edit-row .kl-admin-qe-checklist li {
margin: 0 0 0.25rem;
}
.inline-edit-row .inline-edit-status select,
.inline-edit-row .kl-admin-qe-location-select {
width: 100%;
max-width: 100%;
}
.inline-edit-row .kl-admin-qe-fieldset {
clear: both;
margin-top: 0.75rem;
}
.inline-edit-row .kl-admin-qe-fieldset h4 {
margin: 0.2rem 0 0.55rem;
font-size: 13px;
font-weight: 600;
}
.inline-edit-row .kl-admin-qe-field {
margin-bottom: 0.75rem;
}
.inline-edit-row .kl-admin-qe-field > .title,
.inline-edit-row .kl-admin-qe-location-field .title {
display: block;
float: none;
width: auto;
margin: 0 0 0.3rem;
font-weight: 600;
}
.inline-edit-row .kl-admin-qe-empty,
.inline-edit-row .kl-admin-qe-field .description {
color: #646970;
font-size: 12px;
}
.inline-edit-row .submit.inline-edit-save {
margin-top: 0.45rem !important;
padding-top: 0.6rem !important;
border-top: 1px solid #dcdcde;
}
.inline-edit-row .button,
.inline-edit-row .button-primary {
min-height: 30px !important;
}
@media (max-width: 1200px) {
.inline-edit-row .inline-edit-col-left,
.inline-edit-row .inline-edit-col-center,
.inline-edit-row .inline-edit-col-right {
width: 100% !important;
padding-right: 0 !important;
margin-bottom: 0.65rem !important;
}
}
/* KL_ADMIN_COLUMNS_CSS_END */
/* ==================================================
33 CROSS-SITE ZURÜCK-BUTTON
================================================== */
/*
Schwebender Cross-Site-Zurück-Button für KulturLeben Berlin
und Werkstatt Utopia.
Wichtig:
- PHP-/JS-Logik liegt in /partials/cross-site-back-button.php.
- Kein Footer-Balken.
- Keine volle Breite.
- Kompakte Floating-Pill innerhalb der Inhaltsbreite.
- Pfeil wird über bestehende Icon-Variablen geladen.
- Link-Text ist normal unterstrichen.
- Unterstreichung verschwindet bei Hover/Fokus.
- Das Schließen-X bekommt niemals eine Unterstreichung.
*/
.kl-cross-site-back {
--kl-cross-site-accent: var(--kl-color-magenta);
--kl-cross-site-accent-soft: var(--kl-alpha-magenta-180);
--kl-cross-site-icon: var(--kl-icon-pfeil-magenta);
--kl-cross-site-bg: var(--kl-color-white);
--kl-cross-site-text: var(--kl-cross-site-accent);
--kl-cross-site-base-bottom: 3.2rem;
--kl-cross-site-footer-lift: 0px;
position: fixed;
right: max(2rem, calc((100vw - var(--kl-layout-width)) / 2 + 2rem));
bottom: calc(var(--kl-cross-site-base-bottom) + var(--kl-cross-site-footer-lift));
z-index: 8500;
display: inline-flex;
align-items: stretch;
justify-content: flex-start;
width: auto;
max-width: min(36rem, calc(100vw - 4rem));
border: 0.18rem solid var(--kl-cross-site-accent);
border-radius: 999px;
background: var(--kl-cross-site-bg);
box-shadow:
0 0.55rem 1.4rem var(--kl-alpha-shadow-018),
0 0.12rem 0.35rem var(--kl-alpha-shadow-010);
overflow: hidden;
opacity: 0;
transform: translateY(0.5rem);
pointer-events: none;
transition:
opacity 0.16s ease,
transform 0.16s ease,
box-shadow 0.16s ease,
bottom 0.12s ease;
}
.kl-cross-site-back.is-visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.kl-cross-site-back[hidden] {
display: none !important;
}
.kl-cross-site-back:hover,
.kl-cross-site-back:focus-within {
box-shadow:
0 0.7rem 1.7rem var(--kl-alpha-shadow-022),
0 0.14rem 0.4rem var(--kl-alpha-shadow-012);
}
.kl-cross-site-back-link {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
width: auto;
min-height: 4.1rem;
padding: 0.72rem 1.18rem 0.78rem 1.25rem;
background: var(--kl-cross-site-bg);
color: var(--kl-cross-site-text);
font-family: var(--kl-font-bold) !important;
font-size: var(--kl-font-size-140);
line-height: 1.18;
letter-spacing: 0.018em;
text-align: left;
text-decoration: none !important;
text-decoration-line: none !important;
white-space: normal;
word-break: normal;
overflow-wrap: normal;
hyphens: none;
text-wrap: balance;
}
.kl-cross-site-back-link:hover,
.kl-cross-site-back-link:focus,
.kl-cross-site-back-link:focus-visible {
background: var(--kl-cross-site-accent);
color: var(--kl-color-white);
text-decoration: none !important;
text-decoration-line: none !important;
outline: none;
}
.kl-cross-site-back-arrow {
display: inline-block;
flex: 0 0 auto;
width: 1.15em;
height: 1.15em;
background-image: var(--kl-cross-site-icon);
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
/* Ausgangspunkt: Pfeil zeigt nach links. */
transform: rotate(180deg);
transform-origin: center center;
will-change: transform;
text-decoration: none !important;
text-decoration-line: none !important;
transition:
transform 0.32s ease,
background-image 0.18s ease;
}
.kl-cross-site-back-link:hover .kl-cross-site-back-arrow,
.kl-cross-site-back-link:focus .kl-cross-site-back-arrow,
.kl-cross-site-back-link:focus-visible .kl-cross-site-back-arrow {
background-image: var(--kl-icon-pfeil-weiss);
/*
Hover/Fokus:
Pfeil zeigt nach oben links.
Wichtig:
225deg wird bewusst statt -135deg genutzt,
damit die Drehung optisch in die richtige Richtung läuft.
*/
transform: rotate(225deg);
text-decoration: none !important;
text-decoration-line: none !important;
}
.kl-cross-site-back-label {
display: inline-block;
max-width: 25rem;
white-space: normal;
word-break: normal;
overflow-wrap: normal;
hyphens: none;
text-wrap: balance;
text-decoration-line: underline;
text-decoration-color: currentColor;
text-decoration-thickness: 0.08em;
text-underline-offset: 0.18em;
}
.kl-cross-site-back-link:hover .kl-cross-site-back-label,
.kl-cross-site-back-link:focus .kl-cross-site-back-label,
.kl-cross-site-back-link:focus-visible .kl-cross-site-back-label {
text-decoration: none !important;
text-decoration-line: none !important;
}
.kl-cross-site-back-close {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
width: 3.7rem;
min-width: 3.7rem;
min-height: 4.1rem;
margin: 0;
padding: 0 0 0.1rem 0;
border: none;
border-left: 0.1rem solid var(--kl-cross-site-accent-soft);
border-radius: 0;
background: var(--kl-cross-site-bg);
color: var(--kl-cross-site-accent);
font-family: var(--kl-font-bold) !important;
font-size: 2rem;
line-height: 1;
text-decoration: none !important;
text-decoration-line: none !important;
text-decoration-color: transparent !important;
cursor: pointer;
transition:
background-color 0.16s ease,
color 0.16s ease;
}
.kl-cross-site-back-close:hover,
.kl-cross-site-back-close:focus,
.kl-cross-site-back-close:focus-visible,
.kl-cross-site-back-close:active {
background: var(--kl-cross-site-accent);
color: var(--kl-color-white);
outline: none;
text-decoration: none !important;
text-decoration-line: none !important;
text-decoration-color: transparent !important;
}
.kl-cross-site-back-close *,
.kl-cross-site-back-close:hover *,
.kl-cross-site-back-close:focus *,
.kl-cross-site-back-close:focus-visible *,
.kl-cross-site-back-close:active * {
text-decoration: none !important;
text-decoration-line: none !important;
text-decoration-color: transparent !important;
}
/* Utopia: Blau statt Magenta */
body.kl-theme-blue .kl-cross-site-back {
--kl-cross-site-accent: var(--kl-color-blue-brand);
--kl-cross-site-accent-soft: var(--kl-alpha-blue-180);
--kl-cross-site-icon: var(--kl-icon-pfeil-blau);
--kl-cross-site-text: var(--kl-color-blue-brand);
}
/*
Tablet / kleinere Breiten:
Weiterhin keine volle Breite, sondern kompakt.
*/
@media (max-width: 1000px) {
.kl-cross-site-back {
--kl-cross-site-base-bottom: 2.8rem;
right: 2rem;
max-width: min(34rem, calc(100vw - 4rem));
}
}
/*
Mobil:
Nicht als Full-Width-Leiste.
Der Button bleibt eine kompakte Floating-Pill/Card.
*/
@media (max-width: 700px) {
.kl-cross-site-back {
--kl-cross-site-base-bottom: 2.2rem;
right: 1.2rem;
max-width: min(29rem, calc(100vw - 2.4rem));
border-radius: 1.8rem;
}
.kl-cross-site-back-link {
min-height: 4.2rem;
padding: 0.72rem 0.95rem 0.78rem 1rem;
gap: 0.45rem;
font-size: var(--kl-font-size-130);
line-height: 1.16;
text-align: left;
}
.kl-cross-site-back-arrow {
width: 1.08em;
height: 1.08em;
}
.kl-cross-site-back-label {
max-width: 19rem;
}
.kl-cross-site-back-close {
width: 3.6rem;
min-width: 3.6rem;
min-height: 4.2rem;
font-size: 1.9rem;
}
}
/*
Sehr kleine Displays:
Etwas kompakter, aber weiterhin keine Browserbreite.
*/
@media (max-width: 420px) {
.kl-cross-site-back {
--kl-cross-site-base-bottom: 1.8rem;
right: 1rem;
max-width: min(26rem, calc(100vw - 2rem));
border-radius: 1.6rem;
}
.kl-cross-site-back-link {
min-height: 4rem;
padding: 0.68rem 0.82rem 0.72rem 0.9rem;
font-size: var(--kl-font-size-125);
}
.kl-cross-site-back-label {
max-width: 16.8rem;
}
.kl-cross-site-back-close {
width: 3.4rem;
min-width: 3.4rem;
min-height: 4rem;
font-size: 1.8rem;
}
}
//* ==================================================
34 SINGLE-SEITEN / NEWS / PROJEKTE / VERANSTALTUNGEN
================================================== */
/*
Abschnittsübersicht
--------------------------------------------------
34-01 Grundrahmen / Gesamtkarte / Bereichslogik
34-02 Kopfbereich / Titel / Typ-Labels
34-03 Hero-Bild / große Hero-Schlagwörter
34-04 Meta / Projektlaufzeit / Orte
34-05 Inhalt / Aktionen / Projekt-Zusatzlink
34-06 Abschnittsüberschriften / obere und untere Mehr-Links
34-07 Untere Grids / Cards / Readmore-Abstände
34-08 Card-Schlagwörter und Card-Orte
34-09 Projektkontakte / Team
34-10 Fördererlogos
34-11 Responsive Regeln
34-12 Utopia / Blauvariante
Grundsatz:
- Abschnitt 34 gestaltet ausschließlich Single-Seiten für News, Projekte und Veranstaltungen.
- Grid-Grundlogik aus Abschnitt 11 bleibt führend und wird nur gezielt ergänzt.
- Schriftgrößen nutzen Variablen aus Abschnitt 00.
- Untere Mehr-/Archivlinks erscheinen nur in der mobilen Einspaltenansicht.
- Obere Mehr-Links setzen das Markup aus partials/grids/kl-grid-single-headings.php voraus.
*/
/* ==================================================
34-01 GRUNDRAHMEN / GESAMTKARTE / BEREICHSLOGIK
================================================== */
/* 34-01-01 Single-Scope und 100rem-Gesamtbreite */
#site-content.kl-single {
box-sizing: border-box;
width: calc(100% - (var(--kl-layout-side-gap) * 2));
max-width: var(--kl-layout-width);
margin-left: auto;
margin-right: auto;
padding-top: 3rem;
padding-bottom: 5.8rem;
color: var(--kl-color-text);
font-family: var(--kl-font-main) !important;
overflow-x: clip;
}
#site-content.kl-single,
#site-content.kl-single *,
#site-content.kl-single *::before,
#site-content.kl-single *::after {
box-sizing: border-box;
}
#site-content.kl-single img,
#site-content.kl-single svg,
#site-content.kl-single iframe,
#site-content.kl-single video {
max-width: 100%;
}
/* 34-01-02 Zusammenhängende Single-Gesamtkarte mit Abstand zum Footer */
#site-content.kl-single .kl-single-card {
position: relative;
width: 100%;
max-width: var(--kl-layout-width);
margin-left: auto;
margin-right: auto;
margin-top: 1rem;
margin-bottom: 1.8rem;
border: 2px solid var(--kl-color-brown);
border-radius: 25px;
background-color: var(--kl-color-surface-card);
box-shadow: 0 4px 8px var(--kl-alpha-shadow-010);
overflow: hidden;
}
#site-content.kl-single-news .kl-single-card,
#site-content.kl-single .kl-news-single-card {
border-color: var(--kl-color-magenta);
}
#site-content.kl-single-project .kl-single-card,
#site-content.kl-single .kl-project-single-card {
border-color: var(--kl-color-brown);
}
#site-content.kl-single-event .kl-single-card,
#site-content.kl-single .kl-event-single-card {
border-color: var(--kl-color-muted-bluegrey);
}
/* 34-01-03 Obere Template-Artikel nicht als zweite Karte behandeln */
#site-content.kl-single .kl-news-single-top,
#site-content.kl-single .kl-event-single-top,
#site-content.kl-single .kl-project-hub-top {
width: 100%;
max-width: 100%;
margin: 0;
padding: 0 0 2.4rem;
border: none;
border-radius: 0;
background: transparent;
box-shadow: none;
overflow: visible;
}
#site-content.kl-single .kl-project-hub-bottom,
#site-content.kl-single .kl-single-section {
width: 100%;
max-width: 100%;
}
/* ==================================================
34-02 KOPFBEREICH / TITEL / TYP-LABELS
================================================== */
/* 34-02-01 Kopfbereich nach Single-Typ */
#site-content.kl-single .kl-single-header {
width: 100%;
margin: 0;
padding: 2.4rem 2.6rem 2.15rem;
background-color: var(--kl-color-brown);
color: var(--kl-color-white);
border-radius: 0;
}
#site-content.kl-single-news .kl-single-header,
#site-content.kl-single .kl-news-single-card .kl-single-header {
background-color: var(--kl-color-magenta);
color: var(--kl-color-white);
}
#site-content.kl-single-project .kl-single-header,
#site-content.kl-single .kl-project-single-card .kl-single-header {
background-color: var(--kl-color-brown);
color: var(--kl-color-white);
}
#site-content.kl-single-event .kl-single-header,
#site-content.kl-single .kl-event-single-card .kl-single-header {
background-color: var(--kl-color-muted-bluegrey);
color: var(--kl-color-white);
}
/* 34-02-02 Typ-Labels oben im Header: größer und kontrastierend */
#site-content.kl-single .kl-single-badges {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.8rem;
margin: 0 0 1.1rem;
padding: 0;
}
#site-content.kl-single .kl-single-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.55rem;
padding: 0.38rem 0.95rem 0.44rem;
border: 0.16rem solid currentColor;
border-radius: 0;
background-color: var(--kl-color-magenta);
color: var(--kl-color-white);
font-family: var(--kl-font-bold) !important;
font-size: var(--kl-font-size-140);
line-height: 1.1;
letter-spacing: 0.035em;
text-decoration: none;
}
#site-content.kl-single-project .kl-single-badge,
#site-content.kl-single .kl-project-single-card .kl-single-badge {
border-color: var(--kl-color-magenta);
background-color: var(--kl-color-magenta);
color: var(--kl-color-white);
}
#site-content.kl-single-news .kl-single-badge,
#site-content.kl-single .kl-news-single-card .kl-single-badge {
border-color: var(--kl-color-muted-bluegrey);
background-color: var(--kl-color-muted-bluegrey);
color: var(--kl-color-white);
}
#site-content.kl-single-event .kl-single-badge,
#site-content.kl-single .kl-event-single-card .kl-single-badge {
border-color: var(--kl-color-brown);
background-color: var(--kl-color-brown);
color: var(--kl-color-white);
}
/* 34-02-03 Titel und Untertitel */
#site-content.kl-single .kl-single-title {
margin: 0;
color: inherit;
font-family: var(--kl-font-bold) !important;
font-size: var(--kl-font-size-entry-title);
line-height: 1.08;
letter-spacing: normal;
text-align: left;
word-break: normal;
overflow-wrap: normal;
hyphens: none;
}
#site-content.kl-single .kl-single-subtitle {
max-width: 78rem;
margin: 0.95rem 0 0;
color: inherit;
font-family: var(--kl-font-main) !important;
font-size: var(--kl-font-size-170);
line-height: 1.35;
}
/* 34-02-04 Event-Kalenderlink: rechts im Kopfbereich, als Textlink */
#site-content.kl-single-event .kl-event-header,
#site-content.kl-single .kl-event-single-card .kl-event-header { position: relative; }
#site-content.kl-single .kl-single-header-actions,
#site-content.kl-single .kl-event-header-actions {
display:flex !important; justify-content:flex-end !important; align-items:center;
width:100% !important; margin:1rem 0 0 !important; padding:0; text-align:right;
}
#site-content.kl-single .kl-event-calendar-link {
display:inline-flex !important; align-items:center !important; gap:.48em !important;
color:var(--kl-color-white) !important; font-family:var(--kl-font-bold) !important;
font-size:var(--kl-font-size-150); line-height:1.25; letter-spacing:.02em;
text-decoration:underline !important; text-decoration-color:var(--kl-alpha-white-780) !important;
text-decoration-thickness:.075em; text-underline-offset:.22em; background:transparent; border:0; box-shadow:none;
}
#site-content.kl-single .kl-event-calendar-link:hover,
#site-content.kl-single .kl-event-calendar-link:focus { text-decoration-color:var(--kl-color-white) !important; outline:none; }
#site-content.kl-single .kl-event-calendar-link:focus-visible { outline:.18rem solid var(--kl-color-white); outline-offset:.28rem; }
/* ==================================================
34-03 HERO-BILD / GROSSE HERO-SCHLAGWÖRTER
================================================== */
/* 34-03-01 Hero-Bild */
#site-content.kl-single .kl-single-hero,
#site-content.kl-single .kl-single-image {
position: relative;
display: block;
width: 100%;
height: clamp(27rem, 42vw, 43rem);
margin: 0;
padding: 0;
overflow: hidden;
background-color: var(--kl-color-brown);
border-radius: 0;
}
#site-content.kl-single .kl-single-hero img,
#site-content.kl-single .kl-single-image img {
display: block;
width: 100% !important;
min-width: 100%;
height: 100% !important;
min-height: 100%;
max-width: none !important;
object-fit: cover !important;
object-position: center center;
margin: 0 !important;
padding: 0 !important;
border-radius: 0 !important;
transform: scale(1.015);
transform-origin: center center;
}
/* 34-03-02 Große Hero-Schlagwörter: rechteckig, oben bündig, kontrastierend */
#site-content.kl-single .kl-single-hero > .kl-single-hero-keyword,
#site-content.kl-single .kl-single-image > .kl-single-hero-keyword,
#site-content.kl-single .kl-single-hero > .project-keyword,
#site-content.kl-single .kl-single-image > .project-keyword,
#site-content.kl-single .kl-single-hero > .event-keyword,
#site-content.kl-single .kl-single-image > .event-keyword,
#site-content.kl-single .kl-single-hero > .news-keyword,
#site-content.kl-single .kl-single-image > .news-keyword {
position: absolute;
z-index: 4;
top: 0;
left: 50%;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
max-width: calc(100% - 2.4rem);
margin: 0;
padding: 0.48rem 1.15rem 0.56rem;
border: none;
border-radius: 0;
background-color: var(--kl-color-magenta);
color: var(--kl-color-white);
font-family: var(--kl-font-bold) !important;
font-size: var(--kl-font-size-fluid-178-212);
line-height: 1.08;
letter-spacing: 0.025em;
text-align: center;
text-decoration: none;
box-shadow: none;
}
#site-content.kl-single .kl-single-hero > .kl-single-hero-keyword span,
#site-content.kl-single .kl-single-image > .kl-single-hero-keyword span,
#site-content.kl-single .kl-single-hero > .project-keyword span,
#site-content.kl-single .kl-single-image > .project-keyword span,
#site-content.kl-single .kl-single-hero > .event-keyword span,
#site-content.kl-single .kl-single-image > .event-keyword span,
#site-content.kl-single .kl-single-hero > .news-keyword span,
#site-content.kl-single .kl-single-image > .news-keyword span {
display: block;
margin: 0;
padding: 0;
background: transparent;
color: inherit;
border: none;
border-radius: 0;
box-shadow: none;
font: inherit;
line-height: inherit;
}
#site-content.kl-single-project .kl-single-hero > .kl-single-hero-keyword,
#site-content.kl-single-project .kl-single-hero > .project-keyword,
#site-content.kl-single .kl-project-single-card .kl-single-hero > .kl-single-hero-keyword,
#site-content.kl-single .kl-project-single-card .kl-single-hero > .project-keyword {
background-color: var(--kl-color-magenta);
color: var(--kl-color-white);
}
#site-content.kl-single-news .kl-single-hero > .kl-single-hero-keyword,
#site-content.kl-single-news .kl-single-hero > .news-keyword,
#site-content.kl-single .kl-news-single-card .kl-single-hero > .kl-single-hero-keyword,
#site-content.kl-single .kl-news-single-card .kl-single-hero > .news-keyword {
background-color: var(--kl-color-muted-bluegrey);
color: var(--kl-color-white);
}
#site-content.kl-single-event .kl-single-hero > .kl-single-hero-keyword,
#site-content.kl-single-event .kl-single-hero > .event-keyword,
#site-content.kl-single .kl-event-single-card .kl-single-hero > .kl-single-hero-keyword,
#site-content.kl-single .kl-event-single-card .kl-single-hero > .event-keyword {
background-color: var(--kl-color-brown);
color: var(--kl-color-white);
}
/* ==================================================
34-04 META / PROJEKTLAUFZEIT / ORTE
================================================== */
/* 34-04-01 Allgemeine Meta-Infoblöcke oben auf Singles */
#site-content.kl-single .kl-single-meta-box,
#site-content.kl-single .project-time,
#site-content.kl-single .kl-project-hub-time,
#site-content.kl-single .kl-event-meta-box,
#site-content.kl-single .kl-news-timeline-box {
width: auto;
max-width: calc(100% - 5.2rem);
margin: 2rem 2.6rem 0;
padding: 1.15rem 1.3rem;
border: 1px solid var(--kl-color-border-soft);
border-left: none;
border-right: none;
background-color: var(--kl-alpha-white-780);
color: var(--kl-color-text);
box-shadow: none;
}
#site-content.kl-single .kl-single-meta-row {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.45rem 0.75rem;
margin: 0;
padding: 0.35rem 0;
border-bottom: 1px solid var(--kl-color-border-soft);
}
#site-content.kl-single .kl-single-meta-row:last-child {
border-bottom: none;
}
#site-content.kl-single .kl-single-meta-label,
#site-content.kl-single .grid-meta-title {
color: var(--kl-color-brown);
font-family: var(--kl-font-bold) !important;
font-size: var(--kl-font-size-145);
line-height: 1.35;
}
#site-content.kl-single .kl-single-meta-value,
#site-content.kl-single .grid-meta-value {
color: var(--kl-color-text);
font-family: var(--kl-font-main) !important;
font-size: var(--kl-font-size-145);
line-height: 1.35;
}
#site-content.kl-single .kl-single-meta-value a {
color: var(--kl-color-magenta);
font-family: inherit;
text-decoration: underline;
text-decoration-thickness: 0.08em;
text-underline-offset: 0.18em;
}
/* 34-04-02 Projektlaufzeit als ruhiger Infoblock analog zum Ortsblock */
#site-content.kl-single .project-time.kl-single-meta-box,
#site-content.kl-single .kl-project-hub-time {
display: block;
width: auto;
max-width: calc(100% - 5.2rem);
margin: 1.35rem 2.6rem 0;
padding: 1.15rem 1.3rem;
border: 1px solid var(--kl-color-border-soft);
border-left: none;
border-right: none;
background-color: var(--kl-alpha-white-780);
color: var(--kl-color-text);
box-shadow: none;
}
#site-content.kl-single .project-time.kl-single-meta-box .grid-meta-title,
#site-content.kl-single .kl-project-hub-time .grid-meta-title {
display: inline;
margin: 0 0.35rem 0 0;
color: var(--kl-color-brown);
font-family: var(--kl-font-bold) !important;
font-size: var(--kl-font-size-145);
line-height: 1.35;
}
#site-content.kl-single .project-time.kl-single-meta-box .grid-meta-value,
#site-content.kl-single .kl-project-hub-time .grid-meta-value {
display: inline;
margin: 0;
color: var(--kl-color-text);
font-family: var(--kl-font-main) !important;
font-size: var(--kl-font-size-145);
line-height: 1.35;
}
/* 34-04-03 Adressblöcke auf Singles: Aufbau analog Homepage-Bürokarte */
#site-content.kl-single .kl-location-card,
#site-content.kl-single .kl-project-location,
#site-content.kl-single .kl-event-location,
#site-content.kl-single .kl-news-location,
#site-content.kl-single .project-location,
#site-content.kl-single .event-location-block,
#site-content.kl-single .news-location-block {
position: relative;
width: auto;
max-width: calc(100% - 5.2rem);
margin: 1.55rem 2.6rem 1.55rem;
padding: 1.25rem 1.45rem 1.35rem;
border: 1px solid var(--kl-color-border-soft);
border-radius: 14px;
background-color: var(--kl-color-white);
color: var(--kl-color-text);
box-shadow: 0 2px 8px var(--kl-alpha-shadow-060);
overflow: hidden;
}
/* Die frühere Zusatzüberschrift „Ort / Adresse“ wird nicht mehr angezeigt. */
#site-content.kl-single .kl-location-block-title,
#site-content.kl-single .project-location-title,
#site-content.kl-single .event-location-title,
#site-content.kl-single .news-location-title,
#site-content.kl-single .kl-project-location-title,
#site-content.kl-single .kl-event-location-title,
#site-content.kl-single .kl-news-location-title {
display: none !important;
}
#site-content.kl-single .kl-location-type-badge,
#site-content.kl-single .project-location-badge,
#site-content.kl-single .event-location-badge,
#site-content.kl-single .news-location-badge,
#site-content.kl-single .kl-project-location-badge,
#site-content.kl-single .kl-event-location-badge,
#site-content.kl-single .kl-news-location-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: max-content;
max-width: 100%;
margin: 0 0 0.9rem;
padding: 0.42rem 0.95rem 0.48rem;
border-radius: 4px;
background-color: var(--kl-color-surface-cream);
color: var(--kl-color-brown);
font-family: var(--kl-font-bold) !important;
font-size: var(--kl-font-size-135);
line-height: 1.1;
}
#site-content.kl-single .kl-location-name,
#site-content.kl-single .project-location-name,
#site-content.kl-single .event-location-name,
#site-content.kl-single .news-location-name,
#site-content.kl-single .kl-project-location-name,
#site-content.kl-single .kl-event-location-name,
#site-content.kl-single .kl-news-location-name {
display: block;
margin: 0 0 0.9rem;
color: var(--kl-color-black);
font-family: var(--kl-font-bold) !important;
font-size: var(--kl-font-size-200);
line-height: 1.18;
}
#site-content.kl-single .location-line {
display: grid;
grid-template-columns: 7.4rem minmax(0, 1fr);
column-gap: 0.95rem;
align-items: baseline;
margin: 0.48rem 0 0;
color: var(--kl-color-black);
font-family: var(--kl-font-main) !important;
font-size: var(--kl-font-size-150);
line-height: 1.38;
}
#site-content.kl-single .kl-location-line-label,
#site-content.kl-single .location-line .lbl {
display: inline-block;
color: var(--kl-color-brown);
font-family: var(--kl-font-bold) !important;
font-size: var(--kl-font-size-150);
line-height: 1.38;
white-space: nowrap;
}
#site-content.kl-single .kl-location-address,
#site-content.kl-single .kl-location-hint,
#site-content.kl-single .kl-location-accessibility,
#site-content.kl-single .project-location-address,
#site-content.kl-single .event-location-address,
#site-content.kl-single .news-location-address,
#site-content.kl-single .kl-project-location-address,
#site-content.kl-single .kl-event-location-address,
#site-content.kl-single .kl-news-location-address {
display: inline;
margin: 0;
color: var(--kl-color-black);
font-family: var(--kl-font-main) !important;
font-size: var(--kl-font-size-150);
line-height: 1.38;
}
#site-content.kl-single .kl-location-route-links,
#site-content.kl-single .project-location-links,
#site-content.kl-single .event-location-links,
#site-content.kl-single .news-location-links,
#site-content.kl-single .kl-project-location-links,
#site-content.kl-single .kl-event-location-links,
#site-content.kl-single .kl-news-location-links {
display: block;
margin-top: 0.55rem;
color: var(--kl-color-black);
font-size: var(--kl-font-size-145);
line-height: 1.35;
}
#site-content.kl-single .kl-location-link-buttons,
#site-content.kl-single .link-buttons {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 0.42rem 0.55rem;
min-width: 0;
}
#site-content.kl-single .soft-link,
#site-content.kl-single .kl-location-route-link,
#site-content.kl-single .project-location-links a,
#site-content.kl-single .event-location-links a,
#site-content.kl-single .news-location-links a,
#site-content.kl-single .kl-project-location-links a,
#site-content.kl-single .kl-event-location-links a,
#site-content.kl-single .kl-news-location-links a {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 100%;
min-height: 2.45rem;
padding: 0.24rem 0.7rem 0.32rem;
border: 1px solid var(--kl-color-border-soft);
border-radius: 999px;
background-color: var(--kl-color-surface-cool);
color: var(--kl-color-magenta);
font-family: var(--kl-font-bold) !important;
font-size: var(--kl-font-size-130);
line-height: 1.2;
text-decoration: none !important;
box-shadow: 0 1px 3px var(--kl-alpha-shadow-060);
transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
/* Telefon-Pill bewusst globaler, damit derselbe Hörer auch in Grids greift. */
#site-content.kl-single .kl-location-phone-pill,
.kl-location-phone-pill {
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 0.38rem;
width: max-content;
max-width: 100%;
min-width: 0;
min-height: 2.35rem;
padding: 0.18rem 0.55rem 0.24rem;
border: 1px solid var(--kl-color-border-soft);
border-radius: 999px;
background-color: var(--kl-color-surface-cool);
color: var(--kl-color-brown);
font-family: var(--kl-font-bold) !important;
font-size: var(--kl-font-size-130);
line-height: 1.15;
white-space: nowrap;
text-decoration: none !important;
box-shadow: 0 1px 3px var(--kl-alpha-shadow-060);
}
#site-content.kl-single .kl-location-phone-number,
#site-content.kl-single .kl-location-phone-icon,
.kl-location-phone-number,
.kl-location-phone-icon {
display: inline-block;
line-height: 1;
}
#site-content.kl-single .kl-location-phone-icon,
.kl-location-phone-icon {
font-size: 1.12em;
transform: translateY(0.04em);
}
#site-content.kl-single .soft-link:hover,
#site-content.kl-single .soft-link:focus,
#site-content.kl-single .kl-location-phone-pill:hover,
#site-content.kl-single .kl-location-phone-pill:focus,
#site-content.kl-single .kl-location-route-link:hover,
#site-content.kl-single .kl-location-route-link:focus,
.kl-location-phone-pill:hover,
.kl-location-phone-pill:focus {
border-color: var(--kl-color-magenta);
background-color: var(--kl-color-magenta);
color: var(--kl-color-white);
text-decoration: none !important;
outline: none;
}
#site-content.kl-single .kl-location-empty-notice {
margin-top: 0.6rem;
color: var(--kl-color-muted-bluegrey);
font-family: var(--kl-font-main) !important;
font-size: var(--kl-font-size-140);
line-height: 1.35;
}
/* ==================================================
34-05 INHALT / AKTIONEN / PROJEKT-ZUSATZLINK
================================================== */
/* 34-05-01 Fließinhalt */
#site-content.kl-single .kl-single-content,
#site-content.kl-single .project-content,
#site-content.kl-single .kl-project-content,
#site-content.kl-single .kl-event-content,
#site-content.kl-single .kl-news-content {
width: auto;
max-width: calc(100% - 5.2rem);
margin: 2.2rem 2.6rem 0;
color: var(--kl-color-text);
font-family: var(--kl-font-main) !important;
font-size: var(--kl-font-size-165);
line-height: 1.55;
}
#site-content.kl-single .kl-single-content p,
#site-content.kl-single .project-content p,
#site-content.kl-single .kl-project-content p,
#site-content.kl-single .kl-event-content p,
#site-content.kl-single .kl-news-content p {
margin-top: 0;
margin-bottom: 1.25rem;
color: var(--kl-color-text);
font-family: var(--kl-font-main) !important;
font-size: var(--kl-font-size-165);
line-height: 1.55;
}
#site-content.kl-single .kl-single-content a {
color: var(--kl-color-magenta);
text-decoration: underline;
text-decoration-thickness: 0.08em;
text-underline-offset: 0.18em;
}
/* 34-05-02 Aktionsbuttons */
#site-content.kl-single .kl-single-actions,
#site-content.kl-single .kl-news-actions,
#site-content.kl-single .kl-event-actions {
display: flex;
flex-wrap: wrap;
gap: 1.2rem;
margin: 2.4rem 2.6rem 0;
}
#site-content.kl-single .kl-single-button,
#site-content.kl-single .kl-news-project-button,
#site-content.kl-single .kl-event-url-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 4.6rem;
padding: 1rem 1.55rem;
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-150);
line-height: 1.2;
letter-spacing: 0.04em;
text-align: center;
text-decoration: none !important;
}
#site-content.kl-single .kl-single-button:hover,
#site-content.kl-single .kl-single-button:focus,
#site-content.kl-single .kl-news-project-button:hover,
#site-content.kl-single .kl-news-project-button:focus,
#site-content.kl-single .kl-event-url-button:hover,
#site-content.kl-single .kl-event-url-button:focus {
background-color: var(--kl-color-magenta);
border-color: var(--kl-color-brown);
color: var(--kl-color-white);
text-decoration: none !important;
}
/* 34-05-03 Projekt-Zusatzlink nach Orts-/Adressblock */
#site-content.kl-single .kl-project-hub-top > .grid-readmore {
display: flex;
justify-content: flex-end;
width: auto;
max-width: calc(100% - 5.2rem);
margin: 1.4rem 2.6rem 2.4rem;
padding: 0;
text-align: right;
}
#site-content.kl-single .kl-project-hub-top > .grid-readmore .grid-readmore-link {
position: relative;
display: inline-flex;
align-items: center;
justify-content: flex-end;
min-height: 3.8rem;
padding: 0.55rem 3.2rem 0.55rem 0.2rem;
color: var(--kl-color-magenta);
background: transparent;
border: none;
box-shadow: none;
font-family: var(--kl-font-bold) !important;
font-size: var(--kl-font-size-145);
line-height: 1.2;
letter-spacing: 0.03em;
text-align: right;
text-decoration: none !important;
}
#site-content.kl-single .kl-project-hub-top > .grid-readmore .grid-readmore-link::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 2.35rem;
height: 2.35rem;
background-image: var(--kl-icon-pfeil-magenta);
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
transform: translateY(-50%) rotate(0deg);
transform-origin: center center;
transition: transform 0.16s ease;
}
#site-content.kl-single .kl-project-hub-top > .grid-readmore .grid-readmore-link:hover,
#site-content.kl-single .kl-project-hub-top > .grid-readmore .grid-readmore-link:focus {
color: var(--kl-color-brown);
text-decoration: none !important;
}
#site-content.kl-single .kl-project-hub-top > .grid-readmore .grid-readmore-link:hover::after,
#site-content.kl-single .kl-project-hub-top > .grid-readmore .grid-readmore-link:focus::after {
transform: translateY(-50%) rotate(-45deg);
}
/* ==================================================
34-06 ABSCHNITTSÜBERSCHRIFTEN / MEHR-LINKS
================================================== */
/* 34-06-01 Unterbereiche */
#site-content.kl-single .kl-single-section {
position: relative;
margin: 0;
padding: 0 0 3rem;
border-top: 1px solid var(--kl-alpha-brown-border);
background: transparent;
}
#site-content.kl-single .kl-project-hub-bottom .kl-single-section:first-child,
#site-content.kl-single .kl-single-card > .kl-single-section:first-of-type {
border-top: none;
}
/* 34-06-02 Normale Überschrift ohne oberen Mehr-Link */
#site-content.kl-single .kl-single-section-title,
#site-content.kl-single .grid-sponsor-title {
display: block;
width: 100%;
margin: 0 0 1.35rem;
padding: 0.45rem 0.8rem 0.55rem;
background-color: var(--kl-color-brown);
color: var(--kl-color-white);
font-family: var(--kl-font-bold) !important;
font-size: var(--kl-font-size-220);
line-height: 1.15;
letter-spacing: 0.01em;
text-align: left;
}
/* 34-06-03 Überschrift mit oberem Mehr-Link aus kl-grid-single-headings.php */
#site-content.kl-single .kl-single-section-heading {
display: flex;
align-items: stretch;
justify-content: space-between;
gap: 1rem;
width: 100%;
margin: 0 0 1.35rem;
background-color: var(--kl-color-brown);
}
#site-content.kl-single .kl-single-section-heading .kl-single-section-title {
flex: 1 1 auto;
margin: 0;
}
#site-content.kl-single .kl-single-section-heading-news,
#site-content.kl-single .kl-single-section-heading-news .kl-single-section-title {
background-color: var(--kl-color-magenta);
color: var(--kl-color-white);
}
#site-content.kl-single .kl-single-section-heading-project,
#site-content.kl-single .kl-single-section-heading-project .kl-single-section-title,
#site-content.kl-single .kl-single-section-heading-team,
#site-content.kl-single .kl-single-section-heading-team .kl-single-section-title,
#site-content.kl-single .kl-single-section-heading-sponsor,
#site-content.kl-single .kl-single-section-heading-sponsor .kl-single-section-title {
background-color: var(--kl-color-brown);
color: var(--kl-color-white);
}
#site-content.kl-single .kl-single-section-heading-event,
#site-content.kl-single .kl-single-section-heading-event .kl-single-section-title {
background-color: var(--kl-color-muted-bluegrey);
color: var(--kl-color-white);
}
#site-content.kl-single .kl-single-section-head-more-link {
display: inline-flex;
align-items: center;
justify-content: flex-end;
flex: 0 0 auto;
min-width: max-content;
padding: 0.45rem 0.8rem 0.55rem;
color: var(--kl-color-white);
font-family: var(--kl-font-bold) !important;
font-size: var(--kl-font-size-170);
line-height: 1.15;
text-decoration: none !important;
}
#site-content.kl-single .kl-single-section-head-more-arrow {
display: inline-block;
width: 2.4rem;
height: 2.4rem;
margin-left: 0.65rem;
font-size: var(--kl-font-size-zero);
line-height: 0;
background-image: var(--kl-icon-pfeil-weiss);
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
transform: rotate(0deg);
transform-origin: center center;
transition: transform 0.16s ease;
}
#site-content.kl-single .kl-single-section-head-more-link:hover .kl-single-section-head-more-arrow,
#site-content.kl-single .kl-single-section-head-more-link:focus .kl-single-section-head-more-arrow {
transform: rotate(-45deg);
}
/* 34-06-04 Untere Mehr-/Archivlinks: auf Desktop/mehrspaltig hart ausblenden */
#site-content.kl-single .kl-single-section > .kl-single-section-more,
#site-content.kl-single .kl-single-section > .kl-single-section-more-right,
#site-content.kl-single .kl-single-section > .kl-single-section-more.grid-readmore,
#site-content.kl-single .kl-single-section > .grid-readmore.kl-single-section-more {
display: none !important;
}
#site-content.kl-single .kl-single-section-more-link {
position: relative;
align-items: center;
justify-content: flex-end;
min-height: 3.8rem;
padding: 0.55rem 3.1rem 0.55rem 0.2rem;
color: var(--kl-color-magenta);
font-family: var(--kl-font-bold) !important;
font-size: var(--kl-font-size-145);
line-height: 1.2;
letter-spacing: 0.03em;
text-align: right;
text-decoration: none !important;
}
#site-content.kl-single .kl-single-section-more-link::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 2.25rem;
height: 2.25rem;
background-image: var(--kl-icon-pfeil-magenta);
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
transform: translateY(-50%) rotate(0deg);
transform-origin: center center;
transition: transform 0.16s ease;
}
#site-content.kl-single .kl-single-section-more-link:hover::after,
#site-content.kl-single .kl-single-section-more-link:focus::after {
transform: translateY(-50%) rotate(-45deg);
}
/* ==================================================
34-07 UNTERE GRIDS / CARDS / READMORE-ABSTÄNDE
================================================== */
/* 34-07-01 Innenkante der unteren Gridbereiche */
#site-content.kl-single .kl-single-section .alignwide,
#site-content.kl-single .kl-single-section .kl-grids {
width: auto;
max-width: none;
margin-left: 2.4rem;
margin-right: 2.4rem;
}
#site-content.kl-single .kl-single-section .grid-loop,
#site-content.kl-single .kl-single-section .items-loop {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2.4rem;
align-items: stretch;
width: 100%;
max-width: 100%;
}
/* 34-07-02 Cards als Flex-Spalten mit Abstand vor Readmore */
#site-content.kl-single .kl-single-section .grid-item {
display: flex;
flex-direction: column;
min-width: 0;
height: 100%;
background-color: var(--kl-color-surface-card);
}
#site-content.kl-single .kl-single-section .grid-item .grid-content {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-width: 0;
}
#site-content.kl-single .kl-single-section .grid-item .grid-description,
#site-content.kl-single .kl-single-section .grid-item .news-description,
#site-content.kl-single .kl-single-section .grid-item .event-description,
#site-content.kl-single .kl-single-section .grid-item .grid-meta,
#site-content.kl-single .kl-single-section .grid-item .event-meta {
margin-bottom: 1.2rem;
}
#site-content.kl-single .kl-single-section .grid-item > .grid-readmore,
#site-content.kl-single .kl-single-section .grid-item .grid-content + .grid-readmore,
#site-content.kl-single .kl-single-section .grid-item .grid-readmore {
margin-top: auto;
padding-top: 1.25rem;
}
/* ==================================================
34-08 CARD-SCHLAGWÖRTER UND CARD-ORTE
================================================== */
/* 34-08-01 Card-Schlagwörter folgen der jeweiligen Bereichsfarbe */
#site-content.kl-single .kl-single-section .grid-item .grid-keyword,
#site-content.kl-single .kl-single-section .grid-item .news-keyword,
#site-content.kl-single .kl-single-section .grid-item .event-keyword,
#site-content.kl-single .kl-single-section .grid-item .event-type,
#site-content.kl-single .kl-single-section .grid-item .project-keyword {
z-index: 3;
border-radius: 0;
box-shadow: none;
}
#site-content.kl-single .kl-project-news-section .grid-item .grid-keyword,
#site-content.kl-single .kl-event-related-news-section .grid-item .grid-keyword,
#site-content.kl-single .kl-project-news-section .grid-item .news-keyword,
#site-content.kl-single .kl-event-related-news-section .grid-item .news-keyword,
#site-content.kl-single .kl-project-news-section .grid-item .event-keyword,
#site-content.kl-single .kl-event-related-news-section .grid-item .event-keyword {
background-color: var(--kl-color-magenta);
color: var(--kl-color-white);
}
#site-content.kl-single .kl-project-events-upcoming-section .grid-item,
#site-content.kl-single .kl-project-events-past-section .grid-item,
#site-content.kl-single .kl-event-related-events-upcoming-section .grid-item,
#site-content.kl-single .kl-event-related-events-past-section .grid-item {
border-color: var(--kl-color-muted-bluegrey);
}
#site-content.kl-single .kl-project-events-upcoming-section .grid-item .grid-keyword,
#site-content.kl-single .kl-project-events-past-section .grid-item .grid-keyword,
#site-content.kl-single .kl-event-related-events-upcoming-section .grid-item .grid-keyword,
#site-content.kl-single .kl-event-related-events-past-section .grid-item .grid-keyword,
#site-content.kl-single .kl-project-events-upcoming-section .grid-item .event-keyword,
#site-content.kl-single .kl-project-events-past-section .grid-item .event-keyword,
#site-content.kl-single .kl-event-related-events-upcoming-section .grid-item .event-keyword,
#site-content.kl-single .kl-event-related-events-past-section .grid-item .event-keyword,
#site-content.kl-single .kl-project-events-upcoming-section .grid-item .event-type,
#site-content.kl-single .kl-project-events-past-section .grid-item .event-type,
#site-content.kl-single .kl-event-related-events-upcoming-section .grid-item .event-type,
#site-content.kl-single .kl-event-related-events-past-section .grid-item .event-type {
background-color: var(--kl-color-muted-bluegrey);
color: var(--kl-color-white);
}
/* 34-08-02 News-Cards im Single-Kontext: einheitliche Innenkante und kompakterer Rhythmus */
#site-content.kl-single .kl-project-news-section .grid-item > :not(.grid-image):not(.news-img):not(.grid-keyword):not(.news-keyword):not(.grid-readmore),
#site-content.kl-single .kl-event-related-news-section .grid-item > :not(.grid-image):not(.news-img):not(.grid-keyword):not(.news-keyword):not(.grid-readmore) {
margin-left: 1.2rem;
margin-right: 1.2rem;
}
#site-content.kl-single .kl-project-news-section .grid-item .grid-title,
#site-content.kl-single .kl-project-news-section .grid-item .news-titel,
#site-content.kl-single .kl-project-news-section .grid-item .news-title,
#site-content.kl-single .kl-event-related-news-section .grid-item .grid-title,
#site-content.kl-single .kl-event-related-news-section .grid-item .news-titel,
#site-content.kl-single .kl-event-related-news-section .grid-item .news-title {
margin-top: 0.95rem;
margin-bottom: 0.75rem;
}
#site-content.kl-single .kl-project-news-section .grid-item .grid-subtitle,
#site-content.kl-single .kl-project-news-section .grid-item .news-subtitle,
#site-content.kl-single .kl-event-related-news-section .grid-item .grid-subtitle,
#site-content.kl-single .kl-event-related-news-section .grid-item .news-subtitle {
margin-top: 0;
margin-bottom: 0.9rem;
}
#site-content.kl-single .kl-project-news-section .grid-item .news-timeline,
#site-content.kl-single .kl-project-news-section .grid-item .grid-timeline,
#site-content.kl-single .kl-project-news-section .grid-item .news-location,
#site-content.kl-single .kl-project-news-section .grid-item .grid-location,
#site-content.kl-single .kl-event-related-news-section .grid-item .news-timeline,
#site-content.kl-single .kl-event-related-news-section .grid-item .grid-timeline,
#site-content.kl-single .kl-event-related-news-section .grid-item .news-location,
#site-content.kl-single .kl-event-related-news-section .grid-item .grid-location {
margin-top: 0.55rem;
margin-bottom: 0;
}
#site-content.kl-single .kl-project-news-section .grid-item .news-description,
#site-content.kl-single .kl-project-news-section .grid-item .grid-description,
#site-content.kl-single .kl-event-related-news-section .grid-item .news-description,
#site-content.kl-single .kl-event-related-news-section .grid-item .grid-description {
margin-top: 1.05rem;
margin-bottom: 1.2rem;
}
#site-content.kl-single .kl-project-news-section .grid-item .grid-readmore,
#site-content.kl-single .kl-event-related-news-section .grid-item .grid-readmore {
margin-left: 1.2rem;
margin-right: 1.2rem;
}
/* 34-08-03 Card-Meta und Card-Orte ruhig strukturieren */
#site-content.kl-single .kl-single-section .grid-item .grid-meta,
#site-content.kl-single .kl-single-section .grid-item .event-meta,
#site-content.kl-single .kl-single-section .grid-item .news-timeline,
#site-content.kl-single .kl-single-section .grid-item .news-location,
#site-content.kl-single .kl-single-section .grid-item .event-location,
#site-content.kl-single .kl-single-section .grid-item .event-location-wrap,
#site-content.kl-single .kl-single-section .grid-item .news-location-title-wrap,
#site-content.kl-single .kl-single-section .grid-item .grid-location-title-wrap,
#site-content.kl-single .kl-single-section .grid-item .grid-location {
background: transparent;
border: none;
box-shadow: none;
color: var(--kl-color-text);
}
#site-content.kl-single .kl-single-section .grid-item .event-meta {
display: block;
margin-top: 1.1rem;
}
#site-content.kl-single .kl-single-section .grid-item .event-date-wrap,
#site-content.kl-single .kl-single-section .grid-item .event-time-wrap,
#site-content.kl-single .kl-single-section .grid-item .event-location-wrap,
#site-content.kl-single .kl-single-section .grid-item .news-timeline,
#site-content.kl-single .kl-single-section .grid-item .news-location {
display: block;
margin: 0.35rem 0 0;
padding: 0;
font-size: inherit;
line-height: 1.35;
}
#site-content.kl-single .kl-single-section .grid-item .event-meta-label,
#site-content.kl-single .kl-single-section .grid-item .grid-meta-title,
#site-content.kl-single .kl-single-section .grid-item .news-location-title-wrap,
#site-content.kl-single .kl-single-section .grid-item .grid-location-title-wrap {
display: inline;
color: var(--kl-color-brown);
font-family: var(--kl-font-bold) !important;
}
#site-content.kl-single .kl-single-section .grid-item .event-location,
#site-content.kl-single .kl-single-section .grid-item .news-location,
#site-content.kl-single .kl-single-section .grid-item .grid-location {
color: var(--kl-color-text);
font-family: var(--kl-font-main) !important;
}
#site-content.kl-single .kl-single-section .grid-item .grid-meta a,
#site-content.kl-single .kl-single-section .grid-item .event-meta a,
#site-content.kl-single .kl-single-section .grid-item .news-location a,
#site-content.kl-single .kl-single-section .grid-item .event-location a {
color: var(--kl-color-magenta);
font-family: inherit;
text-decoration: underline;
text-decoration-thickness: 0.08em;
text-underline-offset: 0.16em;
}
/* ==================================================
34-08-99 SINGLE-GRIDS / ANGLEICHUNG AN HOME-GRIDS
================================================== */
/* Single-Grids übernehmen die Card-Zonenlogik aus Abschnitt 11. */
#site-content.kl-single .kl-single-section .kl-grids .grid-item {
display: flex;
flex-direction: column;
min-width: 0;
min-height: var(--kl-card-min-height);
height: auto;
background-color: var(--kl-color-surface-card);
}
#site-content.kl-single .kl-single-section .kl-grids .grid-content {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-width: 0;
}
#site-content.kl-single .kl-single-section .kl-grids .grid-card-head {
height: 12.8rem;
min-height: 12.8rem;
}
#site-content.kl-single .kl-single-section .kl-grids.grid-news .grid-card-meta,
#site-content.kl-single .kl-single-section .kl-grids.grid-news .news-card-meta {
height: 19rem;
min-height: 19rem;
}
#site-content.kl-single .kl-single-section .kl-grids.grid-events .grid-card-meta,
#site-content.kl-single .kl-single-section .kl-grids.grid-events .event-card-meta {
height: 19rem;
min-height: 19rem;
}
#site-content.kl-single .kl-single-section .kl-grids.grid-projekte .grid-card-meta,
#site-content.kl-single .kl-single-section .kl-grids.grid-projekte .project-card-meta {
height: 29rem;
min-height: 29rem;
}
#site-content.kl-single .kl-single-section .kl-grids .grid-card-meta .grid-meta,
#site-content.kl-single .kl-single-section .kl-grids .grid-card-meta .grid-meta-row,
#site-content.kl-single .kl-single-section .kl-grids .grid-card-meta .event-date-wrap,
#site-content.kl-single .kl-single-section .kl-grids .grid-card-meta .event-time-wrap,
#site-content.kl-single .kl-single-section .kl-grids .grid-card-meta .event-location-wrap,
#site-content.kl-single .kl-single-section .kl-grids .grid-card-meta .event-project-wrap,
#site-content.kl-single .kl-single-section .kl-grids .grid-card-meta .project-time,
#site-content.kl-single .kl-single-section .kl-grids .grid-card-meta .project-location,
#site-content.kl-single .kl-single-section .kl-grids .grid-card-meta .news-timeline,
#site-content.kl-single .kl-single-section .kl-grids .grid-card-meta .news-location {
display: grid;
grid-template-columns: max-content minmax(0, 1fr);
column-gap: 0.38em;
align-items: baseline;
margin: 0;
padding: 0;
min-height: 0;
line-height: 1.28;
}
#site-content.kl-single .kl-single-section .kl-grids.grid-news .news-card-meta .news-timeline { margin-bottom: 1.45rem; }
#site-content.kl-single .kl-single-section .kl-grids.grid-events .event-card-meta .event-location-wrap { margin-bottom: 1.25rem; }
#site-content.kl-single .kl-single-section .kl-grids.grid-projekte .project-card-meta .project-time {
min-height: 3.15em;
margin-bottom: 0.95rem;
}
#site-content.kl-single .kl-single-section .kl-grids.grid-projekte .project-card-meta .project-location {
min-height: 6.4em;
margin-bottom: 0.85rem;
}
/* Single-Grid-Card-Meta-Links wie Home-Grids: erst Hover/Fokus wird magenta. */
#site-content.kl-single .kl-single-section .kl-grids .grid-card-meta .grid-location-link,
#site-content.kl-single .kl-single-section .kl-grids .grid-card-meta .news-location-link,
#site-content.kl-single .kl-single-section .kl-grids .grid-card-meta .project-location-link,
#site-content.kl-single .kl-single-section .kl-grids .grid-card-meta .event-location-link,
#site-content.kl-single .kl-single-section .kl-grids .grid-card-meta .event-project-link,
#site-content.kl-single .kl-single-section .kl-grids .grid-card-meta .grid-location a,
#site-content.kl-single .kl-single-section .kl-grids .grid-card-meta .event-location a,
#site-content.kl-single .kl-single-section .kl-grids .grid-card-meta .news-location a,
#site-content.kl-single .kl-single-section .kl-grids .grid-card-meta .project-location a {
color: var(--kl-color-text) !important;
font-family: var(--kl-font-main) !important;
font-weight: 600 !important;
text-decoration: none !important;
}
#site-content.kl-single .kl-single-section .kl-grids .grid-card-meta .grid-location-link:hover,
#site-content.kl-single .kl-single-section .kl-grids .grid-card-meta .grid-location-link:focus,
#site-content.kl-single .kl-single-section .kl-grids .grid-card-meta .news-location-link:hover,
#site-content.kl-single .kl-single-section .kl-grids .grid-card-meta .news-location-link:focus,
#site-content.kl-single .kl-single-section .kl-grids .grid-card-meta .project-location-link:hover,
#site-content.kl-single .kl-single-section .kl-grids .grid-card-meta .project-location-link:focus,
#site-content.kl-single .kl-single-section .kl-grids .grid-card-meta .event-location-link:hover,
#site-content.kl-single .kl-single-section .kl-grids .grid-card-meta .event-location-link:focus,
#site-content.kl-single .kl-single-section .kl-grids .grid-card-meta .event-project-link:hover,
#site-content.kl-single .kl-single-section .kl-grids .grid-card-meta .event-project-link:focus,
#site-content.kl-single .kl-single-section .kl-grids .grid-card-meta .grid-location a:hover,
#site-content.kl-single .kl-single-section .kl-grids .grid-card-meta .grid-location a:focus,
#site-content.kl-single .kl-single-section .kl-grids .grid-card-meta .event-location a:hover,
#site-content.kl-single .kl-single-section .kl-grids .grid-card-meta .event-location a:focus,
#site-content.kl-single .kl-single-section .kl-grids .grid-card-meta .news-location a:hover,
#site-content.kl-single .kl-single-section .kl-grids .grid-card-meta .news-location a:focus,
#site-content.kl-single .kl-single-section .kl-grids .grid-card-meta .project-location a:hover,
#site-content.kl-single .kl-single-section .kl-grids .grid-card-meta .project-location a:focus {
color: var(--kl-color-magenta) !important;
text-decoration: none !important;
}
#site-content.kl-single .kl-single-section .kl-grids .grid-card-body,
#site-content.kl-single .kl-single-section .kl-grids .grid-description.grid-card-body {
margin-top: 0;
padding-top: 1.2em;
border-top: 1px solid rgba(101, 76, 56, .16);
}
#site-content.kl-single .kl-single-section .grid-item .grid-sponsor-title,
#site-content.kl-single .kl-single-section .grid-item .event-sponsor-title {
display: block;
width: auto;
margin: 0.9rem 0 0.42em !important;
padding-left: clamp(0.85em, 3.2cqw, 1.35em) !important;
padding-right: clamp(0.85em, 3.2cqw, 1.35em) !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
background: transparent !important;
color: var(--kl-color-text) !important;
font-family: var(--kl-font-bold) !important;
font-size: var(--kl-font-size-card-meta-fluid) !important;
line-height: 1.22;
letter-spacing: normal;
text-align: left;
}
#site-content.kl-single .kl-single-section .grid-item .event-sponsors.grid-sponsor-logos {
padding-left: clamp(0.85em, 3.2cqw, 1.35em) !important;
padding-right: clamp(0.85em, 3.2cqw, 1.35em) !important;
background: transparent !important;
}
/* News- und Event-Single Extra-Link: rechtsbündig wie Grid-Readmore mit drehendem Pfeil. */
#site-content.kl-single .kl-event-extra-readmore,
#site-content.kl-single .kl-news-extra-readmore {
display: flex;
justify-content: flex-end;
align-items: center;
max-width: calc(100% - 5.2rem);
margin: 0.85rem auto 1.4rem;
padding: 0;
text-align: right;
}
#site-content.kl-single .kl-event-extra-readmore .grid-readmore-link,
#site-content.kl-single .kl-news-extra-readmore .grid-readmore-link {
position: relative;
display: inline-flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
min-height: 2.6rem;
padding-right: 3rem;
color: var(--kl-color-magenta);
background: transparent;
border: none;
box-shadow: none;
font-family: var(--kl-font-bold) !important;
font-size: var(--kl-font-size-145);
line-height: 1.2;
letter-spacing: 0.03em;
text-align: right;
text-decoration: none !important;
}
#site-content.kl-single .kl-event-extra-readmore .grid-readmore-link::after,
#site-content.kl-single .kl-news-extra-readmore .grid-readmore-link::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 2.35rem;
height: 2.35rem;
background-image: var(--kl-icon-pfeil-magenta);
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
transform: translateY(-50%) rotate(0deg);
transform-origin: center center;
transition: transform 0.16s ease;
}
#site-content.kl-single .kl-event-extra-readmore .grid-readmore-link:hover,
#site-content.kl-single .kl-event-extra-readmore .grid-readmore-link:focus,
#site-content.kl-single .kl-news-extra-readmore .grid-readmore-link:hover,
#site-content.kl-single .kl-news-extra-readmore .grid-readmore-link:focus {
color: var(--kl-color-brown);
text-decoration: none !important;
outline: none;
}
#site-content.kl-single .kl-event-extra-readmore .grid-readmore-link:hover::after,
#site-content.kl-single .kl-event-extra-readmore .grid-readmore-link:focus::after,
#site-content.kl-single .kl-news-extra-readmore .grid-readmore-link:hover::after,
#site-content.kl-single .kl-news-extra-readmore .grid-readmore-link:focus::after {
transform: translateY(-50%) rotate(-45deg);
}
body.kl-theme-blue #site-content.kl-single .kl-event-extra-readmore .grid-readmore-link,
body.kl-theme-blue #site-content.kl-single .kl-news-extra-readmore .grid-readmore-link { color: var(--kl-color-blue-brand); }
body.kl-theme-blue #site-content.kl-single .kl-event-extra-readmore .grid-readmore-link::after,
body.kl-theme-blue #site-content.kl-single .kl-news-extra-readmore .grid-readmore-link::after { background-image: var(--kl-icon-pfeil-blau); }
/* ==================================================
34-09 PROJEKTKONTAKTE / TEAM
================================================== */
/* 34-09-01 Kontaktbereich: maximal 3 Kontakte, 3 / 2 / 1, ohne Riesenkarte */
#site-content.kl-single .kl-project-contacts-section .kl-project-contacts-grid {
width: auto;
max-width: none;
margin-left: 2.4rem;
margin-right: 2.4rem;
}
#site-content.kl-single .kl-project-contacts-loop {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 2rem;
align-items: stretch;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
#site-content.kl-single .kl-project-contact-card {
display: flex;
flex-direction: column;
width: 100% !important;
max-width: 100% !important;
height: 100%;
min-width: 0;
overflow: hidden;
}
/* 34-09-02 Kontaktbild begrenzen */
#site-content.kl-single .kl-project-contact-image,
#site-content.kl-single .kl-project-contact-card .team-image,
#site-content.kl-single .kl-project-contact-card .grid-image {
width: 100% !important;
height: clamp(20rem, 22vw, 27rem);
max-height: 27rem;
margin: 0 !important;
overflow: hidden;
}
#site-content.kl-single .kl-project-contact-image img,
#site-content.kl-single .kl-project-contact-card .team-image img,
#site-content.kl-single .kl-project-contact-card .grid-image img {
display: block;
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover;
object-position: center center;
margin: 0 !important;
}
#site-content.kl-single .kl-project-contact-name-wrap,
#site-content.kl-single .kl-project-contact-info {
padding-left: 1.2rem;
padding-right: 1.2rem;
}
#site-content.kl-single .kl-project-contact-info {
padding-bottom: 1.4rem;
}
#site-content.kl-single .kl-project-contact-info > * + * {
margin-top: 1rem;
}
/* ==================================================
34-10 FÖRDERERLOGOS
================================================== */
/* 34-10-01 Fördererlogos wie Home: ruhig, ohne Einzelkarten */
#site-content.kl-single .kl-project-sponsors-section,
#site-content.kl-single .kl-event-sponsors-section,
#site-content.kl-single .kl-event-project-sponsors-section,
#site-content.kl-single .kl-news-project-sponsors-section {
padding-bottom: 2.4rem;
}
#site-content.kl-single .kl-single-logo-grid,
#site-content.kl-single .kl-project-sponsors-grid,
#site-content.kl-single .kl-news-project-sponsors-grid,
#site-content.kl-single .grid-sponsor-logos {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.8rem 2.4rem;
align-items: center;
width: auto;
max-width: none;
margin: 0 2.4rem;
padding: 1.4rem 0;
border: none;
background: transparent;
box-shadow: none;
}
#site-content.kl-single .kl-single-logo-item,
#site-content.kl-single .project-sponsor-logo-wrap,
#site-content.kl-single .event-sponsor-logo-wrap,
#site-content.kl-single .news-project-sponsor-logo-wrap,
#site-content.kl-single .grid-sponsor-logo-wrap {
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
min-height: 5.2rem;
margin: 0;
padding: 0.25rem;
border: none;
background: transparent;
box-shadow: none;
}
#site-content.kl-single .kl-single-logo-item a,
#site-content.kl-single .project-sponsor-logo-wrap a,
#site-content.kl-single .event-sponsor-logo-wrap a,
#site-content.kl-single .news-project-sponsor-logo-wrap a,
#site-content.kl-single .grid-sponsor-logo-wrap a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: none;
background: transparent;
box-shadow: none;
text-decoration: none;
}
#site-content.kl-single .kl-single-logo-grid img,
#site-content.kl-single .project-sponsor-logo,
#site-content.kl-single .event-sponsor-logo,
#site-content.kl-single .news-project-sponsor-logo,
#site-content.kl-single .grid-sponsor-logo {
display: block;
width: auto;
max-width: 14rem;
height: auto;
max-height: 5rem;
margin: 0 auto;
padding: 0;
object-fit: contain;
border: none;
background: transparent;
box-shadow: none;
}
/* 34-10-02 Sicherheit: Logo-Links bekommen keine externen Pfeile */
#site-content.kl-single .kl-single-logo-grid a::before,
#site-content.kl-single .kl-single-logo-grid a::after,
#site-content.kl-single .grid-sponsor-logo-link::before,
#site-content.kl-single .grid-sponsor-logo-link::after {
content: none !important;
display: none !important;
}
/* ==================================================
34-11 RESPONSIVE REGELN
================================================== */
/* 34-11-01 Tablet / zweispaltige Ansicht */
@media (max-width: 900px) {
#site-content.kl-single {
width: calc(100% - 4rem);
padding-top: 2rem;
padding-bottom: 4.8rem;
}
#site-content.kl-single .kl-single-title {
font-size: var(--kl-font-size-title-mobile);
}
#site-content.kl-single .kl-single-hero,
#site-content.kl-single .kl-single-image {
height: clamp(24rem, 48vw, 36rem);
}
#site-content.kl-single .kl-single-section .grid-loop,
#site-content.kl-single .kl-single-section .items-loop,
#site-content.kl-single .kl-project-contacts-loop {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 2rem;
}
#site-content.kl-single .kl-single-logo-grid,
#site-content.kl-single .kl-project-sponsors-grid,
#site-content.kl-single .kl-news-project-sponsors-grid,
#site-content.kl-single .grid-sponsor-logos {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* 34-11-02 Mobile / einspaltige Ansicht */
@media (max-width: 700px) {
#site-content.kl-single {
width: calc(100% - 2rem);
padding-top: 1.6rem;
padding-bottom: 4rem;
}
#site-content.kl-single .kl-single-card {
border-radius: 20px;
margin-bottom: 2rem;
}
#site-content.kl-single .kl-single-header {
padding: 2rem 1.6rem 1.8rem;
}
#site-content.kl-single .kl-single-title {
font-size: var(--kl-font-size-title-small);
}
#site-content.kl-single .kl-single-subtitle {
font-size: var(--kl-font-size-160);
}
#site-content.kl-single .kl-single-hero,
#site-content.kl-single .kl-single-image {
height: clamp(21rem, 62vw, 28rem);
}
#site-content.kl-single .kl-single-hero > .kl-single-hero-keyword,
#site-content.kl-single .kl-single-image > .kl-single-hero-keyword,
#site-content.kl-single .kl-single-hero > .project-keyword,
#site-content.kl-single .kl-single-image > .project-keyword,
#site-content.kl-single .kl-single-hero > .event-keyword,
#site-content.kl-single .kl-single-image > .event-keyword,
#site-content.kl-single .kl-single-hero > .news-keyword,
#site-content.kl-single .kl-single-image > .news-keyword {
max-width: calc(100% - 2rem);
font-size: var(--kl-font-size-fluid-155-190);
}
#site-content.kl-single .kl-single-meta-box,
#site-content.kl-single .project-time,
#site-content.kl-single .kl-project-hub-time,
#site-content.kl-single .kl-event-meta-box,
#site-content.kl-single .kl-news-timeline-box,
#site-content.kl-single .kl-project-location,
#site-content.kl-single .kl-event-location,
#site-content.kl-single .kl-news-location,
#site-content.kl-single .project-location,
#site-content.kl-single .event-location-block,
#site-content.kl-single .news-location-block,
#site-content.kl-single .kl-single-content,
#site-content.kl-single .project-content,
#site-content.kl-single .kl-project-content,
#site-content.kl-single .kl-event-content,
#site-content.kl-single .kl-news-content,
#site-content.kl-single .kl-single-actions,
#site-content.kl-single .kl-news-actions,
#site-content.kl-single .kl-event-actions,
#site-content.kl-single .kl-project-hub-top > .grid-readmore {
max-width: calc(100% - 3.2rem);
margin-left: 1.6rem;
margin-right: 1.6rem;
}
#site-content.kl-single .kl-single-section .alignwide,
#site-content.kl-single .kl-single-section .kl-grids,
#site-content.kl-single .kl-project-contacts-section .kl-project-contacts-grid,
#site-content.kl-single .kl-single-logo-grid,
#site-content.kl-single .kl-project-sponsors-grid,
#site-content.kl-single .kl-news-project-sponsors-grid,
#site-content.kl-single .grid-sponsor-logos {
margin-left: 1.6rem;
margin-right: 1.6rem;
}
#site-content.kl-single .kl-single-section .grid-loop,
#site-content.kl-single .kl-single-section .items-loop,
#site-content.kl-single .kl-project-contacts-loop,
#site-content.kl-single .kl-single-logo-grid,
#site-content.kl-single .kl-project-sponsors-grid,
#site-content.kl-single .kl-news-project-sponsors-grid,
#site-content.kl-single .grid-sponsor-logos {
grid-template-columns: 1fr !important;
gap: 1.6rem;
}
#site-content.kl-single .kl-project-contact-image,
#site-content.kl-single .kl-project-contact-card .team-image,
#site-content.kl-single .kl-project-contact-card .grid-image {
height: clamp(18rem, 58vw, 24rem);
}
#site-content.kl-single .kl-single-section-heading {
gap: 0.6rem;
}
#site-content.kl-single .kl-single-section-head-more-link {
font-size: var(--kl-font-size-145);
}
#site-content.kl-single .kl-single-section-head-more-arrow {
width: 2rem;
height: 2rem;
margin-left: 0.45rem;
}
#site-content.kl-single .kl-single-section > .kl-single-section-more,
#site-content.kl-single .kl-single-section > .kl-single-section-more-right,
#site-content.kl-single .kl-single-section > .kl-single-section-more.grid-readmore,
#site-content.kl-single .kl-single-section > .grid-readmore.kl-single-section-more {
display: flex !important;
justify-content: flex-end;
width: auto;
max-width: calc(100% - 3.2rem);
margin: 1.15rem 1.6rem 0;
padding: 0;
text-align: right;
}
#site-content.kl-single .kl-location-card,
#site-content.kl-single .kl-project-location,
#site-content.kl-single .kl-event-location,
#site-content.kl-single .kl-news-location,
#site-content.kl-single .project-location,
#site-content.kl-single .event-location-block,
#site-content.kl-single .news-location-block {
padding: 1.15rem 1.1rem 1.2rem;
border-radius: 12px;
margin-bottom: 1.55rem;
}
#site-content.kl-single .location-line {
display: block;
margin-top: 0.62rem;
font-size: var(--kl-font-size-140);
}
#site-content.kl-single .kl-location-line-label,
#site-content.kl-single .location-line .lbl {
display: block;
margin-bottom: 0.12rem;
}
#site-content.kl-single .kl-location-link-buttons,
#site-content.kl-single .link-buttons {
display: flex;
width: 100%;
}
#site-content.kl-single .kl-single-header-actions,
#site-content.kl-single .kl-event-header-actions {
justify-content: flex-start !important;
text-align: left;
}
#site-content.kl-single .kl-single-section-more-link {
display: inline-flex;
}
}
/* ==================================================
34-12 UTOPIA / BLAUVARIANTE
================================================== */
/* 34-12-01 Blaue Akzente nur im Utopia-Kontext */
body.kl-theme-blue #site-content.kl-single .kl-single-button,
body.kl-theme-blue #site-content.kl-single .kl-news-project-button,
body.kl-theme-blue #site-content.kl-single .kl-event-url-button {
border-color: var(--kl-color-blue-brand);
}
body.kl-theme-blue #site-content.kl-single .kl-single-button:hover,
body.kl-theme-blue #site-content.kl-single .kl-single-button:focus,
body.kl-theme-blue #site-content.kl-single .kl-news-project-button:hover,
body.kl-theme-blue #site-content.kl-single .kl-news-project-button:focus,
body.kl-theme-blue #site-content.kl-single .kl-event-url-button:hover,
body.kl-theme-blue #site-content.kl-single .kl-event-url-button:focus {
background-color: var(--kl-color-blue-brand);
border-color: var(--kl-color-brown);
}
body.kl-theme-blue #site-content.kl-single .kl-project-hub-top > .grid-readmore .grid-readmore-link,
body.kl-theme-blue #site-content.kl-single .kl-single-section-more-link,
body.kl-theme-blue #site-content.kl-single .kl-single-content a,
body.kl-theme-blue #site-content.kl-single .kl-single-meta-value a,
body.kl-theme-blue #site-content.kl-single .grid-meta a {
color: var(--kl-color-blue-brand);
}
body.kl-theme-blue #site-content.kl-single .kl-project-hub-top > .grid-readmore .grid-readmore-link::after,
body.kl-theme-blue #site-content.kl-single .kl-single-section-more-link::after {
background-image: var(--kl-icon-pfeil-blau);
}