/*
Theme Name:   KORU.wien (Kadence Child)
Template:     kadence
Description:  Child-Theme für den Relaunch von koru.wien. Enthält nur, was Kadence nicht selbst kann: lokal eingebundene Schriften (ohne Google-Server), den roten Faden am rechten Rand und das Themen-Laufband mit Pause-Knopf. Farben, Schriftgrößen, Kopf- und Fußzeile stehen im Customizer und bleiben dort bearbeitbar.
Version:      1.3.2
Author:       Michael Gerald Hofmann e.U. | KORU.wien
Text Domain:  koru-child
*/

/* ---------- Schriften: nur die aufrechten Schnitte, lokal (DSGVO, keine Google-Anfrage) ---------- */
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400 800;font-display:swap;src:url("fonts/EBGaramond-normal-latin.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:300 800;font-display:swap;src:url("fonts/HankenGrotesk-normal-latin.woff2") format("woff2")}
/* Keine Kursive: Browser dürfen keine Schrägschrift erzeugen (Michis Vorgabe: keine Kursive) */
html{font-synthesis:none}
em,i,cite,blockquote,q{font-style:normal}

/* ---------- Untermenü: nach Escape geschlossen halten, bis Maus oder Fokus das Menü verlassen (js/koru.js) ---------- */
.header-navigation li.koru-zu > ul.sub-menu{display:none!important}

/* ---------- Roter Faden rechts am Rand (Skript js/koru.js) ----------
   Zeichnet sich beim Scrollen entlang der Abschnitte mit der CSS-Klasse „koru-knoten“.
   Rein dekorativ (aria-hidden). Bei reduzierter Bewegung und unter 64em Breite ausgeblendet. */
.koru-faden-bahn{position:relative}
.koru-faden{position:absolute;top:0;right:max(4px,calc((100vw - var(--global-content-width,1290px)) / 4 - 20px));width:40px;z-index:5;pointer-events:none;overflow:visible}
.koru-faden__saum{stroke:var(--global-palette8,#FDFBF7);stroke-width:7;stroke-linecap:round;fill:none}
.koru-faden__pfad{stroke:var(--global-palette1,#7A1C30);stroke-width:3;stroke-linecap:round;fill:none}
.koru-faden circle.koru-faden__ring{fill:var(--global-palette8,#FDFBF7);stroke:none}
.koru-faden circle.koru-faden__punkt{fill:var(--global-palette8,#FDFBF7);stroke:var(--global-palette1,#7A1C30);stroke-width:2.5;transition:fill 300ms ease}
.koru-faden circle.koru-faden__punkt.is-lit{fill:var(--global-palette1,#7A1C30)}
.koru-faden__masche path{transition:stroke-dashoffset 1100ms cubic-bezier(.23,1,.32,1)}
.koru-faden circle.koru-faden__knopf{fill:var(--global-palette1,#7A1C30);opacity:0;transition:opacity 300ms ease 600ms}
.koru-faden.is-geschnuert circle.koru-faden__knopf{opacity:1}
@media (max-width:64em){.koru-faden{display:none}}
@media (prefers-reduced-motion:reduce){.koru-faden{display:none}}

/* ---------- Themen-Laufband (Skript js/koru.js) ----------
   In Kadence: eine normale Liste mit der CSS-Klasse „koru-laufband“. Ohne Skript steht sie als umbrechende Reihe da.
   Das Skript ergänzt eine zweite, versteckte Spur und den Pause-Knopf (WCAG 2.2.2). */
ul.koru-laufband{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;margin:0;padding:0}
ul.koru-laufband li{white-space:nowrap;padding:.5rem 1rem;border-radius:999px;background:var(--global-palette8,#FDFBF7);border:1px solid rgba(20,57,61,.14);font-weight:600;font-size:.95rem;margin:0}
.koru-lauf{display:flex;align-items:center;gap:1rem}
.koru-lauf__fenster{flex:1;min-width:0;display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent)}
.koru-lauf ul.koru-laufband{flex-wrap:nowrap;flex:none;padding-right:.6rem;animation:koru-lauf 80s linear infinite}
.koru-lauf.is-paused ul.koru-laufband{animation-play-state:paused}
@keyframes koru-lauf{to{transform:translateX(-100%)}}
.koru-lauf__btn{flex:none;display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:.45rem .9rem;border-radius:999px;border:1px solid var(--global-palette3,#14393D);background:var(--global-palette8,#FDFBF7);color:var(--global-palette3,#14393D);font:inherit;font-weight:700;font-size:.82rem;cursor:pointer}
.koru-lauf__btn:hover,.koru-lauf__btn:focus,.koru-lauf__btn:focus-visible{background:var(--global-palette9,#fff);color:var(--global-palette3,#14393D)}
.koru-lauf__btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.koru-lauf__btn .ico-play{display:none}
.koru-lauf__btn[data-angehalten=true] .ico-play{display:block;fill:currentColor}
.koru-lauf__btn[data-angehalten=true] .ico-pause{display:none}
@media (max-width:45em){.koru-lauf{flex-direction:column;align-items:flex-start}.koru-lauf__fenster{width:100%}}
@media (prefers-reduced-motion:reduce){
  .koru-lauf ul.koru-laufband{animation:none;flex-wrap:wrap;flex:1}
  .koru-lauf__fenster{-webkit-mask-image:none;mask-image:none}
  .koru-lauf ul.koru-laufband[aria-hidden]{display:none}
  .koru-lauf__btn{display:none}
}

/* Fokus nicht unter der Kopfzeile (WCAG 2.4.11): Sprungziele und Fokus mit Abstand zur Kopfzeile */
html{scroll-padding-top:110px}