/*
Theme Name: EncounterHouse
Theme URI: https://encounterhouse.de
Author: Matthias Prieber
Description: Custom-Theme für EncounterHouse — Gemeindegründung Dortmund-Eving. Gebaut nach CD-Manual v2.18 (Pacaembu/Neulis Sans via Adobe Fonts, Brand-Tokens Aubergine/Chartreuse/Weiß/Anthrazit, Mobile-First).
Version: 1.1.4
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietär — nur für EncounterHouse
Text Domain: encounterhouse
*/

/* ============================================================
   Brand-Tokens (CD 2.0) + Schriften (CD 2.6, Adobe Kit wfw4ucn)
   ============================================================ */
:root{--aubergine:#591349;--chartreuse:#8EB528;--weiss:#FFFFFF;--anthrazit:#0A0A0A;
--muted:#8a8479;--muted-deep:#5a564f;--hairline:#e5e2dd;
--display-font:"pacaembu","Helvetica Neue",sans-serif;
--body-font:"neulis-sans","Helvetica Neue",sans-serif;}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{font-family:var(--body-font);font-weight:400;font-size:18px;line-height:1.55;
color:var(--anthrazit);background:var(--weiss)}
img{max-width:100%;height:auto;display:block}
strong{font-family:var(--body-font);font-weight:600;color:var(--aubergine)}
em{font-family:var(--body-font);font-style:italic}
a{color:var(--aubergine)}

/* Accessibility */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;
margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal}
.skip-link:focus{background:var(--weiss);clip:auto;clip-path:none;color:var(--aubergine);
display:block;font-family:var(--display-font);font-weight:800;font-size:14px;height:auto;
left:8px;line-height:normal;padding:12px 20px;top:8px;width:auto;z-index:100}

/* ============================================================
   Wortmarke im Fließtext — Pacaembu, Stem-E (CD 2.7.2)
   ============================================================ */
.brand{font-family:var(--display-font);letter-spacing:-0.02em;white-space:nowrap}
.brand .bst,.bst,.brand .stamm,.stamm{font-family:var(--display-font);font-weight:800;color:var(--aubergine)}
.brand .bup,.bup,.brand .suffix,.suffix{font-family:var(--display-font);font-weight:300;color:var(--anthrazit)}
.brand .blo,.blo,.suffix-lo{font-family:var(--display-font);font-weight:300;color:var(--anthrazit);text-transform:lowercase;letter-spacing:-0.025em}
.pin-neg .bst,.pin-neg .bup,.pin-neg .stamm,.pin-neg .suffix{color:var(--weiss)}

/* ============================================================
   Chartreuse-Balken — drei Rollen, fixe Maße (CD 3.0)
   ============================================================ */
.bar{background:var(--chartreuse);display:block}
.bar-headline{width:56px;height:4px;margin-bottom:14px}
.bar-section{width:96px;height:6px;margin-bottom:18px}
.bar-inline{width:24px;height:3px;margin-bottom:8px}

/* ============================================================
   Topbar + Hauptnavigation
   ============================================================ */
.topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,0.96);
backdrop-filter:blur(8px);border-bottom:1px solid var(--hairline);
display:flex;justify-content:space-between;align-items:center;padding:12px 20px;gap:12px}
.topbar .eh-logo{height:28px;width:auto;display:block}
.topbar .home-link{display:block;line-height:0}
.topbar .meta{font-family:var(--display-font);font-weight:800;font-size:10px;
letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.docnav{position:sticky;top:53px;z-index:49;background:rgba(255,255,255,0.96);
backdrop-filter:blur(8px);border-bottom:1px solid var(--hairline);
overflow-x:auto;white-space:nowrap;padding:0 14px;
-webkit-overflow-scrolling:touch;scrollbar-width:none}
.docnav::-webkit-scrollbar{display:none}
.docnav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0}
.docnav li{list-style:none}
.docnav a{display:inline-block;padding:13px 0 11px;font-family:var(--display-font);
font-weight:800;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
color:var(--muted-deep);text-decoration:none;border-bottom:3px solid transparent;
transition:color .15s,border-color .15s}
.docnav a:hover{color:var(--aubergine)}
.docnav .current-menu-item>a,.docnav .current_page_item>a,
.docnav .current-menu-ancestor>a,.docnav .current_page_parent>a{
color:var(--aubergine);border-bottom-color:var(--chartreuse)}

/* Burger-Button (nur Mobile sichtbar) */
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;
width:44px;height:40px;padding:8px 10px;background:none;border:0;cursor:pointer}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--anthrazit);
transition:transform .2s,opacity .2s}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile: Meta-Zeile weg, Navigation als aufklappbare Liste */
@media(max-width:767px){
.topbar .meta{display:none}
.nav-toggle{display:flex}
.docnav{display:none;overflow:visible;white-space:normal;padding:0}
.docnav.open{display:block}
.docnav ul{display:block;padding:6px 20px 14px}
.docnav a{display:block;padding:13px 0;font-size:13px;
border-bottom:1px solid var(--hairline)}
.docnav li:last-child a{border-bottom:none}
.docnav .current-menu-item>a,.docnav .current_page_item>a{
border-bottom:1px solid var(--hairline);border-left:3px solid var(--chartreuse);padding-left:10px}
}

/* ============================================================
   Hero — Modus A: Schrift auf Foto, Filter + Foot-Darken (CD 3.1–3.3)
   Stripes -45° / 10 / 10 / 5% · Vignette Aubergine 0,40 / Mokka 0,65
   Foot-Darken 0,70 untere 1/6
   ============================================================ */
.hero{position:relative;min-height:88vh;display:flex;align-items:flex-end;
overflow:hidden;isolation:isolate;background:var(--anthrazit)}
.filter-stage{position:relative;overflow:hidden;isolation:isolate}
.filter-stage .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.filter-stage .stripes{position:absolute;inset:0;mix-blend-mode:multiply;
background-image:repeating-linear-gradient(-45deg,rgba(45,27,20,0.05) 0,
rgba(45,27,20,0.05) 10px,transparent 10px,transparent 20px)}
.filter-stage .vignette{position:absolute;inset:0;mix-blend-mode:multiply}
.filter-stage.v-aubergine .vignette{background-image:radial-gradient(ellipse at center,
rgba(89,19,73,0) 30%,rgba(89,19,73,0.40) 100%)}
.filter-stage.v-mokka .vignette{background-image:radial-gradient(ellipse at center,
rgba(92,58,40,0) 30%,rgba(92,58,40,0.65) 100%)}
.filter-stage .foot-darken{position:absolute;inset:0;mix-blend-mode:multiply;pointer-events:none}
.filter-stage.v-aubergine .foot-darken{background-image:linear-gradient(to bottom,
rgba(89,19,73,0) 66.67%,rgba(89,19,73,0.70) 83.33%,rgba(89,19,73,0.70) 100%)}
.filter-stage.v-mokka .foot-darken{background-image:linear-gradient(to bottom,
rgba(92,58,40,0) 66.67%,rgba(92,58,40,0.70) 83.33%,rgba(92,58,40,0.70) 100%)}
.hero .content{position:relative;z-index:2;width:100%;max-width:720px;
margin:0 auto;padding:0 20px 56px;color:var(--weiss)}
.hero .pin{position:absolute;top:20px;left:20px;z-index:2;font-size:15px;letter-spacing:-0.02em}
.hero h1{font-family:var(--display-font);font-weight:800;font-size:44px;
line-height:0.95;letter-spacing:-0.035em;color:var(--weiss);margin-bottom:12px}
.hero .sub{font-family:var(--display-font);font-weight:300;font-size:22px;
color:rgba(255,255,255,0.92);margin-bottom:18px}
.hero .claim{font-family:var(--body-font);font-style:italic;font-weight:300;
font-size:18px;color:rgba(255,255,255,0.72)}
.hero .meta-line{margin-top:26px;font-size:14px;color:rgba(255,255,255,0.78)}

/* ============================================================
   Startseite — Intro + Karten
   ============================================================ */
.start-intro{max-width:720px;margin:0 auto;padding:48px 20px 8px}
.start-intro .eyebrow{margin-bottom:14px}
.eyebrow{font-family:var(--display-font);font-weight:800;font-size:12px;
letter-spacing:0.22em;text-transform:uppercase;color:var(--muted)}
.lead{font-family:var(--display-font);font-weight:300;font-size:18px;
color:var(--muted-deep);margin-bottom:8px}
.cards{max-width:720px;margin:0 auto;padding:24px 20px 64px;display:grid;gap:14px}
.card{display:block;background:#f6f3ec;border-left:4px solid var(--chartreuse);
padding:18px 18px 16px;text-decoration:none;color:var(--anthrazit);
transition:background .15s,transform .15s}
.card:hover{background:var(--aubergine);color:var(--weiss);transform:translateY(-2px)}
.card-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.card-num{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--aubergine)}
.card:hover .card-num{color:var(--chartreuse)}
.card-kind{font-family:var(--display-font);font-weight:800;font-size:10px;
letter-spacing:0.18em;text-transform:uppercase;color:var(--muted)}
.card h3{font-family:var(--display-font);font-weight:800;font-size:22px;
letter-spacing:-0.02em;color:var(--aubergine);margin-bottom:6px}
.card:hover h3,.card:hover .card-kind{color:var(--weiss)}
.card p{font-size:15px;line-height:1.5;margin-bottom:10px}
.card-go{font-family:var(--display-font);font-weight:800;font-size:12px;
letter-spacing:0.06em;color:var(--aubergine)}
.card:hover .card-go{color:var(--chartreuse)}

/* ============================================================
   Dokument-Seiten — Kopf (Modus A Foto bzw. Typo auf Aubergine)
   ============================================================ */
.doc .inner{max-width:720px;margin:0 auto;padding:36px 20px 56px}
.doc-hero{position:relative;min-height:46vh;display:flex;align-items:flex-end;
overflow:hidden;isolation:isolate;background:var(--anthrazit)}
.doc-hero .pin{position:absolute;top:18px;left:20px;z-index:2;font-size:14px;letter-spacing:-0.02em}
.doc-hero .dh{position:relative;z-index:2;width:100%;max-width:720px;
margin:0 auto;padding:80px 20px 36px}
.doc-hero-typo{background:var(--aubergine);min-height:0}
/* Über uns: höherer Foto-Hero — Porträtbild braucht mehr vertikalen Raum */
.page-id-105 .doc-hero.filter-stage{min-height:64vh}
.doc-hero-typo .dh{padding-top:96px}
.eyebrow-neg{color:rgba(255,255,255,0.72);margin-bottom:12px}
.doc-title{font-family:var(--display-font);font-weight:800;font-size:38px;
letter-spacing:-0.03em;line-height:1.0;color:var(--weiss);margin-bottom:10px}
.doc-sub{font-family:var(--display-font);font-weight:300;font-size:17px;
color:rgba(255,255,255,0.85)}

/* ============================================================
   Body-Typografie der Dokumente (CD 2.4/2.5/2.7)
   ============================================================ */
.doc-body h1{font-family:var(--display-font);font-weight:800;font-size:28px;
letter-spacing:-0.025em;line-height:1.08;color:var(--aubergine);margin:44px 0 14px}
.doc-body h2{font-family:var(--display-font);font-weight:800;font-size:21px;
letter-spacing:-0.015em;color:var(--anthrazit);margin:34px 0 10px}
.doc-body h3{font-family:var(--display-font);font-weight:800;font-size:17px;
color:var(--anthrazit);margin:26px 0 8px}
.doc-body p{margin-bottom:14px}
.doc-body ul,.doc-body ol{margin:0 0 14px 22px}
.doc-body li{margin-bottom:6px}
.doc-body blockquote{border-left:4px solid var(--chartreuse);padding:10px 16px;
margin:0 0 16px;background:#f6f3ec}
.doc-body blockquote p{font-family:var(--body-font);font-style:italic;font-weight:300;
font-size:19px;margin-bottom:0}
.doc-body table{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 18px}
.doc-body th{font-family:var(--display-font);font-weight:800;text-align:left;
border-bottom:2px solid var(--aubergine);padding:6px 8px}
.doc-body td{border-bottom:1px solid var(--hairline);padding:6px 8px;vertical-align:top}
.table-wrap{overflow-x:auto;margin-bottom:18px}
.doc-body hr{border:0;border-top:1px solid var(--hairline);margin:32px 0}
.lead-personal{font-size:1.05em;color:var(--aubergine);font-weight:500}
/* Anker-Ziele nicht unter Topbar+Hauptnavigation verschwinden lassen */
.doc-body [id]{scroll-margin-top:110px}
/* Familienfoto (Über uns) — Vollbreiten-Bildblock mit CD-Foto-Filter (Stripes + Vignette, CD 3.1) */
.doc-body .famfoto{margin:0 0 30px;max-width:none}
.doc-body .famfoto .foto-stage{position:relative;display:block;overflow:hidden;isolation:isolate}
.doc-body .famfoto img{width:100%;height:auto;display:block;border-radius:0}
.doc-body .famfoto .stripes,.doc-body .famfoto .vignette{display:block}
.doc-body .famfoto figcaption{margin-top:10px;font-family:var(--display-font);font-weight:300;
font-size:11.5px;letter-spacing:0.05em;color:var(--muted)}

/* Visions-Master-Klassen (Werte, Kernaussage, Gruppen, Marken) */
.doc-body .hl-aubergine{font-weight:600;color:var(--aubergine)}
.doc-body .kernaussage,.doc-body .mission-statement{font-family:var(--display-font);
font-weight:300;font-size:24px;line-height:1.3;letter-spacing:-0.01em;color:var(--anthrazit);
border-left:4px solid var(--chartreuse);padding:14px 18px;background:#f6f3ec;margin:18px 0 22px}
.doc-body .wert{display:grid;grid-template-columns:34px 1fr;gap:4px 12px;margin:22px 0}
.doc-body .wert .nr{grid-row:1/3;font-family:ui-monospace,Menlo,monospace;
font-weight:700;font-size:13px;color:var(--aubergine);padding-top:4px}
.doc-body .wert .titel{font-family:var(--display-font);font-weight:800;
font-size:19px;letter-spacing:-0.01em;color:var(--anthrazit)}
.doc-body .wert .titel .ist{font-weight:300;color:var(--muted-deep);font-size:16px}
.doc-body .wert .text{font-size:16.5px;line-height:1.55}
.doc-body .gruppe{margin:20px 0}
.doc-body .gruppe-titel{font-family:var(--display-font);font-weight:800;font-size:12px;
letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.doc-body .desc{color:var(--muted-deep);font-size:15px}
.doc-body .marke{margin:0 0 12px}
.doc-body .marke .name{font-size:19px;margin-bottom:2px}

/* Punkte-Layout (Bekenntnis, Schutzordnung) */
.doc-body .point{margin:30px 0 22px}
.doc-body .point-h{display:flex;align-items:baseline;gap:10px;
font-family:var(--display-font);font-weight:800;font-size:20px;
letter-spacing:-0.01em;color:var(--anthrazit);margin-bottom:8px}
.doc-body .point-h .num{font-family:ui-monospace,Menlo,monospace;
font-weight:700;font-size:13px;color:var(--aubergine);flex:0 0 auto}
.doc-body .point-h span:last-child{display:block}
.doc-body .verse{font-family:var(--display-font);font-weight:300;
font-size:12.5px;letter-spacing:0.05em;color:var(--muted);margin:-4px 0 0}
.doc-body .weg{margin:18px 0}
.doc-body .weg-h{font-family:var(--display-font);font-weight:800;
font-size:16px;color:var(--anthrazit);margin-bottom:4px}
.doc-body .opener{margin-top:8px}

/* Kapitel-Navigation innerhalb einer Seite */
.chapnav{display:flex;flex-wrap:wrap;gap:6px 14px;padding:0 0 18px;margin-bottom:22px;
border-bottom:1px solid var(--hairline)}
.chapnav a{font-family:var(--display-font);font-weight:800;font-size:11px;
letter-spacing:0.1em;text-transform:uppercase;color:var(--muted-deep);text-decoration:none}
.chapnav a:hover{color:var(--aubergine)}

.doc-foot{margin-top:48px;padding-top:18px;border-top:1px solid var(--hairline)}
.backlink{font-family:var(--display-font);font-weight:800;font-size:13px;
letter-spacing:0.06em;text-decoration:none;color:var(--aubergine)}
.backlink:hover{color:var(--chartreuse)}

/* ============================================================
   Formulare (Kontaktformular, CD-konform: Neulis Body, Aubergine-Button)
   ============================================================ */
.doc-body label{font-family:var(--display-font);font-weight:800;font-size:12px;
letter-spacing:0.14em;text-transform:uppercase;color:var(--muted-deep);
display:block;margin:16px 0 6px}
.doc-body input[type="text"],.doc-body input[type="email"],.doc-body input[type="tel"],
.doc-body textarea{width:100%;font-family:var(--body-font);font-size:17px;
color:var(--anthrazit);background:#f6f3ec;border:1px solid var(--hairline);
border-left:3px solid var(--chartreuse);padding:12px 14px;border-radius:0}
.doc-body input:focus,.doc-body textarea:focus{outline:2px solid var(--aubergine);outline-offset:0}
.doc-body input[type="checkbox"]{accent-color:var(--chartreuse);width:17px;height:17px}
.doc-body input[type="submit"],.doc-body button[type="submit"]{
font-family:var(--display-font);font-weight:800;font-size:13px;
letter-spacing:0.1em;text-transform:uppercase;color:var(--weiss);
background:var(--aubergine);border:0;padding:14px 28px;margin-top:18px;cursor:pointer}
.doc-body input[type="submit"]:hover,.doc-body button[type="submit"]:hover{background:#46103a}
.wpcf7 form .wpcf7-response-output{border:1px solid var(--hairline);
border-left:3px solid var(--chartreuse);margin:18px 0 0;padding:12px 14px;font-size:15px}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{background:var(--anthrazit);color:rgba(255,255,255,0.85);padding:44px 20px}
.site-footer .inner{max-width:720px;margin:0 auto}
.site-footer .pin{font-size:15px;margin-bottom:18px;display:inline-block}
.site-footer p{font-size:14px;line-height:1.6;margin-bottom:10px}
.site-footer .small{font-size:12px;color:rgba(255,255,255,0.55)}
.site-footer a{color:rgba(255,255,255,0.85)}
.site-footer .legal{margin-top:18px;font-size:12px}
.site-footer .legal ul{list-style:none;display:flex;gap:16px;margin:0;padding:0}
.site-footer .legal a{color:rgba(255,255,255,0.55);text-decoration:none}
.site-footer .legal a:hover{color:var(--chartreuse)}

/* ============================================================
   Motion — Titelblock-Einblendung (Manual-Vorschlag M6, Freigabe 12.06.2026)
   Einmalig beim Laden, gestaffelt, ruhig. Kein Loop, kein Scroll-Trigger.
   ============================================================ */
@keyframes eh-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes eh-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.doc-hero .dh .eyebrow{animation:eh-rise .6s cubic-bezier(.22,.61,.36,1) 0s backwards}
.hero .content .bar-headline,.doc-hero .dh .bar-headline{transform-origin:left;
animation:eh-bar .6s cubic-bezier(.22,.61,.36,1) .15s backwards}
.hero .content h1,.doc-hero .dh .doc-title{animation:eh-rise .6s cubic-bezier(.22,.61,.36,1) .3s backwards}
.hero .content .sub,.doc-hero .dh .doc-sub{animation:eh-rise .6s cubic-bezier(.22,.61,.36,1) .45s backwards}
.hero .content .claim{animation:eh-rise .6s cubic-bezier(.22,.61,.36,1) .6s backwards}
.hero .content .meta-line{animation:eh-rise .6s cubic-bezier(.22,.61,.36,1) .75s backwards}
@media (prefers-reduced-motion: reduce){
.hero .content h1,.hero .content .sub,.hero .content .claim,.hero .content .meta-line,
.hero .content .bar-headline,.doc-hero .dh .eyebrow,.doc-hero .dh .bar-headline,
.doc-hero .dh .doc-title,.doc-hero .dh .doc-sub{animation:none}
}

/* ============================================================
   Tablet ab 768px / Desktop ab 1100px (Mobile-First)
   ============================================================ */
@media(min-width:768px){
.hero h1{font-size:72px}
.hero .sub{font-size:28px}
.cards{grid-template-columns:1fr 1fr;gap:18px}
.doc-title{font-size:52px}
.doc-sub{font-size:19px}
.doc-body h1{font-size:32px}
.doc-hero{min-height:52vh}
}
@media(min-width:1100px){
.hero h1{font-size:88px}
.hero .content,.doc .inner,.cards,.start-intro,.doc-hero .dh{max-width:760px}
}
@media print{
.topbar,.docnav{display:none}
.hero{min-height:60vh}
}