/*
 * style.css — Overlay über styles.css
 *
 * Die Original-styles.css aus dem 1&1-Backup ist erhalten und greift weiterhin
 * (z.B. die wichtige .eingabe-Klasse mit gelbem Hintergrund). Wir patchen
 * hier nur die Stellen, die in der heutigen Umgebung (Iframe im PrestaShop,
 * Mobile-Devices) problematisch wären.
 *
 * Reihenfolge im header.inc.php:
 *   1. styles.css (Original, definiert das gesamte Erscheinungsbild)
 *   2. style.css  (dieser Overlay, überschreibt nur was problematisch ist)
 */

* {
    box-sizing: border-box;
}

/* Original hat body { width: 1010px } für die alte Shop-Breite.
 * Im Iframe + Mobile ist das viel zu breit. Wir setzen es zurück und
 * begrenzen den Konfigurator-Wrapper stattdessen. */
body.konfigurator {
    width: auto !important;
    max-width: 1010px;
    margin: 0 auto;
    padding: 8px;
}

.konfigurator-wrapper {
    width: 100%;
}

/* Image-Buttons im Original sind klickbare GIFs — geben wir ihnen
 * einen Pointer-Cursor und Hover-Feedback für moderne UX. */
img[onclick],
input[type="image"] {
    cursor: pointer;
    transition: opacity 0.15s;
}
img[onclick]:hover,
input[type="image"]:hover {
    opacity: 0.85;
}

/* Header- und Tab-Bilder auf volle Breite — Original-Bilder sind ~1010×N,
 * im neuen Layout responsive über den ganzen Container. !important weil
 * die Original-styles.css evtl. konfliktierende table/img-Regeln hat. */
img[src="bilder/planer.png"],
img[src^="bilder/kartei-planer"] {
    display: block !important;
    width: 100% !important;
    max-width: 1010px !important;
    height: auto !important;
    margin: 0 auto 4px !important;
}

/* Focus-Sichtbarkeit für Tastatur-Nutzer (im Original nicht vorhanden) */
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: 2px solid #f4a000;
    outline-offset: 1px;
}

/* Hilfe-Seite (eigenständig, nicht über styles.css gesteuert) */
.hilfe-page {
    font-family: Verdana, Arial, sans-serif;
    font-size: 13px;
    padding: 30px 20px;
    max-width: 700px;
    margin: 0 auto;
}
.hilfe-page h1 {
    color: #2c5079;
    font-size: 18px;
}
.hilfe-page ul {
    padding-left: 20px;
}
.hilfe-page li {
    margin-bottom: 8px;
}

/* Mobile-Anpassung: auf schmalen Screens scrollen lassen statt
 * Layout zerstören (alte Tabellen lassen sich nicht responsivieren) */
@media (max-width: 768px) {
    body.konfigurator {
        font-size: 13px;
        padding: 4px;
    }
    .konfigurator-wrapper {
        overflow-x: auto;
    }
}