/* ===== Aufwertung (24.09.2026) — auf dem bisherigen Design =====
   Creme und Premium-Gold bleiben, wie sie sind. Diese Datei legt nur
   Feinschliff darüber: Goldkanten und feine Goldlinien beim Überfahren,
   ein kurzer Glanz über den Goldknöpfen, klare Fokus-Ringe und eine
   Navigationsleiste mit Marke und Schriftzug ganz links.

   Sie wird NACH den Stilblöcken der Seiten geladen. Regeln für die
   Startseite tragen „html body .pgl", damit sie auch gegen deren
   Stilblock im <body> gewinnen. */

:root {
    --auf-gold: #B8862B;
    --auf-gold-tief: #8A6318;
    --auf-gold-hell: #D6AC57;
    --auf-gold-kante: rgba(184,134,43,.55);
    --auf-ease: cubic-bezier(.2,.7,.2,1);
}

/* ── Fokus: sichtbar und in Gold ─────────────────────────────── */
:focus-visible { outline: 2px solid var(--auf-gold); outline-offset: 3px; }

/* ── Navigation ──────────────────────────────────────────────── */
.navbar { padding: 0 32px; }
.nav-flex { width: 100%; max-width: none; }
.navbar .logo { gap: 12px; }
.logo .logo-marke { height: 38px !important; width: auto !important; display: block; transition: transform .45s var(--auf-ease); }
.logo .logo-wort {
    font-family: var(--font-display); font-weight: 700; font-size: 1.28rem;
    letter-spacing: -.03em; color: #0F1B2D; white-space: nowrap; line-height: 1;
}
.logo .logo-wort em {
    font-style: normal;
    background: linear-gradient(135deg, #8A6318, #D6AC57 55%, #B8862B);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.logo:hover .logo-marke { transform: translateY(-1px) rotate(-3deg); }

/* Menüpunkte: der kurze Goldstrich erscheint auch beim Überfahren */
.nav-link::after {
    content: ''; position: absolute; bottom: -6px; left: 50%;
    width: 16px; height: 2px; border-radius: 1px;
    background: linear-gradient(90deg, #8A6318, #D6AC57);
    transform: translateX(-50%) scaleX(0);
    transition: transform .35s var(--auf-ease);
}
.nav-link:hover::after, .nav-link.active::after { transform: translateX(-50%) scaleX(1); }

/* ── Knöpfe: Goldknöpfe bekommen einen kurzen Glanz ──────────── */
.btn-primary, .btnp.goldfill { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after, html body .pgl .btnp.goldfill::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: -1;
    background: linear-gradient(105deg, transparent, rgba(255,250,235,.55), transparent);
    transform: skewX(-18deg); pointer-events: none;
}
.btn-primary:hover::after, html body .pgl .btnp.goldfill:hover::after { animation: aufGlanz .8s var(--auf-ease); }
@keyframes aufGlanz { from { left: -60%; } to { left: 120%; } }
.btn-primary:hover { box-shadow: 0 0 0 1px rgba(239,223,180,.9), 0 12px 28px -12px rgba(138,99,24,.6); }
.btn-ghost:hover { border-color: var(--auf-gold); }
.btn-primary:disabled, .btn-primary[aria-disabled="true"] { transform: none !important; }
.btn-primary:disabled::after, .btn-primary[aria-disabled="true"]::after { display: none; }

/* ── Karten: Goldkante und eine Goldlinie, die oben einläuft ─── */
.plan-card, .faq-item, .role-card, .security-item, .contact-card, .testimonial-card,
.f-compact-item, .stat-card, .company-card, .f-vis-item, .demo-form-card, .demo-trust-item,
html body .pgl .bt, html body .pgl .plan, html body .pgl .sfact {
    position: relative;
    transition: border-color .35s ease, box-shadow .4s ease, transform .4s var(--auf-ease), translate .4s var(--auf-ease);
}
.plan-card::after, .faq-item::after, .role-card::after, .security-item::after, .contact-card::after,
.testimonial-card::after, .f-compact-item::after, .stat-card::after, .company-card::after,
html body .pgl .bt::after, html body .pgl .plan::after, html body .pgl .sfact::after {
    content: ''; position: absolute; top: -1px; left: 18px; right: 18px; height: 1px;
    background: linear-gradient(90deg, transparent, #D6AC57 20%, #B8862B 50%, #D6AC57 80%, transparent);
    transform: scaleX(0); transform-origin: center;
    transition: transform .55s var(--auf-ease);
    pointer-events: none; z-index: 2;
}
.plan-card:hover::after, .faq-item:hover::after, .role-card:hover::after, .security-item:hover::after,
.contact-card:hover::after, .testimonial-card:hover::after, .f-compact-item:hover::after,
.stat-card:hover::after, .company-card:hover::after,
html body .pgl .bt:hover::after, html body .pgl .plan:hover::after, html body .pgl .sfact:hover::after { transform: scaleX(1); }

.faq-item:hover, .role-card:hover, .security-item:hover, .contact-card:hover, .testimonial-card:hover,
.f-compact-item:hover, .stat-card:hover, .company-card:hover, .demo-trust-item:hover {
    border-color: var(--auf-gold-kante);
    box-shadow: 0 14px 36px -18px rgba(138,99,24,.35), 0 2px 6px rgba(15,27,45,.05);
}
.role-card:hover, .security-item:hover, .contact-card:hover, .testimonial-card:hover,
.f-compact-item:hover, .stat-card:hover, .demo-trust-item:hover { translate: 0 -2px; }
.plan-card:hover { border-color: var(--auf-gold-kante); }
.f-vis-item:hover { border-color: var(--auf-gold-kante); }

/* Startseite, Kopf: linksbündig wie Knopf und Vertrauenszeile darunter.
   Vorher erbte der Text über .hero (main.css) ein text-align:center, während
   Knopfreihe und Vertrauenszeile links standen — der Block wirkte schief.
   Die Überschrift steht in drei festen Zeilen; das Gold läuft nur noch
   durch satte Töne (vorher verschwand der helle Teil auf dem Creme). */
html body .pgl .hero .hgrid > div:first-child { text-align: left; }
html body .pgl .hero .hsub { margin-left: 0; margin-right: 0; }
@media (max-width: 980px) { html body .pgl .cta { justify-content: flex-start; } }
html body .pgl .hero h1 { font-size: clamp(2.5rem, 3.9vw, 4.2rem); line-height: 1.03; letter-spacing: -.042em; margin-top: 22px; }
html body .pgl .hero h1 .z, html body .pgl .hero h1 .gold { display: block; }
@media (min-width: 981px) { html body .pgl .hero h1 .z, html body .pgl .hero h1 .gold { white-space: nowrap; } }
html body .pgl .hero h1 .gold {
    padding-bottom: .08em;
    background-image: linear-gradient(100deg, #7A5514 0%, #A87A22 22%, #CFA24A 45%, #E0BC6C 55%, #CFA24A 65%, #A87A22 82%, #7A5514 100%);
    background-size: 220% 100%;
    filter: drop-shadow(0 2px 8px rgba(138,99,24,.16));
}
html body .pgl .hero .hsub { margin-top: 24px; }

/* Startseite: Kacheln, Preise, Sicherheits-Fakten */
html body .pgl .bt:hover { border-color: var(--auf-gold-kante); box-shadow: 0 30px 52px -32px rgba(138,99,24,.5), 0 2px 6px rgba(15,27,45,.04); }
html body .pgl .bt .bico { transition: transform .4s var(--auf-ease); }
html body .pgl .bt:hover .bico { transform: scale(1.12) rotate(-4deg); }
html body .pgl .plan:hover { border-color: var(--auf-gold-kante); }
html body .pgl .sfact:hover { border-color: var(--auf-gold); translate: 0 -2px; box-shadow: 0 22px 40px -26px rgba(138,99,24,.5); }
html body .pgl .cinner { transition: transform .3s var(--auf-ease), box-shadow .3s ease, border-color .3s ease; }
html body .pgl .cnode:hover .cinner { border-color: var(--auf-gold-kante); }
/* Textverweise der Startseite: Goldlinie wächst darunter */
html body .pgl .btng {
    background-image: linear-gradient(90deg, #8A6318, #D6AC57);
    background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 calc(100% - 10px);
    transition: color .2s ease, background-size .4s var(--auf-ease);
}
html body .pgl .btng:hover { background-size: 100% 1px; }
/* Häufige Fragen: Zeile wird beim Überfahren golden */
html body .pgl .faq summary { transition: color .2s ease; }
html body .pgl .faq summary:hover { color: var(--auf-gold-tief); }
html body .pgl .faq details { transition: border-color .3s ease; }
html body .pgl .faq details:hover, html body .pgl .faq details[open] { border-bottom-color: var(--auf-gold-kante); }

/* ── Vertrauenszeile (Features-Hero): war nirgends gestaltet und lief
      als Fließtext zusammen („…jeder Größe DSGVO konform Deutsche Server") */
.trust-inline { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 18px; font-size: .84rem; font-weight: 500; color: var(--text-light-2); }
.trust-inline > span:not(.trust-sep) { display: inline-flex; align-items: center; gap: 7px; }
.trust-inline svg { width: 14px; height: 14px; color: var(--auf-gold); flex-shrink: 0; }
.trust-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--auf-gold); opacity: .55; flex-shrink: 0; }

/* ── Fußzeile ─────────────────────────────────────────────────── */
.footer-brand .logo .logo-marke { height: 52px !important; }
.footer-brand .logo .logo-wort { font-size: 1.6rem; }
.footer-link {
    display: table;
    background-image: linear-gradient(90deg, #8A6318, #D6AC57);
    background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
    transition: color .2s ease, background-size .35s var(--auf-ease);
}
.footer-link:hover { background-size: 100% 1px; }

/* ── Rechtstexte: Links mit feiner Goldunterstreichung ─────────── */
.legal-content a { text-decoration: underline; text-decoration-color: rgba(184,134,43,.45); text-underline-offset: 3px; transition: text-decoration-color .2s ease, color .2s ease; }
.legal-content a:hover { text-decoration-color: var(--auf-gold); color: #8A6318; }

/* Mit Schriftzug ist die Leiste breiter: unter 900px wandern Login und
   Demo ins Menü (dort stehen sie ohnehin), sonst läuft die Leiste über. */
@media (max-width: 900px) {
    .nav-center { display: none; }
    .mobile-menu-btn { display: flex; }
    .nav-right .btn-nav { display: none; }
}
@media (max-width: 1100px) and (min-width: 901px) {
    .nav-center { gap: 20px; }
    .navbar { padding: 0 24px; }
}

@media (max-width: 640px) {
    .navbar { padding: 0 16px; }
    .logo .logo-marke { height: 30px !important; }
    .logo .logo-wort { font-size: 1.08rem; }
}

@media (prefers-reduced-motion: reduce) {
    .btn-primary:hover::after, html body .pgl .btnp.goldfill:hover::after { animation: none; }
    .role-card:hover, .security-item:hover, .contact-card:hover, .testimonial-card:hover,
    .f-compact-item:hover, .stat-card:hover, .demo-trust-item:hover, html body .pgl .sfact:hover { translate: none; }
    html body .pgl .bt:hover .bico { transform: none; }
}

/* ── Handy-Menü (04.10.2026) ──────────────────────────────────────
   Markup includes/navbar.php, Verhalten assets/js/menue.js.
   Das Symbol wird zum X und bleibt in der Leiste; darunter fällt ein
   Creme-Blatt mit Goldlinie auf, die Einträge laufen gestaffelt ein,
   die Seite dahinter wird von einem Navy-Tuch abgedunkelt. */
.pgn-knopf.mobile-menu-btn {
    position: relative; width: 44px; height: 44px; padding: 0; gap: 0;
    border-radius: 12px; border: 1px solid rgba(184,134,43,.22);
    background: rgba(255,255,255,.55);
    transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
    -webkit-tap-highlight-color: transparent;
}
.pgn-knopf.mobile-menu-btn:hover { background: #fff; border-color: rgba(184,134,43,.45); }
.pgn-knopf.ist-offen { background: #fff; border-color: var(--auf-gold-kante); box-shadow: 0 6px 18px -10px rgba(138,99,24,.55); }
.pgn-knopf .pgn-strich {
    position: absolute; left: 50%; top: 50%; width: 20px; height: 1.6px; margin: 0;
    border-radius: 2px; background: #0F1B2D;
    transform-origin: center;
    transition: transform .45s cubic-bezier(.7,0,.2,1), opacity .25s ease, width .45s cubic-bezier(.7,0,.2,1), background .3s ease;
}
.pgn-knopf .pgn-strich:nth-child(1) { transform: translate(-50%, -50%) translateY(-6px); }
.pgn-knopf .pgn-strich:nth-child(2) { transform: translate(-50%, -50%); width: 14px; margin-left: 3px; }
.pgn-knopf .pgn-strich:nth-child(3) { transform: translate(-50%, -50%) translateY(6px); }
.pgn-knopf:hover .pgn-strich:nth-child(2) { width: 20px; margin-left: 0; }
.pgn-knopf.ist-offen .pgn-strich { background: #8A6318; }
.pgn-knopf.ist-offen .pgn-strich:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.pgn-knopf.ist-offen .pgn-strich:nth-child(2) { opacity: 0; transform: translate(-50%, -50%) scaleX(.2); }
.pgn-knopf.ist-offen .pgn-strich:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); }

/* Sperre NUR am body: er reicht sein overflow an den Bildschirm weiter.
   Am <html> gesetzt, würde der body zum eigenen Scrollbehälter und die
   klebende Leiste rutschte an den Seitenanfang — weg samt X. */
html.pgn-gesperrt body { overflow: hidden; }

.pgn { display: none; position: fixed; inset: 0; z-index: 99; --pgn-oben: 60px; }
.pgn.ist-da { display: block; }
@media (min-width: 901px) { .pgn, .pgn.ist-da { display: none; } }

.pgn-tuch {
    position: absolute; left: 0; right: 0; bottom: 0; top: var(--pgn-oben);
    background: rgba(15,27,45,.36);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    opacity: 0; transition: opacity .38s ease;
}
.pgn[data-offen="true"] .pgn-tuch { opacity: 1; }

.pgn-blatt {
    position: absolute; left: 0; right: 0; top: var(--pgn-oben);
    max-height: calc(100vh - var(--pgn-oben) - 24px);
    max-height: calc(100dvh - var(--pgn-oben) - 24px);
    overflow-y: auto; overscroll-behavior: contain;
    padding: 14px 20px 22px;
    background:
        radial-gradient(520px 260px at 100% 0%, rgba(214,172,87,.16), transparent 70%),
        linear-gradient(180deg, #F9F2E0 0%, #F7EEDA 100%);
    border-bottom: 1px solid rgba(184,134,43,.28);
    border-radius: 0 0 24px 24px;
    box-shadow: 0 30px 60px -30px rgba(15,27,45,.55), 0 2px 0 rgba(255,255,255,.6) inset;
    clip-path: inset(0 0 100% 0 round 0 0 24px 24px);
    transform: translateY(-10px);
    transition: clip-path .52s cubic-bezier(.2,.8,.2,1), transform .52s cubic-bezier(.2,.8,.2,1);
}
.pgn[data-offen="true"] .pgn-blatt { clip-path: inset(0 0 0 0 round 0 0 24px 24px); transform: none; }
.pgn[data-offen="false"] .pgn-blatt { transition-duration: .36s, .36s; transition-timing-function: cubic-bezier(.4,0,.6,1); }

.pgn-goldlinie {
    position: absolute; top: 0; left: 20px; right: 20px; height: 1px;
    background: linear-gradient(90deg, transparent, #D6AC57 20%, #B8862B 50%, #D6AC57 80%, transparent);
    transform: scaleX(0); transition: transform .7s .1s var(--auf-ease);
}
.pgn[data-offen="true"] .pgn-goldlinie { transform: scaleX(1); }

.pgn-liste { list-style: none; margin: 0; padding: 0; }
.pgn-eintrag {
    opacity: 0; transform: translateY(12px);
    transition: opacity .4s ease, transform .5s var(--auf-ease);
    transition-delay: 0s;
}
.pgn[data-offen="true"] .pgn-eintrag {
    opacity: 1; transform: none;
    transition-delay: calc(.12s + var(--i, 0) * .055s);
}
.pgn-link {
    display: flex; align-items: center; gap: 14px;
    padding: 15px 6px; text-decoration: none; color: #0F1B2D;
    border-bottom: 1px solid rgba(184,134,43,.14);
    font-family: var(--font-display); font-weight: 600; font-size: 1.42rem; letter-spacing: -.025em; line-height: 1.1;
    -webkit-tap-highlight-color: transparent;
    transition: color .25s ease;
}
.pgn-nr {
    font-family: var(--font-body); font-size: .7rem; font-weight: 600; letter-spacing: .08em;
    color: rgba(138,99,24,.7); min-width: 20px; font-variant-numeric: tabular-nums;
}
.pgn-titel { flex: 1; }
.pgn-pfeil { color: rgba(184,134,43,.55); transform: translateX(-4px); transition: transform .35s var(--auf-ease), color .25s ease; flex-shrink: 0; }
.pgn-link:hover .pgn-pfeil, .pgn-link:focus-visible .pgn-pfeil { transform: none; color: var(--auf-gold); }
.pgn-link:hover, .pgn-link:focus-visible { color: #8A6318; }
.pgn-link:focus-visible { outline-offset: -2px; border-radius: 8px; }
.pgn-link.ist-aktiv .pgn-titel {
    background: linear-gradient(135deg, #8A6318, #C9973A 55%, #8A6318);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.pgn-link.ist-aktiv .pgn-nr { color: #B8862B; }
.pgn-link.ist-aktiv .pgn-pfeil { color: var(--auf-gold); transform: none; }

.pgn-themen { padding: 18px 6px 4px; }
.pgn-themen-titel {
    font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: rgba(138,99,24,.75); margin-bottom: 10px;
}
.pgn-themen-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.pgn-thema {
    display: inline-flex; align-items: center; min-height: 36px; padding: 7px 14px;
    border-radius: 999px; border: 1px solid rgba(184,134,43,.24); background: rgba(255,255,255,.6);
    color: #0F1B2D; text-decoration: none; font-size: .85rem; font-weight: 500;
    transition: border-color .25s ease, background .25s ease, color .25s ease;
}
.pgn-thema:hover { border-color: var(--auf-gold); background: #fff; }
.pgn-thema.ist-aktiv { border-color: var(--auf-gold); color: #8A6318; background: rgba(184,134,43,.08); }

.pgn-aktionen { display: flex; flex-direction: column; gap: 10px; padding-top: 22px; }
.pgn-aktionen .pgn-cta { width: 100%; justify-content: center; min-height: 48px; }
.pgn-aktionen-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pgn-aktionen-zeile.ist-einzeln { grid-template-columns: 1fr; }
.pgn-cta.btn-ghost { background: rgba(255,255,255,.7); border-color: rgba(184,134,43,.3); color: #0F1B2D; }
.pgn-cta-gold { color: #8A6318 !important; }

@media (min-width: 600px) {
    .pgn-blatt { padding: 18px 32px 28px; }
    .pgn-goldlinie { left: 32px; right: 32px; }
    .pgn-link { font-size: 1.6rem; padding: 17px 6px; }
    .pgn-aktionen { flex-direction: row; align-items: stretch; }
    .pgn-aktionen > .pgn-cta { flex: 1.2; }
    .pgn-aktionen-zeile { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .pgn-knopf .pgn-strich, .pgn-pfeil { transition: none; }
    .pgn-blatt { clip-path: none !important; transform: none !important; opacity: 0; transition: opacity .15s ease !important; }
    .pgn[data-offen="true"] .pgn-blatt { opacity: 1; }
    .pgn-eintrag, .pgn[data-offen="true"] .pgn-eintrag { transform: none; transition: opacity .15s ease; transition-delay: 0s !important; }
    .pgn-goldlinie { transform: scaleX(1); transition: none; }
    .pgn-tuch { transition: opacity .15s ease; }
}

/* ── Themenseiten: dreiteilige Kartenreihe (04.10.2026) ──────────
   Stand vorher als style="grid-template-columns:1fr 1fr 1fr" im Markup und
   schlug damit jede Bildschirmregel: am Handy drei Spalten, die dritte
   Karte abgeschnitten. Jetzt: 3 Spalten breit, 2 am Tablet (die dritte
   über beide), 1 am Handy. */
.features-grid.features-grid-drei { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 1024px) and (min-width: 641px) {
    .features-grid.features-grid-drei { grid-template-columns: 1fr 1fr; }
    .features-grid-drei > .feature-card { border-bottom: 1px solid var(--dark-border); }
    .features-grid-drei > .feature-card:nth-child(odd) { border-right: 1px solid var(--dark-border) !important; }
    .features-grid-drei > .feature-card:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: none !important; border-bottom: none; }
}
@media (max-width: 640px) {
    .features-grid.features-grid-drei { grid-template-columns: 1fr; }
}

/* ── Handy: nichts schiebt die Seite seitlich (04.10.2026) ───────
   /features war bei 390 px 400 px breit: .reveal-right startet um 24 px
   nach rechts versetzt und ragt aus dem Bild, bis es eingeblendet ist.
   Am Handy steigen diese Blöcke stattdessen von unten auf.
   /av-vertrag: „Auftragsverarbeitungsvertrag" passt als ein Wort nicht in
   390 px — Überschriften der Rechtstexte dürfen trennen. */
@media (max-width: 900px) {
    .reveal-right { transform: translateY(24px); }
    .reveal-right.visible { transform: none; }
}
.legal-content h1, .legal-content h2, .legal-content h3 { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }