/* ============================================
   spaicemaker.css — Globales Stylesheet
   Version: 2.0 | Author: icelefant
   ============================================ */

/* ===== CSS Variables (Theme) ===== */
:root {
    --bg: #33374c;
    --bg-card: #151b3d;
    --surface: #1c2450;
    --text: #e8eaf6;
    --text-dim: #9aa3c7;
    --accent: #ff7a18;
    --accent-hover: #ff9040;
    --link: #7db4ff;
    --success: #4ade80;
    --error: #f87171;
    --radius: 14px;
    --max-w: 1200px;
}

/* ===== Reset & Base ===== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--bg); /* Ersetzt: #32315d -> Nutzt jetzt dein definiertes Tiefblau 🟦 */
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
}

/* ===== Typography ===== */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
}

h1 { font-size: clamp(1.5rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.3rem, 3vw, 2rem); }
h3 { font-size: 1.1rem; }

a {
    color: var(--link);
    text-decoration: none;
    transition: color .2s ease;
}

a:hover {
    color: var(--accent);
    text-decoration: underline;
}

hr {
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
    margin: 1.5rem 0;
}

/* ===== Navigation (Sticky) ===== */
.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(12px);
    background: color-mix(in srgb, var(--bg) 25%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--text) 25%, transparent);
}

.nav-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .75rem 1.5rem;
}

.nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    list-style: none;
}

.nav-links a {
    display: block;
    color: var(--text-dim);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 500;
    padding: .45rem .85rem;
    border-radius: 8px;
    transition: all .2s ease;
}

.nav-links a:hover {
    color: var(--text);
    background: var(--surface);
}

.nav-links a.active {
    color: var(--text); /* Ändert die Textfarbe auf Weiß/Hell für besseren Kontrast ⬜ */
    background: rgba(255, 122, 24, 0.25); /* 🟧 Erhöhte Deckkraft (von 12% auf 25%) */
    box-shadow: 0 0 15px -3px rgba(255, 122, 24, 0.4); /* ✨ NEU: Ein feiner, oranger Glüheffekt rund um den Button */
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); /* Optionale feine Konturlinie */
}


/* ===== Breadcrumb ===== */
.breadcrumb {
    max-width: var(--max-w);
    margin: 1rem auto;
    padding: 0 1.5rem;
    font-size: .85rem;
    color: var(--text-dim);
}

.breadcrumb a {
    color: var(--link);
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb span:last-child {
    color: var(--text-dim);
}

/* Navigation */
.nav { /* Hintergrundleiste */ }
.nav-inner { display: flex; justify-content: space-between; ... }
.nav-links { list-style: none; display: flex; gap: ... ; margin: 0; padding: 0; }
.nav-links a {
    /* deine Button-Farben: background, padding, border-radius */
}
.nav-links a:hover { /* Hover-Effekt */ }

/* ===== Header ===== */


/* Header zentrieren */
.site-header {
    display: flex;
    justify-content: center;      /* horizontal zentriert */
    align-items: center;
    padding: 2rem 1rem 1.5rem;
    text-align: center;
}

.site-header h1 {
    display: flex;
    align-items: center;          /* Logo und Text vertikal auf einer Linie */
    justify-content: center;
    gap: .75rem;                  /* Abstand zwischen Logo und Text */
    margin: 0;
    font-family: 'Orbitron', sans-serif;
    letter-spacing: .06em;
}

/* Das Logo selbst */
.site-logo {
    height: 42px;                 /* an dein Logo anpassen */
    width: auto;
    border-radius: 8px;
}

/* Auf Handys etwas kleiner */
@media (max-width: 480px) {
    .site-logo { height: 32px; }
    .site-header h1 { font-size: 1.4rem; }
}

/* ===== Layout ===== */
.main {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.container {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ===== Stat-Kacheln (📊 Dashboard unten) ===== */
.stat-tile {
    background: var(--bg-card);
    border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
    border-radius: var(--radius);
    padding: 1.25rem;
    text-align: center;
    text-decoration: none;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.stat-tile:hover {
    transform: translateY(-4px) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 8px 24px rgba(255, 122, 24, 0.3) !important;  /* oranger Glow zum Theme */
}

/* ===== Cards ===== */
.card,
.impressum-card,
.form-container,
.search-card,
.date-widget,  
.list-group {
    background: var(--bg-card);
    border: 1px solid color-mix(in srgb, var(--text) 8%, transparent); rgb(34, 42, 86) !important;
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.card-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .5rem;
}

.card-icon {
    font-size: 1.5rem;
}

.card-desc {
    color: var(--text-dim);
    font-size: .9rem;
}
.card {
    background: rgba(34, 42, 86, 0.85);
    backdrop-filter: blur(10px);
    border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.card:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
    box-shadow: 0 8px 24px rgba(109, 76, 255, 0.25);
}
.section-head {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--accent);
    margin: 0 0 1rem 0;
    padding-bottom: .5rem;
    border-bottom: 2px solid rgba(255,122,24,.2);
}

.section-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 2rem 0 1.25rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--accent);
    display: flex;
    align-items: center;
    gap: .6rem;
}

.section-title:first-of-type {
    margin-top: 0;
}

/* ===== Grid Layouts ===== */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.25rem;
}

.agency-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}

.layout {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 2rem 1.5rem;
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 2.5rem;
    align-items: start;
}

@media (max-width: 780px) {
    .layout {
        grid-template-columns: 1fr;
    }
}

/* ===== Sidebar ===== */
.sidebar {
    position: sticky;
    top: 72px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ===== Tag Cloud / Link Cloud ===== */
.tag-cloud,
.link-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: .5rem 0 1rem;
}

.tag-cloud a,
.link-cloud a {
    font-size: .85rem;
    font-weight: 500;
    color: var(--link);
    text-decoration: none;
    background: var(--surface);
    padding: .4rem .75rem;
    border-radius: 999px;
    transition: all .2s;
}

.tag-cloud a:hover,
.link-cloud a:hover {
    color: #fff;
    background: var(--accent);
    text-decoration: none;
}

/* ===== Forms ===== */
.form-group {
    margin-bottom: 1.25rem;
}

.form-label {
    display: block;
    font-size: .85rem;
    font-weight: 500;
    color: var(--text);
    margin-bottom: .5rem;
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: .75rem 1rem;
    font-size: .95rem;
    font-family: inherit;
    color: var(--text);
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
    border-radius: 8px;
    transition: all .2s;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(255,122,24,.15);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--text-dim);
}

.form-textarea {
    min-height: 140px;
    resize: vertical;
}

.form-hint {
    font-size: .75rem;
    color: var(--text-dim);
    margin-top: .35rem;
}

.form-actions {
    display: flex;
    gap: .75rem;
    margin-top: 1.5rem;
}

.btn {
    padding: .75rem 1.5rem;
    font-size: .95rem;
    font-weight: 600;
    font-family: inherit;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all .2s;
}

.btn-primary {
    background: var(--accent);
    color: #fff;
}

.btn-primary:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    text-decoration: none;
}

.btn-secondary {
    background: var(--surface);
    color: var(--text);
    border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
}

.btn-secondary:hover {
    background: color-mix(in srgb, var(--surface) 85%, var(--text) 5%);
}

/* ===== Sidebar-Widgets ===== */

/* --- Suchfeld --- */
.search-card h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: .95rem;
    color: var(--text);
    margin-bottom: .75rem;
}
.search-card form {
    display: flex;
    gap: .5rem;
}
.search-card input[type="text"] {
    flex: 1;
    min-width: 0;
    padding: .55rem .8rem;
    font: inherit;
    font-size: .85rem;
    color: var(--text);
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
    border-radius: 8px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.search-card input[type="text"]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(255, 122, 24, .15);
}
.search-card input[type="text"]::placeholder { color: var(--text-dim); }
.search-card button {
    padding: .55rem 1rem;
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    color: #fff;
    background: var(--accent);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background .2s ease;
}
.search-card button:hover { background: var(--accent-hover); }

/* --- Kalender --- */
.date-widget .wd { font-size: .8rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .08em; }
.date-widget .day {
    font-family: 'Orbitron', sans-serif;
    font-size: 3rem; font-weight: 700;
    color: var(--accent); line-height: 1.2;
}
.date-widget .month { font-size: .95rem; color: var(--text); margin-bottom: 1rem; }
.date-meta { list-style: none; }
.date-meta li {
    display: flex; justify-content: space-between;
    font-size: .8rem; padding: .35rem 0;
    border-bottom: 1px dashed color-mix(in srgb, var(--text) 12%, transparent);
}
.date-meta .label { color: var(--text-dim); }
.date-meta .value { color: var(--text); font-weight: 600; }

/* --- Feed-Liste --- */
.feed-list { list-style: none; }
.feed-list a {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .7rem;
    margin-bottom: .35rem;
    font-size: .85rem;
    color: var(--link);
    text-decoration: none;
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
    border-radius: 8px;
    transition: all .2s ease;
}
.feed-list a:hover {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
    text-decoration: none;
}
.feed-list svg {
    width: 16px;
    height: 16px;
    fill: currentColor;   /* 🔑 SVG nimmt die Textfarbe an – auch im Orange-Hover */
    flex-shrink: 0;
}

/* --- Hover-Glow für ALLE Sidebar-Kacheln --- */
.search-card, .date-widget {
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.search-card:hover, .date-widget:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
    box-shadow: 0 8px 24px rgba(255, 122, 24, .25);
}

/* ===== Alert Boxes ===== */
.warning-box,
.info-box,
.success-box,
.error-box {
    padding: 1rem 1.25rem;
    border-left: 3px solid;
    border-radius: 8px;
    margin: 1rem 0;
}

.warning-box {
    background: rgba(255,122,24,.12);
    border-left-color: var(--accent);
}

.warning-box strong {
    color: var(--accent);
    display: block;
    margin-bottom: .5rem;
}

.success-box {
    background: rgba(74,222,128,.15);
    border-left-color: var(--success);
    color: var(--success);
}

.error-box {
    background: rgba(248,113,113,.15);
    border-left-color: var(--error);
    color: var(--error);
}


/* ===== Social Icons Size ===== */
.social-icons svg {
    width: 16px !important;  /* Oder kleiner: 12px, 14px */
    height: 16px !important;
    width: 16px;   /* ← 20px auf 16px reduzieren für konsistente Größe */
    height: 16px;
    fill: var(--text);
}

/* RSS Feeds separat dimensionieren */
.feed-list svg,
.rss-icon {
    width: 18px !important;
    height: 18px !important;
}

/* ===== Mond Widget ===== */
.moon-widget img {
    transition: transform .3s ease;
}

.moon-widget img:hover {
    transform: scale(1.03);
}


/* ===== Social Icons ===== */
.social-icons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.socials svg,
.social-icons svg {
    width: 16px !important;
    height: 16px !important;
    fill: var(--text);
}
.social-icons a {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    background: var(--bg-card);
    border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
    border-radius: 10px;
    transition: all .2s;
}

.social-icons a:hover {
    background: var(--accent);
    transform: translateY(-2px);
}

.social-icons svg {
    width: 20px;
    height: 20px;
    fill: var(--text);
}

/* ===== Footer ===== */
footer {
    border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
    margin-top: 3rem;
    footer img { max-width: 2rem; height: auto; }
}

.footer-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 2rem 1.5rem;
    text-align: center;
}

.footer-inner p {
    font-size: .85rem;
    color: var(--text-dim);
}

.footer-inner a {
    color: var(--link);
    text-decoration: none;
}

.feedback-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--accent);
    text-decoration: none;
    font-weight: 100;
    margin-top: 1rem;
    padding: .5rem 1rem;
    background: rgba(255,122,24,.12);
    border-radius: 8px;
    transition: all .2s;
}

.feedback-link:hover {
    background: rgba(255,122,24,.2);
    transform: translateY(-1px);
    text-decoration: none;
}

/* ===== License Badges ===== */
.license-section {
    text-align: center;
    padding: 1.5rem;
    background: var(--surface);
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
}

.license-badges {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
}

.license-badges img {
    border: 0;
    opacity: .8;
    transition: opacity .2s;
}

.license-badges img:hover {
    opacity: 1;
}

/* ===== Contact Info ===== */
.contact-info p {
    margin: .5rem 0;
    font-size: .95rem;
}

.contact-label {
    color: var(--text-dim);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    display: block;
    margin-bottom: .25rem;
}

.contact-value {
    color: var(--text);
    font-weight: 500;
}

/* ===== List Styles ===== */
.list-inline {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    list-style: none;
}

.list-inline a {
    color: var(--link);
    text-decoration: none;
    font-size: .9rem;
    padding: .25rem .5rem;
    border-radius: 6px;
    transition: all .2s;
}

.list-inline a:hover {
    color: #fff;
    background: var(--accent);
}

/* ===== Utility Classes ===== */
.text-center { text-align: center; }
.text-dim { color: var(--text-dim); }
.text-accent { color: var(--accent); }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }

.hidden { display: none !important; }
.visually-hidden {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    white-space: nowrap;
}
/* ===== Hero mit Video ===== */
.hero {
    position: relative;
    text-align: center;
    padding: 4rem 1.5rem 3.5rem;
    overflow: hidden;
}
.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.hero > a, .hero > p, .hero > span, .hero > div {
    position: relative;
    z-index: 1;
}
.hero .logo {
    height: 90px;
    width: auto;
    display: block;
    margin: 0 auto 1rem;
    transition: transform .3s ease;
}
.hero .logo:hover { transform: scale(1.04); }

/* ===== Responsive Breakpoints ===== */
@media (max-width: 780px) {
    .agency-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
}

@media (max-width: 640px) {
    .nav-links {
        width: 100%;
        justify-content: center;
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    .btn {
        width: 100%;
    }
    
    .cards {
        grid-template-columns: 1fr;
    }
}

/* ===== Animations ===== */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn .3s ease forwards;
}

    
 /* ===== Background (fixiert für Video+Hintergrund-Bild) ===== */
body {
    position: relative;
    min-height: 100vh;
    /* Kein background-Bild direkt auf body, wenn du Video im Header hast! */
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: url('/images/body_bg.jpg') center / cover no-repeat;  /* ✓ ABSOLUT */
    filter: brightness(1.4) contrast(.9);
    z-index: -2;          /* ← HINZUFÜGEN: Ganz tief unter Video */
    pointer-events: none;
}

/* ===== Video-Hintergrund im Header (wenn nicht bereits per HTML eingebunden) ===== */
.video-hero {
    position: relative;
    height: 50vh;             /* oder deine gewünschte Höhe */
    overflow: hidden;
    z-index: 0;               /* ← Oberhalb von body::before, unter Content */
}
.video-hero video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;               /* ← Untere Ebene im Container */
}

/* ===== Logo muss ÜBER dem Video schweben ===== */
.header-logo, .logo-overlay, nav {
    position: relative;
    z-index: 10;              /* ← Oberhalb von Video und body::before! */
}
/* ===== orgs.php — Organisations-Übersicht ===== */
/* --- Filter-Leiste --- */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
    margin-bottom: 2rem;
}
.filter-btn {
    padding: .5rem 1.05rem;
    font: inherit;
    font-size: .85rem;
    font-weight: 500;
    color: var(--text-dim);
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
    border-radius: 999px;
    cursor: pointer;
    transition: all .2s ease;
}
.filter-btn:hover {
    color: #fff;
    border-color: var(--accent);
    background: color-mix(in srgb, var(--surface) 85%, var(--accent) 15%);
}
.filter-btn.active {
    color: #fff;
    background: rgba(255, 122, 24, .25);
    border-color: var(--accent);
    box-shadow: 0 0 15px -3px rgba(255, 122, 24, .4);   /* wie Navbar-Active-Glow */
}
/* Hero */
.org-hero {
    text-align: center;
    padding: 2.5rem 1.5rem 2rem;
}
.org-hero h1 {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    letter-spacing: .06em;
}

.org-hero .rocket { font-size: clamp(3rem, 8vw, 4.5rem); display: inline-block; }

/* --- Karten-Grid --- */
.org-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}
@media (max-width: 640px) {
    .org-grid { grid-template-columns: 1fr; }
}
/* ===== Org-Karten mit farbigem Header (wie sternwarten.php) ===== */
.org-card {
    background: var(--bg-card);
    border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
    border-radius: var(--radius);
    overflow: hidden;               /* 🔑 Wichtig: Schneidet Header-Stripe ab */
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.org-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
    box-shadow: 0 8px 24px rgba(255, 122, 24, .25);
}

/* --- Neuer Header-Balken oben auf der Karte --- */
/* ===== Org-Karten: Kopfbalken im Sternwarten-Stil ===== */
.org-card-header {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .75rem 1.25rem;
    margin: -1.5rem -1.5rem 1rem -1.5rem;

    /* 🔑 Der Verlauf: links dunkelviolett → rechts heller lavendel */
    background: linear-gradient(90deg,
        #4a2f7f 0%,              /* dunkles Violett links */
        #6d4aff 45%,             /* dein Accent als Mitte */
        #9c7dff 100%             /* helles Lavendel rechts */
    );

    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

/* Titel im Balken: Weiß, fett */
.org-card-header .org-name {
    margin: 0;
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
}
.org-card-header .org-name a { color: #fff; }
.org-card-header .org-name a:hover { color: #e0d4ff; text-decoration: none; }

/* Typ-Badge rechts im Balken: weiß, halbtransparent */
.org-type-badge {
    margin-left: auto;
    font-size: .66rem;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    padding: .12rem .55rem;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Kartenkörper: dunkles Navy (wie auf dem Screenshot) */
.org-card {
    background: rgba(26, 35, 126, 0.55);   /* #1A237E mit Transparenz */
    backdrop-filter: blur(10px);
}

/* Agenturen: Blauer Gradient */
.org-card[data-type="agentur"] .org-card-header {
    background: linear-gradient(90deg, 
        rgba(34, 42, 86, 0.85) 0%,
        rgba(125, 180, 255, 0.75) 100%
    );
}

/* Privatsfirmen: Oranger Gradient */
.org-card[data-type="private"] .org-card-header {
    background: linear-gradient(90deg, 
        rgba(44, 34, 86, 0.85) 0%,
        rgba(255, 150, 50, 0.75) 100%
    );
}

/* Forschungseinrichtungen: Grüner Gradient */
.org-card[data-type="forschung"] .org-card-header {
    background: linear-gradient(90deg, 
        rgba(34, 86, 50, 0.85) 0%,
        rgba(74, 222, 128, 0.75) 100%
    );
}

/* Vereine: Gelber Gradient */
.org-card[data-type="verein"] .org-card-header {
    background: linear-gradient(90deg, 
        rgba(86, 60, 34, 0.85) 0%,
        rgba(250, 204, 21, 0.75) 100%
    );
}
/* Flagge im Header */
.org-flag {
    font-size: 1.3rem;
}

/* Name im Header */
.org-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.05rem;
    margin: 0;
}
.org-name a { color: var(--text); }
.org-name a:hover { color: var(--accent); text-decoration: none; }

/* --- Typ-Badge (orange) --- */
.org-type-badge {
    display: inline-block;
    align-self: flex-start;
    font-size: .68rem;
    font-weight: 600;
    color: #fff;
    background: var(--accent);
    border-radius: 999px;
    padding: .12rem .5rem;
    margin-left: auto;               /* 🔑 Schiebt es ganz nach rechts */
    text-transform: uppercase;
}

/* --- Beschreibung ohne Typ-Badge (da der Badge jetzt im Header ist) --- */
.org-desc {
    font-size: .84rem;
    color: var(--text-dim);
    line-height: 1.55;
    flex-grow: 1;
    margin-bottom: 1rem;
}
.org-card { overflow: hidden; display: flex; flex-direction: column; }
.org-card-header {
    display: flex; align-items: center; gap: .6rem;
    padding: .75rem 1.25rem;
    margin: -1.5rem -1.5rem .75rem -1.5rem;   /* dehnt sich bis zum Kartenrand */
    background: color-mix(in srgb, var(--surface) 85%, #7db4ff 15%);  /* blauer Balken */
    border-bottom: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
}
.org-type-badge {
    margin-left: auto;
    font-size: .68rem; font-weight: 600;
    color: #fff; background: var(--accent);
    border-radius: 999px; padding: .12rem .5rem;
    text-transform: uppercase;
}

/* --- Einzelne Org-Karte --- */
.org-card {
    background: var(--bg-card);
    border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
    border-radius: var(--radius);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.org-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
    box-shadow: 0 8px 24px rgba(255, 122, 24, .25);
}

/* Flagge + Name in einer Zeile */
.org-flag { font-size: 1.4rem; }
.org-name {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.05rem;
    margin-bottom: .35rem;
}
.org-name a { color: var(--text); }
.org-name a:hover { color: var(--accent); text-decoration: none; }

/* Typ-Badge */
.org-type {
    display: inline-block;
    align-self: flex-start;
    font-size: .72rem;
    font-weight: 600;
    color: var(--accent);
    background: rgba(255, 122, 24, .12);
    border: 1px solid rgba(255, 122, 24, .3);
    border-radius: 999px;
    padding: .15rem .6rem;
    margin-bottom: .75rem;
}

/* Beschreibung + Link */
.org-desc {
    font-size: .84rem;
    color: var(--text-dim);
    line-height: 1.55;
    flex-grow: 1;               /* schiebt den Link ans Kartenende */
    margin-bottom: 1rem;
}
.org-link {
    font-size: .8rem;
    color: var(--link);
}
.org-link:hover { color: var(--accent); }

/* --- Zwischen-Überschrift „Weitere Organisationen" --- */
.subsection-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    color: var(--link);
    margin: 2.5rem 0 1rem;
}

/* --- Quick-Links unten --- */
.quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
}
.quick-link {
    padding: .55rem 1.1rem;
    font-size: .85rem;
    font-weight: 500;
    color: var(--link);
    text-decoration: none;
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
    border-radius: 8px;
    transition: all .2s ease;
}
.quick-link:hover {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
    text-decoration: none;
}