/*
Theme Name: FREI sein und NAH SEIN
Theme URI: https://angelamaurizi.ch
Author: Angela Maurizi
Author URI: https://angelamaurizi.ch
Description: Block-Theme für angelamaurizi.ch — Seminare, Mediation und Begleitung in Gewaltfreier Kommunikation. Warm, klar, menschlich: „Echt statt nett“.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.2.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: frei-sein-und-nah-sein
Tags: full-site-editing, block-patterns, one-column, custom-colors, custom-menu, editor-style, blog
*/

/* ==========================================================================
   0 · Tokens — gespiegelt aus theme.json, damit Farbänderungen im
   Site-Editor auch in dieses Stylesheet durchschlagen.
   ========================================================================== */
:root{
  --bg:            var(--wp--preset--color--bg, #fff8f4);
  --surface:       var(--wp--preset--color--surface, #f4ece7);
  --surface-2:     var(--wp--preset--color--surface-2, #ece2db);
  --ink:           var(--wp--preset--color--ink, #2a2118);
  --ink-soft:      var(--wp--preset--color--ink-soft, #5b4f44);
  --ink-mute:      var(--wp--preset--color--ink-mute, #8a7d70);
  --line:          var(--wp--preset--color--line, #e3d6cc);
  --primary:       var(--wp--preset--color--primary, #7c3aed);
  --primary-soft:  var(--wp--preset--color--primary-soft, #ede5ff);
  --primary-ink:   var(--wp--preset--color--primary-ink, #4c1d95);
  --violet-light:  var(--wp--preset--color--violet-light, #c4b3ff);
  --sage:          var(--wp--preset--color--sage, #6b8c6a);
  --sage-soft:     var(--wp--preset--color--sage-soft, #e3ecdf);
  --terracotta:    var(--wp--preset--color--terracotta, #c46a4d);
  --cream:         var(--wp--preset--color--cream, #f5e8d8);

  --shadow-sm: var(--wp--preset--shadow--sm, 0 1px 2px rgba(76,29,149,.05), 0 4px 16px -8px rgba(76,29,149,.08));
  --shadow-md: var(--wp--preset--shadow--md, 0 1px 2px rgba(76,29,149,.06), 0 12px 40px -16px rgba(76,29,149,.18));
  --shadow-lg: var(--wp--preset--shadow--lg, 0 4px 12px rgba(76,29,149,.06), 0 30px 80px -28px rgba(76,29,149,.22));

  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px; --r-pill:999px;
  --font-body: var(--wp--preset--font-family--body, "Roboto Condensed", system-ui, sans-serif);
  --font-sig:  var(--wp--preset--font-family--signature, "Caveat", cursive);
}

/* ==========================================================================
   1 · Basis
   ========================================================================== */
html{scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{ -webkit-font-smoothing:antialiased; text-wrap:pretty; }
body,.editor-styles-wrapper{ font-variant-numeric:lining-nums }

h1,h2,h3,h4{ text-wrap:balance }
p{ margin:0 0 1em }
a{ text-decoration:none }
a:hover{ text-decoration:underline; text-underline-offset:3px }

/* Ein „Bildschirm“-Abschnitt: Grosszügiger vertikaler Rhythmus */
.am-section{ padding:clamp(72px,9vw,120px) 0; position:relative }
.am-section.is-tight{ padding:clamp(56px,7vw,96px) 0 }
.am-section > .wp-block-group__inner-container > *:last-child{ margin-bottom:0 }

.wrap{ max-width:1240px; margin-inline:auto }

/* Hilfsklassen, die in mehreren Mustern vorkommen */
.u-lede{ font-size:19px; color:var(--ink-soft); line-height:1.6; max-width:640px }
.u-muted{ color:var(--ink-mute) }
.u-soft{ color:var(--ink-soft) }
.u-sig{ font-family:var(--font-sig); font-size:38px; color:var(--primary-ink); line-height:1 }

/* Sichtbar nur für Screenreader */
.screen-reader-text{
  border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;
  padding:0;position:absolute;width:1px;word-wrap:normal!important;
}
.skip-link:focus{
  clip-path:none;height:auto;width:auto;z-index:100;
  background:var(--ink);color:var(--bg);padding:12px 20px;border-radius:0 0 var(--r-sm) 0;
  position:absolute;left:0;top:0;
}

/* ==========================================================================
   2 · Kopfbereich / Navigation
   ========================================================================== */
.am-nav{
  position:relative; z-index:50;
  border-bottom:1px solid transparent;
  transition:border-color .3s ease;
}
/* Klebender Kopfbereich. WordPress legt den Vorlagenteil in ein eigenes div,
   das genau so hoch ist wie der Header — sticky auf .am-nav hätte darin keinen
   Weg. Deshalb klebt der Vorlagenteil selbst, unterhalb der Admin-Leiste. */
.wp-site-blocks > .wp-block-template-part:has(> .am-nav){ position:sticky; top:0; z-index:50 }
.admin-bar .wp-site-blocks > .wp-block-template-part:has(> .am-nav){ top:32px }
@media (max-width: 782px){
  .admin-bar .wp-site-blocks > .wp-block-template-part:has(> .am-nav){ top:46px }
}
@media (max-width: 600px){
  /* Unter 600 px scrollt die Admin-Leiste mit weg. */
  .admin-bar .wp-site-blocks > .wp-block-template-part:has(> .am-nav){ top:0 }
}
/* Milchglas auf eigener Ebene. backdrop-filter direkt auf .am-nav macht den
   Header zum Bezugsrahmen für position:fixed — das mobile Overlay-Menü wäre
   dann nur so hoch wie der Header und müsste darin scrollen. */
.am-nav::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:rgba(255,248,244,.78);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
}
.am-nav.is-scrolled{ border-bottom-color:var(--line) }
.am-nav .nav-inner{ padding-block:14px; gap:24px }

.am-nav .logo{ gap:12px!important; align-items:center; flex-wrap:nowrap }
.am-nav .logo-text{ gap:0!important }
.am-nav .logo-text .wp-block-site-title{ margin:0;font-size:18px;line-height:1.15;font-weight:500 }
.am-nav .logo-text .wp-block-site-title a{ color:var(--ink);text-decoration:none }
.am-nav .logo-text .wp-block-site-tagline{
  margin:0;font-size:11px;color:var(--ink-mute);letter-spacing:.08em;
  text-transform:uppercase;font-weight:500;line-height:1.4;
}

.am-nav .nav-links{ font-size:14px }
.am-nav .nav-links .wp-block-navigation__container{ gap:4px }
.am-nav .nav-links .wp-block-navigation-item__content{
  color:var(--ink-soft);padding:8px 14px;border-radius:var(--r-pill);
  transition:background .15s ease,color .15s ease;font-weight:500;
}
.am-nav .nav-links .wp-block-navigation-item__content:hover{
  background:var(--surface);color:var(--ink);text-decoration:none;
}
.am-nav .nav-links .current-menu-item > .wp-block-navigation-item__content{ color:var(--ink) }

.am-nav .nav-cta .wp-block-button__link{
  background:var(--ink);color:var(--bg);padding:10px 18px;font-size:14px;font-weight:500;
  box-shadow:none;transition:transform .15s ease,background .15s ease;
}
.am-nav .nav-cta .wp-block-button__link:hover{ background:var(--primary);transform:translateY(-1px) }

/* Mobiles Menü als Schublade von rechts. Die Seite bleibt abgedunkelt
   dahinter sichtbar; ein Tipp auf die dunkle Fläche schliesst (theme.js). */
/* Selektor bewusst spezifisch: WordPress färbt das Overlay mit
   .wp-block-navigation:not(.has-background) … weiss ein. */
.am-nav .wp-block-navigation.nav-links .wp-block-navigation__responsive-container.is-menu-open{
  display:flex;flex-direction:row;justify-content:flex-end;align-items:stretch;padding:0;
  background:color-mix(in srgb, var(--ink) 45%, transparent);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  color:var(--ink);cursor:pointer;
}
.am-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close{
  width:min(84vw, 360px);max-width:none;height:100%;margin:0;
  background:var(--bg);box-shadow:var(--shadow-lg);cursor:auto;
  border-radius:var(--r-lg) 0 0 var(--r-lg);
  padding:24px 28px;overflow-y:auto;
  animation:fsns-schublade .25s ease-out;
}
.am-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.am-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{
  align-items:flex-start;
}
.am-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{ gap:4px }
.am-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
  font-size:22px;padding:10px 0;color:var(--ink);
}
@keyframes fsns-schublade{ from{ transform:translateX(100%) } to{ transform:none } }
@media (prefers-reduced-motion: reduce){
  .am-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close{ animation:none }
}

/* ==========================================================================
   3 · Buttons
   ========================================================================== */
.wp-block-button__link{
  display:inline-flex;align-items:center;gap:8px;
  border:none;cursor:pointer;font-family:var(--font-body);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.wp-block-button__link:hover{ text-decoration:none }

.is-style-am-primary .wp-block-button__link,
.wp-block-button:not(.is-style-outline):not(.is-style-am-ghost) .wp-block-button__link{
  background:var(--primary);color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 8px 24px -8px rgba(124,58,237,.5);
}
.is-style-am-primary .wp-block-button__link:hover,
.wp-block-button:not(.is-style-outline):not(.is-style-am-ghost) .wp-block-button__link:hover{
  background:var(--primary-ink);transform:translateY(-1px);
}
.is-style-am-ghost .wp-block-button__link{
  background:transparent;color:var(--ink);border:1px solid var(--line);box-shadow:none;
}
.is-style-am-ghost .wp-block-button__link:hover{ background:var(--surface);color:var(--ink);transform:none }

/* Pfeil am Button */
.wp-block-button__link .btn-arrow,
.am-arrow{ display:inline-block;transition:transform .2s ease }
.wp-block-button__link:hover .btn-arrow{ transform:translateX(3px) }

/* ==========================================================================
   4 · Eyebrow / Abschnittskopf
   ========================================================================== */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--primary-ink);font-weight:600;
  background:var(--primary-soft);padding:6px 14px;border-radius:var(--r-pill);
  margin:0 0 28px;
}
.eyebrow::before{ content:"";width:6px;height:6px;border-radius:50%;background:var(--primary);flex:none }

.section-eyebrow{
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--primary-ink);font-weight:600;margin:0 0 18px;
  display:flex;align-items:center;gap:12px;
}
.section-eyebrow::before{ content:"";width:24px;height:1px;background:var(--primary);flex:none }

.section-head{ margin-bottom:64px }
.section-head h2{ margin:0 }
.section-lede{ font-size:19px;color:var(--ink-soft);line-height:1.6;margin:20px 0 0;max-width:640px }

/* ==========================================================================
   5 · Hero
   ========================================================================== */
.am-hero{ padding:80px 0 100px;overflow:hidden }
.am-hero .hero-grid{ gap:80px!important;align-items:center }
.am-hero .hero-copy{ flex-basis:57%!important }
.am-hero .hero-visual{ flex-basis:43%!important }
.am-hero h1{ margin:0 }
.am-hero h1 .accent{ font-style:italic;color:var(--primary-ink);font-weight:400 }
.am-hero h1 .underlined{ position:relative;display:inline-block;z-index:0 }
.am-hero h1 .underlined::after{
  content:"";position:absolute;left:0;right:0;bottom:.04em;height:.32em;
  background:var(--primary-soft);z-index:-1;border-radius:4px;
}
.hero-lede{ font-size:20px;line-height:1.55;color:var(--ink-soft);margin:32px 0 36px;max-width:540px }
.hero-cta-row{ gap:14px!important;margin-bottom:48px!important }
.hero-meta{ gap:32px!important;color:var(--ink-mute);font-size:14px;align-items:center }
.hero-meta .hero-meta-item{ display:flex;align-items:center;gap:8px;margin:0 }
.hero-meta .hero-meta-item::before{
  content:"";width:16px;height:16px;flex:none;background:var(--sage);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Porträt — Foto oder ruhige Verlaufsfläche als Platzhalter */
.hero-portrait{ position:relative;width:100% }
.portrait-frame{
  aspect-ratio:4/5;border-radius:var(--r-xl);overflow:hidden;position:relative;
  background:linear-gradient(135deg,#e8d8c5 0%,#d4b89c 50%,#a89379 100%);
  box-shadow:var(--shadow-lg);
}
.portrait-frame::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 40% 30%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(ellipse at 70% 70%, rgba(124,58,237,.18), transparent 70%);
}
.portrait-frame img,
.portrait-frame .wp-block-image,
.portrait-frame figure{ margin:0;width:100%;height:100%;object-fit:cover;position:relative;z-index:1 }
.portrait-frame .wp-block-image img{ width:100%;height:100%;object-fit:cover;border-radius:0 }
.portrait-label{
  position:absolute;left:20px;top:20px;z-index:2;margin:0;
  font-family:var(--wp--preset--font-family--mono, ui-monospace, Menlo, monospace);
  font-size:11px;color:rgba(0,0,0,.45);
  background:rgba(255,255,255,.7);padding:4px 10px;border-radius:4px;letter-spacing:.04em;
}
.portrait-figure{
  position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);
  width:70%;height:80%;z-index:1;
  background:linear-gradient(180deg,transparent 0%,transparent 38%,#3d2b1e 38%,#3d2b1e 100%);
  border-radius:120px 120px 0 0 / 90px 90px 0 0;opacity:.55;
}
.portrait-figure::before{
  content:"";position:absolute;left:50%;top:8%;transform:translateX(-50%);
  width:38%;aspect-ratio:1;border-radius:50%;background:#d6b08c;opacity:.85;
}
.quote-card{
  position:absolute;right:-30px;bottom:40px;width:240px;z-index:3;
  background:#fff;border-radius:var(--r-md);padding:18px 20px;
  box-shadow:var(--shadow-md);font-size:14px;line-height:1.45;color:var(--ink);font-style:italic;
}
.quote-card::before{
  content:"";position:absolute;left:-1px;top:18px;bottom:18px;width:3px;
  background:var(--primary);border-radius:3px;
}
.quote-card cite{
  display:block;margin-top:10px;font-style:normal;font-size:12px;
  color:var(--ink-mute);font-weight:600;letter-spacing:.04em;
}

/* ==========================================================================
   6 · Laufband
   ========================================================================== */
.marquee{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:22px 0;background:var(--surface);overflow:hidden;
}
.marquee-track{
  display:flex;gap:64px;align-items:center;white-space:nowrap;
  animation:am-marq 38s linear infinite;
  font-style:italic;color:var(--ink-soft);font-size:18px;margin:0;
}
.marquee-track > span{ display:flex;align-items:center;gap:64px }
.marquee-track .dot{ width:6px;height:6px;border-radius:50%;background:var(--primary);display:inline-block;flex:none }
@keyframes am-marq{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion: reduce){ .marquee-track{animation:none} }

/* ==========================================================================
   7 · Zitatband
   ========================================================================== */
.quote-band{ background:var(--surface);padding:96px 0 }
.quote-band blockquote{
  max-width:860px;margin:0 auto;border:0;padding:0;
  font-size:clamp(20px,2.1vw,27px);line-height:1.65;color:var(--ink);text-align:center;text-wrap:pretty;
}
.quote-band blockquote p{ margin:0 0 20px }
.quote-band cite{
  display:block;font-style:normal;font-size:14px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--primary-ink);margin-top:18px;
}

/* ==========================================================================
   8 · Seminare (Akkordeon auf Basis von core/details)
   ========================================================================== */
.sem-list{ display:flex;flex-direction:column;gap:18px;margin-top:56px }
.sem{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  transition:box-shadow .3s,border-color .3s;padding:0;
}
.sem[open]{ border-color:var(--primary);box-shadow:0 18px 50px -28px rgba(124,58,237,.45) }
.sem > summary{
  list-style:none;cursor:pointer;display:grid;grid-template-columns:110px 1fr auto;
  gap:28px;align-items:center;padding:26px 30px;
}
.sem > summary::-webkit-details-marker{ display:none }
.sem > summary::marker{ content:"" }
.sem > summary:focus-visible{ outline:2px solid var(--primary);outline-offset:-4px }
.sem-date{ text-align:center;background:var(--surface);border-radius:12px;padding:12px 8px }
.sem[open] .sem-date{ background:var(--primary-soft) }
.sem-date .d{ font-size:28px;line-height:1;font-weight:700;color:var(--primary) }
.sem-date .m{ font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-top:6px }
.sem-head h3{ font-size:21px;margin:0 0 6px }
.sem-sub{ color:var(--ink-soft);font-size:15px;font-style:italic;margin:0 }
.sem-facts{ display:flex;flex-wrap:wrap;gap:8px;margin-top:12px }
.sem-fact{ font-size:12.5px;background:var(--surface);border-radius:var(--r-pill);padding:5px 12px;color:var(--ink-soft) }
.sem-toggle{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--primary);font-size:20px;flex:none;
  transition:transform .3s,background .3s;
}
.sem[open] .sem-toggle{ transform:rotate(45deg);background:var(--primary);color:#fff;border-color:var(--primary) }
.sem-body{
  padding:26px 30px 30px;display:grid;grid-template-columns:1.35fr 1fr;gap:44px;
  border-top:1px solid var(--line);margin-top:4px;
}
.sem-body p{ color:var(--ink-soft);font-size:16px;line-height:1.75;margin:0 0 14px }
.sem-body .lead{ color:var(--ink);font-size:17px }
.sem-expect{ background:var(--bg);border-radius:14px;padding:24px 26px;align-self:start }
.sem-expect h4{ font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--primary-ink);margin:0 0 14px }
.sem-expect ul{ list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px }
.sem-expect li{ position:relative;padding-left:22px;font-size:15px;line-height:1.6;color:var(--ink-soft) }
.sem-expect li::before{ content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--primary) }
.sem-cta{ margin-top:8px }
.sem-modules{ display:grid;gap:14px;margin:6px 0 18px }
.sem-module{ border-left:2px solid var(--primary);padding:2px 0 2px 16px }
.sem-module strong{ display:block;font-size:15.5px;margin-bottom:4px }
.sem-module span{ font-size:15px;color:var(--ink-soft);line-height:1.65 }

/* ==========================================================================
   9 · Mediation
   ========================================================================== */
.schools-block{
  background:linear-gradient(135deg,#f1ece4 0%,#e8e2d4 100%);
  border-radius:var(--r-xl);padding:64px;
  display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center;
}
.schools-block h2{ font-size:clamp(28px,3vw,40px);margin:0 }
.schools-illust{
  aspect-ratio:1;border-radius:var(--r-lg);overflow:hidden;position:relative;
  background:radial-gradient(circle at 30% 30%,#c9d4bf 0%,#7a9075 60%,#4a5e47 100%);
  box-shadow:var(--shadow-md);
}
.schools-illust::before{
  content:"";position:absolute;inset:20%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.4),transparent 70%);
}
.schools-illust img{ width:100%;height:100%;object-fit:cover;position:relative;z-index:1 }

.check-list{ list-style:none;padding:0;margin:24px 0 0;display:grid;gap:14px }
.check-list li{
  display:flex;gap:14px;align-items:flex-start;font-size:16px;color:var(--ink-soft);
}
.check-list li::before{
  content:"";flex:none;width:24px;height:24px;border-radius:50%;margin-top:2px;
  background:var(--sage-soft);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b8c6a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size:14px 14px;background-position:center;background-repeat:no-repeat;
}

/* ==========================================================================
   10 · Über mich
   ========================================================================== */
.about-grid{ display:grid;grid-template-columns:1fr 1.3fr;gap:80px;align-items:start }
.about-portrait{
  position:sticky;top:120px;
  aspect-ratio:4/5;border-radius:var(--r-xl);overflow:visible;
  background:linear-gradient(160deg,#dfd0c2 0%,#b89d83 70%,#7d6650 100%);
  box-shadow:var(--shadow-md);
}
.about-portrait > .wp-block-image,
.about-portrait > figure{
  margin:0;position:absolute;inset:0;border-radius:var(--r-xl);overflow:hidden;
}
.about-portrait img{ width:100%;height:100%;object-fit:cover }
.about-portrait .portrait-label{ left:18px;top:18px }
.about-name-card{
  position:absolute;right:-24px;bottom:32px;z-index:3;
  background:#fff;padding:18px 22px;border-radius:var(--r-md);box-shadow:var(--shadow-md);
}
.about-name-card .name{ font-size:18px;font-weight:500;margin:0 }
.about-name-card .role{
  font-size:12px;color:var(--ink-mute);letter-spacing:.06em;
  text-transform:uppercase;margin:4px 0 0;font-weight:600;
}
.about-body p{ font-size:18px;line-height:1.7;color:var(--ink-soft);margin-bottom:1.2em }
.about-body strong{ color:var(--ink);font-weight:600 }
.about-tags{ display:flex;flex-wrap:wrap;gap:8px;margin-top:32px }
.about-tag{
  font-size:13px;background:var(--surface);color:var(--ink-soft);
  padding:6px 14px;border-radius:var(--r-pill);font-weight:500;border:1px solid var(--line);
}
.about-signature{ font-family:var(--font-sig);font-size:38px;color:var(--primary-ink);line-height:1;margin-top:24px }

/* ==========================================================================
   11 · Kontakt
   ========================================================================== */
.contact-grid{ display:grid;grid-template-columns:1.1fr 1fr;gap:80px;align-items:start }
.contact-list{ margin-top:40px;display:grid;gap:0 }
.contact-item{
  display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:20px;
  padding:20px 0;border-bottom:1px solid var(--line);
  text-decoration:none;color:var(--ink);transition:transform .2s ease;
}
.contact-item:hover{ transform:translateX(4px);text-decoration:none }
.contact-icon{
  width:44px;height:44px;border-radius:50%;background:var(--primary-soft);color:var(--primary-ink);
  display:grid;place-items:center;
}
.contact-item .label{ font-size:12px;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.1em;font-weight:600 }
.contact-item .value{ font-size:20px;font-weight:500;color:var(--ink) }
.contact-item .arr{ color:var(--ink-mute);transition:color .2s ease }
.contact-item:hover .arr{ color:var(--primary) }

.contact-form{ background:var(--surface);padding:40px;border-radius:var(--r-lg) }
.contact-form h3{ margin:0 0 24px }
.contact-form .row{ display:grid;grid-template-columns:1fr 1fr;gap:14px }
.contact-form label{
  display:block;font-size:13px;font-weight:600;color:var(--ink-soft);
  margin-bottom:6px;letter-spacing:.04em;
}
.contact-form input,
.contact-form textarea,
.contact-form select{
  width:100%;padding:13px 16px;border:1px solid var(--line);border-radius:var(--r-sm);
  font-family:inherit;font-size:15px;background:var(--bg);color:var(--ink);
  transition:border-color .15s ease;margin-bottom:16px;resize:vertical;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus{ outline:none;border-color:var(--primary);background:#fff }
.contact-form textarea{ min-height:130px }
.contact-form button[type=submit]{
  width:100%;justify-content:center;display:inline-flex;align-items:center;gap:8px;
  padding:14px 24px;border-radius:var(--r-pill);font-weight:600;font-size:15px;
  border:none;cursor:pointer;font-family:var(--font-body);
  background:var(--primary);color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 8px 24px -8px rgba(124,58,237,.5);
  transition:background .15s ease, transform .15s ease;
}
.contact-form button[type=submit]:hover:not(:disabled){ background:var(--primary-ink);transform:translateY(-1px) }
.contact-form button[type=submit]:disabled{ opacity:.6;cursor:progress }
.contact-form .fineprint{ font-size:12px;color:var(--ink-mute);margin:14px 0 0;line-height:1.5 }
.contact-form .form-status{ margin:14px 0 0;font-size:14px }
.contact-form .form-status.is-error{ color:var(--terracotta) }
.form-success{ text-align:center;padding:40px 24px }
.form-success .check-big{
  width:56px;height:56px;border-radius:50%;background:var(--sage-soft);color:var(--sage);
  display:grid;place-items:center;margin:0 auto 16px;
}
.form-success h3{ margin-bottom:10px }
.form-success p{ color:var(--ink-soft);margin:0 }

/* ==========================================================================
   12 · Fussbereich
   ========================================================================== */
.am-footer{ background:var(--ink);color:#a89a8a;padding:80px 0 32px;font-size:14px }
.am-footer h4{
  color:var(--cream);font-size:13px;text-transform:uppercase;
  letter-spacing:.12em;font-weight:600;margin:0 0 18px;
}
.am-footer p{ margin:0 0 10px }
.am-footer ul{ list-style:none;padding:0;margin:0;display:grid;gap:10px }
.am-footer a{ color:#a89a8a;text-decoration:none }
.am-footer a:hover{ color:var(--cream);text-decoration:none }
.am-footer .wp-block-navigation{ display:block }
.am-footer .wp-block-navigation__container{ display:grid;gap:10px;align-items:start }
.am-footer .wp-block-navigation-item__content{ color:#a89a8a;font-size:14px }
.am-footer .wp-block-navigation-item__content:hover{ color:var(--cream) }
.foot-grid{ display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:48px;margin-bottom:64px }
.foot-logo{ font-size:24px;color:var(--cream);font-weight:400;margin:0 0 12px;line-height:1.2 }
.foot-tag{ color:#7d7062;line-height:1.6;margin:0 0 24px;max-width:320px }
.foot-sig{ font-family:var(--font-sig);font-size:30px;color:var(--cream);line-height:1;margin:0 }
.foot-bottom{
  padding-top:32px;border-top:1px solid rgba(255,255,255,.08);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;color:#7d7062;font-size:13px;
}
.foot-bottom p{ margin:0 }

/* ==========================================================================
   13 · Rechtliche Seiten
   ========================================================================== */
.legal-head{ padding:72px 0 48px;border-bottom:1px solid var(--line) }
.legal-head h1{ font-size:clamp(38px,5vw,64px);margin:0 }
.legal-head .lead{ font-size:19px;color:var(--ink-soft);margin-top:18px;max-width:640px }
.legal-head .updated{ font-size:13px;color:var(--ink-mute);margin-top:12px }
.legal-body{ padding:64px 0 96px }
.legal-body h2{ font-size:24px;margin:48px 0 14px }
.legal-body h2:first-child{ margin-top:0 }
.legal-body p,.legal-body li{ color:var(--ink-soft);font-size:16.5px;line-height:1.75 }
.legal-body ul{ padding-left:22px;display:grid;gap:8px;margin:0 0 1em }
.legal-body .card{
  background:var(--surface);border-radius:var(--r-lg);padding:28px 32px;margin:0 0 1em;
}
.legal-body .card .who{ display:block;font-weight:600;color:var(--ink);font-size:18px;margin-bottom:4px }
.legal-body .contact-line{ display:flex;align-items:center;gap:10px;margin:6px 0 0 }
.back-link{ color:var(--ink-soft);font-size:14px;font-weight:500 }
.back-link:hover{ color:var(--primary) }

/* ==========================================================================
   14 · Animation beim Scrollen
   ========================================================================== */
.reveal{ opacity:0;transform:translateY(24px);transition:opacity .8s ease, transform .8s ease }
.reveal.is-in{ opacity:1;transform:none }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1;transform:none;transition:none }
}
.no-js .reveal{ opacity:1;transform:none }

/* ==========================================================================
   15 · Responsive
   ========================================================================== */
@media (max-width: 980px){
  .am-hero{ padding:48px 0 64px }
  .am-hero .hero-grid{ flex-direction:column;gap:40px!important }
  .am-hero .hero-copy,.am-hero .hero-visual{ flex-basis:100%!important;width:100% }
  .about-grid,.contact-grid,.schools-block{ grid-template-columns:1fr;gap:40px }
  .schools-block{ padding:36px }
  .schools-illust{ display:none }
  .foot-grid{ grid-template-columns:1fr 1fr;gap:36px }
  .am-section{ padding:80px 0 }
  .quote-card{ position:static;width:auto;margin-top:24px }
  .about-portrait{ position:relative;top:auto }
  .about-name-card{ right:16px }
  .contact-form{ padding:24px }
  .hero-meta{ gap:16px 24px!important }
}
@media (max-width: 860px){
  .sem > summary{ grid-template-columns:80px 1fr;gap:18px;padding:20px;align-items:start }
  .sem-toggle{ display:none }
  .sem-body{ grid-template-columns:1fr;gap:26px;padding:22px 20px 26px }
  .quote-band{ padding:64px 0 }
}
@media (max-width: 600px){
  .foot-grid{ grid-template-columns:1fr;gap:32px }
  .contact-form .row{ grid-template-columns:1fr }
  .contact-item{ grid-template-columns:40px 1fr auto;gap:14px }
  .contact-item .value{ font-size:17px }
  .legal-body .card{ padding:22px 20px }
}

/* ==========================================================================
   16 · Editor-Feinschliff
   ========================================================================== */
.editor-styles-wrapper .am-nav{ position:relative }
.editor-styles-wrapper .about-portrait{ position:relative;top:auto }
.editor-styles-wrapper .reveal{ opacity:1;transform:none }
.editor-styles-wrapper .marquee-track{ animation:none }

/* ==========================================================================
   17 · Details-Block als Seminarkarte (Inline-Elemente im <summary>)
   ========================================================================== */
.sem.wp-block-details{ padding:0;background:#fff }
.sem > summary{ padding:26px 30px }
.sem .sem-date{ display:block }
.sem .sem-date .d,
.sem .sem-date .m{ display:block }
.sem .sem-head{ display:block;min-width:0 }
.sem .sem-title{
  display:block;font-size:21px;font-weight:600;line-height:1.2;
  color:var(--ink);margin-bottom:6px;
}
.sem .sem-sub{ display:block }
.sem .sem-facts{ display:flex }
.sem .sem-body > .sem-text > *:last-child{ margin-bottom:0 }
.sem .sem-expect .wp-block-list{ list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px }
.sem .sem-expect .wp-block-list li{ position:relative;padding-left:22px;font-size:15px;line-height:1.6;color:var(--ink-soft) }
.sem .sem-expect .wp-block-list li::before{ content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--primary) }

/* ==========================================================================
   18 · Layout-Korrekturen zum Block-Editor
   --------------------------------------------------------------------------
   WordPress zentriert in „constrained“-Layouts jedes Kind mit
   `margin-inline:auto !important`. Die schmalen Textblöcke sollen aber links
   stehen bleiben, wie im Entwurf.
   ========================================================================== */
.section-lede,
.hero-lede,
.u-lede,
.foot-tag{
  margin-left:0!important;
  margin-right:0!important;
}

/* Seitliche Ränder: die Sektionen tragen sie selbst, damit vollflächige
   Hintergründe (Laufband, Zitatband, Fussbereich) bis zum Rand reichen. */
.am-nav .nav-inner,
.am-section,
.am-hero,
.quote-band,
.wrap-narrow,
.am-footer{
  padding-inline:32px;
}

/* Schmale Textspalte der rechtlichen Seiten — entspricht `.wrap-narrow`
   im Entwurf (880 px inkl. 32 px Rand). */
.wrap-narrow{ max-width:880px;margin-inline:auto }
.am-nav .nav-inner{ padding-block:14px }
.am-hero{ padding-block:80px 100px }
.am-section{ padding-block:clamp(72px,9vw,120px) }
.am-section.is-tight{ padding-block:clamp(56px,7vw,96px) }
.quote-band{ padding-block:96px }
.legal-head{ padding-block:72px 48px }
.legal-body{ padding-block:64px 96px }
.legal-head > .wrap-narrow,
.legal-body > .wrap-narrow{ padding-block:0 }
.am-footer{ padding-block:80px 32px }

@media (max-width: 600px){
  .am-nav .nav-inner,
  .am-section,
  .am-hero,
  .quote-band,
  .wrap-narrow,
  .am-footer{ padding-inline:20px }
}

/* Kontaktliste: Label über Wert, wie im Entwurf */
.contact-item > span:not(.contact-icon):not(.arr){ display:block;min-width:0 }
.contact-item .label,
.contact-item .value{ display:block }

/* Signatur im „Über mich“-Abschnitt — schlägt `.about-body p` */
.about-body p.about-signature,
.about-body .about-signature{ font-size:38px;line-height:1;margin-top:24px;margin-bottom:0 }

/* Der Details-Block bringt eigene Ränder mit */
.sem.wp-block-details{ border:1px solid var(--line) }
.sem[open].wp-block-details{ border-color:var(--primary) }

/* ==========================================================================
   19 · Navigation auf kleinen Bildschirmen
   ========================================================================== */
@media (max-width: 980px){
  .am-nav .nav-right{ gap:10px!important }
}
@media (max-width: 700px){
  .am-nav .nav-inner{ gap:12px!important }
  .am-nav .logo{ gap:10px!important;min-width:0 }
  .am-nav .logo-text .wp-block-site-title{ font-size:14.5px;white-space:nowrap }
  .am-nav .logo-text .wp-block-site-tagline{ font-size:9.5px;white-space:nowrap }
  .am-nav .nav-cta .wp-block-button__link{ font-size:13px;padding:8px 14px;white-space:nowrap }
}
@media (max-width: 420px){
  .am-nav .nav-cta{ display:none }
  .am-nav .logo-text .wp-block-site-title{ font-size:15px }
}

/* ==========================================================================
   20 · Anmeldeformular — baut auf .contact-form auf (Abschnitt 10)
   ========================================================================== */
.anmeldung-form{ margin:32px 0 40px }
.anmeldung-form select option:disabled{ color:var(--ink-mute) }
.anmeldung-form .form-status{ margin:0 0 20px }

.contact-form .form-check{
	display:flex;align-items:flex-start;gap:10px;
	margin:18px 0 0;font-size:14px;line-height:1.5;color:var(--ink)
}
.contact-form .form-check label{
	display:flex;align-items:flex-start;gap:10px;
	margin:0;font-size:14px;font-weight:400;letter-spacing:0;text-transform:none;cursor:pointer
}
.contact-form .form-check input[type=checkbox]{
	width:auto;margin:2px 0 0;padding:0;flex:0 0 auto;accent-color:var(--primary)
}
.legal-body .contact-form a{ color:var(--primary-ink) }

/* ==========================================================================
   21 · Labels im Fussbereich — helle Kacheln, weil die Logos eigene
   Hintergründe mitbringen
   ========================================================================== */
.foot-labels{ margin:0 0 40px;padding-top:32px;border-top:1px solid rgba(255,255,255,.08) }
.am-footer .foot-labels-title{
	color:var(--cream);font-size:13px;text-transform:uppercase;
	letter-spacing:.12em;font-weight:600;margin:0 0 18px
}
.am-footer .foot-labels ul{ display:flex;flex-wrap:wrap;gap:16px;align-items:stretch }
.foot-labels li{ margin:0 }
.foot-labels a{
	display:flex;align-items:center;justify-content:center;
	height:72px;padding:10px 16px;background:#fff;border-radius:var(--r-md, 12px);
	transition:transform .2s ease, box-shadow .2s ease
}
.foot-labels a:hover{ transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.25) }
.foot-labels img{ display:block;height:100%;width:auto;max-width:220px;object-fit:contain }
@media (max-width: 600px){
	.am-footer .foot-labels ul{ gap:12px }
	.foot-labels a{ height:60px;padding:8px 12px }
	.foot-labels img{ max-width:180px }
}

/* ==========================================================================
   22 · Porträtfoto — Ausschnitt aufs Gesicht, Verlauf dahinter bleibt als
   Ladefläche
   ========================================================================== */
.portrait-photo{ object-position:50% 28% }
.portrait-frame:has(.portrait-photo)::before{ display:none }

/* ==========================================================================
   23 · Seminarkarten auf schmalen Bildschirmen — sichtbar aufklappbar
   Unter 860 px ist neben Datum und Text kein Platz für das runde Zeichen.
   Stattdessen bekommt jede Karte eine Fusszeile mit Text, das Zeichen sitzt
   rechts darin. Der Text entsteht im CSS, damit die Seiteninhalte unberührt
   bleiben. Steht am Ende, weil Abschnitt 17 das Innenmass sonst überschreibt.
   ========================================================================== */
@media (max-width: 860px){
  .sem > summary{ position:relative;padding:20px 20px 0;row-gap:16px }
  .sem > summary::after{
    content:"Details und Anmeldung";
    grid-column:1 / -1;
    display:flex;align-items:center;height:52px;
    margin:0 -20px;padding:0 70px 0 20px;
    border-top:1px solid var(--line);
    font-size:14px;font-weight:600;letter-spacing:.01em;color:var(--primary-ink);
  }
  .sem[open] > summary::after{ content:"Weniger anzeigen" }
  .sem > summary .sem-toggle{
    display:grid;position:absolute;right:14px;bottom:8px;
    width:36px;height:36px;font-size:18px;
  }
}