/* ===== Psychische Gefährdungsbeurteilung (Prefix: gbu-) =====
   Pflichtseite, gebaut auf die gemessene Nachfrage vom 27.08.2026:
   "psychische gefährdungsbeurteilung" hat Suggest-Breite 128 und liegt
   damit über /elternzeit-arbeitgeber und /arbeitszeiterfassung-pflicht.
   Die Langform "gefährdungsbeurteilung psychische belastung" liegt bei 92,
   deshalb steht die Kurzform in H1, Titel und URL.

   Inhaltliche Achse: die Befragung ist der kleinste Teil der Pflicht, und
   für sie gibt es kostenlose Werkzeuge der Berufsgenossenschaften. Verkauft
   wird alles danach. Deshalb nennt die Seite die freien Instrumente beim
   Namen, statt sie zu verschweigen. */

/* --- Hero -----------------------------------------------------------
   Sprache der Startseite seit Phase 3: warmes Papier statt Teal-Verlauf,
   grosse Display-Type, ein Wort auf der gelben Marke, Newsreader als
   zweite Zeile, Kennzahlen mit Haarlinien statt Icon-Liste.
   Die Figur ist aus dem Hero heraus in die dunkle Sektion gewandert, wo
   ihr Argument steht. Der Rhythmus ist damit hell, dunkel, hell. */
.gbu-hero { background: var(--bg-light); padding: 3.75rem 0 0; }
.gbu-brotkrumen { font-size: .8rem; color: var(--subtle); margin-bottom: 2.25rem; }
.gbu-brotkrumen a { color: var(--primary-dark); }

.gbu-eyebrow { display: flex; align-items: center; gap: .7rem; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--primary-dark); }
.gbu-eyebrow::before { content: ""; width: 32px; height: 1px; background: currentColor; flex: none; }

/* 600 statt 800: Bricolage laeuft bei dieser Groesse sonst zu. Die Zeile
   ist laenger als die der Startseite ("HRklar machen."), deshalb ein
   kleinerer Grad und ein weicheres Leading. */
.gbu-h1 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2.1rem, 5.4vw, 4.2rem);
    line-height: 0.98;
    letter-spacing: -0.04em;
    color: var(--text);
    margin: 1.5rem 0 0;
    max-width: 16ch;
    text-wrap: balance;
}
/* Gelbe Marke wie auf der Startseite. --accent-bright ist Flaechenfarbe,
   --text darauf traegt 12,06:1. Der leichte Dreh nimmt dem Rechteck das
   Schablonenhafte. */
.gbu-marke { display: inline-block; background: var(--accent-bright); color: var(--text); padding: 0 .09em .04em; transform: rotate(-1.6deg); }
.gbu-h1-serif {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.3rem, 3vw, 2.1rem);
    line-height: 1.1;
    letter-spacing: -.01em;
    color: var(--primary);
    margin: .7rem 0 0;
}

.gbu-hero-unten { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 3rem; align-items: start; margin-top: 2.75rem; }
.gbu-hero-sub { color: var(--body); font-size: 1rem; line-height: 1.6; margin: 0 0 1.5rem; }
.gbu-hero-btns { display: flex; flex-wrap: wrap; gap: .75rem; }

.gbu-tldr { background: #fff; border-left: 4px solid var(--primary); border-radius: 0 3px 3px 0; padding: 1.2rem 1.4rem; }
.gbu-tldr-label { font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--primary-dark); margin-bottom: .45rem; }
.gbu-tldr p { margin: 0; color: var(--text); font-size: .95rem; line-height: 1.6; }

/* Kennzahlen: 1px-Raster auf --border, die Zellen tragen die Papierfarbe.
   Dasselbe Muster wie .hk-index-kennzahlen. */
.gbu-kennzahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--border); border-top: 1px solid var(--border); margin-top: 3.5rem; }
.gbu-kennzahl { background: var(--bg-light); padding: 1.5rem 1.2rem 1.8rem 0; }
.gbu-kennzahl:not(:first-child) { padding-left: 1.2rem; }
.gbu-kennzahl-wert { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.35rem, 2.5vw, 2.15rem); letter-spacing: -.03em; line-height: 1; color: var(--text); }
.gbu-kennzahl-txt { font-size: .85rem; color: var(--subtle); margin-top: .4rem; }

/* --- Figur: Aufwandsband ueber die fuenf Schritte ---
   Die Segmentbreiten sind die Tage aus der Kalkulation (1,0 / 0,5 / 1,5 /
   1,0 / 0,5 von 4,5), nicht geschaetzt. --anteil traegt den Prozentwert. */
.gbu-fig-band { display: flex; gap: 3px; margin: 0 0 .75rem; }
.gbu-fig-seg { flex: 0 0 var(--anteil); height: 26px; border-radius: 2px; overflow: hidden; }
.gbu-fig-seg i { display: block; height: 100%; background: var(--primary-glow); transform: scaleX(0); transform-origin: left; animation: hk-figure-wach .5s ease-out forwards; }
.gbu-fig-seg:nth-child(1) i { animation-delay: .30s; }
.gbu-fig-seg:nth-child(2) i { animation-delay: .42s; }
.gbu-fig-seg:nth-child(3) i { animation-delay: .54s; }
.gbu-fig-seg:nth-child(4) i { animation-delay: .66s; }
.gbu-fig-seg:nth-child(5) i { animation-delay: .78s; }
.gbu-fig-seg--frei i { background: rgba(255,255,255,.28); }

.gbu-fig-legende { display: flex; flex-wrap: wrap; gap: .35rem .95rem; list-style: none; padding: 0; margin: 0 0 1.4rem; font-size: .7rem; color: var(--on-dark); }
.gbu-fig-legende li { display: inline-flex; align-items: center; gap: .35rem; }
.gbu-fig-punkt { width: 10px; height: 10px; border-radius: 2px; background: var(--primary-glow); flex: none; }
.gbu-fig-punkt--frei { background: rgba(255,255,255,.28); }

@media (prefers-reduced-motion: reduce) {
    .gbu-fig-seg i { animation: none; transform: scaleX(1); }
}

/* --- Abschnitte --- */
.gbu-abschnitt { padding: 3.25rem 0; }
.gbu-abschnitt--papier { background: #f2efe7; }
.gbu-abschnitt h2 { font-size: clamp(1.4rem, 2.6vw, 1.85rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.12; color: #101614; margin: 0 0 1rem; max-width: 820px; }
.gbu-abschnitt h3 { font-size: 1.1rem; font-weight: 700; color: #101614; margin: 1.75rem 0 .55rem; }
.gbu-abschnitt p { color: #393d3a; line-height: 1.6; margin: 0 0 1rem; max-width: 60ch; }
.gbu-abschnitt a { color: #0a5f56; }

/* --- Normenkarten: Spalten mit Trennlinie, kein Kartenraster --- */
.gbu-normen { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0; margin: 1.75rem 0 .5rem; border-top: 1px solid #ddd9ce; }
.gbu-norm { padding: 1.3rem 1.4rem 1.3rem 0; border-right: 1px solid #ddd9ce; }
.gbu-norm:last-child { border-right: none; }
.gbu-norm + .gbu-norm { padding-left: 1.4rem; }
.gbu-norm-para { display: block; font-size: .82rem; font-weight: 700; color: #a3522c; margin-bottom: .45rem; }
.gbu-norm-para a { color: inherit; }
.gbu-norm p { font-size: .9rem; margin: 0; max-width: none; }

/* --- Die fünf Belastungsfelder --- */
.gbu-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; margin-top: 1.75rem; }
.gbu-feld { border: 1px solid #ddd9ce; border-radius: 3px; background: #fff; padding: 1.3rem 1.4rem; transition: border-color .15s ease; }
.gbu-feld:hover { border-color: #0b6e64; }
.gbu-feld-num { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; color: #a3522c; margin-bottom: .5rem; font-variant-numeric: tabular-nums; }
.gbu-feld h3 { margin: 0 0 .4rem; font-size: 1rem; }
.gbu-feld p { font-size: .9rem; margin: 0; max-width: none; }

/* --- Dunkler Abschnitt: die Abgrenzung gegen die freien Werkzeuge --- */
.gbu-abschnitt--dunkel { background: #08312d; }
.gbu-abschnitt--dunkel h2, .gbu-abschnitt--dunkel h3 { color: #fff; }
.gbu-abschnitt--dunkel p { color: #aebcb3; }
.gbu-abschnitt--dunkel strong { color: #fff; }
.gbu-abschnitt--dunkel a { color: #5eead4; }
.gbu-gross { font-family: var(--font-serif); font-style: italic; font-weight: 300; font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height: 1.45; color: #fff !important; max-width: 30ch !important; margin: 0 0 1.25rem !important; }

.gbu-figur { margin: 1.75rem 0 2rem; max-width: 640px; }
.gbu-abgrenzung { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin: 1.75rem 0; }
.gbu-abgrenzung-spalte { border: 1px solid rgba(255,255,255,.18); border-radius: 3px; background: rgba(255,255,255,.06); padding: 1.4rem 1.5rem; }
.gbu-abgrenzung-spalte--uns { border-color: #5eead4; }
.gbu-abgrenzung-spalte h3 { margin: 0 0 .8rem; font-size: 1rem; }
.gbu-abgrenzung-spalte ul { list-style: none; padding: 0; margin: 0 0 .9rem; }
.gbu-abgrenzung-spalte li { position: relative; padding-left: 1.1rem; margin-bottom: .45rem; color: #aebcb3; font-size: .93rem; line-height: 1.55; }
.gbu-abgrenzung-spalte li::before { content: ""; position: absolute; left: 0; top: .58em; width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.35); }
.gbu-abgrenzung-spalte--uns li::before { background: #5eead4; }
.gbu-abgrenzung-fuss { font-size: .85rem; margin: 0 !important; padding-top: .8rem; border-top: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.72) !important; }

/* --- Ablauf --- */
.gbu-schritte { list-style: none; padding: 0; margin: 1.75rem 0 0; border-top: 1px solid #ddd9ce; }
.gbu-schritt { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 1.1rem; padding: 1.35rem 0; border-bottom: 1px solid #ddd9ce; }
.gbu-schritt-num { font-family: "Bricolage Grotesque", Arial, sans-serif; font-size: 1.5rem; font-weight: 700; color: #a3522c; line-height: 1; font-variant-numeric: tabular-nums; }
.gbu-schritt h3 { margin: 0 0 .4rem; font-size: 1.05rem; }
.gbu-schritt-zeit { font-size: .78rem; font-weight: 400; color: #666864; margin-left: .5rem; white-space: nowrap; }
.gbu-schritt p { margin: 0; font-size: .95rem; }

/* --- Preise --- */
.gbu-preise { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 1rem; margin: 1.75rem 0 1.25rem; }
.gbu-preis { border: 1px solid #ddd9ce; border-radius: 3px; background: #fff; padding: 1.4rem 1.5rem; display: flex; flex-direction: column; transition: border-color .15s ease; }
.gbu-preis:hover { border-color: #0b6e64; }
.gbu-preis--mitte { border-color: #0b6e64; }
.gbu-preis--klein { background: #eaf1ec; }
.gbu-preis-groesse { font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #666864; margin-bottom: .6rem; }
.gbu-preis-wert { font-family: "Bricolage Grotesque", Arial, sans-serif; font-size: 1.85rem; font-weight: 700; letter-spacing: -.03em; color: #a3522c; line-height: 1.1; font-variant-numeric: tabular-nums; }
.gbu-preis-name { font-size: .92rem; font-weight: 600; color: #101614; margin: .2rem 0 .6rem; }
.gbu-preis p { font-size: .88rem; margin: 0; max-width: none; }
.gbu-preis-hinweis { font-size: .88rem; color: #4b4e4b; border-left: 3px solid #ddd9ce; padding-left: 1rem; max-width: 66ch !important; }

/* --- Ansprechpartnerin --- */
.gbu-kontakt { background: #fff; padding: 3.25rem 0; border-top: 1px solid #ddd9ce; border-bottom: 1px solid #ddd9ce; }
.gbu-kontakt-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.gbu-kontakt-foto { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: center top; border-radius: 3px; display: block; }
.gbu-kontakt-label { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #0a5f56; margin-bottom: .5rem; }
.gbu-kontakt h2 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); font-weight: 700; letter-spacing: -.03em; color: #101614; margin: 0 0 .25rem; }
.gbu-kontakt-rolle { display: block; font-size: .9rem; color: #666864; margin-bottom: 1rem; }
.gbu-kontakt p { color: #393d3a; line-height: 1.6; margin: 0 0 1rem; max-width: 60ch; }
.gbu-kontakt-aktionen { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.35rem; }
.gbu-btn { display: inline-block; background: #0a5f56; color: #fff; border: 2px solid #0a5f56; padding: .72rem 1.6rem; border-radius: 50px; font: inherit; font-size: .93rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: background .15s ease, color .15s ease; }
.gbu-btn:hover { background: #0b6e64; border-color: #0b6e64; }
.gbu-btn--umriss { background: transparent; color: #0a5f56; }
.gbu-btn--umriss:hover { background: #0a5f56; color: #fff; }

/* --- FAQ --- */
.gbu-faq { margin-top: 1.5rem; border-top: 1px solid #ddd9ce; max-width: 820px; }
.gbu-faq-item { border-bottom: 1px solid #ddd9ce; }
.gbu-faq-item summary { cursor: pointer; padding: 1.05rem 2rem 1.05rem 0; font-size: 1rem; font-weight: 600; color: #101614; list-style: none; position: relative; }
.gbu-faq-item summary::-webkit-details-marker { display: none; }
.gbu-faq-item summary::after { content: ""; position: absolute; right: .35rem; top: 1.45rem; width: 9px; height: 9px; border-right: 2px solid #0a5f56; border-bottom: 2px solid #0a5f56; transform: rotate(45deg); transition: transform .18s ease; }
.gbu-faq-item[open] summary::after { transform: rotate(-135deg); }
.gbu-faq-item summary:focus-visible { outline: 2px solid #0a5f56; outline-offset: 2px; }
.gbu-faq-item p { margin: 0 0 1.15rem; font-size: .95rem; color: #393d3a; line-height: 1.6; max-width: 66ch; }

.gbu-hinweis { font-size: .82rem; color: #666864; line-height: 1.6; margin-top: 1.25rem; max-width: 80ch; }

/* --- Schmale Bildschirme --- */
@media (max-width: 900px) {
    .gbu-hero-unten { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .gbu-kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gbu-kennzahl:nth-child(odd) { padding-left: 0; }
    .gbu-kennzahl:nth-child(even) { padding-left: 1.2rem; }
    .gbu-kontakt-grid { grid-template-columns: 160px minmax(0, 1fr); gap: 1.75rem; }
}
@media (max-width: 640px) {
    .gbu-hero { padding: 2.5rem 0 0; }
    .gbu-h1 { max-width: none; }
    .gbu-abschnitt { padding: 2.5rem 0; }
    .gbu-normen { grid-template-columns: minmax(0, 1fr); }
    .gbu-norm { border-right: none; border-bottom: 1px solid #ddd9ce; padding: 1.1rem 0; }
    .gbu-norm + .gbu-norm { padding-left: 0; }
    .gbu-norm:last-child { border-bottom: none; }
    .gbu-kontakt-grid { grid-template-columns: minmax(0, 1fr); }
    .gbu-kontakt-foto { max-width: 180px; }
    .gbu-schritt { grid-template-columns: 2rem minmax(0, 1fr); gap: .85rem; }
    .gbu-schritt-zeit { display: block; margin-left: 0; margin-top: .15rem; }
    .gbu-fig-legende { font-size: .66rem; gap: .3rem .7rem; }
}