{
  --gap: 16px;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.08); /* vorher 0 6px 20px ... */
  --text: #171717;
  --muted: #6b7280;
  --bg: #f7f7fb;
  --card: #ffffff;
  --sheet-max-h: 64vh; /* vorher 68vh: Bottom‑Sheet minimal niedriger */
  --ring: 0 0 0 3px rgba(17,17,17,.10); /* NEU: schöner Fokusring */
 --glass-bg: rgba(255,255,255,.65);
  --glass-border: rgba(255,255,255,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:clamp(12px,3vw,22px)}
header.app{
  position: sticky; top:0; z-index:20;
  backdrop-filter: saturate(1.2) blur(8px);
  background: rgba(255,255,255,.72);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.spacer{flex:1}
.btn {
  display: inline-block;
  padding: 0.65rem 1.2rem;
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
  background-color: #111; /* Schwarz als Grundfarbe */
  border: none;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
  background-color: #000; /* Etwas dunkler beim Hover */
}

.btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

/* Falls du noch den "ghost"-Style willst, aber im gleichen Look */
.btn.ghost {
  background-color: transparent;
  color: #111;
  border: 2px solid #111;
}

.btn.ghost:hover {
  background-color: #111;
  color: #fff;
}
.btn {
  display: inline-block;
  padding: 0.65rem 1.2rem;
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
  background-color: #111;
  border: none;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,.15);
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,.2);
  background-color: #000;
}
.btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0,0,0,.15);
}

/* optionaler „secondary“/Ghost – im gleichen Look */
.btn.ghost {
  background-color: transparent;
  color: #111;
  border: 2px solid #111;
}
.btn.ghost:hover {
  background-color: #111;
  color: #fff;
}
.btn.small{padding:8px 12px;font-size:14px;border-radius:10px}



/* Seitenumschalter nur für die Top-Level-Sections */
#home, #country, #quiz, #hofstede {
  display: none;
}
#home.active, #country.active, #quiz.active, #hofstede.active {
  display: block;
}

/* Hero (etwas kompakter) */
.hero{
  height: clamp(140px, 22vw, 220px); /* vorher 150/24/240 */
  border-radius:18px; overflow:hidden; position:relative;
  box-shadow: var(--shadow); margin-bottom:14px; /* vorher 16px */
}
.hero::after{ content:""; position:absolute; inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,.05));
}

/* Section title */
.section-title{ margin: 8px 0 10px; font-weight: 800; font-size: clamp(18px, 2.4vw, 21px); }

/* Masonry */
.masonry{column-gap:var(--gap);column-count:1}
@media(min-width:640px){.masonry{column-count:2}}
@media(min-width:980px){.masonry{column-count:3}}

.card{
  display:inline-block; width:100%; margin:0 0 var(--gap);
  background:var(--card); border-radius:16px; overflow:hidden;
  box-shadow:var(--shadow); break-inside:avoid; cursor:pointer; position:relative;
  transition: transform .2s ease, box-shadow .2s ease;
}

/* Fokus-Ring (Keyboard/Screenreader) */
:focus-visible{ outline: none; box-shadow: var(--ring); border-radius: 10px; }
.card:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(17,17,17,.12); }

/* Desktop/Laptop: echter Hover */
@media (hover: hover) and (pointer: fine) {
  .card:hover{
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 18px 32px rgba(0,0,0,.14);
  }
}

/* Touch: Effekt beim Antippen */
@media (hover: none) and (pointer: coarse) {
  .card:active,
  .card:focus {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 18px 32px rgba(0,0,0,.14);
  }
}

/* Bewegungsreduktion respektieren */
@media (prefers-reduced-motion: reduce) {
  .card{ transition: box-shadow .2s ease; }
  .card:hover,
  .card:active,
  .card:focus { transform: none; }
}

.card .cover{ min-height: 145px; } /* vorher 150px */

.card .cover .title{position:relative;z-index:1;font-size:clamp(15px,2vw,18px);text-shadow:0 1px 6px rgba(0,0,0,.45)}
.card .cover::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.45),rgba(0,0,0,0) 60%)}
.card .body{ padding:12px 14px; color:#4b5563; font-size:14px; } 
.badge{
  position:absolute;top:10px;right:10px;background:rgba(255,255,255,.9);
  color:#111;font-size:12px;padding:5px 9px;border-radius:999px;font-weight:700;
  box-shadow:0 6px 18px rgba(0,0,0,.16)
}

/* Do/Don't compact chips */
.quick-tips{ margin: 8px 0 14px; }
.tips-grid{ display:grid; gap:12px; grid-template-columns:1fr; }
@media (min-width: 760px){ .tips-grid{ grid-template-columns:1fr 1fr; } }
.tips-card{ background:#fff;border-radius:14px;box-shadow:var(--shadow);border:1px solid rgba(0,0,0,.06);padding:10px 12px }
.tips-head{ margin:2px 0 8px; font-size:15px }
.tips-list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px }
.tips-list.chips li{
  background:#f5f7fb;            /* vorher #f3f4f6 */
  border:1px solid #e6eaf0;      /* vorher #e5e7eb */
  color:#0f172a;                 /* vorher #111 */
  padding:6px 10px; border-radius:999px; font-size:13px;
}
.tips-card.do .chips li{ background:#ecfdf5; border-color:#a7f3d0; }
.tips-card.dont .chips li{ background:#fef2f2; border-color:#fecaca; }

/* überschreibt nur die Listen in den Do/Don't-Karten */
.quick-tips .tips-list {
  display: flex;
  flex-direction: column; /* untereinander */
  flex-wrap: nowrap;
  gap: 6px;
}

.quick-tips .tips-list li {
  flex: 0 0 auto;
  width: 100%;
}

/* Hofstede (kompakt, mittig) */
.hofstede{ margin: 6px 0 16px; }
.hofstede-controls{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center;
  margin-bottom:8px;
}
.search-wrap{ position:relative; }
#countrySearch{
  padding:10px 12px; width:260px; max-width:80vw; font-size:14px;
  border-radius:10px; border:1px solid #d1d5db; outline:none;
  transition: box-shadow .15s ease, border-color .15s ease;
}
#countrySearch:focus{ border-color:#111; box-shadow: var(--ring); }
.suggestions{
  position:absolute; left:0; right:0; top: calc(100% + 4px);
  list-style:none; margin:0; padding:6px 0; background:#fff;
  border:1px solid #e5e7eb; border-radius:10px; display:none;
  max-height:180px; overflow:auto; box-shadow:var(--shadow); z-index: 3;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}
.suggestions {
  max-height: 240px;       /* ca. 8–10 Einträge sichtbar */
  overflow-y: auto;        /* Scrollbar wenn mehr */
  border: 1px solid #ccc;  /* optional: damit es wie ein Dropdown wirkt */
  border-radius: 4px;
  background: #fff;
  position: absolute;      /* falls noch nicht gesetzt */
  z-index: 1000;
}

.suggestions li {
  padding: 10px 12px;      /* vorher 8px 10px */
  cursor: pointer;
  font-size: 14px;
}

.suggestions li:hover,
.suggestions li.active {
  background: #eef2ff;
}
.chart-wrap{
  width:100%; max-width: 520px; 
  margin: 0 auto;
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:14px; box-shadow:var(--shadow);
  padding:10px; 
}
.hint{ color: var(--muted); text-align:center; font-size:12px; margin-top:12px; }

/* Bottom Sheet (etwas niedriger, schnellere Animation) */
.sheet-backdrop{
  position:fixed;inset:0;background:rgba(15,17,20,.34);
  opacity:0;pointer-events:none;transition:opacity .16s ease;z-index:50;
}
.sheet{
  position:fixed; left:50%; transform:translate(-50%,100%); bottom:0;
  width:min(860px,96%); 
  max-height: var(--sheet-max-h); /* vorher 860px */
  background:#fff; border-radius:14px 14px 0 0; box-shadow:0 -16px 36px rgba(0,0,0,.2);
  display:flex; flex-direction:column; z-index:60; transition:transform .18s ease;
}
.sheet.open{transform:translate(-50%,0)}
.sheet-backdrop.open{opacity:1;pointer-events:auto}
.sheet-header{padding:10px 12px;border-bottom:1px solid rgba(0,0,0,.08);display:flex;align-items:center;gap:12px}

.sheet-title{font-weight:800;font-size:16px}
.sheet-body{padding:12px 12px;overflow:auto}
.sheet-actions{padding:10px 12px;border-top:1px solid rgba(0,0,0,.08);display:flex;justify-content:flex-end}
.sheet .btn{background:#111;color:#fff}

/* Länder-Hintergründe */
.bg-germany{background:linear-gradient(#000 0 33.33%,#d00 33.33% 66.66%,#ffce00 66.66%) center/cover no-repeat}
.bg-china{background:radial-gradient(circle at 20% 25%,#ffd54a 0 12%,#d40000 12%),linear-gradient(#d40000,#b80000)}
.bg-japan{background:radial-gradient(circle at 50% 60%,#c9152a 0 18%,transparent 18%),linear-gradient(#fff,#f2f2f2)}

.bg-japan {
  background:
    radial-gradient(circle at 50% 60%, #c9152a 0 18%, transparent 18%),
    linear-gradient(#fff, #f2f2f2);
}

.bg-brazil {
  background:
    linear-gradient(#009c3b 0 33.33%, #ffdf00 33.33% 66.66%, #002776 66.66%);
}
/* Themen-Hintergründe */
.bg-communication{
  background:
    linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,0) 60%),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop stop-color="%235685F2"/><stop offset="1" stop-color="%234673E6"/></linearGradient></defs><rect fill="url(%23g)" width="100%" height="100%"/><g fill="white" opacity=".15"><circle cx="80" cy="90" r="32"/><rect x="60" y="80" rx="6" ry="6" width="40" height="12"/><circle cx="300" cy="220" r="30"/><rect x="280" y="210" rx="6" ry="6" width="40" height="12"/></g></svg>') center/cover no-repeat;
  color:#fff;
}
.bg-dresscode{
  background:
    linear-gradient(180deg,rgba(0,0,0,.4),rgba(0,0,0,0) 60%),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400"><defs><linearGradient id="t" x1="0" y1="0" x2="1" y2="1"><stop stop-color="%238B5CF6"/><stop offset="1" stop-color="%236D28D9"/></linearGradient></defs><rect fill="url(%23t)" width="100%" height="100%"/><g opacity=".15" fill="white"><rect x="60" y="80" width="60" height="80" rx="8"/><rect x="120" y="80" width="60" height="80" rx="8"/><rect x="180" y="80" width="60" height="80" rx="8"/></g></svg>') center/cover no-repeat;
  color:#fff;
}
.bg-etiquette{
  background:
    linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,0) 60%),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400"><defs><linearGradient id="e" x1="0" y1="0" x2="1" y2="1"><stop stop-color="%23F59E0B"/><stop offset="1" stop-color="%23D97706"/></linearGradient></defs><rect fill="url(%23e)" width="100%" height="100%"/><g opacity=".15" fill="white"><circle cx="100" cy="120" r="24"/><rect x="90" y="142" width="20" height="40" rx="6"/></g></svg>') center/cover no-repeat;
  color:#fff;
}
.bg-negotiation{
  background:
    linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,0) 60%),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400"><defs><linearGradient id="n" x1="0" y1="0" x2="1" y2="1"><stop stop-color="%230EA5E9"/><stop offset="1" stop-color="%230089CC"/></linearGradient></defs><rect fill="url(%23n)" width="100%" height="100%"/><g opacity=".15" stroke="white" stroke-width="6" fill="none"><path d="M80 200 C140 160, 220 240, 300 200"/><path d="M80 260 C140 220, 220 300, 300 260"/></g></svg>') center/cover no-repeat;
  color:#fff;
}

/* Bild-basierte Cover/Hero */
.cover.image,
.hero.image{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.cover.image::after,
.hero.image::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,.05));
}

/* Footer */
/* dezenter, sehr schmaler Verlauf: unten Blau, nach oben weich zu Weiß */
footer.app {
  /* keine Sticky/Glass-Effekte */
  position: static;
  backdrop-filter: none;

  /* Gradient: nutze denselben Blau-Ton wie im UI (Chart/Brand) */
  background: linear-gradient(
    to top,
    rgba(17, 99, 246, 0.22) 0%,
    rgba(17, 99, 246, 0.10) 45%,
    rgba(255, 255, 255, 0) 100%
  );

  height: 22px;         /* „sehr schmal“ – bei Bedarf 18–26px feinjustieren */
  padding: 0;
  border-top: none;
  box-shadow: none;

  /* wenn du Text drin lässt: */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #111;
}
/* Linke Spalte (Hofstede) – immer Hälfte */
.left-column{
  flex: 0 0 50%;
  max-width: 50%;
}

/* Rechte Spalte (Topics) – immer Hälfte */
.right-column{
  flex: 0 0 50%;
  max-width: 50%;
}

/* Masonry in der rechten Spalte */
.right-column .masonry{
  column-gap: var(--gap);
  column-count: 1; /* nur eine Spalte pro Hälfte, passt sich an Höhe an */
}

/* Country: Hofstede links, Topics rechts – immer nebeneinander */
.country-content{
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-top: 18px;
  flex-wrap: nowrap;
}

/* Linke Spalte (Hofstede) – immer Hälfte */
.left-column{
  flex: 0 0 50%;
  max-width: 50%;
}

/* Rechte Spalte (Topics) – immer Hälfte */
.right-column{
  flex: 0 0 50%;
  max-width: 50%;
}

/* Masonry in der rechten Spalte */
.right-column .masonry{
  column-gap: var(--gap);
  column-count: 1; /* nur eine Spalte pro Hälfte, passt sich an Höhe an */
}

/* Kleinere Kacheln rechts */
.right-column .card {
  width: 100%;
  aspect-ratio: 3 / 2; /* etwas flacher, nicht so hoch */
  break-inside: avoid;
  margin-bottom: var(--gap);
}

/* Das Cover-Bild in der Kachel skaliert immer proportional */
.right-column .card .cover.image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
}

/* Hofstede-Chart kompakter */
.left-column .chart-wrap{
  max-width: 100%;
  padding: 8px;
}

/* Sticky-Hofstede bleibt */
.left-column .hofstede{
  position: sticky;
  top: calc(64px + 10px);
}

/* Hofstede-Chart kompakter */
.left-column .chart-wrap{
  max-width: 100%;
  padding: 8px;
}

/* Sticky-Hofstede bleibt */
.left-column .hofstede{
  position: sticky;
  top: calc(64px + 10px);
}
/* 1) Rechts: mehr Spalten = kleinere Kacheln */
.right-column .masonry{
  column-gap: var(--gap);
  column-count: 2;           /* statt 1 → macht die Tiles sofort kleiner */
}
@media (min-width: 1200px){
  .right-column .masonry{ column-count: 3; } /* auf sehr großen Screens noch feiner */
}

/* 2) Kachelhöhe sauber über das COVER steuern (nicht über .card) */
.right-column .card .cover{
  /* Überschreibt dein globales min-height:150px */
  min-height: 0;             /* wichtig: alte Vorgabe aushebeln */
  aspect-ratio: 4 / 3;       /* hält das Verhältnis der Bildfläche stabil */
  height: auto;
  background-size: cover;    /* Bild skaliert proportional */
  background-position: center;
  background-repeat: no-repeat;
}

/* Optional: Textbereich etwas kompakter */
.right-column .card .body{
  padding: 10px 12px;
  font-size: 13px;
}

@media (orientation: portrait) {
  .country-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex-wrap: nowrap;
  }
  .left-column,
  .right-column {
    flex: 1 1 auto;
    max-width: 100%;
  }
  .left-column .hofstede {
    position: static;
    top: auto;
  }



  /* ➜ Karten immer gleich hoch halten, auch hochkant */
  .right-column .card {
    aspect-ratio: 4 / 3;   /* oder 3/2, wie auf Home */
  }
/* Rechte Spalte: Grid statt Columns */
.right-column .masonry{
  display: grid;
  grid-template-columns: 1fr;   /* Standard = 1 Spalte */
  gap: var(--gap);
}

@media (min-width: 480px){
  .right-column .masonry{
    grid-template-columns: repeat(2, 1fr); /* ab 480px = 2 Spalten */
  }
}

@media (min-width: 1200px){
  .right-column .masonry{
    grid-template-columns: repeat(3, 1fr); /* optional ab 1200px = 3 Spalten */
  }
}

/* Karten an Grid anpassen */
.right-column .card{
  width: 100%;
  margin: 0;  /* Grid setzt die Abstände */
}

.right-column .card .cover{
  aspect-ratio: 4 / 3;
  min-height: 0;
}



/* Optional: ab ~900px Querformat/Tablet wieder nebeneinander (falls gewünscht) */
@media (min-width: 900px) and (orientation: landscape){
  .country-content{ flex-direction: row; }
  .left-column, .right-column{ flex: 0 0 50%; max-width: 50%; }
}

  /* Hofstede-Chart etwas kompakter im Hochformat */
  .left-column .chart-wrap {
    max-width: 100%;
    margin: 0 auto 20px auto;
  }

  /* Kacheln im Hochformat trotzdem in mehreren Spalten */
  .right-column .masonry {
    column-count: 2;
  }

  /* Bilder in den Kacheln im Hochformat stabil halten */
  .right-column .card .cover {
    aspect-ratio: 4 / 3;
  }
}



.landing-hero__content {
  position: relative;
  z-index: 1;
}

.landing-hero__content {
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: no-preference){
  .landing-hero__bg{ transition: transform 16s ease; }
  .landing-hero:hover .landing-hero__bg{ transform: scale(1.07); }
}

/* Inhalt */
.landing-hero__content {
  position: relative;
  z-index: 1;
}

.landing-hero__pre{
  display:inline-block;
  font-size: 13px;
  letter-spacing:.14em;
  text-transform: uppercase;
  opacity:.9;
  background: rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.26);
  padding:6px 10px;
  border-radius: 999px;
  backdrop-filter: blur(2px);
}

.landing-hero__title {
  font-size: 2.2rem; /* etwas kleiner als vorher */
  font-weight: 800;  /* extra fett, kannst auch 700 oder 900 nehmen */
}

.landing-hero__spark{
  color: #65d6ff; /* kleiner Farbakzent */
  font-size: .6em;
  vertical-align: middle;
  margin-left:.1em;
}

.landing-hero__subtitle {
  font-size: 1.1rem;
  margin-bottom: 1rem; /* weniger Abstand nach unten */
}

.landing-hero__bullets{
  display:flex; gap:10px 14px; flex-wrap:wrap;
  padding:0; margin:10px 0 18px; list-style:none;
}
.landing-hero__bullets li{
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.24);
  padding:8px 12px; border-radius:12px; font-size:14px;
}

/* CTA */

/* Chips mit beliebten Ländern */
.landing-hero__chips{ display:flex; flex-wrap:wrap; gap:8px; }
.landing-hero__chips .chip{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  color:#fff; font-size:13px;
  transition: transform .12s ease, background .12s ease;
}
.landing-hero__chips .chip:hover{ transform: translateY(-1px); background: rgba(255,255,255,.18); }

/* Lesbarkeit auf kleinen Screens */
@media (max-width: 640px){
  .landing-hero__bullets li{ font-size:13px; padding:6px 10px; }
  .landing-hero__cta{ flex-wrap:wrap; }
}

/* Dark-on-light fallback falls du helles Bild nutzt */
@media (prefers-color-scheme: light){
  .landing-hero--light .landing-hero__content{ color:#111; text-shadow:none; }
  .landing-hero--light .landing-hero__pre,
  .landing-hero--light .landing-hero__bullets li,
  .landing-hero--light .landing-hero__chips .chip{
    background: rgba(255,255,255,.8);
    border-color: rgba(0,0,0,.06);
    color:#111;
  }
}


/* neue Seiten standardmäßig verstecken (wie #home/#country) */
#compare, #map { display:none; }

/* einfache Box für die Map */
.map-box{
  height: 380px;
  border-radius: 14px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow: var(--shadow);
  display:grid; place-items:center;
  color: var(--muted);
}

/* Neuer Style nur für den Länder-Hero */
#country .hero {
  border-radius: 0;                /* keine runden Ecken */
  box-shadow: none;                /* kein Karten-Schatten */
  margin-bottom: 0;                /* bündig mit darunter */
  height: clamp(180px, 28vw, 300px); /* größerer, moderner Look */
  position: relative;
}



/* Text im Hero moderner platzieren */
#country .hero-content {
  position: relative;
  z-index: 1;
  padding: clamp(20px, 4vw, 40px);
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}

/* Der Container muss stacking context haben */
.landing-hero {
  position: relative;     /* wichtig: Referenz für das absolut positionierte BG */
  overflow: hidden;
}


/* Content darüber */
.landing-hero__content { position: relative; z-index: 1; }



#country .hero {
  position: relative;
  border-radius: 0; /* vollflächig */
  overflow: hidden;
  height: clamp(220px, 35vw, 400px);
  box-shadow: none;
  margin-bottom: 0;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end; /* Text nach unten setzen */
}

/* Gradient-Overlay für Lesbarkeit */
#country .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0.1));
}

/* Text modern platzieren */
#country .hero-content {
  position: relative;
  z-index: 1;
  padding: clamp(20px, 4vw, 40px);
  color: #fff;
  max-width: 900px;
  margin: 0 auto;
}

#country .hero-content h1 {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  margin: 0;
}

#country .hero-content p {
  font-size: clamp(16px, 2vw, 20px);
  margin-top: 8px;
  opacity: 0.9;
}
/* Moderner Country-Hero */
/* Country-Hero sticky */
#country .hero {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--countryHeroH);
}

/* Nur auf COUNTRY den Inhalt unter den Hero schieben */
body[data-view="country"] .country-content {
  margin-top: calc(var(--countryHeroH) + 16px);
}
/* Lesbarkeit: dunkler Verlauf von unten */
#country .hero::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.10));
}

/* Unten ins Seitenhintergrund ausfaden (sichtbar „durchsichtig“) */
#country #countryHero{
  /* Fallback ohne Mask */
  position: relative;
}
#country #countryHero::before{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px; height:42px;
  /* heller → transparent Verlauf, damit der Übergang weich wirkt */
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, var(--bg) 100%);
  pointer-events:none;
}

/* Besser noch mit Mask (wenn unterstützt) */
@supports (mask-image: linear-gradient(#000, transparent)) or (-webkit-mask-image: linear-gradient(#000, transparent)) {
  #country #countryHero{
    -webkit-mask-image: linear-gradient(to bottom, #000 0 78%, rgba(0,0,0,.7) 90%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0 78%, rgba(0,0,0,.7) 90%, transparent 100%);
  }


/* Text modern */
#country .hero-content{
  position: relative;
  z-index: 1;
  width: min(100%, 1100px);
  margin: 0 auto;
  padding: clamp(20px, 4vw, 40px);
  color:#fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
}
#country .hero-content h1{
  margin:0; font-size: clamp(28px, 4vw, 42px); font-weight: 800;
}
#country .hero-content p{
  margin: 8px 0 0; font-size: clamp(16px, 2vw, 20px); opacity:.9;
}


.hero-peek:hover{ transform: translateX(-50%) translateY(-2px); background: rgba(255,255,255,.22); }
@media (prefers-reduced-motion: no-preference){
  .hero-peek{ animation: peek-bounce 1.8s ease-in-out infinite; }
  @keyframes peek-bounce{
    0%,100%{ transform: translateX(-50%) translateY(0); }
    50%{ transform: translateX(-50%) translateY(-4px); }
  }
}
.fab-home{
  position: fixed;
  right: 16px; bottom: 16px;
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  display: none;                 /* Standard: ausblenden */
  align-items: center; justify-content: center;
  font-size: 18px; cursor: pointer;
  z-index: 90;
}
.fab-home:hover{ transform: translateY(-1px); }











/* Floating-Home-Button */
.fab-home{
  position: fixed; right:16px; bottom:16px; z-index:120;
  width:48px; height:48px; border-radius:50%;
  display:none; align-items:center; justify-content:center;
  border:0; cursor:pointer;
  background:#111; color:#fff; box-shadow:0 10px 30px rgba(0,0,0,.18);
}

/* Peek-Button im Hero */
.hero-peek{
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
  border:0; width:38px; height:38px; border-radius:999px;
  display:grid; place-items:center; cursor:pointer;
  background: rgba(255,255,255,.7);
  box-shadow: 0 6px 18px rgba(0,0,0,.16);
}


/* COUNTRY HERO – STICKY */
#country .hero{
  position: sticky;
  top: 0;
  z-index: 20;          /* reicht völlig */
  /* keine feste Höhe nötig – dein Inhalt bestimmt die Höhe */
}




:root{
  --homeHeroH: 42vh;           /* Höhe des Landing‑Hero (anpassen nach Geschmack) */
}


/* Nur auf HOME den Inhalt unter den Hero schieben */
body[data-view="home"] main {
  padding-top: calc(var(--homeHeroH) + 16px);
}

/* Wenn NICHT Home aktiv, Landing-Hero ausblenden (falls dein JS das nicht ohnehin macht) */
body[data-view="country"] .landing-hero{ display:none; }


/* Quiz standardmäßig wie die anderen Seiten verstecken */
#quiz { display: none; }



.quiz-q{
  font-weight: 700; margin: 6px 0 10px; font-size: 18px;
}
.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 10px;              /* Abstand zwischen den Optionen */
  width: 100%;
}

.quiz-option {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;            /* volle Breite */
  box-sizing: border-box; /* Padding mitzählen */
  padding: 12px 16px;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s;
}

.quiz-option:hover {
  background: #f9fafb;
}
.quiz-option:active{ transform: translateY(1px); }
.quiz-option[aria-checked="true"]{ border-color:#111; box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.quiz-option.correct{ border-color:#10b981; box-shadow: 0 6px 16px rgba(16,185,129,.25); }
.quiz-option.wrong{ border-color:#ef4444; box-shadow: 0 6px 16px rgba(239,68,68,.20); }

.quiz-actions{ display:flex; gap:10px; justify-content:flex-start; margin-top: 8px; }
.quiz-meta{ color: var(--muted); font-size: 13px; }

@media (prefers-reduced-motion: reduce){
  .quiz-option{ transition: border-color .15s ease; }
}
/* Container */
/* Container */
.quiz-progress {
  height: 14px;
  background: #f0f4ff;            /* sehr helles Blau als Hintergrund */
  border-radius: 7px;
  overflow: hidden;
  margin: 14px 0;
}

/* Balken */
.quiz-progress div {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg,
              rgba(147,197,253,1) 0%,     /* hellblau am Anfang */
              rgba(59,130,246,0.85) 50%, /* satteres Blau in der Mitte */
              rgba(191,219,254,0.6) 100% /* transparent-blaues Auslaufen */
            );
  border-radius: 7px;
  transition: width 0.6s ease-in-out;   /* weiches Fließen */
}
.quiz-option:active{ transform: translateY(1px); }
.quiz-option[aria-checked="true"]{ border-color:#111; box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.quiz-option.correct{ border-color:#10b981; box-shadow: 0 6px 16px rgba(16,185,129,.25); }
.quiz-option.wrong{ border-color:#ef4444; box-shadow: 0 6px 16px rgba(239,68,68,.20); }
.quiz-actions{ display:flex; gap:10px; justify-content:flex-start; margin-top: 8px; }
.quiz-meta{ color: var(--muted); font-size: 13px; }

.quiz-actions .btn#btnNext.active {
  background-color: #000; 
  color: #fff;
  cursor: pointer;
}

.quiz-actions .btn#btnNext.active {
  background-color: #000; /* Schwarz, wenn aktiviert */
  color: #fff;
  cursor: pointer;
}

:root{ --homeHeroH: 42vh; }
.landing-hero{ position: relative !important; height: auto !important; min-height: 28vh; }
body[data-view="home"] main.container {
  padding-top: 0 !important;
}
@media (orientation: landscape){
  :root{ --homeHeroH: 28vh; }
  body[data-view="home"] main.container{ padding-top: 0 !important; }

}
body[data-view="country"] .landing-hero,
body[data-view="quiz"] .landing-hero{ display:none; }
#country .hero-ctas{
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}







/* --- UMAP Card präsenter machen --- */
#umap .card .body { padding: 12px; }




.umap-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px; font-size:13px; cursor:pointer;
  border:1px solid rgba(0,0,0,.08); background:#fafafa;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.umap-chip::before{
  content:""; width:10px; height:10px; border-radius:50%;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
}
.umap-chip:hover{ transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.umap-chip.is-off{ opacity:.45; background:#f3f4f6; }

/* Tooltip-Text dezenter */
#umap .hint{ margin-top: 14px; }

/* Kleinere Devices: mehr Höhe geben */
@media (max-width: 640px){
  #umap .chart-wrap{ height: 56vh; }
}
/* === Blaues Hero-Overlay (gewinnt sicher) === */
.landing-hero > .landing-hero__bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(0,128,255,0.25) 0%,
      rgba(0,128,255,0.15) 40%,
      rgba(255,255,255,0) 100%
    ) !important;       /* falls irgendwo noch ein anderes 'background' steht */
  z-index: 0;
}
.landing-hero { position: relative; }      /* nötig als Bezug für absolute */
.landing-hero__content { position: relative; z-index: 1; }  /* Text darüber */
/* Glasige Pillen wie der PRE-Chip */
.pill-glass {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 6px 12px;
  border-radius: 999px;

  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.26);
  color: #fff;
  text-decoration: none;

  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;         /* exakt wie PRE */
  letter-spacing: .14em;             /* exakt wie PRE */
  backdrop-filter: blur(2px);
  box-shadow: none;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}

.pill-glass:hover { 
  background: rgba(255,255,255,.20);
  border-color: rgba(255,255,255,.38);
  transform: translateY(-1px);
}

.pill-glass:active { transform: translateY(0); }

.pill-glass:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,.35);
}

/* Falls frühere Hero-Button-Regeln dazwischenfunken, überschreib sie gezielt: */
.landing-hero .btn.pill-glass { 
  border: 1px solid rgba(255,255,255,.26) !important;
  background: rgba(255,255,255,.14) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 6px 12px !important;
  box-shadow: none !important;
}
/* === Einmal zentral definieren, wie der Chip aussieht === */
/* Global – Startwerte (u.a. für Landing-Hero) */
:root{
  --chip-bg:     rgba(255,255,255,.25);
  --chip-border: rgba(255,255,255,.26);
  --chip-color:  #fff;
  --chip-pad:    6px 10px;
  --chip-radius: 999px;
  --chip-fs:     13px;
  --chip-ls:     .14em;
  --chip-fw:     600;
}

/* Startseite (Landing-Hero) explizit auf „gläsern“ fixieren */
/* Startseite: Pillen mit leichtem Blautouch */
.landing-hero {
  --chip-bg:     rgba(200,230,255,0.18);   /* hellblau-transparent */
  --chip-border: rgba(120,170,255,0.35);   /* blauer Rand */
  --chip-color:  #fff;                     /* Text bleibt weiß */
}

/* Nur auf der Country-Seite kräftiger machen */
#country{
  --chip-bg:     rgba(255,255,255,.45); /* weniger transparent */
  --chip-border: rgba(255,255,255,.60);
}
/* Der bestehende Pre‑Chip nutzt die gleichen Variablen */
.landing-hero__pre{
  display:inline-block;
  background: var(--chip-bg);
  border:    1px solid var(--chip-border);
  color:     var(--chip-color);
  padding:   var(--chip-pad);
  border-radius: var(--chip-radius);
  font-size: var(--chip-fs);
  letter-spacing: var(--chip-ls);
  text-transform: uppercase;
  font-weight: var(--chip-fw);
  backdrop-filter: blur(2px);
}

/* Hero-Buttons im PRE-Chip-Look – graue, dünnere Schrift */
.landing-hero .landing-hero__cta .btn {
  background: var(--chip-bg) !important;
  border:     1px solid var(--chip-border) !important;
  color:      #333 !important;        /* dunkles Grau */
  padding:    var(--chip-pad);
  border-radius: var(--chip-radius);
  font-size:  var(--chip-fs);
  letter-spacing: var(--chip-ls);
  text-transform: uppercase;
  font-weight: 500;                   /* etwas dünner */
  box-shadow: none;
}

/* Hover mit grauer Schrift beibehalten */
.landing-hero .landing-hero__cta .btn:hover {
  background: rgba(255,255,255,.18) !important;
  border-color: #333 !important;
  color: #333 !important;
}
/* Untere Reihe - Länder */
.landing-hero__chips .chip {
  background: rgba(255, 255, 255, .14);
  border: 1px solid #fff;              /* weiße Umrandung */
  color: #666;                         /* weiches Grau */
  padding: var(--chip-pad);
  border-radius: var(--chip-radius);
  font-size: 12px;                     /* kleiner als oben */
  letter-spacing: 0;
  text-transform: none;                /* normale Schreibweise */
  font-weight: 500;
}

/* Hover-Effekt gleich halten */
.landing-hero__chips .chip:hover {
  background: rgba(255,255,255,.18);
  border-color: #333;
  color: #333;
}
/* Obere Reihe - Navigation */
.landing-hero__cta .btn {
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(0,0,0,.25);   /* hellgraue Umrandung */
  color: #000;                         /* schwarz */
  padding: var(--chip-pad);
  border-radius: var(--chip-radius);
  font-size: var(--chip-fs);
  letter-spacing: var(--chip-ls);
  text-transform: uppercase;
  font-weight: 600;
}
/* Obere Reihe - Navigation */
.landing-hero__cta {
  margin-bottom: 14px; /* Abstand zur unteren Reihe */
}
/* Einheitliche Topic-Bilder (nur JPG, Pfad /img/) */
.cover.bg-topic--communication       { background-image: url('img/communication.jpg'); }
.cover.bg-topic--dresscode           { background-image: url('img/dresscode.jpg'); }
.cover.bg-topic--negotiation         { background-image: url('img/negotiation.jpg'); }
.cover.bg-topic--etiquette { background-image: url('img/business_etiquette.jpg'); }
.cover.bg-topic--decision_making     { background-image: url('img/decision.jpg'); }
.cover.bg-topic--lewis_model         { background-image: url('img/lewis.jpg'); }
.cover.bg-topic--hofstede_dimensions { background-image: url('img/hofstede.jpg'); }
.cover.bg-topic--business_cards      { background-image: url('img/cards.jpg'); }
.cover.bg-topic--gesteland_rules     { background-image: url('img/gesteland.jpg'); }
.cover.bg-topic--giftgiving          { background-image: url('img/gift.jpg'); }
.cover.bg-topic--punctuality         { background-image: url('img/punctuality.jpg'); }
.cover.bg-topic--bargaining_behavior { background-image: url('img/bargaining.jpg'); }
.cover.bg-topic--presentations       { background-image: url('img/presentations.jpg'); }
.cover.bg-topic--after_work          { background-image: url('img/afterwork.jpg'); }

/* Fallback (falls mal kein Match) */
.cover.bg-topic--default             { background-image: url('img/default.jpg'); }

/* Sichtbarkeit & Zuschnitt (falls nicht vorhanden) */
.cover.image { min-height: 180px; background-size: cover; background-position: center; }
.cover.image .title { color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.5); }

.cover.bg-topic--decision        { background-image: url('img/decision.jpg'); }      /* statt decision_making */
.cover.bg-topic--hofstede        { background-image: url('img/hofstede.jpg'); }      /* statt hofstede_dimensions */
.cover.bg-topic--gesteland       { background-image: url('img/gesteland.jpg'); }     /* statt gesteland_rules */
.cover.bg-topic--bargaining      { background-image: url('img/bargaining.jpg'); }    /* statt bargaining_behavior */
.cover.bg-topic--organization
{ background-image: url('img/organization.jpg'); } 


/* Mobile: nur eine Kachel pro Zeile */
@media (max-width: 768px){
  #topicGrid{
    display: grid;
    grid-template-columns: 1fr !important; /* 1 Spalte */
    gap: 12px; /* Abstand zwischen Kacheln */
  }
  #topicGrid .card{
    width: 100%;
  }
}
/* Einheitlicher Hero‑Button‑Look: Startseite & Länderansicht */
.landing-hero .landing-hero__cta .btn,
#country .hero-ctas .btn {
  background: var(--chip-bg) !important;
  border: 1px solid var(--chip-border) !important;
  color: #000 !important;
  padding: var(--chip-pad);
  border-radius: var(--chip-radius);
  font-size: var(--chip-fs);
  letter-spacing: var(--chip-ls);
  text-transform: uppercase;
  font-weight: 600;
  box-shadow: none;
}

.landing-hero .landing-hero__cta .btn:hover,
#country .hero-ctas .btn:hover {
  background: rgba(255,255,255,.18) !important;
  border-color: #333 !important;
  color: #333 !important;
}

/* (Optional) „ghost“ auch angleichen – gleicher Look wie oben */
.landing-hero .landing-hero__cta .btn.ghost,
#country .hero-ctas .btn.ghost {
  background: var(--chip-bg) !important;
  border: 1px solid var(--chip-border) !important;
  color: #000 !important;
}
/* Rechte Spalte: Cards wie auf der Startseite */
.right-column .card{
  width: 100%;
  position: relative;
  overflow: hidden;
  break-inside: avoid;
  margin-bottom: var(--gap);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

/* Cover füllt die Karte; Höhe wie auf Home über min-height */
.right-column .card .cover.image{
  min-height: 180px;           /* ggf. 200px, wenn du's gleich wie Home willst */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Keine alte Titel-Leiste im Cover */
.right-column .card .cover .title{ display:none; }

/* Body unten (kein Overlay) – wie Home */
.right-column .card .body{
  padding: 12px 14px;
  color: #4b5563;
  font-size: 14px;
}

/* Bottom‑Sheet: flüssiges Dragging auf Mobile */
.sheet { touch-action: pan-y; will-change: transform; }
.sheet.dragging { transition: none !important; }  /* während Drag keine Animation */
.country-content .hofstede {
  margin: 0 auto;        /* horizontal mittig */
  max-width: 100%;       /* nicht breiter als Bildschirm */
  display: block;        /* stellt sicher, dass margin: auto wirkt */
}

.country-content .hofstede canvas {
  display: block;
  margin: 0 auto;        /* Chart selbst mittig */
  max-width: 95vw;       /* nicht über den Screen hinaus */
}
/* Country → Hofstede mittig + kompakt */
#country .left-column .hofstede { 
  margin: 0 auto; 
  max-width: 100%;
}

#country .left-column .hofstede .hofstede-controls { 
  justify-content: center; 
  text-align: center; 
}

#country .left-column .chart-wrap{
  width: 100%;
  max-width: 520px;      /* darf bleiben, aber zentriert */
  margin-left: auto;
  margin-right: auto;
}

#country .left-column .chart-wrap canvas{
  display: block;
  width: 100% !important;   /* wichtig: Canvas selbst skaliert */
  height: auto !important;
  margin: 0 auto;
}
/* --- Bottom Sheet: Snap + Drag UX (improved) --- */

/* Backdrop für Tiefe + Klick zum Schließen */
.sheet-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease;
  z-index: 999;
}
.sheet-backdrop.open {
  opacity: 1; pointer-events: auto;
}

.sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 100%);            /* geschlossen */
  z-index: 1000;

  /* Größen & Layout */
  width: min(100%, 720px);
  max-width: 100%;
  /* fast Vollhöhe auf Mobile; dynamische Viewport-Einheit + Safe-Areas */
  height: calc(100dvh - env(safe-area-inset-top) - 8px);
  max-height: 100dvh;

  border-radius: 16px 16px 0 0;
  background: #fff;
  box-shadow: 0 -10px 30px rgba(0,0,0,.18);

  transition: transform .18s ease;
  will-change: transform;

  /* wichtig fürs Draggen */
  touch-action: none;                 /* verhindert Scroll-Konflikte beim Drag */
  overscroll-behavior: contain;       /* keine Gummiband-Effekte */
}

/* Start in Halbansicht; auf großen Screens etwas flacher */
.sheet.open { transform: translate(-50%, 38vh); }
@media (min-width: 880px) {
  .sheet.open { transform: translate(-50%, 32vh); }
}

/* während des Drags keine Animation */
.sheet.dragging { transition: none; }




/* Header sticky, damit Actions sichtbar bleiben */
.sheet-header {
  position: sticky; top: 0;
  background: linear-gradient(#fff, rgba(255,255,255,.96));
  backdrop-filter: saturate(120%) blur(2px);
  z-index: 1;
}

/* Body-Scroll: nur in Vollansicht */
.sheet[data-state="full"] .sheet-body { 
  overflow: auto;
  -webkit-overflow-scrolling: touch; /* iOS Momentum Scroll */
}
.sheet:not([data-state="full"]) .sheet-body { overflow: hidden; }

/* Bessere Scrollbar (dezent) */
.sheet-body::-webkit-scrollbar { width: 8px; }
.sheet-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); border-radius: 8px; }
.sheet-body { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.18) transparent; }

/* Fußzeile “andocken” und Safe‑Area beachten (iPhone) */
.sheet-actions {
  position: sticky; bottom: 0;
  background: linear-gradient(rgba(255,255,255,.96), #fff);
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}

/* Fokus-Styles für Tastaturbedienung */
.sheet :where(button, .btn, [role="button"]):focus-visible {
  outline: 2px solid #111; outline-offset: 2px;
  border-radius: 8px;
}

/* Reduce Motion: respektiere Nutzerpräferenz */
@media (prefers-reduced-motion: reduce) {
  .sheet,
  .sheet-backdrop { transition: none; }
}

/* Desktop: etwas “Card”-iger */
@media (min-width: 1024px) {
  .sheet {
    border-radius: 16px;            /* rundum */
    height: min(84vh, 760px);
  }
}
/* --- Topic TOC (Impuls) --- */
.toc {
  position: sticky; top: 0;
  display: flex; gap: 8px; padding: 10px 12px;
  background: linear-gradient(#fff, rgba(255,255,255,.96));
  border-bottom: 1px solid #f0f0f0;
  z-index: 2;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.toc::-webkit-scrollbar { display: none; }
.toc-btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid #e5e7eb; border-radius: 999px;
  padding: 6px 10px; font: 500 13px/1 system-ui, sans-serif;
  background: #fff; cursor: pointer;
}
.toc-btn .ico { font-size: 16px; line-height: 1; }
.toc-btn[aria-current="true"] { border-color: #111; box-shadow: 0 0 0 2px #111 inset; }

.topic-intro { padding: 12px 16px 6px; font-size: 14px; color:#444; }
.topic-intro .title { font-weight: 700; margin-bottom: 4px; }

.section { padding: 14px 16px 6px; scroll-margin-top: 64px; border-bottom: 1px solid #f5f5f5; }
.section h3 { font-size: 16px; margin:0 0 6px; display:flex; align-items:center; gap:6px; }
.section h3 .ico { font-size: 18px; }
.section:last-child { border-bottom: none; }

/* Nur in Vollansicht scrollen (nutzt dein data-state) */
.sheet[data-state="full"] .sheet-body { overflow:auto; -webkit-overflow-scrolling:touch; }
.sheet:not([data-state="full"]) .sheet-body { overflow:hidden; }

/* Fade-Edges zeigen an, dass horizontal gescrollt werden kann */
.toc {
  position: sticky; top: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.toc::before,
.toc::after {
  content: "";
  position: sticky;
  top: 0;
  width: 24px;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}
.toc::before { left: 0;  background: linear-gradient(90deg, #fff, rgba(255,255,255,0)); }
.toc::after  { right: 0; background: linear-gradient(270deg, #fff, rgba(255,255,255,0)); }
/* Deckt die Naht zwischen Header und TOC ab, damit kein Content "durchblutet" */
.sheet-header {
  background: #fff;               /* volle Deckung (nicht halbtransparent) */
  z-index: 4;
}

/* TOC selbst auch deckend und über dem Body-Content */
.toc {
  background: #fff;               /* statt halbtransparentem Verlauf */
  z-index: 3;
}
/* erlaubt links-andocken auch für die letzten Pills */
.toc {
  display: flex;                     /* wichtig */
}
.toc::after {
  content: "";
  flex: 0 0 var(--toc-trailing, 0px); /* dynamischer Abstand am Ende */
}

/* dünner, klebender "Shim" direkt oberhalb der TOC im Scroll-Container */
.sheet-body::before {
  content: "";
  position: sticky;
  top: 0;                         /* klebt an der Oberkante der sheet-body */
  display: block;
  height: 10px;                   /* Höhe des störenden Spalts – bei Bedarf 6–14px anpassen */
  background: #fff;               /* gleiche Farbe wie das Sheet */
  z-index: 2;                     /* unter TOC, über Content */
}

/* Sicherheit: der Scroll-Container selbst deckend */
.sheet-body {
  background: #fff;
}
/* Header wirklich deckend & über allem */
.sheet-header{
  position: sticky; top: 0;
  background: #fff;
  z-index: 5;
}

/* Scroll-Container: Platz für den Header reservieren + Margin-Collapse verhindern */
.sheet-body{
  position: relative;
  background: #fff;
  --sheet-header-h: 0px;          /* wird per JS gesetzt */
  padding-top: var(--sheet-header-h);
  border-top: 1px solid transparent; /* verhindert Margin-Collapsing des ersten Elements */
}

/* TOC klebt direkt an den "virtuellen" oberen Rand des body (unterhalb des Headers) */
.toc{
  position: sticky; top: 0;
  background: #fff;
  z-index: 4;
  margin-top: 0;                   /* sicherheitshalber */
}
.fab-back {
  position: fixed;
  bottom: 80px;   /* etwas über dem Home-Button */
  right: 20px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #000;
  color: #fff;
  font-size: 20px;
  display: none;      /* standardmäßig unsichtbar */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1000;
}
/* Mehr Abstand zwischen erster und zweiter Button-Zeile im Startseiten-Hero */
.landing-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;     /* horizontal / vertikal Abstand */
  row-gap: 18px;      /* nur die vertikale Lücke erhöhen */
}
/* UMAP Toolbar (über dem Chart) */
.umap-toolbar{
  display:flex; justify-content:flex-end; gap:8px;
  margin-bottom: 10px;
}

/* --- Lightweight Modal --- */
.modal-backdrop{
  position:fixed; inset:0;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(2px);
  z-index: 1200;
  opacity: 0; transition: opacity .15s ease;
}
.modal-backdrop[aria-hidden="false"]{ opacity: 1; }

.modal{
  position: fixed; inset: 10% auto auto 50%;
  transform: translateX(-50%) translateY(10px);
  width: min(720px, 92vw);
  background:#fff; border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,.18);
  z-index: 1210;
  opacity: 0; transition: opacity .15s ease, transform .18s ease;
}
.modal[aria-hidden="false"]{
  opacity: 1; transform: translateX(-50%) translateY(0);
}

.modal-header{
  display:flex; align-items:center; gap:8px;
  padding: 10px 12px;
  border-bottom: 1px solid #eee;
}
.modal-header h3{ margin:0; font: 700 16px/1 system-ui, sans-serif; }
.modal-close{
  margin-left:auto; border:0; background:transparent; font-size:18px; cursor:pointer;
}

.modal-body{ padding: 12px; display:grid; gap:10px; }
#countrySearchInput{
  padding: 10px 12px; border:1px solid #d1d5db; border-radius:10px; font-size:14px;
}
#countrySearchInput:focus{ outline:none; border-color:#111; box-shadow: 0 0 0 3px rgba(17,17,17,.10); }

.modal-list{
  list-style:none; margin:0; padding:0; max-height: 50vh; overflow:auto;
  border:1px solid #eee; border-radius:10px;
}
.modal-list li{
  padding:10px 12px; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid #f4f4f4;
}
.modal-list li:last-child{ border-bottom:none; }
.modal-list li:hover{ background:#f9fafb; }
.modal-list .hint{ color:#6b7280; font-size:12px; }
.landing-hero__chips {
  display: grid;
  grid-auto-flow: column;            /* 👈 nur Spalten, also eine Zeile */
  grid-auto-columns: max-content;    /* Breite pro Chip passend zum Inhalt */
  column-gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0;
  width: 100%;
}

.landing-hero__chips .chip {
  white-space: nowrap;               /* kein Zeilenumbruch im Chip */
}
.landing-hero__chips {
  scroll-snap-type: x proximity;
  mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}

.landing-hero__chips .chip {
  scroll-snap-align: start;
}
/* ==========================================
   Einheitlicher Vollbild-Layer für Quiz / Hofstede / UMAP
   ========================================== */

/* Vollbild-Hintergrund mit Gradient – ohne 100vw-Gap */
/* Vollbild-Layer: nur oben/unten Safe-Area, KEIN seitliches Padding */
/* Vollbild-Layer wieder zurückgesetzt */
.fullbleed--blue{
  --pad: clamp(12px, 3vw, 24px);

  position: fixed;
  inset: 0;

  width: 100%;
  height: 100dvh;
  box-sizing: border-box;

  /* Safe Areas für alle Seiten wie vorher */
  padding:
    max(var(--pad), env(safe-area-inset-top))
    max(var(--pad), env(safe-area-inset-right))
    max(var(--pad), env(safe-area-inset-bottom))
    max(var(--pad), env(safe-area-inset-left));

  background: linear-gradient(
    to bottom,
    rgba(219,234,254,1) 0%,
    #fff 20%,
    #fff 100%
  );

  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: manipulation;
}

@supports (width: 100svw){
  .fullbleed--blue { width: 100svw; }
}

/* Interner Scrollbereich */
.fullbleed__content{
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;

  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  justify-items: center;
  gap: 16px;
}
/* === Hofstede: Container transparent, Chart ohne Box === */
#hofstede .card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  max-width: 760px;
  margin: 0 auto;
}
#hofstede .card .body {
  padding: 0; /* kein Extra-Innenabstand */
}
#hofstede .chart-wrap {
  width: 100%;
  max-width: 620px;
  margin: 20px auto 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* === UMAP: Chart transparent, keine Boxen === */
#umap .card,
#umap .umap-container,
#umap .chart-wrap {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
#umap .chart-wrap {
  height: 70svh;              /* Chart groß, ohne Box */
  min-height: 320px;
  margin: 0 auto;
}
#umap canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  background: transparent !important;
}
#countrySuggestions {
  max-height: 240px;
  overflow: auto;
}
#countrySuggestions.open { display: block; }
#countrySuggestions [role="option"].active {
  outline: none;
  background: rgba(0,0,0,.06);
}
/* Sheet: Innen darf vertikal scrollen; Drag nur am Header/Grabber starten */
.sheet {
  touch-action: pan-y;              /* NICHT global blockieren */
  overscroll-behavior: contain;
}
.sheet-body {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}


/* TOC: Standard-Pille neutral … */
.toc-btn {
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: 6px 10px;
  background: #fff;
  box-shadow: none;
}

/* … nur bei Tap aktiv (schwarze Umrandung) */
.toc-btn.is-active {
  border-color: #111;
  box-shadow: 0 0 0 2px #111 inset;
}

/* Aria-Status NICHT visuell stylen (nur a11y) */
.toc-btn[aria-current="true"] {
  border-color: #e5e7eb;
  box-shadow: none;
}
/* Basis */
.toc-btn{
  border: 1px solid #e5e7eb;
  box-shadow: none;
}

/* ARIA-Status bleibt neutral (nur fürs A11y) */
.toc-btn[aria-current="true"]{
  border-color: #e5e7eb;
  box-shadow: none;
}

/* 💥 Sichtbare Aktivierung NUR bei Tap — MUSS zuletzt stehen */
.toc-btn.is-active{
  border-color: #111 !important;
  box-shadow: 0 0 0 2px #111 inset !important;
}
/* Glass-Infoleiste: schwebend über dem Bild */
.card.card--glass { position: relative; overflow: hidden; }
.card.card--glass .cover { min-height: 180px; } /* genug Platz fürs Overlay */

/* Lesbarkeitsverlauf auf dem Bild */
.card.card--glass .cover::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,0) 60%);
  pointer-events:none;
}

/* Die "Balken"-Leiste wird zur gläsernen Infoleiste */
.card.card--glass .body{
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  padding: 8px 12px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: #111; font-size: 14px; font-weight: 500;
  border-radius: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px); /* iOS */
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
}

/* Fallback wenn kein Backdrop-Filter unterstützt wird */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .card.card--glass .body{
    background: rgba(255,255,255,.9);
  }
}
@media (max-width: 640px){
  .card.card--glass .body{
    left: 10px; right: 10px; bottom: 10px; padding: 7px 10px;
    font-size: 13px;
  }
}


 .cover.image {
  background-size: cover;         /* immer ganze Kachel füllen */
  background-position: center;    /* Bild mittig ausrichten */
  background-repeat: no-repeat;   /* kein Kachelmuster */
}
/* --- RIGHT COLUMN: stabiles Grid statt column-count --- */
.right-column .masonry{
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--gap);
  column-count: initial !important;   /* alte Spaltenlogik aus */
  column-gap: initial !important;
}

/* Karten passen sich dem Grid an */
.right-column .card{
  width: 100%;
  margin: 0;
}

/* Cover-Frame steuert die Höhe; Bild immer zentriert */
.right-column .card .cover{
  aspect-ratio: 4 / 3;
  min-height: 0;
  height: auto;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Sicherheitsnetz: falls irgendwo noch ein shorthand 'background' steht */
.right-column .card .cover.image{
  background-position-x: 50% !important;
  background-position-y: 50% !important;
}
/* Immer Grid – kein column-count mehr */
.right-column .masonry{
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--gap);
  column-count: initial !important;
  column-gap: initial !important;
}

/* Landscape/Portrait optional feinjustieren */
@media (orientation: portrait){
  .right-column .masonry{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1200px){
  .right-column .masonry{
    grid-template-columns: repeat(3, 1fr);
  }
}
/* Karte passt sich dem Grid an */
.right-column .card{
  width: 100%;
  margin: 0;
}

/* Einheitliche Bildfläche: 4:3; zentriert zugeschnitten */
.right-column .card .cover,
.right-column .card .cover.image{
  aspect-ratio: 4 / 3;
  min-height: 0;
  height: auto;
  background-size: cover !important;
  background-position: 50% 50% !important; /* exakt mittig */
  background-repeat: no-repeat !important;
}

/* Falls irgendwo ein 'background'-Shorthand reinfunkt: */
.right-column .card .cover.image{
  background-position-x: 50% !important;
  background-position-y: 50% !important;
}
/* Compare-Button im Hofstede-View dauerhaft ausblenden */
#hofstedeUpdate { display: none !important; }

#umap .umap-subtitle {
  font-size: 0.95rem;
  color: #374151;             /* dunkleres Grau = bessere Lesbarkeit */
  text-align: center;
  margin: 6px 0 4px;          /* ganz nah an die Legende */
  line-height: 1.4;
  font-weight: 500;
}
#umap .hint {
  font-size: 0.95rem;
  color: #374151;
  text-align: center;
  margin-top: 8px;      /* Abstand zum Chart */
  margin-bottom: 2px;   /* sehr nah an der Legende */
  line-height: 1.4;
  font-weight: 500;
}
}
/* Radios unsichtbar, aber fokusierbar lassen */
.quiz-count__options input[type="radio"]{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Grundstil der Pillen (Label als Container) */
.quiz-count__options label{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
  transition: all .25s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

/* Hover */
.quiz-count__options label:hover{
  background: #e0e7ff;
  border-color: #93c5fd;
  color: #1d4ed8;
}

/* ✅ Aktiv: wenn das Label einen "checked" Input enthält */
.quiz-count__options label:has(> input[type="radio"]:checked){
  background: linear-gradient(90deg, #93c5fd, #60a5fa, #3b82f6);
  border-color: #2563eb;
  color: #fff;
  box-shadow: 0 2px 6px rgba(59,130,246,.35);
}

/* Tastaturfokus (Input ist unsichtbar → zeig Ring am Label) */
.quiz-count__options label:has(> input[type="radio"]:focus-visible){
  box-shadow: 0 0 0 3px rgba(59,130,246,.35);
}

/* Kleiner „Press“-Effekt */
.quiz-count__options label:active{
  transform: translateY(1px);
}

/* --- Bottom Sheet Grabber (swipe affordance) --- */
.sheet-header .grabber{
  display:block;
  width:44px;
  height:5px;
  margin:4px auto 8px;            /* oben mittig */
  background:#c8cbd1;             /* neutraler Grauton */
  border-radius:999px;
  opacity:.95;
  cursor:grab;
  pointer-events:auto;
  user-select:none;
  -webkit-user-select:none;
}
.sheet-header .grabber:active{
  cursor:grabbing;
  transform:scaleX(.98);
}

/* Kontrastmodus: etwas dunkler */
@media (prefers-contrast: more){
  .sheet-header .grabber{ background:#737373; }
} /* <-- WICHTIG: diesen Block schließen! */

/* Touch-Verhalten:
   - Header darf vertikal scrollen (pan-y)
   - Nur der kleine Grabber „fängt“ Pointer für Drag ein */
.sheet-header{
  touch-action: pan-y;

}
.sheet-header{ position:relative; z-index:2; }
/* --- Grabber visibility fix: absolute top-center + header padding --- */
.sheet-header{ position: relative; padding-top: 18px; }
.sheet-header .grabber{
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 5px;
  border-radius: 999px;
  background: #c8cbd1;
  opacity: .95;
}
@media (prefers-contrast: more){
  .sheet-header .grabber{ background:#737373; }

footer.app {
  text-align: center;
  font-size: 14px;
  color: #111;
  line-height: 1.4;
  padding: 10px 12px;
}
footer.app .footer-subline {
  font-size: 12px;
  color: #555;
  margin-top: 2px;
}

/* sorgt für schöne Umbrüche ohne führenden Punkt */
.footer-flex{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;            /* darf umbrechen */
}
.footer-flex .chunk{ white-space: nowrap; } /* hält jede Wortgruppe zusammen */
.footer-flex .sep{ pointer-events: none; }  /* nur Deko */