/* Fugensanierung Klaasen — digitale Visitenkarte
   Palette: Navy #0b0d13 / #12141c, Brick-Rot #c0392b, Mörtel-Creme #d8d3c4
   Type: Oswald (Display, condensed/bold) + Work Sans (Text) */

/* Selbst gehostete Schriften (kein Google-Fonts-CDN): vermeidet die IP-Übertragung an
   Google beim Seitenaufruf, die in Deutschland ohne Einwilligung datenschutzrechtlich
   abmahnfähig ist (LG München I, Urt. v. 20.01.2022). Beide Dateien sind Variable Fonts,
   ein Schnitt deckt den kompletten genutzten Gewichtsbereich ab. */
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/oswald-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/work-sans-latin.woff2") format("woff2");
}

:root {
  --navy-950: #0b0d13;
  --navy-900: #12141c;
  --navy-850: #171a24;
  --navy-800: #1c202c;
  --navy-line: #2c3140;

  --red-600: #c0392b;
  --red-500: #d34535;
  --red-glow: rgba(192, 57, 43, 0.35);

  --mortar-200: #d8d3c4;

  --white: #f6f5f1;
  --ink-muted: #9aa0ad;
  --ink-faint: #6b7280;

  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Work Sans", "Segoe UI", sans-serif;

  --radius: 4px;
  --radius-lg: 12px;
}

* {
  box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--navy-950);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

img, svg {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--red-500);
  outline-offset: 3px;
}

h1 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  margin: 0;
  color: var(--white);
  font-size: clamp(26px, 4vw, 36px);
  line-height: 1.08;
}

h1 em {
  font-style: normal;
  color: var(--red-500);
}

p {
  margin: 0;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red-500);
  margin: 18px 0 10px;
}

.eyebrow::before {
  content: "";
  width: 20px;
  height: 3px;
  background: var(--red-600);
  flex: none;
}

/* ---------- Background texture ---------- */

.bg-brick {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.16;
  pointer-events: none;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 26px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
  list-style: none;
}

.btn::-webkit-details-marker {
  display: none;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background: var(--red-600);
  color: var(--white);
  box-shadow: 0 8px 22px -8px var(--red-glow);
}

.btn-primary:hover {
  background: var(--red-500);
  box-shadow: 0 12px 28px -8px var(--red-glow);
}

.btn-ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(246, 245, 241, 0.35);
}

.btn-ghost:hover {
  border-color: var(--white);
  background: rgba(246, 245, 241, 0.06);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.btn-block {
  width: 100%;
}

/* ---------- Page shell / card ---------- */

.page-main {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 20px;
}

.card {
  width: 100%;
  max-width: 620px;
  background: var(--navy-900);
  border: 1px solid var(--navy-line);
  border-radius: var(--radius-lg);
  padding: 30px 38px 34px;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.55);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
}

.brand-mark {
  width: 36px;
  height: 34px;
  flex: none;
}

.brand-divider {
  width: 3px;
  height: 28px;
  background: var(--red-600);
  flex: none;
}

.brand-word {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 15px;
  line-height: 1.12;
  letter-spacing: 0.01em;
  color: var(--white);
}

.card-lede {
  margin-top: 10px;
  max-width: 52ch;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--mortar-200);
}

.leistungen-tags {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  mask-image: linear-gradient(to right, transparent, black 14px, black calc(100% - 14px), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 14px, black calc(100% - 14px), transparent);
}

.leistungen-tags::-webkit-scrollbar {
  display: none;
}

.leistungen-tags li {
  flex-shrink: 0;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--mortar-200);
  background: var(--navy-950);
  border: 1px solid var(--navy-line);
  border-radius: var(--radius);
  padding: 7px 14px;
}

.contact-row {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--navy-line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.contact-row a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--white);
}

.contact-row a svg {
  width: 16px;
  height: 16px;
  color: var(--red-500);
  flex: none;
}

.contact-row a:hover {
  color: var(--red-500);
}

.card-actions {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- Aufklappbares Kontaktformular ---------- */

/* Fester Button, unabhaengig vom Panel-Layout: bleibt beim Oeffnen/Schliessen an
   Position und Groesse exakt gleich, nur Text/Pfeil wechseln. min-width auf die
   laengere Variante ("Kontaktformular oeffnen") ausgelegt, damit der kuerzere Text
   ("Formular schliessen") den Button nicht schmaler werden laesst. */
#contactToggle {
  min-width: 248px;
}

.chevron {
  transition: transform 0.2s ease;
  flex: none;
}

#contactToggle[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}

.label-open {
  display: none;
}

#contactToggle[aria-expanded="true"] .label-closed {
  display: none;
}

#contactToggle[aria-expanded="true"] .label-open {
  display: inline;
}

/* Zwei Ebenen noetig: max-height:0 zwingt eine Box nicht dazu, ihr eigenes
   padding/border zu verkleinern (nur die reine Content-Hoehe wird geklemmt,
   padding bleibt in voller Groesse stehen) - ein Trennstrich+Abstand DIREKT auf
   dem animierten Element wuerde also auch im eingeklappten Zustand sichtbaren
   Leerraum uebrig lassen. Deshalb traegt NUR die aeussere Huelle (.form-panel)
   die max-height/opacity-Animation, waehrend Trennstrich und Abstand auf der
   inneren .form-panel-divider liegen, die beim Einklappen komplett mit weg-
   geclippt wird (overflow:hidden am aeusseren Element).
*/
.form-panel {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.28s ease;
}

.form-panel-divider {
  padding-top: 42px;
  border-top: 1px solid var(--navy-line);
}

/* ---------- Formularfelder ---------- */

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 18px;
}

.field {
  margin-top: 18px;
}

/* Innerhalb einer .field-row traegt die Reihe selbst den Abstand nach oben - sonst
   bekommt nur die linke Spalte (":first-child" der Reihe) margin-top:0, die rechte
   Spalte (zweites Kind derselben Reihe) behaelt ihren eigenen margin-top und rutscht
   sichtbar tiefer als die linke Spalte (genau das gemeldete Hoehen-/Ausrichtungsproblem). */
.field-row .field {
  margin-top: 0;
}

.hp-wrap + .field-row,
.hp-wrap + .field {
  margin-top: 0;
}

.field label {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--mortar-200);
  margin-bottom: 7px;
}

.field label .opt {
  text-transform: none;
  font-family: var(--font-body);
  color: var(--ink-faint);
  letter-spacing: 0;
  font-weight: 400;
  font-size: 12px;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field textarea {
  width: 100%;
  background: var(--navy-950);
  border: 1px solid var(--navy-line);
  border-radius: var(--radius);
  padding: 12px 14px;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"] {
  height: 46px;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--ink-faint);
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--red-600);
  box-shadow: 0 0 0 3px var(--red-glow);
}

.field textarea {
  min-height: 100px;
  resize: vertical;
}

.field-hint {
  margin-top: 7px;
  font-size: 12.5px;
  color: var(--ink-faint);
}

/* File upload dropzone */
.file-drop {
  position: relative;
  border: 1.5px dashed var(--navy-line);
  border-radius: var(--radius);
  background: var(--navy-950);
  padding: 20px 16px;
  text-align: center;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.file-drop.is-dragover {
  border-color: var(--red-600);
  background: rgba(192, 57, 43, 0.06);
}

.file-drop input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.file-drop-icon {
  width: 24px;
  height: 24px;
  margin: 0 auto 8px;
  color: var(--red-500);
}

.file-drop-text {
  font-size: 13.5px;
  color: var(--mortar-200);
}

.file-drop-text strong {
  color: var(--white);
  font-weight: 600;
}

.file-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.file-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--navy-950);
  border: 1px solid var(--navy-line);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: 13px;
  color: var(--mortar-200);
}

.file-list button {
  background: none;
  border: none;
  color: var(--ink-faint);
  cursor: pointer;
  font-size: 13px;
  padding: 2px 4px;
}

.file-list button:hover {
  color: var(--red-500);
}

.consent {
  margin-top: 20px;
  display: flex;
  gap: 11px;
  align-items: flex-start;
}

.consent input {
  margin-top: 3px;
  flex: none;
  width: 16px;
  height: 16px;
  accent-color: var(--red-600);
}

.consent label {
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.55;
}

.consent a {
  color: var(--mortar-200);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.consent a:hover {
  color: var(--white);
}

.form-panel .btn {
  margin-top: 24px;
}

.form-notice {
  margin-top: 16px;
  padding: 12px 15px;
  border-radius: var(--radius);
  font-size: 13.5px;
  background: rgba(114, 193, 101, 0.12);
  border: 1px solid rgba(114, 193, 101, 0.35);
  color: #a9dc9e;
}

.form-notice.is-error {
  background: rgba(192, 57, 43, 0.12);
  border-color: rgba(192, 57, 43, 0.4);
  color: #f0a89f;
}

/* ---------- Mini-Footer ---------- */

.mini-footer {
  position: relative;
  z-index: 1;
  padding: 10px 20px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 12.5px;
  color: var(--ink-faint);
}

.mini-footer a:hover {
  color: var(--mortar-200);
}

.badge-link {
  display: inline-flex;
  margin-left: 4px;
  opacity: 0.85;
  transition: opacity 0.15s ease;
}

.badge-link:hover {
  opacity: 1;
}

.badge-img {
  display: block;
  height: 26px;
  width: auto;
}

/* ---------- Legal pages ---------- */

.legal-page {
  position: relative;
  z-index: 1;
  padding: 56px 20px 90px;
}

.legal-page-inner {
  max-width: 720px;
  margin: 0 auto;
}

.legal-page h1 {
  font-size: clamp(28px, 4vw, 38px);
}

.legal-body {
  margin-top: 30px;
  color: var(--mortar-200);
}

.legal-body h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  text-transform: none;
  margin-top: 30px;
  margin-bottom: 10px;
  color: var(--white);
}

.legal-body p {
  margin-bottom: 13px;
  line-height: 1.7;
  font-size: 14.5px;
}

.legal-body a {
  color: var(--red-500);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-placeholder {
  color: var(--red-500);
  font-weight: 600;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.back-link:hover {
  color: var(--white);
}

/* ---------- Responsive ---------- */

@media (max-width: 640px) {
  .card {
    padding: 22px 22px 26px;
  }

  .field-row {
    grid-template-columns: 1fr;
  }

  .card-actions {
    flex-direction: column;
    align-items: stretch;
    margin-top: 16px;
  }

  .leistungen-tags {
    margin-top: 14px;
  }

  .contact-row {
    margin-top: 14px;
    padding-top: 14px;
  }

  .page-main {
    padding: 14px 16px;
  }

  .mini-footer {
    padding: 8px 16px 12px;
  }
}