/* Apple-Konfigurator (mediatech.ch, Agent A, 28.09.2026). Kein Framework, keine Bootstrap-Klassen.
 * Abstaende Fibonacci: 8, 13, 21, 34, 55. Schriften 13 und 21 px. Knopf 55 px. Ecken abgeschraegt (clip-path 8 px), kein border-radius.
 * Farben wie die Empfehlungszonen (Text #1a1a1a, gedaempft #5a5a5a, Linie #e6e6e6, Marke #823a2d, gruen #1d6b3a).
 * Spezifitaet: jede Regel beginnt mit .mt-konf, Theme-Regeln fuer ul/li/button werden mit !important nur dort ueberschrieben, wo Electro sie global setzt. */

.mt-konf {
    --mt-f1: 8px; --mt-f2: 13px; --mt-f3: 21px; --mt-f4: 34px; --mt-f5: 55px;
    --mt-text: #1a1a1a; --mt-muted: #5a5a5a; --mt-line: #e6e6e6; --mt-brand: #823a2d; --mt-ok: #1d6b3a; --mt-feld: #f5f5f5;
    --mt-ecke: 8px;
    display: block; box-sizing: border-box; color: var(--mt-text); font-size: 13px; line-height: 1.5; margin: 0 0 var(--mt-f5); padding: 0;
}
.mt-konf *, .mt-konf *::before, .mt-konf *::after { box-sizing: border-box; }
.mt-konf .mt-konf__titel { font-size: 21px; line-height: 1.25; font-weight: 700; margin: 0 0 var(--mt-f2); padding: 0; border: 0; text-transform: none; }
.mt-konf .mt-konf__sub { font-size: 13px; color: var(--mt-muted); margin: 0 0 var(--mt-f3); }
.mt-konf .mt-konf__hinweis { font-size: 13px; color: var(--mt-muted); margin: var(--mt-f3) 0; }
.mt-konf .mt-konf__klein { font-size: 13px; color: var(--mt-muted); margin: var(--mt-f2) 0 0; }

/* Schritt 1: Familien und Karten */
.mt-konf .mt-konf__familie { margin: 0 0 var(--mt-f4); padding: 0; }
.mt-konf .mt-konf__familie-titel { font-size: 13px; line-height: 1.3; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--mt-muted); margin: 0 0 var(--mt-f2); padding: 0; border: 0; }
.mt-konf .mt-konf__modell { margin: 0 0 var(--mt-f4); padding: 0 0 0 var(--mt-f2); border-left: 2px solid var(--mt-line); }
.mt-konf .mt-konf__modell-titel { font-size: 21px; line-height: 1.25; font-weight: 700; color: var(--mt-text); margin: 0 0 var(--mt-f1); padding: 0; border: 0; text-transform: none; letter-spacing: 0; }
.mt-konf .mt-konf__modell-sub { font-size: 13px; color: var(--mt-muted); margin: 0 0 var(--mt-f2); }
.mt-konf ul.mt-konf__raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(233px, 1fr)); gap: var(--mt-f3); list-style: none; margin: 0 !important; padding: 0 !important; }
.mt-konf li.mt-konf__karte { list-style: none; margin: 0 !important; padding: 0 !important; }
.mt-konf .mt-konf__karte-link { display: flex; flex-direction: column; gap: var(--mt-f1); height: 100%; padding: var(--mt-f2); border: 1px solid var(--mt-line); background: #fff; color: var(--mt-text); text-decoration: none; clip-path: polygon(var(--mt-ecke) 0, 100% 0, 100% calc(100% - var(--mt-ecke)), calc(100% - var(--mt-ecke)) 100%, 0 100%, 0 var(--mt-ecke)); }
.mt-konf .mt-konf__karte-link:hover, .mt-konf .mt-konf__karte-link:focus-visible { border-color: var(--mt-brand); outline: none; }
.mt-konf .mt-konf__karte--aus .mt-konf__karte-link { opacity: 0.55; }
.mt-konf .mt-konf__bild { display: block; width: 100%; height: 144px; object-fit: contain; margin: 0 0 var(--mt-f1); background: var(--mt-feld); }
.mt-konf .mt-konf__bild--platzhalter { background: var(--mt-feld) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 144 144'><rect x='21' y='34' width='102' height='63' fill='none' stroke='%235a5a5a' stroke-width='3'/><rect x='55' y='100' width='34' height='8' fill='%235a5a5a'/></svg>") center / 89px no-repeat; }
.mt-konf .mt-konf__karte-text { display: flex; flex-direction: column; gap: var(--mt-f1); min-width: 0; }
.mt-konf .mt-konf__karte-name { font-size: 13px; font-weight: 400; line-height: 1.35; color: var(--mt-text); }
.mt-konf .mt-konf__karte-kennung { font-size: 13px; color: var(--mt-muted); }
.mt-konf nav.mt-konf__sprung { margin: 0 0 var(--mt-f3); }
.mt-konf ul.mt-konf__sprung-liste { list-style: none; margin: 0 !important; padding: 0 !important; display: flex; flex-wrap: wrap; gap: var(--mt-f1); }
.mt-konf ul.mt-konf__sprung-liste li { margin: 0 !important; padding: 0 !important; }
.mt-konf a.mt-konf__sprung-link { display: inline-flex; align-items: center; min-height: 34px; padding: 0 var(--mt-f2); font-size: 13px; color: var(--mt-text); background: var(--mt-feld); text-decoration: none; clip-path: polygon(var(--mt-ecke) 0, 100% 0, 100% calc(100% - var(--mt-ecke)), calc(100% - var(--mt-ecke)) 100%, 0 100%, 0 var(--mt-ecke)); }
.mt-konf a.mt-konf__sprung-link:hover, .mt-konf a.mt-konf__sprung-link:focus-visible { background: var(--mt-brand); color: #fff; outline: none; }
.mt-konf .mt-konf__karte-preis { font-size: 21px; font-weight: 700; color: var(--mt-brand); line-height: 1.2; }
.mt-konf .mt-konf__karte-anz { font-size: 13px; color: var(--mt-muted); }

/* Schritt 2: Kopf und Optionen */
.mt-konf .mt-konf__zurueck { display: inline-flex; align-items: center; min-height: 34px; font-size: 13px; color: var(--mt-brand); text-decoration: underline; margin: 0 0 var(--mt-f2); } /* 04.10.: Tippziel 34 px statt 20 px */
.mt-konf .mt-konf__kopf { display: grid; grid-template-columns: 144px minmax(0, 1fr); gap: var(--mt-f3); align-items: start; margin: 0 0 var(--mt-f4); }
.mt-konf .mt-konf__kopf .mt-konf__bild { height: 144px; margin: 0; }
.mt-konf ul.mt-konf__fest { list-style: none; margin: 0 !important; padding: 0 !important; display: flex; flex-wrap: wrap; gap: var(--mt-f1); }
.mt-konf ul.mt-konf__fest li { font-size: 13px; color: var(--mt-muted); background: var(--mt-feld); padding: 0 var(--mt-f1); line-height: 21px; margin: 0 !important; }
.mt-konf .mt-konf__spalten { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mt-f4); align-items: start; }
.mt-konf fieldset.mt-konf__dim { border: 0; margin: 0 0 var(--mt-f3); padding: 0; min-width: 0; }
.mt-konf legend.mt-konf__dim-titel { font-size: 13px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--mt-muted); margin: 0 0 var(--mt-f1); padding: 0; border: 0; width: auto; }
.mt-konf .mt-konf__kacheln { display: flex; flex-wrap: wrap; gap: var(--mt-f1); }
.mt-konf button.mt-konf__kachel {
    appearance: none; -webkit-appearance: none; font: inherit; font-size: 13px; line-height: 1.3; min-height: 55px; padding: var(--mt-f1) var(--mt-f2); margin: 0;
    border: 1px solid var(--mt-line); background: #fff; color: var(--mt-text); cursor: pointer; text-transform: none; letter-spacing: 0; border-radius: 0; box-shadow: none;
    clip-path: polygon(var(--mt-ecke) 0, 100% 0, 100% calc(100% - var(--mt-ecke)), calc(100% - var(--mt-ecke)) 100%, 0 100%, 0 var(--mt-ecke));
}
.mt-konf button.mt-konf__kachel:hover, .mt-konf button.mt-konf__kachel:focus-visible { border-color: var(--mt-brand); outline: none; background: #fff; color: var(--mt-text); }
.mt-konf button.mt-konf__kachel[aria-pressed="true"] { border-color: var(--mt-brand); background: var(--mt-brand); color: #fff; font-weight: 700; }
.mt-konf button.mt-konf__kachel[disabled] { color: var(--mt-muted); border-color: var(--mt-feld); cursor: not-allowed; text-decoration: line-through; background: var(--mt-feld); }
.mt-konf a.mt-konf__kachel--link { display: inline-flex; align-items: center; font-size: 13px; line-height: 1.3; min-height: 55px; padding: var(--mt-f1) var(--mt-f2); margin: 0; border: 1px solid var(--mt-line); background: #fff; color: var(--mt-text); text-decoration: none; clip-path: polygon(var(--mt-ecke) 0, 100% 0, 100% calc(100% - var(--mt-ecke)), calc(100% - var(--mt-ecke)) 100%, 0 100%, 0 var(--mt-ecke)); }
.mt-konf a.mt-konf__kachel--link:hover, .mt-konf a.mt-konf__kachel--link:focus-visible { border-color: var(--mt-brand); outline: none; color: var(--mt-text); }
.mt-konf a.mt-konf__kachel--link[aria-current="true"] { border-color: var(--mt-brand); background: var(--mt-brand); color: #fff; font-weight: 700; }
.mt-konf .mt-konf__kachel-hinweis { display: block; font-size: 13px; color: var(--mt-muted); margin: var(--mt-f1) 0 0; min-height: 21px; }

/* Schritt 3: Summe */
.mt-konf aside.mt-konf__summe { border: 1px solid var(--mt-line); padding: var(--mt-f3); background: #fff; clip-path: polygon(var(--mt-ecke) 0, 100% 0, 100% calc(100% - var(--mt-ecke)), calc(100% - var(--mt-ecke)) 100%, 0 100%, 0 var(--mt-ecke)); }
.mt-konf .mt-konf__summe-titel { font-size: 13px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--mt-muted); margin: 0 0 var(--mt-f2); padding: 0; border: 0; }
.mt-konf .mt-konf__preis { font-size: 21px; font-weight: 700; color: var(--mt-brand); margin: 0 0 var(--mt-f1); line-height: 1.2; }
.mt-konf .mt-konf__liefer { font-size: 13px; color: var(--mt-ok); font-weight: 700; margin: 0 0 var(--mt-f1); min-height: 21px; }
.mt-konf .mt-konf__liefer--offen { color: var(--mt-muted); font-weight: 400; }
.mt-konf .mt-konf__artikel { font-size: 13px; color: var(--mt-muted); margin: 0 0 var(--mt-f2); min-height: 21px; }
.mt-konf a.mt-konf__kauf { display: flex; align-items: center; justify-content: center; height: 55px; padding: 0 var(--mt-f3); background: var(--mt-brand); color: #fff; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; text-decoration: none; clip-path: polygon(var(--mt-ecke) 0, 100% 0, 100% calc(100% - var(--mt-ecke)), calc(100% - var(--mt-ecke)) 100%, 0 100%, 0 var(--mt-ecke)); }
.mt-konf a.mt-konf__kauf:hover, .mt-konf a.mt-konf__kauf:focus-visible { background: #6b2f24; color: #fff; outline: none; }
.mt-konf a.mt-konf__kauf[aria-disabled="true"] { background: var(--mt-line); color: var(--mt-muted); pointer-events: none; }

/* Breiten: ab 1024 px zwei Spalten, Summe klebt */
@media (min-width: 1024px) {
    .mt-konf .mt-konf__spalten { grid-template-columns: minmax(0, 2fr) minmax(233px, 1fr); }
    .mt-konf aside.mt-konf__summe { position: sticky; top: var(--mt-f3); }
}
@media (max-width: 1023px) {
    /* Summe klebt am unteren Rand, damit Preis und Kauflink beim Waehlen sichtbar bleiben (Boris 28.09.: Summe erst nach 1'105 px) */
    .mt-konf aside.mt-konf__summe { position: sticky; bottom: 0; z-index: 5; padding: var(--mt-f2); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--mt-f1) var(--mt-f2); align-items: center; border-top: 1px solid var(--mt-line);
        clip-path: polygon(var(--mt-ecke) 0, 100% 0, 100% 100%, 0 100%, 0 var(--mt-ecke)); }
    .mt-konf .mt-konf__summe-titel, .mt-konf .mt-konf__klein { display: none; }
    .mt-konf .mt-konf__preis { grid-column: 1; margin: 0; }
    .mt-konf .mt-konf__liefer { grid-column: 1; margin: 0; min-height: 0; }
    .mt-konf .mt-konf__artikel { grid-column: 1; margin: 0; min-height: 0; }
    .mt-konf a.mt-konf__kauf { grid-column: 2; grid-row: 1 / span 3; }
}
@media (max-width: 599px) {
    .mt-konf .mt-konf__modell { padding-left: var(--mt-f1); margin-bottom: var(--mt-f3); }
    .mt-konf .mt-konf__modell-titel { font-size: 13px; }
    .mt-konf .mt-konf__kopf { grid-template-columns: 89px minmax(0, 1fr); gap: var(--mt-f2); }
    .mt-konf .mt-konf__kopf .mt-konf__bild { height: 89px; }
    .mt-konf ul.mt-konf__raster { grid-template-columns: minmax(0, 1fr); gap: var(--mt-f1); }
    .mt-konf .mt-konf__karte-link { flex-direction: row; align-items: center; gap: var(--mt-f2); padding: var(--mt-f1); }
    .mt-konf .mt-konf__karte-link .mt-konf__bild { width: 89px; height: 89px; flex: 0 0 89px; margin: 0; }
    .mt-konf .mt-konf__karte-text { gap: 0; }
    .mt-konf .mt-konf__karte-preis { font-size: 13px; }
    .mt-konf button.mt-konf__kachel { flex: 1 1 calc(50% - var(--mt-f1)); }
}

/* 03.10.2026: Bildhinweis, Kopfbild, Meldung beim Kauf */
.mt-konf__bildhinweis { display: block; font-size: 13px; line-height: 1.4; color: #4f5862; margin-top: 8px; }
.mt-konf__kopfbild { margin: 0; }
.mt-konf__kopfbild figcaption { font-size: 13px; color: #4f5862; margin-top: 8px; max-width: 144px; }
.mt-konf__meldung { min-height: 21px; font-size: 14px; color: #1d232a; margin: 8px 0 0; }
.mt-konf__kauf[aria-busy="true"] { opacity: .7; cursor: progress; }