/* =============================================================================
   STANEK GmbH — Website
   Umsetzung des Entwurfs aus STANEK-Konzept-D.html.
   Das Erscheinungsbild ist unveraendert uebernommen; geaendert wurden nur
   Struktur und Benennung: sprechende Klassennamen statt der Kuerzel des
   Entwurfs (.rv, .f, .c, .n, .t), gruppierte Abschnitte, Tokens in :root.
   ============================================================================= */

.specs {
  margin-top: 26px;
  border-top: 1px solid #24242a;
}

.specs > div {
  display: flex;
  justify-content: space-between;
  padding: 15px 0;
  border-bottom: 1px solid #24242a;
  font-size: 14px;
  gap: 20px;
}

.specs span:first-child {
  color: #83837c;
}

/* Die rechte Angabe steht rechtsbündig, auch wenn sie umbricht. Auf dem
   Telefon stand sie sonst nach links eingerückt (Hinweis von Jürgen Stanek,
   23. Oktober 2026). */
.specs span:last-child {
  text-align: right;
}

/* =============================================================================
   ENTWURFSSTAND — alles ab hier gehoert zum klickbaren Dummy.

   Die Seite dient derzeit der Gestaltung: Wege, die es noch nicht gibt
   (Projektseiten, Kontaktformular, Karriere), sind angelegt und bedienbar,
   ihre Inhalte aber ausdruecklich Platzhalter. Die Kennzeichnung folgt dem
   Konzept, das Fehlendes ebenfalls in eckige Klammern gesetzt hat.

   Vor dem Livegang zu entfernen: Abschnitt 15 (Kennzeichnung). Alles andere
   bleibt und wird nur mit echten Inhalten gefuellt.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   19. Know-how (Ratgeber, FAQ, Downloads)

   Drei Seiten, die nicht verkaufen, sondern beantworten. Deshalb hier keine
   Bildflaechen, sondern Text mit Sprungmarken: Wer eine Frage hat, will sie
   finden, nicht durch eine Bildstrecke scrollen.
   -------------------------------------------------------------------------- */

/* Themenuebersicht — Sprungmarken auf die Abschnitte derselben Seite.
   Bewusst kein Raster aus Bildkacheln: die Ueberschrift ist die Information. */
.themen {
  list-style: none;
  padding: 0 var(--pad);
  margin-top: 46px;
  display: grid;
  /* Feste drei Spalten statt auto-fit: bei sechs Themen laesst auto-fit
     auf breiten Schirmen eine Reihe aus vier und eine aus zwei entstehen. */
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.themen li {
  background: var(--bg);
}

.themen li > a {
  display: block;
  text-decoration: none;
  padding: 26px 28px 30px;
  height: 100%;
  transition: background 0.25s;
}

.themen li > a:hover,
.themen li > a:focus-visible {
  background: var(--bg-alt);
}

.themen__nr {
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--glow);
}

.themen__titel {
  font-size: 19px;
  font-weight: 400;
  color: #fff;
  margin-top: 12px;
  line-height: 1.3;
}

@media (max-width: 900px) {
  .themen,
  .faq,
  .dateien {
    padding-left: var(--pad-sm);
    padding-right: var(--pad-sm);
  }
}

/* Sechs Themen brechen auf zwei und eine Spalte um — nie auf vier, sonst
   bleibt eine Reihe halb leer. */
@media (max-width: 1040px) {
  .themen {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 680px) {
  .themen {
    grid-template-columns: 1fr;
  }
}

/* =============================================================================
   Themenübersicht im Ratgeber als Liste (seit 13. Oktober 2026)

   Erst ein Raster mit Haarlinien, dann einzelne Karten in zwei Reihen (vier
   oben, drei unten). Das wirkte unruhig: sieben Karten in zwei verschieden
   breiten Reihen, jede mit anderer Textlänge. Jetzt stehen die Themen
   untereinander, eine Zeile je Thema: links die Nummer, daneben Frage und
   Kurztext, rechts der Pfeil. Das Auge läuft an einer Kante entlang.
   ========================================================================== */
.themen {
  grid-template-columns: 1fr;
  gap: 10px;
  max-width: calc(860px + 2 * var(--pad));
  background: none;
  border: 0;
}

.themen li {
  background: none;
}

.themen li > a {
  position: relative;
  display: grid;
  height: auto;
  grid-template-columns: 34px 1fr;
  column-gap: 18px;
  align-items: baseline;
  padding: 20px 58px 22px 26px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-alt);
  transition: border-color 0.25s, background 0.25s;
}

.themen li > a::after {
  content: "↓";
  position: absolute;
  top: 50%;
  right: 26px;
  margin-top: -11px;
  font-size: 15px;
  line-height: 22px;
  color: #5a5a62;
  transition: color 0.25s, transform 0.25s;
}

.themen li > a:hover,
.themen li > a:focus-visible {
  border-color: var(--glow);
  background: rgba(255, 227, 176, 0.07);
}

.themen li > a:hover::after,
.themen li > a:focus-visible::after {
  color: var(--glow);
  transform: translateY(3px);
}

.themen__nr {
  grid-row: 1 / span 2;
  font-size: 11px;
}

.themen__titel {
  margin-top: 0;
}

@media (max-width: 680px) {
  .themen li > a {
    grid-template-columns: 26px 1fr;
    column-gap: 12px;
    padding: 18px 46px 20px 18px;
  }

  .themen li > a::after {
    right: 18px;
  }

  .themen__titel {
    font-size: 17px;
  }
}

/* Ratgeber: Die Abschnitte öffnen sich erst über ihre Karte (js/ratgeber.js).
   Die Klasse am <html> setzt das Skript, ohne Skript bleibt alles sichtbar. */
.hat-themenwahl .thema:not(.is-offen) {
  display: none;
}

/* Der offene Text hängt direkt unter seiner Karte (das Skript setzt ihn
   dorthin um) und bildet mit ihr einen Kasten: Die Karte verliert unten ihre
   runden Ecken, der Text trägt denselben Rahmen weiter. Er beginnt an der
   Kante der Frage, nicht unter der Nummer. Die Überschrift des Abschnitts
   entfällt hier, die Karte darüber sagt dasselbe. */
.hat-themenwahl .themen .thema.is-offen {
  display: block;
  padding: 26px 26px 30px 78px;
  border: 1px solid var(--glow);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  background: var(--bg-alt);
}

.hat-themenwahl .themen .thema > h2 {
  display: none;
}

.themen li > a.is-offen {
  border-color: var(--glow);
  border-radius: 14px 14px 0 0;
  background: rgba(255, 227, 176, 0.07);
}

@media (max-width: 680px) {
  .hat-themenwahl .themen .thema.is-offen {
    padding: 20px 18px 24px;
  }
}

.themen li > a.is-offen::after {
  color: var(--glow);
  transform: rotate(180deg);
}

.hat-themenwahl main:has(> .themen) {
  padding-bottom: 110px;
}

/* =============================================================================
   Häufige Fragen als Karten mit Themenwahl (seit 13. Oktober 2026)

   Vorher eine schmale Liste am linken Rand, die rechte Hälfte der Seite blieb
   leer. Jetzt: jede Frage eine Karte, und mit Skript links die Themen,
   rechts die Fragen des gewählten Themas (js/ratgeber.js).
   ========================================================================== */

/* "Frage nicht dabei?" auf der Seite Häufige Fragen (seit 13. Oktober 2026):
   die Telefonnummer zum Antippen, daneben "oder" und der Anfrageknopf. */
.split__body .anruf-oder {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 30px;
  max-width: none;
  margin: 0;
}

.anruf-oder__oder {
  font-size: 10.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--mut-klein); /* seit 24.10.2026 besser lesbar (vorher #75756e) */
}

.split:has(.anruf-oder) {
  align-items: center;
}


/* =============================================================================
   45. Projektraum: visuelle Angleichung an die übrige Website (15.10.2026)

   Dieselbe Formsprache wie die Stufenkette auf full-service.html und die
   Listen im Portalgerüst: Nummern im Kreis, dünne Linien, kleine
   Versal-Beschriftungen, Überschriften in der leichten Schrift. Kästen und
   Rahmen fallen weg, Farbe bleibt dem Stand vorbehalten.
   ========================================================================== */

/* Häufige Fragen im Ratgeber (seit 23. Oktober 2026). Die Fragen der
   früheren faq.html stehen in den Abschnitten als Zwischenzeile über ihrer
   Antwort. Kein Aufklappen: Der Abschnitt klappt schon über seine Karte auf,
   ein zweites Aufklappen darin wäre eins zu viel. */
.split__body .frage {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.4;
  color: #fff;
  margin-top: 34px;
  max-width: 640px;
}

.split__body .frage + p {
  margin-top: 10px;
}


/* =============================================================================
   HANDY, ZWEITE RUNDE (seit dem 23. Oktober 2026, Wünsche von Jürgen Stanek)
   ========================================================================== */


/* Schlussblock "Sind noch Fragen offen?" am Telefon: Knopf, "oder" und
   "Projekt anfragen" untereinander, beide Knöpfe gleich hoch. */
@media (max-width: 620px) {
  .split__body .anruf-oder {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .anruf-oder .telknopf {
    margin-top: 0;
    padding-top: 12px;
    padding-bottom: 12px;
  }
}


/* =============================================================================
   LESBARKEIT UND BEDIENBARKEIT (seit dem 24. Oktober 2026)

   Nachbesserungen nach einer Prüfung auf Lesbarkeit und Bedienung mit
   Finger und Tastatur. Am Computer sieht alles aus wie vorher, die
   Änderungen greifen vor allem am Handy.
   ========================================================================== */

/* --- Kleine Beschriftungen am Handy: mindestens 11 Pixel ------------------
   Am Computer bleiben sie bei 9 Pixeln, wie gestaltet. Auf dem kleinen
   Bildschirm waren sie zu klein zum Lesen. Ausgenommen sind die Wochentage
   im Kalender: Sie stehen in sieben schmalen Spalten. */
@media (max-width: 560px) {
  /* Steht gleich auch in anfrage.css, basis.css, blog.css, loesungen.css, projekte.css, termin.css, unternehmen.css (Auftrag 043): nur zusammen ändern.
     Grund: .agent/knowledge/css-js-files.md, "Doppelte Regeln". */
  .hero__scrollcue,
  .facts__label,
  .story__number,
  .project__link,
  .contact__label,
  .schritte b,
  .karte dt,
  .filter__name,
  .stelle .stelle__marke,
  .stelle__zwischen,
  .strip figcaption,
  .field label,
  .themen__nr,
  .faq__gruppe,
  .builder__stand,
  .uebernehmen__marke,
  .stimme__marke,
  .auswahl__weg,
  .anfrage__kachel .auswahl__weg,
  .anfrage__terminkopf,
  .stufenliste__nr,
  .pt__block,
  .liste th,
  .marke h3,
  .lichtprobe figcaption,
  .posten__gruppe,
  .stand__marke,
  .punkte__wer,
  .kette__stand,
  .marke__da,
  .buchen__zusage-marke,
  .karte__feldwort,
  .beitrag__thema,
  .faq__thema small,
  .probleme span,
  .leistungen__nr {
    font-size: 11px;
  }
}