/* kontakt.css — seiten-spezifisches Sektions-Layout.
   Tokens, Typografie, Buttons, Nav und Footer kommen zentral aus base.css (eine Wahrheit). */

    /* ======================================================
       KONTAKT — V2-Sektionen + V5-Optik
       ====================================================== */

    /* PAGE HERO */
    .page-hero{position:relative;min-height:70vh;background:var(--warm-900);overflow:hidden}
    .page-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35}
    .page-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,25,23,.2) 0%,rgba(26,25,23,.75) 100%)}
    .page-hero-content{position:absolute;bottom:72px;left:0;right:0;padding:0 80px;z-index:5}
    .page-hero-content .label{color:var(--orange);margin-bottom:16px}
    .page-hero-title{font-family:var(--font-display);font-size:80px;font-weight:800;line-height:.95;letter-spacing:-3px;color:var(--white);text-transform:uppercase}
    .page-hero-title span{color:var(--warm-400);font-weight:600}
    .page-hero-desc{font-size:17px;line-height:1.7;color:rgba(255,255,255,.55);max-width:500px;margin-top:20px}
    .page-hero-deco{position:absolute;top:50%;right:80px;transform:translateY(-50%);z-index:5;font-family:var(--font-display);font-size:200px;font-weight:800;color:rgba(255,255,255,.03);letter-spacing:-8px;text-transform:uppercase;line-height:1}

    /* KONTAKT GRID */
    .kontakt-grid{padding:120px 80px;display:grid;grid-template-columns:1.2fr 1fr;gap:80px;align-items:start}

    /* Form */
    .kontakt-form h2{font-family:var(--font-display);font-size:36px;font-weight:700;color:var(--warm-900);margin-bottom:12px}
    .kontakt-form>p{font-size:16px;color:var(--warm-500);margin-bottom:40px;line-height:1.7}
    .form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
    .form-row .full{grid-column:1/-1}
    .form-group label{display:block;font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--warm-400);margin-bottom:8px}
    .form-group input,
    .form-group select,
    .form-group textarea{width:100%;padding:16px 20px;border:1.5px solid var(--warm-100);border-radius:var(--radius-md);font-family:var(--font-body);font-size:15px;color:var(--warm-800);background:var(--white);transition:border-color .3s;outline:none}
    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus{border-color:var(--orange)}
    .form-group textarea{min-height:140px;resize:vertical}
    .form-group select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239E978C' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;cursor:pointer}
    .form-submit{margin-top:32px}
    .form-submit button{display:inline-flex;align-items:center;gap:8px;padding:18px 44px;background:var(--orange);color:var(--white);font-family:var(--font-body);font-size:15px;font-weight:600;border:none;border-radius:var(--radius-pill);cursor:pointer;transition:all .3s}
    .form-submit button:hover{background:var(--orange-hover)}
    /* Platzhalter, solange kein Fluent-Forms-Shortcode gesetzt ist (inc/kontakt.php) */
    .form-placeholder{padding:40px 32px;border:1.5px dashed var(--warm-200);border-radius:var(--radius-lg);background:var(--sand);color:var(--warm-500);font-size:15px;line-height:1.8}
    .form-placeholder code{font-family:monospace;font-size:13px;background:var(--warm-100);padding:2px 6px;border-radius:6px;color:var(--warm-700)}

    /* ── Fluent Form ans Mockup-Formular-Design angleichen ── */
    .fluent_form_3 .ff-el-group{margin-bottom:20px}
    .fluent_form_3 .ff-el-input--label label,.fluent_form_3 label{display:inline-block;font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--warm-400);margin-bottom:8px}
    .fluent_form_3 .ff-el-form-control{width:100%;padding:16px 20px;border:1.5px solid var(--warm-100);border-radius:var(--radius-md);font-family:var(--font-body);font-size:15px;line-height:1.5;color:var(--warm-800);background:var(--white);transition:border-color .3s;outline:none;box-shadow:none}
    .fluent_form_3 .ff-el-form-control:focus{border-color:var(--orange);box-shadow:none}
    .fluent_form_3 textarea.ff-el-form-control{min-height:140px;resize:vertical}
    .fluent_form_3 select.ff-el-form-control{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239E978C' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:44px;cursor:pointer}
    /* Telefon-Feld (intl-tel-input): Flaggen-Dropdown links, Text nicht überlagern */
    .fluent_form_3 .iti{width:100%;display:block}
    .fluent_form_3 .iti input.ff-el-form-control{padding-left:52px}
    /* Submit-Button = btn-accent aus dem Design */
    .fluent_form_3 .ff-btn-submit{display:inline-flex;align-items:center;gap:8px;padding:18px 44px;background:var(--orange)!important;color:var(--white)!important;font-family:var(--font-body);font-size:15px;font-weight:600;border:none;border-radius:var(--radius-pill);cursor:pointer;transition:all .3s;box-shadow:none}
    .fluent_form_3 .ff-btn-submit:hover{background:var(--orange-hover)!important}
    .fluent_form_3 .ff_submit_btn_wrapper{margin-top:12px}
    /* Datenschutz-Checkbox: Fließtext klein und NICHT versal (die Label-Regel
       oben trifft sonst auch den Zustimmungssatz) */
    .fluent_form_3 .ff-el-form-check label{font-size:14px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--warm-500);line-height:1.6}
    .fluent_form_3 .ff-el-form-check label a{color:var(--orange);text-decoration:underline;text-underline-offset:2px}
    .fluent_form_3 .ff-el-form-check-input{width:16px;height:16px;accent-color:var(--orange)}

    /* Info column */
    .kontakt-info{display:flex;flex-direction:column;gap:36px}
    .kontakt-block{background:var(--sand);border-radius:var(--radius-lg);padding:36px 32px}
    .kontakt-block h3{font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--warm-900);margin-bottom:14px}
    .kontakt-block p{font-size:15px;line-height:1.8;color:var(--warm-500)}
    .kontakt-block a{font-size:15px;color:var(--warm-600);transition:color .3s;display:block;margin-top:4px}
    .kontakt-block a:hover{color:var(--orange)}
    .big-phone{display:block;font-family:var(--font-display);font-size:28px;font-weight:700;color:var(--warm-900);margin-top:8px;transition:color .3s}
    .big-phone:hover{color:var(--orange)}

    /* ======================================================
       RESPONSIVE (Desktop bleibt unveraendert)
       ====================================================== */
    @media (max-width:900px){
      body{width:100%}
      .page-hero-content{padding:0 40px}
      .page-hero-title{font-size:56px;letter-spacing:-2px}
      .page-hero-deco{font-size:120px;right:40px}
      .kontakt-grid{grid-template-columns:1fr;gap:56px;padding:80px 40px}
      .footer{padding:64px 40px 32px}
      .footer-grid{grid-template-columns:1fr 1fr;gap:40px;margin-bottom:56px}
    }
    @media (max-width:640px){
      .page-hero{min-height:60vh}
      .page-hero-content{padding:0 24px;bottom:48px}
      .page-hero-title{font-size:40px;letter-spacing:-1px}
      .page-hero-deco{display:none}
      .page-hero-desc{font-size:15px}
      .kontakt-grid{padding:56px 24px;gap:40px}
      .kontakt-form h2{font-size:28px}
      .kontakt-form>p{margin-bottom:28px}
      .form-row{grid-template-columns:1fr;gap:16px}
      .kontakt-info{gap:20px}
      .kontakt-block{padding:28px 24px}
      .big-phone{font-size:24px}
      .footer{padding:48px 24px 28px;margin:0 16px}
      .footer-grid{grid-template-columns:1fr;gap:32px;margin-bottom:40px}
      .footer-bottom{flex-direction:column;gap:16px;align-items:flex-start}
    }