/* Interaktive Scheibentönung (Abschnitt 'toenung_grafik'); Raum/Bühne/Buttons kommen aus ppf-grafik.css */
.ton-auto, .ton-bild { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.ton-bild { z-index: 2; opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.ton.bereit .ton-bild { opacity: 1; }
.ton.bereit .ton-auto { visibility: hidden; }
/* Beschriftung über dem Dach: Punkt an der Scheiben-Oberkante, Text mit kurzer Linie darüber – nichts liegt auf dem Glas */
.ton-lbl { z-index: 4; flex-direction: column-reverse; gap: 0; transform: translate(-50%, -100%); }
.ton-lbl i { width: 8px; height: 8px; }
.ton-lbl b { position: relative; margin-bottom: 18px; }
.ton-lbl b::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 14px; background: rgba(216, 238, 255, .55); }
@media (max-width: 640px) { .ton-lbl b { display: none; } }
.ton-lbl-vorne b { border-color: rgba(255, 200, 80, .45); }
.ton-lbl-vorne i { background: #ffd27a; box-shadow: 0 0 0 3px rgba(255, 210, 122, .25), 0 0 10px rgba(255, 210, 122, .8); }
.ton .ppf-lbl { opacity: 0; transition: opacity .4s ease; }
.ton.zeichnen .ppf-lbl { opacity: 1; }
.ton .ton-tag { opacity: 0; transform: translateY(-6px); }
.ton.zeichnen .ton-tag { opacity: 1; transform: none; }
.ton-tag i { background: linear-gradient(135deg, #3a3f46, #0b0c0e); }
.ton-bereich { margin: .75rem 0 0; }
.ton-vorne-hinweis { margin-top: .7rem; font-size: .8rem; color: var(--mut); }
.ton-stufen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ton-werte { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: .9rem; }
.ton-werte li { background: rgba(255, 255, 255, .04); border: 1px solid var(--line); border-radius: 12px; padding: .6rem .5rem; text-align: center; }
.ton-werte strong { display: block; font: 700 1.25rem/1.1 var(--font-d); color: #fff; }
.ton-werte span { font-size: .72rem; color: var(--mut); }
@media (max-width: 640px) {
  .ton-werte strong { font-size: 1.05rem; }
}

/* Kennzeichnung rechts oben, damit sie die Beschriftung der Heckscheibe nicht verdeckt */
.ton .ton-tag { left: auto; right: 0; }