/* Hell und dunkel: ein schmales Band auf der Startseite und auf
   Individualisierbarkeit (Tim, 26.10.2026). Links Satz und Schalter, rechts
   die Übersicht der App in beiden Themen, getrennt von einer schrägen Naht.
   Die Naht rückt zur Seite des gewählten Themas. Der Schalter wechselt das
   Thema der ganzen Website, das erledigt js/seite.js für jedes Element mit
   data-thema-wahl. */
@property --naht { syntax: "<percentage>"; inherits: true; initial-value: 32%; }

.tn-karte {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center;
  gap: clamp(24px, 10.6px + 3.43vw, 60px);
  padding: clamp(22px, 15.31px + 1.714vw, 40px);
  border-radius: 24px; background: var(--flaeche); box-shadow: 0 0 0 1px var(--linie);
}
.tn-text { display: flex; flex-direction: column; gap: 14px; }
/* Breit steht „Oder umgekehrt.“ in einer eigenen Zeile. */
@media (min-width: 900px) { .tn-zeile { display: block; } }
.tn-satz { font-size: 16px; line-height: 1.55; color: var(--text-2); text-wrap: pretty; }
.tn-probe { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-top: 6px; }
.tn-probe span { font-size: 14px; color: var(--text-3); }

/* Der Schalter aus dem Kopf, größer und mit Worten. */
.tn-schalter {
  display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px;
  background: var(--glas); box-shadow: inset 0 0 0 1px var(--glas-kante);
}
.tn-schalter button {
  height: 40px; padding: 0 18px 0 14px; display: inline-flex; align-items: center; gap: 8px;
  border: 0; border-radius: 999px; background: transparent; color: var(--text-2);
  font-size: 15px; font-weight: 600; cursor: pointer;
  transition: background-color 200ms var(--kurve), color 200ms var(--kurve), box-shadow 200ms var(--kurve);
}
.tn-schalter button:hover { color: var(--text); }
.tn-schalter button[aria-pressed="true"] { background: var(--schalter-an); color: var(--text); box-shadow: var(--schalter-schatten); }
.tn-schalter svg { width: 16px; height: 16px; flex: none; }

/* Das Bild: hell darunter, dunkel darüber und schräg beschnitten. Der
   Schatten an der Naht kommt vom Halter, ein beschnittenes Element wirft
   selbst keinen. */
.tn-bild {
  --naht: 32%;
  position: relative; aspect-ratio: 16 / 7; border-radius: 14px; overflow: hidden;
  box-shadow: 0 0 0 1px var(--linie), var(--fach-schatten);
  background: #f2f2f3;
  transition: --naht 900ms var(--kurve);
}
:root[data-thema="hell"] .tn-bild { --naht: 68%; }
.tn-bild img, .tn-nacht-halter { position: absolute; inset: 0; width: 100%; height: 100%; }
.tn-bild img { object-fit: cover; object-position: left top; }
.tn-nacht-halter { filter: drop-shadow(-10px 0 18px rgba(0, 0, 0, 0.32)); }
.tn-nacht-halter img { clip-path: polygon(calc(var(--naht) + 9%) 0, 100% 0, 100% 100%, calc(var(--naht) - 9%) 100%); }

@media (max-width: 899px) {
  .tn-karte { grid-template-columns: minmax(0, 1fr); }
  .tn-bild { aspect-ratio: 16 / 9; }
}
@media (prefers-reduced-motion: reduce) {
  .tn-bild { transition: none; }
}