/*
Theme Name: WPV Berlin
Theme URI: https://wpv-berlin.de/
Description: Schlankes, code-first WordPress-Theme fuer die Berliner Waermepumpenvermittlung. Ohne Page-Builder, ohne externe Requests, ohne jQuery. Optimiert auf Core Web Vitals und WCAG 2.2 AA. Funktionale Erweiterungen (Security-Header, SEO) liefert das Plugin wpv-core.
Author: WPV Berlin
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: All rights reserved
Text Domain: wpv
*/

/* =========================================================================
   Design-Tokens (uebernommen aus heizlast-rechner.html)
   Theme und Rechner bilden optisch eine Einheit.
   ========================================================================= */
:root {
  --fg: #16323f;
  --muted: #50697a;
  --line: rgba(255,255,255,.55);
  --glass: rgba(255,255,255,.42);
  --glass-strong: rgba(255,255,255,.74);
  --field-bg: rgba(255,255,255,.92);
  --accent-a: #2f7fd6;
  --accent-b: #d3722b;
  --accent: #2f7fd6;
  /* Darker accent for small text/links on light backgrounds (>=4.5:1). */
  --accent-text: #1f5fa8;
  --ok: #1f9d72;
  --ok-text: #157a52;
  --warn: #c9821a;
  --warn-text: #8a5a12;
  --bad: #d24a3f;
  --bad-text: #bb2d22;
  --btn: linear-gradient(135deg, #2563c9, #1f6fae);
  --radius: 22px;
  --maxw: 1100px;
  --readw: 720px;
  --font: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --header-h: 64px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fg: #eaf2f7;
    --muted: #a7bcc8;
    --line: rgba(255,255,255,.14);
    --glass: rgba(22,38,48,.5);
    --glass-strong: rgba(22,38,48,.72);
    --field-bg: rgba(13,24,31,.78);
    --accent-a: #6db1f2;
    --accent-b: #f0a35a;
    --accent: #6db1f2;
    --accent-text: #6db1f2;
    --ok-text: #34c58c;
    --warn-text: #e0a44a;
    --bad-text: #f0685c;
    --btn: linear-gradient(135deg, #3b82f6, #2f7fd6);
  }
}

/* =========================================================================
   Reset / Basis
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
html, body { margin: 0; }
body {
  font-family: var(--font);
  color: var(--fg);
  line-height: 1.6;
  min-height: 100vh;
  background:
    radial-gradient(1100px 700px at 12% -8%, #cfe3ff 0%, rgba(207,227,255,0) 55%),
    radial-gradient(1000px 720px at 105% 8%, #ffe0cb 0%, rgba(255,224,203,0) 50%),
    radial-gradient(900px 900px at 50% 120%, #e7d8ff 0%, rgba(231,216,255,0) 55%),
    linear-gradient(160deg, #eaf2ff 0%, #f5f0ff 45%, #fff2ea 100%);
  background-attachment: fixed;
}
@media (prefers-color-scheme: dark) {
  body {
    background:
      radial-gradient(1100px 700px at 12% -8%, #14304d 0%, rgba(20,48,77,0) 55%),
      radial-gradient(1000px 720px at 105% 8%, #4a2d22 0%, rgba(74,45,34,0) 50%),
      linear-gradient(160deg, #0c1822 0%, #131022 45%, #1c1410 100%);
  }
}

img, svg, video { max-width: 100%; height: auto; }
img { display: block; }

/* =========================================================================
   Typografie
   ========================================================================= */
h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
  margin: 0 0 .5em;
  letter-spacing: -.01em;
  scroll-margin-top: calc(var(--header-h) + 1rem);
}
h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); }
h2 { font-size: clamp(1.4rem, 3.5vw, 1.9rem); margin-top: 1.6em; }
h3 { font-size: clamp(1.15rem, 2.5vw, 1.4rem); margin-top: 1.4em; }
h4 { font-size: 1.1rem; }
p { margin: 0 0 1em; }
a { color: var(--accent-text); text-underline-offset: .15em; }
a:hover { text-decoration: none; }
ul, ol { padding-left: 1.3em; }
li { margin: .25em 0; }
blockquote {
  margin: 1.5em 0;
  padding: .2em 1.1em;
  border-left: 4px solid var(--accent);
  color: var(--muted);
}
hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
pre {
  background: var(--field-bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1em;
  overflow: auto;
}
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* =========================================================================
   Skip-Link (WCAG 2.4.1)
   ========================================================================= */
.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 1000;
  background: var(--glass-strong);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .7rem 1.1rem;
  font-weight: 700;
  text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 8px; }

/* =========================================================================
   Layout-Container
   ========================================================================= */
.wpv-container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
}
.wpv-main { padding-block: clamp(28px, 5vw, 56px); }

/* Lesefluss-Spalte fuer Fliesstext */
.wpv-prose {
  max-width: var(--readw);
  margin-inline: auto;
}
.wpv-prose > * { margin-inline: auto; }

/* =========================================================================
   Header (transluzenter Glas-Header, sticky)
   ========================================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--glass);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}
@media (prefers-reduced-transparency: reduce) {
  .site-header { background: var(--glass-strong); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
  padding-block: .5rem;
}
.site-branding { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.site-branding a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .6rem; }
.site-title {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.1;
  margin: 0;
}
.site-title .grad {
  background: linear-gradient(90deg, var(--accent-a), var(--accent-b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.custom-logo { max-height: 40px; width: auto; }

/* Primaer-Navigation */
.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .35rem;
  align-items: center;
}
.main-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: .4rem .8rem;
  border-radius: 999px;
  color: var(--fg);
  text-decoration: none;
  font-weight: 600;
}
.main-nav a:hover { background: var(--glass-strong); }
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a { color: var(--accent-text); }

/* =========================================================================
   Buttons / CTA
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  color: #fff;
  text-decoration: none;
  border: 0;
  border-radius: 999px;
  padding: .85rem 1.6rem;
  min-height: 48px;
  font-size: 1.02rem;
  background: var(--btn);
  box-shadow: 0 14px 34px -12px rgba(31,90,160,.7);
}
.btn:hover { filter: brightness(1.06); }
.btn--ghost {
  color: var(--accent-text);
  background: var(--glass-strong);
  border: 1px solid var(--line);
  box-shadow: none;
}

/* =========================================================================
   Hero (front-page)
   ========================================================================= */
.hero { text-align: center; padding-block: clamp(36px, 7vw, 80px); }
.hero__eyebrow {
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-text);
}
.hero h1 { margin: .25em auto .3em; max-width: 18ch; }
.hero h1 .grad {
  background: linear-gradient(90deg, var(--accent-a), var(--accent-b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__lead {
  color: var(--muted);
  font-size: clamp(1.05rem, 2.4vw, 1.2rem);
  max-width: 56ch;
  margin: 0 auto 1.6em;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }

/* =========================================================================
   Inhalts-Karten (Glas)
   ========================================================================= */
.wpv-card {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.1rem, 3vw, 1.8rem);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 10px 30px -12px rgba(40,70,110,.28), inset 0 1px 0 rgba(255,255,255,.45);
}
@media (prefers-reduced-transparency: reduce) {
  .wpv-card { background: var(--glass-strong); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* =========================================================================
   Beitraege / Seiten
   ========================================================================= */
.entry-header { margin-bottom: 1.4rem; }
.entry-meta { color: var(--muted); font-size: .9rem; margin-top: .3rem; }
.entry-content > *:first-child { margin-top: 0; }
.entry-content table { border-collapse: collapse; width: 100%; margin: 1.5em 0; }
.entry-content th, .entry-content td { border: 1px solid var(--line); padding: .55rem .7rem; text-align: left; }
.entry-content figure { margin: 1.5em 0; }
.entry-content figcaption { color: var(--muted); font-size: .88rem; margin-top: .4rem; }

.wp-caption, .alignwide, .alignfull { max-width: 100%; }
.aligncenter { margin-inline: auto; }

/* =========================================================================
   Content-Grid: Fliesstext in Lesebreite, breite Komponenten (Cards,
   Rechner, Lead-Formular) ueber die volle Inhaltsbreite ("Breakout").
   ========================================================================= */
.entry-content.wpv-prose { max-width: none; }
.entry-content {
  display: grid;
  grid-template-columns:
    [full-start] minmax(0, 1fr)
    [well-start] min(var(--readw), 100%) [well-end]
    minmax(0, 1fr) [full-end];
}
.entry-content > * { grid-column: well; min-width: 0; margin-inline: 0; }
.entry-content > .wpv-cards,
.entry-content > .wpv-calc,
.entry-content > .wpv-lead {
  grid-column: full;
  width: 100%;
  max-width: none;
}
/* von wpautop eingefuegte Umbrueche zwischen Karten entfernen */
.wpv-cards__grid > br { display: none; }
.alignleft { float: left; margin: .3em 1.2em 1em 0; }
.alignright { float: right; margin: .3em 0 1em 1.2em; }

/* Beitragsliste (index/archive) */
.post-list { display: grid; gap: 1.4rem; }
.post-list article { padding-bottom: 1.4rem; border-bottom: 1px solid var(--line); }
.post-list article:last-child { border-bottom: 0; }
.post-list h2 { margin-top: 0; }
.post-list h2 a { color: var(--fg); text-decoration: none; }
.post-list h2 a:hover { color: var(--accent-text); }

.read-more { font-weight: 700; }

/* Paginierung */
.wpv-pagination { margin-top: 2.5rem; }
.wpv-pagination .nav-links { display: flex; flex-wrap: wrap; gap: .4rem; }
.wpv-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: .4rem .7rem;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--glass);
  color: var(--fg);
  text-decoration: none;
  font-weight: 600;
}
.wpv-pagination .page-numbers.current { background: var(--btn); color: #fff; border-color: transparent; }

/* =========================================================================
   404
   ========================================================================= */
.error-404 { text-align: center; padding-block: clamp(40px, 8vw, 90px); }
.error-404 .code {
  font-size: clamp(3rem, 12vw, 6rem);
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, var(--accent-a), var(--accent-b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.error-404 p { color: var(--muted); max-width: 50ch; margin-inline: auto; }

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer {
  margin-top: clamp(40px, 8vw, 90px);
  border-top: 1px solid var(--line);
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}
@media (prefers-reduced-transparency: reduce) {
  .site-footer { background: var(--glass-strong); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.site-footer__inner {
  display: grid;
  gap: 1.6rem;
  grid-template-columns: 1fr;
  padding-block: clamp(28px, 5vw, 48px);
}
@media (min-width: 640px) {
  .site-footer__inner { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .site-footer__inner { grid-template-columns: repeat(3, 1fr); }
}
.footer-col h2 { font-size: 1rem; margin: 0 0 .7rem; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin: .2em 0; }
.footer-col a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: .2rem 0;
  color: var(--fg);
  text-decoration: none;
}
.footer-col a:hover { color: var(--accent-text); text-decoration: underline; }
.site-footer__bottom {
  border-top: 1px solid var(--line);
  padding-block: 1.1rem;
  color: var(--muted);
  font-size: .88rem;
}

/* =========================================================================
   Screenreader-only
   ========================================================================= */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  position: absolute;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background: var(--glass-strong);
  clip: auto;
  clip-path: none;
  height: auto;
  width: auto;
  padding: .7rem 1rem;
  border-radius: 10px;
  z-index: 1000;
}