/*
Theme Name: Art of Voice
Theme URI: https://artofvoice.de
Author: freeehouse
Author URI: https://freeehouse.com
Description: Block-Theme (Full Site Editing) für Art of Voice, Vocal Coaching in Nürnberg. Alle Texte sind Blöcke und im Site-Editor bearbeitbar. Schriften (Jost, Newsreader) liegen lokal im Theme.
Version: 1.5
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: artofvoice
*/

/* Farben, Schriften und Größen kommen aus theme.json. Hier nur, was theme.json nicht abdeckt. */

:root {
  --navy: #14264F; --navy-tief: #0E1B3A;
  --salbei: #CFE2C4; --auf-navy: #B8C6B3;
  --olive: #3F5A2E; --olive-tief: #2F4423;
  --gedaempft: #4B5468;
  --linie: rgba(63, 90, 46, .28); --navy-linie: rgba(207, 226, 196, .25);
  --breite: 1240px; --rand: clamp(20px, 4.2vw, 64px);
  --jost: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --news: "Newsreader", "Iowan Old Style", Georgia, serif;
}
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { text-rendering: optimizeLegibility; overflow-x: hidden; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; }
.kopf :focus-visible, .blau :focus-visible, .buehne :focus-visible, .fuss :focus-visible { outline-color: var(--salbei); }

/* Schutz gegen Stile, die alte Themes oder Page-Builder (z. B. das Elementor-Kit) seitenweit setzen:
   Grundschrift, Grundfarbe, Überschriften und Links kommen immer aus diesem Theme. */
body .wp-site-blocks { font-family: var(--jost); color: #1E2638; font-size: 18px; font-weight: 400; line-height: 1.6; }
body .wp-site-blocks :is(h1, h2, h3, h4, h5, h6) { font-family: var(--jost); font-weight: 300; letter-spacing: -.01em; }
body .wp-site-blocks :is(h2, h3) { color: var(--olive); }
body .wp-site-blocks a:where(:not(.wp-element-button)) { color: inherit; }

/* Grundabstände (WordPress setzt sonst eigene) */
:where(.wp-site-blocks) p { margin: 0 0 1em; }
:where(.wp-site-blocks) .wp-block-image, :where(.wp-site-blocks) .wp-block-quote, :where(.wp-site-blocks) .wp-block-list { margin-top: 0; margin-bottom: 0; }
.wp-site-blocks h1.wp-block-heading, .wp-site-blocks h2.wp-block-heading { margin-top: 0; margin-bottom: 0; }
.wp-site-blocks > .wp-block-template-part { margin-block: 0; }

/* Knöpfe */
.wp-block-buttons { gap: 12px; margin: 0; align-items: stretch; }
.wp-block-buttons > .wp-block-button { display: flex; margin: 0; }
.wp-block-button .wp-block-button__link { display: inline-flex; align-items: center; gap: .55em; text-decoration: none; border: 0; transition: background-color .2s ease, color .2s ease; }
.wp-block-button.knopf-salbei .wp-block-button__link { background: var(--salbei); color: var(--navy); }
.wp-block-button.knopf-salbei .wp-block-button__link:hover { background: #fff; }
.wp-block-button.knopf-linie .wp-block-button__link { background: transparent; border: 1px solid var(--navy-linie); color: var(--salbei); }
.wp-block-button.knopf-linie .wp-block-button__link:hover { background: rgba(207, 226, 196, .12); }
.wp-block-button.knopf-olive .wp-block-button__link { background: var(--olive); color: #fff; }
.wp-block-button.knopf-olive .wp-block-button__link:hover { background: var(--olive-tief); }
.wp-block-button.knopf-linie-hell .wp-block-button__link { background: transparent; border: 1px solid var(--olive); color: var(--olive); }
.wp-block-button.knopf-linie-hell .wp-block-button__link:hover { background: rgba(63, 90, 46, .1); }

/* Kopf mit Menü */
.wp-site-blocks > .kopf-teil { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 20; }
.admin-bar .wp-site-blocks > .kopf-teil { top: 32px; }
@media (max-width: 782px) { .admin-bar .wp-site-blocks > .kopf-teil { top: 46px; } }
.kopf { background: var(--navy); color: #fff; }
.kopf-innen { max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: 14px var(--rand); display: flex; align-items: center; justify-content: space-between; gap: 24px; position: relative; }
.kopf .marke-logo { margin: 0; }
.kopf .marke-logo a { display: block; }
.kopf .marke-logo img { display: block; width: 90px; height: auto; }
.kopf .wp-block-navigation { position: static; color: #fff; font-family: var(--jost); }
.kopf .wp-block-navigation__responsive-container-open { display: inline-flex; align-items: center; gap: 12px; background: none; border: 1px solid var(--navy-linie); color: #fff; font: 500 14px/1 var(--jost); letter-spacing: .08em; padding: 12px 16px; border-radius: 2px; cursor: pointer; }
.kopf .wp-block-navigation__responsive-container-open::before { content: ""; display: block; width: 18px; height: 6px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; }
.kopf .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open { position: absolute; inset: auto var(--rand) auto auto; top: 100%; width: min(340px, calc(100vw - 2 * var(--rand))); height: auto; max-height: calc(100vh - 100px); background: var(--navy); color: #fff; border: 1px solid var(--navy-linie); padding: 0; overflow: auto; }
.kopf .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog { margin: 0; }
.kopf .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding: 12px 20px 20px; }
.kopf .wp-block-navigation__responsive-container-close { position: static; display: flex; margin: 10px 20px 0 auto; background: none; border: 0; color: var(--salbei); font: 500 14px/1 var(--jost); letter-spacing: .08em; padding: 6px 0; cursor: pointer; }
.kopf .wp-block-navigation__container { width: 100%; gap: 0; align-items: stretch; }
.kopf .wp-block-navigation .wp-block-navigation-item { width: 100%; display: flex; }
.kopf .wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content { width: 100%; box-sizing: border-box; }
.kopf .wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content.wp-block-navigation-item__content { display: block; font: 400 17px/1 var(--jost); text-decoration: none; padding: 14px 0; border-bottom: 1px solid var(--navy-linie); }
.kopf .wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content.wp-block-navigation-item__content:hover { color: var(--salbei); }
.kopf .knopf-nav { margin-top: 16px; }
.kopf .wp-block-navigation .knopf-nav .wp-block-navigation-item__content.wp-block-navigation-item__content { display: flex; justify-content: center; background: var(--salbei); color: var(--navy); font: 500 15px/1 var(--jost); letter-spacing: .06em; padding: 17px 26px; border: 0; border-radius: 2px; }
.kopf .knopf-nav .wp-block-navigation-item .wp-block-navigation-item__content.wp-block-navigation-item__content:hover { background: #fff; color: var(--navy); }

/* Bühne */
.buehne { background: var(--navy); color: #fff; padding: clamp(64px, 11vw, 168px) var(--rand) clamp(64px, 9vw, 128px); }
.buehne-innen { max-width: var(--breite); margin: 0 auto; }
.buehne .buehne-logo { margin: 0 0 40px; }
.buehne .buehne-logo img { display: block; width: clamp(240px, 42vw, 620px); height: auto; }
body .buehne h1 { color: #fff; font-size: clamp(34px, 4.4vw, 62px); line-height: 1.05; letter-spacing: -.02em; max-width: 16ch; }
.buehne .buehne-unter { font-size: 19px; color: var(--auf-navy); max-width: 40ch; margin: 20px 0 32px; }

/* Kapitel */
.kapitel { padding: clamp(56px, 8vw, 128px) var(--rand); }
.kapitel.hell { background: #E8EFDF; }
.kapitel.weiss { background: #FBFCF8; }
.kapitel.blau { background: var(--navy); color: #fff; }
.kapitel-raster { max-width: var(--breite); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 40px 64px; align-items: start; }
.kapitel-kopf { position: sticky; top: calc(var(--kopf-h, 96px) + var(--wp-admin--admin-bar--height, 0px) + 24px); }
.kapitel .nr { display: block; font: 300 clamp(64px, 8vw, 120px)/.9 var(--jost); color: var(--salbei); margin: 0 0 16px; }
.hell .nr, .weiss .nr { color: #B7CDA8; }
body .kapitel h2 { font-size: clamp(32px, 3.6vw, 52px); line-height: 1.05; color: var(--olive); }
body .blau h2 { color: #fff; }
.kapitel .unter { font: 400 17px/1.4 var(--jost); color: var(--gedaempft); margin: 14px 0 0; max-width: 30ch; }
.blau .unter { color: var(--auf-navy); }
body .kapitel h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.2; color: var(--olive); margin: 1.6em 0 .5em; }
.kapitel-text > h3:first-child { margin-top: 0; }
body .blau h3 { color: var(--salbei); }
.kapitel-text { max-width: 62ch; }
.kapitel .gross { font-size: clamp(21px, 2vw, 26px); line-height: 1.4; color: var(--olive-tief); }
.blau .gross { color: #fff; }
.kapitel .wp-block-list.schlagworte { list-style: none; margin: 32px 0; padding: 0; border-top: 1px solid var(--linie); }
.schlagworte li { border-bottom: 1px solid var(--linie); }
body .schlagworte a { display: block; font: 300 clamp(26px, 3vw, 40px)/1.2 var(--jost); color: var(--olive); text-decoration: none; padding: 14px 0; transition: padding-left .2s ease; }
body .schlagworte a:hover { padding-left: 12px; }

.kapitel .liste { margin: 32px 0 0; }
.liste-eintrag { padding: 20px 0; border-top: 1px solid var(--linie); }
.liste-eintrag:last-child { border-bottom: 1px solid var(--linie); }
.kapitel .liste-titel { font: 500 18px/1.3 var(--jost); color: var(--olive); margin: 0 0 6px; }
.kapitel .liste-text { margin: 0; }

.kapitel .wp-block-list.fakten { margin: 0 0 40px; padding-left: 1.1em; }
.fakten li { margin-bottom: 6px; }
.fakten li::marker { color: var(--olive); }
.station { display: grid; grid-template-columns: 76px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--linie); }
.station p { margin: 0; }
.station strong { font: 500 17px/1.3 var(--jost); color: var(--olive); }
.kapitel .jahr { font: 300 28px/1.1 var(--jost); color: var(--olive); }

.kapitel .schritte { margin: 0 0 56px; }
.schritt { display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--linie); }
.schritt p { margin: 0; }
.kapitel .schritt-nr { font: 300 34px/1 var(--jost); color: var(--olive); }
.schritt strong { font-weight: 500; color: var(--olive); }
.termin { background: #fff; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--linie); border-radius: 2px; }
.termin h3 { margin-top: 0; }
.termin-knopf { margin: 20px 0 0; }

.nl-liste { margin: 0 0 24px; padding-left: 1.2em; }
.nl-liste li { margin-bottom: 8px; }
.nl-knoepfe { margin: 40px 0 1em; }
.kapitel .studio-bild { margin: 0 0 1em; }
.studio-bild img { width: 100%; height: auto; }

.kapitel-text.stimmen { display: grid; gap: 0; max-width: 66ch; }
.stimmen .wp-block-quote { margin: 0; padding: 24px 0; border: 0; border-top: 1px solid var(--linie); }
.stimmen .wp-block-quote:last-child { border-bottom: 1px solid var(--linie); }
.stimmen .wp-block-quote p { font-family: var(--news); font-size: 19px; margin-bottom: .6em; }
.stimmen .wp-block-quote cite { display: block; font: 500 15px/1 var(--jost); font-style: normal; letter-spacing: .08em; color: var(--olive); }

/* Anfrage */
.anfrage .kontakt { font: 400 16px/1.7 var(--jost); color: var(--navy); margin-top: 28px; }
.anfrage .kontakt a { color: var(--olive); }
.formular { margin-top: 28px; }
.formular-online { margin-top: 14px; }
.anfrage .online-hinweis { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--linie); color: var(--gedaempft); }
.anfrage .online-hinweis a { color: var(--olive); }

/* Fuß */
.fuss { background: var(--navy-tief); color: var(--auf-navy); padding: 28px var(--rand); }
.fuss-innen { max-width: var(--breite); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; font: 400 14px/1.5 var(--jost); letter-spacing: .02em; }
.fuss p { margin: 0; }
body .fuss a { color: #fff; text-decoration: none; margin-left: 24px; }
body .fuss a:first-child { margin-left: 0; }
body .fuss a:hover { color: var(--salbei); }

/* Rechtsseiten und Beiträge */
.recht { max-width: 760px; margin: 0 auto; padding: clamp(48px, 7vw, 104px) var(--rand); }
body .recht h1 { font-size: clamp(40px, 5vw, 68px); line-height: 1; margin-bottom: 32px; color: var(--olive); }
body .recht h2 { font: 500 15px/1.3 var(--jost); letter-spacing: .1em; text-transform: uppercase; margin: 36px 0 10px; color: var(--olive); }
body .recht a { color: var(--olive-tief); }
.recht .zurueck { display: inline-block; margin-top: 40px; font: 500 15px/1 var(--jost); }

@media (max-width: 860px) {
  .kapitel-raster { grid-template-columns: 1fr; gap: 24px; }
  .kapitel-kopf { position: static; }
  .kapitel .nr { font-size: 56px; margin-bottom: 8px; }
  .station { grid-template-columns: 60px 1fr; }
  .fuss-innen { flex-direction: column; }
  body .fuss a { display: inline-block; padding: 10px 0; margin-left: 0; margin-right: 22px; }
}

/* Knopf "Nach oben" */
.nach-oben { position: fixed; right: clamp(14px, 2.5vw, 28px); bottom: clamp(14px, 2.5vw, 28px); z-index: 50;
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--navy); color: var(--salbei); box-shadow: 0 6px 18px rgba(14, 27, 58, .25);
  opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .25s ease, transform .25s ease, background .2s ease; }
.nach-oben.sichtbar { opacity: 1; transform: none; pointer-events: auto; }
.nach-oben:hover { background: var(--olive); color: #fff; }
.nach-oben:focus-visible { outline: 2px solid var(--salbei); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .nach-oben { transition: none; } }