/* ============================================================
   Survival Life — Linkseite (/insta), Umbau 2026-10-22
   Nach Brand-Archiv-Guide (DESIGN.md 0.2): Forest Ink dominant, Birch White,
   Trail Orange nur als Akzent. Barlow für Struktur und Labels, Courier Prime
   für Text, Cormorant Garamond Italic nur für die Tagline.
   Aufbau angelehnt an moderne Link-in-Bio-Seiten: Foto oben, Bildkacheln
   statt reiner Textknöpfe, Partner mit kopierbarem Rabattcode.
   ============================================================ */
:root {
  --ink:    #1F2E2A;
  --paper:  #F2EBDD;
  --orange: #C65A2E;
  --fog:    #6B7269;
  --moss:   #8A9485;
  --paper-soft: rgba(242, 235, 221, 0.72);
  --paper-line: rgba(242, 235, 221, 0.22);
  --ink-deep: #17231F;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Courier Prime', monospace;
  background: var(--ink);
  color: var(--paper);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(1.75rem, 5vw, 3.5rem) 1.1rem 3rem;
  position: relative;
  overflow-x: hidden;
  -webkit-tap-highlight-color: rgba(198, 90, 46, 0.2);
}
body::before {
  content: '';
  position: fixed; inset: 0;
  background: url('../images/topo.svg') center / cover no-repeat;
  opacity: 0.06;
  pointer-events: none;
  z-index: -1;
}
a, button { touch-action: manipulation; }
.lt { width: 100%; max-width: 500px; position: relative; }

/* ---- Kopf ---- */
.lt-head { text-align: center; margin-bottom: 0.5rem; }
.lt-portrait {
  width: 132px; height: 132px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 1rem;
  border: 2px solid var(--paper-line);
  filter: saturate(0.8) contrast(1.06) brightness(0.94);   /* wie auf der Startseite abgemildert */
}
.lt-logo { width: 104px; height: auto; margin: 0 auto 0.7rem; display: block; }
.lt-tagline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic; font-weight: 500; font-size: 1.3rem; color: var(--paper-soft);
}
.lt-intro { font-size: 0.95rem; line-height: 1.6; color: var(--paper-soft); max-width: 26rem; margin: 0.9rem auto 0; }
.lt-social { display: flex; justify-content: center; gap: 0.6rem; margin-top: 1.2rem; }
.lt-social a {
  width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--paper-line); border-radius: 50%; color: var(--paper);
  transition: border-color 0.18s ease, color 0.18s ease;
}
.lt-social svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lt-social svg .fill { fill: currentColor; stroke: none; }
@media (hover: hover) { .lt-social a:hover { border-color: var(--orange); color: var(--orange); } }

/* ---- Gruppen-Label ---- */
.lt-group {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--orange); margin: 2.1rem 0 0.75rem 0.15rem;
}

/* ---- Bildkarten (Kurse) ---- */
.lt-card {
  position: relative; display: block; overflow: hidden; border-radius: 6px; margin-bottom: 0.7rem;
  color: var(--paper); text-decoration: none; background: var(--ink-deep); border: 1px solid var(--paper-line);
}
.lt-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; filter: saturate(0.85); transition: transform 0.4s ease; }
.lt-card-text {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2.2rem 1rem 0.8rem;
  background: linear-gradient(to top, rgba(23, 35, 31, 0.94), rgba(23, 35, 31, 0));
}
.lt-card .lt-main { display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 1.35rem; letter-spacing: 0.03em; line-height: 1.1; }
.lt-card .lt-sub { display: block; font-size: 0.8rem; color: var(--paper-soft); margin-top: 0.15rem; }
.lt-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.lt-pair .lt-card { margin-bottom: 0; }
.lt-pair .lt-card .lt-main { font-size: 1.1rem; }
.lt-pair .lt-card-text { padding: 1.6rem 0.7rem 0.6rem; }
@media (hover: hover) { .lt-card:hover img { transform: scale(1.04); } .lt-card:hover { border-color: var(--paper-soft); } }

/* ---- Zeilen mit Bild (Ausrüstung, Partner, Projekte) ---- */
.lt-row {
  display: flex; align-items: center; gap: 0.9rem; width: 100%; margin-bottom: 0.6rem; padding: 0.55rem 1rem 0.55rem 0.55rem;
  border: 1px solid var(--paper-line); border-radius: 6px; color: var(--paper); text-decoration: none;
  font-family: 'Barlow Condensed', sans-serif; font-size: 1.12rem; font-weight: 500; letter-spacing: 0.03em; min-height: 64px;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.lt-row img { width: 52px; height: 52px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
.lt-row img.lt-logo-img { object-fit: contain; background: var(--paper); padding: 5px; }
.lt-row-plain { padding-left: 1.1rem; }
.lt-row .lt-main { flex: 1; min-width: 0; text-align: left; line-height: 1.15; }
.lt-row .lt-sub { display: block; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); margin-top: 0.2rem; }
.lt-arrow { flex-shrink: 0; font-size: 1.1rem; opacity: 0.6; }
@media (hover: hover) {
  .lt-row:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
  .lt-row:hover .lt-arrow { opacity: 1; }
}
.lt-row:focus-visible { background: var(--paper); color: var(--ink); }

/* ---- Partner-Kacheln mit Rabattcode ---- */
.lt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.lt-tile {
  display: flex; flex-direction: column; border: 1px solid var(--paper-line); border-radius: 6px; overflow: hidden;
}
.lt-tile > a { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 0.9rem 0.7rem 0.7rem; color: var(--paper); text-decoration: none; flex: 1; }
.lt-tile img { width: 64px; height: 64px; object-fit: contain; background: var(--paper); border-radius: 50%; padding: 7px; }
.lt-tile .lt-main { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 1.05rem; letter-spacing: 0.03em; text-align: center; line-height: 1.1; }
.lt-tile .lt-note { font-size: 0.74rem; color: var(--paper-soft); text-align: center; }
.lt-code {
  display: flex; align-items: center; justify-content: center; gap: 0.45rem; width: 100%; min-height: 44px;
  border: 0; border-top: 1px dashed var(--paper-line); background: transparent; color: var(--orange); cursor: pointer;
  font-family: 'Courier Prime', monospace; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.06em;
}
.lt-code svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .lt-tile > a:hover .lt-main { color: var(--orange); } .lt-code:hover { background: rgba(242, 235, 221, 0.06); } }
.lt-grid .lt-tile:last-child:nth-child(odd) { grid-column: span 2; }

:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

/* ---- Fuß ---- */
.lt-foot {
  margin-top: 2.5rem; text-align: center;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 500; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fog); line-height: 1.8;
}
.lt-foot a { color: var(--moss); text-decoration: none; }
@media (hover: hover) { .lt-foot a:hover { color: var(--paper); text-decoration: underline; } }

/* ---- Hinweis „Code kopiert" ---- */
.lt-toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 1rem); opacity: 0; pointer-events: none;
  background: var(--paper); color: var(--ink); padding: 0.6rem 1.1rem; border-radius: 4px;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600; letter-spacing: 0.05em; transition: opacity 0.2s ease, transform 0.2s ease;
}
.lt-toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 360px) { .lt-pair, .lt-grid { grid-template-columns: 1fr; } .lt-grid .lt-tile:last-child:nth-child(odd) { grid-column: auto; } }
@media (prefers-reduced-motion: reduce) {
  .lt-row, .lt-card img, .lt-social a, .lt-toast { transition: none; }
  .lt-card:hover img { transform: none; }
}