/* ==========================================================================
   WAPSTER UNTERSEITEN-DESIGN (FAQ, ANLEITUNG & CO.) - VOLLSTÄNDIGE VERSION
   ========================================================================== */

:root {
    --bg: #f4f8ff;
    --surface-strong: #ffffff;
    --text: #12304f;
    --muted: #5b6f86;
    --primary: #1d6ef2;
    --primary-dark: #1554ba;
    --border: rgba(29,110,242,.12);
    --shadow: 0 12px 35px rgba(18,48,79,.10);
    --radius: 24px;
}
/* --- FINALE URL-VORSCHAU VOLLBREITE (KLEIN & IN EINER ZEILE) --- */

/* Der umschließende Kasten bricht komplett aus allen Begrenzungen aus */
div.container .url-preview-wrapper {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important; /* Nutzt die komplette Design-Breite */
    margin-top: 5px !important;
    margin-bottom: 20px !important;
    text-align: left !important;
    clear: both !important;

    /* Verhindert, dass fremde CSS-Regeln die Schrift riesig machen */
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* Verhindert, dass die einzelnen Textteile umbrechen – alles bleibt in einer Zeile! */
div.container .url-preview-wrapper span,
div.container .url-preview-wrapper strong,
div.container .url-preview-wrapper #selected_username {
    display: inline !important; /* Absoluter Zwang für fortlaufenden Text */
    font-size: 14px !important; /* Einheitliche, saubere Textgröße */
    float: none !important;
    position: static !important;
}

/* Der Beschriftungstext ("Ihre Homepage-URL lautet:") */
div.container .url-text-prefix {
    color: #64748b !important;
    font-weight: normal !important;
}

/* Der gesamte Link-Bereich inklusive dem dynamischen Namen */
div.container .url-link-main {
    color: #1e3050 !important;
    font-weight: 700 !important;
}

/* Das Javascript-Feld für den Live-Usernamen */
div.container #selected_username {
    color: #2563eb !important; /* Färbt den Usernamen im Satz blau ein (Wapster-Look!) */
    font-weight: 700 !important;
    word-break: break-all !important; /* Verhindert das Zerschießen bei extrem langen Namen */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Hintergrund-Verlauf passend zur Startseite */
body {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    color: var(--text);
    background:
        radial-gradient(circle at top left, #eaf2ff 0%, transparent 35%),
        radial-gradient(circle at top right, #dbe9ff 0%, transparent 30%),
        linear-gradient(180deg, #f7fbff 0%, #eff5ff 100%) !important;
    min-height: 100vh;
    line-height: 1.6;
}

/* Begrenzt die Inhaltsbreite auf den Unterseiten */
.subpage_container {
    width: min(1180px, calc(100% - 32px));
    margin: 40px auto;
}

/* Der große, hellblaue Kasten für deine Inhalte (Startseiten-Look!) */
.subpage_card {
    background: rgba(29, 110, 242, 0.05) !important;
    border: 1px solid rgba(29, 110, 242, 0.08) !important;
    border-radius: var(--radius-sm, 16px) !important;
    padding: clamp(24px, 5vw, 45px) !important;
    box-shadow: var(--shadow);
}

/* === HIERARCHIE DER TEXTE === */
.subpage_card h1 {
    font-size: clamp(1.6rem, 4vw, 2.4rem) !important;
    color: var(--text) !important;
    letter-spacing: -.04em;
    margin-top: 0;
    margin-bottom: 8px;
    font-weight: 800;
}

.subpage_card h2 {
    font-size: clamp(1.1rem, 2.5vw, 1.4rem) !important;
    color: var(--muted) !important;
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 35px;
    line-height: 1.4;
}

.subpage_card p,
.subpage_card div {
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
    color: var(--text, #12304f);
    margin-bottom: 20px;
}

/* ==========================================================================
   RADIKALER SCHRIFTFARBEN-FIX FÜR DIE FRAGEN
   ========================================================================== */

/* 1. Dieser Teil zwingt JEDEN Link in der Inhalts-Box, sein hässliches Standard-Blau
      abzulegen und stattdessen deine edle, dunkle Textfarbe anzunehmen. */
.subpage_card a,
.subpage_card a:link,
.subpage_card a:visited,
.subpage_card table td a,
.subpage_card table td a *,
.subpage_card table td strong a {
    color: var(--text, #12304f) !important; /* Edles Dunkelblau/Anthrazit statt Standard-Blau */
    text-decoration: none !important; /* Entfernt den standardmäßigen Unterstrich */
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    display: inline-block;
    padding: 6px 0 !important;
    transition: color 0.2s ease, transform 0.2s ease;
}

/* 2. Hover-Effekt: Erst wenn der Nutzer mit der Maus über eine Frage fährt,
      leuchtet sie im schönen Wapster-Blau auf und rückt minimal nach rechts. */
.subpage_card a:hover,
.subpage_card table td a:hover,
.subpage_card table td a:hover * {
    color: var(--primary, #1d6ef2) !important;
    text-decoration: underline !important;
    transform: translateX(4px);
}

/* Saubere Grundabstände für die CMS-Tabelle */
.subpage_card table {
    border-collapse: separate;
    border-spacing: 0 12px;
    width: 100%;
}


/* ==========================================================================
   STYLING FÜR DIE GEÖFFNETE ANTWORT-BOX (OCKER-GELB)
   ========================================================================== */

/* Verpasst der geöffneten Antwort deinen glänzenden Creme-Ocker-Look */
.subpage_card table td[align="left"],
.subpage_card table tr[id*="answer"] td,
.subpage_card .faq_answer_container,
.subpage_card div[id*="faq"] {
    background: linear-gradient(145deg, #ffffff, #fffceb) !important;
    border: 1px solid rgba(255, 170, 0, 0.25) !important;
    border-radius: 14px !important;
    padding: 26px 30px !important;
    margin-top: 15px !important;
    margin-bottom: 45px !important;
    box-shadow: 0 10px 25px rgba(255, 170, 0, 0.04), 0 2px 6px rgba(18, 48, 79, 0.02) !important;

    /* Textfarbe im gelben Kasten: Gut lesbares Dunkelgrau für die Anleitung */
    color: #2c3e50 !important;
    font-weight: 500 !important;
}

/* Wichtige Ausnahme: Links INNERHALB der geöffneten Antwortbox (wie z.B. "HIER")
   sollen natürlich ein echtes, klickbares Blau behalten! */
.subpage_card table td[align="left"] a,
.subpage_card table td[align="left"] a:link,
.subpage_card table td[align="left"] a:visited {
    color: var(--primary, #1d6ef2) !important;
    text-decoration: underline !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
}
.subpage_card table td[align="left"] a:hover {
    color: var(--primary-dark, #1554ba) !important;
}
/* --- WAPSTER DESIGN GRID ANPASSUNG (FORCE) --- */

/* Erzwingt die Flexbox für den Container */
div.design-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    justify-content: center !important;
    margin-top: 25px !important;
    width: 100% !important;
}

/* Erzwingt 4 Spalten auf großen Bildschirmen */
div.design-grid div.design-item {
    flex: 0 0 calc(25% - 15px) !important;
    min-width: 180px !important;
    max-width: 240px !important;
    position: relative !important;
    display: block !important;
}

/* Erzwingt die Bildgröße */
div.design-grid div.design-item img.x-thumb {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    float: none !important;
    margin: 0 !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
    transition: transform 0.2s ease-in-out !important;
}

/* Sanfter Zoom beim Drüberfahren */
div.design-grid div.design-item img.x-thumb:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important;
    opacity: 1 !important;
}

/* Mobile Optimierung: 2 nebeneinander */
@media(max-width: 767px) {
    div.design-grid div.design-item {
        flex: 0 0 calc(50% - 10px) !important;
        min-width: 130px !important;
    }
}
 .pricing-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 25px !important;
        justify-content: center !important;
        width: 100% !important;
        margin-top: 20px !important;
    }

    /* 3 Boxen nebeneinander auf Desktop */
    .pricing-box {
        flex: 0 0 calc(33.333% - 17px) !important;
        min-width: 260px !important;
        max-width: 340px !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03) !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease !important;
        margin-bottom: 30px !important;
    }
/* --- WAPSTER PREIS-TABELLEN (WAPSTER GELB & REAL LISTS) --- */

/* Der umschließende Container */
div.pricing-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 25px !important;
    justify-content: center !important;
    margin-top: 50px !important;
    width: 100% !important;
}

/* ==========================================================================
   WAPSTER PREIS-TABELLEN (DETAILS, HÄKCHEN & BUTTONS)
   ========================================================================== */

/* Die einzelnen Paket-Boxen */
div.pricing-grid div.pricing-box {
    flex: 0 0 calc(33.333% - 17px) !important;
    min-width: 290px !important;
    max-width: 350px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    margin-bottom: 30px !important;
}

div.pricing-grid div.pricing-box:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 25px rgba(255, 204, 0, 0.2) !important; /* Gelber Schatten beim Hover */
}

/* Header-Bereich mit dem echten WAPSTER-Gelb-Farbverlauf */
div.pricing-grid div.pricing-box .pricing-header {
    background: linear-gradient(135deg, #ffcc00 0%, #ffaa00 100%) !important; /* Original Wapster Gelb-Farbverlauf */
    padding: 22px 20px !important;
    text-align: center !important;
    border-bottom: 1px solid #e6b800 !important;
}

div.pricing-grid div.pricing-box .pricing-header h3 {
    margin: 0 !important;
    font-size: 21px !important;
    font-weight: 700 !important;
    color: #1e3050 !important; /* Dunkelblau/Schwarz für perfekten Kontrast auf dem hellen Gelb */
}

/* Preis-Bereich */
div.pricing-grid div.pricing-box .pricing-price {
    padding: 20px !important;
    text-align: center !important;
    background: #fffef9 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}

div.pricing-grid div.pricing-box .pricing-price h4 {
    margin: 0 !important;
    font-size: 25px !important;
    color: #1e3050 !important;
    font-weight: 700 !important;
}

/* Feature-Liste */
div.pricing-grid div.pricing-box .pricing-features {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}

/* Technische Features (Seiten, Speicherplatz, Werbung) */
div.pricing-grid div.pricing-box .pricing-features li:not(.custom-bullet-item) {
    padding: 14px 20px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    font-size: 14px !important;
    color: #475569 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-weight: 500 !important;
}

/* Neue, optimierte Darstellung für die untereinander gelisteten Paket-Details */
div.pricing-grid div.pricing-box .pricing-features li.custom-bullet-item {
    display: block !important;
    text-align: left !important;
    padding: 12px 20px 12px 45px !important; /* Mehr Platz links für das Häkchen-Icon */
    font-size: 14px !important;               /* Leicht vergrößert für bessere Lesbarkeit */
    line-height: 1.6 !important;              /* Erhöhter Zeilenabstand für entspanntes Lesen */
    color: #334155 !important;                /* Hochwertiges, dunkleres Text-Grau */
    border-bottom: 1px solid #f8fafc !important; /* Sehr dezente Trennlinie */
    position: relative !important;
}

/* Ein stilvolles grünes Häkchen (Checkmark) vor jedem Listenpunkt */
div.pricing-grid div.pricing-box .pricing-features li.custom-bullet-item::before {
    content: "✓" !important;
    position: absolute !important;
    left: 20px !important;
    top: 11px !important;
    color: #10b981 !important; /* Modernes, klares Grün für positive Features */
    font-size: 16px !important;
    font-weight: 800 !important;
}

/* Das absolut letzte Listen-Element sauber abrunden */
div.pricing-grid div.pricing-box .pricing-features li.custom-bullet-item:last-child {
    border-bottom: none !important;
    padding-bottom: 25px !important; /* Harmonischer Abstand zum Button */
}

/* Fußbereich mit dem Auswahl-Button */
div.pricing-grid div.pricing-box .pricing-footer {
    padding: 20px !important;
    background: #ffffff !important;
    border-top: 1px solid #f1f5f9 !important;
    margin-top: auto !important;
}

/* Button im passenden dunkelblauen Kontrast oder Wapster-Gelb (hier edles Dunkelblau) */
div.pricing-grid div.pricing-box .pricing-btn {
    background: #1e3050 !important;
    border-radius: 6px !important;
    transition: background 0.2s ease !important;
}

div.pricing-grid div.pricing-box .pricing-btn:hover {
    background: #111c30 !important;
}

div.pricing-grid div.pricing-box .pricing-btn a {
    display: block !important;
    padding: 12px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    text-align: center !important;
}

/* Mobile Optimierung */
@media(max-width: 767px) {
    div.pricing-grid div.pricing-box {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}
/* ==========================================================================
   WAPSTER REGISTRIERUNGSFORMULAR (LI & LABEL OPTIMIERUNG - FINAL FIXED)
   ========================================================================== */

/* Entfernt Standard-Rahmen und Punkte der Formular-Listen */
div.container fieldset {
    border: none !important;
    padding: 0 !important;
    margin: 0 0 25px 0 !important;
    display: block !important;
}

div.container fieldset legend {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1e3050 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding-bottom: 8px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
}

div.container ol {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important; /* Zwingt alle Felder untereinander */
}

/* Standard-Verhalten für JEDES normale Listen-Element: Schön untereinander */
div.container ol li {
    margin-bottom: 20px !important;
    display: block !important; /* WICHTIG: Holt Vorname, Nachname etc. sofort wieder untereinander! */
    background: none !important;
    border: none !important;
    padding: 0 !important;
    clear: both !important;
}

/* Jedes Label bekommt eine eigene Zeile über dem Feld */
div.container ol li label {
    display: block !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    margin-bottom: 6px !important;
    text-align: left !important;
}

/* Alle Eingabefelder werden links perfekt bündig untereinander gesetzt */
div.container ol li input[type="text"],
div.container ol li input[type="password"],
div.container ol li input[type="email"],
div.container ol li select,
div.container ol li textarea {
    display: block !important;
    width: 100% !important;
    max-width: 550px !important;
    padding: 12px 16px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    background-color: #ffffff !important;
    font-size: 14px !important;
    color: #334155 !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    margin: 0 !important;
}

/* Fokus-Effekt beim Reinklicken */
div.container ol li input:focus,
div.container ol li select:focus,
div.container ol li textarea:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
    outline: none !important;
}

/* Der Newsletter-Bereich bekommt etwas Abstand */
div.container .left-margin-40 {
    margin: 25px 0 !important;
    font-size: 14.5px !important;
    color: #334155 !important;
    font-weight: 500 !important;
    clear: both !important;
}

div.container .left-margin-40 input[type="checkbox"] {
    margin-right: 10px !important;
    transform: scale(1.1) !important;
    vertical-align: middle !important;
}

/* Hinweistexte direkt unter den Feldern */
div.container ol li span.sub-text {
    display: block !important;
    font-size: 13px !important;
    color: #64748b !important;
    margin-top: 6px !important;
    margin-bottom: 0 !important;
}

/* Sonderfall Captcha: Bild oben drüber, Eingabe sauber darunter */
div.container ol li label img {
    display: block !important;
    margin-bottom: 6px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 4px !important;
}

/* Radio-Buttons im gesamten Formular korrigieren */
div.container input[type="radio"] {
    margin-right: 10px !important;
    transform: scale(1.2) !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    display: inline-block !important;
}

/* --------------------------------------------------------------------------
   ABSOLUT SICHERER FIX FÜR DIE ZAHLUNGSWEISEN (NUR BILDER!)
   -------------------------------------------------------------------------- */

/* Sucht gezielt nach Listenpunkten, die ein PayPal- oder Überweisungs-Bild enthalten */
div.container ol li:has(img[src*="paypal"]),
div.container ol li:has(img[src*="transfer"]) {
    display: inline-block !important; /* Steht exakt nebeneinander */
    clear: none !important;           /* Hebt das Untereinanderbrechen auf */
    margin-right: 35px !important;    /* Abstand zwischen den beiden Logos */
    margin-bottom: 10px !important;
    vertical-align: middle !important;
}

/* Verhindert das Umbrechen der Radio-Texte in der Zahlungsweise */
div.container ol li:has(img[src*="paypal"]) label,
div.container ol li:has(img[src*="transfer"]) label {
    display: inline !important;
}

/* Behebt das Quetschen der Logos */
div.container ol li img {
    height: 32px !important;
    width: auto !important;
    vertical-align: middle !important;
    display: inline-block !important;
}

/* INFO-Texte ganz unten formatieren */
div.container p {
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    color: #64748b !important;
    margin-top: 15px !important;
    clear: both !important;
}

/* Der finale "Jetzt registrieren" Button */
div.container .btn-primary,
div.container button[type="submit"] {
    background: #1e3050 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 14px 40px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    display: inline-block !important;
    margin-top: 10px !important;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1) !important;
    transition: background-color 0.2s !important;
    float: none !important;
}

div.container .btn-primary:hover,
div.container button[type="submit"]:hover {
    background: #111c30 !important;
}

/* ==========================================================================
   WAPSTER FORMULAR-DETAILS (EFFEKTE, ABSTÄNDE & HINWEISE)
   ========================================================================== */

/* Fokus-Effekt: Wenn der Nutzer in ein Feld klickt */
div.container input[type="text"]:focus,
div.container input[type="password"]:focus,
div.container input[type="email"]:focus,
div.container select:focus,
div.container textarea:focus {
    border-color: #2563eb !important; /* Blaues Highlight */
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
    outline: none !important;
}

/* Textarea für die Beschreibung vergrößern */
div.container textarea {
    height: 120px !important;
    resize: vertical !important;
}

/* Radio-Buttons und Checkboxen inkl. Text einrücken und lesbar machen */
div.container input[type="checkbox"] {
    margin-right: 8px !important;
    transform: scale(1.1) !important; /* Macht die Boxen minimal größer und klickbarer */
    vertical-align: middle !important;
}

/* Beschriftungen der Punkte (z.B. "1. Benutzername", "4. Vorname") */
div.container .col-md-10 {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
}

/* Hinweistexte unter den Eingabefeldern (z.B. "Ihre Homepage-URL lautet...") */
div.container i,
div.container span:not(.feature-label):not(.feature-value) {
    font-size: 13px !important;
    color: #64748b !important;
    display: block !important;
    margin-top: -12px !important;
    margin-bottom: 15px !important;
}

/* PayPal und Zahlungsoptionen-Bereich sauber abtrennen */
div.container img[src*="paypal"] {
    margin-top: 15px !important;
    max-width: 150px !important;
    height: auto !important;
}

/* --- PERFEKTE AUSRICHTUNG DER EINGABEFELDER --- */

/* Erzwingt, dass die Eingabefelder eine eigene Zeile bekommen und links bündig starten */
div.container input[type="text"],
div.container input[type="password"],
div.container input[type="email"],
div.container select,
div.container textarea {
    display: block !important;
    margin-top: 6px !important;    /* Kleiner Abstand zur Beschriftung darüber */
    margin-bottom: 20px !important; /* Genug Abstand zum nächsten Punkt darunter */
    width: 100% !important;
    max-width: 550px !important;
}

/* Richtet das Captcha-Eingabefeld (Punkt 9) sauber neben dem Captcha-Bild aus */
div.container img + input[type="text"],
div.container input[placeholder*="Code"] {
    display: inline-block !important;
    width: auto !important;
    max-width: 250px !important;
    vertical-align: middle !important;
    margin-left: 15px !important;
    margin-top: 0 !important;
}

/* Macht die Beschriftungen (Nummern + Texte) zu einem Block-Element */
div.container form,
div.container .col-md-10 {
    line-height: 1.8 !important;
}

/* Sorgt dafür, dass die Hinweistexte direkt unter dem jeweiligen Feld kleben */
div.container i,
div.container span:not(.feature-label):not(.feature-value) {
    display: block !important;
    margin-top: -14px !important;
    margin-bottom: 20px !important;
    font-size: 13px !important;
    color: #64748b !important;
}

/* ==========================================================================
   STICKY ELEMENTS (BUTTON & PFEIL FÜR UNTERSEITEN)
   ========================================================================== */
#sticky_cta {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(40px);
    z-index: 9998;
    padding: 14px 28px;
    border-radius: 999px;
    white-space: nowrap;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.03em;
    background: linear-gradient(135deg, #FFCC00, #FFAA00);
    color: #12304f !important;
    border: 1px solid #E6B800;
    box-shadow: 0 10px 25px rgba(255, 170, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
    text-decoration: none;
}

#sticky_cta.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    animation: stickyShake 4s ease-in-out infinite;
}

#back_to_top {
    position: fixed;
    right: 14px;
    bottom: 14px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: .25s ease;
}

#back_to_top.show { opacity: 1; visibility: visible; transform: translateY(0); }

@keyframes stickyShake {
    0%, 70% { transform: translateX(-50%) scale(1); }
    75% { transform: translateX(-53%) scale(1.03); }
    80% { transform: translateX(-47%) scale(1.03); }
    85% { transform: translateX(-52%) scale(1.03); }
    90% { transform: translateX(-48%) scale(1.03); }
    100% { transform: translateX(-50%) scale(1); }
}

/* ==========================================================================
   NAVBAR & FOOTER AUSRICHTUNG
   ========================================================================== */
#top_bar { position: sticky; top: 0; z-index: 3000; backdrop-filter: blur(16px); background: rgba(255, 255, 255, 0.72); border-bottom: 1px solid rgba(29, 110, 242, 0.08); }
.top_row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 0; }
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.brand h2 { margin: 0; font-size: 1.1rem; font-weight: 500; color: #555555; line-height: 1.3; }
.site_logo { display: block; width: 220px; max-width: 100%; height: auto; }
.logo_link { display: inline-block; }
.nav_wrap { display: flex; align-items: center; gap: 10px; }
.main_nav { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.main_nav a { display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border-radius: 999px; background: rgba(29, 110, 242, 0.08); color: var(--primary-dark); font-weight: 700; border: 1px solid rgba(29, 110, 242, 0.10); text-decoration: none; font-size: 0.95rem; }
.main_nav a:hover { background: var(--primary); color: #fff; transform: translateY(-1px); }
.nav_toggle { display: none; width: 46px; height: 46px; border-radius: 14px; border: 1px solid rgba(29,110,242,.12); background: #fff; box-shadow: var(--shadow); align-items: center; justify-content: center; cursor: pointer; position: relative; z-index: 3100; }
.nav_toggle span { display: block; width: 20px; height: 2px; background: var(--primary-dark); position: relative; border-radius: 999px; }
.nav_toggle span::before, .nav_toggle span::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--primary-dark); border-radius: 999px; }
.nav_toggle span::before { top: -6px; } .nav_toggle span::after { top: 6px; }

@media (max-width: 991px) {
    .nav_toggle { display: flex; }
    .nav_wrap { position: fixed; top: 0; right: -100%; width: 280px; height: 100vh; background: #fff; box-shadow: -10px 0 30px rgba(0,0,0,0.05); padding: 80px 24px 24px; transition: right 0.3s ease; z-index: 3050; }
    .nav_wrap.open { right: 0; }
    .main_nav { flex-direction: column; align-items: stretch; width: 100%; }
    .main_nav a { width: 100%; padding: 14px; }
}
.holder { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }

footer.page-footer, .page-footer, .bg-gray-base.context-dark { background: rgba(29, 110, 242, 0.04) !important; border-top: 1px solid var(--border) !important; }
.page-footer *, .bottom-links *, .bottom-links a, .bottom-links h4, .bottom-links h4 a, .bottom-links h5 a, .bottom-links span, .bottom-links p { color: var(--muted, #5b6f86) !important; text-decoration: none !important; font-size: 0.95rem !important; font-weight: 500 !important; line-height: 1.8 !important; }
footer.page-footer h3.widget-title, .page-footer h3, .bottom-links h3 { color: var(--text, #12304f) !important; font-size: 1.25rem !important; font-weight: 700 !important; margin-bottom: 20px !important; letter-spacing: -.02em !important; }
.bottom-links > a, .bottom-links p a { color: var(--muted, #5b6f86) !important; font-weight: 600 !important; }
.bottom-links a:hover, .bottom-links h4 a:hover, .bottom-links h5 a:hover, .bottom-links > a:hover { color: var(--primary, #1d6ef2) !important; text-decoration: underline !important; }
.bottom-links ul { list-style: none !important; padding-left: 0 !important; margin: 0 !important; }
.bottom-links li { padding: 0 !important; margin: 0 !important; background: none !important; border: none !important; }