/* ==========================================================================
   PROJEKT: KDK Webseite
   DATEI:   style.css
   --------------------------------------------------------------------------
   Zentrale Styles, Variablen, Typografie, Banner, Menü und Content
   © 2026 KDK MEDIA
============================================================================ */

/* ==========================================================
   ZENTRALE VARIABLEN / KONSTANTEN
   ----------------------------------------------------------
   ALLE veränderbaren Konstanten stehen ausschließlich hier.
   KEINE verschachtelten Variablen.
   KEINE Geräteklassen.
   Das Layout basiert auf einer maximalen Handybreite von 450px.
========================================================== */
:root {
    /* ======================================================
       FARBEN
    ====================================================== */
    --kdk-bg:#ffffff;
    --kdk-bg-soft:#f8f8f8;
    --kdk-desktop-bg:#e6e6e6;
    --kdk-text:#000000;
    --kdk-text-light:#666666;
    --kdk-border:rgba(0,0,0,0.10);

    /* ======================================================
       GRUNDLAYOUT
    ====================================================== */
    --kdk-app-width:450px;
    --kdk-page-width:95%;
    --kdk-content-width:95%;
    --kdk-radius:12px;

    /* ======================================================
       BANNER
    ====================================================== */
    --kdk-banner-height:135px;
    --kdk-left-logo-height:90%;
    --kdk-right-logo-height:90%;
    --kdk-banner-left-width:50%;
    --kdk-banner-right-width:50%;
    --kdk-banner-padding:2%;

    /* ======================================================
       OBERE MENÜZEILE
    ====================================================== */
    --kdk-action-height:40px;
    --kdk-action-width:96%;
    --kdk-action-padding-top:6px;
    --kdk-action-padding-side:0%;
    --kdk-action-padding-bottom:6px;
    --kdk-action-button-height:30px;
    --kdk-action-button-gap:1%;
    --kdk-action-button-font-size:11px;
    --kdk-action-button-radius:5px;

    /* ======================================================
       HAUPTMENÜ
    ====================================================== */
    --kdk-menu-width:96%;
    --kdk-menu-height:530px;
    --kdk-menu-column-gap:4px;
    --kdk-menu-row-gap:4px;
    --kdk-menu-cell-padding:6px;
    --kdk-menu-padding-top:4px;
    --kdk-menu-padding-bottom:4px;

    /* ======================================================
       CONTENT / UNTERSEITEN
    ====================================================== */
    --kdk-content-padding-top:10px;
    --kdk-content-padding-side:2%;
    --kdk-content-padding-bottom:24px;
    --kdk-card-padding:4px;

    /* ======================================================
       POPUP
    ====================================================== */
    --kdk-popup-width:360px;
    --kdk-popup-padding:20px;
    --kdk-popup-radius:12px;
    --kdk-popup-overlay-padding:20px;
    --kdk-popup-input-height:42px;
    --kdk-popup-input-padding:10px;
    --kdk-popup-input-eye-width:42px;
    --kdk-popup-input-radius:7px;
    --kdk-popup-button-height:40px;
    --kdk-popup-button-radius:7px;
    --kdk-popup-button-margin-top:14px;
    --kdk-popup-input-border:#aaaaaa;
    --kdk-popup-button-bg:#707070;
    --kdk-popup-button-active-bg:#4CAF50;
    --kdk-popup-error:#e53935;

    /* ======================================================
       FONTS
    ====================================================== */
    --font-main:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --font-rounded:"Arial Rounded MT Bold","Arial Rounded MT",Arial,sans-serif;
    --font-arial:Arial,Helvetica,sans-serif;
    --font-serif:Georgia,"Times New Roman",serif;
    --font-mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
}

/* ==========================================================
   GRUNDLAYOUT
========================================================== */
* { box-sizing:border-box; margin:0; padding:0; }
html, body { width:100%; height:100%; overflow:hidden; }
html { background:var(--kdk-desktop-bg); }

body {
    width:100%; height:100vh; height:100dvh;
    background:var(--kdk-desktop-bg); color:var(--kdk-text); font-family:var(--font-main);
    overflow:hidden;
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* ==========================================================
   FONT-KLASSEN
========================================================== */
.font-main { font-family:var(--font-main); }
.font-rounded { font-family:var(--font-rounded); }
.font-arial { font-family:var(--font-arial); }
.font-serif { font-family:var(--font-serif); }
.font-mono { font-family:var(--font-mono); }

/* ==========================================================
   TYPOGRAFIE GLOBAL
========================================================== */
h1 { font-size:35px; font-weight:normal; color:#000; margin:10px 0; }
h2 { font-size:26px; font-weight:normal; color:#000; margin:10px 0 8px; }
h3 { font-size:23px; font-weight:normal; color:#000; margin:8px 0 6px; }
h4 { font-size:20px; font-weight:normal; color:#000; margin:6px 0 4px; }
h5 { font-size:18px; font-weight:normal; color:#000; margin:6px 0 2px; }
h6 { font-size:16px; font-weight:normal; color:#000; margin:6px 0 2px; }
p { font-size:14px; font-weight:normal; color:#000; margin:6px 0; line-height:1.3; }

/* ==========================================================
   TEXTGRÖSSEN
========================================================== */
.text10 { font-size:10px; margin:3px 0; }
.text11 { font-size:11px; margin:3px 0; }
.text12 { font-size:12px; margin:4px 0; }
.text13 { font-size:13px; margin:4px 0; }
.text14 { font-size:14px; margin:7px 0; }
.text15 { font-size:15px; margin:6px 0; }
.text16 { font-size:16px; margin:8px 0; }
.text17 { font-size:17px; margin:8px 0; }
.text18 { font-size:18px; margin:9px 0; }
.text19 { font-size:19px; margin:10px 0; }
.text20 { font-size:20px; margin:11px 0; }
.text21 { font-size:21px; margin:12px 0; }
.text22 { font-size:22px; margin:13px 0; }
.text23 { font-size:23px; margin:14px 0; }
.text24 { font-size:24px; margin:15px 0; }
.text25 { font-size:25px; margin:16px 0; }
.text26 { font-size:26px; margin:18px 0; }

/* ==========================================================
   TEXT-HILFSKLASSEN
========================================================== */
.text-left { text-align:left; }
.text-center { text-align:center; }
.text-right { text-align:right; }
.bold { font-weight:700; }
.normal { font-weight:normal; }
.uppercase { text-transform:uppercase; }

/* ==========================================================
   BANNER
========================================================== */
#banner-area {
    position:fixed; top:0; left:50%; width:100%; max-width:var(--kdk-app-width); height:var(--kdk-banner-height);
    transform:translateX(-50%);
    background:rgba(255,255,255,0.97); border-bottom:1px solid var(--kdk-border);
    z-index:1000; overflow:hidden;
}

.banner-inner {
    width:var(--kdk-page-width); height:100%; margin:0 auto; padding:0 var(--kdk-banner-padding);
    display:grid; grid-template-columns:var(--kdk-banner-left-width) var(--kdk-banner-right-width);
    align-items:center;
}

.banner-left, .banner-right {
    width:100%; height:100%; min-width:0; min-height:0;
    display:flex; align-items:center; justify-content:center; overflow:hidden;
}

.banner-left-logo {
    display:block; width:auto; height:var(--kdk-left-logo-height);
    max-width:100%; max-height:100%; object-fit:contain;
}

.banner-right-logo {
    display:block; width:auto; height:var(--kdk-right-logo-height);
    max-width:100%; max-height:100%; object-fit:contain;
}

/* ==========================================================
   OBERE MENÜZEILE
========================================================== */
#action-bar {
    position:fixed; top:var(--kdk-banner-height); left:50%;
    width:100%; max-width:var(--kdk-app-width); height:var(--kdk-action-height);
    transform:translateX(-50%);
    background:#fff; border-bottom:1px solid var(--kdk-border);
    z-index:999; overflow:hidden;
}

.action-inner {
    width:var(--kdk-action-width); height:100%; margin:0 auto;
    padding:var(--kdk-action-padding-top) var(--kdk-action-padding-side) var(--kdk-action-padding-bottom);
    display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
    align-items:center; gap:var(--kdk-action-button-gap);
}

.action-button {
    width:100%; height:var(--kdk-action-button-height); margin:0; padding:0 2%;
    border:none; border-radius:var(--kdk-action-button-radius);
    font-size:var(--kdk-action-button-font-size); font-weight:700;
    cursor:pointer; text-decoration:none; white-space:nowrap;
    display:flex; align-items:center; justify-content:center;
}

.action-email { background:#707070; color:#fff; }
.action-whatsapp { background:#25D366; color:#fff; }
.action-info { background:#00bfc4; color:#fff; }
.action-facebook { background:#1877F2; color:#fff; }
.action-youtube { background:#FF0000; color:#fff; }

/* ==========================================================
   HAUPTBEREICH
========================================================== */
#main-viewport {
    position:fixed;
    top:calc(var(--kdk-banner-height) + var(--kdk-action-height));
    left:50%; bottom:0;
    width:100%; max-width:var(--kdk-app-width); min-height:0;
    transform:translateX(-50%);
    display:flex; flex-direction:column; overflow:hidden;
    background:var(--kdk-bg);
}

/* ==========================================================
   HAUPTMENÜ
========================================================== */
.creative-menu-section {
    width:var(--kdk-menu-width); height:var(--kdk-menu-height); min-height:var(--kdk-menu-height); flex:0 0 var(--kdk-menu-height);
    margin:0 auto; padding:var(--kdk-menu-padding-top) 0 var(--kdk-menu-padding-bottom);
    display:flex; flex-direction:column; overflow:hidden;
}

.menu-grid {
    width:100%; height:100%; min-height:0;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(3,minmax(0,1fr));
    column-gap:var(--kdk-menu-column-gap); row-gap:var(--kdk-menu-row-gap);
}

.menu-button {
    width:100%; height:100%; min-width:0; min-height:0; margin:0;
    padding:var(--kdk-menu-cell-padding);
    background:transparent; border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden; transition:transform .2s ease;
}

.menu-button:hover { transform:scale(1.02); }
.menu-button:active { transform:scale(1.01); }

.menu-button img {
    display:block; width:100%; height:100%; max-width:100%; max-height:100%;
    object-fit:contain; user-select:none; -webkit-user-drag:none;
}

/* ==========================================================
   CONTENT / UNTERSEITEN
========================================================== */
.content-section {
    width:var(--kdk-content-width); height:100%; min-height:0; margin:0 auto;
    padding:var(--kdk-content-padding-top) var(--kdk-content-padding-side) var(--kdk-content-padding-bottom);
    flex:1; overflow:auto; -webkit-overflow-scrolling:touch;
}

.content-card {
    width:100%; padding:var(--kdk-card-padding);
    background:transparent; border:none; border-radius:0; box-shadow:none;
}

/* ==========================================================
   STANDARD-BUTTONS
========================================================== */
button { font-family:inherit; }

.kdk-button {
    display:inline-flex; align-items:center; justify-content:center;
    min-height:40px; padding:8px 18px; background:#707070; color:#fff;
    border:none; border-radius:8px; font-size:14px; font-weight:700;
    text-decoration:none; cursor:pointer;
}

.kdk-button:hover { filter:brightness(1.08); }
.kdk-green { background:#4CAF50; color:#fff; }
.kdk-red { background:#e53935; color:#fff; }
.kdk-blue { background:#1e88e5; color:#fff; }
.kdk-orange { background:#fb8c00; color:#fff; }
.kdk-yellow { background:#fbc02d; color:#000; }
.kdk-grey { background:#757575; color:#fff; }
.kdk-lightgrey { background:#e0e0e0; color:#000; }

/* ==========================================================
   FORMULARE
========================================================== */
form { display:block; width:100%; max-width:500px; margin:15px auto; text-align:left; }
form label { display:block; font-size:15px; font-weight:700; margin:10px 0 4px; }

form input[type="text"], form input[type="email"], form input[type="password"], form input[type="number"], form select, form textarea {
    width:100%; padding:10px; background:#fff; border:1px solid #ccc;
    border-radius:8px; outline:none; font-family:inherit; font-size:15px;
}

form input:focus, form select:focus, form textarea:focus { border-color:#777; }

/* ==========================================================
   MELDUNGSBOXEN
========================================================== */
.message {
    width:100%; max-width:500px; margin:8px auto; padding:10px 14px;
    background:#ffdede; color:#b00020; border-radius:8px;
    text-align:center; font-weight:700;
}

.message.success { background:#d9f7d9; color:#0a680a; }

/* ==========================================================
   STUDIO PREISTABELLE
========================================================== */
.studio-price-table {
    width:100%; margin:10px 0 18px;
    border-top:1px solid var(--kdk-border);
}

.studio-price-row {
    width:100%; min-height:38px; padding:7px 10px;
    display:grid; grid-template-columns:minmax(0,1fr) auto;
    align-items:center; gap:20px;
    border-bottom:1px solid var(--kdk-border);
    font-size:14px;
}

.studio-price-row span:last-child { text-align:right; white-space:nowrap; }

.studio-price-head {
    background:var(--kdk-bg-soft);
    font-weight:700;
}

/* ==========================================================
   POPUP
========================================================== */
.kdk-popup-overlay {
    position:fixed;
    top:calc(var(--kdk-banner-height) + var(--kdk-action-height)); left:0; right:0; bottom:0;
    z-index:99999; background:var(--kdk-popup-overlay-bg);
    display:flex; align-items:flex-start; justify-content:center;
    padding:var(--kdk-content-padding-top) var(--kdk-popup-overlay-padding) var(--kdk-popup-overlay-padding);
}

.kdk-popup-box {
    width:100%; max-width:var(--kdk-popup-width);
    background:var(--kdk-bg);
    padding:var(--kdk-popup-padding);
    border-radius:var(--kdk-popup-radius);
    text-align:center;
}

.kdk-popup-input-wrap {
    position:relative; width:100%;
}

.kdk-popup-input {
    width:100%; height:var(--kdk-popup-input-height);
    padding:var(--kdk-popup-input-padding) var(--kdk-popup-input-eye-width) var(--kdk-popup-input-padding) var(--kdk-popup-input-padding);
    border:1px solid var(--kdk-popup-input-border);
    border-radius:var(--kdk-popup-input-radius);
    background:var(--kdk-bg); color:var(--kdk-text);
    text-align:left; outline:none; font-family:inherit;
}

.kdk-popup-input:focus { border-color:#777; }

.kdk-popup-eye {
    position:absolute; top:50%; right:0; transform:translateY(-50%);
    width:var(--kdk-popup-input-eye-width); height:var(--kdk-popup-input-height);
    padding:0; border:0; background:transparent; color:var(--kdk-text-light);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
}

.kdk-popup-eye.active {
    color:#4CAF50;
}

.kdk-popup-eye svg {
    width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2;
    stroke-linecap:round; stroke-linejoin:round;
}

.kdk-popup-error {
    display:none; color:var(--kdk-popup-error); font-weight:700;
}

.kdk-popup-button {
    width:100%; height:var(--kdk-popup-button-height);
    margin:var(--kdk-popup-button-margin-top) 0 0;
    padding:0; border:0;
    border-radius:var(--kdk-popup-button-radius);
    background:var(--kdk-popup-button-bg); color:#fff;
    font-weight:700; cursor:default;
}

.kdk-popup-button.active {
    background:var(--kdk-popup-button-active-bg); cursor:pointer;
}

/* ==========================================================
   HINTERGRUND SMARTPHONE
========================================================== */
@media (max-width:450px) {
    html, body { background:var(--kdk-bg); }
}