/* ============================================================
   Paartherapie Lena Kerner — shared design system
   Used by: 4-pfadfinder.html (home) and all subpages.
   Page-unique CSS (quiz, intake form, legal, etc.) stays inline
   in the respective page.
   ============================================================ */

:root{
  --paper:#e8dec7;
  --paper-2:#d9cdae;
  --paper-3:#f2ead5;
  --ink:#161111;
  --wine:#5a1a22;
  --wine-deep:#3f0f16;
  --gold:#b98a3b;
  --forest:#2d3a2c;
  --muted:#6b5e50;
  --rule:rgba(22,17,17,.24);
  --hair:rgba(22,17,17,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--paper);color:var(--ink);font-family:"DM Sans","Helvetica Neue",sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
body{
  background-image:
    radial-gradient(ellipse at 20% 10%, rgba(185,138,59,.1), transparent 55%),
    radial-gradient(ellipse at 80% 90%, rgba(90,26,34,.08), transparent 50%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence baseFrequency='.8' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 .15 0 0 0 0 .09 0 0 0 0 .06 0 0 0 .04 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-attachment:fixed;
  background-color:var(--paper)}
::selection{background:var(--wine);color:var(--paper-3)}
a{color:inherit;text-decoration:none}

/* Decorative horizontal rule */
.rule-orn{display:flex;align-items:center;gap:14px;justify-content:center;color:var(--wine);font-family:"Frank Ruhl Libre",serif;font-size:22px;margin:28px 0}
.rule-orn:before,.rule-orn:after{content:"";flex:1;height:1px;background:var(--wine);max-width:120px}

/* Header */
@keyframes headerIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
header.top{text-align:center;padding:48px 24px 12px;animation:headerIn 1.2s ease-out both}

header.top .small{font-family:"DM Sans",sans-serif;font-size:10px;letter-spacing:.48em;text-transform:uppercase;color:var(--wine);margin-bottom:14px}
header.top .mark{font-family:"Frank Ruhl Libre",serif;font-weight:400;font-size:44px;letter-spacing:.015em;color:var(--ink);line-height:1}
header.top .mark em{font-family:"Caveat",cursive;font-style:normal;color:var(--wine);font-size:34px}
header.top .tagline{margin-top:10px;font-family:"Caveat",cursive;color:var(--muted);font-size:22px}

/* Top-level site navigation (sits inside header.top, below .rule-orn) */
.sitenav{display:flex;flex-direction:column;align-items:center;gap:8px;padding:4px 24px 14px;font-family:"DM Sans",sans-serif;text-transform:uppercase}
.sitenav-row{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 26px}
.sitenav-row.primary{font-size:11px;letter-spacing:.28em}
.sitenav-row.secondary{font-size:10px;letter-spacing:.32em;color:var(--muted)}
.sitenav-row.secondary a{color:var(--muted)}
.sitenav a{color:var(--ink);transition:color .25s;padding:5px 2px;border-bottom:1px solid transparent;line-height:1}
.sitenav a:hover{color:var(--wine);border-bottom-color:var(--wine)}
.sitenav a.active{color:var(--wine);border-bottom-color:var(--wine)}

/* Footer sitemap — 3 columns of links on subpages and homepage */
footer .sitemap{display:grid;grid-template-columns:repeat(3,1fr);gap:32px 48px;max-width:1080px;margin:0 auto 24px;padding:24px 8px 0;text-align:left;border-bottom:1px solid var(--hair);padding-bottom:32px}
footer .sitemap .col strong{display:block;font-family:"DM Sans",sans-serif;font-size:10px;letter-spacing:.36em;text-transform:uppercase;color:var(--wine);margin-bottom:14px;font-weight:500}
footer .sitemap .col ul{list-style:none;display:grid;gap:8px}
footer .sitemap .col ul li{font-family:"DM Sans",sans-serif;font-size:11.5px;letter-spacing:.16em;text-transform:none}
footer .sitemap .col ul li a{color:var(--ink);text-transform:none;letter-spacing:.06em;font-size:13.5px;font-family:"Frank Ruhl Libre",serif;transition:color .25s}
footer .sitemap .col ul li a:hover{color:var(--wine)}

/* Motifs (Anzeichen) */
.motif{padding:72px 24px 40px;text-align:center;max-width:1200px;margin:0 auto}
.motif .e{font-family:"DM Sans",sans-serif;font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--wine);margin-bottom:12px}
.motif h2{font-family:"Frank Ruhl Libre",serif;font-weight:300;font-size:clamp(32px,4vw,56px);line-height:1.1;max-width:24ch;margin:0 auto 10px;letter-spacing:-.006em}
.motif h2 em{font-family:"Caveat",cursive;font-style:normal;color:var(--wine);font-size:.92em}
.motif p.sub{max-width:48ch;margin:0 auto 48px;color:var(--muted);font-size:17px;font-style:italic}

.signs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1180px;margin:0 auto 60px;padding:0 24px}
.sigel{background:var(--paper-3);border:1px solid var(--rule);padding:26px 24px;border-radius:4px;position:relative;text-align:left;transition:transform .25s, box-shadow .25s}
.sigel:hover{transform:translateY(-3px);box-shadow:0 18px 36px -28px rgba(22,17,17,.4)}
.sigel:before{content:"";position:absolute;inset:8px;border:1px solid var(--hair);pointer-events:none}
.sigel .num{font-family:"Frank Ruhl Libre",serif;color:var(--wine);font-style:italic;font-size:20px;display:block;margin-bottom:8px}
.sigel p{color:#2e261f;font-size:15px;line-height:1.55;font-family:"DM Sans",sans-serif}

.signs.zielgruppe-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:stretch}
.zielgruppe-grid .sigel{display:flex;align-items:center;justify-content:center;text-align:center;min-height:140px;padding:32px 22px}
.zielgruppe-grid .sigel p{font-size:16px;line-height:1.5}

/* Themen-Grid — flex layout so any incomplete last row stays centered */
.signs.themen-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.themen-grid .sigel{flex:0 1 calc(25% - 11px)}

/* Ergebnisse — 2-Spalten-Liste (Pattern wie Haltung, auf Pergament) */
.ergebnisse-sec{padding:80px 24px 40px;max-width:1120px;margin:0 auto}
.ergebnisse-in{display:grid;grid-template-columns:1fr 1.4fr;gap:72px;align-items:start}
.ergebnisse-in .head .e{font-family:"DM Sans",sans-serif;font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--wine);margin-bottom:18px}
.ergebnisse-in .head h3{font-family:"Frank Ruhl Libre",serif;font-weight:300;font-size:clamp(28px,3.6vw,46px);line-height:1.08;letter-spacing:-.006em}
.ergebnisse-in .head h3 em{font-family:"Caveat",cursive;font-style:normal;color:var(--wine);font-size:.92em}
.ergebnisse-in ul{list-style:none;display:grid;gap:22px;border-top:1px solid var(--rule);padding-top:18px}
.ergebnisse-in ul li{font-family:"DM Sans",sans-serif;font-size:17px;line-height:1.55;color:#2e261f;padding-bottom:22px;border-bottom:1px solid var(--hair)}
.ergebnisse-in ul li:last-child{border-bottom:none;padding-bottom:0}

/* Vier Wege — Angebots-Karten */
.vierwege{padding:80px 24px 40px;max-width:1280px;margin:0 auto}
.vierwege .ww-head{text-align:center;max-width:680px;margin:0 auto 48px}
.vierwege .ww-head .e{font-family:"DM Sans",sans-serif;font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--wine);margin-bottom:12px}
.vierwege .ww-head h2{font-family:"Frank Ruhl Libre",serif;font-weight:300;font-size:clamp(30px,3.6vw,48px);line-height:1.1;letter-spacing:-.006em;margin-bottom:14px}
.vierwege .ww-head h2 em{font-family:"Caveat",cursive;font-style:normal;color:var(--wine);font-size:.92em}
.vierwege .ww-head p.sub{color:var(--muted);font-size:16.5px;font-style:italic;line-height:1.55}
.ww-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.weg{background:var(--paper-3);border:1px solid var(--rule);padding:32px 26px 26px;border-radius:4px;position:relative;display:flex;flex-direction:column;transition:transform .25s, box-shadow .25s}
.weg:before{content:"";position:absolute;inset:8px;border:1px solid var(--hair);pointer-events:none}
.weg:hover{transform:translateY(-3px);box-shadow:0 18px 36px -28px rgba(22,17,17,.4)}
.weg:hover .num{color:var(--wine-deep)}
.weg .num{font-family:"Frank Ruhl Libre",serif;font-style:italic;color:var(--wine);font-size:22px;display:block;margin-bottom:10px;transition:color .25s}
.weg h3{font-family:"Frank Ruhl Libre",serif;font-weight:400;font-size:22px;line-height:1.2;color:var(--ink);margin-bottom:8px;letter-spacing:-.005em}
.weg .who{font-family:"Caveat",cursive;color:var(--muted);font-size:18px;margin-bottom:12px;line-height:1.3;min-height:3.9em}
.weg p.body{font-family:"DM Sans",sans-serif;font-size:14.5px;line-height:1.55;color:#3c322b;margin-bottom:18px;flex:1}
.weg .more{margin-top:auto;font-family:"DM Sans",sans-serif;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--wine);border-top:1px solid var(--hair);padding-top:14px;display:inline-block;transition:color .25s}
.weg .more:hover{color:var(--wine-deep)}

/* Approach */
.approach{padding:120px 24px;background:var(--forest);color:var(--paper-3);margin:80px 24px;border-radius:8px;position:relative;overflow:hidden}
.approach:before{content:"";position:absolute;top:16px;left:16px;right:16px;bottom:16px;border:1px solid rgba(242,234,213,.15);pointer-events:none;border-radius:4px}
.approach-in{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1fr 1.4fr;gap:72px;align-items:start}
.approach .e{font-family:"DM Sans",sans-serif;font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.approach h3{font-family:"Frank Ruhl Libre",serif;font-weight:300;font-size:clamp(28px,3.6vw,46px);line-height:1.08;letter-spacing:-.006em}
.approach h3 em{font-family:"Caveat",cursive;font-style:normal;color:var(--gold);font-size:.92em}
.approach ul{list-style:none;display:grid;gap:22px;border-top:1px solid rgba(242,234,213,.18);padding-top:18px}
.approach ul li{font-size:17px;line-height:1.55;color:#dccfb0;padding-bottom:22px;border-bottom:1px solid rgba(242,234,213,.1)}
.approach ul li:last-child{border-bottom:none}

/* About */
.about{padding:140px 24px;display:grid;grid-template-columns:.9fr 1.3fr;gap:80px;align-items:center;max-width:1200px;margin:0 auto}
.about figure{margin:0;position:relative}
.about figure img{width:100%;filter:contrast(1.02) saturate(.9) sepia(.08);border:1px solid rgba(22,17,17,.18);padding:10px;background:var(--paper-3)}
.about figure figcaption{margin-top:14px;font-family:"Caveat",cursive;font-size:20px;color:var(--wine);text-align:center}
.about .tag{font-family:"DM Sans",sans-serif;font-size:10px;letter-spacing:.4em;color:var(--wine);text-transform:uppercase;margin-bottom:18px}
.about h3{font-family:"Frank Ruhl Libre",serif;font-weight:300;font-size:clamp(32px,4.2vw,54px);line-height:1.05;letter-spacing:-.006em;margin-bottom:22px}
.about h3 em{font-family:"Caveat",cursive;font-style:normal;color:var(--wine);font-size:.92em}
.about p{font-size:17px;color:#332a24;line-height:1.65;margin-bottom:14px;max-width:52ch}
.about .sig{margin-top:26px;font-family:"Caveat",cursive;font-size:28px;color:var(--wine)}
.about .role{margin-top:4px;font-family:"DM Sans",sans-serif;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}

/* Contact */
.contact{padding:100px 24px 140px;max-width:760px;margin:0 auto;text-align:center}
.contact .tag{font-family:"DM Sans",sans-serif;font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--wine);margin-bottom:18px}
.contact h2{font-family:"Frank Ruhl Libre",serif;font-weight:300;font-size:clamp(30px,3.8vw,52px);max-width:22ch;margin:0 auto 16px;line-height:1.08;letter-spacing:-.006em}
.contact h2 em{font-family:"Caveat",cursive;font-style:normal;color:var(--wine);font-size:.92em}
.contact p.intro{color:var(--muted);max-width:46ch;margin:0 auto 32px;font-size:16.5px;font-style:italic}
.contact form{display:grid;gap:12px;text-align:left}
.contact input,.contact textarea{font-family:"Frank Ruhl Libre",serif;font-size:17px;padding:14px 16px;background:var(--paper-3);border:1px solid rgba(22,17,17,.28);color:var(--ink);outline:none;border-radius:2px}
.contact input:focus,.contact textarea:focus{border-color:var(--wine)}
.contact textarea{min-height:96px;resize:vertical}
.contact button{margin-top:8px;background:var(--wine);color:var(--paper-3);border:none;padding:16px;cursor:pointer;font-family:"DM Sans",sans-serif;font-size:11px;letter-spacing:.36em;text-transform:uppercase}
.contact button:hover{background:var(--wine-deep)}

footer{padding:30px 24px 60px;text-align:center;font-family:"DM Sans",sans-serif;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--hair);margin:0 24px}
footer a{color:var(--wine)}

/* ============================================================
   Subpage-only components — used by all pages except homepage.
   ============================================================ */

/* Slim header variant for subpages */
header.top.subpage{padding:32px 24px 8px}
header.top.subpage .mark{font-size:28px}
header.top.subpage .mark em{font-size:22px}
header.top.subpage .mark-link{display:inline-block}
header.top.subpage .mark-link:hover .mark{color:var(--wine-deep)}
header.top.subpage .crumb{margin-top:14px;font-family:"DM Sans",sans-serif;font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--muted)}
header.top.subpage .crumb a{color:var(--wine);transition:color .25s}
header.top.subpage .crumb a:hover{color:var(--wine-deep)}
header.top.subpage .rule-orn{margin:18px 0 4px}

/* Rahmen — compact info block (Sitzungen, Kosten, Setting, ...) */
.rahmen{padding:80px 24px 40px;max-width:1120px;margin:0 auto}
.rahmen-in{display:grid;grid-template-columns:1fr 1.4fr;gap:72px;align-items:start}
.rahmen-in .head .e{font-family:"DM Sans",sans-serif;font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--wine);margin-bottom:18px}
.rahmen-in .head h3{font-family:"Frank Ruhl Libre",serif;font-weight:300;font-size:clamp(28px,3.6vw,46px);line-height:1.08;letter-spacing:-.006em}
.rahmen-in .head h3 em{font-family:"Caveat",cursive;font-style:normal;color:var(--wine);font-size:.92em}
.rahmen-dl{display:grid;grid-template-columns:auto 1fr;column-gap:24px;row-gap:14px;border-top:1px solid var(--rule);padding-top:18px;margin-bottom:24px}
.rahmen-dl dt{font-family:"DM Sans",sans-serif;font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.rahmen-dl dd{font-family:"Frank Ruhl Libre",serif;font-size:18px;color:#2e261f;margin:0;padding-bottom:14px;border-bottom:1px solid var(--hair)}
.rahmen-dl dt:last-of-type + dd{border-bottom:none;padding-bottom:0}
.rahmen-bullets{list-style:none;display:grid;gap:10px}
.rahmen-bullets li{font-family:"DM Sans",sans-serif;font-size:15px;line-height:1.55;color:#3c322b;padding-left:20px;position:relative}
.rahmen-bullets li:before{content:"❋";color:var(--gold);position:absolute;left:0;top:1px;font-size:12px}

/* Hinweis — small disclaimer block */
.hinweis{max-width:760px;margin:0 auto;padding:24px;text-align:center}
.hinweis p{font-family:"DM Sans",sans-serif;font-size:13px;line-height:1.6;color:var(--muted);font-style:italic;max-width:62ch;margin:0 auto}

/* DSGVO consent checkbox in forms */
.contact .consent{display:flex;gap:10px;align-items:flex-start;font-family:"DM Sans",sans-serif;font-size:13px;line-height:1.5;color:#3c322b;text-align:left;padding:6px 2px}
.contact .consent input{margin-top:3px;flex-shrink:0;width:16px;height:16px;accent-color:var(--wine);font-family:inherit}
.contact .consent a{color:var(--wine);text-decoration:underline;text-underline-offset:2px}
.contact .consent a:hover{color:var(--wine-deep)}

/* Process — sequenced 3-phase component (used on affaerenprozess) */
.process{padding:80px 24px 40px;max-width:1200px;margin:0 auto}
.process .head{text-align:center;max-width:680px;margin:0 auto 40px}
.process .head .e{font-family:"DM Sans",sans-serif;font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--wine);margin-bottom:12px}
.process .head h2{font-family:"Frank Ruhl Libre",serif;font-weight:300;font-size:clamp(28px,3.6vw,46px);line-height:1.1;letter-spacing:-.006em}
.process .head h2 em{font-family:"Caveat",cursive;font-style:normal;color:var(--wine);font-size:.92em}
.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;position:relative}
.process-grid:before{content:"";position:absolute;top:40px;left:14%;right:14%;height:1px;background:linear-gradient(to right,transparent,var(--rule) 12%,var(--rule) 88%,transparent);pointer-events:none}
.phase{background:var(--paper-3);border:1px solid var(--rule);padding:36px 28px 28px;border-radius:4px;position:relative;display:flex;flex-direction:column}
.phase:before{content:"";position:absolute;inset:8px;border:1px solid var(--hair);pointer-events:none}
.phase .num{font-family:"Frank Ruhl Libre",serif;font-style:italic;color:var(--wine);font-size:28px;letter-spacing:.04em;display:block;margin-bottom:10px;line-height:1}
.phase h3{font-family:"Frank Ruhl Libre",serif;font-weight:400;font-size:22px;line-height:1.2;color:var(--ink);margin-bottom:14px;letter-spacing:-.005em}
.phase ul{list-style:none;display:grid;gap:8px}
.phase ul li{font-family:"DM Sans",sans-serif;font-size:14.5px;line-height:1.55;color:#3c322b;padding-left:18px;position:relative}
.phase ul li:before{content:"❋";color:var(--gold);position:absolute;left:0;top:1px;font-size:11px}

/* Legal — body-only typography for Impressum / Datenschutz / AGB */
.legal{max-width:760px;margin:0 auto;padding:32px 24px 80px}
.legal h1{font-family:"Frank Ruhl Libre",serif;font-weight:300;font-size:clamp(32px,4vw,48px);line-height:1.1;letter-spacing:-.006em;color:var(--ink);margin-bottom:8px}
.legal h1 em{font-family:"Caveat",cursive;font-style:normal;color:var(--wine);font-size:.92em}
.legal .stand{font-family:"DM Sans",sans-serif;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:32px}
.legal h2{font-family:"Frank Ruhl Libre",serif;font-weight:400;font-size:24px;line-height:1.2;color:var(--ink);margin:40px 0 12px;letter-spacing:-.005em;border-top:1px solid var(--hair);padding-top:32px}
.legal h2:first-of-type{border-top:none;padding-top:0;margin-top:0}
.legal h3{font-family:"Frank Ruhl Libre",serif;font-weight:500;font-size:18px;line-height:1.3;color:var(--ink);margin:24px 0 8px}
.legal p{font-family:"Frank Ruhl Libre",serif;font-size:16px;line-height:1.7;color:#2e261f;margin-bottom:14px}
.legal a{color:var(--wine);text-decoration:underline;text-underline-offset:2px;word-break:break-word}
.legal a:hover{color:var(--wine-deep)}
.legal ul{list-style:none;margin:14px 0;padding-left:0}
.legal ul li{font-family:"Frank Ruhl Libre",serif;font-size:16px;line-height:1.65;color:#2e261f;margin-bottom:8px;padding-left:20px;position:relative}
.legal ul li:before{content:"❋";color:var(--gold);position:absolute;left:0;top:1px;font-size:11px}
.legal .toc{background:var(--paper-3);border:1px solid var(--rule);padding:22px 26px;margin:24px 0 36px;position:relative}
.legal .toc:before{content:"";position:absolute;inset:8px;border:1px solid var(--hair);pointer-events:none}
.legal .toc strong{display:block;font-family:"DM Sans",sans-serif;font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--wine);margin-bottom:14px;position:relative}
.legal .toc ul{margin:0;display:grid;gap:6px;position:relative}
.legal .toc ul li{font-size:15px;margin-bottom:0;padding-left:16px}
.legal .toc ul li:before{content:"·";color:var(--wine);font-size:18px;top:-2px}
.legal address{font-style:normal;font-family:"Frank Ruhl Libre",serif;font-size:16px;line-height:1.7;color:#2e261f}

@media(max-width:560px){
  .legal{padding:24px 16px 60px}
  .legal h2{font-size:21px;padding-top:24px;margin-top:32px}
}

/* Timeline — vertical chronology (used on ueber-mich for Werdegang/Ausbildung) */
.timeline-sec{padding:64px 24px 32px;max-width:1120px;margin:0 auto}
.timeline-sec .head{margin-bottom:32px;text-align:center}
.timeline-sec .head .e{font-family:"DM Sans",sans-serif;font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--wine);margin-bottom:12px}
.timeline-sec .head h3{font-family:"Frank Ruhl Libre",serif;font-weight:300;font-size:clamp(26px,3.2vw,40px);line-height:1.1;letter-spacing:-.006em}
.timeline-sec .head h3 em{font-family:"Caveat",cursive;font-style:normal;color:var(--wine);font-size:.92em}
.timeline{list-style:none;display:grid;gap:0;max-width:780px;margin:0 auto;border-left:1px solid var(--rule);padding-left:0}
.timeline li{display:grid;grid-template-columns:180px 1fr;gap:28px;padding:16px 0 16px 24px;position:relative;border-bottom:1px solid var(--hair)}
.timeline li:last-child{border-bottom:none}
.timeline li:before{content:"";position:absolute;left:-5px;top:22px;width:9px;height:9px;border-radius:50%;background:var(--wine);box-shadow:0 0 0 2px var(--paper)}
.timeline li .year{font-family:"Frank Ruhl Libre",serif;font-style:italic;color:var(--wine);font-size:17px;line-height:1.45}
.timeline li .event{font-family:"DM Sans",sans-serif;font-size:15.5px;color:#2e261f;line-height:1.55}

/* Weitere Wege — slim sibling-services grid for subpage footers */
.weiterewege{padding:80px 24px 40px;max-width:1280px;margin:0 auto}
.weiterewege .ww-head{text-align:center;max-width:680px;margin:0 auto 36px}
.weiterewege .ww-head .e{font-family:"DM Sans",sans-serif;font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--wine);margin-bottom:12px}
.weiterewege .ww-head h2{font-family:"Frank Ruhl Libre",serif;font-weight:300;font-size:clamp(26px,3vw,38px);line-height:1.12;letter-spacing:-.006em}
.weiterewege .ww-head h2 em{font-family:"Caveat",cursive;font-style:normal;color:var(--wine);font-size:.92em}
.weiterewege .ww-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.weiterewege .weg{padding:24px 22px 22px}
.weiterewege .weg h3{font-size:20px;margin-bottom:14px}
.weiterewege .weg .more{margin-top:0;border-top:none;padding-top:0}

/* Scroll-Reveal */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .9s ease-out, transform .9s ease-out}
.reveal.is-visible{opacity:1;transform:none}

@media(max-width:900px){
  .motif,.signs,.approach,.about,.contact,.vierwege,.ergebnisse-sec,.rahmen,.weiterewege{padding-left:18px;padding-right:18px}
  .signs{grid-template-columns:1fr}
  .signs.zielgruppe-grid{grid-template-columns:repeat(2,1fr)}
  .themen-grid .sigel{flex:0 1 calc(50% - 7px)}
  .ergebnisse-sec{padding-top:56px;padding-bottom:24px}
  .ergebnisse-in{grid-template-columns:1fr;gap:32px}
  .vierwege{padding-top:64px;padding-bottom:32px}
  .vierwege .ww-head{margin-bottom:32px}
  .ww-grid{grid-template-columns:repeat(2,1fr)}
  .approach{margin:40px 14px;padding:64px 18px}
  .approach-in{grid-template-columns:1fr;gap:28px}
  .about{grid-template-columns:1fr;gap:32px;padding:64px 18px}
  .rahmen{padding-top:56px;padding-bottom:24px}
  .rahmen-in{grid-template-columns:1fr;gap:28px}
  .weiterewege{padding-top:56px;padding-bottom:24px}
  .weiterewege .ww-grid{grid-template-columns:repeat(3,1fr);gap:10px}
  .process{padding-top:56px;padding-bottom:24px}
  .process-grid{grid-template-columns:1fr;gap:14px}
  .process-grid:before{display:none}
  .timeline-sec{padding:48px 18px 24px}
  .timeline li{grid-template-columns:1fr;gap:6px;padding:14px 0 14px 22px}
  .timeline li:before{top:18px}
}
@media(max-width:520px){
  header.top{padding:36px 18px 8px}
  header.top .mark{font-size:34px}
  header.top .mark em{font-size:26px}
  header.top .tagline{font-size:18px}
  .sitenav{gap:6px;padding:2px 14px 12px}
  .sitenav-row{gap:4px 16px}
  .sitenav-row.primary{font-size:10px;letter-spacing:.22em}
  .sitenav-row.secondary{font-size:9.5px;letter-spacing:.26em}
  footer .sitemap{grid-template-columns:1fr;gap:24px;padding:18px 8px 0;padding-bottom:24px}
  .vierwege{padding:48px 14px 24px}
  .vierwege .ww-head{margin-bottom:24px}
  .vierwege .ww-head h2{font-size:clamp(26px,8vw,36px)}
  .ww-grid{grid-template-columns:1fr;gap:10px}
  .weg{padding:26px 22px 22px}
  .weg h3{font-size:20px}
  .weg .who{font-size:17px}
  .weg p.body{font-size:14px}
  .motif{padding:56px 18px 24px}
  .motif h2{font-size:clamp(26px,8vw,36px)}
  .signs{gap:10px;padding:0 18px}
  .signs.zielgruppe-grid{grid-template-columns:1fr}
  .themen-grid .sigel{flex:0 1 100%}
  .sigel{padding:20px 18px}
  .approach{margin:32px 10px;padding:48px 18px}
  .approach h3{font-size:28px}
  .about{padding:56px 18px;gap:28px}
  .about h3{font-size:26px}
  .contact{padding:56px 18px 96px}
  .contact input,.contact textarea{font-size:16px}
  .contact button{min-height:48px}
  header.top.subpage{padding:24px 18px 4px}
  header.top.subpage .mark{font-size:24px}
  header.top.subpage .mark em{font-size:19px}
  .rahmen{padding:48px 14px 24px}
  .rahmen-dl{column-gap:16px;row-gap:10px}
  .rahmen-dl dd{font-size:16px}
  .weiterewege{padding:48px 14px 24px}
  .weiterewege .ww-grid{grid-template-columns:1fr;gap:10px}
  .process{padding:48px 14px 24px}
  .phase{padding:28px 22px 22px}
  .phase .num{font-size:24px}
}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .sigel,.weg{transition:none!important}
  .sigel:hover,.weg:hover{transform:none!important}
  header.top{animation:none!important}
}
</content>
</invoke>