/*
 * Kontaktseite im Organic-Design von The Coffee Brothers.
 *
 * Struktur:
 * - .c-contact-container: Übergeordnete Hülle für Text, Info-Karte und Formular-Karte.
 * - .c-contact-lead: Begleitender Einleitungstext über die volle Breite.
 * - .c-contact-grid: 2-Spalten-Layout (Info-Karte links, Formular-Karte rechts).
 * - .c-contact-info-card: Anschrift, E-Mail, Antwortzeiten.
 * - .c-contact-form-card: Interaktives Formular mit Feedback-Bannern.
 *
 * Tokens: src/pages/design/design.css.
 */

/* ── Volle Breite: Bündig mit Header und Footer ─────────────────────────
   Header-Bar und Footer-Karte nutzen die volle Breite des Seitenrasters
   (var(--page-width) abzüglich des Seitenrandes). Auf der Kontaktseite soll
   der Inhaltsbereich nicht auf 60ch oder 1080px begrenzt sein, sondern die
   gesamte Breite ausfüllen, sodass die Außenkanten der Kontaktkarten exakt
   mit Header und Footer fluchten. */

body.page-id-5669 .entry-content,
body.page .entry-content:has(.c-contact-container) {
  width     : 100% !important;
  max-width : 100% !important;
}

body.page-id-5669 .entry-content > *,
body.page .entry-content:has(.c-contact-container) > * {
  width     : 100% !important;
  max-width : 100% !important;
}

.c-contact-container {
  box-sizing     : border-box;
  display        : flex;
  flex-direction : column;
  row-gap        : 36px;
  width          : 100% !important;
  max-width      : 100% !important;
  margin-block   : var(--space-4) var(--space-8);
  font-family    : var(--font-body);
}

.c-contact-lead {
  font-size   : 17px;
  line-height : 1.6;
  color       : var(--color-neutral-700);
  margin      : 0;
  width       : 100%;
  max-width   : 100%;
}

.c-contact-grid {
  display               : grid;
  grid-template-columns : 380px 1fr;
  gap                   : var(--space-8);
  align-items           : stretch;
  width                 : 100%;
}

@media (max-width: 959px) {
  .c-contact-grid {
    grid-template-columns : 1fr;
    gap                   : var(--space-6);
  }
}


/* ── Info-Spalte links ────────────────────────────────────────────────── */

.c-contact-info-card {
  box-sizing     : border-box;
  background     : var(--color-surface);
  border         : 1px solid var(--color-divider);
  border-radius  : var(--radius-lg);
  padding        : var(--space-6);
  box-shadow     : var(--shadow-sm);
  display        : flex;
  flex-direction : column;
  gap            : var(--space-4);
  height         : 100%;
}

.c-contact-info-title {
  font-family : var(--font-title);
  font-weight : var(--font-title-weight);
  font-size   : 22px;
  line-height : 1.2;
  color       : var(--color-text);
  margin      : 0;
}

.c-contact-info-intro {
  margin      : 0;
  font-size   : 14px;
  line-height : 1.55;
  color       : var(--color-neutral-700);
}

.c-contact-info-items {
  display        : flex;
  flex-direction : column;
  gap            : var(--space-4);
  margin-top     : var(--space-2);
}

.c-contact-info-item {
  display     : flex;
  align-items : flex-start;
  gap         : var(--space-3);
  font-size   : 14px;
  line-height : 1.45;
  color       : var(--color-text);
}

.c-contact-info-icon {
  flex            : none;
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  width           : 38px;
  height          : 38px;
  border-radius   : 50%;
  background      : color-mix(in srgb, var(--color-accent) 15%, transparent);
  color           : var(--color-accent);
}

.c-contact-info-text strong {
  color       : var(--color-text);
  font-weight : 600;
}

.c-contact-link {
  color           : var(--color-accent-700);
  text-decoration : none;
  word-break      : break-word;
  transition      : color 0.15s ease;
}

.c-contact-link:hover,
.c-contact-link:focus-visible {
  color           : var(--color-accent);
  text-decoration : underline;
}


/* ── Formular-Karte rechts ────────────────────────────────────────────── */

.c-contact-form-card {
  box-sizing    : border-box;
  background    : var(--color-surface);
  border        : 1px solid var(--color-divider);
  border-radius : var(--radius-lg);
  padding       : var(--space-6);
  box-shadow    : var(--shadow-sm);
  height        : 100%;
}

.c-contact-form-title {
  font-family : var(--font-title);
  font-weight : var(--font-title-weight);
  font-size   : 22px;
  line-height : 1.2;
  color       : var(--color-text);
  margin      : 0 0 var(--space-4) 0;
}

@media (max-width: 600px) {
  .c-contact-info-card,
  .c-contact-form-card {
    padding       : var(--space-4);
    border-radius : var(--radius-md);
  }
}

.c-contact-form {
  display        : flex;
  flex-direction : column;
  gap            : var(--space-4);
}

.c-contact-row {
  display               : grid;
  grid-template-columns : 1fr 1fr;
  gap                   : var(--space-4);
}

@media (max-width: 640px) {
  .c-contact-row {
    grid-template-columns : 1fr;
    gap                   : var(--space-4);
  }
}

.c-contact-field {
  display        : flex;
  flex-direction : column;
  gap            : 6px;
}

.c-contact-field label {
  font-family : var(--font-body);
  font-size   : 13px;
  font-weight : 600;
  line-height : 1.3;
  color       : var(--color-neutral-800);
}

.c-contact-star {
  color           : var(--color-accent-700);
  font-weight     : 700;
  margin-left     : 2px;
}

.c-contact-opt {
  font-size   : 12px;
  font-weight : 400;
  color       : var(--color-neutral-600);
}

.c-contact-field input[type="text"],
.c-contact-field input[type="email"],
.c-contact-field input[type="tel"],
.c-contact-field textarea {
  box-sizing     : border-box;
  width          : 100%;
  min-height     : 44px;
  padding        : var(--space-2) var(--space-3);
  border         : 1px solid var(--color-divider);
  border-radius  : var(--radius-md);
  background     : var(--color-bg);
  color          : var(--color-text);
  caret-color    : var(--color-accent);
  font-family    : var(--font-body);
  font-size      : 14px;
  line-height    : 1.4;
  outline        : none;
  transition     : border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.c-contact-field textarea {
  min-height  : 150px;
  resize      : vertical;
  line-height : 1.5;
}

.c-contact-field input::placeholder,
.c-contact-field textarea::placeholder {
  color   : var(--color-neutral-500);
  opacity : 0.8;
}

.c-contact-field input:hover,
.c-contact-field textarea:hover {
  border-color : color-mix(in srgb, var(--color-text) 45%, transparent);
}

.c-contact-field input:focus,
.c-contact-field textarea:focus {
  border-color : var(--color-accent);
  box-shadow   : 0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent);
}

/* Moderne Validierung: Fehler erst nach Nutzerinteraktion */
.c-contact-field input:user-invalid,
.c-contact-field textarea:user-invalid {
  border-color : #9c3524;
}

.c-contact-field input:user-invalid:focus,
.c-contact-field textarea:user-invalid:focus {
  box-shadow : 0 0 0 3px color-mix(in srgb, #9c3524 25%, transparent);
}


/* ── Submit-Button ────────────────────────────────────────────────────── */

.c-contact-actions {
  display         : flex;
  align-items     : center;
  justify-content : flex-start;
  margin-top      : var(--space-2);
}

.c-contact-button {
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  gap             : var(--space-2);
  min-height      : 44px;
  padding         : var(--space-2) calc(var(--space-4) * 1.4);
  border          : 1px solid transparent;
  border-radius   : 999px;
  background      : var(--color-accent);
  color           : var(--color-bg);
  font-family     : var(--font-title);
  font-weight     : var(--font-title-weight);
  font-size       : 15px;
  line-height     : 1.2;
  cursor          : pointer;
  box-shadow      : 0 2px 6px color-mix(in srgb, var(--color-accent-900) 25%, transparent);
  transition      : background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.c-contact-button:hover {
  background : var(--color-accent-600);
  box-shadow : 0 4px 10px color-mix(in srgb, var(--color-accent-900) 30%, transparent);
  transform  : translateY(-1px);
}

.c-contact-button:active {
  transform  : translateY(0);
  box-shadow : 0 1px 3px color-mix(in srgb, var(--color-accent-900) 20%, transparent);
}

.c-contact-button:focus-visible {
  outline        : 2px solid var(--color-accent);
  outline-offset : 3px;
}

.c-contact-button:disabled {
  opacity    : 0.65;
  cursor     : not-allowed;
  transform  : none !important;
  box-shadow : none !important;
}

/* Lade-Spinner */
.c-contact-spinner {
  display       : none;
  width         : 16px;
  height        : 16px;
  border        : 2px solid var(--color-bg);
  border-top    : 2px solid transparent;
  border-radius : 50%;
  animation     : c-spin 0.75s linear infinite;
}

.c-contact-button.is-loading .c-contact-spinner {
  display : inline-block;
}

@keyframes c-spin {
  0%   { transform : rotate(0deg); }
  100% { transform : rotate(360deg); }
}


/* ── Feedback-Banner ─────────────────────────────────────────────────── */

.c-contact-status {
  margin-block-end : var(--space-4);
}

.c-contact-status:empty {
  display : none;
}

.c-contact-notice {
  box-sizing    : border-box;
  display       : flex;
  align-items   : center;
  gap           : var(--space-3);
  padding       : var(--space-3) var(--space-4);
  border-width  : 1px;
  border-style  : solid;
  border-radius : var(--radius-md);
  font-size     : 14px;
  line-height   : 1.45;
  animation     : c-fade-in 0.25s ease-out;
}

@keyframes c-fade-in {
  from { opacity : 0; transform : translateY(-4px); }
  to   { opacity : 1; transform : translateY(0); }
}

.c-contact-notice-icon {
  flex            : none;
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  width           : 24px;
  height          : 24px;
  border-radius   : 50%;
}

.c-contact-notice-icon svg {
  fill : var(--color-bg);
}

.c-contact-notice-text {
  margin : 0;
}

/* Erfolg */
.c-contact-notice.is-success {
  border-color : var(--color-accent-2-300);
  background   : var(--color-accent-2-100);
  color        : var(--color-text);
}

.c-contact-notice.is-success .c-contact-notice-icon {
  background : var(--color-accent-2-600);
}

/* Fehler */
.c-contact-notice.is-error {
  border-color : color-mix(in srgb, #9c3524 35%, transparent);
  background   : #fbeae6;
  color        : var(--color-text);
}

.c-contact-notice.is-error .c-contact-notice-icon {
  background : #9c3524;
}