/* ============================================
   xFont8.css — Final Beauty Mix (JS-safe)
   ============================================ */

/* --------------------------------------------
   1) Content-Schrift (Serif für h2, modern für p)
   -------------------------------------------- */

/* h2 = edel, serif, sehr schön */
h2,
legend h2 {
    font-family: "Playfair Display", "Georgia", serif;
    font-weight: 700;
    color: #2a2a2a;
}

/* p = modern, klar, lesbar */
p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.2rem;
    line-height: 1.6;
    color: #444;
}

/* leichte Farbakzente für h2 */
section.home h2 {
    color: #003f88; /* tiefes Blau */
}
section.impressum h2 {
    color: #aa4400; /* warmes Orange */
}
section.kontakt h2 {
    color: #007744; /* sanftes Grün */
}

/* --------------------------------------------
   2) Navigation-Schrift (robotic + modern)
   -------------------------------------------- */

/* Header/Footer = Inter (modern, clean) */
.page-header,
.page-footer {
    font-family: "Inter", Arial, sans-serif;
    font-weight: 600;
    color: #222;
}

/* Tabs = Roboto (robotic, klar) */
.form-tabs,
.form-tabs label {
    font-family: "Roboto", Arial, sans-serif;
    font-weight: 600;
    color: #222;
}

/* Tabs leicht farbig */
.form-tabs label {
    padding: 4px 8px;
    border-radius: 4px;
    background: #eef2f7; /* hellblau-grau */
}

/* --------------------------------------------
   3) Buttons (modern, klar)
   -------------------------------------------- */
input[type="submit"] {
    font-family: "Inter", Arial, sans-serif;
    font-weight: 600;
    color: #fff;
    background: #0055aa; /* sanftes Blau */
    border-radius: 6px;
}

/* --------------------------------------------
   4) Watch-Override (max-width: 300px)
   -------------------------------------------- */
@media (max-width: 300px) {

    .page-header { display: none !important; }
    .page-footer { display: none !important; }

    .form-tabs {
        display: flex !important;
        font-size: 1rem;
    }

    h2 { font-size: 1rem; }
    p  { font-size: 0.85rem; }
    input[type="submit"] { font-size: 0.85rem; }
}