/* =====================================================
   TropiaV Core Styles – polished v2
   (Farben bleiben, Struktur & Typo verbessert, zentrierter Aufbau)
   ===================================================== */
:root{
  /* Farben */
  --bg: #1A1A1A;
  --bg-elev: #121212;
  --text: #FFFFFF;
  --text-dim: #CCCCCC;
  --brand: #FFD700;
  --brand-2: #B8860B;
  --accent: #FF8C00;
  --muted: #2A2A2A;

  /* Layout & FX */
  --radius: 14px;
  --shadow-1: 0 6px 18px rgba(0,0,0,.35);
  --shadow-2: 0 14px 36px rgba(0,0,0,.45);
  --container: 1200px;
  --h-header: 72px;

  /* Spacing */
  --gap-1: .5rem;
  --gap-2: 1rem;
  --gap-3: 1.5rem;
  --gap-4: 2rem;
  --gap-6: 3rem;

  /* Typo-Scale (fluid, mit Max-Größen) */
  --fs-xs: clamp(.85rem, .8vw, .95rem);
  --fs-sm: clamp(.95rem, .9vw, 1rem);
  --fs-md: clamp(1rem, 1vw, 1.05rem);
  --fs-lg: clamp(1.15rem, 1.4vw, 1.25rem); /* H4, große Buttons */
  --fs-xl: clamp(1.4rem, 2.2vw, 1.9rem);   /* H3 */
  --fs-2xl: clamp(1.8rem, 3vw, 2.4rem);    /* H2 */
  --fs-3xl: clamp(2.2rem, 4vw, 3rem);      /* H1 (max gedeckelt) */

  /* Line-Clamp (~25-Wörter-Äquivalent über Zeilen) */
  --clamp-desktop: 3;
  --clamp-tablet: 4;
  --clamp-mobile: 6;
}

/* =========================
   Reset & Base
   ========================= */
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
img,svg,video{ display:block; max-width:100%; }

body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Akrobat", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  padding-top: var(--h-header);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Zentriertes Grundlayout */
.container{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 32px);
}

/* Lesebreite: Texte nicht zu lang */
.prose, :where(.hero-content, .section .container, .footer .container){
  margin-inline: auto;
  max-width: 68ch; /* ≈ 65–70 Zeichen */
}

/* Typografie */
h1,h2,h3,h4,h5{ line-height:1.2; letter-spacing:.2px; overflow-wrap:anywhere; hyphens:auto; text-wrap:balance; }
h1{ font-size: var(--fs-3xl); }
h2{ font-size: var(--fs-2xl); color: var(--brand); }
h3{ font-size: var(--fs-xl); }
h4{ font-size: var(--fs-lg); }

p{ color: var(--text-dim); font-size: var(--fs-md); overflow-wrap:anywhere; hyphens:auto; }
small, .text-xs{ font-size: var(--fs-xs); color: var(--text-dim); }

/* Vertikale Rhythmik */
:where(.hero-content, .section .container, .footer .container)
  > :where(h1,h2,h3,h4,p,ul,ol,blockquote){
  margin-bottom: 1rem;
}

/* Links & Fokus (A11y) */
a{ color: var(--brand); text-decoration: none; }
a:hover{ color:#0F0F0F; background: var(--brand); }
:focus-visible{ outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 8px; }

/* =========================
   Multi-Line Clamp (~25 Wörter)
   ========================= */
:where(.hero p, .section p, .card p):not(.no-clamp){
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 1024px){ :where(.hero p, .section p, .card p):not(.no-clamp){ -webkit-line-clamp: var(--clamp-desktop);} }
@media (min-width: 640px) and (max-width: 1023px){ :where(.hero p, .section p, .card p):not(.no-clamp){ -webkit-line-clamp: var(--clamp-tablet);} }
@media (max-width: 639px){ :where(.hero p, .section p, .card p):not(.no-clamp){ -webkit-line-clamp: var(--clamp-mobile);} }

/* Einzeiliges Ellipsis */
.truncate{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* =========================
   Header / Navigation (zentriert, clean)
   ========================= */
.header{
  position: fixed; inset: 0 0 auto 0; height: var(--h-header);
  display: flex; align-items: center; z-index: 100;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-1);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:100%; }
.logo{ font-size: 1.25rem; font-weight: 900; color: var(--brand); letter-spacing:.6px; text-transform:uppercase; }
.logo span{ color:#fff; }

.nav ul{ list-style:none; display:flex; gap: clamp(14px, 2vw, 24px); align-items:center; }
.nav a{
  display:inline-block; padding: 10px 14px; border-radius: 10px;
  font-weight: 700; color: var(--brand);
  transition: transform .15s ease, background-color .25s ease, opacity .25s ease;
}
.nav a:hover{ transform: translateY(-1px); }
.nav a:active{ transform: translateY(0); }
@media (max-width: 900px){ .nav ul{ gap: 10px; } }

/* =========================
   Hero (zentrierter Aufbau)
   ========================= */
.hero{
  min-height: calc(100vh - var(--h-header));
  background: linear-gradient(45deg, var(--brand), var(--brand-2), var(--accent), #696969);
  background-size: 400% 400%;
  animation: gradient 16s ease infinite;
  display:grid; place-items:center; text-align:center;
}
.hero .container{ display:grid; grid-template-columns: 1.1fr .9fr; align-items:center; gap: var(--gap-6); }
.hero-content{ text-align: center; }
.hero h1{ margin-bottom:.5rem; }
.hero p{ margin-top:.5rem; }
.hero-cta{ margin-top: var(--gap-3); display:flex; gap: var(--gap-2); flex-wrap:wrap; justify-content:center; }

.btn{
  display:inline-block; padding: 12px 20px; border-radius: 12px;
  background: var(--brand); color:#0F0F0F; font-weight: 800; font-size: var(--fs-sm);
  transition: transform .15s ease, background-color .25s ease, opacity .25s ease, box-shadow .25s ease;
  box-shadow: var(--shadow-1);
}
.btn:hover{ background:#fff; transform: translateY(-1px); box-shadow: var(--shadow-2); }
.btn--ghost{ background: transparent; border:1px solid var(--brand); color: var(--brand); }
.btn--ghost:hover{ background: var(--brand); color:#0F0F0F; }

@media (max-width: 1000px){ .hero .container{ grid-template-columns: 1fr; } }

/* =========================
   Sektionen (zentriert, klar)
   ========================= */
.section{ padding: clamp(48px, 7vw, 100px) 0; background: transparent; }
.section .container{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: clamp(20px, 3vw, 40px);
}
.section header{ margin-bottom: var(--gap-3); text-align:center; }
.section p{ margin: .25rem 0 1rem; }

/* =========================
   Grids & Cards
   ========================= */
.grid-2{ display:grid; gap: var(--gap-3); grid-template-columns: repeat(2, 1fr); }
.grid-3{ display:grid; gap: var(--gap-3); grid-template-columns: repeat(3, 1fr); }
.grid-4{ display:grid; gap: var(--gap-3); grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px){ .grid-4{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px){ .grid-3{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 650px){ .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; } }

.card{
  background: var(--bg-elev);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius);
  padding: clamp(16px, 2.5vw, 24px);
  box-shadow: var(--shadow-1);
  transition: transform .15s ease, box-shadow .25s ease, border-color .25s ease;
  text-align: center;
  display:flex; flex-direction:column; gap:.6rem; align-items:center;
}
.card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: rgba(255,215,0,.35); }
.card h3, .card p{ max-width: 60ch; }
.card h3{ margin-bottom:.2rem; font-size: var(--fs-lg); line-height: 1.25; }
.card .title-2l{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.card .meta{ color: var(--text-dim); font-size: var(--fs-sm); }

/* =========================
   Galerie
   ========================= */
.gallery{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--gap-3); }
.gallery img{
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 12px; cursor: zoom-in;
  box-shadow: var(--shadow-1);
  transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}
.gallery img:hover{ transform: scale(1.02); box-shadow: var(--shadow-2); }

/* =========================
   Footer
   ========================= */
.footer{ background: #191919; border-top: 2px solid var(--brand); margin-top: var(--gap-6); }
.footer .container{ padding: 28px 0; color: var(--text-dim); text-align: center; font-size: var(--fs-sm); }

/* =========================
   Utils
   ========================= */
.center{ display:flex; align-items:center; justify-content:center; }
.stack{ display:flex; flex-direction:column; gap: var(--gap-2); align-items:center; }
.max-w{ max-width: 68ch; margin-inline:auto; }
.ch{ max-width: 60ch; }
.mt-1{ margin-top: var(--gap-1); } .mt-2{ margin-top: var(--gap-2);} .mt-3{ margin-top: var(--gap-3);} .mt-4{ margin-top: var(--gap-4);} .mt-6{ margin-top: var(--gap-6);} 
.mb-1{ margin-bottom: var(--gap-1); } .mb-2{ margin-bottom: var(--gap-2);} .mb-3{ margin-bottom: var(--gap-3);} .mb-4{ margin-bottom: var(--gap-4);} .mb-6{ margin-bottom: var(--gap-6);} 

/* =========================
   Animationen
   ========================= */
@keyframes gradient{ 0%{ background-position: 0% 50%; } 50%{ background-position: 100% 50%; } 100%{ background-position: 0% 50%; } }
@media (prefers-reduced-motion: reduce){ .hero{ animation: none; } .btn, .card, .gallery img, .nav a{ transition: none; } }