/* Tauschring-Finder (tauschring.html), Liste aus tauschringe.py */
.tr-sprung{display:flex;flex-wrap:wrap;gap:4px 28px;margin-top:18px}
.tr-kurz{max-width:52em;margin:clamp(36px,5vw,56px) 0 0;background:var(--white);border:1px solid var(--line);border-left:6px solid var(--blue);border-radius:6px;padding:22px 28px}
.tr-kurz-label{font-family:var(--hand);font-weight:600;font-size:28px;line-height:1;color:var(--blue);margin-bottom:8px}
.tr-kurz p:last-child{color:var(--text)}
.tr-finder{padding:clamp(40px,6vw,72px) 0 clamp(24px,3vw,40px);scroll-margin-top:16px}
.tr-titel{font-size:clamp(34px,3.6vw,48px);letter-spacing:-.02em;margin-bottom:24px}

/* Unser Tauschkreis: immer oben, wie die KintschmerCard */
.tr-heim{position:relative;background:var(--mais);border-radius:10px;padding:clamp(24px,3vw,36px);box-shadow:var(--shadow);margin-bottom:40px;transform:rotate(-.4deg)}
.tr-heim-label{font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink);margin-bottom:6px}
.tr-heim h3{font-size:clamp(28px,3vw,40px);margin-bottom:18px}
.tr-heim-fakten{list-style:none;margin:0 0 22px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px 24px}
.tr-heim-fakten li{border-top:1px solid rgba(26,24,19,.25);padding-top:10px;font-size:17px}
.tr-heim-fakten b{display:block;font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.15}
.tr-heim-knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px}

/* Filter */
.tr-werkzeuge{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);gap:20px 32px;align-items:start;background:var(--white);border:1px solid var(--line);border-radius:10px;padding:clamp(18px,2.4vw,28px);margin-bottom:20px}
.tr-suche label,.tr-gruppe-titel{display:block;font-size:15px;font-weight:700;color:var(--muted);margin-bottom:8px}
.tr-suche input{width:100%;font:inherit;font-size:18px;min-height:48px;padding:10px 14px;border:1.5px solid var(--line);border-radius:6px;background:var(--paper);color:var(--ink)}
.tr-suche input:focus{border-color:var(--ink)}
.tr-gruppe{display:flex;flex-wrap:wrap;gap:8px}
.tr-gruppe-titel{flex-basis:100%;margin-bottom:0}
.tr-textknopf{font:inherit;font-weight:700;color:var(--ink);background:none;border:0;padding:10px 0;text-decoration:underline;text-underline-offset:5px;cursor:pointer;min-height:44px}
.tr-textknopf:hover{color:var(--red)}
@media (max-width:980px){.tr-werkzeuge{grid-template-columns:1fr}}

/* Liste */
.tr-anzahl{font-size:16px;color:var(--muted);margin-bottom:14px}
.tr-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.tr-karte{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:8px;padding:20px 22px}
.tr-karte[hidden]{display:none}
.tr-art{align-self:flex-start;font-size:14px;font-weight:700;color:var(--text);background:var(--paper);border:1px solid var(--line);border-radius:3px;padding:1px 9px;margin-bottom:10px}
.tr-karte h3{font-weight:500;font-size:23px;line-height:1.15;margin-bottom:6px}
.tr-ort{font-size:16px;color:var(--text)}
.tr-km{color:var(--muted)}
.tr-info{font-size:15px;color:var(--muted);margin-top:4px}
.tr-web{margin-top:auto;padding-top:14px;font-weight:700;align-self:flex-start;min-height:44px;display:inline-flex;align-items:flex-end}
.tr-heim-hinweis{background:#FBF3D9;border-radius:8px;padding:14px 18px;margin:0 0 16px;font-size:17px}
.tr-naehe{font-size:17px;margin:0 0 16px}
.tr-leer p+p{margin-top:6px}
#tr-leer-text{font-weight:700}
.tr-leer{background:var(--white);border:1px dashed var(--line);border-radius:8px;padding:20px 22px}
.tr-stand{font-size:15px;color:var(--muted);margin-top:22px;max-width:52em}

/* Vergleich */
.tr-tabelle{overflow-x:auto;margin:8px 0 24px;border:1px solid var(--line);border-radius:8px;background:var(--white)}
.tr-tabelle table{border-collapse:collapse;width:100%;min-width:560px;font-size:16px}
.tr-tabelle th,.tr-tabelle td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--line)}
.tr-tabelle thead th{font-family:var(--serif);font-weight:500;font-size:20px}
.tr-tabelle tbody th{font-weight:700;width:26%}
.tr-tabelle tr:last-child > *{border-bottom:0;background:#FBF3D9}
.tr-check li{margin-bottom:10px}
@media (max-width:640px){.tr-gruppe .chip{font-size:15px;padding:8px 14px}.tr-heim{transform:none}}
.tr-hinweis{font-size:15px;color:var(--muted)}