/*
|--------------------------------------------------------------------------
| 2026-11-03
| Author: Claude
| Neuanlage (PHP-Sicherheitscheck R1). Fachseite [vt-php-sicherheitscheck].
| Achse, Bänder, Überschriften, Dachzeilen, Textlinks, Buttons, Abschluss
| und Hover-Karte kommen aus der gemeinsamen Basis. Hier nur
| Sonderelemente: Fließtext, Stufen-Raster und Preis, Ablauf-Liste,
| Bestellformular, Fragen.
|
| 2026-11-03 | Claude | R1b: „Warum“ dunkel mit PHP-Logo, blaues Band
| zweispaltig, Schrittnummern blau gefüllt, Wege a–c als getönte Karten.
|
| 2026-11-03 | Claude | R1c (Klaus 01:36–01:42): Ziffern ohne Kreis,
| Wege untereinander in einer getönten Fläche, Kennzeichnung „Weg a“.
| 2026-11-03 | Claude | R2: Fehlermeldung im Formular, Knopf aktiv.
| 2026-11-03 | Claude | R2b-2: Formular auf globale Felder (hell kompakt) und
| Kontaktformular-Klassen; eigene Feld-/Fokusregeln entfernt.
|--------------------------------------------------------------------------
*/
.vt-phpsc { width: 100%; }
.vt-phpsc * { box-sizing: border-box; }

/* Fließtext 17/1,7, schmale Spalte */
.vt-phpsc .vt-band :where(p:not([class])) { margin: 0 0 18px; font-size: 17px; line-height: 1.7; }
.vt-phpsc .vt-band :where(p:not([class])):last-child { margin-bottom: 0; }
.vt-phpsc .vt-phpsc__text > :not(.vt-band__title):not(.vt-band__dachzeile):not(.vt-phpsc__ablauf):not(.vt-phpsc__logo) { max-width: 760px; }
.vt-phpsc .vt-phpsc__ablauf > li { max-width: 760px; }

/* Blaues Band: Text */
.vt-phpsc .vt-phpsc__blau { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 64px; }
.vt-phpsc .vt-phpsc__blau-text { margin: 16px 0 0; max-width: 560px; color: rgba(255, 255, 255, .92); font-size: 18px; line-height: 1.65; }

/* Warum: dunkles Band mit blassem PHP-Logo rechts */
.vt-phpsc .vt-phpsc__warum-inner { position: relative; }
.vt-phpsc .vt-phpsc__warum-inner > :not(.vt-phpsc__logo) { position: relative; z-index: 1; }
.vt-phpsc .vt-phpsc__logo { position: absolute; top: 50%; right: var(--vt-achse-r, 40px); width: clamp(180px, 22vw, 300px); height: auto; transform: translateY(-50%); opacity: .2; pointer-events: none; }
.vt-phpsc .vt-phpsc__warum-title { margin-bottom: 20px; }
.vt-phpsc .vt-phpsc__warum-text { margin: 0; max-width: 680px; color: #d5deeb; font-size: 18px; line-height: 1.7; }

/* Stufen */
.vt-phpsc .vt-phpsc__stufen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.vt-phpsc .vt-phpsc__stufe-title { margin: 0; color: #0b1730; font-size: 23px; font-weight: 700; line-height: 1.3; text-transform: none; }
.vt-phpsc .vt-phpsc__preis { margin: 0; color: #1658a8; font-size: 32px; font-weight: 700; line-height: 1.2; }
.vt-phpsc .vt-phpsc__liste { margin: 8px 0 0; padding: 0; list-style: none; }
.vt-phpsc .vt-phpsc__liste li { position: relative; margin: 0 0 10px; padding-left: 22px; color: #34445e; font-size: 17px; line-height: 1.6; }
.vt-phpsc .vt-phpsc__liste li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: #1d8ff0; }
.vt-phpsc .vt-phpsc__hinweis { margin: 20px 0 0; color: #596d85; font-size: 15px; }

/* Ablauf */
.vt-phpsc .vt-phpsc__ablauf { margin: 0; padding: 0; list-style: none; counter-reset: vt-phpsc-schritt; }
.vt-phpsc .vt-phpsc__ablauf > li { position: relative; margin: 0 0 22px; padding-left: 40px; color: #34445e; font-size: 17px; line-height: 1.7; counter-increment: vt-phpsc-schritt; }
.vt-phpsc .vt-phpsc__ablauf > li::before { content: counter(vt-phpsc-schritt) "."; position: absolute; left: 0; top: 0; color: #1658a8; font-size: 20px; font-weight: 700; line-height: 1.45; }
.vt-phpsc .vt-phpsc__ablauf strong { color: #0b1730; }
.vt-phpsc .vt-phpsc__wege { margin: 14px 0 18px; padding: 6px 24px; border-radius: var(--vt-radius-card, 20px); background: #eef3f9; }
.vt-phpsc .vt-phpsc__weg-karte { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 12px; padding: 18px 0; border-bottom: 1px solid #d4e2f2; }
.vt-phpsc .vt-phpsc__weg-karte:last-child { border-bottom: 0; }
.vt-phpsc .vt-phpsc__weg { grid-row: 1 / span 3; color: #1658a8; font-size: 18px; font-weight: 700; line-height: 1.35; white-space: nowrap; }
.vt-phpsc .vt-phpsc__weg-karte > :not(.vt-phpsc__weg) { grid-column: 2; }
.vt-phpsc .vt-phpsc__weg-title { margin: 0; color: #0b1730; font-size: 18px; font-weight: 700; line-height: 1.35; text-transform: none; }
.vt-phpsc .vt-phpsc__weg-karte p { margin: 0; color: #34445e; font-size: 17px; line-height: 1.6; }
.vt-phpsc .vt-phpsc__weg-karte .vt-phpsc__weg-preis { padding-top: 6px; color: #1658a8; font-weight: 500; }
.vt-phpsc .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.vt-phpsc .vt-phpsc__wichtig { margin: 6px 0 0; padding: 12px 16px; border-left: 3px solid #1d8ff0; background: #f5f8fc; color: #0b1730; font-size: 16px; font-weight: 500; }

/* Bestellformular (R2b-2): Karte, Stufen-Kacheln, Raster. Felder aus
   03-components/vt-form-inputfield.css (hell kompakt), Radio/Checkbox/
   Fehlertexte aus dem Kontaktformular (vt-kontakt.css, Übergang). */
.vt-phpsc .vt-phpsc-form { max-width: 820px; padding: 32px; border: 1px solid #d4e2f2; border-radius: var(--vt-radius-card, 20px); background: #ffffff; }
.vt-phpsc .vt-phpsc-form .vt-kontakt__gruppe { margin-bottom: 20px; }
.vt-phpsc .vt-phpsc-form__stufen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vt-phpsc .vt-phpsc-form__stufe { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 18px; border: 1px solid var(--vt-form-hell-rahmen, #6e83a0); border-radius: var(--vt-radius-small, 10px); color: #0b1730; font-size: 17px; cursor: pointer; transition: border-color .15s ease; }
.vt-phpsc .vt-phpsc-form__stufe:hover,
.vt-phpsc .vt-phpsc-form__stufe:focus-within { border-color: var(--vt-form-hell-aktiv, #1764c4); }
.vt-phpsc .vt-phpsc-form__stufe:has(input:checked) { border-color: var(--vt-form-hell-aktiv, #1764c4); background: #f5f8fc; }
.vt-phpsc .vt-phpsc-form__stufe input:focus-visible { outline: none; }
.vt-phpsc .vt-phpsc-form__stufe-name { font-weight: 700; }
.vt-phpsc .vt-phpsc-form__stufe-preis { margin-left: auto; color: #1658a8; font-weight: 700; white-space: nowrap; }
.vt-phpsc .vt-phpsc-form__raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.vt-phpsc .vt-phpsc-form__raster > .vt-form-inputfield-group { min-width: 0; margin: 0 0 20px; }
.vt-phpsc .vt-phpsc-form .vt-form-inputfield-label { margin: 0 0 6px; color: #0b1730; font-size: 15px; font-weight: 500; }
.vt-phpsc .vt-phpsc-form input.vt-form-inputfield,
.vt-phpsc .vt-phpsc-form select.vt-form-inputfield { width: 100%; box-sizing: border-box; }
.vt-phpsc .vt-phpsc-form .vt-form-inputfield-error { margin: 6px 0 0; font-size: 15px; font-weight: 500; }
.vt-phpsc .vt-phpsc-form .vt-phpsc-form__wege { flex-direction: column; gap: 0; }
.vt-phpsc .vt-phpsc-form .vt-phpsc-form__wege strong { color: #1658a8; }
/* Zugang nur bei „erweitert“ (ohne :has-Unterstützung immer sichtbar) */
.vt-phpsc .vt-phpsc-form:has(input[value="kompakt"]:checked) .vt-phpsc-form__zugang { display: none; }
.vt-phpsc .vt-phpsc-form [hidden] { display: none; }

/* Fragen */
.vt-phpsc .vt-phpsc__fragen { max-width: 820px; border-top: 1px solid #d4e2f2; }
.vt-phpsc .vt-phpsc__frage { border-bottom: 1px solid #d4e2f2; }
.vt-phpsc .vt-phpsc__frage summary { position: relative; padding: 18px 40px 18px 0; color: #0b1730; font-size: 18px; font-weight: 500; line-height: 1.45; cursor: pointer; list-style: none; }
.vt-phpsc .vt-phpsc__frage summary::-webkit-details-marker { display: none; }
.vt-phpsc .vt-phpsc__frage summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); color: #1658a8; font-size: 24px; font-weight: 400; }
.vt-phpsc .vt-phpsc__frage[open] summary::after { content: "–"; }
.vt-phpsc .vt-phpsc__frage summary:focus-visible { outline: 2px solid #1764c4; outline-offset: 2px; }
.vt-phpsc .vt-phpsc__frage p { margin: 0 0 18px; color: #34445e; font-size: 17px; line-height: 1.7; }

@media (max-width: 860px) {
    .vt-phpsc .vt-phpsc__stufen,
    .vt-phpsc .vt-phpsc__blau { grid-template-columns: 1fr; }
    .vt-phpsc .vt-phpsc__logo { display: none; }
}
@media (max-width: 767px) {
    .vt-phpsc .vt-phpsc-form { padding: 22px 18px; }
    .vt-phpsc .vt-phpsc-form__stufen,
    .vt-phpsc .vt-phpsc-form__raster { grid-template-columns: 1fr; }
    .vt-phpsc .vt-phpsc__preis { font-size: 28px; }
    .vt-phpsc .vt-phpsc__ablauf > li { padding-left: 32px; }
    .vt-phpsc .vt-phpsc__wege,
    .vt-phpsc .vt-phpsc__ablauf .vt-phpsc__wichtig { margin-left: -32px; }
    .vt-phpsc .vt-phpsc__wege { padding: 4px 18px; }
    .vt-phpsc .vt-phpsc__weg-karte { grid-template-columns: minmax(0, 1fr); }
    .vt-phpsc .vt-phpsc__weg { grid-row: auto; }
    .vt-phpsc .vt-phpsc__weg-karte > :not(.vt-phpsc__weg) { grid-column: 1; }
    .vt-phpsc .vt-phpsc__blau-text { font-size: 17px; }
}

/* R2b-2a 2026-11-04 (Claude): Knopfzeile mit eigener Klasse; vt-kontakt__aktionen
   ist auf dem Server ausgeblendet (Befund Klaus 10:17). */
.vt-phpsc .vt-phpsc-form__aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 24px 0 0; }

/* R3 2026-11-11 (Claude): „Warum prüfen“ mit kompakter Angriffsgrafik
   (f2b-stats 1.9) statt PHP-Logo; Grid-Spalten mit minmax(0,…), damit das
   Chart.js-Canvas schmale Handys nicht sprengt (wie Startseite R14b). */
.vt-phpsc .vt-phpsc__warum-inner--grafik { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 40px 56px; align-items: center; }
.vt-phpsc .vt-phpsc__warum-inner--grafik > .vt-phpsc__warum-copy,
.vt-phpsc .vt-phpsc__warum-inner--grafik > .vt-phpsc__grafik { min-width: 0; }
.vt-phpsc .vt-phpsc__grafik { display: block; text-decoration: none; border-radius: 20px; outline-offset: 4px; transition: transform .2s ease; }
.vt-phpsc .vt-phpsc__grafik:hover { transform: translateY(-2px); }
.vt-phpsc .vt-phpsc__grafik .f2b-root,
.vt-phpsc .vt-phpsc__grafik .f2b-canvas { max-width: 100%; min-width: 0; }
.vt-phpsc .vt-phpsc__grafik-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; color: #fff; font-weight: 600; }
@media (max-width: 860px) {
    .vt-phpsc .vt-phpsc__warum-inner--grafik { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* R3b 2026-11-11 (Claude, Klaus 22:14): „Warum prüfen“ erst ab 1200px
   zweispaltig; darunter Text und Grafik untereinander wie bei 860px. */
@media (max-width: 1199px) {
    .vt-phpsc .vt-phpsc__warum-inner--grafik { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .vt-phpsc .vt-phpsc__warum-inner--grafik > .vt-phpsc__grafik { max-width: 760px; }
}

/* R4 2026-11-11: Warum-Band PHP2Shell – Absätze, Server-Satz, Grafik-Hinweis */
.vt-phpsc .vt-phpsc__warum-text + .vt-phpsc__warum-text { margin-top: 16px; }
.vt-phpsc .vt-phpsc__warum-server { color: #fff; font-weight: 600; }
.vt-phpsc .vt-phpsc__warum-server a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.vt-phpsc .vt-phpsc__warum-server a:hover, .vt-phpsc .vt-phpsc__warum-server a:focus-visible { color: rgb(61,163,255); }
.vt-phpsc .vt-phpsc__grafik-hinweis { display: block; margin-top: 10px; color: #9fb0c8; font-size: 14px; line-height: 1.5; }