/* ==========================================================================
   Friedenspraxis – Website, Seitenlayout
   Stylesheets in dieser Reihenfolge laden:
     fonts/fonts.css      Saira + Source Sans 3, lokal (mit latin-ext)
     css/tokens.css       Designsystem: Farben, Schriften, Abstände, Radien, Schatten
     css/components.css   Designsystem: Komponenten (Button, Karten, Zitat, Baukasten …)
     css/styles.css       diese Datei: Navigation, Hero, Abschnitte, Footer, Unterseite,
                          Rechtsseiten, Bewegung und Anpassungen der Komponenten für schmale Bildschirme
   tokens.css und components.css nicht von Hand ändern: Quelle ist das Designsystem im
   Vereins-Repo (Branding/Designsystem/), übernommen mit scripts/designsystem_uebernehmen.py.
   ========================================================================== */

/* Die Tokens nennen das Maximum, hier stehen die fluiden Formeln aus dem Designsystem */
:root{
  --section-y:clamp(64px,9vw,112px);
  --head-gap:clamp(32px,5vw,56px);
  --grid-gap:clamp(28px,4vw,40px);
  --card-pad:clamp(24px,4vw,40px);
}
/* Kein Dark Mode: Seite immer hell, unabhängig von der Geräteeinstellung.
   Die früheren Dunkel-Werte stehen im Git-Verlauf (Commit bf07e91). */
:root{color-scheme:light}

/* ---------- Basis ---------- */
html{scroll-behavior:smooth}
body{overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
section{padding-block:var(--section-y)}
.sec-head{margin-bottom:var(--head-gap)}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--green);color:var(--navy);padding:10px 14px;border-radius:var(--r-sm);font-weight:700}
.skip:focus{left:16px}
.has-photo{background-size:cover;background-position:center;background-repeat:no-repeat}   /* Duotone-Fotos als Hintergrund der Bänder */

/* Überschriften und Zitat ohne Silbentrennung (Stefan, 01.10.); Umbruch im Wort nur als Notfall gegen Überlaufen */
h1,h2,h3,blockquote,.big{hyphens:manual;-webkit-hyphens:manual;overflow-wrap:break-word}

/* Stilelement „Unterstreichung Schwung“ unter dem pinken Wort einer Überschrift:
   108 % so breit wie das Wort, nur proportional skaliert (Form 10 : 1), pink auf Hell, grün auf Navy.
   Nur für kurze Wörter: Bei langen wird der Strich zu dick. Der untere Rand schafft in eng gesetzten
   Überschriften Platz bis zur nächsten Zeile. */
.ul{position:relative;display:inline-block;margin-bottom:.1em}
.ul::after{content:"";position:absolute;left:-4%;top:calc(100% - .18em);width:108%;aspect-ratio:10/1;background:var(--pink);-webkit-mask:var(--ul-schwung) center/100% 100% no-repeat;mask:var(--ul-schwung) center/100% 100% no-repeat;pointer-events:none}
.panel .ul::after{background:var(--green)}

/* ---------- Navigation ---------- */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--ground) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:box-shadow .3s}
.nav.scrolled{box-shadow:var(--nav-scrolled)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:12px}
.nav .logo img{height:40px;width:auto}
.nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.nav ul a{white-space:nowrap;text-decoration:none;font:600 16px/1 var(--body);position:relative;padding-block:6px}
.nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:3px;background:var(--pink);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.nav ul a:hover::after,.nav ul a[aria-current]::after{transform:scaleX(1)}
.nav-ctas{display:flex;gap:10px}
.burger{display:none;min-width:44px;min-height:44px;background:none;border:0;color:var(--ink);font:700 14px var(--display);letter-spacing:.1em;cursor:pointer}
@media (max-width:1100px){
  .burger{display:block}
  .nav-ctas{display:none}
  .nav ul a.m-cta{color:var(--pink-ink)}
  .nav ul{display:none;position:absolute;left:0;right:0;top:100%;background:var(--ground);flex-direction:column;gap:0;padding:8px var(--gutter) 20px;box-shadow:var(--nav-scrolled)}
  .nav.open ul{display:flex}
  .nav ul a{display:block;padding-block:14px;font-size:19px}
}
@media (min-width:1101px){.nav .m-only{display:none}}

/* ---------- Hero ----------
   Signet groß in der Mitte, dahinter das Klassenfoto im Kreis. Der Satz steht links und rechts davon,
   darunter Name und Zusatz, dann die Buttons. Bis 1100 px Breite steht alles untereinander.
   Bühne: Breite --s, Abstand nach oben und unten --mt. Der Fotokreis reicht 6 % über die Bühne hinaus
   (in der Szene bis 9 %); der zweite Summand von --mt ist die sichtbare Luft.
   .hero-text und h1 sind display:contents, damit ihre Teile einzeln im Raster der .wrap stehen. */
.hero{padding-block:clamp(28px,3.4vw,44px) clamp(44px,5.4vw,68px)}
.hero .wrap{--s:min(440px,44vh,72vw);--mt:calc(var(--s)*.06 + clamp(36px,4.4vw,60px));position:relative;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
.hero-text,.hero h1{display:contents}
.hero h1{font-size:clamp(24px,2.9vw,40px);font-weight:700;font-style:italic;text-transform:uppercase;letter-spacing:-.01em;line-height:1.06}
.hero h1 .l{display:block;order:2;max-width:25em;animation:rise .9s cubic-bezier(.2,.8,.2,1) .1s both}
.hero h1 .l2{order:3;animation-delay:.22s}
.hero h1 em{font-style:inherit;color:var(--green)}   /* hervorgehobene Begriffe: grün, „heute in den Klassen“ pink */
.hero h1 em.pink{color:var(--pink)}
.hero .nb{white-space:nowrap}
.hero .absender{order:4;display:grid;justify-items:center;margin-top:clamp(22px,2.6vw,30px);font:400 18px/1.35 var(--body);color:var(--on-dark-muted)}
.hero .absender .name{font:700 italic 18px/1.35 var(--display);letter-spacing:.05em;text-transform:uppercase;color:var(--green)}
.hero .absender .sep{display:none}   /* Gedankenstrich nur in der einzeiligen Fassung am Desktop */
.hero .ctas{order:5;display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:clamp(26px,3vw,36px)}
@keyframes rise{from{transform:translateY(40%);opacity:.2}to{transform:none;opacity:1}}

.stage{order:1;position:relative;aspect-ratio:1;width:var(--s);margin-block:var(--mt) calc(var(--s)*.16 + clamp(40px,5vw,60px));justify-self:center}
/* Signet: zwei weiche Körper (js/signet.js). Ohne JavaScript und bei reduzierter Bewegung steht die Bildmarke ruhig. */
.stage .signet{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.stage .ring-photo{filter:brightness(1.55)}   /* das Duotone-Foto ist dunkler als Navy; ohne Aufhellung wirkt der Kreis wie ein Loch */
.stage .half-a{fill:var(--green)}
.stage .half-b{fill:#fff}
.stage .wave{fill:none;stroke:var(--green);vector-effect:non-scaling-stroke}
.stage.live{cursor:pointer;touch-action:manipulation}
.stage .caption{position:absolute;left:50%;bottom:-16%;translate:-50% 0;white-space:nowrap;font:700 13px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-muted)}   /* nennt den Schritt der Szene */
@media (max-width:480px){.hero .ctas{gap:10px}.hero .ctas .btn{padding:14px 18px;font-size:17px}}   /* beide Buttons in einer Zeile */
@media (min-width:1101px){
  .hero .wrap{--s:min(440px,44vh,30vw);max-width:1320px;grid-template-columns:minmax(0,1fr) var(--s) minmax(0,1fr);column-gap:clamp(64px,7.5vw,112px)}
  .hero h1{font-size:clamp(22px,2.3vw,32px);line-height:1.1}
  .stage{grid-column:2;grid-row:1;margin-block:var(--mt)}
  .stage .caption{bottom:auto;top:-16%}   /* unter dem Signet steht hier der Absender */
  .hero h1 .l{grid-row:1;align-self:center;max-width:none}
  .hero h1 .l1{grid-column:1;justify-self:end;text-align:right}
  .hero h1 .l2{grid-column:3;justify-self:start;text-align:left}
  .hero .nb{white-space:normal}
  .hero .nb span{white-space:nowrap}
  .hero .absender{grid-column:1/-1;grid-row:2;display:block;margin-top:0}
  .hero .absender .sep{display:inline}
  .hero .ctas{grid-column:1/-1;grid-row:3;margin-top:clamp(24px,2.6vw,32px)}
}
@media (prefers-reduced-motion:reduce){.hero h1 .l{animation:none}}

/* ---------- Worum es geht ---------- */
.intro{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,72px);align-items:start}
.intro .big{font:700 italic clamp(28px,3.4vw,42px)/1.1 var(--display);text-transform:uppercase;color:var(--ink)}   /* Statement, Schluss in pink */
.intro .text{display:grid;gap:20px;font-size:20px}
@media (max-width:860px){.intro{grid-template-columns:1fr}}
@media (max-width:480px){.verbs{gap:12px}.verbs span{font-size:17px;padding-inline:10px}}   /* „Kommunizieren“ passt sonst nicht in die halbe Breite */

/* ---------- Zitat ---------- */
.quote{padding-block:clamp(56px,8vw,104px)}
.quote .q-start{display:none;font:700 italic 88px/.7 var(--display);color:var(--pink)}   /* nur Handy: „ links unter dem Zitat */
@media (max-width:640px){.quote .wrap{grid-template-columns:1fr}.quote .after{grid-column:auto}.quote .mark{display:none}.quote blockquote{padding:58px 0 62px}.quote .q-start,.quote .q-end{position:absolute;font-size:88px;margin:0}.quote .q-end{top:0;right:0;left:auto}.quote .q-start{display:block;bottom:0;left:0}}
@media (max-width:480px){.quote blockquote{font-size:24px}}

/* ---------- Wie wir arbeiten: Baukasten und Info-Karten ---------- */
.elements + .facts{margin-top:clamp(48px,7vw,88px)}

/* ---------- Haltung, Wirkung, Team ---------- */
@media (max-width:480px){.stance h3{font-size:20px}}
@media (max-width:640px){.impact{grid-template-columns:1fr}}
.person .li svg{width:18px;height:18px;flex:none;transition:transform .25s}
.person .li:hover span{text-decoration:underline;text-underline-offset:3px}
.person .li:hover svg{transform:translate(3px,-3px)}   /* Pfeil wandert 4 px in seine Richtung */
@media (max-width:760px){.team{grid-template-columns:1fr}}
@media (max-width:480px){.person{grid-template-columns:120px 1fr;gap:10px 20px}.person > p,.person > .li{grid-column:1/-1}.photo{grid-row:auto}}

/* ---------- Mitmachen-Band ---------- */
.join-more .arr{display:inline-block;transition:transform .25s}.join-more:hover .arr{transform:translateX(4px)}

/* ---------- Footer (folgt im Designsystem, sobald das Logo feststeht) ---------- */
footer{background:var(--navy);color:var(--on-dark-muted);margin-top:clamp(48px,7vw,88px);padding-block:clamp(48px,6vw,72px) 32px;position:relative;overflow:hidden}
footer .grid{display:grid;grid-template-columns:1.5fr 1fr;gap:32px}
footer .about{display:grid;gap:18px;align-content:start}
footer .about img{height:44px;width:auto}
footer .about p{font-size:16px;max-width:38ch}
footer h4{margin:0 0 14px;color:#fff;font:700 14px/1 var(--display);letter-spacing:.14em;text-transform:uppercase}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:16px}
footer a{text-decoration:none;color:var(--green)}footer a:hover{text-decoration:underline}
footer .legal{margin-top:48px;padding-top:24px;border-top:1px solid var(--navy-700);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:14px}
footer .legal a{color:var(--on-dark-muted)}
@media (max-width:860px){footer .grid{grid-template-columns:1fr}}

/* ---------- Unterseite Mitmachen ---------- */
.page-hero{padding-block:clamp(48px,7vw,96px)}
.page-hero h1{margin-top:20px;font-size:clamp(40px,6vw,80px);font-weight:700;font-style:italic;text-transform:uppercase;line-height:.95;max-width:18ch}   /* 18ch: „Mitgestalter:innen“ bleibt am Desktop in einer Zeile */
.page-hero .lead{color:var(--on-dark);margin-top:24px}
.prose{display:grid;gap:22px;max-width:68ch;font-size:19px}

/* ---------- Impressum und Datenschutz ----------
   Lesetext: schmale Spalte, ruhige Zwischenüberschriften, Angaben als Liste mit Haarlinien. */
.page-hero.schlicht{padding-block:clamp(40px,6vw,72px)}
.page-hero.schlicht h1{margin-top:0;max-width:none;font-size:clamp(34px,5vw,64px)}
.page-hero .ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}   /* Fehlerseite */
.recht{max-width:68ch}
.recht > * + *{margin-top:16px}
.recht h2{margin-top:clamp(40px,5vw,56px);font-size:clamp(22px,2.4vw,28px);letter-spacing:0;line-height:1.1}
.recht h2:first-child{margin-top:0}
.recht a{color:var(--pink-ink);text-underline-offset:3px;text-decoration-thickness:1px}
.recht a:hover{color:var(--ink)}
.recht dl{display:grid;grid-template-columns:13em minmax(0,1fr);margin-bottom:0;border-bottom:1px solid var(--line)}
.recht dt,.recht dd{margin:0;padding-block:11px;border-top:1px solid var(--line)}
.recht dt{padding-right:28px;font:600 16px/1.6 var(--body);color:var(--muted)}
.recht small,.recht .stand{font-size:16px;color:var(--muted)}
.recht code{font:600 .92em/1 var(--body);padding:2px 6px;border-radius:6px;background:var(--surface)}
.recht .zurueck{display:inline-flex;gap:8px;margin-top:clamp(24px,3vw,40px);font:700 18px/1.3 var(--display);color:var(--ink);text-decoration:none}
.recht .zurueck:hover{text-decoration:underline;text-underline-offset:4px}
.recht .zurueck .arr{transition:transform .25s}
.recht .zurueck:hover .arr{transform:translateX(-4px)}
@media (max-width:560px){
  .recht dl{grid-template-columns:minmax(0,1fr)}
  .recht dd{padding-top:0;border-top:0}
  .recht dt{padding-bottom:2px}
}

/* ---------- Einblenden beim Scrollen ---------- */
.js .rv{transform:translateY(28px);opacity:.001;transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .9s}
.js .rv.in{transform:none;opacity:1}
@media (prefers-reduced-motion:reduce){.js .rv{transform:none;opacity:1}}