/* ==========================================================================
   Leistungen & Preise – nur, was es außerhalb dieser Seite nicht gibt.
   Maße aus docs/konzept/vermessung/leistungen.md (CSS-px bei 1280 px).
   ========================================================================== */

/* Jump targets land below the header and the sticky tab bar. The bar's height is added up from its
   parts (tab padding, 3 px underline, 1 px border, one line of tab text), so it grows with a larger
   text size; at the default size that is 60 px as before. When the tabs overflow, Windows adds a
   10 px scrollbar that CSS cannot measure, which leaves a 6 px gap instead of 16 px. */
html { scroll-padding-top: calc(var(--kopf-hoehe) + 2 * var(--a-4) + 3px + var(--rand-breite) + var(--gr-text) * var(--zh-text) + var(--a-4)); }

/* Am Handy: alle fünf Tabs sichtbar (zwei Zeilen statt verstecktem Scrollen), Leiste klebt nicht */
@media (max-width: 639px) {
    html { scroll-padding-top: calc(var(--kopf-hoehe) + var(--a-4)); }
    .tabs { position: static; }
    .tabs ul { flex-wrap: wrap; gap: 0 var(--a-1); overflow: visible; }
    .tabs a { padding: var(--a-3) var(--a-3); }
}


/* Hero ----------------------------------------------------------------------- */

.hero h1 { max-width: 52rem; text-wrap: wrap; }
.hero .kennzahlen--klein { margin-top: var(--a-10); }


/* Bereiche: mit JavaScript ist immer nur einer sichtbar ------------------------ */

.bereiche { padding-top: var(--a-12); padding-bottom: var(--a-10); }
.bereich + .bereich { margin-top: var(--abschnitt-pad); padding-top: var(--abschnitt-pad); border-top: var(--rand-breite) solid var(--rand); }
.bereich[role="tabpanel"] { border-top: 0; margin-top: 0; padding-top: 0; }
.bereich[role="tabpanel"]:focus-visible { outline-offset: var(--a-4); }
.bereich__reihe { margin-top: var(--a-5); }
.bereich .abschnitt-kopf { max-width: none; }   /* Überschrift einzeilig wie im Konzept, .lead begrenzt sich selbst */

.karte > .preisliste { margin-top: calc(-1 * var(--a-1)); }
.hinweise { display: grid; gap: var(--a-1); margin-top: var(--a-2); font-size: var(--gr-klein); line-height: 1.5; color: var(--tx3); }

/* Software: Richtwert fett, Dauer daneben */
.richtwert { color: var(--tx3); }
.richtwert strong { color: var(--tx); }

/* PC-Bau: Merkmale im Kasten */
.merkmale { display: grid; gap: var(--a-4) var(--a-6); }
.merkmale dt { font-weight: 600; color: var(--tx); }
.merkmale dd { color: var(--tx3); }
@media (min-width: 640px) { .merkmale { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .merkmale { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* IT-Hilfe: Die Werkstattpreise sind fast doppelt so lang wie die Stundensätze. Ab 640 px stehen
   Stundensätze und typische Fälle links übereinander, die Werkstattpreise rechts über beide Zeilen,
   damit keine Karte unten halb leer bleibt. Im Quelltext und am Handy bleibt die Reihenfolge. */
@media (min-width: 640px) {
    .it-hilfe-raster > :nth-child(2) { grid-column: 2; grid-row: 1 / span 2; }
    .it-hilfe-raster > :nth-child(3) { grid-column: 1; grid-row: 2; }
}

/* IT-Hilfe: typische Fälle; in der schmalen Karte neben den Werkstattpreisen einspaltig */
.faelle { --luecke: var(--a-3) var(--a-7); color: var(--tx2); }
@media (min-width: 640px) and (max-width: 959px) { .faelle { grid-template-columns: minmax(0, 1fr); } }

/* Gaming-Extras: Preis groß, Leistungen ohne Trennlinien */
.extra { gap: var(--a-2); }
.extra__preis { font-size: 1.75rem; }
.extra ul { display: grid; gap: var(--a-2); margin-top: var(--a-2); color: var(--tx); }
.extra .hinweis { margin-top: auto; padding-top: var(--a-2); }


/* Alles von einer Person: Kurzkarten springen in den Bereich -------------------- */

/* Heading and lead on the left, the rate card beside them from 960 px; below, one column */
.band__kopf { display: grid; gap: var(--a-8); margin-bottom: var(--a-10); }
.band__kopf > .abschnitt-kopf { margin-bottom: 0; }
@media (min-width: 960px) {
    .band__kopf { grid-template-columns: minmax(0, 1fr) minmax(0, 34rem); gap: var(--a-12); align-items: start; }
}

/* Rate card: price right and never wrapped (like .preisliste); the area label stands above the name
   on the phone and beside it from 640 px. The grid sits on a span inside the cell, so th stays a cell. */
.saetze table { width: 100%; border-collapse: collapse; }
.saetze caption { padding-bottom: var(--a-2); text-align: left; }
.saetze th,
.saetze td { padding-block: var(--a-3); vertical-align: baseline; border-bottom: var(--rand-breite) solid var(--rand); }
.saetze tr:last-child > * { border-bottom: 0; }
.saetze th { font-weight: 400; line-height: 1.35; text-align: left; color: var(--tx); overflow-wrap: anywhere; hyphens: auto; }
.saetze__zeile { display: grid; gap: 2px var(--a-3); }
@media (min-width: 640px) {
    .saetze__zeile { grid-template-columns: 5rem minmax(0, 1fr); align-items: baseline; }
}
.saetze th small { display: block; margin-top: 2px; font-size: var(--gr-klein); line-height: 1.45; color: var(--tx3); text-wrap: pretty; }
.saetze td {
    padding-left: var(--a-4);
    font-weight: 600;
    color: var(--tx);
    white-space: nowrap;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.kurzkarten { --luecke: var(--a-3); }
.kurzkarte { gap: var(--a-2); padding: var(--a-5); }
/* Jump links (W13): body text with the site's arrow, so the cards read as links and not as empty
   boxes. The arrow is ::before, moved behind the text, because ::after is the card's click area
   (.karte__link in main.css) */
.kurzkarte .karte__link { display: flex; align-items: baseline; gap: var(--a-1); font-weight: 600; color: var(--link); }
.kurzkarte .karte__link::before { content: '\2192'; content: '\2192' / ''; order: 1; }
.kurzkarte:has(.karte__link:hover) { border-color: var(--kante); }


/* Häufige Fragen ------------------------------------------------------------------ */

.band { padding-block: var(--a-16) var(--a-12); }
#fragen { padding-block: var(--a-16); }
.fragen { margin-top: var(--a-8); margin-bottom: var(--a-12); }

/* Druck: alle Bereiche, nicht nur der gerade gewählte */
@media print {
    .bereich[hidden] { display: block !important; }
    .bereich[role="tabpanel"] + .bereich[role="tabpanel"] { margin-top: var(--abschnitt-pad); padding-top: var(--abschnitt-pad); border-top: var(--rand-breite) solid var(--rand); }
}