/* Dialektika – Panta Rhei e.V. — Neckar-Blau, Fachwerk-Rot, Kalkweiß */
@font-face{font-family:"Lora";src:url("fonts/lora.woff") format("woff");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Lora";src:url("fonts/lora-italic.woff") format("woff");font-weight:400 700;font-style:italic;font-display:swap}
:root{
  --paper:#F6F7F5; --ink:#1D2A2F; --soft:#4A5A5F; --river:#2D5C68; --river-deep:#1E414A;
  --fachwerk:#8E2C26; --stone:#DCD6CB; --mist:#E7EDEC;
  --serif:"Lora",Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --measure:68ch;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:1.0625rem;line-height:1.7}
img{max-width:100%;height:auto;display:block}
a{color:var(--river)}
a:hover{color:var(--fachwerk)}
:focus-visible{outline:3px solid var(--fachwerk);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.5rem 1rem;z-index:10}
.skip:focus{left:1rem}

/* Kopfzeile */
.site-header{background:var(--paper);border-bottom:1px solid var(--stone)}
.bar{max-width:1180px;margin:0 auto;padding:.9rem 1.25rem;display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink)}
.brand svg{width:40px;height:40px;flex:none}
.brand span{font-size:1.15rem;font-weight:600;line-height:1.15}
.brand small{display:block;font-family:var(--sans);font-size:.78rem;font-weight:400;color:var(--soft)}
.nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:.25rem 1.1rem;font-family:var(--sans);font-size:.93rem}
.nav a{text-decoration:none;color:var(--ink);padding:.3rem 0;border-bottom:2px solid transparent}
.nav a:hover{color:var(--river)}
.nav a[aria-current="page"]{border-bottom-color:var(--fachwerk)}
.lang{font-family:var(--sans);font-size:.85rem;border:1px solid var(--stone);padding:.2rem .6rem;border-radius:3px;text-decoration:none;color:var(--soft)}

/* Startbild */
.hero{position:relative;min-height:min(78vh,720px);display:flex;align-items:flex-end;color:#fff;background:var(--river-deep)}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,38,44,.82) 0%,rgba(20,38,44,.35) 45%,rgba(20,38,44,0) 75%)}
.hero-text{position:relative;z-index:1;max-width:1180px;width:100%;margin:0 auto;padding:2rem 1.25rem 3rem}
.hero h1{font-size:clamp(2.4rem,6vw,4.6rem);line-height:1.05;margin:0 0 .4rem;font-weight:600;letter-spacing:-.01em}
.hero .flow{display:block;width:min(420px,70vw);height:22px;margin:.2rem 0 1rem}
.hero p{max-width:40ch;font-size:clamp(1.1rem,2vw,1.35rem);margin:0;line-height:1.5}
.hero .credit{position:absolute;right:1rem;bottom:.6rem;z-index:1;font-family:var(--sans);font-size:.72rem;opacity:.75}

.page-head{background:var(--mist);border-bottom:1px solid var(--stone)}
.page-head .wrap{padding-top:2.6rem;padding-bottom:2.2rem}
.page-head h1{font-size:clamp(2rem,4.5vw,3rem);line-height:1.15;margin:0 0 .5rem;font-weight:600}
.page-head p{margin:0;max-width:var(--measure);color:var(--soft);font-size:1.12rem}

/* Inhalt */
.wrap{max-width:1180px;margin:0 auto;padding-left:1.25rem;padding-right:1.25rem}
main section{padding:3.2rem 0}
main section + section{border-top:1px solid var(--stone)}
.prose{max-width:var(--measure)}
h2{font-size:clamp(1.55rem,3vw,2.1rem);line-height:1.2;margin:0 0 1rem;font-weight:600;color:var(--river-deep)}
h3{font-size:1.25rem;line-height:1.3;margin:1.8rem 0 .5rem;font-weight:600}
p{margin:0 0 1rem}
.lead{font-size:1.2rem;line-height:1.6}
.muted{color:var(--soft)}
ul.plain{padding-left:1.1rem;margin:0 0 1rem}
ul.plain li{margin-bottom:.35rem}

.split{display:grid;grid-template-columns:1fr;gap:2rem;align-items:start}
@media(min-width:860px){.split{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:3.5rem}.split.flip>:first-child{order:2}}
figure{margin:0}
figcaption{font-family:var(--sans);font-size:.82rem;color:var(--soft);margin-top:.45rem;line-height:1.45}
.photo img{width:100%;border-radius:2px}
.photo.tall img{aspect-ratio:4/5;object-fit:cover}

/* Arbeitslinien: drei gleichwertige Felder, keine Nummern */
.lines{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--stone);margin-top:1.5rem}
@media(min-width:760px){.lines{grid-template-columns:repeat(3,1fr)}.lines>div+div{border-left:1px solid var(--stone)}}
.lines>div{padding:1.4rem 1.4rem 1.2rem 0}
@media(min-width:760px){.lines>div+div{padding-left:1.4rem}}
.lines h3{margin-top:0;color:var(--fachwerk);font-size:1.12rem}
.lines p{margin:0;font-size:1rem}

/* Hinweis zur Trennung von Team- und Vereinserfahrung */
.note{border-left:4px solid var(--river);background:#fff;padding:1.1rem 1.3rem;max-width:var(--measure);margin:1.5rem 0}
.note p:last-child{margin:0}

/* Anträge */
.app{background:#fff;border:1px solid var(--stone);padding:1.5rem 1.6rem;margin:0 0 1.5rem;max-width:880px}
.app h3{margin:0 0 .3rem;font-size:1.3rem}
.app .status{display:inline-block;font-family:var(--sans);font-size:.8rem;background:var(--mist);color:var(--river-deep);padding:.15rem .55rem;border-radius:2px;margin-bottom:.8rem}
.app dl{display:grid;grid-template-columns:max-content 1fr;gap:.25rem 1rem;font-size:.97rem;margin:.6rem 0 0}
.app dt{font-family:var(--sans);font-size:.85rem;color:var(--soft);padding-top:.15rem}
.app dd{margin:0}

/* Lebensweg als Fluss: echte zeitliche Abfolge */
.river{list-style:none;margin:2rem 0 0;padding:0;position:relative;max-width:820px}
.river::before{content:"";position:absolute;left:6.6rem;top:.4rem;bottom:.4rem;width:3px;background:linear-gradient(var(--river),var(--fachwerk));border-radius:2px}
.river li{display:grid;grid-template-columns:6.6rem 1fr;gap:0 1.6rem;padding:0 0 1.6rem;position:relative}
.river li::before{content:"";position:absolute;left:calc(6.6rem - 5px);top:.55rem;width:13px;height:13px;border-radius:50%;background:var(--paper);border:3px solid var(--river)}
.river .yr{font-family:var(--sans);font-size:.88rem;color:var(--soft);padding-top:.25rem;text-align:right;padding-right:1rem}
.river h3{margin:0 0 .2rem;font-size:1.1rem;padding-left:1rem}
.river p{margin:0;padding-left:1rem;font-size:.98rem}
@media(max-width:560px){.river::before{left:.4rem}.river li{grid-template-columns:1fr}.river li::before{left:-.05rem}.river .yr{text-align:left;padding-left:1.6rem}.river h3,.river p{padding-left:1.6rem}}

.table-wrap{overflow-x:auto;margin-top:1rem}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:.95rem;background:#fff}
th,td{text-align:left;padding:.6rem .75rem;border-bottom:1px solid var(--stone);vertical-align:top}
th{font-family:var(--sans);font-size:.82rem;font-weight:600;color:var(--soft);background:var(--mist)}
td small{color:var(--soft)}

.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem;margin-top:1.5rem}
.gallery img{aspect-ratio:4/3;object-fit:cover;width:100%}

/* Team */
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:2.2rem 2rem;margin-top:1.5rem}
.person img,.person .initials{width:132px;height:132px;border-radius:50%;object-fit:cover;margin-bottom:.9rem}
.person .initials{display:flex;align-items:center;justify-content:center;background:var(--mist);color:var(--river-deep);font-size:2.2rem;font-weight:600;border:1px solid var(--stone)}
.person h3{margin:0;font-size:1.15rem}
.person .role{font-family:var(--sans);font-size:.85rem;color:var(--fachwerk);margin:.15rem 0 .55rem}
.person p{font-size:.97rem;margin:0}

blockquote{margin:1.5rem 0;padding:0 0 0 1.3rem;border-left:3px solid var(--fachwerk);font-style:italic;max-width:var(--measure)}
blockquote footer{font-style:normal;font-family:var(--sans);font-size:.88rem;color:var(--soft);margin-top:.6rem}

.facts{display:grid;grid-template-columns:max-content 1fr;gap:.35rem 1.4rem;max-width:var(--measure);font-size:.98rem}
.facts dt{font-family:var(--sans);font-size:.86rem;color:var(--soft);padding-top:.15rem}
.facts dd{margin:0}

.button{display:inline-block;font-family:var(--sans);font-size:.95rem;background:var(--river);color:#fff;text-decoration:none;padding:.65rem 1.15rem;border-radius:3px}
.button:hover{background:var(--river-deep);color:#fff}

.site-footer{background:var(--river-deep);color:#DCE6E7;font-family:var(--sans);font-size:.88rem;margin-top:0}
.site-footer .wrap{padding-top:2.2rem;padding-bottom:2.2rem;display:flex;flex-wrap:wrap;gap:1rem 3rem;justify-content:space-between}
.site-footer a{color:#fff}
.site-footer p{margin:0 0 .3rem}
.eu{display:flex;align-items:center;gap:.6rem;max-width:44ch}

@media(prefers-reduced-motion:no-preference){
  .hero .flow path{stroke-dasharray:520;stroke-dashoffset:520;animation:draw 2.4s ease-out .3s forwards}
  @keyframes draw{to{stroke-dashoffset:0}}
}
.wrap.prose{max-width:1180px}
.wrap.prose>*{max-width:var(--measure)}
.brand{order:1}.lang{order:2}.nav{order:3}
@media(min-width:1000px){.nav{order:2}.lang{order:3}}
@media(max-width:999px){.nav{margin-left:0;width:100%;gap:.1rem 1rem;font-size:.9rem}.lang{margin-left:auto}}
@media(max-width:560px){.app dl{grid-template-columns:1fr}.app dt{padding-top:.5rem}.app{padding:1.2rem}}
@media(max-width:480px){.brand small{display:none}}
.video{margin:1.5rem 0}.video video{width:min(360px,100%);height:auto;background:#000;border-radius:2px;display:block}
.impressions{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.6rem}