/**
 * CVOT Theme CSS
 * Main stylesheet - Tailwind → Kadence CSS conversion
 *
 * @package CVOT_Kadence
 */

/* ============================================================
   @font-face – Inter Variable (self-hosted, DSGVO-konform)
   ------------------------------------------------------------
   Ein einziger Variable Font (rsms.me/inter v4.1, ~344 KB) enthält alle
   Weights von 100–900. Statt 6 separater HTTP-Requests (~360 KB) lädt der
   Browser nur einmal diese Datei und interpoliert jede Weight-Variante
   automatisch. Vorteile:
     - 1 statt 6 HTTP-Requests → schnelleres LCP
     - ~344 KB statt ~360 KB Gesamt-Payload
     - Alle Zwischen-Weights (z.B. 450, 650) verfügbar
     - ~96 % Browser-Support (alle Evergreens seit Chrome 62 / FF 62 / Safari 11)
   ============================================================ */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900; /* Variable Font Range */
    font-display: swap;
    src: url('../fonts/InterVariable.woff2') format('woff2-variations'),
         url('../fonts/InterVariable.woff2') format('woff2');
}

/* ============================================================
   Design Tokens — aus templates/index-cvot-mode.html & virtualcvot.html
   ============================================================ */
:root {
    /* Brand Colors (Tailwind cvot-* mappings) */
    --cvot-primary:       #00355e;  /* Deep Navy */
    --cvot-secondary:     #007ebd;  /* Cyan */
    --cvot-accent:        #f57c00;  /* Orange */
    --cvot-accent-hover:  #ea580c;  /* orange-600 */
    --cvot-light:         #f0f7fa;  /* Light Bg */
    --cvot-surface:       #ffffff;

    /* Text Colors */
    --cvot-dark-text:     #1e293b;  /* slate-800 */
    --cvot-light-text:    #64748b;  /* slate-500 */

    /* Borders */
    --cvot-border:        #e2e8f0;  /* slate-200 */

    /* Shadows (Tailwind mappings) */
    --cvot-shadow-sm:     0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --cvot-shadow-md:     0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --cvot-shadow-lg:     0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --cvot-shadow-xl:     0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --cvot-shadow-2xl:    0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* ============================================================
   Full-Width Breakout for CVOT Blocks
   (Kadence content-style-unboxed limits blocks to content-width)
   ============================================================ */

/* All alignfull blocks break out of the content container */
.entry-content > .alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

/* Hero: full-width everything — inner content already constrained
   via .cvot-hero__content { max-width: 80rem; margin: 0 auto; } */

/* Section-style blocks: full-width BACKGROUND, content constrained
   to Kadence's --global-content-width (1290px default).
   Uses dynamic padding to center content without an extra wrapper div. */
/* Content-contained sections: bg goes edge-to-edge, inner content stays at 1290px.
   Uses dynamic padding so background fills the viewport while content centers.
   IMPORTANT: 100vw inside the Gutenberg editor canvas resolves to the editor's
   narrow width (not the real viewport), which would squash the blocks. The editor
   override below disables this calculation there. */
.cvot-quick-nav-wrapper.alignfull,
.cvot-accreditations-wrapper.alignfull,
.cvot-sponsors.alignfull,
.cvot-qa-form.alignfull,
.cvot-evaluation.alignfull,
.cvot-cert-cards.alignfull,
.cvot-letter.alignfull,
.cvot-organizer.alignfull,
.cvot-faq-section.alignfull,
.cvot-contact-info.alignfull,
.cvot-contact-form-section.alignfull,
.cvot-contact-location.alignfull {
    padding-left: max(1.5rem, calc((100vw - var(--global-content-width, 1290px)) / 2));
    padding-right: max(1.5rem, calc((100vw - var(--global-content-width, 1290px)) / 2));
}

/* Editor override: keep a simple flat padding so blocks render legibly in Gutenberg.
   The frontend rule above still applies on the live site. */
.editor-styles-wrapper .cvot-quick-nav-wrapper.alignfull,
.editor-styles-wrapper .cvot-accreditations-wrapper.alignfull,
.editor-styles-wrapper .cvot-sponsors.alignfull,
.editor-styles-wrapper .cvot-qa-form.alignfull,
.editor-styles-wrapper .cvot-evaluation.alignfull,
.editor-styles-wrapper .cvot-cert-cards.alignfull,
.editor-styles-wrapper .cvot-letter.alignfull,
.editor-styles-wrapper .cvot-organizer.alignfull,
.editor-styles-wrapper .cvot-faq-section.alignfull,
.editor-styles-wrapper .cvot-contact-info.alignfull,
.editor-styles-wrapper .cvot-contact-form-section.alignfull,
.editor-styles-wrapper .cvot-contact-location.alignfull {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

/* Full-bleed sections with their own dark/colored bg — content already constrained
   via inner max-w-7xl wrapper or similar. No extra padding needed. */
/* .cvot-hero, .cvot-now-playing, .cvot-livestream, .cvot-qr-section
   already have their own inner containers with max-width. */

/* ============================================================
   Base / Reset
   ============================================================ */
body {
    font-family: 'Inter', var(--global-body-font-family, sans-serif);
    background-color: #f8fafc;
    color: var(--cvot-dark-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   Typography
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', var(--global-heading-font-family, sans-serif);
    color: var(--cvot-primary);
}

/* ============================================================
   Container
   ============================================================ */
.cvot-container {
    max-width: var(--cvot-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}
@media (min-width: 640px) {
    .cvot-container { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
    .cvot-container { padding-left: 2rem; padding-right: 2rem; }
}

/* ============================================================
   Glass Card
   ============================================================ */
.glass-card {
    background: var(--cvot-glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ============================================================
   Buttons
   ============================================================ */
.cvot-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 700;
    border-radius: var(--cvot-radius-full);
    transition: all 0.3s ease;
    text-decoration: none;
    cursor: pointer;
    border: none;
    line-height: 1;
}

.cvot-btn-primary {
    padding: 0.75rem 2rem;
    background: var(--cvot-accent);
    color: #fff;
    box-shadow: 0 4px 14px rgba(245, 124, 0, 0.2);
}
.cvot-btn-primary:hover {
    background: var(--cvot-accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 124, 0, 0.3);
    color: #fff;
}

.cvot-btn-secondary {
    padding: 0.75rem 2rem;
    background: var(--cvot-secondary);
    color: #fff;
}
.cvot-btn-secondary:hover {
    background: #0091d5;
    transform: translateY(-2px);
    color: #fff;
}

.cvot-btn-outline {
    padding: 0.75rem 2rem;
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
}
.cvot-btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.cvot-btn-sm {
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
}
.cvot-btn-lg {
    padding: 1rem 2.5rem;
    font-size: 1rem;
}

/* ============================================================
   Cards
   ============================================================ */
.cvot-card {
    background: #fff;
    border-radius: var(--cvot-radius-lg);
    box-shadow: var(--cvot-shadow-sm);
    border: 1px solid var(--cvot-border);
    overflow: hidden;
    transition: all 0.3s ease;
}
.cvot-card:hover {
    box-shadow: var(--cvot-shadow-xl);
    transform: translateY(-4px);
}

.cvot-card-dark {
    background: var(--cvot-primary);
    border-color: transparent;
    color: #fff;
}

/* ============================================================
   Section Headers
   ============================================================ */
.cvot-section-header {
    text-align: center;
    margin-bottom: 3rem;
}
.cvot-section-header .cvot-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: var(--cvot-radius-full);
    background: var(--cvot-light);
    color: var(--cvot-primary);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
}
.cvot-section-header h2 {
    font-size: 1.875rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--cvot-primary);
}
.cvot-section-header .cvot-divider {
    width: 4rem;
    height: 0.375rem;
    background: var(--cvot-accent);
    border-radius: var(--cvot-radius-full);
    margin: 1rem auto 0;
}

/* ============================================================
   Countdown Digits
   ============================================================ */
.countdown-digit {
    background: linear-gradient(180deg, #00355e 0%, #002847 100%);
    position: relative;
    border-radius: 1rem;
    padding: 1rem;
    box-shadow: var(--cvot-shadow-lg);
}
.countdown-digit::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    display: none;
}
@media (min-width: 640px) {
    .countdown-digit { padding: 1.5rem; }
}

/* ============================================================
   Live Indicator
   ============================================================ */
.cvot-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(239, 68, 68, 0.9);
    color: #fff;
    padding: 0.375rem 1rem;
    border-radius: var(--cvot-radius-full);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.cvot-live-dot {
    position: relative;
    width: 0.625rem;
    height: 0.625rem;
}
.cvot-live-dot::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #fff;
}
.cvot-live-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #fff;
    animation: cvot-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes cvot-ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* ============================================================
   Navigation overrides
   ============================================================ */
.cvot-nav-link {
    padding: 0.5rem 1rem;
    border-radius: var(--cvot-radius-full);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--cvot-medium-text);
    transition: all 0.2s;
    text-decoration: none;
}
.cvot-nav-link:hover,
.cvot-nav-link.active {
    color: var(--cvot-primary);
    background: var(--cvot-light);
}

/* ============================================================
   Video Container
   ============================================================ */
.cvot-video-container {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: var(--cvot-shadow-2xl);
    background: #030712;
}
.cvot-video-container .cvot-aspect-16-9 {
    position: relative;
    width: 100%;
    /* padding-bottom: 56.25%; — Player liefert eigene Aspect-Ratio (iframe/video/img) */
}

/* ============================================================
   Compact Talk Bar
   ============================================================ */
.cvot-compact-bar {
    position: fixed;
    top: 80px; /* Höhe der Hauptnavigation; JS überschreibt dynamisch wenn #navbar existiert */
    left: 0;
    width: 100%;
    z-index: 40;
    background: rgba(0, 53, 94, 0.9);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s;
}
.cvot-compact-bar.visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}
/* Admin-Bar-Offset: WP-Admin-Bar ist position:fixed und schiebt das Layout um
   32px (>=782px) bzw. 46px (601px–782px) runter. Bei <=600px wird sie
   position:absolute und scrollt mit — dann kein Offset nötig. */
body.admin-bar .cvot-compact-bar {
    top: calc(80px + 32px);
}
/* Ab 1024px und kleiner kommt das Mobile-Menü; die 80px-Desktop-Navbar ist weg.
   Compact-Bar darf direkt am oberen Rand sitzen (bzw. unter der Admin-Bar). */
@media screen and (max-width: 1024px) {
    .cvot-compact-bar {
        top: 0;
    }
    body.admin-bar .cvot-compact-bar {
        top: 32px;
    }
}
@media screen and (max-width: 782px) {
    body.admin-bar .cvot-compact-bar {
        top: 46px;
    }
}
@media screen and (max-width: 600px) {
    body.admin-bar .cvot-compact-bar {
        top: 0;
    }
}

/* ============================================================
   User Menu Bar
   ============================================================ */
.cvot-user-menu-bar {
    background: var(--cvot-light);
    border-bottom: 1px solid var(--cvot-border);
    padding: 0.5rem 0;
}
.cvot-user-menu-list {
    list-style: none;
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    max-width: var(--cvot-max-width);
    margin: 0 auto;
    padding: 0 1rem;
}
.cvot-user-menu-list li a {
    font-size: 0.75rem;
    color: var(--cvot-medium-text);
    text-decoration: none;
}
.cvot-user-menu-list li a:hover {
    color: var(--cvot-primary);
}

/* ============================================================
   Preview Banner
   ============================================================ */
.cvot-preview-banner {
    background: var(--cvot-accent);
    color: #fff;
    text-align: center;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 700;
    z-index: 9999;
    position: relative;
}

/* ============================================================
   Grid Utilities
   ============================================================ */
.cvot-grid {
    display: grid;
    gap: 2rem;
}
.cvot-grid-2 { grid-template-columns: repeat(1, 1fr); }
.cvot-grid-3 { grid-template-columns: repeat(1, 1fr); }
.cvot-grid-4 { grid-template-columns: repeat(1, 1fr); }

@media (min-width: 640px) {
    .cvot-grid-2 { grid-template-columns: repeat(2, 1fr); }
    .cvot-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .cvot-grid-3 { grid-template-columns: repeat(3, 1fr); }
    .cvot-grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   Form Styles
   ============================================================ */
.cvot-input,
.cvot-textarea,
.cvot-select {
    width: 100%;
    padding: 0.75rem 1rem;
    background: #f9fafb;
    border: 1px solid var(--cvot-border);
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-family: inherit;
    transition: all 0.2s;
    color: var(--cvot-dark-text);
}
.cvot-input:focus,
.cvot-textarea:focus,
.cvot-select:focus {
    outline: none;
    border-color: var(--cvot-secondary);
    box-shadow: 0 0 0 3px rgba(0, 126, 189, 0.15);
}
.cvot-textarea {
    resize: none;
}
.cvot-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--cvot-medium-text);
    margin-bottom: 0.5rem;
}

/* ============================================================
   Sponsor Logos
   ============================================================ */
.cvot-sponsors__headline {
    color: var(--cvot-light-text);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    margin: 0 0 2rem;
}

/* Darstellung "Original": Logos farbig, frei nebeneinander */
.cvot-sponsor-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 3rem;
}
.cvot-sponsor-grid img {
    height: 4rem;
    width: auto;
}

/* Darstellung "Quadrat": Kacheln mit Padding, responsive Spaltenanzahl
   (--cvot-spl-cols-d/-t/-m werden inline vom Block gesetzt). */
.cvot-sponsor-logo-tiles {
    display: grid;
    grid-template-columns: repeat(var(--cvot-spl-cols-m, 2), 1fr);
    align-items: start;          /* verhindert vertikales Strecken der Kacheln */
    gap: 1.5rem;
    max-width: var(--cvot-max-width, 1200px);
    margin: 0 auto;
}
@media (min-width: 641px) {
    .cvot-sponsor-logo-tiles {
        grid-template-columns: repeat(var(--cvot-spl-cols-t, 3), 1fr);
    }
}
@media (min-width: 1024px) {
    .cvot-sponsor-logo-tiles {
        grid-template-columns: repeat(var(--cvot-spl-cols-d, 5), 1fr);
    }
}
.cvot-sponsor-logo-tile {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    /* Kein Rahmen/Hintergrund – nur die Logos, quadratisch ausgerichtet. */
}
.cvot-sponsor-logo-tile__media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.cvot-sponsor-logo-tile__media img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
.cvot-sponsor-logo-tile--placeholder {
    color: var(--cvot-light-text);
    font-weight: 700;
    background: #f3f4f6;
}

/* ============================================================
   Accessibility
   ============================================================ */
.cvot-skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: var(--cvot-primary);
    color: #fff;
    padding: 0.75rem 1.5rem;
    z-index: 100000;
    font-weight: 700;
    font-size: 0.875rem;
    text-decoration: none;
    border-radius: 0 0 0.5rem 0;
}
.cvot-skip-link:focus {
    top: 0;
    outline: 2px solid var(--cvot-accent);
    outline-offset: 2px;
}

/* Focus-visible for all interactive elements */
.cvot-btn:focus-visible,
.cvot-input:focus-visible,
.cvot-textarea:focus-visible,
.cvot-select:focus-visible,
.cvot-programme__tab:focus-visible,
.cvot-nav-link:focus-visible,
a:focus-visible {
    outline: 2px solid var(--cvot-secondary);
    outline-offset: 2px;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================
   Responsive Helpers
   ============================================================ */
.cvot-hide-mobile { display: none; }
.cvot-hide-desktop { display: block; }

@media (min-width: 1024px) {
    .cvot-hide-mobile { display: block; }
    .cvot-hide-desktop { display: none; }
}

/* ============================================================
   Header — Site Title / Site Description (neben Logo)
   ============================================================ */
header p.site-title {
    display: none;
}

/* ============================================================
   Page Visibility — Hinweisbox bei Modus-Mismatch
   ============================================================ */
.cvot-visibility-notice {
    max-width: 720px;
    margin: 64px auto;
    padding: 32px;
    background: #f8f8f8;
    border-left: 4px solid #e94560;
    border-radius: 4px;
}

.cvot-visibility-notice h2 {
    margin: 0 0 12px;
    font-size: 1.5rem;
}

.cvot-visibility-notice p {
    margin: 0;
    line-height: 1.6;
}

header p.site-description {
    max-width: 180px;
    border-left: 1px solid rgb(229, 231, 235);
    padding: 12px 0 12px 16px;
}

/* ============================================================
   Register-Now CTA im Desktop-Hauptmenü
   Menü-Item mit CSS-Klasse "action" → orange Pill-Button wie Template
   (Mobile-Nav nutzt separaten DOM-Container → unberührt)
   ============================================================ */
.header-navigation .menu-item.action {
    height: 2.5rem;
}

.header-navigation .menu-item.action > a,
.header-navigation .menu-item.action > a:hover,
.header-navigation .menu-item.action > a:focus,
.header-navigation .menu-item.action > a:active {
    background: var(--cvot-accent) !important;
    color: #fff !important;
    font-weight: 700;
    padding: 0.5rem 1.25rem !important;
    border-radius: 9999px;
    box-shadow: var(--cvot-shadow-md);
    transition: all 0.2s ease;
    margin-left: 1rem;
}

.header-navigation .menu-item.action > a:hover,
.header-navigation .menu-item.action > a:focus {
    background: var(--cvot-accent-hover) !important;
    box-shadow: none;
    transform: translateY(-2px);
}

/* ============================================================
   Footer-Menüs (Classic Widget + Gutenberg Navigation Block)
   Design-Vorlage temp/footer-menu.txt:
     - Widget-/Section-Title:  UPPERCASE, 20/700, --cvot-primary
     - Liste:                  no bullets
     - Link:                   16/400, --cvot-dark-text, padding 1.6px 0
     - Hover:                  Kadence-Highlight, no underline
     - Focus-visible:          2px solid --cvot-secondary, offset 2px
   ============================================================ */

/* Wrapper-Scope: .footer-widget-area greift bei Classic-Widgets im Kadence-
   Footer-Builder. Body-Prefix + !important damit Kadence-Customizer-Inline-
   Styles (höhere Specificity) zuverlässig überschrieben werden.            */

/* Title — Classic Widget (h2.widget-title) UND Block-Heading */
body .footer-widget-area .widget-title,
body .footer-widget-area h2.wp-block-heading,
body .footer-widget-area h3.wp-block-heading {
    margin: 0 0 10px !important;
    color: #007ebd !important;                       /* Cyan */
    font-family: Inter, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 30px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* Liste — Classic Widget */
body .footer-widget-area .widget_nav_menu .menu {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Liste — Gutenberg Navigation Block (vertikal stacken im Footer) */
body .footer-widget-area .wp-block-navigation,
body .footer-widget-area .wp-block-navigation .wp-block-navigation__container {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
}
body .footer-widget-area .wp-block-navigation .wp-block-navigation__container {
    flex-direction: column !important;
    align-items: flex-start !important;
}

/* List-Item */
body .footer-widget-area .widget_nav_menu .menu li,
body .footer-widget-area .wp-block-navigation .wp-block-navigation-item {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.875rem !important;                  /* 14px */
    line-height: 1.25rem !important;                 /* 20px */
    list-style: none !important;
}

/* Link — beide Varianten */
body .footer-widget-area .widget_nav_menu .menu li a,
body .footer-widget-area .wp-block-navigation .wp-block-navigation-item__content {
    display: block !important;
    padding: 4px 0 !important;
    color: #9ca3af !important;                       /* gray-400 */
    font-family: Inter, sans-serif !important;
    font-size: 0.875rem !important;                  /* 14px */
    font-weight: 400 !important;
    line-height: 1.25rem !important;                 /* 20px */
    text-decoration: none !important;
    transition: color 0.1s linear !important;
    text-transform: none !important;
}

/* Hover (laut Live-Vorbild gleiche Farbe wie Default) */
body .footer-widget-area .widget_nav_menu .menu li a:hover,
body .footer-widget-area .wp-block-navigation .wp-block-navigation-item__content:hover {
    color: #9ca3af !important;
    text-decoration: none !important;
    outline: 0 !important;
}

/* Focus / Active */
body .footer-widget-area .widget_nav_menu .menu li a:focus,
body .footer-widget-area .widget_nav_menu .menu li a:active,
body .footer-widget-area .wp-block-navigation .wp-block-navigation-item__content:focus,
body .footer-widget-area .wp-block-navigation .wp-block-navigation-item__content:active {
    color: #9ca3af !important;
    text-decoration: none !important;
}

/* Focus-Visible (Tastatur) */
body .footer-widget-area .widget_nav_menu .menu li a:focus-visible,
body .footer-widget-area .wp-block-navigation .wp-block-navigation-item__content:focus-visible {
    outline: 2px solid #007ebd !important;
    outline-offset: 2px !important;
}

/* Aktiver Link (current-menu-item) */
body .footer-widget-area .widget_nav_menu .menu li.current-menu-item > a {
    color: #007ebd !important;
    font-weight: 600 !important;
}

/* ============================================================
   .iconheadline — Sub-Section-Header mit Icon links
   Setup im Block: Kadence Advanced Heading + CSS-Klasse "iconheadline"
   + im Block-Sidebar Icon links wählen (z.B. log-in, user-plus, mail).
   Vorbild: templates/registration.html L312-322 (cvot-light bg + rounded-xl
   icon-container, h2 text-2xl font-extrabold cvot-secondary).
   ============================================================ */
.wp-block-kadence-advancedheading.iconheadline {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    margin-bottom: 0.75rem !important;
    color: var(--cvot-secondary) !important;
    font-family: Inter, sans-serif !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    text-align: left !important;
}

/* Icon-Container — hellblauer Hintergrund mit rounded corners */
.wp-block-kadence-advancedheading.iconheadline .kb-svg-icon-wrap {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: auto !important;
    height: auto !important;
    background: var(--cvot-light) !important;
    color: var(--cvot-secondary) !important;
    padding: 0.625rem !important;
    border-radius: 0.75rem !important;
    margin: 0 !important;
    font-size: inherit !important;
}

/* Das eigentliche SVG-Icon */
.wp-block-kadence-advancedheading.iconheadline .kb-svg-icon-wrap svg {
    width: 1.5rem !important;
    height: 1.5rem !important;
    stroke: currentColor !important;
    fill: none !important;
}

/* Text-Span */
.wp-block-kadence-advancedheading.iconheadline .kb-adv-text-inner {
    color: inherit !important;
    line-height: inherit !important;
}

/* Wenn Icon rechts statt links steht — Reihenfolge umdrehen */
.wp-block-kadence-advancedheading.iconheadline .kb-adv-heading-icon-side-right {
    order: 2;
}

/* Sicherheitsnetz: Kadence-Default-Icon-Margins entfernen */
.wp-block-kadence-advancedheading.iconheadline .kb-adv-heading-icon-side-left,
.wp-block-kadence-advancedheading.iconheadline .kb-adv-heading-icon-side-right {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

h1.cvot-page-header__title {
    margin-top: 0.125em !important;
}

/* ==========================================================================
   User Registration – Datenschutz-Checkbox zweispaltig
   Checkbox links, Text (.description) rechts daneben statt untereinander.
   Gezielt über [id*="privacy_policy"], da das Plugin an die ID einen
   wechselnden Timestamp anhängt (z. B. privacy_policy_1778425267_field).
   ========================================================================== */
.register .form-row[id*="privacy_policy"] {
    display: flex !important;
    align-items: flex-start;   /* oben bündig; für vertikale Mitte: center */
    gap: 0.5rem;
}

.register .form-row[id*="privacy_policy"] .ur-label.checkbox {
    flex: 0 0 auto;            /* Checkbox nimmt nur ihre eigene Breite ein */
    margin: 0 !important;
}

.register .form-row[id*="privacy_policy"] .description {
    flex: 1;                   /* Text füllt den restlichen Platz */
    margin: 0 !important;
    display: inline !important;   /* überschreibt das inline-style display:inline-block */
}