/*
Theme Name: Förderverein St. Bartholomäus – Startseite
Theme URI: https://foerderverein-fehlheim.de
Author: Förderverein St. Bartholomäus Fehlheim e. V.
Description: Einseitige Startseite für den Förderverein St. Bartholomäus Fehlheim, solange die vollständige Website im Aufbau ist. Erklärt in wenigen Sätzen, worum es dem Verein geht, und nennt eine Kontaktadresse. Alle Texte sind im Customizer änderbar.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fv-start
Tags: nonprofit, one-column, custom-colors, accessibility-ready
*/

:root {
  --gruen:       #5F6B4E;
  --gruen-logo:  #788663;
  --gruen-hell:  #C9D2BC;
  --gruen-blass: #E5E9DE;
  --gold:        #AC8A43;
  --gold-tief:   #8E6F2C;
  --anthrazit:   #232320;
  --creme:       #F2EFE7;
  --weiss:       #FFFFFF;
  --schwarz:     #191917;
  --grau:        #6A6A62;
  --linie:       #DFDACE;
  --serif: "Source Serif 4", Georgia, serif;
  --sans:  "Inter", system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--schwarz);
  background: var(--creme);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0 0 1rem; }
h1 { font-size: clamp(2.1rem, 5.5vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
h3 { font-size: 1.2rem; }
p  { margin: 0 0 1rem; }

a { color: var(--gruen); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--gold-tief); outline-offset: 3px; border-radius: 3px; }

.wrap { width: min(100% - 2.5rem, 900px); margin-inline: auto; }

/* Kopfbereich */
.kopf {
  background: var(--weiss);
  border-bottom: 1px solid var(--linie);
  padding-block: 3.5rem 3rem;
  position: relative;
  overflow: hidden;
}
.kopf__bogen {
  position: absolute; left: -12%; bottom: -30%;
  width: 46%; max-width: 420px; opacity: .35; pointer-events: none;
}
.kopf .wrap { position: relative; z-index: 1; }

.marke { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 2.5rem; }
.marke__zeichen { width: 76px; height: 76px; flex: none; }
.marke__ober  { display: block; font: 600 .78rem var(--sans); letter-spacing: .19em; text-transform: uppercase; color: var(--gruen-logo); }
.marke__haupt { display: block; font: 700 1.35rem var(--sans); letter-spacing: .01em; color: var(--schwarz); line-height: 1.2; }
.marke__unter { display: block; font: 600 .78rem var(--sans); letter-spacing: .19em; text-transform: uppercase; color: var(--gold); }

.kopf h1 { max-width: 16ch; }
.kopf .lead { font-size: 1.2rem; color: var(--grau); max-width: 46ch; margin-bottom: 0; }

/* Abschnitte */
.abschnitt { padding-block: 3.5rem; }
.abschnitt--creme { background: var(--creme); }
.abschnitt--blass { background: var(--gruen-blass); }
.abschnitt--gruen { background: var(--gruen); color: var(--creme); }
.abschnitt--gruen h2 { color: var(--weiss); }

.augenbraue {
  display: block; font-size: .76rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-tief); margin-bottom: .6rem;
}

/* Die drei Orte */
.orte { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1rem; }
.ort {
  background: var(--weiss); border: 1px solid var(--linie);
  border-left: 4px solid var(--gold);
  border-radius: 10px; padding: 1.4rem 1.6rem;
}
.ort h3 { margin-bottom: .3rem; }
.ort p { margin: 0; color: var(--grau); font-size: .97rem; }

/* Hinweis auf den Aufbau */
.hinweis {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: 14px;
  padding: 2rem;
  display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; align-items: start;
}
.hinweis__symbol { width: 42px; height: 42px; color: var(--gold-tief); flex: none; }
.hinweis h2 { font-size: 1.35rem; margin-bottom: .5rem; }
.hinweis p:last-child { margin-bottom: 0; }
.hinweis a { font-weight: 600; }

/* Kontaktzeile */
.kontakt-gross {
  font-family: var(--serif); font-size: clamp(1.3rem, 3.4vw, 1.9rem);
  word-break: break-word;
}
.kontakt-gross a { color: var(--weiss); text-decoration-thickness: 1px; }

.fuss {
  background: var(--anthrazit); color: var(--gruen-hell);
  padding-block: 2.5rem; font-size: .9rem;
}
.fuss p { margin-bottom: .4rem; }
.fuss a { color: var(--gruen-hell); }

@media (max-width: 640px) {
  body { font-size: 16px; }
  .abschnitt { padding-block: 2.5rem; }
  .marke { gap: .85rem; margin-bottom: 2rem; }
  .marke__zeichen { width: 58px; height: 58px; }
  .marke__haupt { font-size: 1.1rem; }
  .hinweis { grid-template-columns: 1fr; padding: 1.5rem; gap: 1rem; }
  .kopf__bogen { display: none; }
}

/* WordPress-Pflichtklassen */
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap;
}
.screen-reader-text:focus {
  width: auto; height: auto; clip: auto; z-index: 999;
  background: var(--gruen); color: #fff; padding: 1rem; left: 1rem; top: 1rem;
}
.alignleft { float: left; margin-right: 1.5rem; }
.alignright { float: right; margin-left: 1.5rem; }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption-text, .wp-element-caption { font-size: .85rem; color: var(--grau); }
.bypostauthor { display: block; }
.sticky { display: block; }

/* Eigenes Logo statt Ersatzzeichen */
.marke .custom-logo { max-height: 90px; width: auto; }
.marke__bild { max-height: 110px; width: auto; }

/* Inhalte aus dem Seiteneditor */
.seiteninhalt { max-width: 52ch; }
.seiteninhalt ul, .seiteninhalt ol { padding-left: 1.3rem; }
.admin-bar .kopf { padding-top: 4rem; }