/* assets/css/kontakt.css
   Kontakt page — Dark fields + high-contrast text while keeping Funkenwelt style
*/

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700&family=Inter:wght@300;400;600&display=swap');

/* Palette */
:root {
  --gold: #E6C27A;
  --rose: #C18A6E;
  --cream: #FFF9EF;
  --peach: #F3D1B0;
  --brown: #2A1714;
  --bg-dark: #0E0908;

  /* Card */
  --card-bg: linear-gradient(180deg, rgba(40,28,24,0.96), rgba(28,18,15,0.95));
  --card-edge: rgba(230,194,122,0.12);
  --card-radius: 1.5rem;
  --max-card-width: 1100px;

  /* Field surfaces (dark) */
  --field-bg: rgba(18,12,10,0.62);       /* dark field background */
  --field-bg-hover: rgba(27,17,15,0.68);
  --field-border: rgba(255,255,255,0.06); /* faint border */
  --field-inner: rgba(230,194,122,0.02);  /* inner warm tint */

  /* Text */
  --text-light: rgba(255,245,230,0.96);
  --text-dim: rgba(255,230,205,0.70);

  /* Focus / accents */
  --focus-strong: rgba(193,138,110,0.30); /* rose/gold focus ring */
  --shadow-strong: rgba(0,0,0,0.75);
}

/* Scope reset */
.aw-kontakt-root, .aw-kontakt-root * { box-sizing: border-box; }

/* Body (dark background retained) */
body {
  font-family: 'Inter', sans-serif;
  color: var(--text-light);
  background: radial-gradient(circle at center, rgba(248,213,126,0.05), rgba(10,5,4,1) 90%);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* Aurora overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(80% 60% at 25% 35%, rgba(230,194,122,0.12), transparent),
    radial-gradient(80% 60% at 75% 65%, rgba(193,138,110,0.10), transparent);
  animation: aw-auroraMove 18s ease-in-out infinite alternate;
  z-index: 0;
  pointer-events: none;
}
@keyframes aw-auroraMove {
  0% { background-position: 0% 50%, 100% 50%; }
  50% { background-position: 100% 50%, 0% 50%; }
  100% { background-position: 0% 50%, 100% 50%; }
}

/* Wrapper */
.aw-kontakt-root {
  position: relative;
  z-index: 2;
  min-height: calc(100vh - 74px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 2.5vw, 3rem);
}

/* Card: dark cinematic surface */
.aw-kontakt-card {
  width: min(96%, var(--max-card-width));
  border-radius: var(--card-radius);
  background: var(--card-bg);
  border: 1px solid var(--card-edge);
  box-shadow:
    0 28px 80px var(--shadow-strong),
    inset 0 0 50px rgba(230,194,122,0.03);
  padding: clamp(1.2rem, 3vw, 2.6rem);
  position: relative;
  overflow: hidden;
  color: var(--text-light);
}

/* Subtle shining border */
.aw-kontakt-card::before {
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: calc(var(--card-radius) + 2px);
  z-index:-1;
  background: linear-gradient(120deg, rgba(230,194,122,0.10), rgba(193,138,110,0.20), rgba(230,194,122,0.08));
  filter: blur(8px);
  opacity: .9;
}

/* Orbs - faint */
.aw-orbs { position:absolute; inset:0; pointer-events:none; z-index:1; }
.aw-orb { position:absolute; filter: blur(22px); opacity:.28; mix-blend-mode: screen; }
.aw-orb.orb-1 { left:-8%; top:6%; width:260px; height:260px; background: radial-gradient(circle, rgba(230,194,122,0.10), transparent 50%); }
.aw-orb.orb-2 { right:-8%; top:16%; width:200px; height:200px; background: radial-gradient(circle, rgba(193,138,110,0.08), transparent 50%); }

/* Inner content color */
.aw-kontakt-inner { position: relative; z-index: 2; }

/* Title and subtitle */
.aw-kontakt-hero { text-align:center; margin-bottom:.6rem; color:var(--text-light); }
.aw-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 4.2vw, 3rem);
  background: linear-gradient(90deg, var(--gold), var(--rose), #FFDFAF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin:0;
  display:inline-block;
}
.aw-sub {
  margin-top:.45rem;
  color: var(--text-dim);
  font-weight:500;
}

/* Grid layout */
.aw-kontakt-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 1.25rem;
  align-items: start;
  margin-top: 1rem;
}
@media (max-width:980px) { .aw-kontakt-grid { grid-template-columns: 1fr; } }

/* -------------------------
   FORM AREA - DARK FIELDS
   ------------------------- */

/* Form panel: slight transparent layer to separate from card */
.aw-contact-form {
  background: linear-gradient(180deg, rgba(12,8,7,0.48), rgba(18,12,10,0.56)); /* dark panel */
  border-radius: .9rem;
  padding: 1.05rem;
  border: 1px solid rgba(255,255,255,0.03);
  box-shadow: 0 8px 22px rgba(0,0,0,0.6);
}

/* Labels: light and legible */
.aw-contact-form label {
  display:block;
  margin-top:.6rem;
  color: var(--text-light);
  font-weight:600;
  font-size:.95rem;
  letter-spacing: .01em;
}

/* Inputs & textarea: dark surfaces with light text */
.aw-contact-form input[type="text"],
.aw-contact-form input[type="email"],
.aw-contact-form textarea {
  width: 100%;
  padding: .72rem .85rem;
  margin-top:.34rem;
  border-radius: .6rem;
  border: 1px solid var(--field-border);
  background: var(--field-bg);                 /* dark field */
  color: var(--text-light);                    /* bright text for readability */
  font-size: .96rem;
  resize: vertical;
  box-shadow: inset 0 1px 0 var(--field-inner);
}

/* Hover & focus styling for fields */
.aw-contact-form input[type="text"]:hover,
.aw-contact-form input[type="email"]:hover,
.aw-contact-form textarea:hover {
  background: var(--field-bg-hover);
}
.aw-contact-form input:focus,
.aw-contact-form textarea:focus {
  outline: none;
  box-shadow:
    0 0 0 3px var(--focus-strong),
    inset 0 1px 0 rgba(255,255,255,0.02);
  border-color: rgba(230,194,122,0.28);
}

/* Placeholder contrast */
.aw-contact-form input::placeholder,
.aw-contact-form textarea::placeholder {
  color: rgba(255,240,225,0.42);
}

/* Honeypot is hidden */
.aw-hp-field { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

/* Submit area / CTA */
.aw-contact-actions {
  margin-top:.85rem;
  display:flex;
  gap:.6rem;
  align-items:center;
}
.aw-glow-btn {
  display:inline-block;
  background: linear-gradient(90deg, var(--rose), var(--gold));
  color: #1A0E0C;
  font-weight:700;
  padding:.78rem 1.2rem;
  border-radius:.8rem;
  border: 1px solid rgba(255,255,255,0.06);
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 8px 30px rgba(230,194,122,0.24);
}
.aw-glow-btn:hover { transform: translateY(-3px); box-shadow: 0 16px 48px rgba(230,194,122,0.36); }

/* Accessibility outline */
.aw-contact-form input:focus, .aw-contact-form textarea:focus, .aw-glow-btn:focus {
  outline: 3px solid rgba(193,138,110,0.26);
  outline-offset: 3px;
  border-radius: .6rem;
}

/* -------------------------
   CONTACT DETAILS PANEL
   ------------------------- */

.aw-contact-details {
  background: linear-gradient(180deg, rgba(18,12,10,0.55), rgba(22,14,12,0.58));
  border-radius: .9rem;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,0.03);
  box-shadow: 0 8px 22px rgba(0,0,0,0.6);
  color: var(--text-light);
}
.aw-contact-details h3, .aw-contact-details h4 {
  color: var(--gold);
  margin-top:0;
  font-weight:700;
}
.aw-contact-details p { color: var(--text-dim); line-height:1.45; }
.aw-contact-details a { color: var(--text-light); text-decoration: underline; font-weight:600; }
.aw-contact-details a:hover { color: var(--rose); }

/* Map container */
.aw-kontakt-map { margin-top: 1.1rem; border-radius:.8rem; overflow:hidden; border:1px solid rgba(255,255,255,0.03); }

/* Notifications */
.aw-kontakt-notification {
  margin-top:.8rem;
  padding:.8rem 1rem;
  border-radius:.6rem;
  font-weight:600;
  display:inline-block;
  color: var(--text-light);
}
.aw-kontakt-success {
  background: linear-gradient(90deg, rgba(230,194,122,0.08), rgba(243,209,176,0.06));
  border: 1px solid rgba(230,194,122,0.22);
}
.aw-kontakt-error {
  background: rgba(180,40,40,0.12);
  border: 1px solid rgba(180,40,40,0.18);
  color: #fff;
}

/* Ensure elements visible by default; .aw-inview stays supported */
.aw-contact-form,
.aw-contact-details {
  transform: translateY(0);
  opacity: 1;
  transition: transform 520ms cubic-bezier(.2,.9,.2,1), opacity 520ms ease;
}

/* Small helpers */
.aw-sr-only {
  position:absolute!important;
  width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Responsive tweaks */
@media (max-width:900px) {
  .aw-contact-details { order:2; }
  .aw-contact-form { order:1; }
  .aw-kontakt-grid { gap:1rem; }
}
@media (max-width:600px) {
  .aw-kontakt-root { padding: 1rem; align-items:flex-start; }
  .aw-kontakt-card { padding:1rem; margin-top:.6rem; }
  .aw-orb { display:none; }
  .aw-glow-btn { width:100%; text-align:center; }
}

/* Images */
img.aw-magic-photo { max-width:100%; height:auto; border-radius:.6rem; display:block; margin:.6rem auto 0; }

/* End of kontakt.css */