/* ============================================================================
   Schritt-für-Schritt Tool-Layout — geteilt von allen Planungs-Tools.
   © 2026 Dominik Olesch Photography. Eigenentwicklung, urheberrechtlich geschützt.
   Klassen-Präfix: .ts-  (ts = tool step)
   ========================================================================== */

.ts-section { background: var(--dark); padding: 52px 22px 100px; }
.ts-inner   { max-width: 720px; margin: 0 auto; }

.ts-back { display:inline-flex; align-items:center; gap:8px; font-size:.78rem; letter-spacing:.06em;
           color:var(--text-muted); margin-bottom:34px; transition:color .25s; text-decoration:none; }
.ts-back:hover { color: var(--gold-light); }

/* Intro über den Schritten (optional) */
.ts-intro { max-width:620px; margin:0 auto 46px; text-align:center; }
.ts-intro p { font-size:.95rem; font-weight:300; color:var(--text-light); line-height:1.8; margin:0; }

/* Ein Schritt = nummerierter Block an einer vertikalen Linie */
.ts-step { position:relative; padding:0 0 42px 60px; margin-left:19px; border-left:1px solid rgba(127,144,112,.22); }
.ts-step:last-child { border-left-color:transparent; padding-bottom:0; }
.ts-num {
    position:absolute; left:-20px; top:-2px; width:39px; height:39px; border-radius:50%;
    background:var(--dark-2); border:1px solid rgba(127,144,112,.45); color:var(--gold-light);
    font-family:var(--font-serif); font-size:1.05rem; line-height:1;
    display:flex; align-items:center; justify-content:center; z-index:1;
}
.ts-eyebrow { font-family:var(--font-sans); font-size:.62rem; font-weight:600; letter-spacing:.2em;
              text-transform:uppercase; color:var(--text-muted); margin-bottom:5px; }
.ts-title { font-family:var(--font-serif); font-size:1.3rem; font-weight:300; color:var(--cream); margin:0 0 4px; }
.ts-hint  { font-size:.84rem; font-weight:300; color:var(--text-muted); line-height:1.6; margin:0 0 18px; }
.ts-body  { }

/* Auswahl-Chips (Mehrfach- oder Einzelauswahl) */
.ts-options { display:flex; flex-wrap:wrap; gap:10px; }
.ts-opt {
    display:inline-flex; align-items:center; gap:9px; cursor:pointer;
    background:var(--dark-2); border:1px solid rgba(127,144,112,.22); border-radius:100px;
    padding:11px 18px; font-size:.86rem; color:var(--text-light); transition:all .2s;
    -webkit-tap-highlight-color:transparent; user-select:none;
}
.ts-opt:hover { border-color:rgba(127,144,112,.5); color:var(--cream); }
.ts-opt i { color:var(--gold-light); font-size:.92rem; }
.ts-opt.sel { background:linear-gradient(160deg, rgba(127,144,112,.18), var(--dark-2));
              border-color:var(--gold); color:var(--cream); box-shadow:0 0 0 1px rgba(127,144,112,.25) inset; }

/* Klassische Felder (Zahl/Text/Select) innerhalb eines Schritts */
.ts-field { margin-bottom:18px; }
.ts-field:last-child { margin-bottom:0; }
.ts-field label { display:block; font-size:.85rem; color:var(--text-light); margin-bottom:8px; }
.ts-field input[type=number], .ts-field input[type=text], .ts-field input[type=date], .ts-field select {
    width:100%; max-width:340px; background:var(--dark-3); border:1px solid rgba(127,144,112,.22); border-radius:3px;
    color:var(--cream); font-family:var(--font-sans); font-size:.95rem; padding:11px 14px; transition:border-color .25s;
}
.ts-field input:focus, .ts-field select:focus { outline:none; border-color:var(--gold); }

/* Ergebnis-Schritt – prominent hervorgehoben */
.ts-result {
    background:linear-gradient(160deg, rgba(127,144,112,.12), var(--dark-2));
    border:1px solid rgba(201,176,121,.3); border-radius:5px; padding:26px 26px 28px;
}
.ts-result-empty { color:var(--text-muted); font-size:.9rem; font-weight:300; text-align:center; padding:14px 0; }
.ts-card {
    background:var(--dark-3); border:1px solid rgba(127,144,112,.16); border-radius:4px;
    padding:18px 20px; margin-bottom:12px;
}
.ts-card:last-child { margin-bottom:0; }
.ts-card h4 { font-family:var(--font-serif); font-size:1.08rem; font-weight:400; color:var(--gold-light); margin:0 0 6px; }
.ts-card p  { font-size:.88rem; font-weight:300; color:var(--text-light); line-height:1.65; margin:0; }

.ts-note { font-size:.74rem; font-weight:300; color:var(--text-muted); line-height:1.6;
           margin-top:18px; padding-top:16px; border-top:1px solid rgba(238,234,228,.07); }

/* Aktions-Buttons (kopieren/drucken o.ä.) */
.ts-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; }
.ts-btn { display:inline-flex; align-items:center; gap:9px; cursor:pointer;
          background:transparent; border:1px solid rgba(201,176,121,.4); color:var(--gold-light);
          font-family:var(--font-sans); font-size:.82rem; letter-spacing:.04em; padding:11px 22px; border-radius:2px; transition:all .22s; }
.ts-btn:hover { background:rgba(127,144,112,.12); border-color:var(--gold); }

@media (max-width:560px){
    .ts-section { padding:38px 18px 80px; }
    .ts-step { padding-left:48px; }
    .ts-num { width:34px; height:34px; left:-17px; font-size:.95rem; }
}