/* =========================================================================
   TTBene — Link-Seite (links.html), das Ziel des TikTok-Bio-Links.
   Farben und Schriften kommen aus seite.css; hier steht nur das Layout.
   Eine Spalte, fürs Handy gebaut: jede Karte ist mindestens 64 px hoch.
   ========================================================================= */

.links-seite { background:var(--tief); min-height:100vh; }

.links { max-width:520px; margin:0 auto; padding:40px 20px 32px; }

/* Sprachschalter oben rechts; 44 px Trefferflaeche ueber das Padding. */
.links { position:relative; }
.sprache {
  position:absolute; top:6px; right:8px; padding:14px 12px; font-size:12px; font-weight:700;
  letter-spacing:1.5px; color:var(--tiefText2); text-decoration:none;
}

.kopf { text-align:center; color:var(--tiefText); margin-bottom:28px; }
.kopf-logo { border-radius:20px; display:block; margin:0 auto 14px; }
/* max-width/margin setzen die h1-Regel aus seite.css (15ch, Hero) zurueck. */
.kopf h1 { font-size:34px; line-height:1.1; margin:0 0 6px; max-width:none; letter-spacing:-.5px; text-align:center; }
.kopf p { margin:0; color:var(--tiefText2); font-size:15px; }

.block { margin-top:26px; }
.label {
  font-family:var(--body); font-size:11px; font-weight:700; letter-spacing:2px;
  text-transform:uppercase; color:var(--tiefText2); margin:0 0 10px;
  display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap;
}
.werbung { letter-spacing:1px; color:var(--eigen); }

.karte {
  display:block; background:var(--karte); color:var(--ink); text-decoration:none;
  border:1px solid var(--hairline); border-radius:14px; margin-bottom:12px;
}
.karte-app, .karte-link { display:block; padding:16px 18px; color:inherit; text-decoration:none; }
.karte-titel { display:block; font-family:var(--plakat); font-weight:700; font-size:19px; line-height:1.25; }
.karte-text { display:block; font-size:14px; color:var(--text2); margin-top:2px; }

.karte-app:not(.bald) { background:var(--eigen); border-color:var(--eigen); }
.karte-app:not(.bald) .karte-text { color:var(--ink); }
.karte.bald { background:transparent; border-style:dashed; border-color:var(--tiefText2); color:var(--tiefText2); cursor:default; }
.karte.bald .karte-text { color:var(--tiefText2); }

a.karte:not(.bald):active, .karte-link:active { opacity:.8; }

/* Code-Zeile: eigene Trefferfläche unter dem Link, 48 px hoch. */
.karte-code { overflow:hidden; }
.code {
  display:flex; justify-content:space-between; align-items:center; width:100%;
  min-height:48px; padding:0 18px; border:0; border-top:1px dashed var(--rand);
  background:var(--sand); color:var(--ink); font:inherit; cursor:pointer;
}
.code-wert { font-family:var(--plakat); font-weight:800; font-size:17px; letter-spacing:1.5px; }
.code-hinweis { font-size:12px; letter-spacing:1px; text-transform:uppercase; color:var(--akzentText); font-weight:700; }

.fussnote { font-size:12.5px; line-height:1.5; color:var(--tiefText2); margin:14px 2px 0; }

/* background/padding: seite.css faerbt jedes <footer> dunkel ein. */
.fuss { background:none; padding:0; margin-top:34px; text-align:center; font-size:13px; color:var(--tiefText2); }
.fuss a { color:var(--tiefText2); padding:12px 4px; display:inline-block; }