/* ===============================================================
   Stiftung Perspectiva — Stylesheet
   Gestaltung nach der bisherigen Webseite.
   Alles Einstellbare steht ganz oben.
   =============================================================== */

:root {

  /* --- SCHRIFTEN -----------------------------------------------
     Verdana für den Fließtext, Georgia für Überschriften.
     Beide sind auf jedem Gerät vorhanden und werden nicht
     nachgeladen — keine Datenübertragung an Dritte, deshalb
     braucht die Seite keinen Cookie-Hinweis.

     Willst du überall Verdana, ersetze in der Zeile
     --schrift-titel den Wert durch var(--schrift-text).
     ------------------------------------------------------------ */
  --schrift-text:  Verdana, Geneva, "DejaVu Sans", sans-serif;
  --schrift-titel: Georgia, "Iowan Old Style", "Times New Roman", serif;

  /* --- FARBEN --------------------------------------------------
     Übernommen von der bisherigen Webseite.
     ------------------------------------------------------------ */
  --weinrot:       #540512;   /* Überschriften */
  --akzent:        #7c0325;   /* Links, aktiver Menüpunkt */
  --akzent-hell:   #a3103a;
  --text:          #7e7676;   /* Fließtext, warmes Grau */
  --text-dunkel:   #444444;
  --flaeche:       #f0efef;   /* Fußzeile und ruhige Flächen */
  --linie:         #e3e0e0;
  --weiss:         #ffffff;

  /* --- MASSE ---------------------------------------------------- */
  --breite:        1200px;
  --breite-text:   780px;
  --kopf-hoehe:    120px;
  --band-hoehe:    540px;
  --kachel-hoehe:  405px;
}

/* --- Grundlagen ------------------------------------------------ */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--schrift-text);
  font-size: 16px;
  line-height: 1.75;
  color: var(--text);
  background: var(--weiss);
  font-weight: 400;
}

h1, h2, h3 {
  font-family: var(--schrift-titel);
  color: var(--weinrot);
  font-weight: 300;
  margin: 0 0 .7em;
}

h1 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.4; }
h2 { font-size: clamp(1.3rem, 2.1vw, 1.6rem); line-height: 1.45; margin-top: 2.2em; }
h3 { font-size: 1.12rem; line-height: 1.5; margin-top: 2em; color: var(--text-dunkel); }

p, ul, ol, table { margin: 0 0 1.4em; }
ul, ol { padding-left: 1.25em; }
li { margin-bottom: .5em; }

a { color: var(--akzent); text-decoration: none; }
a:hover { color: var(--akzent-hell); text-decoration: underline; }

strong { color: var(--text-dunkel); font-weight: 500; }

:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }

img { max-width: 100%; height: auto; }

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

/* "schmal" begrenzt die Zeilenlänge, verschiebt den Block aber nicht:
   Überschrift und Fließtext stehen auf derselben linken Kante. */
.inhalt.schmal > * { max-width: var(--breite-text); }

.nur-vorlesen {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* --- Kopfbereich ----------------------------------------------- */

.kopf { background: var(--weiss); }

.kopf-innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--kopf-hoehe);
  flex-wrap: wrap;
}

.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo img { height: 72px; width: auto; display: block; }
.logo-text {
  font-family: var(--schrift-titel);
  font-size: 1.4rem;
  color: var(--weinrot);
}

.navi { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.navi ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.navi li { margin: 0; }
.navi a {
  color: var(--text-dunkel);
  font-size: .94rem;
  text-decoration: none;
}
.navi a:hover { color: var(--akzent); text-decoration: none; }
.navi a[aria-current="page"] { color: var(--akzent); }

.sprachen { display: flex; gap: 12px; align-items: center; }
.sprachen a, .sprachen span { font-size: .88rem; text-decoration: none; }
.sprachen a { color: var(--text-dunkel); }
.sprachen a:hover { color: var(--akzent); text-decoration: none; }
.sprachen span { color: var(--akzent); }

.menue-knopf {
  display: none;
  font: inherit; font-size: .9rem;
  background: none;
  border: 1px solid var(--linie);
  padding: 9px 15px;
  cursor: pointer;
  color: var(--text-dunkel);
}

/* --- Bildband -------------------------------------------------- */
/* Volle Breite, ohne Text darüber — wie auf der bisherigen Seite.
   Die Seite setzt das Bild selbst:
   <div class="bildband" style="--bild:url('/assets/hero-start.jpg')"></div> */

.bildband {
  height: var(--band-hoehe);
  background-image: var(--bild);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* --- Auftakt mit Überschrift ----------------------------------- */

.auftakt { padding: 72px 0 8px; }
.auftakt h1 { max-width: none; }
.auftakt .vorspann {
  max-width: var(--breite-text);
  font-size: 1rem;
}

.auftakt.klein { padding: 64px 0 8px; }

/* --- Kennzahlen ------------------------------------------------ */

.zahlen { padding: 16px 0 48px; }

.aussage {
  font-family: var(--schrift-titel);
  font-size: clamp(1.5rem, 2.7vw, 2.1rem);
  font-weight: 300;
  line-height: 1.35;
  color: var(--weinrot);
  margin: 0 0 .35em;

}

.aussage-klein {
  font-size: .95rem;
  color: var(--text);
  margin: 0;
}

/* --- Abschnitte ------------------------------------------------ */

.block { padding: 18px 0 56px; }
.block.getoent { background: var(--flaeche); padding: 56px 0; }
.block h2:first-child { margin-top: 0; }

/* --- Kacheln auf der Startseite --------------------------------- */
/* Drei Bildkacheln über die volle Breite, wie auf der alten Seite. */

.kacheln {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.kachel {
  position: relative;
  min-height: var(--kachel-hoehe);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 28px;
  background-image: var(--bild);
  background-size: cover;
  background-position: center;
  text-decoration: none;
}
.kachel::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .18);
  transition: background .25s;
}
.kachel:hover::after { background: rgba(0, 0, 0, .3); }

.kachel span {
  position: relative;
  z-index: 1;
  font-family: var(--schrift-titel);
  font-size: 1.85rem;
  font-weight: 300;
  color: var(--weiss);
  text-shadow: 0 1px 14px rgba(0, 0, 0, .45);
  line-height: 1.3;
}
.kachel:hover { text-decoration: none; }

/* --- Buttons --------------------------------------------------- */

.knopf {
  display: inline-block;
  background: var(--akzent);
  color: var(--weiss);
  text-decoration: none;
  padding: 13px 26px;
  font-size: .94rem;
  border: 1px solid var(--akzent);
}
.knopf:hover { background: var(--weinrot); border-color: var(--weinrot); color: var(--weiss); text-decoration: none; }

.knopf.leise { background: transparent; color: var(--akzent); }
.knopf.leise:hover { background: var(--akzent); color: var(--weiss); }

/* --- Hervorgehobener Kasten ------------------------------------ */

.kasten {
  background: var(--flaeche);
  border-left: 3px solid var(--akzent);
  padding: 22px 26px;
  margin: 0 0 1.8em;
}
.kasten p { margin-bottom: .35em; }
.kasten p:last-child { margin-bottom: 0; }
.kasten .zeile { font-size: .96rem; }

/* --- Vorstand -------------------------------------------------- */

.vorstand { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-top: 1.6em; max-width: var(--breite-text); }
.person img { width: 100%; display: block; margin-bottom: 14px; background: var(--flaeche); }
.person .name { color: var(--text-dunkel); font-size: .98rem; }
.person .rolle { font-size: .88rem; }

/* --- Partnerlogo ----------------------------------------------- */

.partnerlogo { margin: 2.2em 0; }
.partnerlogo img { width: 320px; max-width: 100%; height: auto; display: block; }

/* --- Formular -------------------------------------------------- */

.formular { max-width: var(--breite-text); }
.feld { margin-bottom: 22px; }
.feld label { display: block; font-size: .92rem; margin-bottom: 7px; }
.feld input, .feld select, .feld textarea {
  width: 100%;
  font: inherit;
  font-size: .96rem;
  padding: 12px 14px;
  border: 1px solid var(--linie);
  background: var(--weiss);
  color: var(--text-dunkel);
}
.feld textarea { min-height: 180px; resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus { border-color: var(--akzent); outline: none; }

.zustimmung { display: flex; gap: 12px; align-items: flex-start; font-size: .9rem; }
.zustimmung input { width: auto; margin-top: 5px; flex: none; }

.honig { position: absolute; left: -9999px; }

.hinweis { padding: 16px 20px; margin-bottom: 1.8em; font-size: .94rem; }
.hinweis.gut    { background: #eaf3ed; border-left: 3px solid #3c7d57; }
.hinweis.fehler { background: #f9ecea; border-left: 3px solid #a8372c; }

/* --- Fußzeile -------------------------------------------------- */

.fuss {
  background: var(--flaeche);
  color: var(--text-dunkel);
  padding: 58px 0 26px;
  font-size: .94rem;
}
.fuss a { color: var(--akzent); }
.fuss h2 {
  font-family: var(--schrift-titel);
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--text-dunkel);
  margin: 0 0 18px;
}
.fuss-reihe { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 44px; }
.fuss ul { list-style: none; padding: 0; margin: 0; }
.fuss li { margin-bottom: 6px; }
.fuss-schluss {
  border-top: 1px solid #ddd9d9;
  margin-top: 42px;
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  font-size: .88rem;
}
.fuss-schluss ul { display: flex; gap: 22px; }

/* --- Kleine Bildschirme ---------------------------------------- */

@media (max-width: 980px) {
  .kacheln { grid-template-columns: 1fr; }
  .kachel { min-height: 260px; }
}

@media (max-width: 860px) {
  :root { --band-hoehe: 260px; --kopf-hoehe: 84px; }

  .vorstand, .fuss-reihe { grid-template-columns: 1fr; gap: 30px; }
  .zahlen-reihe { grid-template-columns: 1fr; gap: 26px; }
  .auftakt, .auftakt.klein { padding: 44px 0 6px; }
  .block { padding: 14px 0 42px; }
  .block.getoent { padding: 42px 0; }
  .zahl { font-size: 2.1rem; }

  .logo img { height: 56px; }
  .menue-knopf { display: block; order: 3; }
  .navi {
    order: 4;
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding-bottom: 16px;
  }
  .navi.offen { display: flex; }
  .navi ul { flex-direction: column; width: 100%; gap: 0; }
  .navi li { width: 100%; border-top: 1px solid var(--linie); }
  .navi a { display: block; padding: 14px 0; font-size: 1rem; }
  .sprachen { padding-top: 16px; }
}

/* --- Druck ----------------------------------------------------- */

@media print {
  .kopf, .fuss, .knopf, .menue-knopf, .bildband, .kacheln { display: none; }
  body { font-size: 11pt; color: #000; }
  a { text-decoration: none; color: #000; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}