/*
Theme Name: KJD – Kurdische Jugend Deutschland
Theme URI: https://www.kurdische-jugend.de
Author: Kurdische Jugend Deutschland e. V.
Description: Modernes, seriöses Block-Theme für die Kurdische Jugend Deutschland e. V. – Ciwanên Kurd Li Almanya. Mit KJD Studio, Terminen mit Anmeldung, Kontaktformular, Nachrichten und Einrichtung per Klick.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Version: 2.3.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kjd
*/

/* ===================== Grundlagen (mobil zuerst) ===================== */
:root { --anthrazit: #1C1F26; --orange: #FF8B3A; --orange-dunkel: #B4501A; --sand: #FFF4EC; --hell: #F5F6F8; --grau: #5C6270; --linie: rgba(28, 31, 38, 0.1); --schatten: 0 1px 2px rgba(28, 31, 38, 0.06), 0 12px 32px -12px rgba(28, 31, 38, 0.18); --rund: 20px; }
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; overflow-x: hidden; }
:where(a, button, input, summary, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
::selection { background: var(--orange); color: var(--anthrazit); }
.wp-site-blocks > * + * { margin-block-start: 0; }
main.wp-block-group > * { margin-block: 0; }
h1, h2, h3 { text-wrap: balance; font-variation-settings: "opsz" 96; }
h1 mark, h2 mark, h3 mark { background: linear-gradient(transparent 62%, rgba(255, 139, 58, 0.55) 62%, rgba(255, 139, 58, 0.55) 92%, transparent 92%); color: inherit; padding: 0 0.05em; }
.has-anthrazit-background-color h1 mark, .has-anthrazit-background-color h2 mark { background: none; color: var(--orange); }
.has-orange-background-color h2 mark { background: none; color: #FFFFFF; text-shadow: 0 0 0 transparent; -webkit-text-stroke: 0; color: var(--anthrazit); text-decoration: underline 0.08em #FFFFFF; text-underline-offset: 0.12em; }
.is-style-kicker, .kj-kicker { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem !important; font-weight: 700 !important; font-size: 0.8rem !important; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange-dunkel); }
.is-style-kicker::before, .kj-kicker::before { content: ""; width: 1.6rem; height: 3px; border-radius: 3px; background: var(--orange); }
.has-anthrazit-background-color .is-style-kicker { color: var(--orange); }
.has-orange-background-color .is-style-kicker { color: var(--anthrazit); }
.has-orange-background-color .is-style-kicker::before { background: var(--anthrazit); }
.is-style-arabisch, [lang="ar"] { direction: rtl; text-align: right; }
.kj-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3rem; padding: 0.8rem 1.4rem; border: 2px solid var(--orange); border-radius: 999px; background: var(--orange); color: var(--anthrazit); font: 700 1rem/1.1 var(--wp--preset--font-family--bricolage); text-decoration: none; cursor: pointer; transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s; }
.kj-knopf:hover { background: var(--anthrazit); border-color: var(--anthrazit); color: #FFFFFF; transform: translateY(-2px); }
.kj-knopf--rand { background: transparent; color: inherit; border-color: currentColor; }
.kj-knopf--rand:hover { background: var(--orange); border-color: var(--orange); color: var(--anthrazit); }
.wp-block-button__link { border: 2px solid transparent; transition: background-color 0.2s, color 0.2s, transform 0.2s; }
.wp-block-button__link:hover { transform: translateY(-2px); }
.wp-block-button.is-style-rand .wp-block-button__link { background: transparent !important; color: inherit !important; border-color: currentColor; }
.wp-block-button.is-style-rand .wp-block-button__link:hover { background: var(--orange) !important; border-color: var(--orange); color: var(--anthrazit) !important; }
.wp-block-button.is-style-hell .wp-block-button__link { background: #FFFFFF !important; color: var(--anthrazit) !important; }
.has-anthrazit-background-color .wp-block-button__link:hover { background: #FFFFFF; color: var(--anthrazit); }
.has-orange-background-color .wp-block-button:not(.is-style-rand) .wp-block-button__link { background: var(--anthrazit); color: #FFFFFF; }
.has-orange-background-color .wp-block-button:not(.is-style-rand) .wp-block-button__link:hover { background: #FFFFFF; color: var(--anthrazit); }
.wp-block-group.is-style-sticker { border: 1px solid var(--linie); border-radius: var(--rund); box-shadow: var(--schatten); padding: clamp(1.25rem, 4vw, 2rem); background: #FFFFFF; }
.wp-block-image.is-style-polaroid img { border-radius: var(--rund); box-shadow: var(--schatten); }
.wp-block-image.is-style-kreis img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; }
.kj-pill { display: inline-flex; align-items: center; min-height: 1.9rem; padding: 0 0.8rem; border-radius: 999px; font-weight: 700; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
.kj-mono { font-weight: 700; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; }
.kj-leer { font-weight: 600; font-size: 1.05rem; }

/* ===================== Kopf ===================== */
.kj-kopf { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.92) !important; -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--linie); }
.admin-bar .kj-kopf { top: 32px; }
@media (max-width: 782px) { .admin-bar .kj-kopf { top: 0; } }
.kj-kopf > .wp-block-group { min-height: 4.75rem; gap: 1rem; }
.kj-logo { margin: 0 !important; flex-shrink: 0; }
.kj-logo img { display: block; height: 66px !important; width: auto !important; }
@media (max-width: 600px) { .kj-logo img { height: 50px !important; } }
.kj-kopf .wp-block-navigation-item__content { padding: 0.5rem 0.75rem; border-radius: 10px; transition: color 0.2s, background-color 0.2s; }
.kj-kopf .wp-block-navigation-item__content:hover { color: var(--orange-dunkel); background: var(--sand); }
.kj-kopf .current-menu-item > .wp-block-navigation-item__content, .kj-kopf .wp-block-navigation-item__content[aria-current="page"] { color: var(--orange-dunkel); }
.kj-kopf .wp-block-navigation__submenu-container { min-width: 15rem !important; padding: 0.5rem !important; border: 1px solid var(--linie) !important; border-radius: 16px; box-shadow: var(--schatten); }
.kj-kopf .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 0.6rem 0.8rem !important; }
.kj-kopf .wp-block-navigation__responsive-container.is-menu-open { padding: 1.5rem; }
.kj-kopf .is-menu-open .wp-block-navigation-item__content { font-size: 1.7rem !important; font-weight: 700; letter-spacing: -0.02em; padding: 0.35rem 0 !important; }
.kj-kopf .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-size: 1.15rem !important; font-weight: 500; opacity: 0.85; }
.kj-kopf .is-menu-open .wp-block-navigation-item__content:hover { background: transparent; color: var(--anthrazit); }

/* ===================== Startbild ===================== */
.kj-held { position: relative; overflow: hidden; padding-block: clamp(2.5rem, 7vw, 5.5rem); }
.kj-held > .wp-block-columns { margin: 0; gap: clamp(2rem, 5vw, 4rem); }
.kj-held__titel { margin: 0 !important; font-size: clamp(3rem, 9.5vw, 6.2rem) !important; line-height: 0.98 !important; }
.kj-held__unter { margin-top: 1.4rem !important; font-size: clamp(1.1rem, 2.2vw, 1.35rem); line-height: 1.5; max-width: 34rem; color: var(--grau); }
.kj-held .wp-block-buttons { margin-top: 2rem; }
.kj-sonne { position: relative; aspect-ratio: 1.05; border-radius: 28px; background: var(--sand); overflow: hidden; }
.kj-sonne svg.kj-sonne__strahlen { position: absolute; left: 50%; bottom: 30%; width: 120%; transform: translateX(-50%); overflow: visible; }
.kj-sonne__strahlen line { stroke: var(--orange); stroke-width: 9; stroke-linecap: round; transform-origin: 300px 300px; transform-box: view-box; }
.kj-sonne__balken { position: absolute; left: 12%; right: 12%; bottom: calc(30% - 22px); height: 22px; border-radius: 6px; background: var(--orange); }
.kj-sonne__logo { position: absolute; left: 50%; bottom: 6%; width: 52%; transform: translateX(-50%); margin: 0 !important; }
.kj-sonne__logo img { width: 100%; height: auto; display: block; }
.kj-zahl-chip { position: absolute; display: flex; flex-direction: column; padding: 0.8rem 1.1rem; border-radius: 16px; background: #FFFFFF; box-shadow: var(--schatten); line-height: 1.1; }
.kj-zahl-chip strong { font-size: clamp(1.6rem, 3.5vw, 2.2rem); font-weight: 800; letter-spacing: -0.03em; color: var(--anthrazit); }
.kj-zahl-chip span { font-size: 0.85rem; color: var(--grau); font-weight: 600; }
.kj-zahl-chip--1 { left: 6%; top: 8%; }
.kj-zahl-chip--2 { right: 6%; top: 22%; }
@media (prefers-reduced-motion: no-preference) {
	.kj-sonne__strahlen line { animation: kj-strahl 4.8s ease-in-out infinite; }
	.kj-zahl-chip { animation: kj-schweben 6s ease-in-out infinite; }
	.kj-zahl-chip--2 { animation-delay: -3s; }
}
@keyframes kj-strahl { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes kj-schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (max-width: 781px) { .kj-held > .wp-block-columns { flex-direction: column; } }

/* Laufband */
.kj-laufband { overflow: hidden; padding-block: 0.95rem; }
.kj-laufband ul { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; animation: kj-lauf 48s linear infinite; }
.kj-laufband li { display: flex; align-items: center; gap: 1.5rem; padding-right: 1.5rem; white-space: nowrap; font-weight: 700; font-size: clamp(1.2rem, 3vw, 1.7rem); letter-spacing: -0.01em; }
.kj-laufband li::after { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--anthrazit); }
.kj-laufband:hover ul { animation-play-state: paused; }
@keyframes kj-lauf { to { transform: translateX(-50%); } }

/* ===================== Abschnitte ===================== */
.kj-abschnitt { position: relative; overflow: hidden; padding-block: clamp(4rem, 9vw, 7rem); }
.kj-abschnitt h2 { margin: 0; font-size: clamp(2.3rem, 6.5vw, 4.2rem) !important; max-width: 22ch; }
.kj-abschnitt__text { font-size: clamp(1.08rem, 1.8vw, 1.25rem); line-height: 1.6; max-width: 42rem; opacity: 0.9; }
.kj-abschnitt__text, .kj-abschnitt > .kj-feed, .kj-abschnitt > h2, .kj-abschnitt .wp-block-column > h2 { margin-left: max(0px, calc((100% - 1280px) / 2)) !important; margin-right: auto !important; }
.kj-abschnitt .wp-block-column > h2, .kj-abschnitt .wp-block-column > .kj-abschnitt__text { margin-left: 0 !important; }

/* Säulen */
.kj-werte { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 2.75rem !important; }
@media (min-width: 800px) { .kj-werte { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kj-werte > * { margin: 0 !important; padding: 1.75rem !important; border-radius: var(--rund); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-top: 4px solid var(--orange); transition: transform 0.3s, background-color 0.3s; }
.kj-werte > *:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.08); }
.kj-werte > * > * { margin: 0 !important; }
.kj-werte > * > * + * { margin-top: 0.6rem !important; }
.kj-werte h3 { font-size: 1.5rem !important; }
.kj-werte p { opacity: 0.8; line-height: 1.55; }
.kj-nummer { display: block; font-weight: 800; font-size: 0.85rem; letter-spacing: 0.1em; color: var(--orange); }

/* Zahlen */
.kj-zahlen { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 2.5rem !important; }
@media (min-width: 760px) { .kj-zahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kj-zahlen > * { margin: 0 !important; padding: 1.75rem !important; border-radius: var(--rund); background: #FFFFFF; box-shadow: var(--schatten); }
.kj-zahlen > * > * { margin: 0 !important; }
.kj-zahlen__wert { font-weight: 800; font-size: clamp(3rem, 8vw, 4.6rem); line-height: 1; letter-spacing: -0.04em; color: var(--orange-dunkel); }
.kj-zahlen__text { margin-top: 0.5rem !important; font-weight: 600; font-size: 1.05rem; }

/* Wofür wir stehen */
.kj-karten { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 2.5rem !important; }
@media (min-width: 700px) { .kj-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .kj-karten { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kj-karten > * { margin: 0 !important; padding: 1.6rem !important; display: flex; flex-direction: column; gap: 0.75rem; border-radius: var(--rund); background: #FFFFFF; border: 1px solid var(--linie); transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s; }
.kj-karten > * > * { margin: 0 !important; }
.kj-karten > *:hover { transform: translateY(-4px); box-shadow: var(--schatten); border-color: var(--orange); }
.kj-karten h3 { font-size: 1.4rem !important; }
.kj-karten p { color: var(--grau); line-height: 1.55; }
.kj-icon { width: 3.25rem; height: 3.25rem; display: grid; place-items: center; border-radius: 14px; background: var(--sand); }
.kj-icon svg { width: 52%; height: 52%; }

/* Mitglied werden */
.kj-mitglied .wp-block-columns { margin: 0; gap: 2rem; }
.kj-wege { display: grid; gap: 0.75rem; margin: 0 !important; }
.kj-wege > * { margin: 0 !important; padding: 1.1rem 1.3rem !important; border-radius: 16px; background: rgba(255, 255, 255, 0.5); }
.kj-wege > * > * { margin: 0 !important; }
.kj-wege h3 { font-size: 1.2rem !important; margin-bottom: 0.25rem !important; }

/* ===================== Termine ===================== */
.kj-termine { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 900px) { .kj-termine { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .kj-termine { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kj-termin { position: relative; display: flex; flex-direction: column; gap: 0.9rem; padding: 1.5rem; border-radius: var(--rund); box-shadow: var(--schatten); transition: transform 0.25s; }
.kj-termin:hover { transform: translateY(-4px); }
.kj-termin--anthrazit { background: var(--anthrazit); color: #FFFFFF; }
.kj-termin--orange { background: var(--orange); color: var(--anthrazit); }
.kj-termin--hell { background: #FFFFFF; color: var(--anthrazit); border: 1px solid var(--linie); }
.kj-termin.ist-vorbei { opacity: 0.6; }
.kj-termin__kopf { position: absolute; top: 1.25rem; right: 1.25rem; display: flex; gap: 0.4rem; }
.kj-termin__kopf .kj-pill { background: var(--sand); color: var(--orange-dunkel); }
.kj-termin--anthrazit .kj-termin__kopf .kj-pill { background: rgba(255, 139, 58, 0.18); color: var(--orange); }
.kj-termin--orange .kj-termin__kopf .kj-pill { background: rgba(255, 255, 255, 0.5); color: var(--anthrazit); }
.kj-termin__buehne { display: flex; align-items: center; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid currentColor; border-bottom-color: rgba(127, 127, 127, 0.3); }
.kj-termin__datum { display: flex; flex-direction: column; line-height: 1; }
.kj-termin__tag { font-weight: 700; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.75; }
.kj-termin__zahl { font-weight: 800; font-size: clamp(3.2rem, 8vw, 4.2rem); letter-spacing: -0.05em; line-height: 0.95; }
.kj-termin--anthrazit .kj-termin__zahl, .kj-termin--hell .kj-termin__zahl { color: var(--orange); }
.kj-termin--hell .kj-termin__zahl { color: var(--orange-dunkel); }
.kj-termin__monat { font-weight: 700; font-size: 1rem; }
.kj-termin__foto { width: 5rem; aspect-ratio: 1; margin-left: auto; border-radius: 50%; overflow: hidden; }
.kj-termin__foto img { width: 100%; height: 100%; object-fit: cover; }
.kj-termin__name small { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.75; }
.kj-termin__titel { margin: 0.25rem 0 0 !important; font-size: clamp(1.45rem, 2.2vw, 1.85rem) !important; line-height: 1.08 !important; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.kj-termin__titel a { color: inherit; text-decoration: none; }
.kj-termin__titel a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.15em; }
.kj-termin__titel em { font-style: normal; }
.kj-termin__unter { margin: 0 !important; font-size: 0.98rem; line-height: 1.45; opacity: 0.85; }
.kj-termin__infos { display: grid; grid-template-columns: 1fr; gap: 0.5rem; }
.kj-termin__infos > div { display: flex; flex-direction: column; padding: 0.7rem 0.9rem; border-radius: 12px; background: rgba(127, 127, 127, 0.1); }
.kj-termin__infos .kj-mono { font-size: 0.66rem; opacity: 0.75; }
.kj-termin__infos strong { font-weight: 700; }
.kj-termin__aktion { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.25rem 0 0 !important; }
.kj-termin--orange .kj-knopf:not(.kj-knopf--rand) { background: var(--anthrazit); border-color: var(--anthrazit); color: #FFFFFF; }
.kj-termin--anthrazit .kj-knopf--rand:hover { color: var(--anthrazit); }
.kj-termin__plaetze { margin: 0 !important; }
.kj-termin--gross { max-width: 46rem; margin-inline: auto; }
.kj-termin--gross .kj-termin__titel { font-size: clamp(2.2rem, 6vw, 3.4rem) !important; }
.kj-knopf--aus { background: transparent !important; color: inherit !important; border-color: currentColor !important; opacity: 0.7; cursor: default; }

/* ===================== Formulare ===================== */
.kj-anmeldung { max-width: 46rem; margin: 3rem auto 0; padding: clamp(1.5rem, 5vw, 2.5rem); border-radius: 24px; background: #FFFFFF; color: var(--anthrazit); box-shadow: var(--schatten); border-top: 5px solid var(--orange); scroll-margin-top: 6rem; }
.kj-anmeldung--mitmachen { margin-top: 0; }
.kj-anmeldung .kj-mono { margin: 0; color: var(--orange-dunkel); }
.kj-anmeldung h2 { margin: 0.4rem 0 1.4rem !important; font-size: clamp(2.1rem, 6vw, 3rem) !important; }
.kj-formular, .kj-formular * { box-sizing: border-box; }
.kj-formular { display: grid; gap: 1rem; }
.kj-formular p { margin: 0; }
.kj-formular__reihe { display: grid; gap: 1rem; }
.kj-formular__reihe > * { min-width: 0; }
@media (min-width: 640px) { .kj-formular__reihe { grid-template-columns: 1fr 1fr; } }
.kj-formular__feld { display: flex; flex-direction: column; gap: 0.35rem; }
.kj-formular__feld label, .kj-formular legend { font-weight: 600; font-size: 0.95rem; }
.kj-formular__feld label span { font-weight: 400; color: var(--grau); }
.kj-formular input[type="text"], .kj-formular input[type="email"], .kj-formular input[type="tel"], .kj-formular input[type="number"], .kj-formular textarea { width: 100%; min-height: 3.1rem; padding: 0.75rem 1rem; border: 1.5px solid #D5D8DE; border-radius: 12px; background: var(--hell); color: var(--anthrazit); font: 400 1.05rem var(--wp--preset--font-family--bricolage); transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s; }
.kj-formular textarea { min-height: 6rem; resize: vertical; }
.kj-formular input:focus, .kj-formular textarea:focus { outline: none; border-color: var(--orange); background: #FFFFFF; box-shadow: 0 0 0 4px rgba(255, 139, 58, 0.2); }
.kj-formular__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.kj-formular__chips legend { margin-bottom: 0.5rem; padding: 0; }
.kj-chip { position: relative; }
.kj-chip input { position: absolute; opacity: 0; inset: 0; }
.kj-chip span { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0.5rem 1rem; border: 1.5px solid #D5D8DE; border-radius: 999px; font-weight: 600; cursor: pointer; transition: background-color 0.2s, border-color 0.2s; }
.kj-chip input:checked + span { background: var(--orange); border-color: var(--orange); color: var(--anthrazit); }
.kj-chip input:checked + span::before { content: "✓\00a0"; }
.kj-chip input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 2px; }
.kj-formular__check { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: 0.75rem; align-items: start; font-size: 0.96rem; }
.kj-formular__check input { width: 1.3rem; height: 1.3rem; margin-top: 0.1rem; accent-color: var(--orange); }
.kj-formular__check a { color: var(--orange-dunkel); }
.kj-formular__klein { font-size: 0.88rem; color: var(--grau); }
.kj-formular__falle { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kj-anmeldung__erfolg { padding: 1.25rem; border-radius: 14px; background: var(--sand); border-left: 4px solid var(--orange); font-size: 1.08rem; }
.kj-anmeldung__fehler { margin: 0 0 1rem !important; padding: 1rem; border-radius: 12px; background: #FDECEC; border-left: 4px solid #C0392B; font-weight: 600; }
.kj-anmeldung__hinweis { font-size: 1.08rem; }

/* ===================== Nachrichten ===================== */
.kj-beitraege .wp-block-post-template { display: grid !important; grid-template-columns: 1fr; gap: 1.5rem !important; list-style: none; padding: 0; margin: 0; }
@media (min-width: 700px) { .kj-beitraege .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1050px) { .kj-beitraege .wp-block-post-template { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kj-beitraege .wp-block-post { display: flex; flex-direction: column; gap: 0.7rem; margin: 0; padding: 0 0 1.25rem; border-radius: var(--rund); background: #FFFFFF; border: 1px solid var(--linie); overflow: hidden; transition: transform 0.25s, box-shadow 0.25s; }
.kj-beitraege .wp-block-post:hover { transform: translateY(-4px); box-shadow: var(--schatten); }
.kj-beitraege .wp-block-post > * { margin: 0 !important; padding-inline: 1.25rem; }
.kj-beitraege .wp-block-post-featured-image { padding: 0 !important; overflow: hidden; }
.kj-beitraege .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
.kj-beitraege .wp-block-post:hover .wp-block-post-featured-image img { transform: scale(1.03); }
.kj-beitraege .wp-block-post > .wp-block-group { padding-top: 0.5rem; }
.kj-beitraege .wp-block-post-title { font-size: 1.35rem !important; line-height: 1.15; }
.kj-beitraege .wp-block-post-title a:hover { color: var(--orange-dunkel); }
.kj-beitraege .wp-block-post-date { font-size: 0.85rem; color: var(--grau); }
.kj-beitraege .wp-block-post-terms a { font-weight: 700; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange-dunkel); text-decoration: none; }
.kj-beitraege .wp-block-post-excerpt { color: var(--grau); font-size: 0.98rem; }
.kj-beitraege .wp-block-post-excerpt__more-link { display: none; }
.kj-beitraege .wp-block-query-pagination { margin-top: 2rem; font-weight: 600; }

/* Kontakt und Teilen */
.kj-kontaktleiste, .kj-teilen__knoepfe { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.has-anthrazit-background-color .kj-knopf--rand { color: #FFFFFF; }
.kj-teilen { margin-top: 2rem; }
.kj-teilen .kj-mono { margin-bottom: 0.6rem; opacity: 0.75; }
.kj-teilen .kj-knopf, .kj-kontaktleiste .kj-knopf { min-height: 2.7rem; padding: 0.5rem 1.05rem; font-size: 0.95rem; }

/* ===================== Unterseiten ===================== */
.kj-seitenkopf { position: relative; overflow: hidden; padding-block: clamp(3rem, 8vw, 5.5rem); }
.kj-seitenkopf h1 { margin: 0; font-size: clamp(2.6rem, 8vw, 5rem) !important; }
.kj-seitenkopf p:not(.is-style-kicker) { max-width: 42rem; font-size: clamp(1.08rem, 2vw, 1.3rem); line-height: 1.55; margin: 1.1rem auto 0 max(0px, calc((100% - 1280px) / 2)) !important; opacity: 0.9; }
.kj-seitenkopf__stern { position: absolute !important; right: -6rem; bottom: -12rem; width: clamp(16rem, 34vw, 26rem); aspect-ratio: 1; margin: 0 !important; border-radius: 50%; background: repeating-conic-gradient(from 270deg, var(--orange) 0deg 3deg, transparent 3deg 10deg); -webkit-mask: radial-gradient(circle, transparent 38%, #000 39%, #000 70%, transparent 71%); mask: radial-gradient(circle, transparent 38%, #000 39%, #000 70%, transparent 71%); opacity: 0.55; pointer-events: none; z-index: 0; }
.kj-seitenkopf > * { position: relative; z-index: 1; }
.kj-unternav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem !important; }
.kj-unternav a { display: inline-flex; padding: 0.5rem 1rem; border-radius: 999px; background: #FFFFFF; color: var(--anthrazit); font-weight: 600; text-decoration: none; box-shadow: var(--schatten); }
.kj-unternav a:hover { background: var(--orange); }
.kj-text { padding-block: clamp(2.5rem, 7vw, 5rem); }
.kj-text > * + * { margin-top: 1.2rem; }
.kj-text h2 { font-size: clamp(1.8rem, 4.5vw, 2.6rem) !important; margin-top: 2.75rem !important; }
.kj-text p, .kj-text li { font-size: 1.1rem; line-height: 1.65; }
.kj-text li::marker { color: var(--orange); }
.kj-text a { color: var(--orange-dunkel); }
.kj-text blockquote, .kj-beitrag__text blockquote { margin: 2.5rem 0; padding: 1.25rem 0 1.25rem 1.5rem; border: 0; border-left: 5px solid var(--orange); }
.kj-text blockquote p, .kj-beitrag__text blockquote p { font-weight: 700; font-size: clamp(1.5rem, 3.5vw, 2.1rem); line-height: 1.2; letter-spacing: -0.02em; }
.kj-platzhalter { padding: 1rem 1.25rem; border: 2px dashed var(--orange); border-radius: 14px; background: var(--sand); font-weight: 600; }
.kj-vorstand { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.5rem !important; }
@media (min-width: 640px) { .kj-vorstand { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .kj-vorstand { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kj-vorstand > * { margin: 0 !important; padding: 1.4rem !important; border-radius: var(--rund); background: #FFFFFF; border: 1px solid var(--linie); }
.kj-vorstand > * > * { margin: 0 !important; }
.kj-vorstand .kj-avatar { width: 3.5rem; height: 3.5rem; display: grid; place-items: center; margin-bottom: 0.9rem !important; border-radius: 50%; background: var(--orange); color: var(--anthrazit); font-weight: 800; font-size: 1.2rem; }
.kj-vorstand h3 { font-size: 1.25rem !important; }
.kj-vorstand p { color: var(--orange-dunkel); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 0.3rem !important; }
.kj-beitrag__kopf h1 { font-size: clamp(2.2rem, 6vw, 4rem) !important; }
.kj-beitrag__bild img { border-radius: 24px; box-shadow: var(--schatten); }
.kj-beitrag__meta { gap: 0.5rem 1rem !important; font-size: 0.9rem; font-weight: 600; }
.kj-beitrag__meta > * { margin: 0 !important; }
.kj-beitrag__meta a { color: var(--orange-dunkel); text-decoration: none; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; font-weight: 700; }
.kj-beitrag__text figure.wp-block-image img { border-radius: 18px; }

/* ===================== Fuß ===================== */
.kj-fuss { padding-block: clamp(3.5rem, 8vw, 5rem) 2rem; }
.kj-fuss a { text-decoration: none; }
.kj-fuss a:hover { color: var(--orange); }
.kj-fuss .kj-logo img { height: 70px !important; }
.kj-fuss__titel { font-weight: 700 !important; font-size: 0.78rem !important; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange); margin-bottom: 0.6rem !important; }
.kj-fuss p { line-height: 1.8; opacity: 0.88; }
.kj-fuss .kj-knopf { margin-top: 0.4rem; }
.kj-fuss__unten { margin-top: 2.5rem !important; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.88rem; }
.kj-fuss__unten p { margin: 0; opacity: 0.7; }

/* Hinweis, Erscheinen, Bewegung */
.kj-toast { position: fixed; left: 50%; bottom: 1.5rem; z-index: 100; transform: translate(-50%, 1rem); padding: 0.85rem 1.2rem; border-radius: 999px; background: var(--anthrazit); color: #FFFFFF; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s; }
.kj-toast.an { opacity: 1; transform: translate(-50%, 0); }
.kj-js .kj-auf { opacity: 0; transform: translateY(1.5rem); transition: opacity 0.7s, transform 0.7s cubic-bezier(0.2, 0.75, 0.15, 1); }
.kj-js .kj-auf.ist-da { opacity: 1; transform: none; }
.editor-styles-wrapper .kj-kopf { position: relative; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .kj-js .kj-auf { opacity: 1; transform: none; } }

/* ===================== Mitgliedsantrag ===================== */
.kj-antrag { max-width: none; margin: 0; }
.kj-antrag__teil { margin: 0; padding: 1.25rem 0 0.5rem; border: 0; border-top: 1px solid var(--linie); display: grid; gap: 1rem; min-width: 0; }
.kj-antrag__teil legend { padding: 0 0 0.5rem; font-weight: 700; font-size: 1.1rem; color: var(--orange-dunkel); }
.kj-antrag input[type="date"] { width: 100%; min-height: 3.1rem; padding: 0.75rem 1rem; border: 1.5px solid #D5D8DE; border-radius: 12px; background: var(--hell); color: var(--anthrazit); font: 400 1.05rem var(--wp--preset--font-family--bricolage); }
.kj-antrag input[type="date"]:focus { outline: none; border-color: var(--orange); background: #FFFFFF; box-shadow: 0 0 0 4px rgba(255, 139, 58, 0.2); }
@media (min-width: 640px) { .kj-formular__reihe--plz { grid-template-columns: 0.4fr 1fr; } }
.kj-js .kj-antrag__eltern[hidden] { display: none; }
.kj-antrag-seite .wp-block-columns { gap: 2.5rem; }
.kj-antrag-seite h3 { font-size: 1.25rem !important; margin-top: 1.5rem !important; }
.kj-antrag-seite ol, .kj-antrag-seite ul { padding-left: 1.2rem; }
.kj-antrag-seite a { color: var(--orange-dunkel); }

/* ===================== Fotos ===================== */
.kj-held--foto { padding-block: clamp(6rem, 12vw, 9rem) clamp(2.5rem, 6vw, 4rem) !important; color: #FFFFFF; }
.kj-held--foto::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(28, 31, 38, 0) 30%, rgba(28, 31, 38, 0.55) 62%, rgba(28, 31, 38, 0.9) 100%); }
.kj-held--foto .wp-block-cover__inner-container { position: relative; z-index: 2; }
.kj-held--foto .kj-held__titel { color: #FFFFFF; font-size: clamp(3rem, 9vw, 6.5rem) !important; max-width: 14ch; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.25); }
.kj-held--foto .kj-held__unter { color: rgba(255, 255, 255, 0.9); max-width: 36rem; }
.kj-held--foto .is-style-kicker { color: var(--orange); }
.kj-held--foto .wp-block-button.is-style-rand .wp-block-button__link { color: #FFFFFF !important; }
.kj-held__chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2.5rem !important; }
.kj-held__chips span { display: inline-flex; align-items: baseline; gap: 0.4rem; padding: 0.55rem 1rem; border-radius: 999px; background: rgba(255, 255, 255, 0.14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.22); color: #FFFFFF; font-size: 0.92rem; font-weight: 600; }
.kj-held__chips strong { font-size: 1.15rem; font-weight: 800; color: var(--orange); }
@media (prefers-reduced-motion: no-preference) { .kj-held--foto img.wp-block-cover__image-background { animation: kj-zoom 18s ease-out both; } }
@keyframes kj-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }

.kj-foto-rund img { border-radius: 24px; width: 100%; height: auto; box-shadow: var(--schatten); }
.kj-foto-rund figcaption { margin-top: 0.6rem; font-size: 0.9rem; opacity: 0.75; }
.kj-foto-hoch img { border-radius: 24px; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; box-shadow: 0 20px 40px -18px rgba(28, 31, 38, 0.45); transform: rotate(2deg); }
.kj-abschnitt > .wp-block-columns { margin: 0 0 1rem; gap: clamp(2rem, 5vw, 4rem); }
.kj-abschnitt .wp-block-column > h2 { max-width: 18ch; }

/* Galerie */
.kj-galerie { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 9rem; gap: 0.75rem; margin-top: 2.5rem !important; }
@media (min-width: 800px) { .kj-galerie { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 12rem; } }
.kj-galerie > figure { position: relative; margin: 0 !important; overflow: hidden; border-radius: 18px; }
.kj-galerie > figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.2, 0.75, 0.15, 1); }
.kj-galerie > figure:hover img { transform: scale(1.05); }
.kj-galerie figcaption { position: absolute; left: 0.75rem; bottom: 0.75rem; margin: 0 !important; padding: 0.35rem 0.8rem; border-radius: 999px; background: rgba(28, 31, 38, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #FFFFFF; font-size: 0.8rem; font-weight: 600; }
.kj-galerie > figure:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.kj-galerie > figure:nth-child(2) { grid-row: span 2; }
.kj-galerie > figure:nth-child(4) { grid-column: span 2; grid-row: span 2; }
@media (max-width: 799px) { .kj-galerie > figure:nth-child(2) { grid-row: span 2; } .kj-galerie > figure:nth-child(4) { grid-column: span 2; } }

/* Zahlen auf Foto */
.kj-zahlen-foto { padding-block: clamp(4rem, 9vw, 7rem) !important; color: #FFFFFF; }
.kj-zahlen-foto h2 { color: #FFFFFF; font-size: clamp(2.3rem, 6.5vw, 4.2rem) !important; margin: 0 !important; }
.kj-zahlen-foto .is-style-kicker { color: var(--orange); }
.kj-zahlen-foto .kj-zahlen > * { background: rgba(255, 255, 255, 0.1); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: none; }
.kj-zahlen-foto .kj-zahlen__wert { color: var(--orange); }
.kj-zahlen-foto .kj-zahlen__text { color: #FFFFFF; }
.kj-held--foto .wp-block-cover__inner-container { z-index: 2 !important; }
.kj-held--foto, .kj-zahlen-foto { padding-inline: clamp(1.25rem, 5vw, 4rem) !important; }
.kj-held--foto .wp-block-cover__inner-container, .kj-zahlen-foto .wp-block-cover__inner-container { width: 100%; max-width: 1280px; margin-inline: auto; }
.kj-held--foto .wp-block-cover__inner-container > *, .kj-zahlen-foto .wp-block-cover__inner-container > * { margin-left: 0 !important; }
.kj-galerie { grid-auto-rows: 7.5rem; }
@media (min-width: 800px) { .kj-galerie { grid-auto-rows: 10.5rem; } }
.kj-galerie > figure:nth-child(n) { grid-column: span 1; grid-row: span 2; }
.kj-galerie > figure:nth-child(1), .kj-galerie > figure:nth-child(4) { grid-column: span 2; grid-row: span 2; }

/* ===================== 3D-Karte ===================== */
.kj-karte { position: relative; margin: 0 !important; pointer-events: none; }
.kj-karte canvas { display: block; width: 100%; height: 100%; }
.kj-held--foto > .kj-karte { position: absolute; z-index: 2; top: 4.5rem; right: 0; bottom: 0; width: min(58%, 880px); background: radial-gradient(closest-side, rgba(28, 31, 38, 0.55), rgba(28, 31, 38, 0) 85%); }
.kj-held--foto .wp-block-cover__inner-container { z-index: 3 !important; }
.kj-karte__label { position: absolute; right: 8%; bottom: 10%; margin: 0; padding: 0.35rem 0.8rem; border-radius: 999px; background: rgba(28, 31, 38, 0.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #FFFFFF; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.kj-karte__label::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.5rem; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 0 rgba(255, 139, 58, 0.6); animation: kj-punkt 2s infinite; vertical-align: 0.05em; }
@keyframes kj-punkt { 70% { box-shadow: 0 0 0 0.6rem rgba(255, 139, 58, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 139, 58, 0); } }
@media (max-width: 781px) {
	.kj-held--foto > .kj-karte { top: 3.5rem; bottom: auto; left: 0; width: 100%; height: 50%; opacity: 0.55; }
	.kj-karte__label { display: none; }
}
.kj-karte--gross { aspect-ratio: 1 / 1; max-height: 620px; }
.kj-netzwerk .wp-block-columns { margin: 0; }

/* ===================== 3D-Kippen und Erscheinen ===================== */
.kj-kipp { transform-style: preserve-3d; will-change: transform; transition: transform 0.45s cubic-bezier(0.2, 0.75, 0.15, 1), box-shadow 0.45s; position: relative; }
.kj-kipp.kippt { transition: transform 0.08s linear, box-shadow 0.3s; }
.kj-kipp::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at var(--kj-gx, 50%) var(--kj-gy, 50%), rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 55%); opacity: 0; transition: opacity 0.3s; z-index: 2; }
.kj-kipp.kippt::after { opacity: 1; }
.kj-js .kj-auf { opacity: 0; transform: perspective(1000px) rotateX(16deg) translateY(2.5rem); transform-origin: 50% 100%; transition: opacity 0.9s, transform 0.9s cubic-bezier(0.2, 0.75, 0.15, 1); }
.kj-js .kj-auf.ist-da { opacity: 1; transform: none; }
.kj-js .kj-auf-gruppe > * { opacity: 0; transform: perspective(1000px) rotateX(18deg) rotateY(-6deg) translateY(2.5rem); transition: opacity 0.8s, transform 0.9s cubic-bezier(0.2, 0.75, 0.15, 1); }
.kj-js .kj-auf-gruppe.ist-da > * { opacity: 1; transform: none; }
.kj-js .kj-auf-gruppe.ist-da > *:nth-child(2) { transition-delay: 0.08s; } .kj-js .kj-auf-gruppe.ist-da > *:nth-child(3) { transition-delay: 0.16s; } .kj-js .kj-auf-gruppe.ist-da > *:nth-child(4) { transition-delay: 0.24s; } .kj-js .kj-auf-gruppe.ist-da > *:nth-child(5) { transition-delay: 0.32s; } .kj-js .kj-auf-gruppe.ist-da > *:nth-child(6) { transition-delay: 0.4s; }
.kj-galerie > figure.kj-kipp { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .kj-js .kj-auf-gruppe > * { opacity: 1; transform: none; } }