/* ============================================================
   EURO HOTEL SUPPLY – kontakt.css  v2.0
   Seitenbezogene Stile für /kontakt/
   Globale Variablen, Buttons, Container, Header, Footer
   kommen aus styles.css.
   Alle Selektoren tragen Präfix kt- um Konflikte zu vermeiden.
   ============================================================ */


/* ============================================================
   1. HERO
   Explizite Textfarben nötig, weil body color dunkel ist
   und section-dark nur den Hintergrund setzt.
   ============================================================ */

.kt-hero {
  background: linear-gradient(
    135deg,
    var(--c-navy-dark) 0%,
    var(--c-navy)      55%,
    var(--c-navy-mid)  100%
  );
  padding-block: var(--sp-48);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.kt-hero-inner {
  max-width: 760px;
}

/* Eyebrow – Goldton explizit */
.kt-hero .hero-eyebrow {
  color: var(--c-gold-light);
}

.kt-hero .hero-eyebrow-line {
  background-color: var(--c-gold);
}

/* H1 – explizit weiß; begrenzte Breite verhindert unkontrollierten Zeilenfluss */
.kt-hero-h1 {
  font-size: clamp(1.75rem, 3.8vw, 2.8rem);
  font-weight: 700;
  color: var(--c-white);               /* explizit – überschreibt body color */
  line-height: 1.22;
  letter-spacing: -0.022em;
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-10);
  max-width: 680px;                    /* verhindert unkontrollierten Zeilenfluss */
}

/* Erster Einleitungstext – klar lesbar auf dunkelblau */
.kt-hero-lead {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.88);   /* explizit – sonst übernimmt body */
  line-height: 1.72;
  max-width: 650px;
  margin-bottom: var(--sp-6);
}

/* Zweiter Text – etwas zurückhaltender, aber deutlich lesbar */
.kt-hero-sub {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.68;
  max-width: 620px;
  margin-bottom: var(--sp-6);
}

/* Randbemerkung – Projektrahmen */
.kt-hero-note {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.50);
  line-height: 1.55;
  max-width: 560px;
  margin-bottom: var(--sp-16);
  padding-left: var(--sp-8);
  border-left: 2px solid rgba(192, 144, 64, 0.45);
}


/* ============================================================
   2. FORMULAR-BEREICH – Zweispalten-Layout
   ============================================================ */

.kt-form-section {
  padding-block: var(--sp-48);
}

.kt-form-layout {
  display: grid;
  grid-template-columns: 65fr 35fr;
  gap: var(--sp-24);
  align-items: start;
}

/* --- Linke Spalte: Formular-Card --- */
/* min-width: 0 hebt die implizite Grid-Item-Mindestbreite (min-width: auto)
   auf, die sonst verhindert, dass die Spalte unter die intrinsische
   Inhaltsbreite ihrer Formularfelder schrumpft - ohne dies entsteht bei
   schmalen Viewports (z. B. 320px) horizontaler Overflow. */
.kt-form-col {
  min-width: 0;
}

.kt-form-card {
  background-color: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  padding: var(--sp-24) var(--sp-24);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
}

.kt-form-card-header {
  margin-bottom: var(--sp-12);
}

.kt-form-card-header h2 {
  color: var(--c-navy);
  margin-bottom: var(--sp-4);
}

.kt-form-card-header p {
  font-size: 0.9rem;
  color: var(--c-text-light);
  line-height: 1.62;
}

/* Info-Box: E-Mail-Hinweis – sachlich, nicht dominant */
.kt-mailto-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-6);
  background-color: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-gold);
  border-radius: var(--radius-lg);
  padding: var(--sp-8) var(--sp-10);
  margin-bottom: var(--sp-16);
}

.kt-mailto-notice svg {
  flex-shrink: 0;
  color: var(--c-gold);
  margin-top: 2px;
}

.kt-mailto-notice p {
  font-size: 0.845rem;
  color: var(--c-text-mid);
  line-height: 1.58;
  margin: 0;
  max-width: none;
}

.kt-mailto-notice[hidden] { display: none; }

/* Erfolgs-/Fehlerzustand der Formular-Statusmeldung (#kt-form-status) */
.kt-mailto-notice.is-success {
  border-left-color: #2E7D32;
}

.kt-mailto-notice.is-success svg { color: #2E7D32; }

.kt-mailto-notice.is-error {
  border-left-color: #C0392B;
}

.kt-mailto-notice.is-error svg { color: #C0392B; }

/* Anti-Spam-Feld: für Menschen und Screenreader unsichtbar, für einfache
   Formular-Bots aber weiterhin technisch ausfüllbar (kein display:none). */
.kt-hp-field {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Absende-Button: Lade-/Deaktiviert-Zustand */
.kt-submit-btn:disabled,
.kt-submit-btn[aria-disabled="true"] {
  opacity: 0.7;
  cursor: not-allowed;
}


/* ============================================================
   3. FORMULAR – Felder
   ============================================================ */

.kt-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
}

/* Zwei nebeneinander liegende Felder */
.kt-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
}

/* Einzelnes Feld */
.kt-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Label oberhalb des Feldes */
.kt-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--c-text);
  line-height: 1.4;
  margin-bottom: 2px;
}

/* Pflichtfeld-Stern */
.kt-required {
  color: var(--c-gold);
  font-style: normal;
  font-weight: 700;
  margin-left: 2px;
  text-decoration: none;
}

/* Eingabefelder – einheitlich */
.kt-input,
.kt-select,
.kt-textarea {
  display: block;
  width: 100%;
  font-family: var(--font);
  font-size: 0.9rem;
  color: var(--c-text);
  background-color: var(--c-white);
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius);
  padding: 10px 13px;
  line-height: 1.5;
  transition: border-color var(--ease), box-shadow var(--ease);
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}

.kt-input:hover,
.kt-select:hover {
  border-color: #b8b5af;
}

.kt-input:focus,
.kt-select:focus,
.kt-textarea:focus {
  outline: none;
  border-color: var(--c-gold);
  box-shadow: 0 0 0 3px rgba(192, 144, 64, 0.15);
}

.kt-input:focus-visible,
.kt-select:focus-visible,
.kt-textarea:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 1px;
}

/* Fehlerzustand */
.kt-input.is-error,
.kt-select.is-error,
.kt-textarea.is-error {
  border-color: #C0392B;
}

.kt-input.is-error:focus,
.kt-select.is-error:focus,
.kt-textarea.is-error:focus {
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
}

/* Select: eigener Pfeil */
.kt-select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23707070' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 38px;
}

/* Textarea */
.kt-textarea {
  resize: vertical;
  min-height: 160px;
}

/* Hilfstext unterhalb des Feldes */
.kt-field-hint {
  display: block;
  font-size: 0.775rem;
  color: var(--c-text-light);
  line-height: 1.45;
  margin-top: 3px;
}

/* Fehlermeldung unterhalb des Feldes */
.kt-field-error {
  display: block;
  font-size: 0.8rem;
  color: #C0392B;
  line-height: 1.4;
  min-height: 1.1em;
  margin-top: 3px;
}


/* ============================================================
   4. CHECKBOX-GRUPPE
   ============================================================ */

.kt-fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

.kt-legend {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: var(--sp-6);
  width: 100%;
}

.kt-checkbox-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4) var(--sp-6);
}

.kt-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  font-size: 0.875rem;
  color: var(--c-text-mid);
  cursor: pointer;
  line-height: 1.45;
  padding: var(--sp-4) var(--sp-6);
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius);
  background-color: var(--c-bg-alt);
  transition: border-color var(--ease), background-color var(--ease);
  -webkit-user-select: none;
  user-select: none;
}

.kt-checkbox-label:hover {
  border-color: var(--c-gold);
  background-color: rgba(192, 144, 64, 0.04);
}

.kt-checkbox {
  width: 17px;
  height: 17px;
  min-width: 17px;
  min-height: 17px;
  border: 1.5px solid var(--c-border);
  border-radius: 3px;
  background-color: var(--c-white);
  cursor: pointer;
  margin-top: 1px;
  flex-shrink: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--ease), background-color var(--ease);
}

.kt-checkbox:checked {
  background-color: var(--c-gold);
  border-color: var(--c-gold);
  background-image: url("data:image/svg+xml,%3Csvg width='11' height='8' viewBox='0 0 11 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4l3 3 6-6' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.kt-checkbox:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 2px;
}

/* Datei-Upload-Hinweis */
.kt-upload-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-6);
  background-color: var(--c-bg-alt);
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius-lg);
  padding: var(--sp-8) var(--sp-10);
}

.kt-upload-notice svg {
  flex-shrink: 0;
  color: var(--c-text-light);
  margin-top: 2px;
}

.kt-upload-notice p {
  font-size: 0.845rem;
  color: var(--c-text-light);
  line-height: 1.55;
  margin: 0;
  max-width: none;
}

/* Datenschutz-Checkbox */
.kt-datenschutz-label {
  padding: var(--sp-6) var(--sp-8);
  background-color: var(--c-bg-alt);
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius);
}

.kt-inline-link {
  color: var(--c-gold);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--ease);
}

.kt-inline-link:hover {
  color: var(--c-gold-hover);
}

/* Cloudflare Turnstile (Sicherheitsprüfung) */
.kt-turnstile-field {
  gap: var(--sp-2);
}

.kt-turnstile {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.kt-turnstile iframe {
  max-width: 100%;
}

.kt-turnstile.is-error {
  outline: 1px solid #C0392B;
  outline-offset: 4px;
  border-radius: var(--radius);
}

/* Formular-Absende-Bereich */
.kt-form-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding-top: var(--sp-4);
}

.kt-submit-btn {
  align-self: flex-start;
}

.kt-required-note {
  font-size: 0.775rem;
  color: var(--c-text-light);
  margin: 0;
}


/* ============================================================
   5. RECHTE INFORMATIONSSPALTE
   ============================================================ */

.kt-contact-col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

/* Sticky nur auf Desktop */
.kt-contact-sticky {
  position: sticky;
  top: calc(68px + var(--sp-12));
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.kt-info-card {
  background-color: var(--c-navy);
  border-radius: var(--radius-xl);
  padding: var(--sp-12) var(--sp-12);
  color: var(--c-white);
}

.kt-info-card-alt {
  background-color: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  color: var(--c-text);
}

.kt-info-card h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--c-white);
  margin-bottom: var(--sp-6);
  line-height: 1.3;
}

.kt-info-card-alt h3 {
  color: var(--c-navy);
}

.kt-info-card p {
  font-size: 0.855rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.62;
  max-width: none;
  margin-bottom: var(--sp-6);
}

.kt-info-card-alt p {
  color: var(--c-text-light);
}

.kt-info-card p:last-child { margin-bottom: 0; }

.kt-info-contact-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--c-white);
  margin-bottom: var(--sp-2);
  max-width: none;
}

.kt-info-contact-line {
  margin-bottom: var(--sp-2);
}

.kt-info-contact-label {
  color: rgba(255, 255, 255, 0.45);
}

.kt-info-contact-link {
  color: var(--c-gold-light);
  font-weight: 600;
  transition: color var(--ease);
}

.kt-info-contact-link:hover {
  color: var(--c-white);
}

.kt-info-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-block: var(--sp-8);
}

.kt-info-divider-alt {
  border-color: var(--c-border);
}

.kt-info-links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.kt-info-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.845rem;
  font-weight: 600;
  color: var(--c-gold-light);
  transition: color var(--ease), gap var(--ease);
}

.kt-info-link:hover {
  color: var(--c-white);
  gap: 9px;
}

.kt-info-link-dark {
  color: var(--c-gold);
}

.kt-info-link-dark:hover {
  color: var(--c-gold-hover);
  gap: 9px;
}

.kt-info-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.kt-info-list li {
  font-size: 0.845rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.5;
  padding-left: var(--sp-6);
  position: relative;
}

.kt-info-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--c-gold);
}


/* ============================================================
   6. ABSCHNITT: WELCHE ANGABEN HELFEN
   ============================================================ */

.kt-angaben-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-8);
  margin-bottom: var(--sp-10);
}

.kt-angaben-card {
  background-color: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  padding: var(--sp-12) var(--sp-10);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.kt-angaben-num {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--c-gold);
  line-height: 1;
}

.kt-angaben-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--c-navy);
  line-height: 1.3;
}

.kt-angaben-text {
  font-size: 0.845rem;
  color: var(--c-text-light);
  line-height: 1.6;
}

.kt-angaben-hinweis {
  font-size: 0.875rem;
  color: var(--c-text-light);
  font-style: italic;
  padding-left: var(--sp-8);
  border-left: 2px solid var(--c-border);
}


/* ============================================================
   7. ABSCHNITT: PROJEKTRAHMEN
   ============================================================ */

.kt-rahmen-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--sp-32);
  align-items: start;
}

.kt-rahmen-text h2 { margin-bottom: var(--sp-8); }
.kt-rahmen-text p  { margin-bottom: var(--sp-6); }

.kt-rahmen-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-block: var(--sp-10);
  border-top: 1px solid var(--c-border);
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-10);
}

.kt-rahmen-stat-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--c-gold);
  line-height: 1;
}

.kt-rahmen-stat-label {
  font-size: 0.8rem;
  color: var(--c-text-light);
}

.kt-rahmen-leistungen {
  background-color: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  padding: var(--sp-12);
}

.kt-rahmen-leistungen-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-light);
  margin-bottom: var(--sp-8);
}

.kt-rahmen-leistungen-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.kt-rahmen-link {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  color: var(--c-navy);
  font-weight: 500;
  padding-block: var(--sp-2);
  border-bottom: 1px solid var(--c-border-light);
  transition: color var(--ease);
}

.kt-rahmen-link:last-child { border-bottom: none; }
.kt-rahmen-link:hover { color: var(--c-gold); }


/* ============================================================
   8. ABSCHNITT: NÄCHSTE SCHRITTE
   ============================================================ */

.kt-schritte-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-8);
}

.kt-schritt {
  background-color: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  padding: var(--sp-12) var(--sp-10);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.kt-schritt-num {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--c-gold);
  line-height: 1;
}

.kt-schritt-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--c-navy);
  line-height: 1.3;
}

.kt-schritt-text {
  font-size: 0.875rem;
  color: var(--c-text-light);
  line-height: 1.62;
}


/* ============================================================
   RESPONSIVE – TABLET (max 1024px)
   ============================================================ */

@media (max-width: 1024px) {

  .kt-form-layout {
    grid-template-columns: 3fr 2fr;
    gap: var(--sp-16);
  }

  .kt-contact-sticky {
    position: static;
  }

  .kt-angaben-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .kt-rahmen-layout {
    grid-template-columns: 1fr 240px;
    gap: var(--sp-20);
  }
}


/* ============================================================
   RESPONSIVE – MOBILE (max 768px)
   ============================================================ */

@media (max-width: 768px) {

  .kt-hero {
    padding-block: var(--sp-24);
  }

  .kt-hero-h1 {
    font-size: clamp(1.5rem, 5.5vw, 2.1rem);
    max-width: 100%;
  }

  .kt-hero-lead  { font-size: 0.95rem; }
  .kt-hero-sub   { font-size: 0.875rem; }
  .kt-hero-note  { font-size: 0.82rem; }

  /* Zweispalten → Einspaltig */
  .kt-form-layout {
    grid-template-columns: 1fr;
    gap: var(--sp-16);
  }

  /* Mobile Reihenfolge: "Direkter Kontakt" soll sofort erreichbar sein und
     nicht erst nach dem langen Formular erscheinen; "Projektrahmen" bleibt
     danach. display:contents loest ausschliesslich die Sidebar-Gruppierung
     auf Layout-Ebene auf (die beiden Karten werden zu eigenstaendig
     anordenbaren Grid-Items von .kt-form-layout) - keine Dopplung der
     Kontaktdaten, keine DOM-Verschiebung, Desktop/Tablet unveraendert.
     Bekannter, akzeptierter Nebeneffekt: das aria-label der aufgeloesten
     .kt-contact-col-Landmarke greift auf sehr schmalen Viewports nicht mehr;
     die Ueberschriften der beiden Karten bleiben regulaer vorlesbar. */
  .kt-contact-col,
  .kt-contact-sticky {
    display: contents;
  }

  .kt-info-card:not(.kt-info-card-alt) {
    order: -1;
  }

  .kt-info-card-alt {
    order: 1;
  }

  .kt-form-card {
    padding: var(--sp-16) var(--sp-12);
  }

  /* Alle Formularzeilen einspaltig */
  .kt-field-row {
    grid-template-columns: 1fr;
  }

  /* Checkboxen einspaltig */
  .kt-checkbox-group {
    grid-template-columns: 1fr;
  }

  /* Button volle Breite */
  .kt-submit-btn {
    width: 100%;
    justify-content: center;
  }

  .kt-angaben-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .kt-rahmen-layout {
    grid-template-columns: 1fr;
    gap: var(--sp-16);
  }

  .kt-schritte-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
}


/* ============================================================
   RESPONSIVE – SMALL (max 480px)
   ============================================================ */

@media (max-width: 480px) {

  /* iOS-Zoom bei Fokus verhindern */
  .kt-input,
  .kt-select,
  .kt-textarea {
    font-size: 16px;
  }

  .kt-form-card {
    padding: var(--sp-12) var(--sp-8);
  }
}

/* ============================================================
   ANCHOR-SPRUNG "Zum Anfrageformular"
   Ueberschrift des Formulars soll nach dem Sprung mit angemessenem
   Abstand direkt unterhalb des Sticky-Headers sichtbar sein, nicht
   von ihm verdeckt werden. Hoehen entsprechen .header-inner in
   styles.css (68px Desktop, 60px ab 1160px abwaerts).
   ============================================================ */

#kt-formular-heading {
  scroll-margin-top: calc(68px + var(--sp-8));
}

@media (max-width: 1160px) {
  #kt-formular-heading {
    scroll-margin-top: calc(60px + var(--sp-8));
  }
}