/* ==========================================================================
   Multi-Piece Calculator — ESGscheibe
   ========================================================================== */

.ts-calc-section {
    background: var(--ts-dark);
    border-bottom: 1px solid var(--ts-dark-tertiary);
    padding: 4rem 0 4.5rem;
}

.ts-calc-container {
    /* War 760px. Der Rechner ist die Stelle, an der bestellt wird, und stand
       auf einer breiten Seite als schmale Saeule mitten im Weissen. Jetzt
       breiter, aber nicht so breit wie der Rest der Seite (1400), sonst
       ziehen sich Beschriftung und Eingabefeld zu weit auseinander. */
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.ts-calc-header {
    margin-bottom: 1.5rem;
}

.ts-calc-eyebrow {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--ts-accent);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.4rem;
}

.ts-calc-title {
    font-size: clamp(1.4rem, 2.4vw, 1.85rem);
    font-weight: 600;
    color: var(--ts-white);
    margin: 0 0 0.4rem;
    letter-spacing: -0.015em;
}

.ts-calc-subtitle {
    font-size: 0.9rem;
    color: var(--ts-silver);
    margin: 0;
    max-width: 60ch;
    line-height: 1.55;
}

.ts-calc-layout {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ts-calc-pieces {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

/* --------------------------------------------------------------------------
   Piece card
   -------------------------------------------------------------------------- */

.ts-piece {
    background: var(--ts-black);
    border: 1px solid var(--ts-dark-tertiary);
    border-radius: var(--ts-radius-lg);
    padding: 1rem 1.1rem 0.9rem;
}

.ts-piece-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.85rem;
}

.ts-piece-name {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ts-white);
}

.ts-piece-num {
    background: var(--ts-accent);
    color: #ffffff;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
}

.ts-piece-remove {
    background: none;
    border: none;
    color: var(--ts-silver-light);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: var(--ts-radius-sm);
    transition: color var(--ts-transition-fast), background var(--ts-transition-fast);
}

.ts-piece-remove:hover {
    color: var(--ts-error);
    background: var(--ts-dark-secondary);
}

.ts-piece-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.ts-piece-field label {
    display: block;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--ts-silver);
    margin-bottom: 0.3rem;
}

.ts-piece-input {
    background: var(--ts-black);
    border: 1px solid #d5d8dd;
    border-radius: var(--ts-radius-md);
    padding: 0.45rem 0.65rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: border-color var(--ts-transition-fast);
}

.ts-piece-input:focus-within {
    border-color: var(--ts-accent);
    box-shadow: 0 0 0 3px var(--ts-accent-glow);
}

.ts-piece-input input {
    background: none;
    border: none;
    outline: none;
    font: inherit;
    color: var(--ts-white);
    font-size: 0.875rem;
    font-weight: 500;
    width: 100%;
    padding: 0;
    -moz-appearance: textfield;
}

.ts-piece-input input::-webkit-outer-spin-button,
.ts-piece-input input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ts-piece-unit {
    font-family: var(--ts-font-mono);
    font-size: 0.72rem;
    color: var(--ts-silver-light);
    flex-shrink: 0;
    margin-left: 0.4rem;
}

/* Pills (thickness) */
.ts-piece-pills {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.ts-piece-pill {
    background: var(--ts-black);
    border: 1px solid #d5d8dd;
    border-radius: var(--ts-radius-sm);
    color: var(--ts-silver);
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0.4rem 0.7rem;
    cursor: pointer;
    transition: all var(--ts-transition-fast);
    flex: 1 1 auto;
    min-width: 0;
}

.ts-piece-pill:hover {
    border-color: var(--ts-accent);
    color: var(--ts-accent);
}

.ts-piece-pill.is-active {
    background: var(--ts-accent);
    border-color: var(--ts-accent);
    color: #ffffff;
}

/* Edge select */
.ts-piece-edge {
    background: var(--ts-black);
    border: 1px solid #d5d8dd;
    border-radius: var(--ts-radius-md);
    padding: 0.45rem 0.65rem;
    font: inherit;
    font-size: 0.875rem;
    color: var(--ts-white);
    width: 100%;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 4l3 3 3-3' stroke='%235a6b7d' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.65rem center;
    padding-right: 1.6rem;
}

.ts-piece-edge:focus {
    outline: none;
    border-color: var(--ts-accent);
    box-shadow: 0 0 0 3px var(--ts-accent-glow);
}

/* Subtotal */
.ts-piece-subtotal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.65rem;
    margin-top: 0.5rem;
    border-top: 1px solid var(--ts-dark-tertiary);
    font-size: 0.8rem;
    color: var(--ts-silver);
}

.ts-piece-subtotal-value {
    font-weight: 600;
    color: var(--ts-white);
    font-family: var(--ts-font-mono);
}

/* --------------------------------------------------------------------------
   Add piece button
   -------------------------------------------------------------------------- */

.ts-add-piece-btn {
    width: 100%;
    background: var(--ts-black);
    border: 1.5px dashed #d5d8dd;
    color: var(--ts-accent);
    border-radius: var(--ts-radius-lg);
    padding: 0.85rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--ts-transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.ts-add-piece-btn:hover {
    border-style: solid;
    border-color: var(--ts-accent);
    background: var(--ts-dark);
}

/* --------------------------------------------------------------------------
   Quote hint (escape hatch between pieces and total)
   -------------------------------------------------------------------------- */

.ts-calc-quote-hint {
    background: #f5f6f7;
    border-radius: var(--ts-radius-md);
    padding: 0.85rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.ts-calc-quote-hint-text {
    font-size: 0.82rem;
    color: var(--ts-accent);
    line-height: 1.45;
    margin: 0;
    flex: 1 1 14rem;
    max-width: none;
}

.ts-calc-quote-hint-btn {
    background: #ffffff;
    color: var(--ts-accent);
    border: 1px solid var(--ts-accent);
    padding: 0.4rem 0.85rem;
    border-radius: var(--ts-radius-md);
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--ts-transition-fast);
}

.ts-calc-quote-hint-btn:hover {
    background: var(--ts-dark);
}

/* --------------------------------------------------------------------------
   Total panel
   -------------------------------------------------------------------------- */

.ts-calc-total {
    background: #1a1d23;
    color: #ffffff;
    border-radius: var(--ts-radius-lg);
    padding: 1.15rem 1.25rem 1.25rem;
    margin-top: 0.5rem;
}

.ts-calc-total-meta {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8rem;
    margin-bottom: 0.6rem;
    font-family: var(--ts-font-mono);
}

.ts-calc-total-rows {
    display: flex;
    flex-direction: column;
}

.ts-calc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    padding: 0.2rem 0;
}

.ts-calc-row-muted {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8rem;
}

.ts-calc-row-value {
    font-weight: 500;
    font-family: var(--ts-font-mono);
}

.ts-calc-row-big {
    margin-top: 0.5rem;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.ts-calc-row-big > span:first-child {
    font-size: 0.95rem;
    font-weight: 500;
}

.ts-calc-row-big .ts-calc-row-value {
    font-size: 1.45rem;
    font-weight: 600;
}

.ts-calc-total-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: 1rem;
}

.ts-calc-total-actions .ts-btn {
    width: 100%;
    justify-content: center;
}

.ts-calc-total .ts-btn-secondary {
    background: transparent;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.2);
}

.ts-calc-total .ts-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.35);
}

.ts-calc-status {
    margin-top: 0.85rem;
    font-size: 0.82rem;
    text-align: center;
    min-height: 1.2rem;
    color: rgba(255, 255, 255, 0.7);
}

.ts-calc-status.is-error { color: #ff8b8b; }
.ts-calc-status.is-success { color: #8be0a8; }

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
    .ts-calc-section {
        padding: 2.5rem 0 3rem;
    }
    .ts-piece-row {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }
    .ts-calc-total-actions {
        grid-template-columns: 1fr;
    }
    .ts-piece-pills {
        gap: 0.25rem;
    }
    .ts-piece-pill {
        font-size: 0.75rem;
        padding: 0.4rem 0.55rem;
    }
}

/* ============================================================================
 * IPHONE-ZOOM AN DEN MASSFELDERN VERHINDERN
 *
 * Safari auf dem iPhone zoomt die ganze Seite hinein, sobald ein Eingabefeld
 * mit weniger als 16px Schrift den Fokus bekommt. Es zoomt danach NICHT von
 * allein zurueck, der Besucher muss von Hand herauswischen.
 *
 * Gemessen am 09.09.2026 im Browser bei 375px Breite: die Felder Breite und
 * Hoehe standen auf font-size 0.875rem, also 14px. Genau an der Stelle, an der
 * der Kunde sein Mass eingibt, sprang die Seite also bei jedem Antippen.
 *
 * 1rem sind hier geprueft 16px, die Wurzel steht auf 16px.
 *
 * Nur unter 768px. Auf dem Rechner bleibt es bei 14px, dort gibt es das
 * Verhalten nicht und das Aussehen soll sich nicht aendern.
 * ========================================================================= */
@media (max-width: 767px) {
	.ts-piece-input input {
		font-size: 1rem;
	}
}

/* Nur ein Knopf, solange die Zahlung aus ist (14.09.2026): "Angebot anfordern" ueber die ganze Breite
   statt halb links, und kein leerer Platz fuer die Statuszeile, solange sie nichts sagt. */
#ts-cart-btn[aria-hidden="true"] + #ts-quote-btn {
    grid-column: 1 / -1;
}

.ts-calc-status:empty {
    display: none;
}

/* MwSt direkt unter dem Gesamtpreis, in derselben Box (18.09.2026). */
.ts-calc-row-big .ts-calc-row-mwst {
	font-size: 0.78rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.85);
}

/* MwSt auf eigener Zeile unter dem Betrag, wie auf vsgscheibe (18.09.2026). */
.ts-calc-row-big {
	flex-wrap: wrap;
}

.ts-calc-row-big .ts-calc-row-mwst {
	flex: 0 0 100%;
	text-align: right;
	margin-top: 0.15rem;
}

/* 24.09.2026: Kombination ohne Preis, wie auf vsgscheibe (inc/preis-esg.php, esg_kombi) */
.ts-piece-pill.is-unavailable {
	opacity: 0.35;
	cursor: not-allowed;
	border-style: dashed;
}

.ts-piece-pill:disabled:hover {
	background: inherit;
}

.ts-piece-hinweis {
	margin: 0.35rem 0 0;
	font-size: 0.8rem;
	line-height: 1.4;
	color: var(--ts-silver, #5b606b);
}

/* ==========================================================================
   isolierglasonline.de (26.09.2026): Aufbau-Auswahl ueber die ganze Breite,
   darunter die Beschreibung, unter den Einbaudicken Ug- und g-Wert.
   ========================================================================== */
.ts-piece-row:has(.ts-piece-field-wide) {
    grid-template-columns: 1fr;
}
.ts-piece-color {
    background: var(--ts-black) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a6b7d' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
    border: 1px solid #d5d8dd;
    border-radius: var(--ts-radius-md);
    padding: 0.55rem 2.2rem 0.55rem 0.65rem;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--ts-white);
    width: 100%;
    max-width: 420px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
.ts-piece-color:focus {
    outline: none;
    border-color: var(--ts-accent);
    box-shadow: 0 0 0 3px var(--ts-accent-glow);
}
.ts-piece-aufbau-text,
.ts-piece-kennwerte {
    margin: 0.45rem 0 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--ts-silver);
    max-width: 640px;
}
.ts-piece-kennwerte {
    font-family: var(--ts-font-mono);
    font-size: 0.74rem;
    color: var(--ts-accent);
}
.ts-piece-kennwerte:empty,
.ts-piece-aufbau-text:empty {
    display: none;
}

.ts-piece-hinweis:not([hidden]) {
    color: #8a4b00;
    font-weight: 500;
}