/* ---------------------------------------------------------------------------
   two-blocks: Listen im rechten Textblock wie Fließtext setzen
   (bisher ohne eigene Regel -> li erbt 20px/24px aus .two-blocks__right)
   --------------------------------------------------------------------------- */
.two-blocks__right ul,
.two-blocks__right ol {
  margin: 0 0 32px;
  padding-left: 0;
  list-style: none;
}

.two-blocks__right ul:last-child,
.two-blocks__right ol:last-child {
  margin-bottom: 0;
}

.two-blocks__right li {
  position: relative;
  padding-left: 22px;
  color: #272727;
  font-family: "Plus Jakarta Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
}

.two-blocks__right li + li {
  margin-top: 8px;
}

.two-blocks__right ul > li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9b8e86;
}

.two-blocks__right ol {
  counter-reset: tb-li;
}

.two-blocks__right ol > li {
  counter-increment: tb-li;
}

.two-blocks__right ol > li::before {
  content: counter(tb-li) ".";
  position: absolute;
  left: 0;
  top: 0;
  color: #b1a69f;
  font-weight: 600;
}

@media (max-width: 568px) {
  .two-blocks__right ul,
  .two-blocks__right ol {
    margin-bottom: 24px;
  }

  .two-blocks__right li {
    font-size: 15px;
    line-height: 22px;
    padding-left: 20px;
  }

  .two-blocks__right li + li {
    margin-top: 6px;
  }

  .two-blocks__right ul > li::before {
    top: 8px;
    width: 5px;
    height: 5px;
  }
}

/* ===========================================================================
   BFSG / WCAG 2.2 AA — Korrekturen zum Pruefbericht DP-2026-08-25
   Stand 28.08.2026. Jede Regel nennt den Mangel aus dem Bericht.
   Grundsatz: nur so viel abdunkeln, wie das Kriterium verlangt — Farbton und
   Saettigung des Markentons bleiben erhalten.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Mangel 4 — Kontrast (WCAG 1.4.3), 2360 Elemente, 9 Farbkombinationen

   Markenton #b1a69f erreicht auf Weiss nur 2,38:1, verlangt sind 4,5:1.
   Abgedunkelt auf #82736a = 4,56:1. Derselbe Ton traegt beide gemeldeten
   Kombinationen: Text auf Weiss (1285 Elemente) UND Weiss auf der Flaeche
   (652 Elemente), weil weisser Text auf #82736a ebenfalls 4,56:1 ergibt.

   🔴 WICHTIG: NICHT global tauschen. Auf dem dunklen Fuss (#171716) erfuellt
   #b1a69f bereits 7,54:1 — abgedunkelt fiele er dort auf 3,94:1 und wir
   haetten einen neuen Mangel gebaut. Der Fuss wird deshalb unten
   ausdruecklich wieder auf den hellen Ton zurueckgesetzt.
   --------------------------------------------------------------------------- */

/* Fliesstext-Links auf hellem Grund — die groesste Einzelmenge (1285) */
a,
a:visited,
a:hover {
  color: #82736a;
}

/* Der Fuss ist dunkel: dort bleibt der helle Ton (7,54:1).
   Bewusst ohne :hover und ohne :visited, damit die spezifischere
   Theme-Regel .footer ul li a { color:#fff } weiter gewinnt. */
.footer a {
  color: #b1a69f;
}

/* 🔴 KORREKTUR 01.09.2026 — Knopftext verschwand bei :hover und :visited.
   Gemeldet vom Kunden auf /webdesign-mainz/ („Beratungstermin buchen" stand
   als leere Flaeche da).

   Ursache ist die Regel `a, a:visited, a:hover` oben: `a:hover` und `a:visited`
   haben die Spezifitaet (0,1,1) — GENAU dieselbe wie die Knopfregeln des
   Themes, etwa `.seo-text a { color:#fff }`. Bei gleicher Spezifitaet gewinnt,
   was spaeter kommt, und diese Datei kommt nach main.css. Im Theme selbst
   steht dessen `a:hover { color:#b1a69f }` (main.css Z. 1953) VOR den
   Knopfregeln und verliert deshalb — unsere Kopie derselben Regel steht
   dahinter und gewinnt. Ergebnis: Text #82736a auf Flaeche #82736a.
   Chrome zeigt :visited in getComputedStyle absichtlich nicht an (Datenschutz)
   — der Nachweis geht nur ueber CSS.forcePseudoState oder ein Bildschirmfoto.

   Betroffen ist jede Theme-Regel fuer <a> mit Spezifitaet (0,1,1), die in
   main.css NACH Zeile 1953 steht und `color` setzt. Das sind genau die 14
   Kontexte unten (per Skript ueber main.css ermittelt); fuer keinen davon
   hat das Theme eigene :hover/:visited-Farben. Hier bekommt jeder seine
   Theme-Farbe mit (0,2,1) zurueck. Alle anderen Knoepfe haben (0,2,0) oder
   mehr und waren nie betroffen. */

/* weisse Schrift auf Markenflaeche bzw. dunklem Grund */
.seo-text a:visited,
.seo-text a:hover,
.scale__top a:visited,
.scale__top a:hover,
.export__slide_right a:visited,
.export__slide_right a:hover,
.blog__title a:visited,
.blog__title a:hover,
.error-page a:visited,
.error-page a:hover,
.faq__left a:visited,
.faq__left a:hover,
.faq__right a:visited,
.faq__right a:hover {
  color: #fff;
}

/* dunkle Schrift auf hellem Grund (Schlagwoerter, Pillen, Kontaktlinks) —
   im Theme bleiben die auch bei :hover/:visited dunkel */
.projects__tag a:visited,
.projects__tag a:hover,
.projects__all a:visited,
.projects__all a:hover,
.single-project__tag a:visited,
.single-project__tag a:hover,
.buttons__item a:visited,
.buttons__item a:hover,
.single-blog__tags a:visited,
.single-blog__tags a:hover,
.single-blog__bottom_blocks a:visited,
.single-blog__bottom_blocks a:hover,
.contact__links a:visited,
.contact__links a:hover {
  color: #272726;
}

/* 🔴 NACHTRAG 08.09.2026 — dieselbe Ursache, zwei Knoepfe mehr.
   Gemeldet vom Kunden auf /preise/: der CTA-Knopf „Projekt anfragen" im Kasten
   „Individuelle Loesung gewuenscht?" stand als brauner Text auf brauner Flaeche.

   Der Block oben ist ueber main.css ermittelt worden und deckt nur Regeln der
   Form `.block a` (0,1,1) ab. Es gibt aber auch Knoepfe, bei denen die Klasse
   AM <a> SELBST haengt — `.lp-btn`, `.button-all`. Deren Regel hat nur (0,1,0)
   und verliert damit erst recht gegen unser `a:visited` (0,1,1).

   .lp-btn steht nicht in main.css, sondern im Inline-<style> der Vorlage
   template-preise.php („brumm-lp-styles"). Ein Skript ueber main.css konnte
   ihn deshalb gar nicht finden — gefunden wurde er, indem auf den Seiten JEDER
   sichtbare <a> mit erzwungenem :visited/:hover gegen seine Normalfarbe
   geprueft wurde (scan.js im Paket).

   .lp-btn hat `:hover` selbst gesetzt (0,2,0) und war nur bei :visited kaputt;
   .button-all — der mitscrollende Knopf unten rechts auf JEDER Seite — bei
   beidem. `:visited` + Klasse ergibt (0,2,0) und gewinnt. */
.lp-btn:visited,
.lp-btn:hover,
.button-all:visited,
.button-all:hover {
  color: #fff;
}

/* Flaechen mit weissem Text — 652 Elemente (Knoepfe, Zaehler, CTAs) */
.popup__link,
.popup.pop-form form input[type=submit],
.popup.pop-form form textarea[type=submit],
.button-all,
.header .button,
.header .projects-menu-item .project-count,
.hero__buttons a:nth-child(1),
.service__text a.button,
.services__buttons a:nth-child(1),
.scale.seo .scale__text a,
.scale__top a,
.export__slide_right a,
.all-projects .projects__block a,
.single-project .btn,
.single-project__block_right .single-button,
.blog__title a,
.single-blog__bottom_right a.btn,
.error-page a,
.seo-text a,
.banner__left .btn,
.image-text__right a.btn,
.two-blocks__left .btn,
.two-blocks__right .btn {
  background: #82736a;
}

/* 🔴 DREI Ausnahmen, die beim ersten Durchgang falsch mit abgedunkelt wurden.
   Ursache: in main.css deklarieren diese Bloecke `background` ZWEIMAL — die
   zweite Deklaration gewinnt. Wer nur die erste liest, haelt sie faelschlich
   fuer gefuellte Markenknoepfe.

   .services__buttons a:nth-child(2)
       ... background: #b1a69f; color: #fff;   <- erste Deklaration
       ... color: #272726; border: 1px solid #272726; background: transparent;
       Also ein Umriss-Knopf mit dunkler Schrift. Abgedunkelt wurde daraus eine
       gefuellte Flaeche mit 3,28:1 — schlechter als vorher UND ein anderer
       Knopf. Bleibt unangetastet: dunkel auf Weiss ergibt 15,3:1.

   .faq__left a / .faq__right a
       ... background: linear-gradient(180deg, #f5f5f5 0%, #fff 100%);
       ... background-clip: text; -webkit-text-fill-color: transparent;
       Das ist Verlaufsschrift auf dunklem Grund. Die Kurzform `background:`
       setzt `background-clip` auf den Anfangswert zurueck — die Schrift blieb
       durchsichtig und der Knopf stand OHNE lesbare Beschriftung da.
       Gemessen auf /seo/: -webkit-text-fill-color: rgba(0,0,0,0).

   Lehre: bei einer Farbkorrektur immer die LETZTE Deklaration im Block lesen,
   nicht die erste — und `background` nie als Kurzform ueberschreiben, wo
   `background-clip` im Spiel ist. */

/* 🔴 Sonderfall Newsletter-Knopf im Fuss: der hat als einziger DUNKLEN Text
   auf der Markenflaeche (#171716 auf #b1a69f = 7,54:1). Auf der neuen,
   dunkleren Flaeche waeren das nur noch 3,94:1 — der Text muss deshalb
   zusammen mit der Flaeche auf Weiss wechseln (#fff auf #82736a = 4,56:1). */
.footer__newsletter form button,
.footer__newsletter form input[type=submit],
.footer__newsletter form #mc_sig {
  background: #82736a;
  color: #fff;
}

/* Markenton als Ueberschriftenfarbe auf hellem Grund */
.contact__text h3,
.team-foto__item h3,
.banner__left p a {
  color: #82736a;
}

/* Blogliste: die kleine Zeile ueber dem Titel stand auf 40 % Deckkraft
   (ergibt #a9a9a8 auf Weiss = 2,35:1). 64 % ergeben 4,63:1. — 160 Elemente */
.blog__item h2 {
  color: rgba(39, 39, 38, 0.64);
}

/* Rolle unter dem Namen in den Kundenstimmen — dieselbe 40-Prozent-Deckkraft
   wie in der Blogliste, deshalb ebenfalls #a9a9a8 = 2,35:1.
   (Im Bericht als „Überschrift Influencerin, Dubai" gefuehrt.) */
.offers__top_name h4 {
  color: rgba(39, 39, 38, 0.64);
}

/* Dieselbe Zeile im dunklen Block darunter: 40 % Weiss auf #171716 reicht
   ebenfalls nicht. 45 % wurden nachgemessen als 4,48:1 — knapp daneben,
   axe rechnet mit der tatsaechlich gerasterten Farbe. 46 % sitzen sicher. */
.blog-next .blog__item h2 {
  color: rgba(255, 255, 255, 0.46);
}

/* Borlabs-Inhaltsblocker vor dem Kontaktformular — 59 + 123 Elemente.
   Das Plugin setzt seine Farben mit !important, deshalb hier ebenso. */
body .brlbs-cmpnt-container.brlbs-cmpnt-content-blocker a.brlbs-cmpnt-cb-btn {
  background-color: #807569 !important;  /* Weiss darauf: 4,50:1 */
}

body .brlbs-cmpnt-container.brlbs-cmpnt-content-blocker a.brlbs-cmpnt-cb-provider-toggle {
  color: #7d7266 !important;             /* auf #fafafa: 4,50:1 */
}

/* ---------------------------------------------------------------------------
   Mangel 6 — Nicht-Text-Kontrast (WCAG 1.4.11), 447 Elemente

   Die Felder von Contact Form 7 sind nur durch eine Unterkante zu erkennen.
   #c5bfb8 gegen Weiss = 1,82:1, verlangt sind 3:1. #9d9388 ergibt 3,02:1.
   Es genuegt EINE sichtbare Kante — die Optik bleibt also dieselbe, die
   Linie wird nur so weit nachgedunkelt, wie die Norm es verlangt.
   --------------------------------------------------------------------------- */
.popup.pop-form form input,
.popup.pop-form form textarea,
.single-contact form input,
.single-contact form textarea,
.page-id-7082 .entry-content .tnp-field input[type=text],
.page-id-7082 .entry-content .tnp-field input[type=email] {
  border-bottom-color: #9d9388;
}

.popup.pop-form form .choice-input label,
.popup.pop-form form .group-checkbox .wpcf7-list-item,
.single-contact form .choice-input label,
.single-contact form .group-checkbox .wpcf7-list-item {
  border-color: #9d9388;
}

.popup.pop-form form .form__checkbox-field .wpcf7-checkbox input[type=checkbox] + span.wpcf7-list-item-label::before,
.single-contact form .form__checkbox-field .wpcf7-checkbox input[type=checkbox] + span.wpcf7-list-item-label::before {
  border-color: #9d9388;
}

/* Newsletter-Feld im Fuss: die Fuellung (#2e2e2d) hebt sich mit 1,32:1 kaum
   vom Fuss (#171716) ab — man sieht nicht, wo das Feld anfaengt.
   Eine Kante in #646463 bringt 3,03:1.

   🔴 KORREKTUR 28.08.2026 (abends): Die Kante stand zuerst auf `form` — und
   das ist hier NICHT die Pille. Gemessen im Browser: das <form> ist ein
   durchsichtiger Flex-Kasten (500 x 178, border-radius 0), die runde Form
   sitzt auf dem input#tnp-1 selbst (border-radius 100px, border 0). Die Regel
   zeichnete deshalb ein eckiges Rechteck um den ganzen Block.
   Der Block in main.css, der wie die Pille aussieht
   (`.footer__newsletter form { border-radius:100px; height:52px }`), gehoert
   zu einem Mailchimp-Formular, das hier gar nicht ausgeliefert wird.

   Jetzt am Feld selbst, als innenliegender Ring: `box-shadow: inset` folgt dem
   border-radius und veraendert — anders als `border` — die Groesse des
   Elements nicht, das Layout bleibt also unberuehrt.

   Die Fuellung bleibt bewusst bei 10 % Weiss: auf 33 % angehoben braechte sie
   zwar selbst 3,03:1, aber der eingegebene Text faellt dann auf 2,79:1 gegen
   die hellere Flaeche — ein Mangel gegen den naechsten getauscht. */
.footer__newsletter form input[type="email"],
.footer__newsletter form input.tnp-email {
  box-shadow: inset 0 0 0 1px #646463;
}

/* Der eingegebene Text stand auf 30 % Weiss (2,62:1 gegen die Fuellung).
   50 % ergeben 4,60:1. Betrifft auch den Platzhaltertext. */
.footer__newsletter form input,
.footer__newsletter form input::placeholder,
.footer__newsletter form input::-moz-placeholder {
  color: rgba(255, 255, 255, 0.5);
}

/* ---------------------------------------------------------------------------
   Mangel 11 — Fokus sichtbar (WCAG 2.4.7), 30 Elemente

   Es fehlte durchgaengig ein sichtbarer Fokus-Stil. :focus-visible trifft nur
   die Tastaturbedienung — mit der Maus sieht niemand einen Rahmen, die Optik
   der Seite aendert sich also fuer die allermeisten Besucher nicht.
   --------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
  /* !important seit 21.10.2026: main.css hat „*, ::after, ::before { outline: none !important }“,
     das hat diesen Rahmen bis dahin auf der ganzen Seite unsichtbar gemacht (gemessen:
     outline-style none an jedem Link). border-radius: 2px entfernt – der Rahmen folgt jetzt der
     Form des Elements, runde Knoepfe bleiben rund. */
  outline: 3px solid #82736a !important;
  outline-offset: 2px !important;
}

/* Auf dunklem Grund braucht der Rahmen den hellen Ton, sonst verschwindet er */
.footer a:focus-visible,
.footer button:focus-visible,
.footer input:focus-visible,
.blog-next a:focus-visible {
  outline-color: #e6ded8 !important;
}

/* ---------------------------------------------------------------------------
   Mangel 9 — Reflow (WCAG 1.4.10), 69 Elemente

   Bei 320 px Breite ragten lange Woerter und eine Ueberschrift ueber den Rand
   und erzwangen waagerechtes Scrollen. Gemeldet waren u. a.
   "Suchmaschinenoptimierung" (h1, 42 px Ueberhang) und ein Absatz mit 24 px.
   --------------------------------------------------------------------------- */
@media (max-width: 480px) {
  h1, h2, h3, h4 {
    overflow-wrap: break-word;
    word-break: break-word;
    -webkit-hyphens: auto;
            hyphens: auto;
  }

  p, li, dd, dt, figcaption, blockquote {
    overflow-wrap: break-word;
  }

  /* Formulare liefen 39 px ueber den Rand */
  form,
  form input,
  form textarea,
  form select {
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* ---------------------------------------------------------------------------
   Mangel 15 + 19 — Landmarks und fehlender Hauptbereich, 4811 Elemente

   Das <main> kommt aus header.php/footer.php (siehe Theme-Patch im Paket).
   .site-container ist ein Spalten-Flexbox mit justify-content: space-between;
   frueher waren die Inhaltsabschnitte direkte Flex-Kinder. Damit das Wrapping
   die Anordnung NICHT veraendert, gibt <main> den Fluss unveraendert weiter —
   dieselbe Rolle, die im Theme schon .page-container mit flex:1 0 auto spielt.
   --------------------------------------------------------------------------- */
.site-container > main#primary {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  width: 100%;
  min-width: 0;
}

/* ---------------------------------------------------------------------------
   08.09.2026 — Kopfabstand am Handy, gemeldet vom Kunden auf
   /wordpress-webdesign/ („Ueberschrift steht viel zu weit unten").

   Das Theme setzt am Handy fuer jeden Seitenkopf 129 px Innenabstand oben
   (main.css Z. 9661 fuer .services, Z. 8259 .single-project, Z. 9168
   section.projects; .single-contact sogar 149 px). Zusammen mit dem 103 px
   hohen Kopf beginnt die H1 damit erst bei 232 px — ueber ein Viertel des
   Bildschirms (844 px) ist leer, bevor der erste Buchstabe kommt.

   NICHT von uns verursacht: derselbe Wert steht schon in den Fassungen von
   main.css vom 09.10.2025, 14.01.2026 und 13.04.2026 (Internet Archive).
   Geprueft ist auch, dass unsere anpassungen.css und das <main> aus dem
   BFSG-Paket die Geometrie nicht anfassen — mit und ohne beides identisch.

   Neu: 72 px, die H1 beginnt bei 175 px. Gemessen am Handy 390x844.

   🔴 .hero (Startseite) bleibt ABSICHTLICH bei 129 px: dieser Abschnitt hat
   margin-top: -94px und liegt damit UNTER dem Kopf; die 129 px sind dort der
   Freiraum fuer den Kopf, nicht Luft. Die H1 steht ohnehin schon bei 138 px.
   Wird der Wert dort kleiner, rutscht die Ueberschrift hinter das Logo.

   .lp-hero (/preise/) bleibt ebenfalls: 92 px, das ist schon der neue Bereich,
   und die Regel steht im Inline-<style> der Vorlage IM KOERPER — sie kommt
   nach dieser Datei und liesse sich nur mit hoeherer Spezifitaet ueberstimmen.
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .services,
  .single-project,
  section.projects,
  .single-contact {
    padding-top: 72px;
  }
}

/* 🔴 NACHTRAG 19.09.2026 — aktive Pille der Leistungsnavigation war leer.
   Gemeldet vom Kunden (Bildschirmfoto /seo/): in der Reihe „Webdesign · Branding ·
   SEO · UX/UI …“ stand die aktive Pille als schwarze Flaeche ohne Text.

   Unsere eigene Regel von oben (01.09.) `.buttons__item a:visited/:hover { color:#272726 }`
   hat (0,2,1) – genau so viel wie die Theme-Regel `.buttons__item.active a { color:#fff }`
   (main.css 5458) – und gewinnt, weil diese Datei nach main.css kommt. Die aktive Pille
   verlinkt auf die AKTUELLE Seite, und die ist fuer den Browser immer :visited – der Text
   war also praktisch immer #272726 auf #272726.

   Die alte Pruefung (pruefen.js vom 01.09.) nahm `.buttons__item a`, also die ERSTE Pille
   der Reihe, nie die aktive – deshalb fiel es nicht auf. Pruefung jetzt: aktive-pille.js. */
.buttons__item.active a,
.buttons__item.active a:visited,
.buttons__item.active a:hover {
  color: #fff;
}

/* ---------------------------------------------------------------------------
   22.09.2026 — Kopfabstand ALLER Seiten wie /seo-check/ (Vorlage template-seo,
   section.banner: 80 px Desktop, 0 px am Handy). Gewuenscht: derselbe Abstand
   ueberall, Handy und Desktop.

   Vorher (Luft zwischen Kopfzeile und H1, Handy 390 / Desktop 1440):
     /blog/, /category/…     section.blog          142 / 199
     Beitraege               section.single-blog    94 / 150
     /termin/                section.contact       129 / 199
     /preise/                section.lp-hero       130 / 171  (Inline-<style>)
     Leistungsseiten         section.services       72 / 199  (72 = unsere Regel 08.09.)
     /kontakt/               section.single-contact 72 / 162
     /projekte/              section.all-projects   72 / 199
     /projekte/<x>/          section.single-project 72 / 177
     /team/                  section.team            0 / 199
     /angebote/              section.single-contact 64 /  96

   Warum nicht ueber Klassen: .single-contact, .contact, .services stehen auch
   als normale Bloecke MITTEN auf Seiten (Startseite, template-seo, Projekte).
   Der Seitenkopf ist auf jeder Vorlage die ERSTE <section> im <main> — daran
   haengt die Regel. <main id="primary"> kommt aus unserem BFSG-Patch in
   header.php; faellt es bei einem Theme-Neubau weg, wirkt diese Regel nicht mehr
   (dann aber auch die Landmark nicht – gleiche Baustelle).

   Ausnahmen: .hero (Startseite) bleibt – Abschnitt liegt am Handy UNTER der
   Kopfzeile (margin-top -94px), siehe Block 08.09. /preise/ (.lp-hero) steckt
   in <div class="lp">, daher der zweite Selektor; die Inline-Regel dort hat
   (0,1,0) und verliert gegen (1,1,2).

   Die Regel vom 08.09. (72 px) bleibt stehen: sie trifft am Handy weiterhin die
   .single-contact-Bloecke mitten auf Seiten; fuer die Seitenkoepfe ist sie durch
   diesen Block ueberstimmt.
   --------------------------------------------------------------------------- */
main#primary > section:first-of-type:not(.hero),
main#primary > .lp > section.lp-hero {
  padding-top: 80px;
}
@media (max-width: 768px) {
  main#primary > section:first-of-type:not(.hero),
  main#primary > .lp > section.lp-hero {
    padding-top: 0;
  }
}

/* ---------------------------------------------------------------------------
   05.10.2026 — SEO: eine H1 je Seite (Paket 2026-10-05-seo-h1-fusszeile-alt)

   Der Kontaktblock unten auf den Landingpages und Projektseiten trug eine
   zweite <h1> («Kontakt») – jetzt <h2>. Die Projektuebersicht /projekte/ und
   die Projekt-Kategorien hatten gar keine <h1> – ihre Ueberschrift war <h2>,
   jetzt <h1>. main.css kennt die Regeln nur fuer das jeweils alte Element;
   hier stehen sie fuer das neue, Wert fuer Wert uebernommen
   (main.css: «.single-contact .top h1», «.projects__title h2»).
   .single-contact.home .top h2 (Startseite) bleibt mit (0,3,1) davor.
   --------------------------------------------------------------------------- */
.single-contact .top h2 {
  color: #272726;
  font-family: "Atyp Display";
  font-size: 44px;
  font-style: normal;
  font-weight: 400;
  line-height: 52px;
  margin-bottom: 19px;
}
.projects__title h1 {
  color: #272726;
  font-family: "Atyp Display";
  font-size: 44px;
  font-style: normal;
  font-weight: 400;
  line-height: 52px;
  width: 40%;
}
.all-projects .projects__title h1 {
  width: 100%;
}
@media (max-width: 992px) {
  .projects__title h1 {
    font-size: 35px;
  }
}
@media (max-width: 768px) {
  .single-contact .top h2 {
    font-size: 26px;
    line-height: 28px;
  }
  .projects__title h1 {
    font-size: 26px;
    line-height: 28px;
    width: 100%;
  }
}

/* ---------------------------------------------------------------------------
   06.10.2026 — Schriften als WOFF2 (Paket 2026-10-06-inhalte-bad-kreuznach-blog)

   main.css nennt je Schrift zuerst .woff und danach .woff2; die .woff2-Dateien
   gab es auf dem Server nie (404). Sie liegen jetzt daneben, rund 30 % kleiner.
   Eine spaetere @font-face-Regel mit denselben Angaben ersetzt die fruehere –
   so nimmt der Browser WOFF2, ohne dass main.css angefasst wird. Die vier
   Schnitte, die im sichtbaren Kopf jeder Seite stehen, laedt brumm-tempo.php
   per <link rel="preload"> vor: gemessen kam die Schrift erst nach dem ersten
   Bild und verschob den Text (CLS 0,50 auf /webdesign-frankfurt/).
   font-display bleibt wie im Theme (kein Aufblitzen einer Ersatzschrift).
   --------------------------------------------------------------------------- */
@font-face {
  font-family: "Atyp Display"; font-weight: 400; font-style: normal;
  src: url("/wp-content/themes/brumm/assets/fonts/AtypBLDisplay-Medium.woff2") format("woff2"),
       url("/wp-content/themes/brumm/assets/fonts/AtypBLDisplay-Medium.woff") format("woff");
}
@font-face {
  font-family: "Atyp Display"; font-weight: 500; font-style: normal;
  src: url("/wp-content/themes/brumm/assets/fonts/AtypDisplay-Regular.woff2") format("woff2"),
       url("/wp-content/themes/brumm/assets/fonts/AtypDisplay-Regular.woff") format("woff");
}
@font-face {
  font-family: "Plus Jakarta Sans"; font-weight: 400; font-style: normal;
  src: url("/wp-content/themes/brumm/assets/fonts/PlusJakartaSans-Regular.woff2") format("woff2"),
       url("/wp-content/themes/brumm/assets/fonts/PlusJakartaSans-Regular.woff") format("woff");
}
@font-face {
  font-family: "Plus Jakarta Sans"; font-weight: 500; font-style: normal;
  src: url("/wp-content/themes/brumm/assets/fonts/PlusJakartaSans-Medium.woff2") format("woff2"),
       url("/wp-content/themes/brumm/assets/fonts/PlusJakartaSans-Medium.woff") format("woff");
}
@font-face {
  font-family: "Plus Jakarta Sans"; font-weight: 600; font-style: normal;
  src: url("/wp-content/themes/brumm/assets/fonts/PlusJakartaSans-SemiBold.woff2") format("woff2"),
       url("/wp-content/themes/brumm/assets/fonts/PlusJakartaSans-SemiBold.woff") format("woff");
}

/* ---------------------------------------------------------------------------
   21.10.2026 — Blogbeitraege: Ueberschriften und Knoepfe
   (Paket 2026-10-21-blog-ueberschriften-knoepfe, Wunsch von Christina Brumm
   zu /digitalisierungsfoerderung-2026/)

   1. Abstaende. Im Theme hat die H2 eines Abschnitts unten 32 px und oben
      nichts — Luft nach oben kam nur vom letzten Absatz davor (16 px). Die
      Ueberschrift stand damit naeher am vorigen Abschnitt als an ihrem eigenen
      Text. Jetzt umgekehrt: der Abstand zwischen zwei Abschnitten sitzt auf
      .blog-block, unter der Ueberschrift bleiben 12–16 px.
   2. Groesse. Am Handy war die H2 so gross wie der Fliesstext (16 px gegen
      15 px), am Desktop 28 px. Jetzt Handy 20 px, Tablet 22 px, Desktop 24 px.
      Zwischenueberschriften H3–H6 (rund 3.000 H3 in den Beitraegen) bleiben
      am Desktop in der Fliesstext-Schrift 16 px, am Handy 17 statt 15/16 px;
      unten 8 statt 32 px, oben bleibt es bei 32 bzw. 28 px.
   3. Knoepfe. Ein Absatz, der nur aus einem Link besteht („Jetzt … pruefen
      lassen →"), wird von brumm-blog-knoepfe.php zu <p class="blog-knopf">
      mit <a class="btn">. Den Knopf .single-blog__bottom_right a.btn gab es im
      Theme schon (Flaeche #82736a aus der BFSG-Regel oben), nur mit fester
      Hoehe 60 px — ein langer Text brach am Handy aus der Pille aus.
   --------------------------------------------------------------------------- */
.single-blog__bottom_right .blog-block + .blog-block {
  margin-top: 56px;
}

.single-blog__bottom_right .blog-block .content > :first-child {
  margin-top: 0;
}

.single-blog__bottom_right .blog-block .content > :last-child {
  margin-bottom: 0;
}

.single-blog__bottom_right h2 {
  font-size: 24px;
  line-height: 30px;
  margin-bottom: 16px;
}

.single-blog__bottom_right h3,
.single-blog__bottom_right h4,
.single-blog__bottom_right h5,
.single-blog__bottom_right h6 {
  margin-top: 32px;
  margin-bottom: 8px;
}

.single-blog__bottom_right p.blog-knopf {
  margin: 28px 0;
}

/* Fuenf der zwoelf Aufrufe stehen in der hellblauen Hinweisflaeche (Inline-Stil
   aus dem Editor). Ein Knopf in einem Rahmen wirkt doppelt — der Absatz gibt
   seine Flaeche ab, der Knopf ist die Hervorhebung. */
.single-blog__bottom_right p.blog-knopf[style] {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
}

.single-blog__bottom_right a.btn {
  height: auto;
  min-height: 56px;
  padding: 16px 28px;
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

/* Im Editor eingefaerbte Links (style="color:#000" am <a>) sollen auf der
   Flaeche trotzdem weiss sein; brumm-blog-knoepfe.php nimmt das style-Attribut
   zwar ab, die Regel faengt aber auch von Hand gesetzte Knoepfe auf. */
.single-blog__bottom_right a.btn,
.single-blog__bottom_right a.btn:visited,
.single-blog__bottom_right a.btn:hover {
  color: #fff !important;
}

.single-blog__bottom_right a.btn:hover,
.single-blog__bottom_right a.btn:focus-visible {
  background: #6b5e56;
}

.single-blog__bottom_right a.btn strong,
.single-blog__bottom_right a.btn span {
  font-weight: inherit;
  color: inherit !important;
}

@media (max-width: 768px) {
  .single-blog__bottom_right .blog-block + .blog-block {
    margin-top: 44px;
  }

  .single-blog__bottom_right h2 {
    font-size: 22px;
    line-height: 28px;
    margin-bottom: 12px;
  }

  .single-blog__bottom_right h3,
  .single-blog__bottom_right h4,
  .single-blog__bottom_right h5,
  .single-blog__bottom_right h6 {
    margin-top: 28px;
  }

  .single-blog__bottom_right h3 {
    font-size: 17px;
    line-height: 23px;
  }

  .single-blog__bottom_right p.blog-knopf {
    margin: 24px 0;
  }
}

/* Theme setzt hier H2–H6 alle auf 16/22 px — die H2 holt ihre Groesse zurueck */
@media (max-width: 568px) {
  .single-blog__bottom_right h2 {
    font-size: 20px;
    line-height: 26px;
  }

  .single-blog__bottom_right h3 {
    font-size: 17px;
    line-height: 23px;
  }

  .single-blog__bottom_right a.btn {
    display: flex;
    width: 100%;
    min-height: 52px;
    padding: 14px 20px;
    font-size: 14px;
    line-height: 20px;
  }
}