:root{
    --bg0:#070A12;
    --bg1:#0B1020;
    --card:#0E152A;
    --card2:#0B1224;
    --stroke:rgba(255,255,255,.10);
    --stroke2:rgba(255,255,255,.14);

    --text:#E7ECFF;
    --muted:rgba(231,236,255,.72);
    --faint:rgba(231,236,255,.56);

    --brand1:#7C5CFF;
    --brand2:#22D3EE;
    --brand3:#34D399;

    --shadow: 0 14px 40px rgba(0,0,0,.45);
    --shadow2: 0 10px 26px rgba(0,0,0,.38);

    --radius: 18px;
    --radius2: 14px;

    --maxw: 1120px;
    --pad: clamp(18px, 3.2vw, 32px);
    --gap: clamp(14px, 2.2vw, 22px);

    --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
    margin:0;
    font-family:var(--font);
    color:var(--text);
    background:
            radial-gradient(1400px 900px at 15% 10%, rgba(124,92,255,.18), transparent 70%),
            radial-gradient(1200px 800px at 85% 15%, rgba(34,211,238,.14), transparent 72%),
            radial-gradient(1400px 1000px at 50% 85%, rgba(52,211,153,.10), transparent 75%),
            radial-gradient(2000px 1400px at 50% 50%, rgba(255,255,255,.04), transparent 80%),
            linear-gradient(180deg, #070A12 0%, #0A0F1F 60%, #070A12 100%);
    background-attachment: fixed;
    overflow-x:hidden;
}

/* Subtle 3D/abstract layer (blobs + noise), intentionally quiet */
.bgfx{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-1;
}
.bgfx::before{
    content:"";
    position:absolute;
    inset:-10%;
    background:
            radial-gradient(520px 420px at 12% 30%, rgba(255,255,255,.07), transparent 60%),
            radial-gradient(520px 420px at 86% 38%, rgba(255,255,255,.06), transparent 62%),
            radial-gradient(680px 520px at 52% 92%, rgba(255,255,255,.04), transparent 64%);
    filter: blur(10px);
    opacity:.7;
    transform: translateZ(0);
}
.bgfx::after{
    content:"";
    position:absolute;
    inset:0;
    opacity:.06;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
    background-size: 180px 180px;
    mix-blend-mode: overlay;
}

.wrap{
    max-width: var(--maxw);
    width: 100%;
    margin: 0 auto;
    padding: calc(var(--pad) + 18px) var(--pad) 56px;
}

header{ padding: 26px 0 18px; }

.kicker{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:8px 12px;
    border:1px solid var(--stroke);
    border-radius: 999px;
    background: rgba(255,255,255,.03);
    box-shadow: 0 8px 20px rgba(0,0,0,.22);
    color: var(--muted);
    font-size: 13px;
    letter-spacing: .02em;
    width: fit-content;
}
.kicker .dot{
    width:9px;height:9px;border-radius:50%;
    background: linear-gradient(135deg, var(--brand2), var(--brand1));
    box-shadow: 0 0 0 4px rgba(124,92,255,.10);
}

h1{
    margin:14px 0 10px;
    font-size: clamp(34px, 4.8vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.lead{
    margin: 0;
    max-width: none;          /* volle Breite */
    width: 100%;

    color: var(--muted);
    font-size: clamp(16px, 1.8vw, 18px);
    line-height: 1.65;

    text-align: justify;      /* Blocksatz */
    text-justify: inter-word;
    hyphens: auto;

    text-wrap: pretty;
}

.grid{
    margin-top: 28px;
    display:grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--gap);
    align-items: stretch;
}

.card{
    grid-column: span 6;
    background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    box-shadow: var(--shadow2);
    padding: 18px 18px 16px;
    position: relative;
    overflow:hidden;
    min-height: 210px;
    display:flex;
    flex-direction:column;
}
.card::before{
    content:"";
    position:absolute;
    inset:-2px;
    background:
            radial-gradient(420px 220px at 15% 10%, rgba(124,92,255,.14), transparent 60%),
            radial-gradient(420px 220px at 85% 20%, rgba(34,211,238,.12), transparent 60%);
    filter: blur(20px);
    opacity:.55;
    z-index:0;
    pointer-events:none;
}
.card > *{ position:relative; z-index:1; }

.card h2{
    margin: 2px 0 10px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .02em;
    color: rgba(231,236,255,.92);
}
.card p{
    margin: 0 0 10px;
    color: var(--muted);
    line-height: 1.72;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}
.card p:last-child{ margin-bottom: 0; }

/* Variants */
.card.overview{
    grid-column: span 12;
    min-height: 260px;
}

.card.contact,
.card.register,
.card.status{
    grid-column: span 4; /* alle exakt gleich breit */
}

.divider{
    height:1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
    margin: 12px 0 14px;
}

.contact-block{
    margin-top: 6px;
    padding: 12px 12px;
    border-radius: var(--radius2);
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(10,16,34,.55);
}
.contact-block .label{
    display:block;
    font-size: 12px;
    color: var(--faint);
    letter-spacing: .02em;
    margin-bottom: 8px;
}
.email{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-weight: 700;
    color: rgba(231,236,255,.95);
    text-decoration:none;
    word-break: break-word;
    padding: 10px 10px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
}
.email:hover{
    border-color: rgba(255,255,255,.18);
    background: rgba(255,255,255,.05);
}
.email:focus-visible{
    outline: 3px solid rgba(34,211,238,.35);
    outline-offset: 2px;
}
.email svg{ flex:0 0 auto; opacity:.9; }

.regline{
    margin-top: 12px;
    padding: 12px 12px;
    border-radius: var(--radius2);
    border: 1px dashed rgba(255,255,255,.18);
    background: rgba(255,255,255,.02);
    color: var(--muted);
    line-height: 1.6;
}
.regline .pill{
    display:inline-block;
    margin-top: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.03);
    color: rgba(231,236,255,.88);
    font-weight: 700;
    letter-spacing:.01em;
}

.cta-row{
    margin-top: 4px;
    display:flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
}

.btn{
    appearance:none;
    border: 1px solid rgba(255,255,255,.14);
    background:
            linear-gradient(135deg, rgba(124,92,255,.95), rgba(34,211,238,.75));
    color: rgba(8,10,18,.95);
    font-weight: 800;
    letter-spacing: .01em;
    padding: 12px 16px;
    border-radius: 14px;
    cursor:pointer;
    box-shadow: 0 14px 30px rgba(124,92,255,.18);
    transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
}
.btn:hover{
    transform: translateY(-1px);
    filter: brightness(1.02);
    box-shadow: 0 16px 34px rgba(124,92,255,.22);
}
.btn:active{ transform: translateY(0px) scale(.99); }
.btn:focus-visible{
    outline: 3px solid rgba(124,92,255,.38);
    outline-offset: 3px;
}

/* Register button: full width of card */
.btn.btn-full{
    width: 100%;
    padding: 14px 22px;
    border-radius: 16px;
    font-size: 15px;
}

.hint{
    color: var(--muted);
    line-height: 1.65;
    margin: 0;
    flex: 1 1 300px;
    text-align: left;
}

.metrics{
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr; /* <- statt 2 Spalten */
    gap: 12px;
}
.metric{
    border-radius: var(--radius2);
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(10,16,34,.55);
    padding: 12px 12px 10px;
    min-height: 86px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.metric .value{
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.05;
}
.metric .label{
    margin-top: 6px;
    font-size: 12px;
    color: var(--faint);
    letter-spacing: .02em;
}

/* --- Top-right badges inside cards --- */
.card-status{
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
}


.bigcard-status{
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
}

.badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.03);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: .02em;
    color: rgba(231,236,255,.90);
    width: fit-content;
    white-space: nowrap;
}

.badge.green{
    border-color: rgba(52,211,153,.45);
    background: rgba(52,211,153,.14);
    color: rgba(231,236,255,.96);
    box-shadow: 0 8px 22px rgba(52,211,153,.18);
}

/* Recruitment badge in red (same style as green, but red) */
.badge.red{
    border-color: rgba(255,59,59,.45);
    background: rgba(255,59,59,.12);
    color: rgba(231,236,255,.96);
    box-shadow: 0 8px 22px rgba(255,59,59,.14);
}

/* --- Blinking dots (red + green) --- */
.blinkdot{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    animation: blink 1.05s infinite;
    flex: 0 0 auto;
}
.blinkdot.red{
    background: #ff3b3b;
    box-shadow: 0 0 0 4px rgba(255,59,59,.14);
}
.blinkdot.green{
    background: #2ee59d;
    box-shadow: 0 0 0 4px rgba(46,229,157,.14);
}

@keyframes blink{
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(.6); opacity: .25; }
}

/* National coordinators section */
.section{ margin-top: 22px; }

.bigcard{
    margin-top: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px;
    position:relative;
    overflow:hidden;
    Display:flex;
    flex-direction: column;
}
.bigcard::before{
    content:"";
    position:absolute;
    inset:-2px;
    background:
            radial-gradient(520px 260px at 10% 20%, rgba(34,211,238,.10), transparent 60%),
            radial-gradient(520px 260px at 90% 10%, rgba(124,92,255,.10), transparent 60%),
            radial-gradient(520px 260px at 60% 110%, rgba(52,211,153,.06), transparent 60%);
    filter: blur(22px);
    opacity:.65;
    z-index:0;
    pointer-events:none;
}
.bigcard > *{ position:relative; z-index:1; }

.bigcard-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.bigcard h3{
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .02em;
    color: rgba(231,236,255,.92);
}
.subnote{
    margin: 0;
    color: var(--faint);
    font-size: 13px;
    line-height: 1.5;
    max-width: 70ch;
    text-align: left;
}

.tablewrap{
    border: 1px solid rgba(255,255,255,.10);
    border-radius: var(--radius2);
    overflow:hidden;
    background: rgba(10,16,34,.45);
}

table{
    width:100%;
    border-collapse: collapse;
    table-layout: fixed;
}
thead th{
    text-align:left;
    font-size: 12px;
    letter-spacing: .03em;
    color: rgba(231,236,255,.72);
    background: rgba(255,255,255,.03);
    padding: 12px 12px;
    border-bottom: 1px solid rgba(255,255,255,.10);
}
tbody td{
    padding: 12px 12px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    color: rgba(231,236,255,.86);
    vertical-align: top;
    line-height: 1.55;
    word-break: break-word;
}
tbody tr:last-child td{ border-bottom: none; }

.contactlink{
    color: rgba(231,236,255,.92);
    text-decoration: none;
    border-bottom: 1px solid rgba(34,211,238,.35);
}
.contactlink:hover{ border-bottom-color: rgba(34,211,238,.65); }
.contactlink:focus-visible{
    outline: 3px solid rgba(34,211,238,.28);
    outline-offset: 2px;
    border-radius: 6px;
}

.pager{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding: 10px 2px 0;
}
.pager .info{
    color: var(--faint);
    font-size: 13px;
}
.pager .controls{
    display:flex;
    align-items:center;
    gap: 10px;
    flex-wrap: wrap;
}
.pager button{
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(231,236,255,.92);
    padding: 10px 12px;
    border-radius: 12px;
    cursor:pointer;
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
    font-weight: 700;
}
.pager button:hover{
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.18);
    transform: translateY(-1px);
}
.pager button:disabled{
    opacity: .45;
    cursor:not-allowed;
    transform:none;
}
.pager button:focus-visible{
    outline: 3px solid rgba(124,92,255,.32);
    outline-offset: 3px;
}
.pagebadge{
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.03);
    color: rgba(231,236,255,.86);
    font-weight: 800;
    letter-spacing: .01em;
}

/* Responsiveness */
@media (max-width: 980px){
    .card.overview{ grid-column: span 12; }
    .card.contact{ grid-column: span 12; }
    .card.register{ grid-column: span 12; }
    .card.status{ grid-column: span 12; }
}
@media (max-width: 560px){
    .metrics{ grid-template-columns: 1fr; }
    thead{ display:none; }
    table, tbody, tr, td{ display:block; width:100%; }
    tbody td{ border-bottom: 1px solid rgba(255,255,255,.08); }
    tbody tr{
        padding: 10px 12px;
        border-bottom: 1px solid rgba(255,255,255,.10);
    }
    tbody tr:last-child{ border-bottom:none; }
    tbody td{
        padding: 8px 0;
        border-bottom:none;
    }
    tbody td::before{
        content: attr(data-label);
        display:block;
        font-size: 12px;
        color: rgba(231,236,255,.68);
        letter-spacing: .03em;
        margin-bottom: 2px;
    }
    .tablewrap{ padding: 2px 12px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
    .btn, .pager button{ transition:none; }
    .btn:hover, .pager button:hover{ transform:none; }
    .blinkdot{ animation: none; }
}

/* Quiet background (duplicate layer kept as in your original) */
.bgfx{
    position:fixed;
    inset:-20%;
    pointer-events:none;
    z-index:-1;
}
.bgfx::before{
    content:"";
    position:absolute;
    inset:0;
    background:
            radial-gradient(900px 600px at 20% 30%, rgba(255,255,255,.06), transparent 65%),
            radial-gradient(900px 600px at 80% 40%, rgba(255,255,255,.05), transparent 68%),
            radial-gradient(1100px 800px at 50% 90%, rgba(255,255,255,.04), transparent 72%);
    filter: blur(18px);
    opacity:.6;
}
.bgfx::after{
    content:"";
    position:absolute;
    inset:0;
    opacity:.045;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:180px 180px;
    mix-blend-mode:overlay;
}
.navigator-card {
    position: relative;
}

.pi-badge {
    position: absolute;
    top: 20px;
    right: 20px;

    border: 1px solid rgba(245, 196, 0, 0.45);
    background: rgba(245, 196, 0, 0.14);
    color: #ffffff;

    box-shadow: 0 8px 22px rgba(245, 196, 0, 0.18);

    padding: 6px 14px;
    border-radius: 12px;

    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.footer-logo {
    height: 46px;
    width: auto;

    background: #ffffff;          /* weißer Hintergrund */
    padding: 8px 12px;            /* Abstand um das Logo */
    border-radius: 10px;          /* weiche Ecken */

    box-shadow: 0 6px 18px rgba(0,0,0,.25); /* dezenter Schatten */
}

.site-footer {
    margin-top: 64px;
    padding: 28px 16px;

    border-top: 1px solid rgba(255,255,255,.10);
    background: rgba(10,16,34,.55);
}

.footer-inner {
    max-width: var(--maxw);
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* linker & rechter Block */
.footer-item {
    display: flex;
    align-items: center;
    gap: 14px;

    color: rgba(231,236,255,.85);
    font-weight: 600;

    flex: 1;                       /* ← beide Seiten gleich breit */
}

.footer-item:first-child {
    justify-content: flex-end;     /* links nach rechts ausrichten */
    text-align: right;
    padding-right: 28px;
}

.footer-item:last-child {
    justify-content: flex-start;   /* rechts nach links ausrichten */
    text-align: left;
    padding-left: 28px;
}

/* mittiger Trenner */
.footer-divider {
    width: 1px;
    height: 44px;
    background: rgba(255,255,255,.18);
    flex: 0 0 auto;                /* bleibt exakt in der Mitte */
}

/* Mobile: untereinander, ohne Trenner */
@media (max-width: 600px) {
    .footer-inner {
        flex-direction: column;
        gap: 18px;
    }

    .footer-item {
        justify-content: center !important;
        text-align: center;
        padding: 0;
    }

    .footer-divider {
        display: none;
    }
}
.footer-item span {
    white-space: nowrap;
}

.site-header{
    display:grid;
    grid-template-columns: 1fr auto;
    align-items:end;
    gap:16px;
    padding: 26px 0 18px;
}

/* Titel bleibt wie gewohnt */
.site-title{
    margin:14px 0 10px;
    font-size: clamp(34px, 4.8vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.03em;
}

/* Logo-Box: fixe Höhe, feste Obergrenze */
.site-logo{
    height: 86px;
    padding: 10px 14px;
    background:#fff;
    border-radius:16px;
    overflow:hidden;
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

/* WICHTIG: Bild nicht „intrinsic“ skalieren lassen, sondern hart begrenzen */
.site-logo img{
    height: 100%;
    width: auto;
    max-width: 360px;
    max-height: 100%;
    display:block;
    object-fit: contain;

    /* Edge-Schutz: verhindert, dass das Bild über die Grid-Zelle hinaus wächst */
    min-width: 0;
}
@media (max-width: 800px) {
    .bigcard {
        display: flex;
        flex-direction: column;
        padding-top: 18px;
    }

    .bigcard-header {
        order: 0;             /* 1. Überschrift */
        position: relative;
    }

    .pi-badge {
        position: static;
        order: 1;             /* 2. Gelbes Badge unter die Überschrift */
        margin-top: 12px;
        margin-bottom: 20px;
        width: fit-content;
        align-self: flex-start;
    }

    .tablewrap {
        order: 2;             /* 3. Tabelle */
    }

    .pager {
        order: 3;             /* 4. Paginierung (immer ganz unten) */
        margin-top: 16px;
    }
}
.regline .pill {
    transition: background 0.2s ease, border-color 0.2s ease;
}

.regline a:hover .pill {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--brand2);
    color: #fff;
}