/*
Theme Name: Altstadt Perleberg
Theme URI: https://example.org/
Author: Altstadt e.V.
Description: Theme für den Altstadt e.V. mit Schwerpunkt Altstadt Perleberg. Enthält Termine-Verwaltung, Startseite mit Hero, Aktuelles und Mitmach-Bereich. Ohne externe Schriften oder Tracker (DSGVO-freundlich).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: altstadt
*/

:root{
  --schiefer:#22303a;
  --schiefer-2:#2f414d;
  --backstein:#7a2e2a;
  --backstein-dk:#5e211e;
  --stein:#f1f2ef;
  --papier:#ffffff;
  --tinte:#1c2227;
  --grau:#5b666e;
  --linie:#d5d9d6;
  --messing:#b8913a;
  --serif:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --breit:1120px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--stein);color:var(--tinte);font:1.0625rem/1.65 var(--sans)}
img{max-width:100%;height:auto;display:block}
a{color:var(--backstein);text-underline-offset:.18em}
a:hover{color:var(--backstein-dk)}
:focus-visible{outline:3px solid var(--messing);outline-offset:2px}
.wrap{max-width:var(--breit);margin:0 auto;padding:0 1.25rem}
.screen-reader-text{position:absolute;left:-9999px}
.skip-link:focus{left:1rem;top:1rem;background:#fff;padding:.5rem 1rem;z-index:100}

h1,h2,h3,h4{font-family:var(--serif);line-height:1.2;color:var(--schiefer);font-weight:700}
h1{font-size:clamp(2rem,5vw,3.25rem);margin:0 0 .5em}
h2{font-size:clamp(1.5rem,3vw,2rem);margin:0 0 .75em}
h3{font-size:1.25rem;margin:0 0 .4em}

/* Kopf */
.site-header{background:var(--schiefer);color:#fff;border-bottom:4px solid var(--backstein)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.9rem;padding-bottom:.9rem}
.site-title{font:700 1.35rem/1.1 var(--serif);color:#fff;text-decoration:none;display:flex;flex-direction:column}
.site-title small{font:400 .8rem var(--sans);color:#c5d0d6;margin-top:.2rem}
.site-title img{max-height:56px;width:auto}
.nav-toggle{display:none;background:none;border:2px solid #fff;color:#fff;padding:.4rem .8rem;font:inherit;cursor:pointer}
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:.25rem;flex-wrap:wrap}
.main-nav a{display:block;color:#fff;text-decoration:none;padding:.5rem .85rem;border-bottom:3px solid transparent}
.main-nav a:hover,.main-nav .current-menu-item>a{border-bottom-color:var(--messing);color:#fff}
@media(max-width:760px){
  .nav-toggle{display:block}
  .main-nav{display:none;width:100%}
  .main-nav.is-open{display:block}
  .site-header .wrap{flex-wrap:wrap}
  .main-nav ul{flex-direction:column}
}

/* Hero mit Fachwerk-Muster */
.hero{color:#fff;padding:clamp(3rem,9vw,6.5rem) 0;
  background:
   linear-gradient(135deg,transparent 49.3%,rgba(255,255,255,.08) 49.3% 50.7%,transparent 50.7%) 0 0/180px 180px,
   linear-gradient(90deg,rgba(255,255,255,.08) 0 5px,transparent 5px) 0 0/180px 180px,
   linear-gradient(0deg,rgba(255,255,255,.08) 0 5px,transparent 5px) 0 0/180px 180px,
   var(--schiefer-2)}
.hero h1{color:#fff;max-width:14ch}
.hero p{max-width:52ch;font-size:1.2rem;color:#e3e9ec}
.btn{display:inline-block;background:var(--backstein);color:#fff;text-decoration:none;padding:.75rem 1.4rem;font-weight:600;border:2px solid var(--backstein)}
.btn:hover{background:var(--backstein-dk);border-color:var(--backstein-dk);color:#fff}
.btn--hell{background:transparent;border-color:#fff}
.btn--hell:hover{background:#fff;color:var(--schiefer);border-color:#fff}
.hero .btn+.btn{margin-left:.6rem}

/* Abschnitte */
.section{padding:clamp(2.5rem,6vw,4.5rem) 0}
.section--weiss{background:var(--papier)}
.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:1.5rem;border-bottom:2px solid var(--schiefer);padding-bottom:.4rem}
.section-head h2{margin:0}
.grid{display:grid;gap:1.75rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.post-card{background:var(--papier);border-top:4px solid var(--backstein)}
.section--weiss .post-card{background:var(--stein)}
.post-card img{width:100%;aspect-ratio:3/2;object-fit:cover}
.post-card .body{padding:1rem 1.15rem 1.3rem}
.post-card h3 a{color:var(--schiefer);text-decoration:none}
.post-card h3 a:hover{color:var(--backstein)}
.meta{color:var(--grau);font-size:.9rem}

/* Termine */
.termine{list-style:none;margin:0;padding:0}
.termin{display:grid;grid-template-columns:5.5rem 1fr;gap:1.25rem;padding:1rem 0;border-bottom:1px solid var(--linie);align-items:start}
.termin-datum{background:var(--schiefer);color:#fff;text-align:center;padding:.5rem .25rem;font-family:var(--serif)}
.termin-datum strong{display:block;font-size:2rem;line-height:1}
.termin-datum span{font:.85rem var(--sans)}
.termin h3{margin:0 0 .2rem}
.termin h3 a{text-decoration:none;color:var(--schiefer)}

/* Inhalt */
.content{padding:clamp(2rem,5vw,3.5rem) 0}
.entry{background:var(--papier);padding:clamp(1.25rem,4vw,3rem);max-width:820px;margin:0 auto}
.entry-content{font-family:var(--serif);font-size:1.15rem;line-height:1.75}
.entry-content>*{max-width:68ch}
.entry-content img{margin:1.5rem 0}
.entry-content blockquote{margin:1.5rem 0;padding-left:1.25rem;border-left:4px solid var(--messing);color:var(--grau)}
.alignwide,.alignfull{max-width:none}
.pagination{margin-top:2rem;display:flex;gap:1rem;justify-content:space-between}

/* Mitmachen */
.mitmachen{background:var(--backstein);color:#fff}
.mitmachen h2{color:#fff}
.mitmachen .btn{background:#fff;color:var(--backstein);border-color:#fff}
.mitmachen .btn:hover{background:var(--stein)}

/* Fuß */
.site-footer{background:var(--schiefer);color:#c5d0d6;padding:2.5rem 0 1.5rem;font-size:.95rem}
.site-footer a{color:#fff}
.footer-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.site-footer h2{color:#fff;font-size:1.1rem}
.footer-nav ul{list-style:none;margin:0;padding:0}
.footer-bottom{margin-top:2rem;padding-top:1rem;border-top:1px solid #3d505c;font-size:.85rem}