/*
  links.css – eigenes, schlankes Stylesheet fuer die Linkliste (/links).
  Bewusst nicht style.css: Die Seite ist die Einstiegsseite aus dem
  Instagram-Profil, wird meist im In-App-Browser ohne warmen Cache geoeffnet
  und braucht von den 56 KB des Hauptstylesheets nur einen Bruchteil.
  Farben, Schriften und Radien sind aus style.css uebernommen, kein eigenes
  Farbschema (siehe design.md in der Business DNA).
*/

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/opensans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('../fonts/raleway-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --green: #506F1D;
  --green-dark: #304D0B;
  --green-light: #CDDC8F;
  --heading: #1F2618;
  --text: #444444;
  --muted: #565656;
  --border: #e5e7eb;
  --bg: #ffffff;
  --bg-soft: #f7f8f4;
  --shadow-sm: 0 1px 2px rgba(31,31,31,.04), 0 2px 8px rgba(31,31,31,.04);
  --shadow-md: 0 2px 4px rgba(31,31,31,.04), 0 12px 28px rgba(31,31,31,.08);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--bg-soft);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; display: block; }
svg { width: 1em; height: 1em; flex-shrink: 0; }

.skip-link { position: absolute; left: -999px; top: 0; background: var(--green); color: #fff; padding: 10px 16px; z-index: 100; }
.skip-link:focus { left: 10px; top: 10px; }

.lk-shell {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 24px 16px 40px;
}

/* ---------- Kopf: dunkle Karte mit weissem Logo, wie der Seitenfuss ---------- */
.lk-kopf {
  background: var(--heading);
  border-radius: 18px;
  padding: 28px 20px 24px;
  text-align: center;
  color: rgba(255,255,255,.78);
}
.lk-kopf img { width: 190px; margin: 0 auto 16px; }
/* Der Markenname steht schon im Logo. Die Ueberschrift bleibt trotzdem im
   Quelltext, nur unsichtbar: Die Seite behaelt damit eine H1, und wer sie
   sich vorlesen laesst, hoert weiterhin, auf wessen Seite er gelandet ist. */
.lk-kopf h1 {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.lk-kopf p { margin: 0; font-size: .92rem; }

/* ---------- Gruppen ---------- */
.lk-gruppe { margin-top: 28px; }
.lk-gruppe h2 {
  font-family: 'Raleway', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px 4px;
}

.lk-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

/* ---------- Einzelner Link ---------- */
.lk-link {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg);
  color: var(--heading);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.lk-link:hover, .lk-link:focus-visible {
  border-color: var(--green);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.lk-link:focus-visible { outline: 2px solid var(--green-dark); outline-offset: 2px; }

.lk-link__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 10px;
  background: rgba(80, 111, 29, .08);
  color: var(--green);
  font-size: 20px;
}
.lk-link__text { min-width: 0; flex: 1; }
.lk-link__titel {
  display: block;
  font-family: 'Raleway', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--heading);
}
.lk-link__sub {
  display: block;
  font-size: .82rem;
  line-height: 1.35;
  color: var(--muted);
  margin-top: 2px;
}
.lk-link__pfeil { color: var(--muted); font-size: 18px; }

/* Hauptlink auf den Blog: gefuellte Flaeche statt Karte */
.lk-link--primaer {
  background: var(--green);
  border-color: var(--green-dark);
  color: #fff;
}
.lk-link--primaer:hover, .lk-link--primaer:focus-visible { background: var(--green-dark); border-color: var(--green-dark); }
.lk-link--primaer .lk-link__titel { color: #fff; font-size: 1.05rem; }
.lk-link--primaer .lk-link__sub { color: rgba(255,255,255,.8); }
.lk-link--primaer .lk-link__icon { background: rgba(255,255,255,.16); color: #fff; }
.lk-link--primaer .lk-link__pfeil { color: rgba(255,255,255,.8); }

/* ---------- Rechtliches ----------
   Eigener Block statt Kleingedrucktem im Fuss: Impressum und Datenschutz
   sollen ohne Scrollen erkennbar sein und eine Klickflaeche von mindestens
   48 Pixeln haben. */
.lk-recht { display: flex; flex-wrap: wrap; gap: 10px; }
.lk-recht a {
  flex: 1 1 130px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--heading);
  font-size: .92rem;
  text-align: center;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.lk-recht a:hover, .lk-recht a:focus-visible { border-color: var(--green); color: var(--green); }
.lk-recht a:focus-visible { outline: 2px solid var(--green-dark); outline-offset: 2px; }
/* Der Consent-Layer braucht mehr Platz als die beiden Rechtstexte und steht
   deshalb in einer eigenen Zeile. */
.lk-recht__voll { flex-basis: 100%; }

@media (min-width: 480px) {
  .lk-shell { padding: 40px 24px 48px; }
  .lk-kopf { padding: 32px 28px 28px; }
  .lk-kopf h1 { font-size: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lk-link { transition: none; }
  .lk-link:hover, .lk-link:focus-visible { transform: none; }
}