/* Tags rechts neben dem Formular (nur Vorschau, v3). Ohne JS: Liste. Animation nur transform/opacity. */
.hero{grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:64px;align-items:start}
.tags-spalte{max-width:360px;justify-self:center;width:100%;padding:0}
/* Überschrift = H1 links (gleiche Werte wie h1 in anmeldung.css) */
.tags-spalte h2{font-weight:600;font-size:34px;line-height:1.25;letter-spacing:-.015em;margin:0 0 .45em}
.tags-text{margin:0;color:var(--sek);font-size:14.5px;line-height:1.5}
.tags-spalte .schild-koerper{padding:22px 16px 16px}
.tags-spalte .schild-bild{height:64px;margin-bottom:12px;border-radius:8px}
.tags-spalte .schild-bild .ti{width:26px;height:26px;display:block}
.tags-spalte .schild-art{font-size:12.5px;margin-bottom:4px}
.tags-spalte .schild h3{font-size:16px;line-height:1.35;margin:0 0 4px}
.tags-spalte .schild-text p{font-size:14px;line-height:1.45}
.tags-spalte .faden{height:30px;margin-left:auto;margin-right:auto}
.schwinger{display:flex;flex-direction:column;align-items:center;width:100%;transform-origin:50% 0;will-change:transform}
/* ohne JS: kompakte Liste, 2 Spalten */
.tags-spalte .schilder{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}
.tags-spalte .schilder .faden,.tags-spalte .schilder .schild-bild{display:none}
.tags-pause{display:none}
/* mit JS: Stapel */
.js-tags .deck{position:relative;max-width:320px;margin:14px auto 0}
.js-tags .stapel{display:grid;grid-template-columns:1fr;gap:0;margin:0;padding:0 0 26px}
.js-tags .stapel .faden{display:block}
.js-tags .stapel .schild-bild{display:flex}
.js-tags .stapel .schild{grid-area:1/1;transform-origin:50% 100%;z-index:calc(20 - var(--k,0));
 transform:translateY(calc(var(--k,0) * 10px)) scale(calc(1 - var(--k,0) * .045));
 transition:transform .9s cubic-bezier(.22,.61,.36,1),opacity .6s ease}
.js-tags .stapel .schild[data-k="1"] .schild-koerper{background:#fdfcfb}
.js-tags .stapel .schild[data-k="2"] .schild-koerper{background:#faf9f7}
.js-tags .stapel .schild:not([data-k="0"]) .faden,.js-tags .stapel .schild:not([data-k="0"]) .schild-koerper>*{opacity:0;transition:opacity .35s}
.js-tags .stapel .schild[data-k="0"] .faden,.js-tags .stapel .schild[data-k="0"] .schild-koerper>*{opacity:1;transition:opacity .5s .55s}
.js-tags .stapel .schild.tief{opacity:0}
.js-tags .aufbau .schild{opacity:0;animation:tags-notfall .4s 3s forwards}
@keyframes tags-notfall{to{opacity:1}}  /* falls tags.js nicht lädt */
.js-tags .tags-pause{position:absolute;right:-38px;bottom:22px;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
 border:0;border-radius:50%;background:transparent;color:#8a857d;cursor:pointer;padding:0;opacity:.55;transition:opacity .2s,background .2s}
.js-tags .tags-pause:hover,.js-tags .tags-pause:focus-visible{opacity:1;background:#ebe8e3;color:#3d6b7a}
.js-tags .tags-pause:focus-visible{outline:2px solid var(--petrol);outline-offset:2px}
.tags-pause span{display:inline-flex}.tags-pause .i-play{display:none}
.tags-pause[aria-pressed="true"] .i-play{display:inline-flex}.tags-pause[aria-pressed="true"] .i-pause{display:none}
@media (max-width:1020px){.hero{grid-template-columns:1fr;gap:40px}.tags-spalte{justify-self:stretch;max-width:none}}
@media (max-width:520px){.tags-spalte h2{font-size:28px}.js-tags .deck{max-width:300px}.tags-spalte .schilder{grid-template-columns:1fr}}
/* mobil (Niels 23.10. 21:32): Deck mit Überschrift ÜBER dem Formular, kompakt, voll animiert */
@media (max-width:760px){
 .hero{display:flex;flex-direction:column;gap:0}
 .hero-text{display:contents}
 .hero-text>*{order:3}
 .hero-text>h1,.hero-text>.unterzeile{order:1}
 .hero-text>.unterzeile{margin-bottom:14px}
 .tags-spalte{order:2;margin:0 0 50px}  /* Niels 21:47: mehr Luft unter den Karten */
 html:not(.js-tags) .tags-spalte{order:4;margin:32px 0 0}  /* ohne JS: lange Liste unter das Formular */
 .tags-spalte h2{font-size:20px;line-height:1.3;margin:0 0 2px}
 .tags-text{font-size:13px;line-height:1.4}
 .js-tags .deck{max-width:340px;margin:48px auto 0}  /* mehr Luft über den Fäden; Einfallen (-46px) überlappt den Text nicht */
 .js-tags .stapel{padding-bottom:12px}
 .js-tags .stapel .schild{transform:translateY(calc(var(--k,0) * 7px)) scale(calc(1 - var(--k,0) * .035))}
 .tags-spalte .faden{height:16px}
 .js-tags .tags-spalte .schild-koerper{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;align-items:center;padding:18px 14px 14px}
 .tags-spalte .schild-bild{height:52px;margin:0;border-radius:8px}
 .tags-spalte .schild-bild .ti{width:24px;height:24px}
 .tags-spalte .loch{top:7px;width:9px;height:9px;margin-left:-4.5px}
 .tags-spalte .schild-art{font-size:11.5px;margin-bottom:2px}
 .tags-spalte .schild h3{font-size:15px;line-height:1.3;margin:0 0 2px}
 .tags-spalte .schild-text p{font-size:13px;line-height:1.4}
 .js-tags .tags-pause{right:-6px;bottom:-12px;width:28px;height:28px}
 .tags-spalte .schilder:not(.stapel){grid-template-columns:1fr}
 .namen{grid-template-columns:1fr 1fr;gap:12px}
 .hero .karte{padding-top:16px}
}
/* reduzierte Bewegung: eine Karte, statisch, kein Wechsel */
@media (prefers-reduced-motion:reduce){
 .js-tags .stapel .schild,.js-tags .stapel .schild *{transition:none!important;animation:none!important}
 .js-tags .tags-pause{display:none}
}