/* ============================================================
   FindeSchule — Main Styles
   German Design: Black · Red · Gold
   Light Mode DEFAULT — Dark Mode via [data-theme="dark"]
   ============================================================ */

   @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Outfit:wght@700;800;900&display=swap');

   /* ── THEME TRANSITION ──────────────────────────────────────── */
   *,
   *::before,
   *::after {
     transition: background-color .3s ease, border-color .3s ease, color .2s ease, box-shadow .3s ease;
   }
   
   /* ── LIGHT MODE (DEFAULT) ──────────────────────────────────── */
   :root {
     /* German flag colors — always the same */
     --schwarz: #0d0d0d;
     --rot: #cc0000;
     --rot-dark: #990000;
     --rot-light: #e63333;
     --gold: #d4a000;
     --gold-dark: #a87800;
     --gold-light: #f5c842;
   
     /* Light surfaces */
     --surface-0: #f5f5f0;
     --surface-1: #ffffff;
     --surface-2: #f0eff0;
     --surface-3: #e5e4e6;
     --surface-4: #d8d7d9;
   
     /* Light text */
     --text-1: #111111;
     --text-2: #555555;
     --text-3: #999999;
   
     /* Light borders */
     --border: #dddcde;
     --border-hover: #bbbbbd;
   
     /* Shadows — lighter for light mode */
     --shadow-sm: 0 2px 8px rgba(0, 0, 0, .08);
     --shadow-md: 0 4px 20px rgba(0, 0, 0, .12);
     --shadow-lg: 0 8px 40px rgba(0, 0, 0, .16);
     --shadow-gold: 0 4px 20px rgba(212, 160, 0, .18);
     --shadow-rot: 0 4px 20px rgba(204, 0, 0, .2);
   
     /* Accent */
     --accent: var(--rot);
     --accent-hover: var(--rot-light);
   
     /* Radius */
     --r-sm: 8px;
     --r-md: 12px;
     --r-lg: 16px;
     --r-xl: 24px;
     --r-full: 9999px;
   
     /* Transition speeds */
     --t-fast: 0.15s ease;
     --t-base: 0.25s ease;
     --t-slow: 0.4s ease;
   
     /* Font */
     --font-body: 'Plus Jakarta Sans', sans-serif;
     --font-head: 'Outfit', sans-serif;
   }
   
   /* ── DARK MODE ─────────────────────────────────────────────── */
   [data-theme="dark"] {
     --rot: #cc0000;
     --rot-dark: #880000;
     --rot-light: #ff2222;
     --gold: #ffcc00;
     --gold-dark: #c9a000;
     --gold-light: #ffe066;
   
     --surface-0: #0d0d0d;
     --surface-1: #161616;
     --surface-2: #1f1f1f;
     --surface-3: #2a2a2a;
     --surface-4: #333333;
   
     --text-1: #f5f5f5;
     --text-2: #aaaaaa;
     --text-3: #666666;
   
     --border: #2a2a2a;
     --border-hover: #444444;
   
     --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
     --shadow-md: 0 4px 20px rgba(0, 0, 0, .6);
     --shadow-lg: 0 8px 40px rgba(0, 0, 0, .7);
     --shadow-gold: 0 4px 20px rgba(255, 204, 0, .2);
     --shadow-rot: 0 4px 20px rgba(204, 0, 0, .3);
   }
   
   /* ── Reset ─────────────────────────────────────────────────── */
   *,
   *::before,
   *::after {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }
   
   html {
     scroll-behavior: smooth;
     overflow-x: hidden;
   }
   
   body {
     font-family: var(--font-body);
     background: var(--surface-0);
     color: var(--text-1);
     line-height: 1.6;
     -webkit-font-smoothing: antialiased;
     min-height: 100vh;
     overflow-x: hidden;
   }
   
   img {
     max-width: 100%;
     display: block;
   }
   
   a {
     text-decoration: none;
     color: inherit;
   }
   
   /* ── Typography ────────────────────────────────────────────── */
   h1,
   h2,
   h3,
   h4 {
     font-family: var(--font-head);
     line-height: 1.2;
   }
   
   h1 {
     font-size: clamp(2rem, 5vw, 3.5rem);
     font-weight: 900;
   }
   
   h2 {
     font-size: clamp(1.5rem, 3vw, 2.2rem);
     font-weight: 800;
   }
   
   h3 {
     font-size: clamp(1.1rem, 2vw, 1.4rem);
     font-weight: 700;
   }
   
   /* ── Layout ────────────────────────────────────────────────── */
   .container {
     width: 100%;
     max-width: 1280px;
     margin: 0 auto;
     padding: 0 24px;
   }
   
   main {
     min-height: calc(100vh - 80px);
   }
   
   /* ── Scroll reveal (JS adds .reveal, .visible) ──────────────── */
   .reveal {
     opacity: 0;
     transform: translateY(32px);
     transition: opacity .6s ease, transform .6s ease;
   }
   
   .reveal.visible {
     opacity: 1;
     transform: translateY(0);
   }

   /* On mobile: skip animation entirely — always show content */
   @media (max-width: 768px) {
     .reveal {
       opacity: 1 !important;
       transform: none !important;
       transition: none !important;
     }
   }

   
   /* ================================================================
      HEADER
      ================================================================ */
   header {
     position: sticky;
     top: 0;
     z-index: 1000;
     background: rgba(13, 13, 13, .92);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     border-bottom: 1px solid var(--border);
   }
   
   .header-inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
     height: 68px;
     gap: 20px;
   }
   
   /* Logo */
   .logo {
     display: flex;
     align-items: center;
     gap: 10px;
     flex-shrink: 0;
   }
   
   .logo-flag {
     display: flex;
     flex-direction: column;
     gap: 2px;
     border-radius: 4px;
     overflow: hidden;
     width: 28px;
   }
   
   .logo-flag span {
     height: 7px;
     display: block;
   }
   
   .f-black {
     background: #1a1a1a;
     border: 1px solid #333;
   }
   
   .f-red {
     background: var(--rot);
   }
   
   .f-gold {
     background: var(--gold);
   }
   
   .logo-text {
     line-height: 1.2rem;
   }
   
   .logo-text strong {
     font-family: var(--font-head);
     font-size: 1.15rem;
     font-weight: 800;
     letter-spacing: -0.02em;
     background: linear-gradient(135deg, #fff 40%, var(--gold));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     display: block;
   }
   
   .logo-text span {
     font-size: .65rem;
     color: var(--text-3);
     letter-spacing: .05em;
     text-transform: uppercase;
   }
   
   /* Desktop nav */
   .desktop-nav {
     display: flex;
     align-items: center;
     gap: 4px;
   }
   
   .desktop-nav>a {
     padding: 8px 14px;
     border-radius: var(--r-sm);
     font-size: .9rem;
     font-weight: 500;
     color: var(--text-2);
     transition: color var(--t-fast), background var(--t-fast);
   }
   
   .desktop-nav>a:hover {
     color: var(--text-1);
     background: var(--surface-2);
   }
   
   .desktop-nav>a.active {
     color: var(--gold);
   }
   
   /* Nav CTA */
   .nav-cta {
     padding: 8px 18px !important;
     background: var(--rot) !important;
     color: white !important;
     border-radius: var(--r-full) !important;
     font-weight: 600 !important;
     font-size: .85rem !important;
   }
   
   .nav-cta:hover {
     background: var(--rot-dark) !important;
   }
   
   /* ── Nav Dropdown ──────────────────────────────────────────── */
   .nav-dropdown {
     position: relative;
   }
   
   .nav-dropdown-btn {
     display: flex;
     align-items: center;
     gap: 6px;
     padding: 8px 14px;
     border-radius: var(--r-sm);
     font-size: .9rem;
     font-weight: 500;
     color: var(--text-2);
     background: none;
     border: none;
     cursor: pointer;
     font-family: var(--font-body);
     transition: color var(--t-fast), background var(--t-fast);
   }
   
   .nav-dropdown-btn:hover,
   .nav-dropdown-btn.active {
     color: var(--text-1);
     background: var(--surface-2);
   }
   
   .nav-dropdown-btn.active {
     color: var(--gold);
   }
   
   .nav-dropdown-arrow {
     font-size: .65rem;
     transition: transform var(--t-fast);
   }
   
   .nav-dropdown.open .nav-dropdown-arrow {
     transform: rotate(180deg);
   }
   
   .nav-dropdown-menu {
     position: absolute;
     top: calc(100% + 8px);
     left: 50%;
     transform: translateX(-50%) translateY(-6px);
     min-width: 240px;
     background: var(--surface-1);
     border: 1px solid var(--border);
     border-radius: var(--r-lg);
     box-shadow: var(--shadow-lg);
     z-index: 500;
     padding: 8px;
     opacity: 0;
     pointer-events: none;
     transition: opacity .2s ease, transform .2s ease;
   }
   
   .nav-dropdown.open .nav-dropdown-menu {
     opacity: 1;
     pointer-events: auto;
     transform: translateX(-50%) translateY(0);
   }
   
   .nav-dropdown-menu a {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 10px 14px;
     border-radius: var(--r-sm);
     color: var(--text-2);
     font-size: .88rem;
     font-weight: 500;
     transition: all var(--t-fast);
   }
   
   .nav-dropdown-menu a:hover,
   .nav-dropdown-menu a.active {
     background: var(--surface-2);
     color: var(--text-1);
   }
   
   .nav-dropdown-menu a.active {
     color: var(--gold);
   }
   
   .nav-dropdown-menu a i:first-child {
     width: 28px;
     height: 28px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: rgba(204, 0, 0, .08);
     color: var(--rot);
     border-radius: var(--r-sm);
     font-size: .85rem;
     flex-shrink: 0;
   }
   
   .nav-dropdown-menu a span {
     display: flex;
     flex-direction: column;
     gap: 2px;
   }
   
   .nav-dropdown-menu a strong {
     font-weight: 600;
     color: var(--text-1);
     font-size: .88rem;
   }
   
   .nav-dropdown-menu a small {
     color: var(--text-3);
     font-size: .72rem;
     font-weight: 400;
   }
   
   .dropdown-divider {
     height: 1px;
     background: var(--border);
     margin: 6px 0;
   }
   
   .dropdown-coming {
     padding: 8px 14px;
     font-size: .78rem;
     color: var(--text-3);
     display: flex;
     align-items: center;
     gap: 8px;
   }

   /* Hub link at bottom of Werkzeuge dropdown */
   .nav-dropdown-menu a.dropdown-hub-link {
     background: rgba(204, 0, 0, .06);
     border: 1px solid rgba(204, 0, 0, .15);
     border-radius: var(--r-sm);
     margin-top: 2px;
   }
   .nav-dropdown-menu a.dropdown-hub-link i:first-child {
     background: rgba(204, 0, 0, .12);
     color: var(--rot);
   }
   .nav-dropdown-menu a.dropdown-hub-link strong {
     color: var(--rot);
   }
   .nav-dropdown-menu a.dropdown-hub-link:hover {
     background: rgba(204, 0, 0, .12);
     border-color: rgba(204, 0, 0, .3);
   }
   [data-theme="dark"] .nav-dropdown-menu a.dropdown-hub-link {
     background: rgba(204, 0, 0, .1);
     border-color: rgba(204, 0, 0, .2);
   }
   [data-theme="dark"] .nav-dropdown-menu a.dropdown-hub-link:hover {
     background: rgba(204, 0, 0, .18);
   }
   
   /* ── Comparator Sticky Bar ─────────────────────────────────── */
   .comp-bar {
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
     background: linear-gradient(90deg, #cc0000 0%, #880000 100%);
     color: #fff;
     padding: 14px 24px;
     z-index: 9000;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 16px;
     transform: translateY(100%);
     transition: transform .35s cubic-bezier(.4, 0, .2, 1);
     box-shadow: 0 -4px 24px rgba(0, 0, 0, .3);
     flex-wrap: wrap;
   }
   
   .comp-bar.visible {
     transform: translateY(0);
   }
   
   .comp-bar-left {
     display: flex;
     align-items: center;
     gap: 12px;
   }
   
   .comp-bar-count {
     background: rgba(255, 255, 255, .2);
     border: 1px solid rgba(255, 255, 255, .3);
     border-radius: var(--r-full);
     padding: 3px 12px;
     font-weight: 700;
     font-size: .88rem;
   }
   
   .comp-bar-schools {
     display: flex;
     gap: 8px;
     flex-wrap: wrap;
   }
   
  .comp-bar-pill {
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: var(--r-full);
    padding: 4px 10px;
    font-size: .78rem;
    max-width: 180px;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: background .15s;
  }
  .comp-bar-pill-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
   
   .comp-bar-pill:hover {
     background: rgba(255, 255, 255, .25);
   }
   
   .comp-bar-pill .rm {
     opacity: .7;
     font-size: .65rem;
   }
   
   .comp-bar-right {
     display: flex;
     align-items: center;
     gap: 10px;
   }
   
   .comp-bar-btn {
     background: #fff;
     color: var(--rot);
     border: none;
     border-radius: var(--r-full);
     padding: 9px 22px;
     font-size: .88rem;
     font-weight: 700;
     cursor: pointer;
     font-family: var(--font-body);
     transition: background .15s, transform .15s;
     white-space: nowrap;
   }
   
   .comp-bar-btn:hover {
     background: var(--gold);
     color: #111;
     transform: scale(1.03);
   }
   
   .comp-bar-clear {
     background: rgba(255, 255, 255, .1);
     color: #fff;
     border: 1px solid rgba(255, 255, 255, .25);
     border-radius: var(--r-full);
     padding: 8px 16px;
     font-size: .82rem;
     font-weight: 500;
     cursor: pointer;
     font-family: var(--font-body);
     transition: background .15s;
   }
   
   .comp-bar-clear:hover {
     background: rgba(255, 255, 255, .2);
   }
   
   /* ── Comparator Toast ──────────────────────────────────────── */
   .comp-toast {
     position: fixed;
     top: 80px;
     right: 24px;
     z-index: 8000;
     background: var(--surface-1);
     border: 1px solid var(--border);
     border-left: 4px solid var(--rot);
     border-radius: var(--r-md);
     padding: 12px 18px;
     font-size: .88rem;
     color: var(--text-1);
     box-shadow: var(--shadow-lg);
     transform: translateX(calc(100% + 40px));
     transition: transform .3s cubic-bezier(.4, 0, .2, 1);
     min-width: 240px;
     display: flex;
     align-items: center;
     gap: 10px;
     pointer-events: none;
   }
   
   .comp-toast.success {
     border-left-color: #22c55e;
   }
   
   .comp-toast.show {
     transform: translateX(0);
   }
   
   .comp-toast i {
     font-size: 1rem;
   }
   
   /* ── Add to comparator button (on school page) ─────────────── */
   .btn-comparator {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 11px 22px;
     background: rgba(255, 255, 255, .1);
     border: 1.5px solid rgba(255, 255, 255, .4);
     border-radius: var(--r-full);
     color: #fff;
     font-size: .9rem;
     font-weight: 600;
     cursor: pointer;
     font-family: var(--font-body);
     transition: all .2s ease;
     backdrop-filter: blur(4px);
     margin-top: 12px;
   }
   
   .btn-comparator:hover {
     background: rgba(255, 255, 255, .2);
     border-color: rgba(255, 255, 255, .7);
   }
   
   .btn-comparator.added {
     background: rgba(34, 197, 94, .15);
     border-color: #22c55e;
     color: #86efac;
   }
   
   /* Compact comparator button for school cards (listings) */
   .btn-comparator-card {
     padding: 6px 12px;
     font-size: .78rem;
     font-weight: 600;
     margin-top: 0;
     background: rgba(204, 0, 0, .08);
     border: 1px solid rgba(204, 0, 0, .25);
     color: var(--rot);
     backdrop-filter: none;
     border-radius: var(--r-sm);
     white-space: nowrap;
     gap: 5px;
   }
   
   .btn-comparator-card:hover {
     background: rgba(204, 0, 0, .15);
     border-color: var(--rot);
     color: var(--rot);
   }
   
   .btn-comparator-card.added {
     background: rgba(34, 197, 94, .1);
     border-color: rgba(34, 197, 94, .4);
     color: #16a34a;
   }
   
   .btn-comparator-card.added:hover {
     background: rgba(34, 197, 94, .18);
     border-color: #22c55e;
   }
   
   /* ── Export buttons ────────────────────────────────────────── */
   .export-bar-card {
     background: var(--surface-1);
     border: 1px solid var(--border);
     border-radius: var(--r-lg);
     padding: 20px 24px;
     margin-bottom: 20px;
   }
   
   .export-bar-card .export-bar {
     margin-top: 0;
     padding-top: 0;
     border-top: none;
   }
   
   .export-bar-card .export-bar-title {
     font-size: .88rem;
     font-weight: 700;
     color: var(--text-2);
     margin-bottom: 14px;
     display: flex;
     align-items: center;
     gap: 8px;
   }
   
   .export-bar-card .export-bar-title i {
     color: var(--rot);
   }
   
   .export-bar {
     display: flex;
     gap: 8px;
     flex-wrap: wrap;
     margin-top: 20px;
     padding-top: 16px;
     border-top: 1px solid var(--border);
   }
   
   .export-btn {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     padding: 7px 14px;
     border-radius: var(--r-sm);
     border: 1px solid var(--border);
     background: var(--surface-2);
     color: var(--text-2);
     font-size: .8rem;
     font-weight: 600;
     cursor: pointer;
     font-family: var(--font-body);
     transition: all var(--t-fast);
     text-decoration: none;
   }
   
   .export-btn:hover {
     border-color: var(--rot);
     color: var(--rot);
     background: rgba(204, 0, 0, .04);
   }
   
   .export-btn.pdf-btn {
     border-color: rgba(239, 68, 68, .4);
     color: #ef4444;
   }
   
   .export-btn.word-btn {
     border-color: rgba(59, 130, 246, .4);
     color: #3b82f6;
   }
   
   .export-btn.print-btn i {
     color: var(--text-3);
   }
   
   /* ── FAQ Accordion ─────────────────────────────────────────── */
   .faq-item {
     border: 1px solid var(--border);
     border-radius: var(--r-md);
     overflow: hidden;
     margin-bottom: 8px;
     transition: border-color var(--t-fast);
   }
   
   .faq-item:hover {
     border-color: var(--border-hover);
   }
   
   .faq-question {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 12px;
     padding: 14px 18px;
     background: var(--surface-2);
     border: none;
     cursor: pointer;
     text-align: left;
     font-size: .88rem;
     font-weight: 600;
     color: var(--text-1);
     font-family: var(--font-body);
     transition: background var(--t-fast);
   }
   
   .faq-question:hover {
     background: var(--surface-3);
   }
   
   .faq-question.open {
     background: var(--surface-3);
     color: var(--rot);
   }
   
   .faq-question .faq-arrow {
     font-size: .7rem;
     color: var(--text-3);
     transition: transform var(--t-fast);
     flex-shrink: 0;
   }
   
   .faq-question.open .faq-arrow {
     transform: rotate(180deg);
     color: var(--rot);
   }
   
   .faq-answer {
     max-height: 0;
     overflow: hidden;
     transition: max-height .35s ease, padding .25s ease;
     background: var(--surface-1);
     font-size: .85rem;
     color: var(--text-2);
     line-height: 1.7;
     padding: 0 18px;
   }
   
   .faq-answer.open {
     max-height: 300px;
     padding: 14px 18px;
   }
   
   /* ── Nearby schools ────────────────────────────────────────── */
   .nearby-card {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 10px 14px;
     border: 1px solid var(--border);
     border-radius: var(--r-md);
     margin-bottom: 8px;
     transition: all var(--t-fast);
     color: inherit;
     cursor: pointer;
   }
   
   .nearby-card:hover {
     border-color: var(--rot);
     background: rgba(204, 0, 0, .03);
     transform: translateX(3px);
   }
   
   .nearby-card-btn {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 32px;
     height: 32px;
     border-radius: var(--r-sm);
     background: var(--rot);
     color: #fff;
     font-size: .75rem;
     flex-shrink: 0;
     transition: background var(--t-fast);
   }
   .nearby-card-btn:hover {
     background: #880000;
     color: #fff;
   }
   
   .nearby-icon {
     width: 36px;
     height: 36px;
     background: rgba(204, 0, 0, .08);
     border-radius: var(--r-sm);
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--rot);
     font-size: .85rem;
     flex-shrink: 0;
   }
   
   .nearby-body {
     flex: 1;
     min-width: 0;
   }
   
   .nearby-name {
     font-size: .85rem;
     font-weight: 600;
     color: var(--text-1);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
   
   .nearby-meta {
     font-size: .75rem;
     color: var(--text-3);
     margin-top: 1px;
   }
   
   .nearby-dist {
     font-size: .72rem;
     font-weight: 700;
     color: var(--rot);
     white-space: nowrap;
   }
   
   /* ── Sidebar card (school page) ────────────────────────────── */
   .school-sidebar-card {
     background: var(--surface-1);
     border: 1px solid var(--border);
     border-radius: var(--r-lg);
     padding: 20px;
     margin-bottom: 16px;
   }
   
   /* ── Quote card ────────────────────────────────────────────── */
   .quote-card {
     background: linear-gradient(135deg, var(--rot-dark), #500000);
     border-radius: var(--r-lg);
     padding: 24px 20px;
     text-align: center;
     color: #fff;
     margin-bottom: 16px;
   }
   
   .quote-card blockquote {
     font-size: .9rem;
     line-height: 1.7;
     font-style: italic;
     margin-bottom: 10px;
     opacity: .9;
   }
   
   .quote-card cite {
     font-size: .78rem;
     opacity: .7;
     font-style: normal;
   }
   
   .quote-marks {
     font-size: 2rem;
     line-height: .5;
     opacity: .4;
     display: block;
   }
   
   /* ── Links utiles card ─────────────────────────────────────── */
   .links-card a {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 8px 0;
     border-bottom: 1px solid var(--border);
     font-size: .84rem;
     color: var(--text-2);
     transition: color var(--t-fast);
   }
   
   .links-card a:last-child {
     border-bottom: none;
   }
   
   .links-card a:hover {
     color: var(--rot);
   }
   
   .links-card a i {
     width: 16px;
     text-align: center;
   }
   
   /* ── Comparator page ───────────────────────────────────────── */
   .comp-table-wrap {
     overflow-x: auto;
   }
   
   .comp-table {
     width: 100%;
     border-collapse: collapse;
     font-size: .88rem;
   }
   
   .comp-table th {
     background: var(--surface-2);
     padding: 14px 16px;
     font-weight: 700;
     font-size: .82rem;
     color: var(--text-2);
     text-align: left;
     border-bottom: 2px solid var(--border);
     white-space: nowrap;
     min-width: 180px;
   }
   
   .comp-table th.header-school {
     text-align: center;
     background: var(--surface-1);
     min-width: 200px;
   }
   
   .comp-table td {
     padding: 12px 16px;
     border-bottom: 1px solid var(--border);
     color: var(--text-1);
     vertical-align: top;
   }
   
   .comp-table tr:last-child td {
     border-bottom: none;
   }
   
   .comp-table tr:hover td {
     background: var(--surface-2);
   }
   
   .comp-table .label-row td:first-child {
     font-weight: 700;
     color: var(--text-3);
     font-size: .78rem;
     text-transform: uppercase;
     letter-spacing: .06em;
     white-space: nowrap;
   }
   
   .comp-school-name {
     font-weight: 800;
     font-size: .95rem;
     color: var(--text-1);
     margin-bottom: 6px;
   }
   
   .comp-school-city {
     font-size: .82rem;
     color: var(--text-3);
   }
   
   .comp-yes {
     color: #22c55e;
   }
   
   .comp-no {
     color: var(--text-3);
   }
   
   .comp-highlight {
     background: rgba(204, 0, 0, .04);
   }
   
   /* ── School page – full layout ─────────────────────────────── */
   .school-body {
     display: grid;
     grid-template-columns: 1fr 300px;
     gap: 24px;
     align-items: start;
   }
   
   .school-hero {
     padding: 40px 0;
   }
   
   .school-hero-inner {
     display: flex;
     align-items: flex-start;
     gap: 20px;
     flex-wrap: wrap;
   }
   
   .school-hero-icon {
     width: 64px;
     height: 64px;
     background: rgba(255, 255, 255, .15);
     border: 2px solid rgba(255, 255, 255, .3);
     border-radius: var(--r-xl);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.6rem;
     color: #fff;
     flex-shrink: 0;
   }
   
   .school-type-badge {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     background: rgba(255, 204, 0, .15);
     border: 1px solid rgba(255, 204, 0, .3);
     padding: 4px 12px;
     border-radius: var(--r-full);
     font-size: .72rem;
     font-weight: 700;
     letter-spacing: .08em;
     text-transform: uppercase;
     margin-bottom: 8px;
   }
   
   .school-hero-body h1 {
     font-size: clamp(1.5rem, 3vw, 2.2rem);
     margin: 0;
   }
   
   .school-breadcrumb {
     font-size: .9rem;
     margin-top: 6px;
     margin-bottom: 20px;
     display: flex;
     align-items: center;
     gap: 6px;
     flex-wrap: wrap;
   }
   
   .school-breadcrumb .sep {
     opacity: .4;
   }
   
   /* Info card */
   .info-card {
     background: var(--surface-1);
     border: 1px solid var(--border);
     border-radius: var(--r-lg);
     padding: 24px;
     margin-bottom: 20px;
   }
   
   .info-card h3 {
     font-size: 1rem;
     font-weight: 700;
     margin-bottom: 20px;
     display: flex;
     align-items: center;
     gap: 10px;
     color: var(--text-1);
   }
   
   .info-card h3 i {
     color: var(--rot);
   }
   
   .info-row {
     display: grid;
     grid-template-columns: 160px 1fr;
     gap: 8px 16px;
     padding: 10px 0;
     border-bottom: 1px solid var(--border);
     align-items: start;
   }
   
   .info-row:last-child {
     border-bottom: none;
   }
   
   .info-row-label {
     font-size: .78rem;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: .05em;
     color: var(--text-3);
     padding-top: 2px;
   }
   
   .info-row-value {
     font-size: .9rem;
     color: var(--text-1);
   }
   
   .info-row-value a {
     color: var(--rot);
     text-decoration: underline;
     text-decoration-color: transparent;
   }
   
   .info-row-value a:hover {
     text-decoration-color: var(--rot);
   }
   
   /* Map */
   .map-wrap {
     border-radius: var(--r-md);
     overflow: hidden;
     margin-top: 4px;
   }
   
   .map-wrap #school-map {
     height: 280px;
     width: 100%;
   }
   
   .map-wrap.info-card-map-wrap {
     height: 500px;
     width: 100%;
   }
   .map-wrap.info-card-map-wrap #info-card-map {
     height: 100%;
     width: 100%;
   }
   .info-card-map-wrap {
     border-radius: var(--r-sm);
     overflow: hidden;
     border: 1px solid var(--border);
   }
   
   .legend-dot {
     width: 10px;
     height: 10px;
     border-radius: 50%;
     flex-shrink: 0;
   }
   
   /* Contact btn */
   .contact-btn {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 12px 16px;
     border: 1px solid var(--border);
     border-radius: var(--r-md);
     color: var(--text-2);
     font-size: .88rem;
     font-weight: 500;
     margin-bottom: 8px;
     transition: all var(--t-fast);
   }
   
   .contact-btn:hover {
     border-color: var(--rot);
     color: var(--rot);
     background: rgba(204, 0, 0, .04);
   }
   
   .contact-btn i {
     width: 32px;
     height: 32px;
     background: rgba(204, 0, 0, .08);
     border-radius: var(--r-sm);
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--rot);
     font-size: .85rem;
     flex-shrink: 0;
   }
   
   /* Presentation block */
   .presentation-block {
     background: var(--surface-2);
     border-radius: var(--r-md);
     padding: 16px 20px;
     font-size: .9rem;
     color: var(--text-2);
     line-height: 1.7;
     margin-bottom: 20px;
     border-left: 3px solid var(--rot);
   }
   
   /* Tags */
   .tag {
     display: inline-flex;
     align-items: center;
     gap: 4px;
     padding: 3px 10px;
     border-radius: var(--r-full);
     font-size: .75rem;
     font-weight: 600;
     white-space: nowrap;
   }
   
   .tag-type {
     background: rgba(204, 0, 0, .1);
     color: var(--rot);
   }
   
   .tag-public {
     background: rgba(255, 204, 0, .12);
     color: var(--gold-dark);
   }
   
   .tag-private {
     background: rgba(139, 92, 246, .1);
     color: #a78bfa;
   }
   
   .tag-ganztag {
     background: rgba(34, 197, 94, .1);
     color: #22c55e;
   }
   
   .tag-web {
     background: rgba(59, 130, 246, .1);
     color: #60a5fa;
   }
   
   /* ── Search page ───────────────────────────────────────────── */
   .search-layout {
     display: grid;
     grid-template-columns: 280px 1fr;
     gap: 28px;
     align-items: start;
   }
   
   .search-sidebar {
     background: var(--surface-1);
     border: 1px solid var(--border);
     border-radius: var(--r-lg);
     padding: 20px;
     position: sticky;
     top: 84px;
   }
   
   .search-sidebar h2 {
     font-size: 1rem;
     font-weight: 700;
     margin-bottom: 16px;
     display: flex;
     align-items: center;
     gap: 8px;
     color: var(--text-1);
   }
   
   .filter-group {
     margin-bottom: 14px;
   }
   
   .filter-group > label {
     display: block;
     font-size: .76rem;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: .06em;
     color: var(--text-3);
     margin-bottom: 5px;
   }
   
   .filter-group input[type="text"],
   .filter-group select {
     width: 100%;
     background: var(--surface-2);
     border: 1px solid var(--border);
     border-radius: var(--r-sm);
     padding: 9px 12px;
     font-size: .85rem;
     font-family: var(--font-body);
     outline: none;
     transition: border-color var(--t-fast);
   }
   
   .filter-group input:focus,
   .filter-group select:focus {
     border-color: var(--gold);
   }
   
   .filter-divider {
     height: 1px;
     background: var(--border);
     margin: 14px 0;
   }
   
   .checkbox-group {
     display: flex;
     flex-direction: column;
     gap: 8px;
   }
   
   .checkbox-item {
     display: flex;
     flex-wrap: nowrap;
     align-items: center;
     gap: 10px;
     cursor: pointer;
     font-size: .88rem;
     color: var(--text-2);
     padding: 8px 10px;
     margin: 0 -10px;
     border-radius: var(--r-sm);
     transition: background var(--t-fast), color var(--t-fast);
     white-space: nowrap;
   }
   .checkbox-item:hover {
     background: var(--surface-2);
     color: var(--text-1);
   }
   
   .checkbox-item input[type="checkbox"] {
     position: absolute;
     width: 1px;
     height: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;
     clip: rect(0,0,0,0);
     border: 0;
   }
   
   .checkbox-box {
     width: 20px;
     height: 20px;
     min-width: 20px;
     min-height: 20px;
     border: 2px solid var(--border);
     border-radius: 5px;
     background: var(--surface-2);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     transition: all var(--t-fast);
   }
   
   .checkbox-item input:checked+.checkbox-box {
     background: var(--rot);
     border-color: var(--rot);
   }
   
   .checkbox-item input:checked+.checkbox-box::after {
     content: '\2713';
     color: #fff;
     font-size: .7rem;
     font-weight: 800;
     line-height: 1;
   }
   
   .btn-search {
     width: 100%;
     background: var(--rot);
     color: #fff;
     border: none;
     border-radius: var(--r-sm);
     padding: 11px;
     font-size: .9rem;
     font-weight: 700;
     cursor: pointer;
     font-family: var(--font-body);
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     transition: background var(--t-fast);
     margin-top: 6px;
   }
   
   .btn-search:hover {
     background: var(--rot-dark);
   }
   
   .btn-reset {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 6px;
     width: 100%;
     margin-top: 6px;
     padding: 9px;
     border-radius: var(--r-sm);
     border: 1px solid var(--border);
     color: var(--text-3);
     font-size: .84rem;
     font-weight: 500;
     font-family: var(--font-body);
     transition: all var(--t-fast);
     background: none;
     cursor: pointer;
   }
   
   .btn-reset:hover {
     color: var(--rot);
     border-color: var(--rot);
   }
   
   .search-results-area {
     min-width: 0;
   }

   /* Grid view: varias tarjetas por fila */
   #results-list.results-grid-view {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
     gap: 16px;
   }
   #results-list.results-grid-view .empty-state {
     grid-column: 1 / -1;
   }
   #results-list.results-grid-view .school-card {
     flex-direction: column;
     align-items: stretch;
     margin-bottom: 0;
   }
   /* List view: una tarjeta por fila, similar a bl-card (2 líneas) */
   #results-list.results-list-view {
     display: flex;
     flex-direction: column;
     gap: 8px;
   }
   /* Escritorio: una sola línea (icon | body | action) */
   #results-list.results-list-view .school-card {
     display: flex;
     flex-direction: row;
     align-items: center;
     gap: 14px;
     padding: 14px 20px;
     width: 100%;
     min-width: 0;
   }
   #results-list.results-list-view .school-card-icon {
     flex-shrink: 0;
   }
   #results-list.results-list-view .school-card-body {
     flex: 1;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 6px 12px;
     min-width: 0;
     overflow: hidden;
   }
   #results-list.results-list-view .school-card-name {
     width: 100%;
     flex-basis: 100%;
     margin-bottom: 0;
   }
   @media (min-width: 769px) {
     #results-list.results-list-view .school-card-name {
       width: auto;
       flex-basis: auto;
     }
   }
   #results-list.results-list-view .school-card-location,
   #results-list.results-list-view .school-card-tags {
     margin-bottom: 0;
   }
   #results-list.results-list-view .school-card-tags {
     flex-wrap: wrap;
     max-width: 100%;
     min-width: 0;
   }
   #results-list.results-list-view .school-card-tags .tag {
     max-width: 180px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
   #results-list.results-list-view .school-card-action {
     flex-shrink: 0;
     margin-left: auto;
   }

   /* Móvil: 2 líneas, icono a la izquierda, botones apilados verticalmente */
   @media (max-width: 768px) {
     #results-list.results-list-view .school-card {
       display: grid;
       grid-template-columns: auto 1fr auto;
       grid-template-rows: auto auto;
       gap: 6px 12px;
       padding: 14px 16px;
     }
     #results-list.results-list-view .school-card-icon {
       grid-column: 1;
       grid-row: 1 / 3;
       align-self: center;
       width: 36px;
       height: 36px;
       min-width: 36px;
       font-size: .85rem;
       flex-shrink: 0;
     }
     #results-list.results-list-view .school-card-body {
       grid-column: 2;
       grid-row: 1 / 3;
       min-width: 0;
       overflow: visible;
       overflow-wrap: break-word;
       word-break: break-word;
     }
     #results-list.results-list-view .school-card-action {
       grid-column: 3;
       grid-row: 1 / 3;
       flex-direction: column;
       align-items: stretch;
       gap: 6px;
       align-self: center;
       margin-left: 0;
     }
     #results-list.results-list-view .school-card-action .btn-comparator-card,
     #results-list.results-list-view .school-card-action .btn-detail {
       margin: 0;
       padding: 5px 10px;
       font-size: .75rem;
       justify-content: center;
       white-space: nowrap;
     }
   }
   
   .results-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 16px;
     gap: 12px;
     flex-wrap: wrap;
   }
   
   .results-count {
     font-size: .88rem;
     color: var(--text-2);
   }
   
   .results-count strong {
     color: var(--text-1);
   }
   
   .search-main-input {
     display: flex;
     gap: 0;
     border: 1px solid var(--border);
     border-radius: var(--r-sm);
     overflow: hidden;
     margin-bottom: 20px;
   }
   
   .search-main-input input {
     flex: 1;
     background: var(--surface-1);
     border: none;
     padding: 12px 16px;
     font-size: .95rem;
     font-family: var(--font-body);
     outline: none;
     color: var(--text-1);
   }
   
   .search-main-input button {
     background: var(--rot);
     color: #fff;
     border: none;
     padding: 0 22px;
     font-size: .9rem;
     font-weight: 700;
     cursor: pointer;
     font-family: var(--font-body);
     display: flex;
     align-items: center;
     gap: 8px;
     transition: background var(--t-fast);
   }
   
   .search-main-input button:hover {
     background: var(--rot-dark);
   }
   
   /* School card (search results) */
   .school-card {
     display: flex;
     align-items: center;
     gap: 14px;
     padding: 14px 16px;
     background: var(--surface-1);
     border: 1px solid var(--border);
     border-radius: var(--r-md);
     margin-bottom: 8px;
     transition: all var(--t-fast);
   }
   
   .school-card:hover {
     border-color: var(--rot);
     box-shadow: var(--shadow-sm);
   }
   
   .school-card-icon {
     width: 40px;
     height: 40px;
     background: rgba(204, 0, 0, .08);
     border-radius: var(--r-sm);
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--rot);
     font-size: .95rem;
     flex-shrink: 0;
   }
   
   .school-card-body {
     flex: 1;
     min-width: 0;
   }
   
   .school-card-name {
     font-weight: 700;
     font-size: .92rem;
     margin-bottom: 3px;
   }
   
   .school-card-name a {
     color: var(--text-1);
   }
   
   .school-card-name a:hover {
     color: var(--rot);
   }
   
   .school-card-location {
     font-size: .78rem;
     color: var(--text-3);
     margin-bottom: 5px;
     display: flex;
     align-items: center;
     gap: 4px;
   }
   
   .school-card-tags {
     display: flex;
     gap: 4px;
     flex-wrap: wrap;
   }
   
   .school-card-action {
     flex-shrink: 0;
     display: flex;
     align-items: center;
     gap: 6px;
     flex-wrap: wrap;
   }
   
   .btn-detail {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     padding: 7px 14px;
     border: 1px solid var(--border);
     border-radius: var(--r-sm);
     font-size: .8rem;
     font-weight: 600;
     color: var(--text-2);
     transition: all var(--t-fast);
     white-space: nowrap;
   }
   
   .btn-detail:hover {
     border-color: var(--rot);
     color: var(--rot);
   }
   
   /* Pagination */
   .pagination {
     display: flex;
     gap: 6px;
     justify-content: center;
     margin-top: 28px;
     flex-wrap: wrap;
   }
   
   .page-btn {
     display: flex;
     align-items: center;
     justify-content: center;
     min-width: 38px;
     height: 38px;
     padding: 0 10px;
     background: var(--surface-1);
     border: 1px solid var(--border);
     border-radius: var(--r-sm);
     font-size: .85rem;
     font-weight: 600;
     color: var(--text-2);
     transition: all var(--t-fast);
   }
   
   .page-btn.active {
     background: var(--rot);
     border-color: var(--rot);
     color: #fff;
   }
   
   .page-btn:hover:not(.active) {
     border-color: var(--rot);
     color: var(--rot);
   }
   
   /* ── Bar chart ─────────────────────────────────────────────── */
   .bar-chart {
     display: flex;
     flex-direction: column;
     gap: 8px;
   }
   
   .bar-item {
     display: flex;
     align-items: center;
     gap: 10px;
     font-size: .82rem;
   }
   
   .bar-label {
     color: var(--text-2);
     min-width: 160px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     flex-shrink: 0;
     font-size: .78rem;
   }
   
   .bar-track {
     flex: 1;
     height: 12px;
     background: var(--surface-3);
     border-radius: var(--r-full);
     overflow: hidden;
     position: relative;
   }
   
   .bar-fill {
     height: 100%;
     background: linear-gradient(90deg, var(--rot), var(--gold));
     border-radius: var(--r-full);
     width: 0;
     transition: width 1.2s cubic-bezier(.4, 0, .2, 1);
   }
   
   .bar-value {
     color: var(--text-3);
     min-width: 48px;
     text-align: right;
     font-size: .75rem;
     font-weight: 700;
   }
   
  /* Donut chart */
  .donut-wrap {
    position: relative;
    height: 360px;
    min-height: 280px;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   .chart-card {
     background: var(--surface-1);
     border: 1px solid var(--border);
     border-radius: var(--r-lg);
     padding: 24px;
   }
   
   .chart-card h3 {
     font-size: 1rem;
     font-weight: 700;
     margin-bottom: 16px;
     display: flex;
     align-items: center;
     gap: 8px;
     color: var(--text-1);
   }
   
   .chart-card h3 i {
     color: var(--gold);
   }
   
   .charts-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 24px;
   }
   
   /* ── Button base ───────────────────────────────────────────── */
   .btn {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 11px 22px;
     border-radius: var(--r-sm);
     font-size: .9rem;
     font-weight: 600;
     font-family: var(--font-body);
     cursor: pointer;
     border: 1.5px solid transparent;
     transition: all var(--t-fast);
     text-decoration: none;
   }
   
   .btn-primary {
     background: var(--rot);
     color: #fff;
     border-color: var(--rot);
   }
   
   .btn-primary:hover {
     background: var(--rot-dark);
     border-color: var(--rot-dark);
   }
   
   .btn-outline {
     background: transparent;
     color: var(--text-2);
     border-color: var(--border);
   }
   
   .btn-outline:hover {
     border-color: var(--rot);
     color: var(--rot);
   }
   
   .btn-ghost {
     background: rgba(255, 255, 255, .08);
     color: var(--text-2);
     border-color: rgba(255, 255, 255, .15);
   }
   
   .btn-ghost:hover {
     background: rgba(255, 255, 255, .15);
     color: #fff;
   }
   
   /* ── Germany banner ────────────────────────────────────────── */
   .germany-banner {
     border-radius: var(--r-xl);
     padding: 48px 40px;
     border: 1px solid rgba(204, 0, 0, .2);
     text-align: left;
     position: relative;
     overflow: hidden;
   }
   
   .germany-banner h2 {
     color: #fff;
     margin-bottom: 12px;
   }
   
   .germany-banner p {
     color: rgba(255, 255, 255, .7);
     margin-bottom: 24px;
     max-width: 560px;
   }
   
   .banner-actions {
     display: flex;
     gap: 12px;
     flex-wrap: wrap;
   }
   
   .banner-flag-stripes {
     display: flex;
     flex-direction: row;
     width: 32px;
     height: 22px;
     border-radius: 3px;
     overflow: hidden;
     margin-bottom: 12px;
   }
   
   .banner-flag-stripes span {
     flex: 1;
   }
   
   /* ── Feature list (about page) ─────────────────────────────── */
   .feature-list {
     display: flex;
     flex-direction: column;
     gap: 16px;
   }
   
   .feature-item {
     display: flex;
     gap: 14px;
     align-items: flex-start;
   }
   
   .feature-icon {
     width: 40px;
     height: 40px;
     border-radius: var(--r-md);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: .95rem;
     flex-shrink: 0;
   }
   
   .fi-red {
     background: rgba(204, 0, 0, .1);
     color: var(--rot);
   }
   
   .fi-gold {
     background: rgba(204, 160, 0, .12);
     color: var(--gold-dark);
   }
   
   .fi-blue {
     background: rgba(59, 130, 246, .12);
     color: #60a5fa;
   }
   
   .feature-text h4 {
     font-size: .92rem;
     font-weight: 700;
     margin-bottom: 4px;
     color: var(--text-1);
   }
   
   .feature-text p {
     font-size: .84rem;
     color: var(--text-2);
     line-height: 1.6;
   }
   
   /* ── About page ────────────────────────────────────────────── */
   .about-hero {
     padding: 60px 0;
   }
   
   .about-body {
     display: grid;
     grid-template-columns: 1fr 420px;
     gap: 48px;
     align-items: center;
   }
   
   .about-img img {
     border-radius: var(--r-xl);
     width: 100%;
     object-fit: cover;
     box-shadow: var(--shadow-lg);
   }
   
   
   
   /* Mobile hamburger */
   .menu-toggle {
     display: none;
     background: none;
     border: none;
     color: var(--text-2);
     font-size: 1.3rem;
     cursor: pointer;
     padding: 8px;
     border-radius: var(--r-sm);
     transition: color var(--t-fast);
   }
   
   .menu-toggle:hover {
     color: var(--text-1);
   }
   
   /* Mobile Drawer */
   .mobile-overlay {
     display: none;
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, .7);
     z-index: 998;
     backdrop-filter: blur(4px);
   }
   
   .mobile-drawer {
     position: fixed;
     top: 0;
     right: 0;
     width: 280px;
     height: 100%;
     background: var(--surface-1);
     border-left: 1px solid var(--border);
     z-index: 999;
     transform: translateX(100%);
     transition: transform var(--t-slow);
     overflow-y: auto;
     display: flex;
     flex-direction: column;
   }
   
   .mobile-drawer.open {
     transform: translateX(0);
   }
   
   .mobile-overlay.open {
     display: block;
   }
   
   .drawer-top {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 16px 20px;
     border-bottom: 1px solid var(--border);
   }
   
   .drawer-tricolor {
     display: flex;
     height: 3px;
   }
   
   .drawer-tricolor span {
     flex: 1;
   }
   
   .tc-k {
     background: #1f1f1f;
   }
   
   .tc-r {
     background: var(--rot);
   }
   
   .tc-g {
     background: var(--gold);
   }
   
   .drawer-close {
     background: none;
     border: none;
     color: var(--text-2);
     font-size: 1.2rem;
     cursor: pointer;
   }
   
   .drawer-links {
     list-style: none;
     padding: 16px 12px;
     flex: 1;
   }
   
   .drawer-links li a {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 12px 16px;
     border-radius: var(--r-sm);
     color: var(--text-2);
     font-size: .9rem;
     font-weight: 500;
     transition: all var(--t-fast);
   }
   
   .drawer-links li a:hover,
   .drawer-links li a.active {
     color: var(--gold);
     background: var(--surface-2);
   }

   /* Submenu colapsable en drawer móvil */
   .drawer-submenu {
     border-top: 1px solid var(--border);
     margin-top: 6px;
     padding-top: 6px;
   }
   .drawer-submenu-trigger {
     display: flex;
     align-items: center;
     gap: 10px;
     width: 100%;
     padding: 12px 16px;
     border: none;
     background: none;
     color: var(--text-2);
     font-size: .9rem;
     font-weight: 500;
     cursor: pointer;
     font-family: var(--font-body);
     text-align: left;
     border-radius: var(--r-sm);
     transition: all var(--t-fast);
   }
   .drawer-submenu-trigger:hover {
     color: var(--gold);
     background: var(--surface-2);
   }
   .drawer-submenu-trigger .drawer-submenu-arrow {
     margin-left: auto;
     font-size: .7rem;
     transition: transform var(--t-fast);
   }
   .drawer-submenu.open .drawer-submenu-trigger .drawer-submenu-arrow {
     transform: rotate(180deg);
   }
   .drawer-submenu-list {
     list-style: none;
     padding: 0;
     margin: 0;
     max-height: 0;
     overflow: hidden;
     transition: max-height .3s ease;
   }
   .drawer-submenu.open .drawer-submenu-list {
     max-height: 600px;
   }
   .drawer-submenu-list li a {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 10px 16px 10px 28px;
     border-radius: var(--r-sm);
     color: var(--text-2);
     font-size: .88rem;
     font-weight: 500;
     transition: all var(--t-fast);
     border-left: 3px solid transparent;
   }
   .drawer-submenu-list li a:hover,
   .drawer-submenu-list li a.active {
     color: var(--gold);
     background: var(--surface-2);
     border-left-color: var(--gold);
   }
   
   .drawer-footer {
     padding: 16px;
     text-align: center;
     font-size: .75rem;
     color: var(--text-3);
     border-top: 1px solid var(--border);
   }
   
   /* ================================================================
      HERO
      ================================================================ */
  .hero-home {
    position: relative;
    min-height: 90vh;
    display: flex;
    align-items: center;
    overflow-x: hidden;
  }
  
  /* Wrapper para bg+overlay: overflow hidden evita scroll del scale, hero-home queda visible para el dropdown */
  .hero-bg-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }
  
  .hero-bg {
     position: absolute;
     inset: 0;
     background-image: url('../images/finde-schule.webp');
     background-size: cover;
     background-position: center;
     filter: brightness(.3);
     transform: scale(1.05);
     transition: transform 8s ease;
   }
   
   .hero-home:hover .hero-bg-wrap .hero-bg {
     transform: scale(1.0);
   }
   
   .hero-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg,
         rgba(13, 13, 13, .85) 0%,
         rgba(13, 13, 13, .5) 50%,
         rgba(140, 0, 0, .3) 100%);
   }
   
   /* Animated diagonal stripes accent */
   .hero-accent {
     position: absolute;
     top: 0;
     right: 0;
     width: 40%;
     height: 100%;
     overflow: hidden;
     pointer-events: none;
   }
   
   .hero-accent::before {
     content: '';
     position: absolute;
     top: -20%;
     right: -10%;
     width: min(600px, 120vw);
     height: min(600px, 120vw);
     border-radius: 50%;
     background: radial-gradient(circle, rgba(255, 204, 0, .08) 0%, transparent 70%);
     animation: pulse-glow 4s ease-in-out infinite;
   }
   
   @keyframes pulse-glow {
   
     0%,
     100% {
       opacity: .6;
       transform: scale(1);
     }
   
     50% {
       opacity: 1;
       transform: scale(1.1);
     }
   }
   
   .hero-content {
     position: relative;
     z-index: 2;
     padding: 80px 0;
     max-width: 700px;
   }
   
   .hero-badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: rgba(255, 204, 0, .12);
     border: 1px solid rgba(255, 204, 0, .3);
     color: var(--gold);
     font-size: .8rem;
     font-weight: 600;
     letter-spacing: .05em;
     text-transform: uppercase;
     padding: 6px 14px;
     border-radius: var(--r-full);
     margin-bottom: 20px;
     animation: fadeInDown .6s ease both;
   }
   
   @keyframes fadeInDown {
     from {
       opacity: 0;
       transform: translateY(-12px);
     }
   
     to {
       opacity: 1;
       transform: translateY(0);
     }
   }
   
   .hero-content h1 {
     color: #fff;
     margin-bottom: 20px;
     animation: fadeInUp .7s ease .1s both;
   }
   
   .hero-content h1 em {
     font-style: normal;
     background: linear-gradient(135deg, var(--gold) 30%, var(--rot));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
   }
   
   .hero-content p {
     font-size: 1.1rem;
     color: rgba(255, 255, 255, .75);
     margin-bottom: 32px;
     animation: fadeInUp .7s ease .2s both;
     line-height: 1.7;
   }
   
   @keyframes fadeInUp {
     from {
       opacity: 0;
       transform: translateY(20px);
     }
   
     to {
       opacity: 1;
       transform: translateY(0);
     }
   }
   
   /* Hero Search */
   .hero-search-wrap {
     position: relative;
     max-width: 600px;
     animation: fadeInUp .7s ease .3s both;
     margin-bottom: 32px;
     z-index: 10;
   }
   
   .hero-search {
     display: flex;
     background: rgba(255, 255, 255, .07);
     border: 1px solid rgba(255, 255, 255, .15);
     border-radius: var(--r-full);
     overflow: hidden;
     backdrop-filter: blur(10px);
     transition: border-color var(--t-base), box-shadow var(--t-base);
   }
   
   .hero-search:focus-within {
     border-color: var(--gold);
     box-shadow: 0 0 0 3px rgba(255, 204, 0, .15);
   }
   
   .hero-search input[type="text"] {
     flex: 1;
     background: none;
     border: none;
     outline: none;
     padding: 16px 24px;
     font-size: 1rem;
     color: #fff;
     font-family: var(--font-body);
   }
   
   .hero-search input::placeholder {
     color: rgba(255, 255, 255, .45);
   }
   
   .hero-search button {
     background: var(--rot);
     border: none;
     color: white;
     padding: 16px 28px;
     font-size: .95rem;
     font-weight: 600;
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: 8px;
     font-family: var(--font-body);
     transition: background var(--t-fast);
     flex-shrink: 0;
   }
   
   .hero-search button:hover {
     background: var(--rot-dark);
   }
   
   /* AJAX Dropdown */
   .ajax-dropdown {
     position: absolute;
     top: calc(100% + 8px);
     left: 0;
     right: 0;
     background: var(--surface-2);
     border: 1px solid var(--border-hover);
     border-radius: var(--r-lg);
     box-shadow: var(--shadow-lg);
     z-index: 100;
     max-height: 360px;
     overflow-y: auto;
     display: none;
   }
   
   .ajax-dropdown.open {
     display: block;
     animation: dropIn .2s ease;
   }
   
   @keyframes dropIn {
     from {
       opacity: 0;
       transform: translateY(-8px);
     }
   
     to {
       opacity: 1;
       transform: translateY(0);
     }
   }
   
   .ajax-section-label {
     padding: 10px 16px 4px;
     font-size: .72rem;
     font-weight: 700;
     letter-spacing: .08em;
     text-transform: uppercase;
     color: var(--text-3);
     display: flex;
     align-items: center;
     gap: 6px;
   }
   
   .ajax-item {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 10px 16px;
     cursor: pointer;
     transition: background var(--t-fast);
     border-radius: var(--r-sm);
     margin: 2px 6px;
     color: var(--text-1);
   }
   
   .ajax-item:hover,
   .ajax-item.focused {
     background: var(--surface-3);
   }
   
   .ajax-item em {
     color: var(--gold);
     font-style: normal;
     font-weight: 600;
   }
   
   .ajax-icon {
     width: 36px;
     height: 36px;
     background: var(--surface-3);
     border-radius: var(--r-sm);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: .8rem;
     color: var(--text-2);
     flex-shrink: 0;
   }
   
   .ajax-icon.bl-icon {
     background: rgba(255, 204, 0, .1);
     color: var(--gold);
   }
   
   .ajax-body {
     flex: 1;
     min-width: 0;
   }
   
   .ajax-name {
     font-size: .9rem;
     font-weight: 600;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
   
   .ajax-sub {
     font-size: .78rem;
     color: var(--text-2);
     margin-top: 1px;
   }
   
   .ajax-spinner {
     padding: 16px;
     text-align: center;
     color: var(--text-3);
     font-size: .9rem;
   }
   
   .ajax-no-result {
     padding: 16px;
     text-align: center;
     color: var(--text-2);
     font-size: .9rem;
   }
   
   .ajax-footer {
     padding: 10px 16px;
     border-top: 1px solid var(--border);
     font-size: .82rem;
     color: var(--text-2);
     cursor: pointer;
     text-align: center;
     transition: color var(--t-fast);
   }
   
   .ajax-footer:hover {
     color: var(--gold);
   }
   
   .spinner-ring {
     display: inline-block;
     width: 16px;
     height: 16px;
     border: 2px solid var(--surface-3);
     border-top-color: var(--gold);
     border-radius: 50%;
     animation: spin .6s linear infinite;
     margin-right: 8px;
     vertical-align: middle;
   }
   
   @keyframes spin {
     to {
       transform: rotate(360deg);
     }
   }
   
   /* Hero stats bar */
   .hero-stats {
     display: flex;
     gap: 32px;
     animation: fadeInUp .7s ease .4s both;
   }
   
   .hero-stat {
     display: flex;
     flex-direction: column;
     gap: 2px;
   }
   
   .hero-stat strong {
     font-family: var(--font-head);
     font-size: 1.8rem;
     font-weight: 900;
     color: var(--gold);
     line-height: 1;
   }
   
   .hero-stat span {
     font-size: .8rem;
     color: rgba(255, 255, 255, .5);
   }
   
   /* Scroll caret */
   .hero-scroll {
     position: absolute;
     bottom: 32px;
     left: 50%;
     transform: translateX(-50%);
     animation: bounce 2s ease-in-out infinite;
     color: rgba(255, 255, 255, .35);
     z-index: 2;
   }
   
   @keyframes bounce {
   
     0%,
     100% {
       transform: translateX(-50%) translateY(0);
     }
   
     50% {
       transform: translateX(-50%) translateY(8px);
     }
   }
   
   /* ================================================================
      SECTION
      ================================================================ */
   .section {
     padding: 80px 0;
   }
   
   .section-alt {
     background: var(--surface-1);
   }
   
   .section-dark {
     background: linear-gradient(180deg, var(--surface-1) 0%, var(--surface-0) 100%);
   }
   
   .section-header {
     text-align: center;
     max-width: 640px;
     margin: 0 auto 48px;
   }
   
   .section-header p.eyebrow {
     font-size: .78rem;
     font-weight: 700;
     letter-spacing: .1em;
     text-transform: uppercase;
     color: var(--rot);
     margin-bottom: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 6px;
   }
   
   .section-header h2 {
     color: var(--text-1);
     margin-bottom: 16px;
   }
   
   .section-header>p:not(.eyebrow) {
     color: var(--text-2);
     font-size: .95rem;
     line-height: 1.7;
   }
   
   /* ================================================================
      GRIDS
      ================================================================ */
   .grid-4 {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 16px;
   }
   
   .grid-3 {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 20px;
   }
   
   .grid-2 {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 20px;
   }
   
   /* ================================================================
      BUNDESLAND CARDS
      ================================================================ */
   .bl-card {
     background: var(--surface-1);
     border: 1px solid var(--border);
     border-radius: var(--r-lg);
     padding: 20px;
     display: flex;
     flex-direction: column;
     gap: 12px;
     transition: all var(--t-base);
     position: relative;
     overflow: hidden;
   }
   
   .bl-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
     background: linear-gradient(90deg, var(--rot), var(--gold));
     transform: scaleX(0);
     transition: transform var(--t-base);
     transform-origin: left;
   }
   
   .bl-card:hover {
     border-color: var(--border-hover);
     transform: translateY(-3px);
     box-shadow: var(--shadow-md);
   }
   
   .bl-card:hover::before {
     transform: scaleX(1);
   }
   
   .bl-card-icon {
     width: 44px;
     height: 44px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: var(--r-md);
     font-size: 1rem;
     /* Color set per card accent */
     background: rgba(204, 0, 0, .12);
     color: var(--rot);
   }
   
   .bl-card h3 {
     font-size: .95rem;
     font-weight: 700;
     color: var(--text-1);
     line-height: 1.3;
   }
   
   .bl-card-meta {
     display: flex;
     flex-direction: column;
     gap: 4px;
   }
   
   .bl-card-count {
     font-size: .8rem;
     color: var(--text-3);
     display: flex;
     align-items: center;
     gap: 5px;
   }
   
   .bl-card-arrow {
     font-size: .8rem;
     font-weight: 600;
     color: var(--rot);
     display: flex;
     align-items: center;
     gap: 6px;
     opacity: 1;
     margin-top: auto;
     transition: opacity var(--t-fast);
   }
   
   .bl-card:hover .bl-card-arrow {
     opacity: 1;
   }
   
   /* View toggle */
   .view-toolbar {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 20px;
     gap: 12px;
     flex-wrap: wrap;
   }
   
   .view-toolbar-left {
     display: flex;
     align-items: center;
     gap: 12px;
     flex: 1;
   }
   
   .view-toolbar-right {
     display: flex;
     gap: 4px;
   }
   
   .filter-input-wrap {
     position: relative;
     flex: 1;
     max-width: 360px;
   }
   
   .filter-input-icon {
     position: absolute;
     left: 12px;
     top: 50%;
     transform: translateY(-50%);
     color: var(--text-3);
     font-size: .85rem;
   }
   
   .filter-input {
     width: 100%;
     background: var(--surface-2);
     border: 1px solid var(--border);
     border-radius: var(--r-full);
     padding: 9px 16px 9px 36px;
     font-size: .88rem;
     color: var(--text-1);
     font-family: var(--font-body);
     outline: none;
     transition: border-color var(--t-fast), box-shadow var(--t-fast);
   }
   
   .filter-input:focus {
     border-color: var(--gold);
     box-shadow: 0 0 0 2px rgba(255, 204, 0, .1);
   }
   
   .filter-input::placeholder {
     color: var(--text-3);
   }
   
   .count-badge {
     background: var(--surface-2);
     border: 1px solid var(--border);
     color: var(--text-2);
     padding: 4px 12px;
     border-radius: var(--r-full);
     font-size: .8rem;
     white-space: nowrap;
   }
   
   .view-toggle-btn {
     width: 36px;
     height: 36px;
     background: var(--surface-2);
     border: 1px solid var(--border);
     border-radius: var(--r-sm);
     color: var(--text-3);
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: .85rem;
     transition: all var(--t-fast);
   }
   
   .view-toggle-btn.active {
     background: var(--rot);
     border-color: var(--rot);
     color: #fff;
   }
   
   .view-toggle-btn:hover:not(.active) {
     border-color: var(--border-hover);
     color: var(--text-1);
   }
   
   /* List view override — cada bl-card ocupa una línea completa (100% width) */
   .grid-4.list-view {
     grid-template-columns: 1fr;
     width: 100%;
   }
   
   .grid-4.list-view .bl-card {
     display: grid;
     grid-template-columns: auto 1fr auto;
     grid-template-rows: auto auto;
     gap: 6px 16px;
     align-items: center;
     padding: 14px 20px;
     width: 100%;
     min-width: 0;
   }
   .grid-4.list-view .bl-card-icon {
     grid-column: 1;
     grid-row: 1;
   }
   .grid-4.list-view .bl-card h3 {
     grid-column: 2;
     grid-row: 1;
   }
   .grid-4.list-view .bl-card-meta {
     grid-column: 2;
     grid-row: 2;
     flex-direction: row;
   }
   .grid-4.list-view .bl-card-arrow {
     grid-column: 3;
     grid-row: 2;
     opacity: 1;
     margin-left: auto;
   }
   
   /* Grid with school cards — remove margin, list view */
   .grid-4 .school-card {
     margin-bottom: 0;
   }
   
   .grid-4.list-view .school-card {
     padding: 12px 16px;
   }
   
   /* ── School grid cards (city page) — estilo tipo bl-card ───────────────── */
   .school-grid .school-card {
     display: flex;
     flex-direction: column;
     align-items: stretch;
     gap: 14px;
     padding: 22px 20px;
     background: var(--surface-1);
     border: 1px solid var(--border);
     border-radius: var(--r-lg);
     transition: all var(--t-base);
     position: relative;
     overflow: hidden;
   }
   
   .school-grid .school-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
     background: linear-gradient(90deg, var(--rot), var(--gold));
     transform: scaleX(0);
     transition: transform var(--t-base);
     transform-origin: left;
   }
   
   .school-grid .school-card:hover {
     border-color: var(--border-hover);
     transform: translateY(-4px);
     box-shadow: var(--shadow-md);
   }
   
   .school-grid .school-card:hover::before {
     transform: scaleX(1);
   }
   
   .school-grid .school-card-icon {
     width: 48px;
     height: 48px;
     background: rgba(204, 0, 0, .1);
     border-radius: var(--r-md);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.15rem;
     color: var(--rot);
     flex-shrink: 0;
   }
   
   /* Grid: tags al lado derecho del icono (position absolute), flex vertical */
   .school-grid .school-card-tags {
     position: absolute;
     top: 22px;
     right: 20px;
     display: flex;
     flex-direction: column;
     align-items: flex-end;
     gap: 4px;
   }
   
   .school-grid .school-card-body {
     flex: 1;
     min-width: 0;
     display: flex;
     flex-direction: column;
     gap: 8px;
   }
   
   .school-grid .school-card-name {
     font-size: 1rem;
     font-weight: 700;
     line-height: 1.35;
     margin: 0;
   }
   
   .school-grid .school-card-name a {
     color: var(--text-1);
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
   }
   
   .school-grid .school-card-name a:hover {
     color: var(--rot);
   }
   
   .school-grid .school-card-location {
     font-size: .8rem;
     color: var(--text-3);
     display: flex;
     align-items: flex-start;
     gap: 6px;
     line-height: 1.4;
     margin-bottom: 0;
   }
   
   .school-grid .school-card-location i {
     color: var(--rot);
     font-size: .7rem;
     margin-top: 3px;
     flex-shrink: 0;
   }
   
   .school-grid .school-card-tags .tag {
     padding: 4px 10px;
     font-size: .7rem;
   }
   
   .school-grid .school-card-action {
     display: flex;
     align-items: center;
     gap: 8px;
     flex-wrap: wrap;
     padding-top: 4px;
     margin-top: auto;
   }
   
     .school-grid .school-card-action .btn-comparator-card {
     padding: 8px 14px;
     font-size: .8rem;
   }
   
   .school-grid .school-card-action .btn-detail {
     margin-left: auto;
     padding: 8px 16px;
     font-size: .82rem;
   }
   
   /* List view: tags dentro de body, en línea con la dirección */
   .school-grid.list-view .school-card {
     display: grid;
     grid-template-columns: auto 1fr auto;
     gap: 16px;
     padding: 14px 18px;
     align-items: center;
   }
   
   .school-grid.list-view .school-card::before {
     width: 3px;
     height: 100%;
     top: 0;
     right: auto;
     left: 0;
     transform: scaleY(0);
     transform-origin: top;
   }
   
   .school-grid.list-view .school-card:hover::before {
     transform: scaleY(1);
   }
   
   .school-grid.list-view .school-card-icon {
     grid-column: 1;
   }
   
   .school-grid.list-view .school-card-body {
     grid-column: 2;
     min-width: 0;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 8px 16px;
   }
   
   .school-grid.list-view .school-card-action {
     grid-column: 3;
     border-top: none;
     padding-top: 0;
     margin-top: 0;
     margin-left: auto;
   }
   
   .school-grid.list-view .school-card-name {
     width: 100%;
   }
   
   .school-grid.list-view .school-card-line {
     display: flex;
     flex-wrap: nowrap;
     align-items: center;
     gap: 12px;
     width: 100%;
   }
   
   .school-grid.list-view .school-card-location,
   .school-grid.list-view .school-card-tags {
     display: flex;
     align-items: center;
     gap: 6px;
     flex-shrink: 0;
   }
   
   .school-grid.list-view .school-card-tags {
     position: static;
     justify-content: flex-start;
     margin-top: 0;
     flex-wrap: nowrap;
   }
   
   /* Empty state */
   .empty-state {
     text-align: center;
     padding: 60px 20px;
     color: var(--text-3);
   }
   
   .empty-icon {
     font-size: 2.5rem;
     margin-bottom: 16px;
     opacity: .4;
   }
   
   .empty-state h2 {
     color: var(--text-2);
     margin-bottom: 8px;
     font-size: 1.2rem;
   }
   
   .empty-state p {
     font-size: .9rem;
   }
   
   /* ================================================================
      STATS SECTION
      ================================================================ */
   .stats-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 20px;
   }
   
   .stat-card {
     background: var(--surface-1);
     border: 1px solid var(--border);
     border-radius: var(--r-lg);
     padding: 20px 16px; /* Reduced from 28px 24px */
     text-align: center;
     position: relative;
     overflow: hidden;
     transition: all var(--t-base);
   }
   
   .stat-card:hover {
     transform: translateY(-3px);
     box-shadow: var(--shadow-md);
   }
   
   .stat-card-icon {
     font-size: 1.5rem; /* Reduced from 1.8rem */
     margin-bottom: 10px;
     color: var(--text-3); /* FA colors */
     display: block;
   }
   
   .stat-card-num {
     font-family: var(--font-head);
     font-size: 2rem; /* Reduced from 2.5rem */
     font-weight: 800;
     background: linear-gradient(135deg, var(--gold), var(--rot));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     display: block;
     line-height: 1;
     margin-bottom: 6px;
   }
   
   .stat-card-label {
     font-size: .8rem; /* Reduced from .85rem */
     color: var(--text-2);
     font-weight: 500;
   }
   
   .stat-card::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 2px;
     background: linear-gradient(90deg, var(--rot), var(--gold));
     transform: scaleX(0);
     transition: transform var(--t-slow);
   }
   
   .stat-card:hover::after {
     transform: scaleX(1);
   }
   
   /* ================================================================
      CHART SECTION
      ================================================================ */
   .charts-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 24px;
   }
   
   .chart-card {
     background: var(--surface-1);
     border: 1px solid var(--border);
     border-radius: var(--r-xl);
     padding: 28px;
   }
   
   .chart-card h3 {
     font-size: 1rem;
     font-weight: 700;
     margin-bottom: 24px;
     color: var(--text-1);
     display: flex;
     align-items: center;
     gap: 8px;
   }
   
   .chart-card h3 i {
     color: var(--gold);
   }
   
   /* Custom bar chart */
   .bar-chart {
     display: flex;
     flex-direction: column;
     gap: 10px;
   }
   
   .bar-item {
     display: flex;
     align-items: center;
     gap: 10px;
   }
   
   .bar-label {
     font-size: .78rem;
     color: var(--text-2);
     width: 130px;
     flex-shrink: 0;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
   
   .bar-track {
     flex: 1;
     height: 8px;
     background: var(--surface-3);
     border-radius: var(--r-full);
     overflow: hidden;
   }
   
   .bar-fill {
     height: 100%;
     border-radius: var(--r-full);
     background: linear-gradient(90deg, var(--rot), var(--gold));
     width: 0;
     transition: width 1s ease;
   }
   
   .bar-value {
     font-size: .78rem;
     color: var(--text-3);
     width: 50px;
     text-align: right;
     flex-shrink: 0;
   }
   
  /* Donut chart (Chart.js) container */
  .donut-wrap {
    position: relative;
    height: 360px;
    min-height: 280px;
  }
  .chart-card .donut-wrap canvas {
    max-height: 360px;
  }
   .chart-card .donut-wrap .chartjs-chart {
     max-width: 100%;
   }
   
   /* ================================================================
      GERMANY BANNER
      ================================================================ */
   .germany-banner {
     background: linear-gradient(135deg, #0d0d0d 0%, #1a0000 50%, #1a0000 100%);
     border: 1px solid rgba(204, 0, 0, .2);
     border-radius: var(--r-xl);
     padding: 48px;
     position: relative;
     overflow: hidden;
   }
   
   .germany-banner::before {
     content: '';
     position: absolute;
     top: -60px;
     right: -60px;
     width: 300px;
     height: 300px;
     background: radial-gradient(circle, rgba(255, 204, 0, .06), transparent 70%);
     border-radius: 50%;
   }
   
   .banner-flag-stripes {
     display: flex;
     height: 5px;
     border-radius: var(--r-full);
     overflow: hidden;
     margin-bottom: 32px;
     width: 80px;
   }
   
   .banner-flag-stripes span {
     flex: 1;
   }
   
   .germany-banner h2 {
     color: #fff;
     margin-bottom: 16px;
   }
   
   .germany-banner p {
     color: rgba(255, 255, 255, .65);
     line-height: 1.7;
     margin-bottom: 28px;
     max-width: 620px;
   }
   
   .banner-actions {
     display: flex;
     gap: 12px;
     flex-wrap: wrap;
   }
   
   .germany-banner .btn-ghost {
     color: rgba(255, 255, 255, .9);
     border-color: rgba(255, 255, 255, .35);
   }
   .germany-banner .btn-ghost:hover {
     color: #fff;
     border-color: rgba(255, 255, 255, .5);
     background: rgba(255, 255, 255, .18);
   }
   
   /* ================================================================
      EDUCATION CARDS
      ================================================================ */
   .edu-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 16px;
   }
   
   .edu-card {
     background: var(--surface-1);
     border: 1px solid var(--border);
     border-radius: var(--r-lg);
     padding: 24px;
     transition: all var(--t-base);
     text-align: center;
   }
   
   .edu-card:hover {
     transform: translateY(-4px);
     box-shadow: var(--shadow-md);
     border-color: var(--border-hover);
   }
   
   .edu-card-icon {
     width: 52px;
     height: 52px;
     border-radius: var(--r-md);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.2rem;
     margin: 0 auto 16px;
   }
   
   .edu-card-icon.c-red {
     background: rgba(204, 0, 0, .12);
     color: var(--rot);
   }
   
   .edu-card-icon.c-gold {
     background: rgba(255, 204, 0, .12);
     color: var(--gold);
   }
   
   .edu-card-icon.c-blue {
     background: rgba(59, 130, 246, .12);
     color: #60a5fa;
   }
   
   .edu-card-icon.c-green {
     background: rgba(34, 197, 94, .12);
     color: #4ade80;
   }
   
   .edu-card h3 {
     font-size: .95rem;
     margin-bottom: 8px;
   }
   
   .edu-card p {
     font-size: .82rem;
     color: var(--text-2);
     line-height: 1.5;
   }
   
   /* ================================================================
      SEARCH PAGE
      ================================================================ */
   .search-layout {
     display: grid;
     grid-template-columns: 300px 1fr;
     gap: 28px;
     align-items: start;
   }
   
   .search-sidebar {
     background: var(--surface-1);
     border: 1px solid var(--border);
     border-radius: var(--r-lg);
     padding: 24px;
     position: sticky;
     top: 88px;
   }
   
   .search-sidebar h2 {
     font-size: 1rem;
     font-weight: 700;
     margin-bottom: 20px;
     color: var(--text-1);
     display: flex;
     align-items: center;
     gap: 8px;
   }
   
   .search-sidebar h2 i {
     color: var(--gold);
   }
   
   .filter-group {
     margin-bottom: 20px;
   }
   
   .filter-group > label {
     display: block;
     font-size: .78rem;
     font-weight: 600;
     letter-spacing: .06em;
     text-transform: uppercase;
     color: var(--text-3);
     margin-bottom: 8px;
   }
   
   .filter-group input[type="text"],
   .filter-group select {
     width: 100%;
     background: var(--surface-2);
     border: 1px solid var(--border);
     border-radius: var(--r-sm);
     padding: 9px 12px;
     font-size: .88rem;
     color: var(--text-1);
     font-family: var(--font-body);
     outline: none;
     transition: border-color var(--t-fast);
     appearance: none;
   }
   
   .filter-group input:focus,
   .filter-group select:focus {
     border-color: var(--gold);
   }
   
   .checkbox-group {
     display: flex;
     flex-direction: column;
     gap: 8px;
   }
   
   .checkbox-item {
     display: flex;
     flex-wrap: nowrap;
     align-items: center;
     gap: 10px;
     cursor: pointer;
     font-size: .88rem;
     color: var(--text-2);
     padding: 8px 10px;
     margin: 0 -10px;
     border-radius: var(--r-sm);
     transition: background var(--t-fast), color var(--t-fast);
     white-space: nowrap;
   }
   .checkbox-item:hover {
     background: var(--surface-2);
     color: var(--text-1);
   }
   
   .checkbox-item input[type="checkbox"] {
     position: absolute;
     width: 1px;
     height: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;
     clip: rect(0,0,0,0);
     border: 0;
   }
   
   .checkbox-box {
     width: 20px;
     height: 20px;
     min-width: 20px;
     min-height: 20px;
     border: 2px solid var(--border);
     border-radius: 5px;
     background: var(--surface-2);
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all var(--t-fast);
     flex-shrink: 0;
   }
   
   .checkbox-item:has(input:checked) .checkbox-box {
     background: var(--rot);
     border-color: var(--rot);
   }
   
   .checkbox-item:has(input:checked) .checkbox-box::after {
     content: '\2713';
     color: #fff;
     font-size: .7rem;
     font-weight: 800;
     line-height: 1;
   }
   
   .checkbox-item:has(input:checked) {
     color: var(--text-1);
   }
   
   .filter-divider {
     height: 1px;
     background: var(--border);
     margin: 16px 0;
   }
   
   .btn-search {
     width: 100%;
     padding: 12px;
     background: var(--rot);
     color: white;
     border: none;
     border-radius: var(--r-md);
     font-size: .95rem;
     font-weight: 700;
     cursor: pointer;
     font-family: var(--font-body);
     transition: background var(--t-fast);
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
   }
   
   .btn-search:hover {
     background: var(--rot-dark);
   }
   
   .btn-reset {
     width: 100%;
     padding: 10px;
     background: none;
     color: var(--text-3);
     border: 1px solid var(--border);
     border-radius: var(--r-md);
     font-size: .85rem;
     cursor: pointer;
     font-family: var(--font-body);
     margin-top: 8px;
     transition: all var(--t-fast);
   }
   
   .btn-reset:hover {
     border-color: var(--border-hover);
     color: var(--text-2);
   }
   
   /* Results area */
   .results-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 16px;
     gap: 12px;
     flex-wrap: wrap;
   }
   
   .results-count {
     font-size: .9rem;
     color: var(--text-2);
   }
   
   .results-count strong {
     color: var(--gold);
   }
   
   .search-results-top {
     background: var(--surface-1);
     border: 1px solid var(--border);
     border-radius: var(--r-lg);
     padding: 24px;
     margin-bottom: 20px;
   }
   
   .search-main-input {
     display: flex;
     background: var(--surface-0);
     border: 1px solid var(--border);
     border-radius: var(--r-full);
     overflow: hidden;
   }
   
   .search-main-input:focus-within {
     border-color: var(--gold);
   }
   
   .search-main-input input {
     flex: 1;
     background: none;
     border: none;
     outline: none;
     padding: 12px 20px;
     font-size: .95rem;
     color: var(--text-1);
     font-family: var(--font-body);
   }
   
   .search-main-input button {
     background: var(--rot);
     border: none;
     color: white;
     padding: 12px 24px;
     font-weight: 600;
     cursor: pointer;
     font-family: var(--font-body);
     transition: background var(--t-fast);
   }
   
   .search-main-input button:hover {
     background: var(--rot-dark);
   }
   
   /* School card in results */
   .school-card {
     background: var(--surface-1);
     border: 1px solid var(--border);
     border-radius: var(--r-lg);
     padding: 20px;
     display: flex;
     gap: 16px;
     align-items: flex-start;
     transition: all var(--t-base);
     margin-bottom: 12px;
     position: relative;
     overflow: hidden;
   }
   
   .school-card:hover {
     border-color: var(--border-hover);
     box-shadow: var(--shadow-sm);
   }
   
   .school-card::before {
     content: '';
     position: absolute;
     left: 0;
     top: 0;
     bottom: 0;
     width: 3px;
     background: linear-gradient(180deg, var(--rot), var(--gold));
     transform: scaleY(0);
     transition: transform var(--t-base);
     transform-origin: top;
   }
   
   .school-card:hover::before {
     transform: scaleY(1);
   }
   
   .school-card-icon {
     width: 46px;
     height: 46px;
     background: var(--surface-2);
     border-radius: var(--r-md);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1rem;
     color: var(--rot);
     flex-shrink: 0;
   }
   
   .school-card-body {
     flex: 1;
     min-width: 0;
   }
   
   .school-card-name {
     font-size: 1rem;
     font-weight: 700;
     color: var(--text-1);
     margin-bottom: 4px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
   
   .school-card-name a {
     color: inherit;
   }
   
   .school-card-name a:hover {
     color: var(--gold);
   }
   
   .school-card-location {
     font-size: .82rem;
     color: var(--text-2);
     margin-bottom: 8px;
     display: flex;
     align-items: center;
     gap: 5px;
   }
   
   .school-card-tags {
     display: flex;
     gap: 6px;
     flex-wrap: wrap;
   }
   
   .tag {
     display: inline-flex;
     align-items: center;
     gap: 4px;
     padding: 3px 10px;
     border-radius: var(--r-full);
     font-size: .72rem;
     font-weight: 600;
   }
   
   .tag-type {
     background: rgba(204, 0, 0, .12);
     color: var(--rot);
   }
   
   .tag-public {
     background: rgba(255, 204, 0, .1);
     color: var(--gold-dark);
   }
   
   .tag-private {
     background: rgba(59, 130, 246, .1);
     color: #60a5fa;
   }
   
   .tag-ganztag {
     background: rgba(34, 197, 94, .1);
     color: #4ade80;
   }
   
   .tag-web {
     background: rgba(168, 85, 247, .1);
     color: #c084fc;
   }
   
   .tag-phone {
     background: rgba(59, 130, 246, .1);
     color: #60a5fa;
   }
   
   .school-card-action {
     flex-shrink: 0;
     display: flex;
     align-items: center;
     gap: 6px;
     flex-wrap: wrap;
   }
   
   .btn-detail {
     padding: 8px 16px;
     background: var(--surface-2);
     border: 1px solid var(--border);
     border-radius: var(--r-sm);
     color: var(--text-2);
     font-size: .82rem;
     font-weight: 600;
     cursor: pointer;
     transition: all var(--t-fast);
     white-space: nowrap;
   }
   
   .btn-detail:hover {
     background: var(--rot);
     border-color: var(--rot);
     color: #fff;
   }
   
   /* Pagination */
   .pagination {
     display: flex;
     justify-content: center;
     gap: 6px;
     margin-top: 28px;
     flex-wrap: wrap;
   }
   
   .page-btn {
     min-width: 40px;
     height: 40px;
     padding: 0 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--surface-1);
     border: 1px solid var(--border);
     border-radius: var(--r-sm);
     color: var(--text-2);
     font-size: .85rem;
     font-weight: 600;
     cursor: pointer;
     transition: all var(--t-fast);
     text-decoration: none;
   }
   
   .page-btn:hover {
     border-color: var(--rot);
     color: var(--rot);
   }
   
   .page-btn.active {
     background: var(--rot);
     border-color: var(--rot);
     color: white;
   }
   
   .page-btn:disabled {
     opacity: .4;
     cursor: not-allowed;
   }
   
   /* ================================================================
      SCHOOL PROFILE
      ================================================================ */
   .school-hero {
     background: linear-gradient(135deg, var(--surface-1) 0%, #1a0000 100%);
     border-bottom: 1px solid var(--border);
     padding: 48px 0;
   }
   
   .school-hero-inner {
     display: flex;
     gap: 28px;
     align-items: flex-start;
   }
   
   .school-hero-icon {
     width: 80px;
     height: 80px;
     background: rgba(204, 0, 0, .1);
     border: 2px solid rgba(204, 0, 0, .3);
     border-radius: var(--r-xl);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 2rem;
     color: var(--rot);
     flex-shrink: 0;
   }
   
   .school-hero-body {
     flex: 1;
   }
   
   .school-type-badge {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     background: rgba(255, 204, 0, .1);
     border: 1px solid rgba(255, 204, 0, .25);
     color: var(--gold);
     padding: 4px 12px;
     border-radius: var(--r-full);
     font-size: .75rem;
     font-weight: 700;
     letter-spacing: .05em;
     text-transform: uppercase;
     margin-bottom: 12px;
   }
   
   .school-hero-body h1 {
     margin-bottom: 8px;
   }
   
   .school-breadcrumb {
     font-size: .82rem;
     color: var(--text-3);
     display: flex;
     align-items: center;
     gap: 8px;
     flex-wrap: wrap;
   }
   
   .school-breadcrumb a {
     color: var(--text-2);
     transition: color var(--t-fast);
   }
   
   .school-breadcrumb a:hover {
     color: var(--gold);
   }
   
   .school-breadcrumb .sep {
     color: var(--text-3);
   }
   
   .school-body {
     display: grid;
     grid-template-columns: 1fr 320px;
     gap: 28px;
     padding: 40px 0 80px;
   }
   
   .info-card {
     background: var(--surface-1);
     border: 1px solid var(--border);
     border-radius: var(--r-lg);
     padding: 24px;
     margin-bottom: 20px;
   }
   
   .info-card h3 {
     font-size: .9rem;
     font-weight: 700;
     color: var(--gold);
     margin-bottom: 16px;
     display: flex;
     align-items: center;
     gap: 8px;
     letter-spacing: .03em;
     text-transform: uppercase;
     font-size: .78rem;
   }
   
   .info-row {
     display: flex;
     gap: 12px;
     padding: 10px 0;
     border-bottom: 1px solid var(--border);
     font-size: .88rem;
   }
   
   .info-row:last-child {
     border-bottom: none;
   }
   
   .info-row-label {
     color: var(--text-3);
     min-width: 120px;
     flex-shrink: 0;
     font-size: .82rem;
   }
   
   .info-row-value {
     color: var(--text-1);
     font-weight: 500;
   }
   
   .info-row-value a {
     color: var(--rot);
   }
   
   .info-row-value a:hover {
     color: var(--gold);
   }
   
   .map-wrap {
     border-radius: var(--r-lg);
     overflow: hidden;
     height: 250px;
     margin-top: 16px;
     border: 1px solid var(--border);
   }
   
   #school-map {
     height: 100%;
   }
   
   .school-sidebar-card {
     background: var(--surface-1);
     border: 1px solid var(--border);
     border-radius: var(--r-lg);
     padding: 20px;
     margin-bottom: 16px;
   }
   
   .contact-btn {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 12px 16px;
     border-radius: var(--r-sm);
     font-size: .88rem;
     font-weight: 600;
     transition: all var(--t-fast);
     margin-bottom: 8px;
     border: 1px solid var(--border);
     color: var(--text-2);
   }
   
   .contact-btn:hover {
     border-color: var(--rot);
     color: var(--text-1);
     background: rgba(204, 0, 0, .05);
   }
   
   .contact-btn i {
     color: var(--rot);
     width: 16px;
   }
   
   /* ================================================================
      ABOUT PAGE
      ================================================================ */
   .about-hero {
     position: relative;
     padding: 80px 0;
     overflow: hidden;
     background: var(--surface-1);
     border-bottom: 1px solid var(--border);
   }
   
   .about-body {
     display: grid;
     grid-template-columns: 1fr 360px;
     gap: 48px;
     align-items: center;
   }
   
   .about-img {
     border-radius: var(--r-xl);
     overflow: hidden;
     border: 1px solid var(--border);
   }
   
   .about-img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
   }
   
   .feature-list {
     display: flex;
     flex-direction: column;
     gap: 16px;
     margin-top: 24px;
   }
   
   .feature-item {
     display: flex;
     gap: 14px;
     align-items: flex-start;
   }
   
   .feature-icon {
     width: 40px;
     height: 40px;
     border-radius: var(--r-md);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: .9rem;
     flex-shrink: 0;
   }
   
   .fi-red {
     background: rgba(204, 0, 0, .12);
     color: var(--rot);
   }
   
   .fi-gold {
     background: rgba(255, 204, 0, .12);
     color: var(--gold-dark);
   }
   
   .fi-blue {
     background: rgba(59, 130, 246, .1);
     color: #60a5fa;
   }
   
   .feature-text h4 {
     font-size: .95rem;
     margin-bottom: 4px;
   }
   
   .feature-text p {
     font-size: .85rem;
     color: var(--text-2);
     line-height: 1.5;
   }
   
   /* ================================================================
      BUTTONS
      ================================================================ */
   .btn {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 12px 24px;
     border-radius: var(--r-full);
     font-weight: 700;
     font-size: .9rem;
     font-family: var(--font-body);
     cursor: pointer;
     border: none;
     transition: all var(--t-fast);
     text-decoration: none;
   }
   
   .btn-primary {
     background: var(--rot);
     color: #fff;
   }
   
   .btn-primary:hover {
     background: var(--rot-dark);
     transform: translateY(-1px);
     box-shadow: var(--shadow-rot);
   }
   
   .btn-gold {
     background: var(--gold);
     color: #000;
   }
   
   .btn-gold:hover {
     background: var(--gold-dark);
     transform: translateY(-1px);
     box-shadow: var(--shadow-gold);
   }
   
   .btn-ghost {
     background: transparent;
     color: var(--text-1);
     border: 1.5px solid rgba(255, 255, 255, .2);
   }
   
   .btn-ghost:hover {
     border-color: rgba(255, 255, 255, .5);
     background: rgba(255, 255, 255, .05);
   }
   
   .btn-outline {
     background: transparent;
     color: var(--rot);
     border: 1.5px solid var(--rot);
   }
   
   .btn-outline:hover {
     background: var(--rot);
     color: #fff;
   }
   
   /* ================================================================
      FOOTER
      ================================================================ */
   footer {
     background: var(--surface-1);
     border-top: 1px solid var(--border);
     padding: 60px 0 24px;
   }
   
   .footer-grid {
     display: grid;
     grid-template-columns: 2fr 1fr 1fr 1fr;
     gap: 40px;
     margin-bottom: 40px;
   }
   
   .footer-brand p {
     color: var(--text-3);
     font-size: .85rem;
     margin-top: 12px;
     line-height: 1.6;
     max-width: 260px;
   }
   
   .footer-col h4 {
     font-size: .8rem;
     font-weight: 700;
     letter-spacing: .08em;
     text-transform: uppercase;
     color: var(--text-3);
     margin-bottom: 14px;
   }
   
   .footer-col a {
     display: table;
     font-size: .85rem;
     color: var(--text-3);
     margin-bottom: 8px;
     transition: color var(--t-fast);
   }
   
   .footer-col a:hover {
     color: var(--gold);
   }
   
   .footer-bottom {
     border-top: 1px solid var(--border);
     padding-top: 24px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 16px;
     flex-wrap: wrap;
   }
   
   .footer-bottom p {
     font-size: .8rem;
     color: var(--text-3);
   }
   
   .footer-flag {
     display: flex;
     gap: 2px;
     border-radius: 3px;
     overflow: hidden;
     height: 16px;
   }
   
   .footer-flag span {
     width: 20px;
     display: block;
   }
   
   /* ================================================================
      RESPONSIVE
      ================================================================ */
   @media (max-width: 1100px) {
     .grid-4 {
       grid-template-columns: repeat(3, 1fr);
     }
   
     .edu-grid {
       grid-template-columns: repeat(2, 1fr);
     }
   
     .charts-grid {
       grid-template-columns: 1fr;
     }
   
     .footer-grid {
       grid-template-columns: 1fr 1fr;
       gap: 28px;
     }
   }
   
   @media (max-width: 900px) {
     .search-layout {
       grid-template-columns: 1fr;
     }
   
     .school-body {
       grid-template-columns: 1fr;
     }
   
     .stats-grid {
       grid-template-columns: repeat(2, 1fr);
     }
   
     .about-body {
       grid-template-columns: 1fr;
     }
   }
   
   @media (max-width: 768px) {
     .desktop-nav {
       display: none;
     }
   
     .menu-toggle {
       display: flex;
     }
   
     .grid-4 {
       grid-template-columns: repeat(2, 1fr);
     }
   
     .view-toolbar {
       flex-wrap: wrap;
     }
   
     .filter-input-wrap {
       max-width: none;
     }
   
     .grid-3 {
       grid-template-columns: 1fr;
     }
   
     .grid-2 {
       grid-template-columns: 1fr;
     }
   
     .hero-stats {
       gap: 8px;
       flex-wrap: nowrap;
       justify-content: center;
     }
     .hero-stat {
       min-width: 0;
       flex: 1;
     }
     .hero-stat strong {
       font-size: 1rem;
     }
     .hero-stat span {
       font-size: .65rem;
       overflow-wrap: break-word;
       word-break: break-word;
     }
   
     .stats-grid {
       grid-template-columns: 1fr;
     }
   
     .germany-banner {
       padding: 28px;
     }
   
     .section {
       padding: 56px 0;
     }
   
     .footer-grid {
       grid-template-columns: 1fr;
     }
   
     .school-hero-inner {
       flex-direction: column;
     }

     /* Evitar corte de contenido en página de colegio */
     .school-main, .school-hero-body, .info-card {
       min-width: 0;
       overflow: visible;
     }
     .info-row {
       grid-template-columns: minmax(0, 100px) minmax(0, 1fr);
       gap: 6px 12px;
     }
     .info-row-label {
       min-width: 0;
     }
     .info-row-value {
       min-width: 0;
       word-break: break-word;
       overflow-wrap: break-word;
     }
     .info-row-value a {
       word-break: break-all;
     }
     .presentation-block {
       overflow-wrap: break-word;
       word-break: break-word;
     }
     .school-breadcrumb {
       flex-wrap: wrap;
       overflow-wrap: break-word;
     }
     .school-hero-body > div,
     .school-hero-body span {
       min-width: 0;
       overflow-wrap: break-word;
       word-break: break-word;
     }
   
     .breadcrumb {
       flex-wrap: wrap;
     }

     /* Comp-bar: mejoras móvil (768px y menos) */
     .comp-bar {
       padding: 12px 16px;
       padding-bottom: max(12px, env(safe-area-inset-bottom));
       gap: 12px;
       flex-direction: column;
       align-items: stretch;
     }
     .comp-bar-left {
       flex-wrap: wrap;
       gap: 8px;
       min-width: 0;
     }
     .comp-bar-left > span:first-child {
       font-size: .85rem;
     }
     .comp-bar-count {
       padding: 2px 10px;
       font-size: .8rem;
     }
     .comp-bar-schools {
       width: 100%;
       order: 3;
       gap: 6px;
       max-height: 60px;
       overflow-y: auto;
       -webkit-overflow-scrolling: touch;
     }
     .comp-bar-pill {
       max-width: 140px;
       padding: 3px 8px;
       font-size: .72rem;
     }
     .comp-bar-right {
       flex-wrap: wrap;
       gap: 8px;
       justify-content: flex-end;
     }
     .comp-bar-btn {
       padding: 8px 14px;
       font-size: .8rem;
       flex: 1;
       min-width: 0;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       white-space: normal;
       overflow-wrap: break-word;
     }
     .comp-bar-clear {
       padding: 6px 12px;
       font-size: .78rem;
     }
     .comp-toast {
       left: 16px;
       right: 16px;
       top: 70px;
       min-width: 0;
       max-width: none;
       padding: 10px 14px;
       font-size: .82rem;
     }
   }
   
   @media (max-width: 480px) {
     .hero-stats {
       gap: 2px;
     }
     .hero-stat strong {
       font-size: 1.2rem;
     }
     .hero-stat span {
       font-size: 0.65rem;
     }
     .grid-4 {
       grid-template-columns: 1fr;
     }
   
     .school-grid .school-card {
       padding: 16px 14px;
     }
   
     .school-grid .school-card-tags {
       top: 16px;
       right: 14px;
     }
   
     .school-grid.list-view .school-card {
       grid-template-columns: auto 1fr;
       grid-template-rows: auto auto;
       gap: 10px 12px;
       padding: 12px 14px;
     }
   
     .school-grid.list-view .school-card-icon {
       grid-row: 1;
     }
   
     .school-grid.list-view .school-card-body {
       grid-row: 1;
       min-width: 0;
       overflow-wrap: break-word;
       word-break: break-word;
     }
   
     .school-grid.list-view .school-card-action {
       grid-column: 1 / -1;
       grid-row: 2;
       margin-left: 0;
       padding-top: 10px;
       border-top: 1px solid var(--border);
       justify-content: flex-start;
     }
   
     .school-grid.list-view .school-card-line {
       flex-wrap: wrap;
     }
   
     .school-grid.list-view .school-card-tags {
       flex-wrap: wrap;
     }
   
     .school-grid .school-card-action .btn-comparator-card .btn-comp-txt {
       display: none;
     }
   
     .container {
       padding-left: 16px;
       padding-right: 16px;
     }
   
     .school-hero {
       padding: 28px 0;
     }
   
     .hero-search {
       flex-direction: column;
       border-radius: var(--r-lg);
     }
   
     .hero-search input {
       border-bottom: 1px solid rgba(255, 255, 255, .1);
     }
   
     .hero-search button {
       border-radius: 0 0 var(--r-lg) var(--r-lg);
       width: 100%;
       justify-content: center;
     }

     /* Bar chart: evitar overflow en móvil */
     .bar-label {
       min-width: 0;
       max-width: 100px;
       font-size: .72rem;
     }
     .bar-value {
       min-width: 36px;
       font-size: .7rem;
     }
   }
   
   /* ================================================================
      MISC / UTILITIES
      ================================================================ */
   .text-gold {
     color: var(--gold);
   }
   
   .text-rot {
     color: var(--rot);
   }
   
   .text-muted {
     color: var(--text-2);
   }
   
   .mt-1 {
     margin-top: 8px;
   }
   
   .mt-2 {
     margin-top: 16px;
   }
   
   .mt-3 {
     margin-top: 24px;
   }
   
   .mb-1 {
     margin-bottom: 8px;
   }
   
   .mb-2 {
     margin-bottom: 16px;
   }
   
   .mb-3 {
     margin-bottom: 24px;
   }
   
   /* Loading skeleton */
   .skeleton {
     background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
     background-size: 200% 100%;
     animation: shimmer 1.5s infinite;
     border-radius: var(--r-sm);
   }
   
   @keyframes shimmer {
     0% {
       background-position: 200% 0;
     }
   
     100% {
       background-position: -200% 0;
     }
   }
   
   /* Breadcrumb */
   .breadcrumb {
     display: flex;
     align-items: center;
     gap: 6px;
     font-size: .82rem;
     color: var(--text-3);
     margin-bottom: 24px;
     flex-wrap: wrap;
   }
   
   .breadcrumb a {
     color: var(--text-2);
     transition: color var(--t-fast);
   }
   
   .breadcrumb a:hover {
     color: var(--gold);
   }
   
   .breadcrumb .sep {
     color: var(--surface-4);
   }
   
   /* Map marker */
   .leaflet-popup-content-wrapper {
     background: var(--surface-2) !important;
     border: 1px solid var(--border) !important;
     color: var(--text-1) !important;
     border-radius: var(--r-md) !important;
     box-shadow: var(--shadow-md) !important;
   }
   
   .leaflet-popup-tip {
     background: var(--surface-2) !important;
   }
   
   /* ================================================================
      LIGHT MODE — SPECIFIC OVERRIDES
      ================================================================ */
   
   /* Header light */
   header {
     background: rgba(255, 255, 255, .92);
   }
   
   [data-theme="dark"] header {
     background: rgba(13, 13, 13, .92);
   }
   
   /* Logo text — dark text on light, bright on dark */
   .logo-text strong {
     background: linear-gradient(135deg, #111 40%, var(--rot));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
   }
   
   [data-theme="dark"] .logo-text strong {
     background: linear-gradient(135deg, #fff 40%, var(--gold));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
   }
   
   /* Flag black stripe — visible on light mode */
   .f-black {
     background: #222222;
     border: none;
   }
   
   [data-theme="dark"] .f-black {
     background: #1a1a1a;
     border: 1px solid #333;
   }
   
   /* Drawer dark stripe in light mode */
   .tc-k {
     background: #222;
   }
   
   [data-theme="dark"] .tc-k {
     background: #1f1f1f;
   }
   
   /* Hero — keep it always dark (image + overlay) */
   .hero-home .hero-content h1 {
     color: #fff;
   }
   
   .hero-home .hero-content p {
     color: rgba(255, 255, 255, .78);
   }
   
   .hero-stat span {
     color: rgba(255, 255, 255, .55);
   }
   
   /* Hero search — always light-on-dark since hero bg is always dark */
   .hero-search input[type="text"] {
     color: #fff;
   }
   
   .hero-search input::placeholder {
     color: rgba(255, 255, 255, .45);
   }
   
   /* AJAX dropdown — theme aware */
   .ajax-dropdown {
     background: var(--surface-1);
     border-color: var(--border-hover);
   }
   
   /* Spinner border in light */
   .spinner-ring {
     border-color: var(--surface-3);
     border-top-color: var(--gold);
   }
   
   /* Section alt */
   .section-alt {
     background: var(--surface-1);
   }
   
   /* Stat card number gradient — same on both */
   .stat-card-num {
     background: linear-gradient(135deg, var(--gold), var(--rot));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
   }
   
   /* Germany banner — always dark themed */
   .germany-banner {
     background: linear-gradient(135deg, #1a1a1a 0%, #2a0000 100%);
     border-color: rgba(204, 0, 0, .25);
   }
   
   [data-theme="dark"] .germany-banner {
     background: linear-gradient(135deg, #0d0d0d 0%, #1a0000 100%);
   }
   
   /* School hero — always dark */
   .school-hero {
     background: linear-gradient(135deg, #1a1a1a 0%, #2a0000 100%);
   }
   
   [data-theme="dark"] .school-hero {
     background: linear-gradient(135deg, var(--surface-1) 0%, #1a0000 100%);
   }
   
   .school-breadcrumb {
     color: rgba(255, 255, 255, .55);
   }
   
   .school-hero-body h1 {
     color: #fff;
   }
   
   .school-breadcrumb a {
     color: rgba(255, 255, 255, .75);
   }
   
   .school-breadcrumb a:hover {
     color: var(--gold);
   }
   
   .school-type-badge {
     color: var(--gold);
   }
   
   /* About hero */
   .about-hero {
     background: var(--surface-1);
   }
   
   /* Map sidebar */
   .map-sidebar {
     background: var(--surface-1) !important;
     border-color: var(--border) !important;
   }
   
   /* Chart card */
   .chart-card {
     background: var(--surface-1);
   }
   
   /* Search sidebar */
   .search-sidebar {
     background: var(--surface-1);
   }
   
   /* Bundesland hero strip */
   [data-theme="dark"] section[style*="linear-gradient(135deg,var(--surface-1)"] {
     background: linear-gradient(135deg, var(--surface-1) 0%, #1a0000 100%) !important;
   }
   
   /* ── THEME TOGGLE BUTTON ─────────────────────────────────────────────── */
   .theme-toggle {
     width: 40px;
     height: 40px;
     border-radius: var(--r-full);
     border: 1.5px solid var(--border);
     background: var(--surface-2);
     color: var(--text-2);
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: .9rem;
     transition: all var(--t-fast);
     flex-shrink: 0;
     position: relative;
     overflow: hidden;
   }
   
   .theme-toggle:hover {
     border-color: var(--rot);
     color: var(--rot);
     background: rgba(204, 0, 0, .06);
     transform: rotate(15deg);
   }
   
   .theme-toggle .icon-sun,
   .theme-toggle .icon-moon {
     position: absolute;
     transition: transform .35s ease, opacity .25s ease;
   }
   
   .theme-toggle .icon-moon {
     opacity: 0;
     transform: translateY(12px);
   }
   
   .theme-toggle .icon-sun {
     opacity: 1;
     transform: translateY(0);
   }
   
   [data-theme="dark"] .theme-toggle .icon-sun {
     opacity: 0;
     transform: translateY(-12px);
   }
   
   [data-theme="dark"] .theme-toggle .icon-moon {
     opacity: 1;
     transform: translateY(0);
   }
   
   /* ── LIGHT MODE extra polish ─────────────────────────────────────────── */
   /* Card hover shadows are subtler */
   :root .school-card:hover {
     box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
   }
   
   :root .bl-card:hover {
     box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
   }
   
   :root .stat-card:hover {
     box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
   }
   
   /* Leaflet map popup light mode */
   :root .leaflet-popup-content-wrapper {
     color: #111 !important;
     background: #fff !important;
   }
   
   [data-theme="dark"] .leaflet-popup-content-wrapper {
     color: #f5f5f5 !important;
     background: #1f1f1f !important;
   }
   
   /* Search results top panel light */
   .search-results-top {
     background: var(--surface-1);
     border-color: var(--border);
   }
   
   .search-main-input {
     background: var(--surface-0);
     border-color: var(--border);
   }
   
   .search-main-input input {
     color: var(--text-1);
   }
   
   /* Filter inputs light */
   .filter-group input[type="text"],
   .filter-group select {
     color: var(--text-1);
   }
   
   /* Bar chart label color */
   .bar-label {
     color: var(--text-2);
   }
   
   .bar-value {
     color: var(--text-3);
   }
   
   /* Info card rows */
   .info-row-label {
     color: var(--text-3);
   }
   
   .info-row-value {
     color: var(--text-1);
   }
   
   /* Contact btn light */
   .contact-btn {
     color: var(--text-2);
     border-color: var(--border);
   }
   
   .contact-btn:hover {
     color: var(--text-1);
     border-color: var(--rot);
   }
   /* ── About page v2 layout ─────────────────────────────────────── */
   .about-hero-v2 {
      background: linear-gradient(135deg, #0d0d0d 0%, #1a0000 60%, #0d0d2b 100%);
      padding: 56px 0 48px;
      color: #fff;
      position: relative;
      overflow: hidden;
   }
   .about-hero-v2::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 50% 0%, rgba(204,0,0,.15) 0%, transparent 65%);
      pointer-events: none;
   }
   .about-hero-v2 .container {
      position: relative;
      z-index: 1;
   }

   .about-content-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      align-items: center;
      margin-top: 48px;
   }
   .about-content-grid img {
      width: 100%;
      border-radius: var(--r-xl);
      object-fit: cover;
      box-shadow: var(--shadow-lg);
      max-height: 400px;
   }

   .about-values-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
   }
   .about-value-card {
      background: var(--surface-1);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: 28px 24px;
      text-align: center;
      transition: all var(--t-base);
      display: flex;
      flex-direction: column;
      align-items: center;
   }
   .about-value-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-md);
      border-color: var(--border-hover);
   }
   .about-value-icon {
      width: 52px;
      height: 52px;
      border-radius: var(--r-md);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      margin-bottom: 16px;
   }
   .about-value-card h3 {
      font-size: .95rem;
      margin-bottom: 8px;
   }
   .about-value-card p {
      font-size: .82rem;
      color: var(--text-2);
      line-height: 1.5;
      flex: 1;
   }
   .about-team-section {
      display: grid;
      grid-template-columns: 380px 1fr;
      gap: 40px;
      align-items: center;
   }
   .about-team-section img {
      width: 100%;
      border-radius: var(--r-xl);
      object-fit: cover;
      box-shadow: var(--shadow-lg);
   }
   .about-team-text h2 {
      margin-bottom: 16px;
   }
   .about-team-text p {
      color: var(--text-2);
      font-size: .92rem;
      line-height: 1.7;
      margin-bottom: 12px;
   }

   @media (max-width: 900px) {
      .about-content-grid {
         grid-template-columns: 1fr;
      }
      .about-values-grid {
         grid-template-columns: 1fr;
      }
      .about-team-section {
         grid-template-columns: 1fr;
      }
   }

   /* ── Legal pages (AGB/Terms) ──────────────────────────────────── */
   .legal-hero {
      background: linear-gradient(135deg,#1a1a1a 0%,#2a0000 60%,#1a0000 100%);
      padding: 52px 0 40px;
   }

/* ================================================================
   SCHULRANKING — Complete Styles
   ================================================================ */

/* ── Breadcrumb ────────────────────────────────────────────────── */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  font-size: .82rem;
  color: var(--text-3);
  flex-wrap: wrap;
}
.breadcrumb li { display: flex; align-items: center; gap: 6px; }
.breadcrumb li a { color: var(--text-2); transition: color var(--t-fast); }
.breadcrumb li a:hover { color: var(--rot); }
.breadcrumb li[aria-current="page"] { color: var(--text-1); font-weight: 600; }
.bc-sep { font-size: .65rem; color: var(--text-3); }

/* ── Ranking Hero (main page) ─────────────────────────────────── */
.ranking-hero {
  position: relative;
  background: linear-gradient(135deg, #0d0000 0%, #1a0000 40%, #250000 70%, #1a0a00 100%);
  padding: 80px 0 0;
  overflow: hidden;
}
.ranking-hero-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(204,0,0,.18) 0%, transparent 70%),
              radial-gradient(ellipse 40% 40% at 80% 80%, rgba(212,160,0,.1) 0%, transparent 60%);
  pointer-events: none;
}
.ranking-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding-bottom: 60px;
  max-width: 800px;
  margin: 0 auto;
}
.ranking-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(212,160,0,.15);
  border: 1px solid rgba(212,160,0,.35);
  color: var(--gold);
  padding: 6px 18px;
  border-radius: var(--r-full);
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 24px;
}
.ranking-hero-content h1 {
  color: #fff;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  margin-bottom: 16px;
  line-height: 1.1;
}
.ranking-hero-title-line1 { display: block; }
.ranking-hero-title-line2 {
  display: block;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ranking-hero-sub {
  color: rgba(255,255,255,.75);
  font-size: clamp(.95rem, 2vw, 1.1rem);
  margin-bottom: 36px;
  line-height: 1.7;
}
.ranking-hero-sub strong { color: var(--gold); -webkit-text-fill-color: var(--gold); }
.ranking-hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.rh-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-lg);
  padding: 14px 22px;
  min-width: 110px;
}
.rh-stat i { color: var(--gold); font-size: .85rem; }
.rh-stat strong { color: #fff; font-size: 1.35rem; font-family: var(--font-head); font-weight: 800; }
.rh-stat span { color: rgba(255,255,255,.6); font-size: .75rem; font-weight: 500; }
.ranking-hero-wave {
  position: relative;
  margin-top: -1px;
}
.ranking-hero-wave svg { display: block; width: 100%; height: 60px; }

/* ── City Quick-Links ─────────────────────────────────────────── */
.ranking-city-quicklinks {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.ranking-city-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 14px 14px;
  text-align: center;
  transition: all var(--t-base);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.ranking-city-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--rot), var(--gold));
  transform: scaleX(0);
  transition: transform var(--t-base);
  transform-origin: left;
}
.ranking-city-card:hover { border-color: var(--rot); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.ranking-city-card:hover::before { transform: scaleX(1); }
.rcc-emoji { font-size: 1.8rem; line-height: 1; }
.rcc-name { font-family: var(--font-head); font-weight: 800; font-size: 1rem; color: var(--text-1); }
.rcc-bl { font-size: .72rem; color: var(--text-3); }
.rcc-count { font-size: .75rem; color: var(--text-2); font-weight: 600; }
.rcc-count i { color: var(--rot); margin-right: 3px; }
.rcc-arrow {
  position: absolute;
  bottom: 10px; right: 12px;
  width: 24px; height: 24px;
  background: rgba(204,0,0,.08);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--rot);
  font-size: .7rem;
  transition: all var(--t-fast);
}
.ranking-city-card:hover .rcc-arrow { background: var(--rot); color: #fff; }

/* ── Schultyp Cards ──────────────────────────────────────────── */
.ranking-type-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.ranking-type-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px 18px;
  transition: all var(--t-base);
  position: relative;
  overflow: hidden;
}
.ranking-type-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(var(--tc-color-rgb, 204,0,0),.04) 0%, transparent 70%);
  pointer-events: none;
}
.ranking-type-card:hover {
  border-color: var(--tc-color, var(--rot));
  box-shadow: 0 8px 30px color-mix(in srgb, var(--tc-color, var(--rot)) 20%, transparent);
  transform: translateY(-2px);
}
.rtc-icon {
  width: 42px; height: 42px;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  background: color-mix(in srgb, var(--tc-color, var(--rot)) 12%, transparent);
  color: var(--tc-color, var(--rot));
  flex-shrink: 0;
}
.rtc-name { font-family: var(--font-head); font-weight: 800; font-size: .95rem; color: var(--text-1); }
.rtc-count { font-size: .78rem; color: var(--text-3); font-weight: 600; }
.rtc-cta {
  font-size: .75rem;
  color: var(--tc-color, var(--rot));
  font-weight: 700;
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 5px;
  opacity: 0;
  transform: translateX(-6px);
  transition: all var(--t-fast);
}
.ranking-type-card:hover .rtc-cta { opacity: 1; transform: translateX(0); }

/* ── Score Criteria Grid ─────────────────────────────────────── */
.score-criteria-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.score-criterion {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 16px;
  transition: all var(--t-fast);
}
.score-criterion:hover { border-color: var(--border-hover); box-shadow: var(--shadow-sm); }
.score-criterion.score-total {
  border-color: rgba(212,160,0,.3);
  background: linear-gradient(135deg, rgba(212,160,0,.04), var(--surface-1));
}
.sc-icon {
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem;
  flex-shrink: 0;
}
.sc-body { flex: 1; }
.sc-body strong { display: block; font-size: .88rem; font-weight: 700; color: var(--text-1); margin-bottom: 2px; }
.sc-pts {
  display: inline-block;
  background: rgba(204,0,0,.1);
  color: var(--rot);
  border-radius: var(--r-full);
  padding: 2px 10px;
  font-size: .72rem;
  font-weight: 800;
  margin-bottom: 6px;
}
.sc-pts-max { background: rgba(212,160,0,.15); color: var(--gold-dark); }
.sc-body p { font-size: .78rem; color: var(--text-3); line-height: 1.55; margin: 0; }

/* ── Ranking Controls ────────────────────────────────────────── */
.ranking-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.ranking-controls-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ranking-controls-right { display: flex; align-items: center; gap: 8px; }
.ranking-select {
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-1);
  color: var(--text-1);
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--t-fast);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%23999'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}
.ranking-select:focus { outline: none; border-color: var(--rot); }

/* ── Ranking Table ────────────────────────────────────────────── */
.ranking-table-wrap {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.ranking-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}
.ranking-table thead tr {
  background: var(--surface-2);
  border-bottom: 2px solid var(--border);
}
.ranking-table th {
  padding: 14px 16px;
  text-align: left;
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
  user-select: none;
}
.ranking-table th.sortable { cursor: pointer; transition: color var(--t-fast); }
.ranking-table th.sortable:hover { color: var(--text-1); }
.ranking-table th.active { color: var(--rot); }
.sort-icon { margin-left: 4px; font-size: .7rem; }
.ranking-table tbody tr { border-bottom: 1px solid var(--border); transition: background var(--t-fast); }
.ranking-table tbody tr:last-child { border-bottom: none; }
.ranking-table tbody tr:hover { background: var(--surface-2); }
.ranking-table td { padding: 12px 16px; vertical-align: middle; }

/* Table columns */
.col-rank { width: 56px; text-align: center; }
.col-action { width: 90px; text-align: right; }
.col-score { width: 110px; }
.col-badges { width: 100px; }
.col-type { max-width: 180px; white-space: nowrap; }

.rank-medal { font-size: 1.3rem; }
.rank-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: var(--surface-3);
  border-radius: 50%;
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-2);
}
.ranking-city-link, .ranking-school-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--text-1);
  font-weight: 600;
  transition: color var(--t-fast);
}
.ranking-city-link i { color: var(--rot); margin-right: 6px; }
.ranking-city-link:hover { color: var(--rot); }
.ranking-school-link:hover strong { color: var(--rot); }
.ranking-school-link small { font-size: .75rem; color: var(--text-3); font-weight: 400; }
.bl-link-small { color: var(--text-3); font-size: .8rem; font-weight: 500; transition: color var(--t-fast); }
.bl-link-small:hover { color: var(--rot); }
.bl-link-small i { margin-right: 3px; }

/* Mini bar in table */
.mini-bar-wrap { display: flex; align-items: center; gap: 8px; }
.mini-bar {
  flex: 1;
  height: 6px;
  background: var(--surface-3);
  border-radius: 3px;
  overflow: hidden;
  max-width: 80px;
}
.mini-bar-fill {
  height: 100%;
  width: var(--bar-pct, 0%);
  border-radius: 3px;
  transition: width .6s ease;
}
.mini-bar-fill.web   { background: #3b82f6; }
.mini-bar-fill.email { background: #10b981; }
.mini-bar-fill.public{ background: #8b5cf6; }
.mini-bar-wrap > span { font-size: .78rem; font-weight: 700; color: var(--text-2); min-width: 32px; text-align: right; }

/* Detail ranking button */
.btn-ranking-detail {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: rgba(204,0,0,.08);
  border: 1px solid rgba(204,0,0,.2);
  border-radius: var(--r-full);
  color: var(--rot);
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
  transition: all var(--t-fast);
}
.btn-ranking-detail:hover { background: var(--rot); color: #fff; }

/* ── Score cell ──────────────────────────────────────────────── */
.score-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}
.score-bar-mini {
  flex: 1;
  height: 6px;
  background: var(--surface-3);
  border-radius: 3px;
  overflow: hidden;
  max-width: 60px;
}
.score-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .6s ease;
}
.score-num {
  font-size: .82rem;
  font-weight: 800;
  min-width: 28px;
  text-align: right;
}

/* ── Contact badges ──────────────────────────────────────────── */
.contact-badges { display: flex; gap: 4px; }
.cbadge {
  width: 28px; height: 28px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem;
  transition: all var(--t-fast);
  text-decoration: none;
}
.cbadge.web   { background: rgba(59,130,246,.12); color: #3b82f6; }
.cbadge.email { background: rgba(16,185,129,.12); color: #10b981; }
.cbadge.phone { background: rgba(245,158,11,.12); color: #d97706; }
.cbadge.off   { opacity: .25; cursor: default; }
.cbadge.web:not(.off):hover   { background: #3b82f6; color: #fff; }
.cbadge.email:not(.off):hover { background: #10b981; color: #fff; }
.cbadge.phone:not(.off):hover { background: #d97706; color: #fff; }

/* ── Type pill ───────────────────────────────────────────────── */
.type-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--r-full);
  background: rgba(204,0,0,.08);
  border: 1px solid rgba(204,0,0,.18);
  color: var(--rot);
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}
.type-badge-link:hover .type-pill { background: var(--rot); color: #fff; border-color: var(--rot); }
.type-badge-link { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; flex-wrap: nowrap; }
.type-extra {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 7px;
  border-radius: var(--r-full);
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text-3);
  font-size: .68rem;
  font-weight: 700;
  cursor: help;
  white-space: nowrap;
}

/* ── Ranking Detail Hero ─────────────────────────────────────── */
.ranking-detail-hero {
  background: linear-gradient(135deg, #0d0000 0%, #1a0000 50%, #250500 100%);
  padding: 48px 0;
  border-bottom: 1px solid rgba(204,0,0,.2);
}
.rdh-inner {
  display: flex;
  align-items: center;
  gap: 28px;
}
.rdh-icon {
  width: 72px; height: 72px;
  background: rgba(204,0,0,.15);
  border: 1px solid rgba(204,0,0,.3);
  border-radius: var(--r-xl);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  color: var(--rot);
  flex-shrink: 0;
}
.rdh-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(212,160,0,.12);
  border: 1px solid rgba(212,160,0,.3);
  color: var(--gold);
  padding: 4px 14px;
  border-radius: var(--r-full);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 10px;
}
.rdh-content h1 {
  color: #fff;
  font-size: clamp(1.6rem, 3.5vw, 2.5rem);
  margin-bottom: 10px;
}
.rdh-content h1 em { color: var(--gold); font-style: normal; }
.rdh-content p { color: rgba(255,255,255,.65); font-size: .95rem; }

/* ── Kacheln (stat tiles) ────────────────────────────────────── */
.ranking-kacheln {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}
.rankk {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 12px;
  text-align: center;
  transition: all var(--t-fast);
}
.rankk:hover { border-color: var(--border-hover); box-shadow: var(--shadow-sm); }
.rankk-icon { font-size: 1.2rem; margin-bottom: 4px; }
.rankk strong { font-family: var(--font-head); font-size: 1.4rem; font-weight: 800; color: var(--text-1); }
.rankk span { font-size: .72rem; color: var(--text-3); text-align: center; }

/* ── Detail Filters ──────────────────────────────────────────── */
.ranking-detail-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.rdf-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rdf-right { display: flex; align-items: center; }
.ranking-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-1);
  color: var(--text-2);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-fast);
  user-select: none;
}
.ranking-checkbox-label:has(input:checked) {
  border-color: var(--rot);
  background: rgba(204,0,0,.06);
  color: var(--rot);
}
.ranking-checkbox-label i { font-size: .78rem; }
.ranking-checkbox { display: none; }

/* ── Ranking CTA block ───────────────────────────────────────── */
.ranking-cta-block {
  background: linear-gradient(135deg, #1a0000, #2a0500);
  border: 1px solid rgba(204,0,0,.25);
  border-radius: var(--r-xl);
  padding: 48px 40px;
  text-align: center;
  color: #fff;
}
.rcta-icon {
  width: 64px; height: 64px;
  background: rgba(204,0,0,.2);
  border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  color: var(--rot);
  margin: 0 auto 20px;
}
.ranking-cta-block h2 { color: #fff; margin-bottom: 12px; }
.ranking-cta-block p { color: rgba(255,255,255,.7); max-width: 540px; margin: 0 auto 28px; }
.rcta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── Pagination ──────────────────────────────────────────────── */
.pagination-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.pag-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-1);
  color: var(--text-2);
  font-size: .85rem;
  font-weight: 600;
  transition: all var(--t-fast);
  text-decoration: none;
}
.pag-btn:hover { border-color: var(--rot); color: var(--rot); background: rgba(204,0,0,.04); }
.pag-btn.active { background: var(--rot); color: #fff; border-color: var(--rot); }
.pag-gap { padding: 0 4px; color: var(--text-3); font-size: .85rem; }

/* ── Related Rankings ────────────────────────────────────────── */
.related-rankings-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.related-rank-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 18px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  text-align: center;
  transition: all var(--t-base);
  color: var(--text-1);
}
.related-rank-card i { font-size: 1.6rem; color: var(--rot); }
.related-rank-card strong { font-size: .95rem; font-weight: 700; }
.related-rank-card span { font-size: .78rem; color: var(--text-3); }
.related-rank-card:hover { border-color: var(--rot); box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* ── FAQ styles for ranking page ─────────────────────────────── */
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--t-fast);
  background: var(--surface-1);
}
.faq-item.open { border-color: rgba(204,0,0,.3); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: .9rem;
  font-weight: 600;
  color: var(--text-1);
  font-family: var(--font-body);
  transition: background var(--t-fast);
}
.faq-q:hover { background: var(--surface-2); }
.faq-arrow { font-size: .7rem; color: var(--text-3); transition: transform var(--t-fast); flex-shrink: 0; }
.faq-item.open .faq-arrow { transform: rotate(90deg); color: var(--rot); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
  font-size: .85rem;
  color: var(--text-2);
  line-height: 1.7;
}
.faq-a p { padding: 0 20px 16px; margin: 0; }
.faq-item.open .faq-a { max-height: 200px; }

/* ── Ranking Responsive ─────────────────────────────────────── */
@media (max-width: 1100px) {
  .ranking-city-quicklinks { grid-template-columns: repeat(4, 1fr); }
  .score-criteria-grid { grid-template-columns: repeat(3, 1fr); }
  .ranking-type-grid { grid-template-columns: repeat(3, 1fr); }
  .ranking-kacheln { grid-template-columns: repeat(3, 1fr); }
  .related-rankings-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .ranking-hero { padding: 56px 0 0; }
  .ranking-hero-stats { gap: 6px; }
  .rh-stat { min-width: 90px; padding: 10px 14px; }
  .ranking-city-quicklinks { grid-template-columns: repeat(2, 1fr); }
  .ranking-type-grid { grid-template-columns: repeat(2, 1fr); }
  .score-criteria-grid { grid-template-columns: repeat(2, 1fr); }
  .ranking-kacheln { grid-template-columns: repeat(2, 1fr); }
  .rdh-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .rdh-icon { width: 52px; height: 52px; font-size: 1.4rem; }
  .ranking-table th.col-email, .ranking-table th.col-public,
  .ranking-table td.col-email, .ranking-table td.col-public { display: none; }
  .ranking-table th.col-bl, .ranking-table td.col-bl { display: none; }
  .related-rankings-grid { grid-template-columns: repeat(2, 1fr); }
  .ranking-cta-block { padding: 32px 20px; }
  .rcta-actions { flex-direction: column; align-items: stretch; }
  .ranking-detail-filters { flex-direction: column; align-items: flex-start; }
  .rdf-left { width: 100%; }
}
@media (max-width: 480px) {
  .ranking-city-quicklinks { grid-template-columns: repeat(2, 1fr); }
  .ranking-type-grid { grid-template-columns: repeat(1, 1fr); }
  .score-criteria-grid { grid-template-columns: 1fr; }
  .ranking-kacheln { grid-template-columns: repeat(3, 1fr); }
  .related-rankings-grid { grid-template-columns: 1fr; }
  .ranking-table th.col-web, .ranking-table td.col-web { display: none; }
  .ranking-table th.col-score, .ranking-table td.col-score { display: none; }
  .col-type { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
  .type-pill { max-width: 130px; overflow: hidden; text-overflow: ellipsis; display: inline-block; }
  .ranking-table { font-size: .8rem; }
  .ranking-table td, .ranking-table th { padding: 10px 8px; }
}

/* ================================================================
   SCHULEN IN MEINER NÄHE — Complete Styles
   ================================================================ */

/* ── Nähe Hero ───────────────────────────────────────────────────── */
.naehe-hero {
  position: relative;
  background: linear-gradient(135deg, #020b18 0%, #071624 40%, #0c1e30 70%, #071a2c 100%);
  padding: 80px 0 60px;
  overflow: hidden;
}
.naehe-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 30% 0%, rgba(59,130,246,.15) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 80% 80%, rgba(204,0,0,.12) 0%, transparent 60%);
  pointer-events: none;
}
.naehe-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}
.naehe-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(59,130,246,.12);
  border: 1px solid rgba(59,130,246,.3);
  color: #60a5fa;
  padding: 6px 18px;
  border-radius: var(--r-full);
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 24px;
}
.naehe-pulse-dot {
  width: 8px; height: 8px;
  background: #3b82f6;
  border-radius: 50%;
  animation: pulse-dot 1.8s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pulse-dot {
  0%,100% { box-shadow: 0 0 0 0 rgba(59,130,246,.5); }
  50%      { box-shadow: 0 0 0 8px rgba(59,130,246,0); }
}
.naehe-hero-content h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: #fff;
  margin-bottom: 16px;
  line-height: 1.1;
}
.naehe-hero-line1 { display: block; }
.naehe-hero-line2 { display: block; }
.naehe-hero-line2 em {
  color: #60a5fa;
  font-style: normal;
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.naehe-hero-sub {
  color: rgba(255,255,255,.65);
  font-size: 1rem;
  margin-bottom: 36px;
  line-height: 1.7;
}

/* ── Input box ───────────────────────────────────────────────────── */
.naehe-input-box {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-xl);
  padding: 20px 24px 24px;
  max-width: 540px;
  margin: 0 auto 28px;
  backdrop-filter: blur(10px);
}
.naehe-input-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
}
.nit-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: var(--r-sm);
  border: none;
  background: transparent;
  color: rgba(255,255,255,.5);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all var(--t-fast);
}
.nit-tab.active, .nit-tab:hover {
  background: rgba(59,130,246,.2);
  color: #93c5fd;
}
.nit-tab.active { border: 1px solid rgba(59,130,246,.4); }

/* GPS button */
.btn-locate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 24px;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: #fff;
  border: none;
  border-radius: var(--r-lg);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all var(--t-base);
  box-shadow: 0 4px 20px rgba(59,130,246,.3);
}
.btn-locate:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(59,130,246,.4); }
.btn-locate i { font-size: 1.1rem; }
.naehe-privacy-note {
  margin-top: 10px;
  font-size: .75rem;
  color: rgba(255,255,255,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Manual form */
.naehe-manual-form { display: flex; flex-direction: column; gap: 10px; }
.naehe-search-wrap { position: relative; }
.naehe-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,.4); font-size: .9rem; pointer-events: none; }
.naehe-search-input {
  width: 100%;
  padding: 12px 14px 12px 38px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  font-size: .9rem;
  font-family: var(--font-body);
  outline: none;
  transition: border-color var(--t-fast);
}
.naehe-search-input::placeholder { color: rgba(255,255,255,.35); }
.naehe-search-input:focus { border-color: #3b82f6; background: rgba(255,255,255,.15); }
.naehe-autocomplete {
  position: absolute;
  top: calc(100% + 4px); left: 0; right: 0;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  z-index: 200;
  box-shadow: var(--shadow-lg);
  display: none;
}
.nac-item {
  padding: 10px 14px;
  font-size: .83rem;
  color: var(--text-1);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background var(--t-fast);
}
.nac-item:last-child { border-bottom: none; }
.nac-item:hover { background: var(--surface-2); }

/* Loading / Error */
.nit-loading, .nit-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.7);
  font-size: .88rem;
  padding: 16px 0 4px;
}
.nit-error { color: #fca5a5; }
.nit-error i { font-size: 1.2rem; }
.naehe-spinner {
  width: 28px; height: 28px;
  border: 3px solid rgba(59,130,246,.2);
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn-retry {
  background: rgba(239,68,68,.15);
  border: 1px solid rgba(239,68,68,.3);
  color: #fca5a5;
  padding: 6px 16px;
  border-radius: var(--r-full);
  font-size: .8rem;
  cursor: pointer;
  font-family: var(--font-body);
}
.btn-retry:hover { background: rgba(239,68,68,.25); }

/* Quick city pills */
.naehe-hero-cities {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.naehe-cities-label { color: rgba(255,255,255,.45); font-size: .78rem; }
.naehe-city-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.75);
  font-size: .8rem;
  font-weight: 600;
  transition: all var(--t-fast);
}
.naehe-city-pill:hover { background: rgba(59,130,246,.2); border-color: rgba(59,130,246,.4); color: #93c5fd; }

/* ── Location Bar ────────────────────────────────────────────────── */
.naehe-locationbar {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  padding: 10px 0;
  position: sticky;
  top: 68px;
  z-index: 80;
}
.nlb-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.nlb-left { display: flex; align-items: center; gap: 10px; }
.nlb-dot {
  width: 10px; height: 10px;
  background: #3b82f6;
  border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
  flex-shrink: 0;
}
.nlb-address { font-weight: 700; font-size: .92rem; color: var(--text-1); }
.nlb-coords  { font-size: .72rem; color: var(--text-3); font-family: monospace; }
.nlb-right   { display: flex; align-items: center; gap: 12px; }
.nlb-count   { font-size: .85rem; color: var(--text-2); }
.nlb-count strong { color: var(--rot); font-size: 1rem; }
.nlb-change  { background: none; border: 1px solid var(--border); border-radius: var(--r-full); padding: 5px 14px; font-size: .78rem; color: var(--text-2); cursor: pointer; font-family: var(--font-body); transition: all var(--t-fast); }
.nlb-change:hover { border-color: var(--rot); color: var(--rot); }

/* ── Tool Layout ─────────────────────────────────────────────────── */
.naehe-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 0;
  height: calc(100vh - 130px);
  min-height: 600px;
  max-height: 900px;
}

/* ── Sidebar ─────────────────────────────────────────────────────── */
.naehe-sidebar {
  background: var(--surface-1);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
}
.naehe-sidebar::-webkit-scrollbar { width: 4px; }
.naehe-sidebar::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 2px; }

.naehe-filter-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px;
}
.nfc-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 10px;
}

/* Radius range */
.naehe-range {
  width: 100%;
  accent-color: var(--rot);
  cursor: pointer;
  height: 4px;
  margin: 4px 0;
}
.radius-marks {
  display: flex;
  justify-content: space-between;
  font-size: .65rem;
  color: var(--text-3);
  margin-top: 4px;
}

/* Select */
.naehe-select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-1);
  color: var(--text-1);
  font-family: var(--font-body);
  font-size: .85rem;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%23999'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}
.naehe-select:focus { outline: none; border-color: #3b82f6; }

/* Pill group */
.naehe-pill-group { display: flex; gap: 6px; flex-wrap: wrap; }
.npill {
  padding: 5px 14px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-2);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all var(--t-fast);
}
.npill:hover { border-color: #3b82f6; color: #3b82f6; }
.npill.active { background: rgba(59,130,246,.1); border-color: #3b82f6; color: #3b82f6; }

/* Checkboxes */
.naehe-checkbox-group { display: flex; flex-direction: column; gap: 8px; }
.naehe-chk-label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size:.83rem;
  font-weight:600;
  color:var(--text-2);
  cursor: pointer;
  user-select: none;
}
.naehe-chk { display: none; }
.naehe-chk-box {
  width: 18px; height: 18px;
  border: 2px solid var(--border);
  border-radius: 4px;
  flex-shrink: 0;
  transition: all var(--t-fast);
  position: relative;
}
.naehe-chk:checked + .naehe-chk-box {
  background: #3b82f6;
  border-color: #3b82f6;
}
.naehe-chk:checked + .naehe-chk-box::after {
  content: '';
  position: absolute;
  left: 4px; top: 1px;
  width: 6px; height: 10px;
  border: 2px solid #fff;
  border-top: none; border-left: none;
  transform: rotate(45deg);
}
.naehe-chk-label:has(input:checked) { color: #3b82f6; }

/* Results header */
.naehe-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0 4px;
  border-top: 1px solid var(--border);
  font-size: .82rem;
}
.naehe-results-header strong { color: var(--text-1); font-size: .9rem; }
#naehe-radius-label { color: var(--text-3); }

/* List empty */
.naehe-list-empty {
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 32px 16px;
  color: var(--text-3);
  text-align: center;
  display: none;
}
.naehe-list-empty i { font-size: 2rem; }
.naehe-list-empty p { font-weight: 600; color: var(--text-2); }

/* load more */
.btn-load-more {
  width: 100%;
  padding: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-2);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all var(--t-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}
.btn-load-more:hover { border-color: #3b82f6; color: #3b82f6; }

/* ── School Card (interactive tool) ──────────────────────────────── */
.naehe-school-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px;
  cursor: pointer;
  transition: all var(--t-fast);
  margin-bottom: 8px;
}
.naehe-school-card:hover,
.naehe-school-card.highlighted {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,.08);
  background: var(--surface-2);
}
.nsc-header {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: start;
  margin-bottom: 10px;
}
.nsc-rank {
  width: 26px; height: 26px;
  background: var(--surface-3);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem;
  font-weight: 700;
  color: var(--text-3);
  flex-shrink: 0;
}
.nsc-meta { flex: 1; min-width: 0; }
.nsc-badges { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 4px; }
.nsc-name { font-size: .88rem; font-weight: 700; color: var(--text-1); margin-bottom: 2px; }
.nsc-name a { color: inherit; }
.nsc-name a:hover { color: #3b82f6; }
.nsc-addr { font-size: .72rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nsc-dist { text-align: right; flex-shrink: 0; }
.nsc-dist-km { display: block; font-family: var(--font-head); font-size: 1.05rem; font-weight: 800; color: #3b82f6; white-space: nowrap; }
.nsc-dist-lbl { font-size: .65rem; color: var(--text-3); }

/* Travel times row */
.nsc-travel {
  display: flex;
  gap: 6px;
  background: var(--surface-2);
  border-radius: var(--r-sm);
  padding: 8px;
  margin-bottom: 10px;
}
.nsc-travel-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.nst-icon { font-size: 1rem; line-height: 1; }
.nst-val  { font-size: .8rem; font-weight: 800; color: var(--text-1); }
.nst-lbl  { font-size: .6rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }

/* Badges */
.ns-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--r-full);
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.ns-badge.type    { background: rgba(59,130,246,.1);  color: #3b82f6;  border: 1px solid rgba(59,130,246,.25); }
.ns-badge.public  { background: rgba(16,185,129,.1);  color: #059669;  border: 1px solid rgba(16,185,129,.25); }
.ns-badge.private { background: rgba(139,92,246,.1);  color: #7c3aed;  border: 1px solid rgba(139,92,246,.25); }
.ns-badge.ganztag { background: rgba(245,158,11,.1);  color: #d97706;  border: 1px solid rgba(245,158,11,.25); }

/* Contact badges */
.nsc-footer { display: flex; align-items: center; justify-content: space-between; }
.nsc-contacts { display: flex; gap: 4px; }
.ns-contact {
  width: 28px; height: 28px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem;
  transition: all var(--t-fast);
  text-decoration: none;
}
.ns-contact.web   { background: rgba(59,130,246,.1);  color: #3b82f6; }
.ns-contact.email { background: rgba(16,185,129,.1);  color: #059669; }
.ns-contact.phone { background: rgba(245,158,11,.1);  color: #d97706; }
.ns-contact.web:hover   { background: #3b82f6; color: #fff; }
.ns-contact.email:hover { background: #059669; color: #fff; }
.ns-contact.phone:hover { background: #d97706; color: #fff; }
.nsc-btn-profile {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(59,130,246,.08);
  border: 1px solid rgba(59,130,246,.2);
  border-radius: var(--r-full);
  color: #3b82f6;
  font-size: .75rem;
  font-weight: 700;
  white-space: nowrap;
  transition: all var(--t-fast);
  text-decoration: none;
}
.nsc-btn-profile:hover { background: #3b82f6; color: #fff; }

/* ── Map pane ───────────────────────────────────────────────────── */
.naehe-map-wrap {
  position: relative;
  flex: 1;
  height: 100%;
}
.naehe-map { width: 100%; height: 100%; }

/* map overlay controls */
.naehe-map-overlay {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 400;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.nmo-btn {
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  background: var(--surface-1);
  border: 1px solid var(--border);
  color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: .85rem;
  box-shadow: var(--shadow-sm);
  transition: all var(--t-fast);
}
.nmo-btn:hover { border-color: #3b82f6; color: #3b82f6; }

/* fullscreen map */
.fullscreen-map {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2000 !important;
  border-radius: 0 !important;
}
.fullscreen-map .naehe-map { height: 100vh !important; }

/* Map legend */
.naehe-map-legend {
  position: absolute;
  bottom: 24px;
  left: 12px;
  z-index: 400;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 8px 12px;
  display: flex;
  gap: 12px;
  box-shadow: var(--shadow-sm);
  font-size: .72rem;
}
.nml-item { display: flex; align-items: center; gap: 5px; color: var(--text-2); }
.nml-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.nml-dot.user    { background: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.3); }
.nml-dot.school  { background: #cc0000; }
.nml-dot.selected{ background: #10b981; }

/* ── Custom map markers ─────────────────────────────────────────── */
.naehe-user-pin {
  position: relative;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
}
.nup-dot {
  width: 14px; height: 14px;
  background: #3b82f6;
  border: 3px solid #fff;
  border-radius: 50%;
  position: relative; z-index: 2;
  box-shadow: 0 2px 8px rgba(59,130,246,.5);
}
.nup-pulse {
  position: absolute;
  inset: -6px;
  border: 2px solid rgba(59,130,246,.4);
  border-radius: 50%;
  animation: pin-pulse 2s ease-out infinite;
}
@keyframes pin-pulse {
  0%   { transform: scale(.6); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}
.naehe-school-pin {
  width: 28px; height: 28px;
  background: var(--rot);
  border: 2px solid #fff;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  transition: background var(--t-fast);
}
.naehe-school-pin i { transform: rotate(45deg); color: #fff; font-size: .65rem; }
.naehe-school-pin:hover { background: #3b82f6; }

/* Map popup */
.map-popup-naehe { padding: 2px; }
.map-popup-naehe strong { display: block; font-size: .88rem; color: var(--text-1); margin-bottom: 4px; }
.mpn-type { font-size: .72rem; color: var(--text-3); margin-bottom: 4px; }
.mpn-dist { font-size: .82rem; margin-bottom: 4px; }
.mpn-travel { font-size: .72rem; color: var(--text-2); margin-bottom: 8px; }
.mpn-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .78rem;
  color: #3b82f6;
  font-weight: 700;
  text-decoration: none;
}
.mpn-link:hover { text-decoration: underline; }

/* ── City grid (main page) ──────────────────────────────────────── */
.naehe-city-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.naehe-city-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: all var(--t-base);
  color: var(--text-1);
}
.naehe-city-card:hover { border-color: #3b82f6; box-shadow: var(--shadow-md); transform: translateY(-2px); }
.ncc-emoji { font-size: 1.5rem; flex-shrink: 0; }
.ncc-info { flex: 1; }
.ncc-info strong { display: block; font-weight: 700; font-size: .9rem; }
.ncc-info span { font-size: .72rem; color: var(--text-3); }
.ncc-arrow { color: var(--text-3); font-size: .75rem; transition: color var(--t-fast); flex-shrink: 0; }
.naehe-city-card:hover .ncc-arrow { color: #3b82f6; }

/* ── How it works steps ─────────────────────────────────────────── */
.naehe-steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 0;
  align-items: center;
}
.naehe-step {
  text-align: center;
  padding: 24px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  position: relative;
  transition: all var(--t-base);
}
.naehe-step:hover { border-color: #3b82f6; box-shadow: var(--shadow-md); }
.naehe-step-arrow { color: var(--text-3); font-size: 1.5rem; padding: 0 12px; }
.ns-num {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px; height: 24px;
  background: #3b82f6;
  color: #fff;
  border-radius: 50%;
  font-size: .75rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.ns-icon {
  width: 56px; height: 56px;
  border-radius: var(--r-full);
  background: rgba(59,130,246,.1);
  color: #3b82f6;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  margin: 16px auto 14px;
}
.naehe-step h3 { font-size: 1rem; margin-bottom: 8px; }
.naehe-step p { font-size: .82rem; color: var(--text-2); }

/* ── Travel explain cards ───────────────────────────────────────── */
.travel-explain-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.te-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px 18px;
  text-align: center;
  transition: all var(--t-fast);
}
.te-card:hover { border-color: var(--border-hover); box-shadow: var(--shadow-sm); }
.tec-icon {
  width: 52px; height: 52px;
  border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  margin: 0 auto 14px;
}
.tec-icon.walk    { background: rgba(34,197,94,.1);  color: #16a34a; }
.tec-icon.bike    { background: rgba(245,158,11,.1); color: #d97706; }
.tec-icon.car     { background: rgba(59,130,246,.1); color: #3b82f6; }
.tec-icon.transit { background: rgba(139,92,246,.1); color: #7c3aed; }
.te-card h3    { font-size: .95rem; font-weight: 800; margin-bottom: 4px; }
.tec-speed     { font-size: .85rem; font-weight: 700; color: var(--rot); margin-bottom: 8px; }
.te-card p     { font-size: .78rem; color: var(--text-3); line-height: 1.6; }
.travel-disclaimer {
  text-align: center;
  font-size: .8rem;
  color: var(--text-3);
  margin-top: 20px;
  padding: 12px 20px;
  background: var(--surface-2);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}
.travel-disclaimer i { color: #3b82f6; margin-right: 5px; }

/* ── City SEO Page ──────────────────────────────────────────────── */
.naehe-city-hero {
  background: linear-gradient(135deg, #020b18 0%, #071624 50%, #0d2038 100%);
  padding: 48px 0;
  border-bottom: 1px solid rgba(59,130,246,.2);
}
.nch-inner { max-width: 700px; }
.nch-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(59,130,246,.12);
  border: 1px solid rgba(59,130,246,.3);
  color: #60a5fa;
  padding: 4px 14px;
  border-radius: var(--r-full);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 14px;
}
.naehe-city-hero h1 {
  color: #fff;
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  margin-bottom: 12px;
}
.naehe-city-hero h1 em { color: #60a5fa; font-style: normal; }
.naehe-city-hero p { color: rgba(255,255,255,.65); margin-bottom: 20px; }
.nch-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.naehe-city-hero .btn-ghost {
  color: rgba(255,255,255,.85);
  border-color: rgba(255,255,255,.3);
  background: rgba(255,255,255,.08);
}
.naehe-city-hero .btn-ghost:hover {
  color: #fff;
  border-color: rgba(255,255,255,.6);
  background: rgba(255,255,255,.16);
}


/* City stat tiles */
.naehe-city-stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}
.ncs-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 10px;
  text-align: center;
  transition: all var(--t-fast);
}
.ncs-tile:hover { border-color: var(--border-hover); box-shadow: var(--shadow-sm); }
.ncs-tile i { font-size: 1.1rem; margin-bottom: 4px; }
.ncs-tile strong { font-family: var(--font-head); font-size: 1.3rem; font-weight: 800; color: var(--text-1); }
.ncs-tile span { font-size: .68rem; color: var(--text-3); }

/* City map */
.naehe-city-map-wrap { position: relative; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-md); }
.naehe-city-map { width: 100%; height: 450px; }
.naehe-city-map-wrap .naehe-map-legend { bottom: 16px; left: 16px; }

/* City school list cards */
.naehe-city-list { display: flex; flex-direction: column; gap: 14px; }
.naehe-city-card.ncc-item {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px;
  cursor: pointer;
  transition: all var(--t-base);
}
.naehe-city-card.ncc-item:hover { border-color: #3b82f6; box-shadow: var(--shadow-md); transform: translateY(-1px); }
.ncci-rank {
  width: 36px; height: 36px;
  background: var(--surface-3);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem;
  font-weight: 800;
  color: var(--text-3);
  flex-shrink: 0;
}
.ncci-body { flex: 1; min-width: 0; }
.ncci-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.ncci-left { flex: 1; min-width: 0; }
.ncci-badges { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.ncci-body h3 { font-size: .95rem; font-weight: 700; color: var(--text-1); margin-bottom: 4px; }
.ncci-body h3 a { color: inherit; }
.ncci-body h3 a:hover { color: #3b82f6; }
.ncci-addr { font-size: .78rem; color: var(--text-3); }
.ncci-dist { text-align: right; flex-shrink: 0; }
.ncci-dist-km { display: block; font-family: var(--font-head); font-size: 1.1rem; font-weight: 800; color: #3b82f6; white-space: nowrap; }
.ncci-dist-lbl { font-size: .65rem; color: var(--text-3); }

/* City travel row */
.ncci-travel {
  display: grid;
  grid-template-columns: repeat(4, 1fr) 2fr;
  gap: 8px;
  align-items: center;
  background: var(--surface-2);
  border-radius: var(--r-md);
  padding: 10px 12px;
  margin-bottom: 10px;
}
.ncci-travel-item { display: flex; align-items: center; gap: 6px; }
.ncti-icon { font-size: 1rem; line-height: 1; }
.ncci-travel-item div { display: flex; flex-direction: column; gap: 1px; }
.ncci-travel-item strong { font-size: .82rem; font-weight: 800; color: var(--text-1); }
.ncci-travel-item small  { font-size: .62rem; color: var(--text-3); text-transform: uppercase; }
.ncci-dist-bar { height: 6px; background: var(--surface-3); border-radius: 3px; overflow: hidden; }
.ncci-dist-bar-fill { height: 100%; background: linear-gradient(90deg, #3b82f6, #1d4ed8); border-radius: 3px; transition: width .6s ease; }

/* City card footer */
.ncci-footer { display: flex; align-items: center; justify-content: space-between; }
.ncci-contacts { display: flex; gap: 4px; }

/* ── Responsive Nähe ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .naehe-layout { grid-template-columns: 320px 1fr; }
  .naehe-city-stats { grid-template-columns: repeat(3, 1fr); }
  .travel-explain-grid { grid-template-columns: repeat(2, 1fr); }
  .naehe-city-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .naehe-layout { grid-template-columns: 1fr; grid-template-rows: auto 400px; height: auto; max-height: none; }
  .naehe-sidebar { max-height: none; overflow-y: visible; }
  .naehe-map-wrap { height: 400px; }
  .naehe-steps { grid-template-columns: 1fr; gap: 16px; }
  .naehe-step-arrow { display: none; }
  .naehe-city-grid { grid-template-columns: repeat(2, 1fr); }
  .ncci-travel { grid-template-columns: repeat(2, 1fr) 1fr; }
}
@media (max-width: 600px) {
  .naehe-city-stats { grid-template-columns: repeat(2, 1fr); }
  .travel-explain-grid { grid-template-columns: 1fr; }
  .naehe-city-grid { grid-template-columns: 1fr; }
  .naehe-input-box { padding: 16px; }
  .naehe-city-hero { padding: 32px 0; }
  .ncci-travel { grid-template-columns: repeat(2, 1fr); }
  .ncci-travel-item:last-child { display: none; }
  .naehe-hero-cities { gap: 6px; }
  .naehe-city-map { height: 300px; }
  .naehe-steps { grid-template-columns: 1fr; }
}

/* ── Presentation Block (School Profile) ─────────────────────────── */
.presentation-block { margin-bottom: 24px; }
.pb-title {
  display: block;
  margin-bottom: 8px;
  color: var(--rot);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.pb-content p {
  margin-bottom: 12px;
  line-height: 1.6;
}
.pb-content p:last-child {
  margin-bottom: 0;
}

/* ── Bundesland Cards with Flags (home + hub) ─────────────────────── */
/* Header row: name on left, small flag on right */
.bl-card-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.bl-card-flag-small {
  flex-shrink: 0;
  width: 52px;
  height: 34px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
}
.bl-card-flag-small img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bl-card-header-row h3 {
  font-size: .95rem;
  font-weight: 700;
  color: var(--text-1);
  line-height: 1.3;
  margin: 0;
  flex: 1;
  min-width: 0;
}

/* ── Breadcrumb Nav (bundeslaender pages) ─────────────────────────── */
.breadcrumb-nav { margin-bottom: 20px; }
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: .82rem;
  flex-wrap: wrap;
}
.breadcrumb li { display: flex; align-items: center; gap: 6px; }
.breadcrumb a { color: rgba(255,255,255,.55); text-decoration: none; transition: color .15s; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb li[aria-current="page"] { color: rgba(255,255,255,.85); font-weight: 600; }
.bc-sep { font-size: .65rem; color: rgba(255,255,255,.3); }