/*
Theme Name: Einwand 446 Scholven
Theme URI: 
Author: Anwohner-Initiative Schwedenstraße/Mentzelstraße
Description: Einspaltiges Info-Theme zur Dokumentation der Einwendung gegen den Bebauungsplan Nr. 446 "Gewerbe- und Industriepark Scholven" der Stadt Gelsenkirchen. Verlauf und Dokumente werden über die Menüpunkte "Verlauf" und "Dokumente" im WordPress-Adminbereich gepflegt — kein Code nötig.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: einwand446
*/

:root{
  --paper:#e9ece9;
  --paper-2:#dfe3de;
  --ink:#181b17;
  --ink-soft:#454d47;
  --navy:#1f3a52;
  --navy-soft:#3a5a74;
  --rust:#a8451c;
  --rust-soft:#c85a2c;
  --olive:#5b6e4e;
  --line:#b9c0b6;
  --line-strong:#8b9389;
  --card:#f4f5f2;
  --radius:2px;
  --disp: "Segoe UI Semibold", "Century Gothic", "Trebuchet MS", system-ui, sans-serif;
  --body: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  --mono: "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  background-image:
    linear-gradient(var(--paper) 0%, var(--paper) 100%),
    repeating-linear-gradient(0deg, rgba(31,58,82,0.035) 0px, rgba(31,58,82,0.035) 1px, transparent 1px, transparent 32px),
    repeating-linear-gradient(90deg, rgba(31,58,82,0.035) 0px, rgba(31,58,82,0.035) 1px, transparent 1px, transparent 32px);
}

a{color:var(--navy); text-decoration-thickness: 1px; text-underline-offset: 3px;}
a:hover{color:var(--rust);}
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:2px solid var(--rust);
  outline-offset:3px;
}

.wrap{max-width:920px; margin:0 auto; padding:0 24px;}

/* ---------- NAV ---------- */
header.site{
  position:sticky; top:0; z-index:40;
  background:rgba(233,236,233,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px;
  max-width:920px; margin:0 auto;
  font-family:var(--disp);
}
.nav-mark{
  display:flex; align-items:baseline; gap:8px;
  font-weight:700; letter-spacing:0.01em; color:var(--navy);
  font-size:15px; text-decoration:none;
}
.nav-mark .tag{
  font-family:var(--mono); font-weight:400; font-size:12px;
  color:var(--rust); border:1px solid var(--rust); border-radius:2px;
  padding:1px 6px;
}
nav.links{display:flex; gap:22px; font-size:14px;}
nav.links a{color:var(--ink-soft); text-decoration:none; font-weight:500;}
nav.links a:hover{color:var(--rust);}
@media (max-width:640px){
  nav.links{display:none;}
}

/* ---------- HERO ---------- */
.hero{
  padding:64px 24px 40px;
  max-width:920px; margin:0 auto;
  display:grid; grid-template-columns: 1.1fr 1fr; gap:40px; align-items:center;
}
@media (max-width:760px){ .hero{grid-template-columns:1fr; padding-top:40px;} }

.eyebrow{
  font-family:var(--mono); font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--navy-soft); display:flex; align-items:center; gap:8px; margin-bottom:16px;
}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--rust);}

h1{
  font-family:var(--disp); font-weight:700; letter-spacing:-0.01em;
  font-size:clamp(30px, 4.4vw, 44px); line-height:1.06; margin:0 0 18px;
  color:var(--ink);
}
h1 em{
  font-style:normal; color:var(--navy);
  background:linear-gradient(180deg, transparent 62%, rgba(168,69,28,0.16) 62%);
}

.hero p.lede{
  font-size:17.5px; color:var(--ink-soft); max-width:46ch; margin:0 0 26px;
}

.cta-row{display:flex; flex-wrap:wrap; gap:12px;}
.btn{
  font-family:var(--disp); font-weight:600; font-size:14.5px;
  padding:12px 18px; border-radius:var(--radius);
  text-decoration:none; display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--navy); transition:background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--navy); color:var(--paper);}
.btn-primary:hover{background:var(--rust); border-color:var(--rust); color:#fff;}
.btn-ghost{background:transparent; color:var(--navy);}
.btn-ghost:hover{background:rgba(31,58,82,0.08); color:var(--navy);}

/* ---------- SITE PLAN SVG ---------- */
.siteplan-box{
  background:var(--card);
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  padding:14px;
  position:relative;
}
.siteplan-box::before{
  content:"LAGEPLAN — SCHEMATISCH / NICHT MASSSTÄBLICH";
  position:absolute; top:-9px; left:14px; background:var(--paper);
  font-family:var(--mono); font-size:9.5px; letter-spacing:0.05em;
  color:var(--ink-soft); padding:0 6px;
}
.siteplan-box svg{display:block; width:100%; height:auto;}

.plan-legend{
  display:flex; flex-wrap:wrap; gap:12px 18px; margin-top:10px;
  font-family:var(--mono); font-size:11px; color:var(--ink-soft);
}
.plan-legend span{display:inline-flex; align-items:center; gap:6px;}
.swatch{width:10px; height:10px; display:inline-block; border-radius:1px;}

#boundary{stroke-dasharray:6 4; stroke-dashoffset:400; animation:draw 2.4s ease forwards 0.3s;}
@keyframes draw{ to{stroke-dashoffset:0;} }

/* ---------- SECTIONS ---------- */
section{padding:56px 0; border-top:1px solid var(--line);}
section.tight{padding-top:44px;}
.sec-head{margin-bottom:30px;}
.sec-num{
  font-family:var(--mono); font-size:12px; color:var(--rust); letter-spacing:0.05em;
  display:block; margin-bottom:6px;
}
h2{
  font-family:var(--disp); font-size:clamp(22px,3vw,28px); margin:0 0 8px; color:var(--ink);
  font-weight:700; letter-spacing:-0.005em;
}
.sec-dek{color:var(--ink-soft); max-width:60ch; font-size:16px;}

/* context */
.context-grid{display:grid; grid-template-columns:1fr 1fr; gap:28px;}
@media (max-width:700px){.context-grid{grid-template-columns:1fr;}}
.fact{
  border-left:2px solid var(--navy); padding-left:16px;
}
.fact .k{font-family:var(--mono); font-size:11.5px; color:var(--navy-soft); text-transform:uppercase; letter-spacing:0.05em;}
.fact .v{font-family:var(--disp); font-size:18px; font-weight:600; margin-top:2px;}

/* category accordions */
.cat{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--card);
  margin-bottom:14px;
  overflow:hidden;
}
.cat summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 20px;
  font-family:var(--disp); font-weight:600; font-size:16.5px;
}
.cat summary::-webkit-details-marker{display:none;}
.cat summary .meta{
  display:flex; align-items:center; gap:14px;
}
.cat summary .count{
  font-family:var(--mono); font-size:12px; color:var(--ink-soft);
  border:1px solid var(--line-strong); border-radius:20px; padding:2px 9px;
}
.cat summary .chev{
  font-family:var(--mono); color:var(--rust); transition:transform 0.2s ease; font-size:14px;
}
.cat[open] summary .chev{transform:rotate(90deg);}
.cat-body{padding:0 20px 20px; border-top:1px solid var(--line);}
.point{
  padding:14px 0; border-bottom:1px dashed var(--line);
  display:grid; grid-template-columns:52px 1fr; gap:14px;
}
.point:last-child{border-bottom:none;}
.point .pn{font-family:var(--mono); color:var(--navy-soft); font-size:13px; padding-top:2px;}
.point .pt strong{display:block; font-family:var(--disp); font-weight:600; font-size:15.5px; margin-bottom:3px;}
.point .pt span{color:var(--ink-soft); font-size:15px;}

/* documents */
.doc-cards{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
@media (max-width:700px){.doc-cards{grid-template-columns:1fr;}}
.doc-card{
  border:1px solid var(--line-strong); background:var(--card); border-radius:var(--radius);
  padding:20px; display:flex; flex-direction:column; gap:10px;
}
.doc-card .doc-type{
  font-family:var(--mono); font-size:11px; color:var(--rust); letter-spacing:0.05em;
}
.doc-card h3{font-family:var(--disp); font-size:17px; margin:0; font-weight:600;}
.doc-card .doc-body{color:var(--ink-soft); font-size:14.5px;}
.doc-card .doc-body p{margin:0 0 8px;}
.doc-card .doc-body p:last-child{margin-bottom:0;}
/* Links, die über den Gutenberg "Datei"-Block eingefügt werden */
.doc-card .wp-block-file{
  margin-top:auto; padding-top:8px; display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  font-family:var(--mono); font-size:13.5px;
}
.doc-card .wp-block-file__button{
  background:var(--navy); color:var(--paper) !important; padding:6px 12px; border-radius:var(--radius);
  text-decoration:none; font-family:var(--mono); font-size:12.5px;
}
.doc-card .wp-block-file__button:hover{background:var(--rust);}

/* timeline */
.timeline{border-left:2px solid var(--line-strong); margin-left:6px; padding-left:26px;}
.tl-item{position:relative; padding-bottom:30px;}
.tl-item:last-child{padding-bottom:0;}
.tl-item::before{
  content:""; position:absolute; left:-32px; top:4px;
  width:11px; height:11px; border-radius:50%; background:var(--paper);
  border:2px solid var(--navy);
}
.tl-item.open::before{border-color:var(--rust); background:var(--rust);}
.tl-date{font-family:var(--mono); font-size:12.5px; color:var(--navy-soft);}
.tl-title{font-family:var(--disp); font-weight:600; font-size:16.5px; margin:4px 0 4px;}
.tl-body{color:var(--ink-soft); font-size:15px; max-width:60ch;}
.tl-body p{margin:0 0 8px;}
.tl-body p:last-child{margin-bottom:0;}
.tl-status{
  display:inline-block; margin-top:8px; font-family:var(--mono); font-size:11px;
  padding:2px 8px; border-radius:20px; letter-spacing:0.03em;
}
.tl-status.sent{background:rgba(31,58,82,0.12); color:var(--navy);}
.tl-status.pending{background:rgba(168,69,28,0.12); color:var(--rust);}

/* mitzeichnen / footer */
.note-box{
  background:var(--card); border:1px solid var(--line-strong); border-radius:var(--radius);
  padding:22px 24px;
}
.note-box h3{font-family:var(--disp); margin:0 0 8px; font-size:16.5px;}
.note-box p{margin:0 0 8px; color:var(--ink-soft); font-size:15px;}
.note-box p:last-child{margin-bottom:0;}
.placeholder{
  background:rgba(168,69,28,0.1); color:var(--rust); padding:1px 6px; border-radius:2px; font-family:var(--mono); font-size:13px;
}

.empty-hint{
  font-family:var(--mono); font-size:13.5px; color:var(--ink-soft);
  border:1px dashed var(--line-strong); border-radius:var(--radius); padding:14px 16px;
}

footer.site-footer{
  padding:36px 0 60px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:12.5px; color:var(--ink-soft);
}
footer.site-footer .wrap{display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between;}
footer.site-footer a{color:var(--ink-soft);}
footer.site-footer a:hover{color:var(--rust);}

/* legal pages (Impressum / Datenschutz) */
.legal-content{max-width:70ch; font-size:16px; color:var(--ink-soft);}
.legal-content p{margin:0 0 14px;}
.legal-content strong{color:var(--ink); font-family:var(--disp);}
.legal-content em{color:var(--rust);}