/* ==========================================================================
   PC-Seiten (Gaming-PCs und Office-PCs) – nur, was es außerhalb nicht gibt.
   Kein eigenes Konzeptbild: Maße im Raster der Konzeptbilder 4-Leistungen-PC-Bau
   und 1-Startseite (PC-Abschnitt), Abstände nur aus der Skala in main.css.
   Die Paketkarten kommen aus pc_paketkarten() in includes/bausteine.php.
   Gemeinsam: Paketkarten, Extras (.pc-dazu, .pc-links), Fragen. Nur Gaming: Foto-Hero,
   Belege. Nur Office: Hero-Karte, Gründe, Zeitleiste, Betriebe (am Dateiende).
   ========================================================================== */


/* Hero: Text links, stehendes PC-Foto rechts mit Karte, die über die Unterkante ragt ------- */

.pc-hero { display: grid; gap: var(--a-10); align-items: center; }
/* schmal: Kachel nicht breiter als nötig, sonst steht ein kleiner PC in einer großen leeren Fläche */
.pc-hero__bild { position: relative; max-width: 24rem; margin: 0; }
/* The cut-out (build-pc.png) keeps its transparency (dev/bilder.php), so the PC stands on the frame's
   own background: the card colour of the surface, like a card on Tinte. It covers the honeycomb
   pattern, so neither a black box nor a see-through hole shows. */
.pc-hero__rahmen {
    position: relative;
    overflow: hidden;
    height: 22.5rem;
    background: var(--karte);
    border: var(--rand-breite) solid var(--rand);
    border-radius: var(--r-3);
}
.pc-hero__rahmen picture { position: absolute; inset: 0; }
.pc-hero__rahmen img { width: 100%; height: 100%; object-fit: contain; }
/* schmal: unter dem Foto, ragt nur in den leeren Rand des Rahmens darunter */
.pc-hero__karte {
    position: relative;
    display: grid;
    gap: var(--a-1);
    max-width: 18rem;
    margin: calc(-1 * var(--a-8)) var(--a-3) 0;
    padding: var(--a-4) var(--a-5);
    background: var(--bg);
    border: var(--kasten-rand);
    border-radius: var(--r-3);
    box-shadow: var(--schatten-schwebend);
    font-size: var(--gr-klein);
    line-height: 1.45;
    color: var(--tx3);
}
.pc-hero__karte .zahl { font-size: var(--gr-kennzahl); }
@media (min-width: 960px) {
    .pc-hero { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--a-16); }
    .pc-hero__bild { margin-bottom: var(--a-12); }
    .pc-hero__rahmen { height: 30rem; }
    /* Das Foto endet über der Karte: Die Karte liegt nur auf dem Grund des Rahmens, nicht auf dem PC */
    .pc-hero__rahmen picture { inset: 0 0 var(--a-16); }
    .pc-hero__rahmen img { object-position: center top; }
    .pc-hero__karte { position: absolute; left: calc(-1 * var(--a-16)); bottom: calc(-1 * var(--a-12)); margin: 0; }
}


/* Paketkarten: Zielgruppe, Einsatzempfehlung, Leistungen, Knopf unten bündig --------- */

.pc-paket .pc-paket__zielgruppe { margin-top: var(--a-3); font-weight: 600; line-height: 1.4; color: var(--tx); }
.pc-paket .pc-paket__ideal { font-size: var(--gr-klein); color: var(--tx3); }
.pc-paket__ideal strong { color: var(--tx2); }
.pc-paket ul { margin-block: var(--a-3) var(--a-6); padding-top: var(--a-4); border-top: var(--rand-breite) solid var(--rand); }
/* Auf der Tinte-Karte ist --rand die Kartenfläche selbst; die Linie braucht den Linienton von Tinte */
.pc-paket.fl-tinte ul { border-top-color: var(--c-tinte-rand); }
/* Tabletbreite: Das dritte Paket läuft über beide Spalten (main.css). Name, Preis und Einsatz stehen
   dann links, Leistungen und Knopf rechts. Die Leistungen überspannen die Zeilen links und eine
   flexible Zeile, damit ein langer Text links nicht auseinandergezogen wird. Das Wabenmuster der
   hervorgehobenen Karte bleibt ohne Rasterplatz und deckt die ganze Karte. */
@media (min-width: 640px) and (max-width: 959px) {
    .pc-pakete > :last-child:nth-child(odd) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(5, auto) 1fr auto;
        column-gap: var(--a-8);
    }
    .pc-pakete > :last-child:nth-child(odd) > :is(h3, span, p) { grid-column: 1; }
    .pc-pakete > :last-child:nth-child(odd) > ul {
        grid-column: 2;
        grid-row: 1 / 7;
        align-content: start;
        margin-top: 0;
        padding: 0 0 0 var(--a-6);
        border-top: 0;
        border-left: var(--rand-breite) solid var(--rand);
    }
    .pc-pakete > .fl-tinte:last-child:nth-child(odd) > ul { border-left-color: var(--c-tinte-rand); }
    .pc-pakete > :last-child:nth-child(odd) > .knopf { grid-column: 2; grid-row: 7; }
}

/* Extras und Einbau */
.pc-dazu .karte > p:not(.karte__fuss) { color: var(--tx2); }
.pc-links { display: flex; flex-wrap: wrap; gap: var(--a-2) var(--a-6); }
/* The links follow the card's text: a card stretched to its taller neighbour keeps the free space
   at its end instead of between the hint and the links (/office-pcs, W13) */
.pc-dazu .pc-links { margin-top: 0; }


/* Belege: Aufnahme oben, große Messwerte, erklärende Unterschrift --------------------- */

.beleg { gap: 0; margin: 0; padding: 0; overflow: hidden; }
.beleg__bild { display: grid; gap: var(--a-2); padding: var(--a-5) var(--a-5) 0; }
.beleg__bild img { width: 100%; border: var(--rand-breite) solid var(--rand); border-radius: var(--r-2); }
.beleg__text { display: flex; flex: 1; flex-direction: column; gap: var(--a-3); padding: var(--a-5) var(--a-6) var(--a-6); }
.beleg__text > p { color: var(--tx2); line-height: 1.55; }
/* Zahl (.zahl) über der Beschriftung, im Quelltext bleibt die Beschriftung (dt) vorn */
.beleg__werte {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
    gap: var(--a-4);
    margin-block: var(--a-1);
    padding-block: var(--a-4);
    border-block: var(--rand-breite) solid var(--rand);
}
.beleg__werte > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--a-1); }
.beleg__werte dt { font-size: var(--gr-klein); line-height: 1.35; color: var(--tx3); }
/* Tabletbreite: In den schmalen Karten passten drei Werte nebeneinander, der vierte stünde allein */
@media (min-width: 640px) and (max-width: 959px) { .beleg__werte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 640px) {
    /* Belege nebeneinander: Die Karten übernehmen die Zeilen des Rasters, damit Aufnahme und Text in
       beiden Karten auf gleicher Höhe beginnen. Die niedrigeren Geekbench-Ausschnitte stehen mittig. */
    .beleg { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
    .beleg__bild { align-content: center; }
}
/* Testimonial at the end of Belege (W6c): one quote at a readable measure, apart from the measurements */
.pc-stimme { max-width: 43rem; margin-top: var(--a-10); }
.pc-stimme > .label { margin-bottom: var(--a-3); }
/* bild() wraps the avatar in a <picture>, the flex item of the caption: without this a two-line
   caption on a phone shrinks it and the round avatar turns into an oval */
.stimme figcaption > picture { flex: none; }


/* Fragen und Anfrage-Kasten ----------------------------------------------------------- */

.pc-fragen { margin-top: var(--a-8); margin-bottom: var(--a-12); }
/* Text etwas schmaler als sonst, damit beide Knöpfe ab 1280 px daneben Platz haben (Konzept /leistungen) */
.kasten--cta .lead { max-width: 34rem; }


/* Office-PCs ================================================================== */

/* Hero: Text links, rechts die Karte „Auf einen Blick“ mit dem Hardware-Argument (kein Foto) */
.office-hero { display: grid; gap: var(--a-10); align-items: center; }
.office-blick { gap: var(--a-3); max-width: 26rem; padding: var(--a-7) var(--a-6); }
.office-blick__preis { display: grid; gap: var(--a-1); }
.office-blick__einheit { font-size: var(--gr-klein); color: var(--tx3); }
.office-blick__liste {
    display: grid;
    gap: var(--a-3);
    margin-top: var(--a-2);
    padding-top: var(--a-5);
    border-top: var(--rand-breite) solid var(--rand);
}
.office-blick__liste li { display: flex; align-items: flex-start; gap: var(--a-3); font-weight: 500; line-height: 1.4; color: var(--tx); }
.office-blick__liste svg { flex: none; width: 16px; height: 19px; color: var(--label); }
@media (min-width: 960px) {
    .office-hero { grid-template-columns: minmax(0, 1fr) 23rem; gap: var(--a-16); }
}

/* Gründe und Zeitleiste: Linie oben im Rahmenton, am Anfang ein kurzer Abschnitt in der Kantenfarbe
   der Fläche (Lavendel dunkel, Tinte violett), wie eine Abschnittsmarke auf ihrem Unterstrich */
.grund, .zeitleiste > li { position: relative; border-top: var(--fuge) solid var(--rand); }
.grund::before, .zeitleiste > li::before {
    content: '';
    position: absolute;
    top: calc(-1 * var(--fuge));
    left: 0;
    width: var(--a-12);
    height: var(--fuge);
    background: var(--kante);
}

/* Gründe: ohne Karten, Sechseck vor dem Titel */
.gruende { display: grid; gap: var(--a-8) var(--a-10); }
@media (min-width: 640px) { .gruende { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .gruende { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.grund { display: flex; align-items: flex-start; gap: var(--a-4); padding-top: var(--a-5); }
.grund > svg { flex: none; width: 24px; height: 28px; color: var(--label); }
.grund h3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-2) var(--a-3); font-size: var(--gr-h4); }
/* Chip „ab Plus“ ohne Innenabstand oben und unten: Die Höhe kommt aus der Zeilenhöhe und bleibt unter der des Titels */
.grund .chip { min-height: 0; padding: 0 var(--a-2); line-height: 1.5; }
.grund p { margin-top: var(--a-2); line-height: 1.55; color: var(--tx2); }

/* Ablauf als Zeitleiste */
.zeitleiste { --luecke: var(--a-8); }
.zeitleiste > li { padding-top: var(--a-6); }
.zeitleiste .schritt__nr { display: block; }
.zeitleiste h3 { margin-bottom: var(--a-2); }
.zeitleiste p { line-height: 1.55; color: var(--tx2); }

/* Betriebe auf Violett */
.betriebe .karte { gap: var(--a-2); }
.betriebe h3 { font-size: var(--gr-h4); }
.betriebe p { color: var(--tx2); }