/*
Theme Name: fonTreff
Description: Theme für fontreff.de – für Familien und Senioren. Kein Tracking, keine externen Schriften.
Author: QuelTel GmbH
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: fontreff
*/

@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url(assets/fonts/poppins-Regular.woff) format("woff"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url(assets/fonts/poppins-Medium.woff) format("woff"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url(assets/fonts/poppins-SemiBold.woff) format("woff"); }

:root {
  --gruen: #549B8C;
  --gruen-dunkel: #275A4F;
  --gruen-tief: #1F4A41;
  --gruen-hell: #E8F1EE;
  --grau: #575D5E;
  --text: #1F2A27;
  --text-2: #4A5552;
  --linie: #DCE4E1;
  --linie-2: #CBD6D2;
  --grund: #F6F8F7;
  --weiss: #FFFFFF;
  --nacht: #1F2A27;
  --radius: 18px;
  --breite: 1200px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--grund); color: var(--text);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 18px; line-height: 1.6;
}
img { max-width: 100%; height: auto; }
a { color: var(--gruen-dunkel); text-underline-offset: 3px; }
a:hover { color: #1C443B; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--gruen-dunkel); outline-offset: 3px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprung { position: absolute; left: -9999px; top: 0; }
.sprung:focus { left: 16px; top: 16px; z-index: 100; background: var(--weiss); padding: 12px 18px; border-radius: 10px; }

.innen { max-width: var(--breite); margin: 0 auto; padding-left: 24px; padding-right: 24px; }

h1, h2, h3 { line-height: 1.2; font-weight: 600; margin: 0; }
h1 { font-size: clamp(34px, 5vw, 52px); letter-spacing: -0.8px; }
h2 { font-size: clamp(28px, 3.4vw, 36px); letter-spacing: -0.4px; }
.dachzeile { margin: 0 0 12px; font-weight: 600; color: var(--gruen); font-size: 17px; }
.einleitung { font-size: 20px; color: var(--text-2); max-width: 38rem; }
.leise { color: var(--text-2); }

/* Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 28px;
  border-radius: 12px; background: var(--gruen-dunkel); color: var(--weiss); font-weight: 600; font-size: 18px;
  text-decoration: none; border: 2px solid var(--gruen-dunkel);
}
.knopf:hover { background: #1C443B; border-color: #1C443B; color: var(--weiss); }
.knopf.zweit { background: transparent; color: var(--gruen-dunkel); }
.knopf.zweit:hover { background: var(--gruen-hell); color: var(--gruen-dunkel); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 14px; }

/* Infoleiste */
.infoleiste { background: var(--gruen-dunkel); color: var(--weiss); font-size: 15px; }
.infoleiste .innen { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: center; padding-top: 8px; padding-bottom: 8px; }
.infoleiste a { color: var(--weiss); }
.infoleiste nav { display: flex; gap: 20px; flex-wrap: wrap; }

/* Kopf */
.kopf { background: var(--weiss); border-bottom: 1px solid var(--linie); }
.kopf .innen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-top: 16px; padding-bottom: 16px; }
.kopf .logo { display: block; line-height: 0; }
.kopf .logo img { height: 64px; width: auto; }
.hauptmenue { order: 3; flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px 32px; font-weight: 500; font-size: 18px; border-top: 1px solid var(--linie); padding-top: 12px; }
.hauptmenue a { color: var(--text); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.hauptmenue a:hover, .hauptmenue a[aria-current="page"] { border-bottom-color: var(--gruen); color: var(--text); }
.kopf-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.anruf { text-decoration: none; color: var(--gruen-dunkel); font-weight: 600; font-size: 20px; line-height: 1.2; }
.anruf small { display: block; font-size: 13px; font-weight: 400; color: var(--text-2); }

/* Abschnitte */
.abschnitt { padding-top: 64px; padding-bottom: 64px; }
.abschnitt.weiss { background: var(--weiss); }
.abschnitt.hell { background: var(--gruen-hell); }
.abschnitt.rand { border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.zeile { display: flex; flex-wrap: wrap; gap: 40px 48px; align-items: center; }
.zeile > * { flex: 1 1 440px; min-width: 0; }

.hero { padding-top: 72px; padding-bottom: 64px; }
.hero h1 { margin-bottom: 20px; }
.hero .einleitung { margin: 0 0 32px; }

.bildplatz {
  width: 100%; border-radius: 24px; background: var(--gruen-hell); border: 2px dashed #9CC2B8;
  display: flex; align-items: center; justify-content: center; text-align: center; color: var(--gruen-dunkel);
  font-size: 16px; padding: 24px; min-height: 300px;
}
.bildplatz.quer { aspect-ratio: 4 / 3; max-width: 520px; margin: 0 auto; }

/* Karten */
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.raster.drei { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.karte {
  display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--text);
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: 28px;
}
.karte.betont { border: 2px solid var(--linie-2); }
a.karte:hover { border-color: var(--gruen); color: var(--text); }
.karte .titel { font-size: 22px; font-weight: 600; }
.karte.betont .titel { font-size: 26px; }
.karte .text { color: var(--text-2); }
.karte .weiter { margin-top: auto; font-weight: 600; color: var(--gruen-dunkel); }
.karte svg { width: 40px; height: 40px; }
.kopfzeile { margin-bottom: 32px; }
.kopfzeile h2 { margin-bottom: 8px; }
.kopfzeile p { margin: 0; color: var(--text-2); font-size: 19px; }

/* Versprechen */
.versprechen { background: var(--gruen-dunkel); color: var(--weiss); border-radius: 24px; padding: 48px 44px; }
.versprechen h2 { margin-bottom: 14px; }
.versprechen p { margin: 0; font-size: 19px; color: #E3EEEA; }
.punkte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.punkte div { background: var(--gruen-tief); border-radius: 14px; padding: 18px 20px; }
.punkte strong { display: block; font-size: 18px; }
.punkte span { font-size: 15px; color: #CFE2DC; }

/* Anbieter */
.anbieter { text-align: center; }
.anbieter h2 { font-size: 30px; margin-bottom: 10px; }
.anbieter p { margin: 0 0 28px; }
.marken { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.marken span { min-width: 140px; padding: 16px 22px; background: var(--weiss); border: 1px solid var(--linie); border-radius: 12px; color: var(--text-2); font-weight: 500; }

/* Preise */
.preise { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.preis { border: 1px solid var(--linie-2); border-radius: 16px; padding: 18px 16px; text-align: center; background: var(--weiss); }
.preis.empfohlen { border: 2px solid var(--gruen); }
.preis span { display: block; font-size: 15px; color: var(--text-2); }
.preis strong { display: block; font-size: 30px; color: var(--gruen-dunkel); }

/* Laden */
.adresse p { margin: 0 0 18px; font-size: 19px; }
.adresse h2 { margin-bottom: 18px; font-size: 34px; }

/* Newsletter */
.newsletter .innen { display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: center; justify-content: space-between; }
.newsletter h2 { font-size: 30px; margin-bottom: 8px; }
.newsletter p { margin: 0; }

/* Inhaltsseiten */
.inhalt { max-width: 820px; }
.inhalt h1 { margin-bottom: 24px; }
.inhalt h2 { margin: 40px 0 12px; }
.inhalt h3 { margin: 28px 0 8px; font-size: 22px; }
.inhalt p, .inhalt ul, .inhalt ol { margin: 0 0 16px; }

/* Fuß */
.fuss { background: var(--nacht); color: #C9D3D0; font-size: 16px; }
.fuss a { color: #C9D3D0; }
.fuss a:hover { color: var(--weiss); }
.fuss .spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; padding-top: 48px; padding-bottom: 32px; }
.fuss .spalte { display: flex; flex-direction: column; gap: 6px; }
.fuss strong { color: var(--weiss); }
.fuss .logo img { height: 56px; width: auto; display: block; margin-bottom: 14px; }
.fuss .unten { border-top: 1px solid #34413D; padding-top: 16px; padding-bottom: 32px; font-size: 14px; }

@media (max-width: 640px) {
  body { font-size: 17px; }
  .infoleiste .innen > span { display: none; }
  .kopf .logo img { height: 52px; }
  .hauptmenue { gap: 4px 18px; font-size: 16px; }
  .versprechen { padding: 32px 22px; }
  .punkte { grid-template-columns: 1fr; }
  .preise { grid-template-columns: 1fr; }
  .knopf { width: 100%; }
  .abschnitt, .hero { padding-top: 44px; padding-bottom: 44px; }
}
.abstand-text { margin: 14px 0 24px; }