/*
* Traumascript – Anpassungen für Block-Markup und Kadence-Rahmen
* ==============================================================
* Jede Regelgruppe ist begründet: sie bildet ab, was sich mit Blöcken und
* globalen Kadence-Einstellungen nicht pixelgenau abbilden lässt.
* Design-Wahrheit bleibt site.css (identisch mit dem HTML-Design).
*/
/* ------------------------------------------------------------------ */
/* A) Kadence-Container neutralisieren (Seiten sind „fullwidth/unboxed“) */
/* ------------------------------------------------------------------ */
.tsju .content-area { margin: 0; }
.tsju .content-container.site-container { max-width: none; padding: 0; }
.tsju .content-wrap { padding: 0; }
.tsju .entry-content-wrap { padding: 0; }
.tsju .entry-content > *:not(.wp-block-group) { margin-inline: auto; }
.tsju .content-bg { background: transparent; }
.tsju .entry-content { line-height: var(--leading-body); }
/* Site-Main-Landmark wie im Design (Kadence nutzt #main) */
.tsju #main { display: block; }
/* ------------------------------------------------------------------ */
/* B) Core-Block-Standardabstände zurücknehmen (Design regelt Abstände) */
/* ------------------------------------------------------------------ */
/* Resets bewusst mit Spezifität (0,0,1) bzw. (0,1,1): sie überschreiben nur die
Element-Regeln von Kadence/Core und lassen alle Klassenregeln des Designs
(Utilities wie .mt-6, Komponenten wie .hero__subline) unangetastet. */
:where(.tsju) p { margin: 0; }
figure:where(.wp-block-image) { margin: 0; }
.tsju :where(.wp-block-image) img { height: auto; }
ul:where(.wp-block-list), ol:where(.wp-block-list) { margin: 0; padding: 0; list-style: none; }
.prose ul:where(.wp-block-list):not(.thought-list) { padding-left: 1.3em; list-style: disc; }
.entry-content blockquote:where(.wp-block-quote) { margin: 0; padding: 0; border: 0; font-style: normal; }
.entry-content blockquote:where(.wp-block-quote) p { font: inherit; color: inherit; margin: 0; }
div:where(.wp-block-buttons) { margin: 0; gap: var(--space-4); }
div:where(.wp-block-buttons.btn-row) { align-items: center; }
div:where(.wp-block-button) { margin: 0; }
:where(.tsju .wp-block-group) { margin: 0; } /* Spezifität 0: Design-Klassen wie .container (margin-inline:auto) und .mt-* gewinnen */
/* Figure-Wrapper des Bild-Blocks übernehmen die Rolle des ![]()
aus dem Design */
.hero__media > .wp-block-image,
.feature__media > .wp-block-image,
.page-hero__media > .wp-block-image,
.perspective-featured__media > .wp-block-image,
.perspective-teaser__media > .wp-block-image,
.book-hero__cover > .wp-block-image,
.person__photo > .wp-block-image,
.story-block__cat > .wp-block-image,
.book-meta__cover > .wp-block-image,
.about-teaser__media > .wp-block-image { width: 100%; height: 100%; }
.feature__media > .wp-block-image img { width: 100%; height: 100%; object-fit: cover; }
.hero__media > .wp-block-image img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 63.99em) { .hero__media > .wp-block-image img { aspect-ratio: 3 / 2; height: auto; } }
.book-meta__cover > .wp-block-image img { width: 10rem; }
.book-meta__cover > .wp-block-image.w-14 img { width: 14rem; }
.book-meta__cover > .wp-block-image.w-12 img { width: 12rem; }
.wp-block-image.cat-peek { position: absolute; width: clamp(6rem, 14vw, 9.5rem); pointer-events: none; }
.wp-block-image.cat-peek--top { top: -1.5rem; right: -1rem; }
.wp-block-image.cat-peek--card { top: -2.25rem; right: 0.5rem; width: 5.5rem; opacity: 0.9; }
.wp-block-image.maxw-20 img { max-width: 20rem; }
.publication__cover > .wp-block-image { position: absolute; inset: var(--space-6); width: auto; height: auto; }
.publication__cover > .wp-block-image img { position: static; width: 100%; height: 100%; object-fit: contain; }
.preview-pages .wp-block-image img { width: 13.75rem; max-width: 42%; border: 1px solid var(--color-sand); box-shadow: 0 18px 40px -18px rgba(43, 36, 31, 0.35); }
.preview-pages .wp-block-image.is-note img { transform: translateY(0.875rem); }
.trust-row__author .wp-block-image img { width: 1.75rem; height: 1.75rem; border-radius: 50%; object-fit: cover; }
.author-block > .wp-block-image img { width: 8.25rem; height: 8.25rem; border-radius: 50%; object-fit: cover; }
.lp-header__brand .wp-block-image img { height: clamp(7rem, 16vw, 11rem); width: auto; }
/* ------------------------------------------------------------------ */
/* C) Button-Block-Stile → Link-/Button-Varianten des Designs */
/* ------------------------------------------------------------------ */
.tsju .wp-block-button .wp-block-button__link { border-radius: 0; box-shadow: none; }
.tsju .wp-block-button.is-style-btn .wp-block-button__link,
.tsju .wp-block-button.is-style-btn-outline .wp-block-button__link,
.tsju .wp-block-button.is-style-btn-light .wp-block-button__link {
display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
padding: 0.85rem 1.6rem; font-size: var(--text-body-s); font-weight: 500; line-height: 1.2;
border-radius: var(--radius-s); text-decoration: none;
transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.tsju .wp-block-button.is-style-btn .wp-block-button__link { background: var(--color-terracotta); color: #fff; border: 1px solid var(--color-terracotta); }
.tsju .wp-block-button.is-style-btn .wp-block-button__link:hover { background: var(--color-terracotta-deep); border-color: var(--color-terracotta-deep); color: #fff; }
.tsju .wp-block-button.is-style-btn-outline .wp-block-button__link { background: transparent; color: var(--color-ink-warm); border: 1px solid var(--color-ink-warm); }
.tsju .wp-block-button.is-style-btn-outline .wp-block-button__link:hover { background: var(--color-ink-warm); color: var(--color-cream); }
.tsju .wp-block-button.is-style-btn-light .wp-block-button__link { background: transparent; color: var(--color-cream); border: 1px solid rgba(245, 242, 235, 0.7); }
.tsju .wp-block-button.is-style-btn-light .wp-block-button__link:hover { background: var(--color-cream); color: var(--color-ink-warm); border-color: var(--color-cream); }
.tsju .wp-block-button.is-style-link-dash .wp-block-button__link,
.tsju .wp-block-button.is-style-link-arrow .wp-block-button__link,
.tsju .wp-block-button.is-style-link-arrow-back .wp-block-button__link {
background: none; border: 0; padding: 0; border-radius: 0;
font-size: var(--text-body-s); font-weight: 500; color: var(--color-terracotta-text);
display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; line-height: 1.4;
transition: color var(--transition);
}
.tsju .wp-block-button.is-style-link-dash .wp-block-button__link::before { content: ""; display: block; width: 2rem; height: 1px; background: currentColor; transition: width var(--transition); }
.tsju .wp-block-button.is-style-link-dash .wp-block-button__link:hover::before { width: 2.75rem; }
.tsju .wp-block-button.is-style-link-arrow .wp-block-button__link { gap: 0.4em; align-items: baseline; }
.tsju .wp-block-button.is-style-link-arrow .wp-block-button__link::after { content: "→"; transition: transform var(--transition); }
.tsju .wp-block-button.is-style-link-arrow .wp-block-button__link:hover::after { transform: translateX(3px); }
.tsju .wp-block-button.is-style-link-arrow-back .wp-block-button__link { gap: 0.4em; align-items: baseline; }
.tsju .wp-block-button.is-style-link-arrow-back .wp-block-button__link::before { content: "←"; }
.tsju .wp-block-button.is-style-link-dash .wp-block-button__link:hover,
.tsju .wp-block-button.is-style-link-arrow .wp-block-button__link:hover,
.tsju .wp-block-button.is-style-link-arrow-back .wp-block-button__link:hover { color: var(--color-terracotta-deep); }
.section--olive .wp-block-button.is-style-link-dash .wp-block-button__link { color: var(--color-terracotta-light); }
.section--olive .wp-block-button.is-style-link-dash .wp-block-button__link:hover { color: var(--color-cream); }
.tsju .wp-block-button.is-style-link-dash.link-dash--top { margin-top: var(--space-6); }
.tsju .wp-block-buttons.link-dash--top { margin-top: var(--space-6); }
.tsju .wp-block-buttons.discover__link { justify-self: end; }
.tsju .card-link.is-clickable { cursor: pointer; }
.tsju .card-link:hover .row__title, .tsju .card-link:hover .perspective-card__title, .tsju .card-link:hover .publication__title, .tsju .card-link:hover .resource__title { color: var(--color-terracotta); }
/* Text-Links in Absätzen (frühere Klasse link-quiet) */
.tsju .entry-content p a:not(.wp-block-button__link),
.tsju .entry-content li a:not(.wp-block-button__link) { color: var(--color-terracotta-text); text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
.tsju .entry-content p a:not(.wp-block-button__link):hover { color: var(--color-terracotta-deep); }
.tsju .entry-content .eyebrow a, .tsju .entry-content .row__title a, .tsju .entry-content .tag-list a { text-decoration: none; color: inherit; }
.tsju .entry-content .eyebrow a:hover, .tsju .entry-content .row__title a:hover { color: var(--color-terracotta-text); }
/* ------------------------------------------------------------------ */
/* D) Header (Kadence Header-Builder) → Design */
/* ------------------------------------------------------------------ */
.tsju #masthead { position: relative; z-index: var(--z-header); background: var(--color-paper-2); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 0; } /* Kadence-Header trägt auch .site-header aus site.css: sticky/blur dort neutralisieren, sonst wird #masthead Containing Block des fixierten Headers (Versatz bei Adminleiste) */
.tsju .site-header-row-container-inner > .site-container { max-width: var(--width-max); padding-inline: var(--gutter); }
.tsju .site-main-header-wrap.site-header-row-container { background: rgba(245, 242, 235, 0.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-surface-line); }
.tsju .site-main-header-inner-wrap { min-height: var(--header-h-mobile); }
@media (min-width: 64em) { .tsju .site-main-header-inner-wrap { min-height: var(--header-h); } }
/* Logo-Größe kommt aus dem Customizer (Kadence: Header → Logo → Breite; Seed: 83/83/111 px). Keine feste Höhe hier, damit die Einstellung greift. */
.tsju .site-branding a.brand img { height: auto; }
/* Schriftgröße, -gewicht und Farben der Navigation kommen aus dem Customizer (Kadence: Header → Primäre Navigation; Seed: 17 px / 500 / Palette 5→3). */
/* Abstand zwischen den Einträgen liegt auf dem li; der Link selbst ist nur so breit wie sein Wort (Unterstrich endet mit dem Wort). */
.tsju .header-navigation .header-menu-container > ul > li { margin: 0 clamp(0.625rem, 1.1vw, 1rem); }
.tsju .header-navigation .header-menu-container > ul > li > a {
padding: var(--space-2) 0; margin: 0; width: auto; display: inline-block; position: relative; transition: color var(--transition);
}
.tsju .header-navigation .header-menu-container > ul > li > a::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--color-terracotta);
transform: scaleX(0); transform-origin: left; transition: transform var(--transition);
}
.tsju .header-navigation .header-menu-container > ul > li > a:hover::after,
.tsju .header-navigation .header-menu-container > ul > li.current-menu-item > a::after,
.tsju .header-navigation .header-menu-container > ul > li.current-menu-ancestor > a::after { transform: scaleX(1); }
.tsju .header-navigation-style-underline .header-menu-container > ul > li > a::after { display: none; }
/* Mobiler Trigger: runder dunkler Button wie im Design (≥ 44 px Touch-Ziel) */
.tsju .mobile-toggle-open-container .menu-toggle-open {
width: 2.75rem; height: 2.75rem; padding: 0; border-radius: 50%; border: 0;
background: var(--color-ink-warm); color: var(--color-cream); display: inline-flex; align-items: center; justify-content: center;
}
.tsju .mobile-toggle-open-container .menu-toggle-open:hover, .tsju .mobile-toggle-open-container .menu-toggle-open:focus { background: var(--color-terracotta); color: #fff; }
/* Mobiles Vollbild-Menü (Kadence Drawer „fullwidth“) in Oliv mit großen Serifen */
.tsju #mobile-drawer .drawer-inner { background: var(--color-olive); color: var(--color-cream); }
.tsju #mobile-drawer .drawer-header { padding-inline: var(--gutter); min-height: var(--header-h-mobile); }
.tsju #mobile-drawer .menu-toggle-close { width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--color-cream); color: var(--color-olive); border: 0; padding: 0; }
.tsju #mobile-drawer .menu-toggle-close:hover, .tsju #mobile-drawer .menu-toggle-close:focus { background: var(--color-terracotta); color: #fff; }
.tsju #mobile-drawer .drawer-content { padding-inline: var(--gutter); }
.tsju #mobile-drawer .mobile-navigation ul li { border: 0; }
.tsju #mobile-drawer .mobile-navigation ul li a {
font-family: var(--font-serif); font-size: clamp(2rem, 7vw, 3rem); line-height: 1.2; padding: var(--space-3) 0;
color: rgba(245, 242, 235, 0.9); border: 0; transition: color var(--transition), transform var(--transition);
}
.tsju #mobile-drawer .mobile-navigation ul li a:hover, .tsju #mobile-drawer .mobile-navigation ul li.current-menu-item > a { color: var(--color-terracotta-light); transform: translateX(0.75rem); }
/* Sticky-Header: Sprungziele nicht verdecken */
.tsju :target, .tsju [id] { scroll-margin-top: calc(var(--header-h) + 1rem); }
/* Kadence-Skip-Link im Design (bleibt fokussierbar) */
.tsju .skip-link.screen-reader-text:focus { top: var(--space-4); left: var(--space-4); background: var(--color-ink-warm); color: var(--color-cream); padding: var(--space-2) var(--space-4); }
/* Sichtbarer Fokusring überall (Kadence setzt teils outline: none) */
.tsju a:focus-visible, .tsju button:focus-visible, .tsju input:focus-visible, .tsju select:focus-visible, .tsju textarea:focus-visible,
.tsju [tabindex]:focus-visible { outline: 2px solid var(--color-focus) !important; outline-offset: 3px; box-shadow: none; }
/* ------------------------------------------------------------------ */
/* E) Footer (Kadence Footer-Builder, Block-Widgets) → Design */
/* ------------------------------------------------------------------ */
.tsju #colophon { background: var(--color-surface); }
.tsju .site-footer-wrap .site-container { max-width: var(--width-max); padding-inline: var(--gutter); }
.tsju .site-middle-footer-inner-wrap { padding-top: var(--space-9); padding-bottom: var(--space-2); }
.tsju .site-bottom-footer-inner-wrap { padding-top: var(--space-5); padding-bottom: var(--space-7); border-top: 1px solid var(--color-sand); }
.tsju .site-footer-row-container-inner .site-footer-section { display: block; }
@media (min-width: 64em) { .tsju .site-middle-footer-inner-wrap .site-footer-row-layout-equal { grid-template-columns: 1.4fr repeat(4, 1fr); } }
.tsju .footer-widget-area .widget { margin: 0; }
.tsju .footer-widget-area .wp-block-image img { height: 5.5rem; width: auto; }
.tsju .footer-widget-area .site-footer__claim { margin-top: var(--space-5); font-family: var(--font-serif); font-size: 1.125rem; color: var(--color-ink-quiet); max-width: 18em; }
.tsju .footer-widget-area .eyebrow { margin-bottom: var(--space-5); }
.tsju .footer-widget-area .wp-block-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.tsju .footer-widget-area .wp-block-list a { font-size: var(--text-body-s); color: var(--color-ink-soft); text-decoration: none; transition: color var(--transition); }
.tsju .footer-widget-area .wp-block-list a:hover { color: var(--color-terracotta-text); }
.tsju .site-footer__person { margin-top: 0; padding-top: 0; border: 0; }
.tsju .site-bottom-footer-inner-wrap .site-footer-section { align-items: center; }
.tsju .footer-html { font-size: var(--text-tiny); color: var(--color-greige); }
.tsju .footer-html .site-footer__person-name { font-family: var(--font-serif); font-size: 1.25rem; color: var(--color-ink-warm); }
.tsju .footer-html .site-footer__roles a { color: var(--color-ink-soft); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: var(--color-sand); font-size: var(--text-small); letter-spacing: 0.04em; }
.tsju .footer-html .site-footer__roles a:hover { color: var(--color-terracotta-text); text-decoration-color: currentColor; }
.tsju .footer-navigation .footer-menu-container > ul > li > a { font-size: var(--text-tiny); color: var(--color-greige); padding: 0 0 0 var(--space-5); }
.tsju .footer-navigation .footer-menu-container > ul > li > a:hover { color: var(--color-terracotta-text); }
.tsju .site-footer-section-right { justify-content: flex-end; }
/* ------------------------------------------------------------------ */
/* F) Kadence Advanced Form → Newsletter- und Kontaktformular */
/* ------------------------------------------------------------------ */
.tsju .kb-advanced-form { font-family: var(--font-sans); }
.tsju .kb-advanced-form .kb-adv-form-label { font-size: var(--text-small); font-weight: 600; color: var(--color-ink-soft); }
.tsju .kb-advanced-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.tsju .kb-advanced-form select, .tsju .kb-advanced-form textarea {
width: 100%; padding: 0.85rem 1rem; font-size: var(--text-body-s); background: var(--color-paper-2);
border: 1px solid var(--color-input-border); border-radius: var(--radius-s); color: var(--color-ink-warm); box-shadow: none;
}
.tsju .kb-advanced-form input:focus, .tsju .kb-advanced-form select:focus, .tsju .kb-advanced-form textarea:focus { border-color: var(--color-terracotta); outline: 2px solid var(--color-focus); outline-offset: 2px; }
.tsju .kb-advanced-form .kb-adv-form-field { margin-bottom: var(--space-5); }
.tsju .kb-advanced-form .kb-adv-form-submit-button, .tsju .kb-advanced-form button[type="submit"] {
background: var(--color-terracotta); color: #fff; border: 1px solid var(--color-terracotta); border-radius: var(--radius-s);
padding: 0.85rem 1.6rem; font-size: var(--text-body-s); font-weight: 500; line-height: 1.2; box-shadow: none;
}
.tsju .kb-advanced-form .kb-adv-form-submit-button:hover, .tsju .kb-advanced-form button[type="submit"]:hover { background: var(--color-terracotta-deep); border-color: var(--color-terracotta-deep); }
.tsju .kb-advanced-form .kb-adv-form-message { margin-top: var(--space-4); font-size: var(--text-body-s); color: var(--color-ink-soft); }
.tsju .kb-advanced-form .kb-adv-form-message-error { color: var(--color-terracotta-deep); }
.tsju .kb-advanced-form .kb-adv-form-required { color: var(--color-terracotta); }
.tsju .kb-advanced-form .kb-adv-form-help { font-size: var(--text-tiny); color: var(--color-greige); }
/* Newsletter: Eingabe und Button in einer Zeile wie im Design */
.tsju .newsletter .kb-advanced-form .kb-adv-form-field { margin: 0; }
.tsju .newsletter .kb-advanced-form .kb-adv-form-field.kb-field-desk-width-100 { width: 100%; }
.tsju .newsletter form.kb-advanced-form { max-width: 30rem; margin: var(--space-7) auto 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: 0; }
.tsju .newsletter .kb-advanced-form .kb-adv-form-field { width: auto; }
.tsju .newsletter .kb-advanced-form .kb-submit-field { align-self: stretch; }
.tsju .newsletter .kb-advanced-form .kb-adv-form-submit-button { height: 100%; }
.tsju .newsletter .kb-advanced-form > :not(.kb-adv-form-field) { grid-column: 1 / -1; }
@media (max-width: 30em) {
.tsju .newsletter form.kb-advanced-form { grid-template-columns: minmax(0, 1fr); }
.tsju .newsletter .kb-advanced-form input[type="email"], .tsju .newsletter .kb-advanced-form .kb-adv-form-submit-button { border-radius: var(--radius-s); }
}
/* Zustimmungsfeld: Kästchen links, Text rechts (wie im Design) */
/* Kadence rendert den Text als