/*
Theme Name: Wasserheimat
Theme URI: https://wasserheimat.de
Description: Kindtheme für GeneratePress. Gestaltung nach dem Vorbild einer gedruckten Trinkwasseranalyse, gewärmt durch das Messing der alten Werkstatt. Als Vorlage für weitere Portfolio-Seiten gedacht: Farben und Schriftrolle stehen als Variablen im Block "Marken-Token" ganz oben.
Author: Wasserheimat
Template: generatepress
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: wasserheimat-child
*/

/* ==========================================================================
   1. MARKEN-TOKEN
   Für eine weitere Portfolio-Seite nur diesen Block austauschen.
   ========================================================================== */

:root {
  /* Farbe */
  --wh-ink:        #16262b;   /* Text, fast schwarz mit Wasserstich */
  --wh-tiefe:      #0e4c5b;   /* Primärfarbe, Tiefenwasser */
  --wh-tiefe-hell: #17697d;
  --wh-becken:     #e8f0f1;   /* Flächen, Beckenkeramik */
  --wh-papier:     #fbfaf7;   /* Seitenhintergrund, warmes Papier */
  --wh-messing:    #b8894a;   /* einziger Akzent, Werkstatt-Messing */
  --wh-messing-d:  #8f6733;

  /* Härteskala – trägt Bedeutung, nicht Dekoration */
  --wh-weich:  #4e8c6a;
  --wh-mittel: #c99a2e;
  --wh-hart:   #b4574a;

  --wh-linie:  rgba(22, 38, 43, .14);
  --wh-linie-stark: rgba(22, 38, 43, .28);

  /* Schrift */
  --wh-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --wh-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wh-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Maß */
  --wh-breite: 1180px;
  --wh-text: 760px;
  --wh-radius: 10px;
  --wh-radius-s: 6px;
}

/* ==========================================================================
   2. SCHRIFT
   Selbst gehostet. Keine Google-Fonts-Einbindung: schneller und ohne
   datenschutzrechtliches Risiko in Deutschland.
   ========================================================================== */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("assets/fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("assets/fonts/bricolage-grotesque-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   3. GRUNDLAGEN
   ========================================================================== */

body {
  background: var(--wh-papier);
  color: var(--wh-ink);
  font-family: var(--wh-body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
.wh-display {
  font-family: var(--wh-display);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.14;
  color: var(--wh-ink);
}

h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem); }
h2 { font-size: clamp(1.4rem, 1.15rem + 1.1vw, 1.9rem); margin-top: 2.6rem; }
h3 { font-size: 1.14rem; margin-top: 1.7rem; letter-spacing: -0.008em; }

a { color: var(--wh-tiefe); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--wh-messing-d); }

:where(a, button, input, select, summary):focus-visible {
  outline: 2px solid var(--wh-messing);
  outline-offset: 2px;
  border-radius: 3px;
}

.inside-article, .site-content .entry-content { max-width: none; }
.entry-content > *:not(.wh-full) { max-width: var(--wh-text); }

/* Fließtext-Elemente */
.entry-content blockquote {
  border-left: 3px solid var(--wh-messing);
  background: rgba(184, 137, 74, .07);
  padding: .85rem 1.1rem;
  margin: 1.6rem 0;
  border-radius: 0 var(--wh-radius-s) var(--wh-radius-s) 0;
  font-size: .97rem;
}
.entry-content blockquote cite {
  display: block;
  margin-top: .5rem;
  font-size: .82rem;
  font-style: normal;
  opacity: .72;
}
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: .93rem;
  margin: 1.4rem 0;
}
.entry-content th,
.entry-content td {
  border: 1px solid var(--wh-linie);
  padding: .55rem .7rem;
  text-align: left;
  vertical-align: top;
}
.entry-content thead th { background: var(--wh-becken); font-family: var(--wh-display); font-weight: 600; }
.entry-content tbody th { background: rgba(22, 38, 43, .03); width: 38%; }

/* ==========================================================================
   4. KOPF UND NAVIGATION
   ========================================================================== */

.site-header {
  background: var(--wh-papier);
  border-bottom: 1px solid var(--wh-linie);
}
.main-navigation { background: transparent; }
.main-navigation .main-nav ul li a {
  font-family: var(--wh-display);
  font-weight: 550;
  font-size: .95rem;
  letter-spacing: -0.005em;
  color: var(--wh-ink);
  position: relative;
}
.main-navigation .main-nav ul li a::after {
  content: "";
  position: absolute;
  left: 20px; right: 20px; bottom: 12px;
  height: 2px;
  background: var(--wh-messing);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
}
.main-navigation .main-nav ul li:hover > a::after,
.main-navigation .main-nav ul li.current-menu-item > a::after { transform: scaleX(1); }
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.current-menu-item > a { background: transparent; color: var(--wh-tiefe); }

.site-branding .site-title a { font-family: var(--wh-display); font-weight: 700; letter-spacing: -0.03em; }
.site-branding .site-description { font-size: .82rem; opacity: .7; }

/* ==========================================================================
   5. STARTSEITE
   ========================================================================== */

.wh-band { padding: 0; }
.wh-inner { max-width: var(--wh-breite); margin: 0 auto; padding: 0 1.25rem; }

/* --- Hero: das Messinstrument, nicht das Stimmungsbild --- */
.wh-hero {
  background: var(--wh-tiefe);
  color: #fff;
  padding: clamp(2.4rem, 1rem + 5vw, 4.5rem) 0 clamp(2.2rem, 1rem + 4vw, 3.6rem);
  position: relative;
  overflow: hidden;
}
.wh-hero::after {
  /* eine einzige ruhige Geste: Wasserlinie am unteren Rand */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--wh-weich) 0 34%, var(--wh-mittel) 34% 56%, var(--wh-hart) 56% 100%);
}
.wh-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(1.8rem, 1rem + 3vw, 3.4rem);
  align-items: start;
}
.wh-hero h1 { color: #fff; margin: 0 0 .9rem; font-weight: 650; }
.wh-hero__lead { font-size: 1.06rem; line-height: 1.55; color: rgba(255,255,255,.86); margin: 0 0 1.2rem; max-width: 34em; }
.wh-hero__meta {
  font-family: var(--wh-mono);
  font-size: .76rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  border-top: 1px solid rgba(255,255,255,.2);
  padding-top: .7rem;
  margin: 0;
}

/* Suchfeld im Hero */
.wh-hero__tool {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--wh-radius);
  padding: 1.1rem;
  backdrop-filter: blur(2px);
}
.wh-hero__tool > h2 {
  margin: 0 0 .7rem;
  font-size: .8rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  font-weight: 600;
}
.wh-hero .whwh-search { margin: 0; }
.wh-hero .whwh-search input[type=search] {
  background: #fff;
  border-color: transparent;
  border-radius: var(--wh-radius-s);
}
.wh-hero .whwh-search button {
  background: var(--wh-messing);
  border-radius: var(--wh-radius-s);
  font-family: var(--wh-display);
  font-weight: 600;
  width: 100%;
}
.wh-hero .whwh-search button:hover { background: var(--wh-messing-d); }
.wh-hero .whwh-results__item { background: #fff; border-color: transparent; }
.wh-hero .whwh-results__empty { background: rgba(255,255,255,.14); color: rgba(255,255,255,.9); }

/* --- Signatur: die °dH-Skala --- */
.wh-skala { margin-top: 1.1rem; }
.wh-skala__bar {
  display: grid;
  grid-template-columns: 34fr 22fr 44fr;
  height: 34px;
  border-radius: var(--wh-radius-s);
  overflow: hidden;
  font-family: var(--wh-mono);
  font-size: .72rem;
}
.wh-skala__seg {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.wh-skala__seg--weich  { background: var(--wh-weich); }
.wh-skala__seg--mittel { background: var(--wh-mittel); color: #2b2413; }
.wh-skala__seg--hart   { background: var(--wh-hart); }
.wh-skala__ticks {
  display: grid;
  grid-template-columns: 34fr 22fr 44fr;
  font-family: var(--wh-mono);
  font-size: .7rem;
  color: rgba(255,255,255,.62);
  margin-top: .3rem;
}
.wh-skala__ticks span { position: relative; }
.wh-skala__ticks span::before {
  content: attr(data-v);
  position: absolute;
  left: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}
.wh-skala__ticks span:first-child::before { transform: none; }
.wh-skala__note { font-size: .78rem; color: rgba(255,255,255,.62); margin: .9rem 0 0; line-height: 1.45; }

/* --- Abschnittsköpfe: Eyebrow trägt die Funktion, nicht die Nummer --- */
.wh-sec { padding: clamp(2.2rem, 1.2rem + 3vw, 3.6rem) 0; }
.wh-sec + .wh-sec { border-top: 1px solid var(--wh-linie); }
.wh-sec--becken { background: var(--wh-becken); }
.wh-eyebrow {
  font-family: var(--wh-mono);
  font-size: .73rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wh-messing-d);
  margin: 0 0 .4rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.wh-eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--wh-linie-stark); }
.wh-sec > .wh-inner > h2 { margin-top: 0; }
.wh-sec__lead { max-width: 60ch; margin: .5rem 0 1.5rem; color: rgba(22,38,43,.82); }

/* --- Kachelraster --- */
.wh-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .75rem; }
.wh-tile {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: 1rem 1.05rem 1.1rem;
  background: #fff;
  border: 1px solid var(--wh-linie);
  border-top: 2px solid var(--wh-messing);
  border-radius: var(--wh-radius-s);
  text-decoration: none;
  color: inherit;
  transition: transform .16s ease, box-shadow .16s ease;
}
.wh-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(14, 76, 91, .12);
  color: inherit;
}
.wh-tile__name { font-family: var(--wh-display); font-weight: 600; font-size: 1rem; }
.wh-tile__kurz { font-size: .87rem; line-height: 1.42; opacity: .76; }

/* --- Zweispaltiger Textabschnitt --- */
.wh-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: start; }
.wh-split p { margin-top: 0; }
.wh-linkliste { list-style: none; margin: 0; padding: 0; }
.wh-linkliste li { border-bottom: 1px solid var(--wh-linie); }
.wh-linkliste a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .7rem 0;
  text-decoration: none;
  font-family: var(--wh-display);
  font-weight: 550;
}
.wh-linkliste a::after { content: "→"; color: var(--wh-messing); transition: transform .16s ease; }
.wh-linkliste a:hover::after { transform: translateX(3px); }

/* --- Stil-Chips --- */
.wh-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; }
.wh-chip {
  padding: .35rem .8rem;
  border: 1px solid var(--wh-linie-stark);
  border-radius: 999px;
  font-size: .87rem;
  text-decoration: none;
  color: var(--wh-ink);
  background: #fff;
}
.wh-chip:hover { border-color: var(--wh-messing); background: rgba(184,137,74,.08); color: var(--wh-ink); }

/* --- Beiträge --- */
.wh-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.1rem; }
.wh-post { border-top: 1px solid var(--wh-linie-stark); padding-top: .8rem; }
.wh-post__kat { font-family: var(--wh-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--wh-messing-d); }
.wh-post__titel { font-family: var(--wh-display); font-weight: 600; font-size: 1.02rem; line-height: 1.28; margin: .3rem 0 .35rem; }
.wh-post__titel a { text-decoration: none; color: var(--wh-ink); }
.wh-post__titel a:hover { color: var(--wh-tiefe); }
.wh-post__ex { font-size: .88rem; opacity: .76; line-height: 1.45; margin: 0; }

/* --- FAQ --- */
.wh-faq { max-width: var(--wh-text); }
.wh-faq details { border-bottom: 1px solid var(--wh-linie); }
.wh-faq summary {
  cursor: pointer;
  padding: .85rem 0;
  font-family: var(--wh-display);
  font-weight: 600;
  font-size: 1rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.wh-faq summary::-webkit-details-marker { display: none; }
.wh-faq summary::after { content: "+"; color: var(--wh-messing); font-weight: 400; font-size: 1.3rem; line-height: 1; }
.wh-faq details[open] summary::after { content: "–"; }
.wh-faq details p { margin: 0 0 .95rem; font-size: .95rem; }

/* ==========================================================================
   6. PLUGIN-ANGLEICHUNG (whwh-* Wasserhärte, whr-* Rechner)
   Die Plugins bringen eigene, themenunabhängige Grundstile mit. Hier werden
   sie nur auf die Marken-Token gehoben.
   ========================================================================== */

.whwh-wrap, .whr-wrap { max-width: var(--wh-text); }
.whwh-main h1, .whr-main h1, .whwh-main h2, .whr-main h2 { font-family: var(--wh-display); }

.whwh-crumbs, .whr-crumbs { font-family: var(--wh-mono); font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; }

.whwh-card--weich  { background: rgba(78,140,106,.1);  border-color: rgba(78,140,106,.35); }
.whwh-card--mittel { background: rgba(201,154,46,.1);  border-color: rgba(201,154,46,.38); }
.whwh-card--hart   { background: rgba(180,87,74,.1);   border-color: rgba(180,87,74,.35); }
.whwh-kpi__val, .whr-kpi__val { font-family: var(--wh-display); font-weight: 650; letter-spacing: -0.02em; }
.whwh-kpi__lbl, .whr-kpi__lbl { font-family: var(--wh-mono); letter-spacing: .04em; text-transform: uppercase; font-size: .7rem; }

.whwh-tile--weich  { background: rgba(78,140,106,.07); }
.whwh-tile--mittel { background: rgba(201,154,46,.07); }
.whwh-tile--hart   { background: rgba(180,87,74,.07); }
.whwh-tile__ort, .whr-card__name { font-family: var(--wh-display); }

.whwh-search button, .whr-quiz__opt:hover { border-color: var(--wh-messing); }
.whwh-search button { background: var(--wh-tiefe); font-family: var(--wh-display); font-weight: 600; }
.whwh-search button:hover { background: var(--wh-messing-d); }

.whwh-az a { font-family: var(--wh-mono); border-color: var(--wh-linie-stark); }
.whwh-az a:hover { border-color: var(--wh-messing); background: rgba(184,137,74,.08); }

.whwh-note, .whr-outnote { border-left-color: var(--wh-messing); background: rgba(184,137,74,.07); }
.whr-kpis { background: var(--wh-becken); border-color: rgba(14,76,91,.2); }
.whr-kpis--ok   { background: rgba(78,140,106,.11); border-color: rgba(78,140,106,.35); }
.whr-kpis--warn { background: rgba(201,154,46,.11); border-color: rgba(201,154,46,.38); }
.whr-kpis--krit { background: rgba(180,87,74,.11);  border-color: rgba(180,87,74,.35); }
.whr-status--ok   { color: #2f6b49; }
.whr-status--warn { color: #8a6100; }
.whr-status--krit { color: #93392e; }
.whr-formula { font-family: var(--wh-mono); background: var(--wh-becken); }
.whr-card { background: #fff; border-top: 2px solid var(--wh-messing); }
.whr-card:hover { border-color: var(--wh-linie); border-top-color: var(--wh-messing-d); background: #fff; }
.whr-box { background: var(--wh-becken); border-color: rgba(14,76,91,.18); }

/* ==========================================================================
   7. FUSS
   ========================================================================== */

.site-footer, .site-info {
  background: var(--wh-ink);
  color: rgba(255,255,255,.72);
  font-size: .88rem;
}
.site-footer a, .site-info a { color: rgba(255,255,255,.9); }
.site-footer a:hover, .site-info a:hover { color: var(--wh-messing); }
.footer-widgets .widget-title { font-family: var(--wh-display); color: #fff; font-size: .95rem; }

.wh-footnote {
  max-width: var(--wh-text);
  margin: 2.5rem auto 0;
  padding: 1rem 1.25rem 0;
  border-top: 1px solid var(--wh-linie);
  font-size: .84rem;
  opacity: .75;
}

/* ==========================================================================
   8. RESPONSIV UND ZUGÄNGLICHKEIT
   ========================================================================== */

@media (max-width: 880px) {
  .wh-hero__grid, .wh-split { grid-template-columns: 1fr; }
  .wh-hero__tool { order: -1; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .wh-skala__bar { height: 30px; font-size: .66rem; }
  .wh-skala__seg--mittel { font-size: 0; }
  .wh-tiles { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .wh-tile:hover { transform: none; }
}

@media print {
  .site-header, .site-footer, .wh-hero__tool, .main-navigation { display: none; }
  body { background: #fff; font-size: 11pt; }
}