@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/cormorant-garamond-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  --blau-primaer:     #1B3A5C;
  --blau-tiefe:       #12283F;
  --blau-flaeche:     #254B72;
  --blau-linie:       #3D5B7C;
  --silber-hell:      #ECEFF3;
  --silber:           #CFD6DE;
  --silber-gedaempft: #9AA8B8;
  --champagner:       #C9A961;
  --champagner-hell:  #D4B672;
  --papier:           #F4F6F8;
  --papier-grau:      #5F6E7E;
  --champagner-dunkel:#8A6D2F;

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius: 4px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--blau-primaer);
  color: var(--silber);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 32px; }
.schmal { max-width: 760px; }

h1, h2 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--silber-hell);
  line-height: 1.16;
  letter-spacing: 0.004em;
  margin: 0;
}
h1 { font-size: 52px; }
h2 { font-size: 36px; }
h3 {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.4;
  color: var(--silber-hell);
  margin: 0;
}

p { margin: 0 0 18px; max-width: 46em; }
a { color: var(--champagner-hell); }

.kicker {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--champagner-hell);
  margin: 0 0 14px;
}

.rule { width: 56px; height: 1px; background: var(--champagner); border: 0; margin: 22px 0 28px; }

/* ---------- Kopf ---------- */

.topbar {
  border-bottom: 1px solid var(--blau-linie);
}
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 20px; padding-bottom: 20px;
}
.lockup { display: block; text-decoration: none; }
.lockup img { height: 62px; width: auto; display: block; }
.nav { font-size: 14px; font-weight: 500; }
.nav a + a { margin-left: 30px; }
.nav a { color: var(--silber); text-decoration: none; }
.nav a:hover { color: var(--champagner-hell); }

/* ---------- Hero ---------- */

.hero { padding: 120px 0 110px; }
.hero p.lead { font-size: 18px; line-height: 1.7; color: var(--silber); max-width: 36em; }

.btn {
  display: inline-block;
  font-size: 14px; font-weight: 500;
  padding: 14px 32px;
  border: 1px solid var(--champagner);
  border-radius: var(--radius);
  background: transparent;
  color: var(--champagner);
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.btn:hover { background: var(--champagner); color: var(--blau-primaer); }

/* ---------- Sektionen ---------- */

section { padding: 96px 0; }
.tief { background: var(--blau-tiefe); }

.karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.karte {
  background: var(--blau-flaeche);
  border-radius: 8px;
  padding: 32px;
}
.tief .karte { background: var(--blau-primaer); }
.karte .nr {
  font-size: 11px; font-weight: 500; letter-spacing: 0.22em;
  color: var(--champagner-hell); margin-bottom: 14px;
}
.karte h3 { color: var(--silber-hell); margin-bottom: 10px; }
.karte p { font-size: 15px; color: var(--silber); margin: 0; }
.karte ul { margin: 14px 0 0; padding-left: 18px; font-size: 14px; color: var(--silber-gedaempft); }
.karte li { margin-bottom: 5px; }

.zweispalt { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.faktenliste { list-style: none; margin: 0; padding: 0; }
.faktenliste li {
  padding: 16px 0;
  border-bottom: 1px solid var(--blau-linie);
  font-size: 15px;
  color: var(--silber);
}
.faktenliste li:first-child { border-top: 1px solid var(--blau-linie); }
.faktenliste strong { color: var(--silber-hell); font-weight: 500; display: block; }

.kontakt-box {
  background: var(--blau-flaeche);
  border-radius: 8px;
  padding: 40px;
}
.kontakt-box p { margin-bottom: 10px; }
.kontakt-zeile { font-size: 15px; color: var(--silber-gedaempft); }
.kontakt-zeile strong { color: var(--silber-hell); font-weight: 500; }

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

footer {
  background: var(--blau-tiefe);
  border-top: 1px solid var(--blau-linie);
  padding: 44px 0;
  font-size: 13px;
  color: var(--silber-gedaempft);
}
.foot-inner { display: flex; justify-content: space-between; flex-wrap: wrap; }
footer a { color: var(--silber-gedaempft); text-decoration: none; margin-left: 22px; }
footer a:hover { color: var(--champagner-hell); }

/* ---------- Rechtsseiten ---------- */

.rechtstext { padding: 72px 0 96px; }
.rechtstext h2 { font-size: 25px; margin: 44px 0 14px; }
.rechtstext h3 { font-size: 16px; margin: 28px 0 8px; color: var(--silber-hell); }
.rechtstext p, .rechtstext li { font-size: 15px; color: var(--silber); }
.rechtstext ul { padding-left: 20px; }
.rechtstext li { margin-bottom: 7px; }
.stand { font-size: 13px; color: var(--silber-gedaempft); }

@media (max-width: 860px) {
  .karten { grid-template-columns: 1fr; }
  .zweispalt { grid-template-columns: 1fr; gap: 36px; }
  h1 { font-size: 34px; }
  h2 { font-size: 27px; }
  .hero { padding: 72px 0 64px; }
  section { padding: 64px 0; }
}

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

.form-feld { margin-bottom: 18px; }
.form-feld label {
  display: block; font-size: 13px; font-weight: 500;
  color: var(--silber-hell); margin-bottom: 7px;
}
.form-feld input, .form-feld textarea, .form-feld select {
  width: 100%;
  background: var(--blau-primaer);
  border: 1px solid var(--blau-linie);
  border-radius: var(--radius);
  color: var(--silber-hell);
  font-family: var(--font-text);
  font-size: 15px;
  padding: 11px 13px;
}
.form-feld textarea { min-height: 130px; resize: vertical; }
.form-feld input:focus, .form-feld textarea:focus, .form-feld select:focus {
  outline: none; border-color: var(--champagner);
}
.form-hinweis { font-size: 12px; color: var(--silber-gedaempft); margin: 14px 0 20px; }
.honigtopf { position: absolute; left: -9999px; }
button.btn { font-family: var(--font-text); cursor: pointer; }

.meldung {
  border-left: 2px solid var(--champagner);
  background: var(--blau-flaeche);
  padding: 20px 24px;
  margin-bottom: 26px;
  border-radius: var(--radius);
}
.meldung.fehler { border-left-color: #D98B7A; }
.meldung p:last-child { margin-bottom: 0; }

/* ---------- Leistungsdetail ---------- */

.leistung-block { padding: 52px 0; border-bottom: 1px solid var(--blau-linie); }
.leistung-block:last-child { border-bottom: 0; }
.leistung-nr {
  font-size: 11px; font-weight: 500; letter-spacing: 0.22em;
  color: var(--champagner-hell); margin-bottom: 12px;
}
.liefer { list-style: none; margin: 22px 0 0; padding: 0; }
.liefer li {
  padding: 11px 0 11px 22px; position: relative;
  font-size: 15px; border-bottom: 1px solid var(--blau-linie);
}
.liefer li:before {
  content: ""; position: absolute; left: 0; top: 20px;
  width: 8px; height: 1px; background: var(--champagner);
}

/* ---------- Über mich ---------- */

.profil-raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 34px; }
.profil-feld {
  background: var(--blau-flaeche); border-radius: 8px; padding: 26px;
}
.profil-feld h3 { color: var(--silber-hell); margin-bottom: 8px; font-size: 17px; }
.profil-feld p { font-size: 14px; margin: 0; color: var(--silber); }

@media (max-width: 860px) {
  .profil-raster { grid-template-columns: 1fr; }
}

/* ---------- Stichwortleiste ---------- */

.stichworte {
  font-size: 13px;
  color: var(--silber-gedaempft);
  letter-spacing: 0.02em;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--blau-linie);
}

/* ---------- Vorgehen ---------- */

.schritte { counter-reset: schritt; margin-top: 44px; }
.schritt {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 26px;
  padding: 26px 0;
  border-bottom: 1px solid var(--blau-linie);
}
.schritt:first-child { border-top: 1px solid var(--blau-linie); }
.schritt-nr {
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--champagner);
  line-height: 1;
}
.schritt h3 { margin-bottom: 7px; color: var(--silber-hell); }
.schritt p { margin: 0; font-size: 15px; }

/* ---------- Grundsatzband ---------- */

.grundsatz { background: var(--blau-tiefe); padding: 76px 0; text-align: center; }
.grundsatz h2 { font-size: 31px; margin-bottom: 20px; }
.grundsatz .triade {
  font-size: 12px; font-weight: 500; letter-spacing: 0.30em;
  text-transform: uppercase; color: var(--champagner); margin-bottom: 24px;
}
.grundsatz p { max-width: 40em; margin: 0 auto; color: var(--silber); }

@media (max-width: 860px) {
  .schritt { grid-template-columns: 1fr; gap: 8px; }
}

/* ---------- Menüband ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--blau-primaer);
  border-bottom: 1px solid var(--blau-linie);
}
.nav a {
  position: relative;
  padding: 6px 0;
  transition: color .18s ease;
}
.nav a:after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--champagner);
  transform: scaleX(0);
  transition: transform .18s ease;
}
.nav a:hover:after { transform: scaleX(1); }
.nav a.aktiv { color: var(--champagner-hell); }
.nav a.aktiv:after { transform: scaleX(1); }


/* ---------- Bildbänder ---------- */

.bildband {
  width: 100%;
  height: 380px;
  overflow: hidden;
  position: relative;
  background: var(--blau-tiefe);
}
.bildband img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.85;
}
.bildband:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(27,58,92,.55), rgba(18,40,63,.75));
}

.bild-inline {
  width: 100%;
  border-radius: 8px;
  display: block;
  margin: 0;
}
.bild-rahmen { position: relative; }
.bild-rahmen:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: linear-gradient(to bottom, rgba(27,58,92,.10), rgba(18,40,63,.30));
  pointer-events: none;
}
.bildunterschrift {
  font-size: 12px;
  color: var(--silber-gedaempft);
  margin-top: 10px;
}

@media (max-width: 860px) {
  .bildband { height: 220px; }
}

/* ---------- Porträtblock ---------- */

.portraet-block {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 40px;
  align-items: start;
  margin-bottom: 8px;
}
.portraet-block img {
  width: 100%;
  border-radius: 8px;
  display: block;
}
.portraet-block h2 { margin-top: 0; }

@media (max-width: 860px) {
  .portraet-block { grid-template-columns: 1fr; gap: 26px; }
}

/* ---------- Helle Sektionen (Papier-Palette) ---------- */

section.hell,
.hell {
  background: var(--papier);
  color: var(--blau-primaer);
}
.hell h1, .hell h2, .hell h3 { color: var(--blau-primaer); }
.hell p { color: var(--blau-primaer); }
.hell .wrap > p, .hell .wrap > h2 { max-width: 44em; }
.hell .kicker { color: var(--champagner-dunkel); }
.hell .rule { background: var(--champagner); }
.hell a { color: var(--champagner-dunkel); }

.hell .karte {
  background: #FFFFFF;
  border: 1px solid #DDE3E9;
}
.hell .karte h3 { color: var(--blau-primaer); }
.hell .karte p { color: var(--blau-primaer); }
.hell .karte ul { color: var(--papier-grau); }
.hell .karte .nr { color: var(--champagner-dunkel); }
.hell .stichworte {
  color: var(--papier-grau);
  border-top-color: #DDE3E9;
}

.hell .faktenliste li {
  color: var(--blau-primaer);
  border-bottom-color: #DDE3E9;
}
.hell .faktenliste li:first-child { border-top-color: #DDE3E9; }
.hell .faktenliste strong { color: var(--blau-primaer); }

.hell .schritt { border-bottom-color: #DDE3E9; }
.hell .schritt:first-child { border-top-color: #DDE3E9; }
.hell .schritt-nr { color: var(--champagner-dunkel); }
.hell .schritt h3 { color: var(--blau-primaer); }
.hell .schritt p { color: var(--papier-grau); }

.hell .leistung-block { border-bottom-color: #DDE3E9; }
.hell .liefer li { border-bottom-color: #DDE3E9; color: var(--blau-primaer); }
.hell .liefer li:before { background: var(--champagner-dunkel); }

.hell .profil-feld {
  background: #FFFFFF;
  border: 1px solid #DDE3E9;
}
.hell .profil-feld h3 { color: var(--blau-primaer); }
.hell .profil-feld p { color: var(--papier-grau); }

.hell .btn {
  border-color: var(--champagner-dunkel);
  color: var(--champagner-dunkel);
}
.hell .btn:hover {
  background: var(--champagner-dunkel);
  color: #FFFFFF;
}

.hell .kontakt-box {
  background: #FFFFFF;
  border: 1px solid #DDE3E9;
}
.hell .kontakt-zeile { color: var(--papier-grau); }
.hell .kontakt-zeile strong { color: var(--blau-primaer); }
.hell .form-feld label { color: var(--blau-primaer); }
.hell .form-feld input,
.hell .form-feld textarea,
.hell .form-feld select {
  background: var(--papier);
  border-color: #C7D0DA;
  color: var(--blau-primaer);
}
.hell .form-feld input:focus,
.hell .form-feld textarea:focus,
.hell .form-feld select:focus { border-color: var(--champagner-dunkel); }
.hell .form-hinweis { color: var(--papier-grau); }
.hell .bildunterschrift { color: var(--papier-grau); }

/* Porträt rechts vom Text */
.portraet-block { grid-template-columns: 6fr 4fr; align-items: center; gap: 56px; }
.portraet-block figure { align-self: center; }
.portraet-block p.lead { max-width: none; margin-bottom: 16px; }
.portraet-block p.lead:last-child { margin-bottom: 0; }
.portraet-block h1 { font-size: 46px; }

/* ---------- Schwerpunkte (zwei Felder) ---------- */

.schwerpunkte { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 44px; }
.schwerpunkt {
  background: var(--blau-flaeche);
  border-radius: 8px;
  padding: 34px;
}
.hell .schwerpunkt { background: #FFFFFF; border: 1px solid #DDE3E9; }
.schwerpunkt h3 { margin-bottom: 12px; }
.schwerpunkt p { font-size: 15px; margin-bottom: 0; }

/* ---------- Gegenüberstellung ---------- */

.gegen { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 36px; }
.gegen-feld { border-radius: 8px; padding: 30px 32px; }
.gegen-ja { background: var(--blau-flaeche); }
.gegen-nein { background: var(--blau-tiefe); }
.hell .gegen-ja { background: #FFFFFF; border: 1px solid #DDE3E9; }
.hell .gegen-nein { background: #EBEFF3; border: 1px solid #DDE3E9; }
.gegen-feld h3 { margin-bottom: 14px; }
.gegen-feld ul { margin: 0; padding-left: 18px; }
.gegen-feld li { font-size: 15px; margin-bottom: 9px; }
.hell .gegen-feld li { color: var(--blau-primaer); }
.gegen-marke {
  font-size: 11px; font-weight: 500; letter-spacing: 0.22em;
  text-transform: uppercase; margin-bottom: 10px;
}
.gegen-ja .gegen-marke { color: var(--champagner-hell); }
.gegen-nein .gegen-marke { color: var(--silber-gedaempft); }
.hell .gegen-ja .gegen-marke { color: var(--champagner-dunkel); }
.hell .gegen-nein .gegen-marke { color: var(--papier-grau); }

@media (max-width: 860px) {
  .schwerpunkte, .gegen { grid-template-columns: 1fr; }
}

/* Bildunterschrift über dem Verlauf halten */
.bild-rahmen figcaption { position: relative; z-index: 1; }

/* Zweispaltiges Kartenraster (z. B. vier Grundsätze) */
.karten.karten-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 860px) {
  .karten.karten-2 { grid-template-columns: 1fr; }
}

/* ==========================================================
   Ergänzungen September 2026
   - Sprunglink für Tastaturbedienung
   - sichtbarer Fokus auf allen bedienbaren Elementen
   - Klappmenü auf schmalen Bildschirmen
   - dritte Schwerpunktspalte
   ========================================================== */

/* ---------- Sprunglink ---------- */

.sprunglink {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--champagner);
  color: var(--blau-tiefe);
  font-size: 14px;
  font-weight: 500;
  padding: 12px 22px;
  text-decoration: none;
  border-radius: 0 0 var(--radius) 0;
}
.sprunglink:focus { left: 0; }

/* ---------- Sichtbarer Fokus ---------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--champagner);
  outline-offset: 3px;
}
.hell a:focus-visible,
.hell button:focus-visible {
  outline-color: var(--champagner-dunkel);
}

/* ---------- Menüschalter (nur schmale Bildschirme) ---------- */

.nav-schalter {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--blau-linie);
  border-radius: var(--radius);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav-schalter span {
  display: block;
  width: 20px;
  height: 1px;
  background: var(--silber-hell);
}
.nav-schalter[aria-expanded="true"] { border-color: var(--champagner); }

/* ---------- Zusatzschaltfläche ---------- */

.btn-zweit { margin-left: 14px; }

/* ---------- Drittes Schwerpunktfeld ---------- */

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

@media (max-width: 1000px) {
  .schwerpunkte-3 { grid-template-columns: 1fr; }
}

/* ---------- Hinweis im Formularlabel ---------- */

.feld-zusatz {
  font-weight: 400;
  color: var(--silber-gedaempft);
}
.hell .feld-zusatz { color: var(--papier-grau); }

/* ---------- Kopfzeile auf schmalen Bildschirmen ---------- */

@media (max-width: 860px) {

  /* Kopfzeile bleibt einzeilig: Wortmarke links, Schalter rechts */
  .topbar-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-top: 14px;
    padding-bottom: 14px;
    flex-wrap: wrap;
  }
  .lockup img { height: 46px; }

  .nav-schalter { display: flex; }

  /* Menü ist zugeklappt, bis der Schalter es öffnet */
  .nav {
    display: none;
    width: 100%;
    order: 3;
    border-top: 1px solid var(--blau-linie);
    margin-top: 14px;
    padding-top: 6px;
  }
  .nav.offen { display: block; }

  .nav a {
    display: block;
    padding: 13px 0;
    font-size: 15px;
    border-bottom: 1px solid var(--blau-linie);
  }
  .nav a:last-child { border-bottom: 0; }
  .nav a + a { margin-left: 0; }

  /* Unterstreichungsanimation ergibt im Klappmenü keinen Sinn */
  .nav a:after { display: none; }

  /* Zweite Schaltfläche rutscht unter die erste */
  .btn-zweit { margin-left: 0; margin-top: 12px; }
  .btn { display: inline-block; }
}

/* ---------- Bewegungsreduktion respektieren ---------- */

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