/* GeRBi – Gestaltungsraum Bildung · ergänzende Stile zu theme.json */

:root {
  --g-wand: 3px;                 /* Wandstärke im Grundriss */
  --g-tinte: var(--wp--preset--color--tinte);
  --g-papier: var(--wp--preset--color--papier);
  --g-gelb: var(--wp--preset--color--gelb);
  --g-kobalt: var(--wp--preset--color--kobalt);
  --g-koralle: var(--wp--preset--color--koralle);
  --g-minze: var(--wp--preset--color--minze);
  --g-flieder: var(--wp--preset--color--flieder);
  --g-grau: var(--wp--preset--color--grau);
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
.site-main { overflow-x: clip; }
::selection { background: var(--g-gelb); color: var(--g-tinte); }

a:focus-visible, .wp-block-button__link:focus-visible { outline: 3px solid var(--g-kobalt); outline-offset: 3px; border-radius: 4px; }

/* ---------- Kopfzeile: transluzentes Material ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(246, 247, 243, .82); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); border-bottom: 1px solid rgba(28, 35, 51, .08); }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (prefers-reduced-transparency: reduce) { .site-header { background: var(--g-papier); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.site-header .wp-block-site-title a { text-decoration: none; }
.site-header .wp-block-navigation-item__content { text-decoration: none; padding: .3rem 0; border-bottom: 3px solid transparent; }
.site-header .wp-block-navigation-item__content:hover { border-bottom-color: var(--g-gelb); color: var(--g-tinte); }
.site-header .current-menu-item > .wp-block-navigation-item__content,
.site-header .current-menu-ancestor > .wp-block-navigation-item__content { border-bottom-color: var(--g-kobalt); }

/* Bildmarke: vier Räume eines Grundrisses */
.marke-zeichen { display: grid; grid-template-columns: 14px 10px; grid-template-rows: 10px 14px; gap: 2px; padding: 2px; background: var(--g-tinte); border-radius: 3px; text-decoration: none; }
.marke-zeichen span:nth-child(1) { background: var(--g-gelb); }
.marke-zeichen span:nth-child(2) { background: var(--g-kobalt); }
.marke-zeichen span:nth-child(3) { background: var(--g-koralle); }
.marke-zeichen span:nth-child(4) { background: var(--g-minze); }

/* ---------- Grundtypografie ---------- */
.site-main p { max-width: 68ch; }
.site-main .wp-block-columns p, .site-main .grundriss p { max-width: none; }
h1, h2, h3 { text-wrap: balance; font-optical-sizing: auto; }
.page-head { padding: clamp(2rem, 6vw, 4.5rem) 0 clamp(1rem, 3vw, 2rem); }
.page-head .wp-block-post-title { max-width: 16ch; letter-spacing: -.035em; line-height: .98; font-weight: 800; }
.site-main .wp-block-list li::marker { color: var(--g-kobalt); }
.is-style-plain { list-style: none; padding-left: 0; }

/* ---------- Hero: der Claim ---------- */
.site-main .gerbi-hero { position: relative; isolation: isolate; padding: clamp(3rem, 9vw, 7rem) 0 clamp(2.5rem, 6vw, 4.5rem); }
.site-main .gerbi-hero > * { position: relative; z-index: 1; }
.site-main .gerbi-hero .claim { font-size: clamp(3rem, 9.4vw, 8.6rem); font-weight: 800; font-stretch: 82%; line-height: .9; letter-spacing: -.045em; margin: 0 0 clamp(1.4rem, 3vw, 2.2rem); max-width: 11ch; text-wrap: initial; }
.claim-t { display: inline-block; font-family: var(--wp--preset--font-family--lese); font-style: italic; font-weight: 500; font-stretch: 100%; letter-spacing: -.02em; color: var(--g-kobalt); vertical-align: baseline; max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; transition: max-width .9s cubic-bezier(.2, .8, .2, 1), opacity .5s ease .15s; }
.claim-t.is-in { max-width: 1.5em; opacity: 1; }
.no-js .claim-t { max-width: 1.5em; opacity: 1; }
.site-main .gerbi-hero .hero-lead { font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.5; max-width: 46ch; margin: 0 0 1.8rem; }
/* Raumflächen hinter dem Claim: übereinandergelegte Farbfolien */
.site-main .gerbi-hero .flaechen { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.site-main .gerbi-hero .flaechen span { position: absolute; mix-blend-mode: multiply; }
.site-main .gerbi-hero .flaechen span:nth-child(1) { right: -4%; top: 8%; width: min(38vw, 520px); height: min(30vw, 400px); background: var(--g-gelb); transform: rotate(-4deg); }
.site-main .gerbi-hero .flaechen span:nth-child(2) { right: 14%; top: 36%; width: min(26vw, 360px); height: min(26vw, 360px); background: var(--g-koralle); opacity: .85; transform: rotate(6deg); }
.site-main .gerbi-hero .flaechen span:nth-child(3) { right: 2%; top: 58%; width: min(18vw, 250px); height: min(22vw, 300px); background: var(--g-kobalt); opacity: .9; transform: rotate(-9deg); }

/* ---------- Grundriss der Räume ---------- */
.site-main .grundriss { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(230px, auto); gap: var(--g-wand); background: var(--g-tinte); border: var(--g-wand) solid var(--g-tinte); margin: clamp(1rem, 3vw, 2rem) 0 0; }
.site-main .grundriss > .raum { position: relative; margin: 0 !important; padding: clamp(1.2rem, 2.4vw, 2rem); display: flex; flex-direction: column; gap: .5rem; background: var(--raum, #fff); color: var(--raum-text, var(--g-tinte)); }
.site-main .grundriss > .raum > * { margin: 0; }
.site-main .grundriss .raum h3 { font-size: clamp(1.9rem, 3.4vw, 3.1rem); font-weight: 800; font-stretch: 78%; letter-spacing: -.035em; line-height: .95; transition: font-stretch .35s ease, letter-spacing .35s ease; color: inherit; }
.site-main .grundriss .raum:hover h3, .site-main .grundriss .raum:focus-within h3 { font-stretch: 100%; letter-spacing: -.045em; }
.site-main .grundriss .raum p { font-size: 1rem; line-height: 1.45; max-width: 40ch; }
.site-main .grundriss .raum .raum-tuer { margin-top: auto; padding-top: .6rem; font-weight: 700; }
.site-main .grundriss .raum .raum-tuer a { color: inherit; text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 2px; }
.site-main .grundriss .raum .raum-tuer a::after { content: ""; position: absolute; inset: 0; z-index: 2; } /* ganze Fläche klickbar */
/* Türen: Lücke in der Wand + Türschwenk wie im Bauplan */
.site-main .grundriss .raum::before { content: ""; position: absolute; left: calc(var(--g-wand) * -1); top: 38%; width: var(--g-wand); height: 56px; background: var(--raum, #fff); z-index: 1; }
.site-main .grundriss .raum::after { content: ""; position: absolute; left: 0; top: 38%; width: 56px; height: 56px; border-top: 1.5px dashed currentColor; border-right: 1.5px dashed currentColor; border-top-right-radius: 100%; opacity: .35; pointer-events: none; }
.site-main .grundriss .raum.tuer-oben::before { left: 22%; top: calc(var(--g-wand) * -1); width: 56px; height: var(--g-wand); }
.site-main .grundriss .raum.tuer-oben::after { left: 22%; top: 0; border-top: 0; border-right: 1.5px dashed currentColor; border-bottom: 1.5px dashed currentColor; border-radius: 0 0 100% 0; }
.site-main .grundriss .raum.ohne-tuer::before, .site-main .grundriss .raum.ohne-tuer::after { display: none; }
/* Raumfarben und Größen */
.site-main .raum-kigar { --raum: var(--g-gelb); grid-column: span 7; grid-row: span 2; }
.site-main .raum-kileb { --raum: var(--g-kobalt); --raum-text: #fff; grid-column: span 5; }
.site-main .raum-rewir { --raum: var(--g-koralle); grid-column: span 5; }
.site-main .raum-distanz { --raum: var(--g-minze); grid-column: span 4; }
.site-main .raum-griff { --raum: var(--g-flieder); grid-column: span 4; }
.site-main .raum-doing { --raum: #fff; grid-column: span 4; }
.site-main .grundriss .raum-kigar h3 { font-size: clamp(2.6rem, 7vw, 7rem); }
.site-main .grundriss .raum-kigar p { font-size: 1.15rem; max-width: 30ch; }
.site-main .raum .raum-partner { font-size: .88rem; opacity: .85; }

/* ---------- Schwelle: Statement-Band ---------- */
.site-main .schwelle { background: var(--g-kobalt); color: #fff; padding: clamp(3rem, 8vw, 6rem) clamp(1rem, 4vw, 2.5rem); margin: clamp(3rem, 8vw, 6rem) 0; position: relative; overflow: hidden; }
.site-main .schwelle > * { max-width: var(--wp--style--global--wide-size); margin-left: auto !important; margin-right: auto !important; }
.site-main .schwelle .schwelle-satz { font-size: clamp(1.8rem, 4.2vw, 3.6rem); font-weight: 700; font-stretch: 85%; line-height: 1.04; letter-spacing: -.03em; max-width: 22ch; margin: 0; }
.site-main .schwelle .schwelle-satz em { font-family: var(--wp--preset--font-family--lese); font-weight: 500; font-stretch: 100%; color: var(--g-gelb); }
.site-main .schwelle .schwelle-quelle { margin-top: 1.4rem; font-size: 1rem; color: rgba(255,255,255,.8); }
.site-main .schwelle::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 260px; height: 260px; border: var(--g-wand) solid rgba(255,255,255,.35); border-top-left-radius: 100%; border-right: 0; border-bottom: 0; }

/* ---------- Drei Wege: Material · Einblicke · Menschen ---------- */
.site-main .wege { gap: 0; border-top: var(--g-wand) solid var(--g-tinte); }
.site-main .wege > .wp-block-column { padding: 1.4rem 1.6rem 1.6rem 0; }
.site-main .wege > .wp-block-column + .wp-block-column { padding-left: 1.6rem; border-left: var(--g-wand) solid var(--g-tinte); }
.site-main .wege h3 { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800; font-stretch: 80%; letter-spacing: -.03em; margin: 0 0 .5rem; }
.site-main .wege h3 a { text-decoration: none; }
.site-main .wege h3 a:hover { color: var(--g-kobalt); }
.site-main .wege p { font-size: 1.02rem; }

/* ---------- Abschnittsköpfe ---------- */
.site-main .abschnitt-kopf { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-top: clamp(3rem, 8vw, 5.5rem) !important; }
.site-main h2.abschnitt-titel, .site-main .abschnitt-kopf h2 { font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 800; font-stretch: 80%; letter-spacing: -.04em; line-height: .95; margin: 0; }

/* ---------- Projektseiten ---------- */
.site-main .raum-kopf { background: var(--raum, var(--g-gelb)); color: var(--raum-text, var(--g-tinte)); padding: clamp(2.5rem, 7vw, 5rem) clamp(1rem, 4vw, 2.5rem) clamp(2rem, 5vw, 3.5rem); margin: 0 0 clamp(2rem, 5vw, 3.5rem); border-bottom: var(--g-wand) solid var(--g-tinte); position: relative; }
.site-main .raum-kopf > * { max-width: var(--wp--style--global--wide-size); margin-left: auto !important; margin-right: auto !important; }
.site-main .raum-kopf h1 { font-size: clamp(3rem, 9vw, 8rem); font-weight: 800; font-stretch: 78%; letter-spacing: -.045em; line-height: .9; margin: 0 0 1rem; color: inherit; }
.site-main .raum-kopf p { font-size: clamp(1.1rem, 1.6vw, 1.35rem); max-width: 50ch; }
.site-main .raum-kopf.kobalt { --raum: var(--g-kobalt); --raum-text: #fff; }
.site-main .raum-kopf.koralle { --raum: var(--g-koralle); }
.site-main .raum-kopf.minze { --raum: var(--g-minze); }
.site-main .raum-kopf.flieder { --raum: var(--g-flieder); }
.site-main .raum-kopf.weiss { --raum: #fff; }
.site-main .raum-kopf.gelb { --raum: var(--g-gelb); }
.site-main .raum-teil { margin-top: 2.6rem !important; }
.site-main .raum-teil h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-stretch: 85%; }
.site-main .offen { background: #fff; border: 2px dashed var(--g-grau); padding: 1rem 1.2rem; color: var(--g-grau); font-size: .95rem; }

/* ---------- Einblicke (Blog) ---------- */
.einblick-raster .wp-block-post-template { gap: 2.4rem 1.8rem; }
.einblick-karte .wp-block-post-featured-image img { border: var(--g-wand) solid var(--g-tinte); }
.einblick-karte .wp-block-post-title { font-size: 1.5rem; font-stretch: 88%; margin: .3rem 0 .4rem; }
.einblick-karte .wp-block-post-title a { text-decoration: none; }
.einblick-karte .wp-block-post-title a:hover { color: var(--g-kobalt); }
.einblick-karte .wp-block-post-date { font-size: .85rem; color: var(--g-grau); }
.einblick-kat a { font-size: .85rem; font-weight: 700; text-decoration: none; background: var(--g-gelb); padding: .15rem .5rem; }
.einblick .lesetext { font-family: var(--wp--preset--font-family--lese); font-size: 1.25rem; line-height: 1.65; }
.einblick .lesetext h2, .einblick .lesetext h3 { font-family: var(--wp--preset--font-family--grotesk); }
.einblick-meta { color: var(--g-grau); font-size: .95rem; gap: 1rem; }
.post-hero img { border: var(--g-wand) solid var(--g-tinte); max-height: 520px; object-fit: cover; width: 100%; }
.post-nav { margin-top: 3rem; }
.post-nav a { text-decoration: none; font-weight: 700; }

/* ---------- Material ---------- */
.site-main .material-liste { list-style: none; padding: 0; border-top: var(--g-wand) solid var(--g-tinte); }
.site-main .material-liste li { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--wp--preset--color--linie); margin: 0; }
.site-main a[href$=".pdf"]::after { content: " (PDF)"; font-size: .85em; color: var(--g-grau); }

/* ---------- Fußzeile ---------- */
.site-footer { background: var(--g-tinte); color: #E9ECF2; border-top: 6px solid var(--wp--preset--color--salbei); }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--g-gelb); }
.site-footer .footer-claim { font-size: clamp(1.8rem, 3.6vw, 3rem); font-weight: 800; font-stretch: 80%; letter-spacing: -.035em; line-height: 1; color: #fff; margin: 0 0 1rem; max-width: 14ch; }
.site-footer .footer-head { font-size: 1rem; font-weight: 700; color: var(--g-gelb); letter-spacing: 0; margin: 0 0 .6rem; }
.site-footer .footer-list li { margin-bottom: .35rem; }
.site-footer .footer-fuss { color: rgba(233,236,242,.65); margin-top: 2.5rem; }

/* ---------- Buttons ---------- */
.wp-block-button__link { transition: transform .1s ease-out, background-color .15s ease, color .15s ease; }
.wp-block-button__link:active { transform: scale(.97); }
.wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--g-tinte); border: 2px solid var(--g-tinte); }
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--g-tinte); color: var(--g-papier); }

/* ---------- Mobil ---------- */
@media (max-width: 900px) {
  .site-main .grundriss { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(190px, auto); }
  .site-main .grundriss > .raum { grid-column: span 2; grid-row: auto; }
  .site-main .raum-distanz, .site-main .raum-griff { grid-column: span 1 !important; }
  .site-main .gerbi-hero .flaechen span:nth-child(1) { width: 52vw; height: 40vw; top: 4%; right: -14%; }
  .site-main .gerbi-hero .flaechen span:nth-child(2) { width: 34vw; height: 34vw; top: auto; bottom: 6%; right: -6%; }
  .site-main .gerbi-hero .flaechen span:nth-child(3) { display: none; }
}
@media (max-width: 600px) {
  .site-main .raum-distanz, .site-main .raum-griff { grid-column: span 2 !important; }
  .site-main .wege > .wp-block-column + .wp-block-column { border-left: 0; padding-left: 0; border-top: 1px solid var(--wp--preset--color--linie); }
}

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .claim-t { transition: none; }
  .site-main .grundriss .raum h3 { transition: none; }
  .wp-block-button__link:active { transform: none; }
}

/* Vollbreite Bänder zuverlässig über die ganze Breite */
.site-main .wp-block-post-content > .alignfull { margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; max-width: none !important; width: auto; }
/* Bänder: Inhalt linksbündig an der Wide-Kante ausrichten */
.site-main .raum-kopf, .site-main .schwelle { padding-left: max(clamp(1rem, 4vw, 2.5rem), calc((100vw - 1240px) / 2)) !important; padding-right: max(clamp(1rem, 4vw, 2.5rem), calc((100vw - 1240px) / 2)) !important; }
body .site-main .wp-block-group.raum-kopf > *, body .site-main .wp-block-group.schwelle > * { margin-left: 0 !important; margin-right: 0 !important; }

/* ==== Runde 2: Stimme, Fragen, Werkstatt, Mitgestalten, Brücke ==== */
/* Hero zweispaltig: Claim + Stimme links, Porträt in den Farbfolien rechts */
.site-main .gerbi-hero.mit-bild { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.site-main .gerbi-hero.mit-bild .hero-text > * { margin-top: 0; }
.site-main .gerbi-hero.mit-bild .hero-bild { position: relative; margin: 0; }
.site-main .gerbi-hero.mit-bild .hero-bild img { position: relative; z-index: 1; width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: 50% 15%; border: var(--g-wand) solid var(--g-tinte); border-radius: 0 0 0 120px; transform: rotate(2deg); }
.site-main .gerbi-hero.mit-bild .flaechen span:nth-child(1) { right: -6%; top: 4%; width: min(32vw, 440px); height: min(34vw, 470px); }
.site-main .gerbi-hero.mit-bild .flaechen span:nth-child(2) { right: 24%; top: 52%; width: min(18vw, 240px); height: min(18vw, 240px); }
.site-main .gerbi-hero.mit-bild .flaechen span:nth-child(3) { right: -2%; top: 70%; width: min(12vw, 160px); height: min(14vw, 190px); }
.site-main .gerbi-hero.mit-bild .claim { font-size: clamp(3rem, 7.6vw, 7.2rem); }
/* Stimme */
.site-main .stimme { font-family: var(--wp--preset--font-family--lese); font-size: clamp(1.2rem, 1.7vw, 1.45rem); line-height: 1.55; max-width: 44ch; margin: 0 0 1.6rem; }
.site-main .stimme-name { font-weight: 700; font-size: 1rem; margin: -.6rem 0 1.8rem; }
.site-main .stimme-name::before { content: ""; display: inline-block; width: 28px; height: 3px; background: var(--g-kobalt); vertical-align: middle; margin-right: .6rem; }
/* Raumfragen und Raumfakten */
.site-main .grundriss .raum .raum-frage { font-family: var(--wp--preset--font-family--lese); font-style: italic; font-size: 1.15rem; line-height: 1.35; max-width: 32ch; }
.site-main .grundriss .raum-kigar .raum-frage { font-size: clamp(1.3rem, 2vw, 1.75rem); }
.site-main .grundriss .raum .raum-fakten { font-size: .92rem; font-weight: 600; margin-top: .4rem; }
/* Werkstatt: gerade im Entstehen */
.site-main .werkstatt { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; border-top: var(--g-wand) solid var(--g-tinte); }
.site-main .werkstatt li { margin: 0; padding: 1.1rem 1.2rem 1.2rem 0; position: relative; }
.site-main .werkstatt li::before { content: ""; position: absolute; top: calc(var(--g-wand) * -1 - 7px); left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--g-papier); border: var(--g-wand) solid var(--g-tinte); }
.site-main .werkstatt li.jetzt::before { background: var(--g-koralle); animation: puls 2.4s ease-in-out infinite; }
@keyframes puls { 50% { box-shadow: 0 0 0 7px rgba(255,107,87,.25); } }
.site-main .werkstatt strong { display: block; font-size: .95rem; color: var(--g-kobalt); margin: .4rem 0 .2rem; }
.site-main .werkstatt span { display: block; font-size: 1.02rem; line-height: 1.4; }
/* Mitgestalten */
.site-main .mitgestalten { background: var(--g-gelb); padding: clamp(2.5rem, 7vw, 5rem) 0; margin: clamp(3rem, 8vw, 5.5rem) 0 0; position: relative; overflow: hidden; }
.site-main .mitgestalten h2 { font-size: clamp(2.4rem, 6vw, 5rem); font-weight: 800; font-stretch: 78%; letter-spacing: -.045em; line-height: .92; margin: 0 0 1rem; max-width: 12ch; }
.site-main .mitgestalten p { font-size: clamp(1.1rem, 1.6vw, 1.35rem); max-width: 48ch; }
.site-main .mitgestalten .partner { font-size: .95rem; margin-top: 1.6rem; }
.site-main .mitgestalten::after { content: ""; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; border: var(--g-wand) solid var(--g-tinte); border-radius: 0 0 0 100%; border-top: 0; border-right: 0; opacity: .5; }
/* Brücke zu stefanie-nickel.com */
.site-main .bruecke { display: flex; gap: 1.4rem; align-items: center; padding: 1.6rem 0; border-top: 1px solid var(--wp--preset--color--linie); margin-top: 3rem !important; }
.site-main .bruecke .wp-block-image { margin: 0; flex: 0 0 auto; }
.site-main .bruecke img { width: 84px; height: 84px; object-fit: cover; border-radius: 50%; border: var(--g-wand) solid var(--g-tinte); }
.site-main .bruecke p { margin: 0; font-size: 1.05rem; }
@media (max-width: 900px) {
  .site-main .gerbi-hero.mit-bild { grid-template-columns: 1fr; }
  .site-main .gerbi-hero.mit-bild .hero-bild { max-width: 360px; justify-self: end; }
}
@media (prefers-reduced-motion: reduce) { .site-main .werkstatt li.jetzt::before { animation: none; } }

/* Mitgestalten-Band an der Wide-Kante */
.site-main .mitgestalten { padding-left: max(clamp(1rem, 4vw, 2.5rem), calc((100vw - 1240px) / 2)) !important; padding-right: max(clamp(1rem, 4vw, 2.5rem), calc((100vw - 1240px) / 2)) !important; }
body .site-main .wp-block-group.mitgestalten > * { margin-left: 0 !important; margin-right: 0 !important; }

/* ==== Runde 3: Dynamik, Farbe, Moderne ==== */
:root {
  --verlauf-gelb: linear-gradient(135deg, #FFD54A 0%, #FF9F1C 100%);
  --verlauf-kobalt: linear-gradient(135deg, #3157F5 0%, #7B4DFF 100%);
  --verlauf-koralle: linear-gradient(135deg, #FF7A59 0%, #FF3D7F 100%);
  --verlauf-minze: linear-gradient(135deg, #3DDBA0 0%, #19A7C9 100%);
  --verlauf-flieder: linear-gradient(135deg, #C3B1FF 0%, #F0A6FF 100%);
  --verlauf-weiss: linear-gradient(135deg, #FFFFFF 0%, #EEF1FF 100%);
  --feder: cubic-bezier(.2, .9, .25, 1.15);   /* leicht federnd */
  --sanft: cubic-bezier(.2, .8, .2, 1);
}

/* Körnung über der ganzen Seite: Druckpapier statt Bildschirmglätte */
body::after { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .06; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Hero: Farbflächen werden weiche, wandernde Farbwolken + reagieren auf die Maus */
.site-main .gerbi-hero .flaechen { --mx: 0; --my: 0; }
.site-main .gerbi-hero .flaechen span { border-radius: 42% 58% 61% 39% / 45% 39% 61% 55%; filter: saturate(1.15); will-change: transform; }
.site-main .gerbi-hero .flaechen span:nth-child(1) { background: var(--verlauf-gelb); animation: wolke1 18s ease-in-out infinite alternate; translate: calc(var(--mx) * 26px) calc(var(--my) * 18px); }
.site-main .gerbi-hero .flaechen span:nth-child(2) { background: var(--verlauf-koralle); opacity: .9; animation: wolke2 22s ease-in-out infinite alternate; translate: calc(var(--mx) * -38px) calc(var(--my) * -26px); }
.site-main .gerbi-hero .flaechen span:nth-child(3) { background: var(--verlauf-kobalt); opacity: .92; animation: wolke3 16s ease-in-out infinite alternate; translate: calc(var(--mx) * 50px) calc(var(--my) * 34px); }
@keyframes wolke1 { to { transform: rotate(8deg) scale(1.06); border-radius: 58% 42% 38% 62% / 52% 61% 39% 48%; } }
@keyframes wolke2 { to { transform: rotate(-10deg) scale(.94) translateY(-14px); border-radius: 37% 63% 46% 54% / 60% 38% 62% 40%; } }
@keyframes wolke3 { to { transform: rotate(14deg) scale(1.1) translateX(-10px); border-radius: 62% 38% 55% 45% / 41% 56% 44% 59%; } }
.site-main .gerbi-hero .claim { background: none; }
.claim-t { background: var(--verlauf-kobalt); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }

/* Laufband mit Schlüsselbegriffen */
.site-main .laufband { background: var(--g-tinte); color: #fff; overflow: hidden; padding: 1.1rem 0; transform: rotate(-1.5deg); }
.site-main .wp-block-post-content > .laufband.alignfull { margin: clamp(1.5rem, 4vw, 3rem) calc(50% - 50vw - 2rem) 0 !important; width: auto !important; }
.site-main .laufband .spur { display: flex; width: max-content; gap: 2.4rem; animation: laufen 38s linear infinite; }
.site-main .laufband:hover .spur { animation-play-state: paused; }
.site-main .laufband span { font-size: clamp(1.6rem, 3.6vw, 3rem); font-weight: 800; font-stretch: 78%; letter-spacing: -.03em; white-space: nowrap; }
.site-main .laufband span:nth-child(odd) { color: transparent; -webkit-text-stroke: 1.5px #fff; }
.site-main .laufband span:nth-child(4n+2) { color: var(--g-gelb); }
.site-main .laufband span:nth-child(4n) { color: #7FE7C4; }
@keyframes laufen { to { transform: translateX(-50%); } }

/* Räume: Verläufe, harte Schatten, federndes Anheben, Auftritt beim Scrollen */
.site-main .grundriss { background: var(--g-tinte); }
.site-main .raum-kigar { --raum: #FFB833; background: var(--verlauf-gelb) !important; }
.site-main .raum-kileb { --raum: #4D52F8; background: var(--verlauf-kobalt) !important; }
.site-main .raum-rewir { --raum: #FF5A6B; background: var(--verlauf-koralle) !important; }
.site-main .raum-distanz { --raum: #2CC4B2; background: var(--verlauf-minze) !important; }
.site-main .raum-griff { --raum: #D4ADFF; background: var(--verlauf-flieder) !important; }
.site-main .raum-doing { --raum: #F6F7FF; background: var(--verlauf-weiss) !important; }
.site-main .grundriss > .raum { transition: transform .45s var(--feder), box-shadow .45s var(--feder), filter .3s ease; z-index: 1; }
.site-main .grundriss > .raum:hover, .site-main .grundriss > .raum:focus-within { transform: translate(-6px, -6px); box-shadow: 10px 10px 0 var(--g-tinte); z-index: 3; filter: saturate(1.2); }
.site-main .grundriss > .raum:active { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--g-tinte); transition-duration: .1s; }
/* Auftritt: Räume „öffnen sich“ nacheinander */
.js-an .site-main .grundriss > .raum { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(24px); }
.js-an .site-main .grundriss.ist-da > .raum { opacity: 1; clip-path: inset(0 0 0 0); transform: none; transition: clip-path .8s var(--sanft), opacity .5s ease, transform .8s var(--sanft), box-shadow .45s var(--feder); }
.js-an .site-main .grundriss.ist-da > .raum:nth-child(2) { transition-delay: .08s; }
.js-an .site-main .grundriss.ist-da > .raum:nth-child(3) { transition-delay: .16s; }
.js-an .site-main .grundriss.ist-da > .raum:nth-child(4) { transition-delay: .24s; }
.js-an .site-main .grundriss.ist-da > .raum:nth-child(5) { transition-delay: .32s; }
.js-an .site-main .grundriss.ist-da > .raum:nth-child(6) { transition-delay: .40s; }
.js-an .site-main .grundriss.ist-da > .raum:hover { transition-delay: 0s; }

/* Werkstatt als dunkles Band mit leuchtenden Punkten */
.site-main .werkstatt-band { background: radial-gradient(900px 400px at 85% 0%, rgba(123,77,255,.45), transparent 60%), radial-gradient(700px 360px at 0% 100%, rgba(61,219,160,.3), transparent 60%), var(--g-tinte); color: #EEF1FF; padding: clamp(2.5rem, 7vw, 5rem) 0 clamp(2rem, 5vw, 3.5rem); margin-top: clamp(3rem, 8vw, 5.5rem); }
.site-main .werkstatt-band h2 { color: #fff; margin: 0; font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 800; font-stretch: 80%; letter-spacing: -.04em; }
.site-main .werkstatt-band .werkstatt { border-top-color: rgba(255,255,255,.35); }
.site-main .werkstatt-band .werkstatt li::before { background: var(--g-tinte); border-color: #fff; }
.site-main .werkstatt-band .werkstatt li.jetzt::before { background: #FF5A6B; border-color: #FF5A6B; box-shadow: 0 0 14px #FF5A6B; }
.site-main .werkstatt-band .werkstatt strong { color: #7FE7C4; }
.site-main .werkstatt-band .werkstatt li { transition: transform .4s var(--feder); }
.site-main .werkstatt-band .werkstatt li:hover { transform: translateY(-4px); }
.site-main .werkstatt-band { padding-left: max(clamp(1rem, 4vw, 2.5rem), calc((100vw - 1240px) / 2)) !important; padding-right: max(clamp(1rem, 4vw, 2.5rem), calc((100vw - 1240px) / 2)) !important; }
body .site-main .wp-block-group.werkstatt-band > * { margin-left: 0 !important; margin-right: 0 !important; max-width: none; }

/* Schwelle: Verlauf, der sich bewegt */
.site-main .schwelle { background: linear-gradient(120deg, #3157F5, #7B4DFF, #3157F5); background-size: 220% 220%; animation: schimmer 14s ease-in-out infinite alternate; }
@keyframes schimmer { to { background-position: 100% 50%; } }

/* Mitgestalten: Verlauf + federnder Button */
.site-main .mitgestalten { background: linear-gradient(120deg, #FFD54A 0%, #FFB833 55%, #FF9F1C 100%); }
.site-main .mitgestalten .wp-block-button__link { background: var(--g-tinte); box-shadow: 6px 6px 0 #fff; transition: transform .35s var(--feder), box-shadow .35s var(--feder); }
.site-main .mitgestalten .wp-block-button__link:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 #fff; background: var(--g-tinte); }

/* Buttons allgemein mit hartem Schatten */
.site-main .gerbi-hero .wp-block-button__link { box-shadow: 5px 5px 0 var(--g-gelb); transition: transform .35s var(--feder), box-shadow .35s var(--feder), background-color .2s; }
.site-main .gerbi-hero .wp-block-button__link:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--g-gelb); }

/* Wege: Unterstreichung, die einfährt */
.site-main .wege h3 a { background: linear-gradient(var(--g-gelb), var(--g-gelb)) 0 88% / 0 .32em no-repeat; transition: background-size .45s var(--sanft); }
.site-main .wege h3 a:hover { background-size: 100% .32em; color: var(--g-tinte); }

@media (max-width: 900px) { .site-main .laufband { transform: rotate(-2deg); } }
@media (prefers-reduced-motion: reduce) {
  .site-main .gerbi-hero .flaechen span, .site-main .laufband .spur, .site-main .schwelle { animation: none; }
  .site-main .gerbi-hero .flaechen span { translate: none; }
  .js-an .site-main .grundriss > .raum { opacity: 1; clip-path: none; transform: none; }
  .site-main .grundriss > .raum:hover { transform: none; }
}