/* H&K Trocknungstechnik – ergänzende Stile (Tailwind übernimmt den Rest) */

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Sichtbarer Tastatur-Fokus in Markenfarbe */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #1E3A73;
  outline-offset: 2px;
}

/* Header bekommt beim Scrollen eine feine Kante */
#site-header.is-scrolled {
  box-shadow: 0 1px 0 #E3E6EA, 0 4px 12px rgba(31, 41, 51, 0.06);
}

/* Formular-Statusmeldungen */
#form-status.is-success {
  border-color: #B9D9C4;
  background-color: #F0F8F3;
  color: #1F5A35;
}

#form-status.is-error {
  border-color: #E8C1BD;
  background-color: #FBF1F0;
  color: #8A2A22;
}

/* Ungültige Felder nach Absendeversuch */
form.was-validated :is(input, select, textarea):invalid {
  border-color: #B8352B;
}

/* ---------- Bildqualität ---------- */

/* Browser sollen beim Skalieren das hochwertige Verfahren nutzen,
   statt des schnellen Standardverfahrens. */
img {
  image-rendering: high-quality;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Logo: nie über die Pixelbreite der Quelldatei hinaus vergrößern */
img.logo {
  width: auto;           /* Seitenverhältnis wahren; die Höhe gibt die Navigation vor */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
}

/* picture ist standardmäßig inline – ohne Blockdarstellung kann das
   Kind-Bild seine Breite nicht korrekt ableiten. */
picture.media {
  display: block;
  width: 100%;
}

/* Leistungskarten: Seitenverhältnis per CSS, Beschnitt übernimmt object-fit.
   Die Bilddateien bleiben unbeschnitten in voller Auflösung. */
.card-img {
  display: block;
  width: 100%;
  height: auto;          /* bei aspect-ratio muss die Höhe berechnet werden dürfen */
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.pos-trockner   { object-position: center 40%; }
.pos-messung    { object-position: center 45%; }

/* Hero: Originalformat, ebenfalls ohne feste Höhe */
.hero-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ---------- Hero-Überschrift ---------- */

/* Mehr Luft zwischen den Zeilen und ein ausgewogener Umbruch,
   damit die Zeilen nicht unterschiedlich lang abbrechen. */
.hero-h1 {
  line-height: 1.22;
  letter-spacing: -0.01em;
  text-wrap: balance;        /* gleichmäßige Zeilenlängen */
  max-width: 15ch;           /* bricht sauber vor "Bautrocknung" um */
}

/* Das hidden-Attribut muss Layout-Klassen wie flex/grid übertrumpfen,
   sonst bleiben ausgeblendete Elemente sichtbar. */
[hidden] {
  display: none !important;
}

/* ---------- Nur Mobil: Darstellung bis zum md-Breakpoint ---------- */
@media (max-width: 767px) {

  /* Platz für die feste Kontaktleiste am unteren Rand,
     damit sie weder Text noch den Absende-Button verdeckt */
  body {
    padding-bottom: 90px;
  }

  /* Einsatzgebiet: Orte als kompakte Chips statt als Spaltenliste */
  .orte li {
    border: 1px solid #E3E6EA;
    background: #FFFFFF;
    border-radius: 9999px;
    padding: 0.3rem 0.8rem;
    font-size: 14px;
    line-height: 1.3;
    color: #1F2933;
  }

  /* Überschrift darf hier über die ganze Spaltenbreite laufen */
  .hero-h1 {
    max-width: none;
    line-height: 1.15;
  }

  /* Buttons im Startbereich etwas kompakter */
  .hero-cta a {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
  }
}

/* Cookie-Hinweis liegt über der Kontaktleiste; solange er offen ist,
   wird die Leiste per JavaScript ausgeblendet. */

/* ---------- Leistungskarten als Aufklapp-Elemente (nur Mobil) ---------- */

/* Ab Tablet verhält sich alles wie bisher: Stichpunkte immer sichtbar,
   die Schaltfläche ist dann nur noch eine Überschrift. */
.akk-knopf {
  cursor: default;
}

@media (max-width: 767px) {
  .akk-knopf {
    cursor: pointer;
  }

  /* Sanftes Auf- und Zuklappen.
     Frueher ueber grid-template-rows 0fr auf 1fr geloest. Das sieht elegant
     aus, die Spur blieb hier aber auf 0 stehen, weil das Kind mit
     overflow:hidden eine automatische Mindesthoehe von 0 bekommt und der
     Gitterbehaelter selbst keine feste Hoehe hat. Ergebnis: Die Stichpunkte
     liessen sich auf dem Handy gar nicht mehr aufklappen.
     Deshalb jetzt ueber max-height. Der Wert ist grosszuegig gewaehlt und
     liegt deutlich ueber dem laengsten Inhalt. */
  .karte-details {
    display: block;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.32s ease;
  }
  article.ist-offen .karte-details {
    max-height: 40rem;
  }

  /* Plus wird zu Minus: der senkrechte Strich dreht weg */
  .akk-icon .akk-strich-v {
    transform-origin: 12px 12px;
    transition: transform 0.32s ease, opacity 0.32s ease;
  }
  article.ist-offen .akk-icon .akk-strich-v {
    transform: rotate(90deg);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .karte-details,
  .akk-icon .akk-strich-v {
    transition: none;
  }
}

/* ---------- Letzte Mobil-Anpassungen ---------- */
@media (max-width: 767px) {

  /* Karte: volle Breite, kompaktere Höhe */
  #karte-ziel,
  #karte-ziel iframe,
  #karte-platzhalter {
    width: 100% !important;
    max-width: 100% !important;
  }
  #karte-ziel iframe,
  #karte-platzhalter {
    height: 260px !important;
  }

  /* B2B-Hinweis als abgesetzte Karte */
  .b2b-karte {
    background: #f8fafc;
    border-left: 4px solid #B8352B;
    border-radius: 6px;
    padding: 12px;
    font-size: 14.5px;
    line-height: 1.55;
  }
}

/* ---------- Top-Bar auf dem Handy einzeilig ---------- */
@media (max-width: 767px) {
  .topbar {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    white-space: nowrap;
    font-size: 12px;
    padding: 6px 10px;
    gap: 6px;
    letter-spacing: -0.01em;
  }

  /* Das Hörer-Symbol entfällt hier, damit beide Angaben vollständig
     in eine Zeile passen. */
  .topbar svg {
    display: none;
  }
  .topbar > p {
    margin: 0;
    min-width: 0;
  }
  /* Der Hinweis links darf bei sehr schmalen Geräten gekürzt werden,
     die Telefonnummer bleibt immer vollständig lesbar. */
  .topbar > p:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .topbar > p:last-child {
    flex: 0 0 auto;
  }
}

/* ---------- Häufige Fragen (Neubautrocknung) ---------- */

/* details/summary braucht kein JavaScript. Der Browser übernimmt
   das Auf- und Zuklappen und die Tastaturbedienung von allein. */
.faq-frage {
  list-style: none;          /* Standard-Dreieck ausblenden */
}
.faq-frage::-webkit-details-marker {
  display: none;             /* dasselbe für Safari */
}
.faq-item[open] .faq-frage {
  border-bottom: 1px solid #E3E6EA;
  margin-bottom: 1rem;
}
.faq-icon {
  transition: transform 0.25s ease;
}
.faq-item[open] .faq-icon {
  transform: rotate(180deg);
}
.faq-item:hover {
  border-color: #C9CFD6;
}

@media (prefers-reduced-motion: reduce) {
  .faq-icon { transition: none; }
}

/* ---------- Doppelte Anruf-Knöpfe auf dem Handy ausblenden ---------- */

/* Unten klebt die feste Kontaktleiste mit "Jetzt anrufen". Die Knöpfe
   mitten im Text sind dadurch auf kleinen Schirmen doppelt. Auf dem
   Desktop, wo es diese Leiste nicht gibt, bleiben sie sichtbar. */
@media (max-width: 767px) {
  .nur-desktop {
    display: none !important;
  }
}