/* Karneval Impekoven — WordPress-Anpassungen zum Design System.
   Nur Variablen aus tokens.css; Komponenten selbst stehen in bundle.css. */

/* ---------- Gerüst ---------- */
.ki-part { display: contents; } /* Template-Part-Wrapper darf das Sticky des Headers nicht einsperren */
.wp-site-blocks > * + * { margin-block-start: 0; }
.ki-main { margin: 0; }
.ki-main > * { margin-block: 0; }
.admin-bar .ki-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .ki-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .ki-header { top: 0; } }

/* ---------- Header: Navigation im eigenen <nav> ---------- */
.ki-header__nav { margin-left: auto; }
.ki-header__nav .ki-nav { margin: 0; }
@media (max-width: 900px) { .ki-header__nav { display: none; } }

/* ---------- Mobile-Menü als Overlay ---------- */
.ki-menu-overlay { position: fixed; inset: 0; z-index: 100; overflow-y: auto; background: var(--nacht); }
.ki-menu-overlay[hidden] { display: none; }
.ki-menu-overlay .ki-menu { min-height: 100%; }
.ki-menu__brand { color: var(--on-nacht); }
html.ki-menu-open { overflow: hidden; }
@media (max-width: 420px) { .ki .ki-menu__list a { font-size: 52px; } }

/* ---------- Startseite ---------- */
.ki-termine__hinweis { margin-top: var(--space-8); }
/* Termin-Sticker mobil: bundle.css verkleinert nur Kreis und große Zeile – Unter-/Oberzeile mitziehen */
@media (max-width: 900px) {
	.ki-hero__sticker .ki-sticker { width: 116px; height: 116px; }
	.ki-hero__sticker .ki-sticker__top { font-size: 9px; letter-spacing: .08em; }
	.ki-hero__sticker .ki-sticker__big { font-size: 30px; }
	.ki-hero__sticker .ki-sticker__sub { font-size: 14px; }
}
.ki-hero > .ki-placeholder.ki-hero__img { min-height: 0; }

/* ---------- Seitenkopf: lange Titel (Beiträge) eine Stufe kleiner ---------- */
/* Größe an der Breite festmachen statt Wörter zu trennen: „Familienfrühschoppen“ bleibt ein Wort. */
.ki-pagehead__title { hyphens: manual; text-wrap: balance; }
.ki-pagehead--lang .ki-pagehead__title { font-size: clamp(40px, 7.4vw, 112px); line-height: .88; max-width: 18ch; }
@media (max-width: 760px) { .ki-pagehead--lang .ki-pagehead__title { font-size: 8.6vw; max-width: none; } } /* 20 Zeichen passen in 343 px */
.ki-pagehead__crumbs [aria-current] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Inhalt von Seiten und Beiträgen ---------- */
.ki-page { padding: var(--space-16) 0 var(--space-24); }
.ki-prose { padding-inline: var(--space-8); }
.ki-page > .ki-backlink { max-width: var(--content-max); margin: var(--space-12) auto 0; padding-inline: var(--space-8); }
@media (max-width: 640px) {
	.ki-page { padding: var(--space-12) 0 var(--space-16); }
	.ki-prose, .ki-page > .ki-backlink { padding-inline: var(--space-4); }
}
.ki-prose > * + * { margin-block-start: var(--space-6); }
.ki-prose > :first-child { margin-block-start: 0; }
.ki-prose :where(p, li) { max-width: 68ch; }
.ki-prose > p:first-child { font-size: 21px; line-height: 1.5; font-weight: 500; }
.ki-prose :where(h2) { margin-block-start: var(--space-12); font-family: var(--font-display); font-stretch: 72%; font-weight: 800; font-size: 44px; line-height: 1; text-transform: uppercase; }
.ki-prose :where(h3) { margin-block-start: var(--space-8); font-family: var(--font-display); font-stretch: 80%; font-weight: 800; font-size: 28px; line-height: 1.1; }
.ki-prose :where(h2, h3) { hyphens: auto; overflow-wrap: break-word; }
@media (max-width: 640px) { .ki-prose :where(h2) { font-size: 34px; } .ki-prose :where(h3) { font-size: 24px; } }
.ki-prose :where(p, li, td, a) { overflow-wrap: break-word; }
.ki-prose :where(h4, h5, h6) { margin-block-start: var(--space-6); font: 800 15px/1.3 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--rot); }
.ki-prose :where(ul, ol) { padding-left: 1.3em; }
.ki-prose :where(li + li) { margin-top: var(--space-2); }
.ki-prose :where(li)::marker { color: var(--rot); }
.ki-prose :where(strong, b) { font-weight: 800; }
.ki-prose img { height: auto; border-radius: var(--radius-md); }
.ki-prose :where(figcaption) { margin-top: var(--space-2); font-size: 15px; color: var(--ink-muted); }
.ki-prose :where(table) { width: 100%; border-collapse: collapse; font-size: 16px; }
.ki-prose :where(th, td) { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.ki-prose :where(th) { font: 800 13px/1.2 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; }
.ki-prose :where(blockquote):not(.is-style-ki-motto) { padding-left: var(--space-6); border-left: 6px solid var(--gelb); font-family: var(--font-serif); font-style: italic; font-size: 26px; line-height: 1.25; }
.ki-prose :where(hr) { border: 0; border-top: 2px solid var(--line); }
.ki-prose .wp-block-file { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-6); border-radius: var(--radius-md); background: var(--gelb-soft); }
.ki-prose .wp-block-file > a:first-child { font-weight: 800; }
.ki-prose .wp-block-file__button { margin: 0 0 0 auto; }
.ki-prose .wp-block-embed iframe { width: 100%; border-radius: var(--radius-md); }

/* ---------- Block-Styles ---------- */
/* Buttons: jeder Button-Block sieht aus wie ki-btn, Standard = Rot. */
.ki .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 52px; padding: var(--space-3) 26px; border-radius: var(--radius-pill); border: 2px solid transparent; background: var(--rot); color: var(--on-rot); font: 800 15px/1.2 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; box-shadow: 0 10px 24px -10px var(--rot); transition: transform var(--dauer-kurz) var(--ease-pop), background var(--dauer-kurz), box-shadow var(--dauer-kurz); }
.ki .wp-block-button__link:hover { transform: translateY(-2px); background: var(--rot-strong); color: var(--on-rot); }
.ki .wp-block-button__link:active { transform: translateY(1px) scale(.98); }
.ki .is-style-ki-gelb .wp-block-button__link { background: var(--gelb); color: var(--nacht-fix); border-color: var(--nacht-fix); box-shadow: var(--shadow-sticker); }
.ki .is-style-ki-gelb .wp-block-button__link:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--nacht-fix); background: var(--gelb); color: var(--nacht-fix); }
.ki .is-style-ki-outline .wp-block-button__link { background: transparent; color: var(--ink); border-color: var(--line-strong); box-shadow: none; }
.ki .is-style-ki-outline .wp-block-button__link:hover { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.ki .is-style-ki-light .wp-block-button__link { background: transparent; color: var(--on-nacht); border-color: var(--on-dark-border); box-shadow: none; }
.ki .is-style-ki-light .wp-block-button__link:hover { background: var(--on-nacht); color: var(--nacht-fix); }
@media (prefers-reduced-motion: reduce) { .ki .wp-block-button__link { transition: none; } .ki .wp-block-button__link:hover { transform: none; } }

/* Hinweis (Absatz) */
.ki p.is-style-ki-notice, .ki p.is-style-ki-notice-soft { padding: var(--space-4) var(--space-6); font-weight: 700; }
.ki p.is-style-ki-notice { border-radius: var(--radius-pill); background: var(--nacht); color: var(--on-nacht); }
.ki p.is-style-ki-notice a { color: var(--gelb); }
.ki p.is-style-ki-notice-soft { border-radius: var(--radius-md); background: var(--gelb-soft); color: var(--ink); }

/* Funken-Streifen (Trenner) */
.ki hr.is-style-ki-stripes { height: 16px; border: 0; background: repeating-linear-gradient(-45deg, var(--rot) 0 var(--stripe-width), var(--streifen-hell) var(--stripe-width) calc(var(--stripe-width) * 2)); opacity: 1; }

/* Motto (Zitat) */
.ki .wp-block-quote.is-style-ki-motto { position: relative; margin-inline: 0; padding: var(--space-16) var(--space-12); border: 0; border-radius: var(--radius-lg); background: var(--rosa); color: var(--ink); overflow: hidden; }
.ki .wp-block-quote.is-style-ki-motto p { font-family: var(--font-serif); font-style: italic; font-size: 44px; line-height: 1.1; max-width: 22ch; }
.ki .wp-block-quote.is-style-ki-motto cite { display: block; margin-top: var(--space-6); font: 800 13px/1.2 var(--font-sans); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--rot-strong); }
@media (max-width: 760px) { .ki .wp-block-quote.is-style-ki-motto { padding: var(--space-12) var(--space-6); } .ki .wp-block-quote.is-style-ki-motto p { font-size: 32px; } }

/* Galerie: Mosaik mit runden Ecken und sanftem Zoom */
.ki .wp-block-gallery img { border-radius: var(--radius-md); }
.ki .wp-block-gallery.is-style-ki-gallery figure.wp-block-image { overflow: hidden; border-radius: var(--radius-md); }
.ki .wp-block-gallery.is-style-ki-gallery figure.wp-block-image img { transition: transform var(--dauer-lang) var(--ease-out); }
.ki .wp-block-gallery.is-style-ki-gallery figure.wp-block-image:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .ki .wp-block-gallery.is-style-ki-gallery figure.wp-block-image:hover img { transform: none; } }

/* ---------- Gästebuch (Plugin Gwolle GB) im Stil ki-guest / ki-input ---------- */
.ki .gwolle-gb-write-button { margin-bottom: var(--space-8); }
.ki .gwolle-gb-write-button input[type="button"],
.ki .gwolle-gb-write .gwolle_gb_submit,
.ki .gwolle-gb-write .gwolle_gb_preview { min-height: 52px; padding: var(--space-3) 26px; border-radius: var(--radius-pill); border: 2px solid transparent; background: var(--rot); color: var(--on-rot); font: 800 15px/1.2 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; box-shadow: 0 10px 24px -10px var(--rot); transition: transform var(--dauer-kurz) var(--ease-pop), background var(--dauer-kurz); }
.ki .gwolle-gb-write-button input[type="button"]:hover, .ki .gwolle-gb-write .gwolle_gb_submit:hover { transform: translateY(-2px); background: var(--rot-strong); }
.ki .gwolle-gb-write .gwolle_gb_preview { background: transparent; color: var(--ink); border-color: var(--line-strong); box-shadow: none; }
.ki .gwolle-gb-write { margin-bottom: var(--space-12); padding: var(--space-8); border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-card); }
.ki .gwolle-gb-write label { font: 800 13px/1.2 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.ki .gwolle-gb-write :where(input[type="text"], input[type="email"], input[type="url"], textarea) { width: 100%; min-height: 52px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); border: 2px solid var(--line-strong); background: var(--surface-raised); color: var(--ink); font: 400 17px/1.4 var(--font-sans); }
.ki .gwolle-gb-write textarea { min-height: 130px; resize: vertical; }
.ki .gwolle-gb-write :where(input, textarea):focus { outline: none; border-color: var(--ink); box-shadow: 4px 4px 0 var(--gelb); }
.ki .gwolle-gb-total { margin-bottom: var(--space-6); font: 800 14px/1.2 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--rot); }
.ki .gwolle-gb-read { display: grid; gap: var(--space-6); }
.ki .gb-entry { position: relative; padding: var(--space-6); border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-card); }
.ki .gb-entry.gwolle-gb-first { background: var(--rosa); box-shadow: none; transform: rotate(-.6deg); }
.ki .gb-entry .gb-author-info { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-3); margin-bottom: var(--space-3); }
.ki .gb-entry .gb-author-info br { display: none; }
.ki .gb-entry .gb-author-name { font-weight: 800; font-size: 15px; }
.ki .gb-entry .gb-datetime { font-size: 13px; color: var(--ink-muted); }
.ki .gb-entry .gb-entry-content { font-family: var(--font-serif); font-style: italic; font-size: 22px; line-height: 1.3; overflow-wrap: break-word; }
.ki .gb-entry .gb-entry-admin_reply { margin-top: var(--space-4); padding: var(--space-4) var(--space-6); border-radius: var(--radius-md); background: var(--gelb-soft); font-family: var(--font-sans); font-style: normal; font-size: 16px; line-height: 1.6; }
.ki .gb-entry .gb-admin-reply-uid { display: block; margin-bottom: var(--space-2); font: 800 12px/1.2 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--rot-strong); }
.ki .gb-entry .gb-metabox-handle { position: absolute; top: var(--space-4); right: var(--space-4); border: 0; background: transparent; color: var(--ink-muted); cursor: pointer; }
.ki .page-navigation { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-6) 0; }
.ki .gwolle-gb .page-navigation :where(a, .page-numbers) { display: inline-flex; align-items: center; min-height: 40px; padding: var(--space-2) 16px; border-radius: var(--radius-pill); border: 2px solid var(--line-strong); background: transparent; color: var(--ink); font-weight: 800; text-decoration: none; }
.ki .gwolle-gb .page-navigation .current { background: var(--nacht); border-color: var(--nacht); color: var(--on-nacht); }
.ki .gwolle-gb .page-navigation a:hover { background: var(--gelb); border-color: var(--gelb); color: var(--nacht-fix); }
@media (prefers-reduced-motion: reduce) { .ki .gb-entry.gwolle-gb-first { transform: none; } }

/* ---------- Beitragsübersicht ---------- */
.ki-newsgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
@media (max-width: 860px) { .ki-newsgrid { grid-template-columns: minmax(0, 1fr); } }
.ki-pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-12); padding: 0; list-style: none; }
.ki .ki-pagination li > .page-numbers { display: inline-flex; align-items: center; min-height: 44px; padding: var(--space-2) 18px; border-radius: var(--radius-pill); border: 2px solid var(--line-strong); color: var(--ink); font: 800 14px/1.2 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.ki .ki-pagination li > .page-numbers.current, .ki .ki-pagination li > a.page-numbers:hover { background: var(--nacht); border-color: var(--nacht); color: var(--on-nacht); }
/* Übersicht: der neueste Beitrag führt groß, der Rest folgt zweispaltig (keine Kachelwand) */
.ki-newsgrid > .ki-news--feature { grid-column: 1 / -1; min-height: 460px; }
@media (max-width: 860px) { .ki-newsgrid > .ki-news--feature { min-height: 380px; } }

/* ---------- F3: Platzhalter ohne „Foto“ – der Orden auf Konfetti-Rosa ---------- */
.ki-placeholder--orden { position: relative; display: grid; place-items: center; }
.ki-placeholder--orden img { width: auto; height: 46%; max-height: 120px; padding: 6px; border-radius: var(--radius-md); background: var(--logo-plate); box-shadow: var(--shadow-card); transform: rotate(-4deg); transition: transform var(--dauer-mittel) var(--ease-pop); }
.ki-news:hover .ki-placeholder--orden img { transform: rotate(3deg) scale(1.06); }
.ki-news--feature .ki-placeholder--orden img { height: 34%; max-height: 180px; }

/* ---------- F4: Klickflächen ≥ 44 px ---------- */
.ki .ki-nav a { display: flex; align-items: center; min-height: 44px; }
.ki .ki-btn--sm { min-height: 44px; }
.ki .ki-footer ul { gap: 0; }
.ki .ki-footer li a { display: inline-flex; align-items: center; min-height: 44px; }
.ki .ki-pagehead__crumbs a { display: inline-block; padding-block: 14px; margin-block: -14px; }

/* ---------- F5: Footer-Überschriften als h2, Aussehen wie die h4 der Vorlage ---------- */
.ki .ki-footer__head { font: 800 13px/1.2 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gelb); margin-bottom: var(--space-2); }

/* ---------- F8: Album-Kacheln (Simply Gallery) im Stil der News-Karten ---------- */
.ki .pgcsimplygalleryblock-albums-content { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-6); width: auto !important; }
.ki .pgcsimplygalleryblock-albums-cover { width: auto !important; height: auto !important; aspect-ratio: 4 / 3; transform: none !important; position: relative !important; }
.ki .pgcsimplygalleryblock-albums-main-wrap, .ki .pgcsimplygalleryblock-albums-inner { width: 100% !important; height: 100% !important; inset: auto !important; padding: 0 !important; }
.ki .pgcsimplygalleryblock-albums-cover, .ki .pgcsimplygalleryblock-albums-main-wrap { border-radius: var(--radius-lg) !important; overflow: hidden !important; }
.ki .pgcsimplygalleryblock-albums-inner { position: relative !important; display: block; overflow: hidden; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-card); transition: transform var(--dauer-mittel) var(--ease-pop), box-shadow var(--dauer-mittel); }
.ki .pgcsimplygalleryblock-albums-inner:hover { transform: translateY(-4px) rotate(-.5deg); box-shadow: var(--shadow-lift); }
.ki .pgcsimplygalleryblock-albums-cover, .ki .pgcsimplygalleryblock-albums-main-wrap, .ki .pgcsimplygalleryblock-albums-inner { background: var(--nacht) !important; }
.ki .pgcsimplygalleryblock-albums-inner img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; object-fit: cover; transition: transform var(--dauer-lang) var(--ease-out); }
.ki .pgcsimplygalleryblock-albums-inner:hover img { transform: scale(1.07); }
.ki .pgcsimplygalleryblock-albums-sub-wrap { position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important; display: flex !important; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: var(--space-2); padding: var(--space-6) !important; background: linear-gradient(180deg, var(--overlay-0) 35%, var(--overlay-95) 100%) !important; }
.ki .pgcsimplygalleryblock-albums-title { position: static !important; transform: none !important; font: 900 34px/.9 var(--font-display) !important; font-stretch: 62% !important; text-transform: uppercase; color: var(--on-nacht) !important; text-shadow: none !important; }
.ki .pgcsimplygalleryblock-albums-amount { position: static !important; transform: none !important; padding: 5px 12px !important; border-radius: var(--radius-pill); background: var(--gelb) !important; color: var(--nacht-fix) !important; font: 800 12px/1.2 var(--font-sans) !important; letter-spacing: .1em; text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) { .ki .pgcsimplygalleryblock-albums-inner, .ki .pgcsimplygalleryblock-albums-inner img { transition: none; } .ki .pgcsimplygalleryblock-albums-inner:hover, .ki .pgcsimplygalleryblock-albums-inner:hover img { transform: none; } }

/* ---------- F9: der eine inszenierte Moment – Hero-Auftritt beim Laden ---------- */
@media (prefers-reduced-motion: no-preference) {
	.ki-hero__img { animation: ki-hero-zoom 1800ms var(--ease-out) both; }
	.ki-hero__inner > * { animation: ki-hero-rise var(--dauer-lang) var(--ease-out) both; }
	.ki-hero__inner > :nth-child(2) { animation-delay: 90ms; }
	.ki-hero__inner > :nth-child(3) { animation-delay: 220ms; }
	.ki-hero__inner > :nth-child(4) { animation-delay: 320ms; }
	.ki-hero__title .ki-mark { animation: ki-mark-wipe 560ms var(--ease-out) 420ms both; }
	.ki-hero__sticker { animation: ki-sticker-pop 760ms var(--ease-pop) 640ms both; }
	.ki-pagehead__title { animation: ki-hero-rise var(--dauer-lang) var(--ease-out) both; }
	.ki-pagehead__big { animation: ki-big-drift 1400ms var(--ease-out) both; }
}
@keyframes ki-hero-zoom { from { transform: scale(1.08); } to { transform: none; } }
@keyframes ki-hero-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes ki-mark-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes ki-sticker-pop { from { opacity: 0; transform: scale(.4) rotate(-40deg); } to { opacity: 1; transform: none; } }
@keyframes ki-big-drift { from { opacity: 0; translate: 6% 0; } to { opacity: .35; translate: 0 0; } }

/* ---------- F10: Header wird beim Scrollen kompakt, der Orden hängt nur oben groß ---------- */
.ki-brand__badge img, .ki-header { transition: height var(--dauer-mittel) var(--ease-out), box-shadow var(--dauer-mittel); }
.ki-scrolled .ki-header { box-shadow: var(--shadow-card); }
.ki-scrolled .ki-brand__badge img { height: 58px; }
@media (max-width: 900px) { .ki-scrolled .ki-brand__badge img { height: 48px; } }
@media (prefers-reduced-motion: reduce) { .ki-brand__badge img, .ki-header { transition: none; } }

/* ---------- F11: Browser-Oberflächen in der Markenfarbe ---------- */
html { scrollbar-color: var(--rot) var(--surface-sunken); accent-color: var(--rot); }
.ki :where(input, textarea) { caret-color: var(--rot); }