/* A0 Printlab — Ergänzungen zur Startvorlage. Alles in einer Schicht,
   sonst schlägt ungeschichtetes CSS die Ordnung aus grundlage.css. */
@layer bausteine {

  /* Sprachumschalter DE | EN — steht neben der Menüliste, damit er auf dem Handy sichtbar bleibt
     (grundlage.css blendet dort alle Menüpunkte außer dem letzten aus). */
  .kopf__nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); }
  .sprache { display: flex; align-items: center; gap: 0.35rem; font-size: var(--t-s); color: var(--linie); }
  .kopf__nav .sprache a { font-weight: 600; padding: 0.3rem 0.15rem; }
  .kopf__nav .sprache a[aria-current] { color: var(--marke-text); }

  .vorschau-hinweis {
    background: var(--marke-schleie);
    color: var(--tinte);
    font-size: var(--t-xs);
    text-align: center;
    padding: 0.4rem 1rem;
  }

  /* Preise: zwei Spalten ab Tablet, eine auf dem Handy.
     min-width: 0 — sonst drückt eine Tabelle das Raster breit (HANDWERK 4). */
  .preisraster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: 2rem 2.5rem;
  }
  .preisblock { min-width: 0; }
  .preisblock h3 { margin: 0 0 0.5rem; }
  .preisblock h3 small { font-weight: 400; color: var(--gedaempft); font-size: var(--t-xs); }

  .preise {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
  }
  .preise th, .preise td {
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--linie);
    text-align: right;
    white-space: nowrap;
  }
  .preise th[scope="row"], .preise thead th:first-child {
    text-align: left;
    white-space: normal;
    font-weight: 400;
  }
  .preise thead th { font-size: var(--t-xs); color: var(--gedaempft); font-weight: 600; }

  .preis-fuss { margin-top: 1.5rem; font-size: var(--t-xs); color: var(--gedaempft); }

  /* Häufige Fragen: natives <details>, ohne Skript, ohne Bewegung. */
  .fragen { margin-top: 1.5rem; border-top: 1px solid var(--linie); }
  .fragen details { border-bottom: 1px solid var(--linie); }
  .fragen summary {
    cursor: pointer;
    padding: 0.9rem 2rem 0.9rem 0;
    font-weight: 600;
    list-style: none;
    position: relative;
  }
  .fragen summary::-webkit-details-marker { display: none; }
  .fragen summary::after {
    content: "+";
    position: absolute;
    right: 0.25rem;
    color: var(--marke-text);
    font-weight: 400;
    font-size: 1.3em;
    line-height: 1;
    top: 0.75rem;
  }
  .fragen details[open] summary::after { content: "–"; }
  .fragen summary:focus-visible { outline: 2px solid var(--marke-text); outline-offset: 2px; }
  .fragen details p { margin: 0 0 1rem; }

  /* Impressum: Bezeichnung links, Angabe rechts; auf dem Handy untereinander. */
  .angaben { margin: 2rem 0 2.5rem; border-top: 1px solid var(--linie); }
  .angaben dt { font-weight: 600; padding-top: 1.1rem; }
  .angaben dd { margin: 0.25rem 0 0; padding-bottom: 1.1rem; border-bottom: 1px solid var(--linie); }
  @media (min-width: 40rem) {
    .angaben { display: grid; grid-template-columns: 13rem 1fr; column-gap: 2rem; }
    .angaben dt { padding-bottom: 1.1rem; border-bottom: 1px solid var(--linie); }
    .angaben dd { padding-top: 1.1rem; margin: 0; }
  }

  .pruefliste { padding-left: 1.2rem; }
  .pruefliste li { margin-block: 0.3rem; }
}