/* =========================================================
   PERU — Design System "Tejido"
   Knallig, lebendig, Inka-Textilmuster. Alles CSS, keine Assets.
   ========================================================= */

:root{
  /* Kernpalette – abgeleitet von Andentextilien */
  --rot:      #e0192b;   /* Flaggenrot / Cochenille */
  --rot-tief: #9c0f1c;
  --gold:     #ffb703;   /* Mais, Gold der Inka */
  --gold-hell:#ffd166;
  --tuerkis:  #00b3a4;   /* Türkis, Chrysokoll */
  --magenta:  #d81e7a;   /* Chicha morada */
  --violett:  #6a2c9c;
  --orange:   #ff6b1a;
  --limone:   #b7e03a;
  --nacht:    #140a1e;   /* Hintergrund */
  --nacht-2:  #1e1029;
  --nacht-3:  #2a1739;
  --sand:     #fff4e2;
  --sand-dim: #e6d7c3;

  --radius: 18px;
  --radius-s: 10px;
  --maxw: 1180px;
  --shadow: 0 18px 50px -18px rgba(0,0,0,.85);
  --ring: 0 0 0 2px rgba(255,255,255,.08);

  --f-display: "Archivo Black", "Arial Black", Impact, system-ui, sans-serif;
  --f-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--f-body);
  color:var(--sand);
  background:var(--nacht);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--gold-hell);text-decoration:none}
a:hover{text-decoration:underline}

/* =========================================================
   MUSTER — Inka-Textil-Generatoren (rein CSS)
   ========================================================= */

/* Zickzack-Band (Chevron) */
.muster-chevron{
  background-image:
    linear-gradient(135deg, var(--rot) 25%, transparent 25%),
    linear-gradient(225deg, var(--rot) 25%, transparent 25%),
    linear-gradient(45deg,  var(--gold) 25%, transparent 25%),
    linear-gradient(315deg, var(--gold) 25%, transparent 25%);
  background-position: 10px 0, 10px 0, 0 0, 0 0;
  background-size: 20px 20px;
  background-repeat: repeat;
}

/* Stufenmäander (Chakana-Treppe) */
.muster-treppe{
  background-image:
    repeating-linear-gradient(90deg,
      var(--tuerkis) 0 12px, transparent 12px 24px),
    repeating-linear-gradient(0deg,
      var(--magenta) 0 12px, transparent 12px 24px);
  background-size:24px 24px;
  opacity:.9;
}

/* Rautenreihe */
.muster-raute{
  background-image:
    repeating-conic-gradient(from 45deg,
      var(--violett) 0% 25%, var(--orange) 0% 50%);
  background-size:26px 26px;
}

/* Punkte / Körner */
.muster-korn{
  background-image:radial-gradient(var(--gold) 1.6px, transparent 1.7px);
  background-size:14px 14px;
}

/* Dekoband, das man überall als Trenner einsetzt */
.band{
  height:14px;
  width:100%;
  border-radius:99px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}
.band.gross{height:22px;border-radius:6px}

/* Animiertes Laufband (Nav-Unterkante, Hero-Fuß) */
.band-lauf{
  height:16px;
  background-image:
    linear-gradient(135deg, var(--rot) 25%, transparent 25%),
    linear-gradient(225deg, var(--rot) 25%, transparent 25%),
    linear-gradient(45deg,  var(--gold) 25%, transparent 25%),
    linear-gradient(315deg, var(--gold) 25%, transparent 25%);
  background-position:10px 0,10px 0,0 0,0 0;
  background-size:20px 20px;
  animation:laufen 3.5s linear infinite;
}
@keyframes laufen{to{background-position:30px 0,30px 0,20px 0,20px 0}}

/* =========================================================
   NAVIGATION
   ========================================================= */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(20,10,30,.82);
  backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-inner{
  max-width:var(--maxw);margin:0 auto;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:12px 20px;
}
.brand{
  font-family:var(--f-display);
  font-weight:900;letter-spacing:.06em;text-transform:uppercase;
  font-size:1.15rem;color:#fff;margin-right:14px;
  display:flex;align-items:center;gap:10px;
}
.brand:hover{text-decoration:none}
.flagge{display:inline-flex;width:30px;height:20px;border-radius:4px;overflow:hidden;box-shadow:var(--ring)}
.flagge i{flex:1}
.flagge i:nth-child(1),.flagge i:nth-child(3){background:var(--rot)}
.flagge i:nth-child(2){background:#fff}

.link{
  position:relative;
  color:var(--sand-dim);
  padding:8px 13px;border-radius:99px;
  font-weight:650;font-size:.94rem;
  transition:.22s;
}
.link:hover{color:#fff;background:rgba(255,255,255,.08);text-decoration:none;transform:translateY(-1px)}
.link.aktiv{
  color:var(--nacht);
  background:linear-gradient(135deg,var(--gold),var(--orange));
  box-shadow:0 6px 18px -6px var(--orange);
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  padding:clamp(60px,10vw,120px) 20px clamp(50px,7vw,90px);
  text-align:center;
  overflow:hidden;
  background:
    radial-gradient(900px 500px at 15% 0%,  rgba(216,30,122,.40), transparent 60%),
    radial-gradient(800px 500px at 85% 10%, rgba(0,179,164,.35),  transparent 60%),
    radial-gradient(700px 400px at 50% 100%,rgba(255,183,3,.28),  transparent 65%),
    linear-gradient(180deg,var(--nacht-2),var(--nacht));
}
/* Textil-Schleier über dem Hero */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(45deg,  rgba(255,255,255,.05) 0 2px, transparent 2px 14px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.04) 0 2px, transparent 2px 14px);
  mask-image:linear-gradient(180deg,#000,transparent 85%);
}
.hero > *{position:relative;z-index:2}

.kicker{
  display:inline-block;
  font-size:.78rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  padding:7px 16px;border-radius:99px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  color:var(--gold-hell);
  margin-bottom:22px;
}
.hero h1{
  font-family:var(--f-display);
  font-size:clamp(3rem,11vw,7rem);
  line-height:.92;margin:0 0 20px;
  text-transform:uppercase;letter-spacing:-.02em;
  background:linear-gradient(105deg,var(--gold-hell),var(--orange) 35%,var(--magenta) 70%,var(--tuerkis));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 26px rgba(255,107,26,.35));
}
.hero .sub{
  max-width:720px;margin:0 auto;
  font-size:clamp(1.05rem,2.2vw,1.3rem);
  color:var(--sand-dim);
}
.hero .band-lauf{position:absolute;left:0;right:0;bottom:0;z-index:3}

/* kleinerer Hero für Unterseiten */
.hero.klein{padding:clamp(45px,7vw,80px) 20px clamp(38px,5vw,60px)}
.hero.klein h1{font-size:clamp(2.4rem,7vw,4.4rem)}

/* =========================================================
   LAYOUT
   ========================================================= */
main{max-width:var(--maxw);margin:0 auto;padding:0 20px 90px}
section{padding:clamp(46px,7vw,78px) 0;position:relative}
section + section{border-top:1px solid rgba(255,255,255,.07)}

h2{
  font-family:var(--f-display);
  font-size:clamp(1.8rem,4.2vw,2.9rem);
  line-height:1.1;margin:0 0 10px;text-transform:uppercase;letter-spacing:-.01em;
  color:#fff;
}
h2::after{
  content:"";display:block;width:72px;height:7px;margin-top:14px;border-radius:99px;
  background:linear-gradient(90deg,var(--rot),var(--gold),var(--tuerkis));
}
h3{font-size:1.35rem;margin:34px 0 10px;color:#fff;font-weight:800}
h4{font-size:1.08rem;margin:0 0 8px;color:#fff;font-weight:800}
p{margin:0 0 14px}
.lead{font-size:1.1rem;color:var(--sand-dim);max-width:70ch;margin-bottom:30px}

/* =========================================================
   GRID + KARTEN
   ========================================================= */
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}

.card{
  position:relative;
  background:linear-gradient(160deg,var(--nacht-3),var(--nacht-2));
  border:1px solid rgba(255,255,255,.09);
  border-radius:var(--radius);
  padding:24px 22px;
  overflow:hidden;
  transition:transform .28s cubic-bezier(.2,.8,.3,1), border-color .28s, box-shadow .28s;
}
/* Farbiger Textilstreifen am oberen Rand jeder Karte */
.card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:5px;
  background:linear-gradient(90deg,var(--rot),var(--orange),var(--gold),var(--limone),var(--tuerkis),var(--magenta));
  background-size:200% 100%;
  transition:background-position .6s;
}
.card:hover{
  transform:translateY(-6px);
  border-color:rgba(255,255,255,.22);
  box-shadow:var(--shadow);
}
.card:hover::before{background-position:100% 0}
.card p:last-child{margin-bottom:0}

/* Akzentvarianten */
.card.a-rot::before   {background:var(--rot)}
.card.a-gold::before  {background:var(--gold)}
.card.a-tuerkis::before{background:var(--tuerkis)}
.card.a-magenta::before{background:var(--magenta)}
.card.a-violett::before{background:var(--violett)}
.card.a-limone::before {background:var(--limone)}

.emoji{font-size:2rem;display:block;margin-bottom:10px;line-height:1}

/* Zahlen-Karte */
.card.fakt{text-align:center;padding:26px 16px}
.card.fakt .zahl{
  display:block;
  font-family:var(--f-display);
  font-size:clamp(1.5rem,3.4vw,2.1rem);
  line-height:1.1;
  background:linear-gradient(120deg,var(--gold-hell),var(--orange));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.card.fakt .label{
  display:block;margin-top:8px;
  font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--sand-dim);font-weight:700;
}

/* =========================================================
   DEFINITIONSLISTE / STECKBRIEF
   ========================================================= */
.dl{
  border:1px solid rgba(255,255,255,.09);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--nacht-2);
}
.dl .row{
  display:grid;grid-template-columns:minmax(150px,240px) 1fr;
  gap:14px;padding:14px 20px;
  border-bottom:1px solid rgba(255,255,255,.07);
  transition:background .2s;
}
.dl .row:last-child{border-bottom:0}
.dl .row:hover{background:rgba(255,255,255,.04)}
.dl .k{font-weight:800;color:var(--gold-hell);font-size:.92rem}
.dl .v{color:var(--sand)}
@media(max-width:620px){.dl .row{grid-template-columns:1fr;gap:2px}}

/* =========================================================
   ZEITSTRAHL
   ========================================================= */
.zeit{position:relative;padding-left:34px;margin-top:26px}
.zeit::before{
  content:"";position:absolute;left:10px;top:6px;bottom:6px;width:4px;border-radius:99px;
  background:linear-gradient(180deg,var(--gold),var(--rot),var(--magenta),var(--tuerkis));
}
.zeit .ev{position:relative;margin-bottom:26px}
.zeit .ev::before{
  content:"";position:absolute;left:-30px;top:7px;
  width:14px;height:14px;border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 4px var(--nacht), 0 0 16px var(--gold);
}
.zeit .jahr{
  display:inline-block;font-family:var(--f-display);font-size:.9rem;
  letter-spacing:.06em;color:var(--nacht);
  background:linear-gradient(135deg,var(--gold-hell),var(--orange));
  padding:3px 12px;border-radius:99px;margin-bottom:7px;
}
.zeit .ev h4{margin:4px 0 6px}

/* =========================================================
   TABELLE
   ========================================================= */
.tabelle{width:100%;border-collapse:collapse;margin:18px 0;font-size:.95rem}
.tabelle th{
  text-align:left;padding:12px 14px;
  background:linear-gradient(135deg,var(--violett),var(--magenta));
  color:#fff;font-weight:800;
}
.tabelle th:first-child{border-radius:var(--radius-s) 0 0 0}
.tabelle th:last-child{border-radius:0 var(--radius-s) 0 0}
.tabelle td{padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.tabelle tr:hover td{background:rgba(255,255,255,.04)}
.tabelle-wrap{overflow-x:auto;border-radius:var(--radius-s)}

/* =========================================================
   HINWEIS / ZITAT
   ========================================================= */
.hinweis{
  border-left:6px solid var(--tuerkis);
  background:linear-gradient(90deg,rgba(0,179,164,.14),transparent);
  border-radius:0 var(--radius-s) var(--radius-s) 0;
  padding:16px 20px;margin:22px 0;
}
.hinweis.warn{border-left-color:var(--orange);background:linear-gradient(90deg,rgba(255,107,26,.14),transparent)}
.hinweis.tipp{border-left-color:var(--limone);background:linear-gradient(90deg,rgba(183,224,58,.13),transparent)}
.hinweis strong{color:#fff}

.zitat{
  font-size:1.18rem;font-style:italic;color:#fff;
  padding:22px 26px;margin:26px 0;
  border-radius:var(--radius);
  background:linear-gradient(135deg,rgba(216,30,122,.18),rgba(106,44,156,.18));
  border:1px solid rgba(255,255,255,.12);
}
.zitat .wer{display:block;margin-top:10px;font-style:normal;font-size:.88rem;color:var(--sand-dim);font-weight:700}

/* =========================================================
   CHIPS / TAGS
   ========================================================= */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin:16px 0}
.chip{
  padding:6px 14px;border-radius:99px;font-size:.85rem;font-weight:700;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  color:var(--sand);
  transition:.2s;
}
.chip:hover{background:var(--gold);color:var(--nacht);border-color:var(--gold);transform:translateY(-2px)}

/* =========================================================
   BALKEN (einfache Datenvisualisierung)
   ========================================================= */
.balken{margin:8px 0 16px}
.balken .zeile{margin-bottom:12px}
.balken .kopf{display:flex;justify-content:space-between;font-size:.9rem;font-weight:700;margin-bottom:5px}
.balken .spur{height:12px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden}
.balken .fuell{
  height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--gold),var(--orange),var(--rot));
  width:var(--w,50%);
  animation:fuellen 1.3s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes fuellen{from{width:0}}

/* =========================================================
   SCROLL-ANIMATION
   ========================================================= */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.3,1)}
.reveal.sichtbar{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .band-lauf{animation:none}
  .balken .fuell{animation:none}
  html{scroll-behavior:auto}
}

/* =========================================================
   FOOTER
   ========================================================= */
footer{
  border-top:1px solid rgba(255,255,255,.09);
  background:var(--nacht-2);
  padding:34px 20px 40px;
  text-align:center;color:var(--sand-dim);font-size:.9rem;
}
footer .band{max-width:var(--maxw);margin:0 auto 24px}
footer .quellen{margin-top:10px;font-size:.8rem;opacity:.7;max-width:70ch;margin-left:auto;margin-right:auto}

/* Seiten-Navigation unten */
.weiter{
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:46px;padding-top:26px;border-top:1px solid rgba(255,255,255,.09);
}
.weiter a{
  flex:1;min-width:240px;
  padding:16px 20px;border-radius:var(--radius);
  background:var(--nacht-3);border:1px solid rgba(255,255,255,.10);
  transition:.25s;color:var(--sand);
}
.weiter a:hover{text-decoration:none;transform:translateY(-3px);border-color:var(--gold);box-shadow:var(--shadow)}
.weiter .wo{display:block;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-hell);margin-bottom:4px;font-weight:800}
.weiter .was{font-weight:800;color:#fff;font-size:1.05rem}