/* =========================================================
   Theme-Wähler

   Kein Raster aus Kästchen. Stattdessen: Name gross und dünn,
   darunter eine breite Vorschau des echten Seitenaufbaus,
   darunter ein Filmstreifen aus reinen Farbproben. Der Wähler
   selbst bezieht nur Tokens — er wechselt also mit, während man
   ihn bedient.
   ========================================================= */
.tp-overlay{position:fixed;inset:0;z-index:300;background:var(--bg);
  display:none;overflow-y:auto;
  transition:background-color .5s var(--ease)}
.tp-overlay.on{display:block;animation:tpIn .45s var(--ease)}
@keyframes tpIn{from{opacity:0}}
.tp-inner{max-width:1180px;margin:0 auto;padding:80px 32px 96px}

/* --- Kopf: der Name trägt die Seite --- */
.tps-head{margin-bottom:44px}
.tps-head .eyebrow{margin:0 0 20px;display:flex;align-items:center;gap:11px}
.tps-head .eyebrow::before{content:"";width:26px;height:1px;background:var(--muted)}
.tps-title{margin:0;font-size:clamp(46px,7vw,92px);font-weight:200;line-height:1;
  letter-spacing:-.015em;color:var(--txt)}
.tps-title.small{font-size:clamp(30px,4.2vw,52px);letter-spacing:0}
.tps-mood{margin:20px 0 0;color:var(--muted);font-size:14.5px;font-weight:300;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.tps-tag{font-size:8.5px;text-transform:uppercase;letter-spacing:.2em;color:var(--muted2);
  padding:4px 11px;border-radius:99px;box-shadow:inset 0 0 0 1px var(--line)}

/* --- Grosse Vorschau --- */
.tps-stage{margin-bottom:40px}
.tps-shot{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:20/9;
  padding:22px 26px;box-shadow:var(--shadow-sm), 0 0 0 1px var(--line);
  transition:background-color .45s var(--ease)}
.tps-atmo{position:absolute;inset:0;pointer-events:none}
.tps-chrome{position:relative;height:100%;display:flex;flex-direction:column}

.tps-nav{display:flex;align-items:center;gap:9px;margin-bottom:26px}
.tps-nav b{width:8px;height:8px;border-radius:50%;display:block;flex:none}
.tps-nav i{height:4px;width:22px;border-radius:2px;display:block}
.tps-nav em{margin-left:auto;width:52px;height:14px;border-radius:99px;display:block}

.tps-body{display:flex;gap:30px;align-items:flex-start;margin-bottom:auto}
.tps-copy{flex:1;max-width:52%}
.tps-copy s{display:block;width:34px;height:2px;margin-bottom:12px;opacity:.9}
.tps-copy h{display:block;height:15px;width:82%;border-radius:3px;margin-bottom:7px}
.tps-copy p{display:block;height:4px;width:74%;border-radius:2px;margin:0 0 6px}
.tps-btn{display:block;width:78px;height:19px;border-radius:99px;margin-top:16px}

.tps-kpis{display:flex;gap:9px;flex:none;width:38%}
.tps-kpis span{flex:1;border-radius:7px;padding:11px 12px;display:block}
.tps-kpis o{display:block;width:62%;height:13px;border-radius:3px;margin-bottom:7px;text-decoration:none}
.tps-kpis p{display:block;width:84%;height:3px;border-radius:2px;margin:0}

.tps-row{display:flex;gap:10px;margin-top:22px}
.tps-row i{flex:1;aspect-ratio:245/342;border-radius:6px;display:flex;align-items:flex-end;padding:5px;
  max-height:98px}
.tps-row u{display:block;width:100%;height:15%;border-radius:2px;text-decoration:none}

/* --- Filmstreifen: nur Farbe und Name --- */
.tps-strip{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:56px}
.tps-chip{background:transparent;border:0;padding:10px 12px 11px;border-radius:var(--r-sm);
  display:flex;flex-direction:column;gap:9px;align-items:flex-start;min-width:104px;
  transition:background-color .35s var(--ease)}
.tps-chip:hover{background:var(--bg2)}
.tps-chip.on{background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line2)}
.tps-swatch{display:flex;width:100%;height:26px;border-radius:5px;overflow:hidden;
  box-shadow:0 0 0 1px var(--line)}
.tps-swatch i{flex:1;display:block}
.tps-name{font-size:11.5px;color:var(--muted);letter-spacing:.03em;font-weight:300;
  transition:color .35s var(--ease)}
.tps-chip.on .tps-name{color:var(--txt);font-weight:400}
.tps-chip:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}

/* --- Bewegung: zwei Optionen, sonst nichts --- */
.tps-motion{padding-top:40px;box-shadow:inset 0 1px 0 var(--line)}
.tps-motion .label{margin:0 0 18px}
.tps-seg{display:flex;gap:12px;flex-wrap:wrap}
.tps-seg button{flex:1;min-width:250px;text-align:left;background:var(--bg2);border:0;
  border-radius:var(--r-sm);padding:20px 22px;box-shadow:0 0 0 1px var(--line);
  transition:background-color .35s var(--ease), box-shadow .35s var(--ease)}
.tps-seg button:hover{background:var(--bg3)}
.tps-seg button.on{box-shadow:0 0 0 1.5px var(--txt)}
.tps-seg b{display:block;font-size:16px;font-weight:400;color:var(--txt);margin-bottom:7px}
.tps-seg span{display:block;font-size:12px;color:var(--muted);line-height:1.6;font-weight:300}

.tp-foot{display:flex;gap:12px;margin-top:52px;flex-wrap:wrap;align-items:center}

@media(max-width:760px){
  .tp-inner{padding:48px 20px 80px}
  .tps-head{margin-bottom:30px}
  .tps-shot{aspect-ratio:16/11;padding:15px 16px}
  .tps-nav{margin-bottom:16px}
  .tps-body{gap:14px}
  .tps-kpis{display:none}
  .tps-copy{max-width:100%}
  .tps-row i{max-height:66px}
  .tps-strip{gap:4px;margin-bottom:38px}
  .tps-chip{min-width:0;flex:1 1 84px;padding:8px}
  .tps-seg button{min-width:0;flex:1 1 100%;padding:16px 18px}
}