/* 2026-10-26 | VisionThinks | Angebote V2.2: Position Technik angepasst. (alte Fassung im Backup von R1) */
/*
| 2026-11-02 | Claude | Angebote R1 (Basis): Achse, Bänder, Überschriften, Dachzeilen,
| Einleitung, Textlinks und Abschluss zentral (vt-axis.css, vt-band.css,
| vt-textlink.css). Hier bleiben nur Sonderelemente: Statement-Zeile,
| Leistungskarten, Hosting-Bild, Anwendungs-Kacheln.
| Hinweis: Hosting-Hintergrund noch mit fester Dev-Adresse (offen, eigene Runde).
*/
/*
| 2026-11-13 | Claude | Angebote A1: neue Bänder Aktuell (PHP2Shell), Arztpraxen
| (Äskulapstab als CSS-Maske), Websites. Entfallen: Leistungskarten
| (company/medical/check/seo), PHP-Logo, Plattform-Zeile. Statement-Regeln
| als Kommentar erhalten (Wortwolke ist im PHP auskommentiert).
| Alte Fassung: claude_backups/angebote-a1/<Zeit>/vt-angebote.css
*/
/*
| 2026-11-13 | Claude | Angebote A2: Warnzeile entfällt (Regeln als Kommentar).
| Band 3: Kopfblock so breit wie die H2 (fit-content); Einleitung und
| Linkzeile tragen nicht zur Breite bei (width:0 + min-width), Links
| verteilt (space-between). Bis 600 px wie bisher linksbündig mit Umbruch.
*/
/*
| 2026-11-13 | Claude | Angebote A3: Band 3 neu (Situationen, Kein harter
| Schnitt, Fragen, Womit). Rahmen so breit wie die H2 (fit-content), alle
| übrigen Blöcke tragen nicht zur Breite bei (width:0 + min-width:100%),
| damit die Linkzeile mit dem Ende der H2 abschließt. .vt-angebote__beleg
| aktiv, das HTML dazu ist im PHP auskommentiert.
| Alte Fassung: claude_backups/angebote-a3/<Zeit>/vt-angebote.css
*/
/*
| 2026-11-13 | Claude | Angebote A4: Band 3 hell mit drei Karten, darunter
| Band blau (Fragen, Keine harten Schnitte versetzt mit Linie, Linkzeile
| über die volle Bühnenbreite). Rahmen auf H2-Breite entfällt.
| Alte Fassung: claude_backups/angebote-a4/<Zeit>/vt-angebote.css
*/
/*
| 2026-11-13 | Claude | Angebote A5: Linkzeile als eigenes helles Band (48 px),
| Links linksbündig; Verteilung (space-between) entfällt.
| Alte Fassung: claude_backups/angebote-a5/<Zeit>/vt-angebote.css
*/
/*
| 2026-11-13 | Claude | Angebote A6: Streifen „Die erste Frage an Sie lautet:“
| mit eingerückter Frage (56 px, mobil 24 px), Frage 24–32 px, Links 18 px,
| Abstände 64/48 px (mobil 48/40 px).
| Alte Fassung: claude_backups/angebote-a6/<Zeit>/vt-angebote.css
*/
.vt-angebote{--vt-a-ink:#0b1730;--vt-a-accent:#91c9ff;--vt-a-warn:#e0a43a;width:100%}
.vt-angebote *{box-sizing:border-box}
.vt-angebote .vt-band h3{margin:0 0 15px;font-size:clamp(21px,2.1vw,27px);line-height:1.25;font-weight:700;text-transform:none;color:var(--vt-a-ink)}
.vt-angebote .vt-band :where(p:not([class])){margin:0 0 18px;font-size:16px;line-height:1.65}

/*! WICHTIG – NICHT LÖSCHEN | WORTWOLKE | Statement (A1: ausgeblendet, Regeln erhalten)
.vt-angebote .vt-angebote__statement{padding:clamp(30px,4vw,50px) 0}
.vt-angebote__statement-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
.vt-angebote .vt-angebote__statement p{margin:0;font-size:inherit;display:flex;align-items:baseline;gap:clamp(8px,1.3vw,20px);white-space:nowrap;line-height:1.2}
.vt-angebote__statement-left{display:grid;gap:8px}
.vt-angebote__statement span{font-size:clamp(17px,2.1vw,28px);font-weight:400;color:#fff}
.vt-angebote__statement strong{font-size:clamp(32px,3.8vw,58px);font-weight:300;letter-spacing:-.035em;color:var(--vt-a-accent)}
.vt-angebote__statement-right{display:flex;justify-content:flex-end;text-align:right;padding-right:clamp(40px,6vw,100px)}
*/

/* Gemeinsam: Linkzeile */
.vt-angebote__links{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;margin-top:24px}

/* Band 1: Aktuell PHP2Shell (dunkel) */
/* A2: Warnzeile entfällt. Alt:
.vt-angebote .vt-angebote__warnzeile{display:flex;align-items:center;gap:12px}
.vt-angebote .vt-angebote__warnzeile::before{content:"";display:block;width:32px;height:3px;border-radius:0;background:var(--vt-a-warn);flex:0 0 auto}
*/
.vt-angebote .vt-angebote__aktuell-intro{max-width:760px;color:#e4edfa}
.vt-angebote__stufen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:760px;margin-top:32px}
.vt-angebote__stufe{min-width:0;padding:26px 28px;border:1px solid #2c4a78;border-radius:20px;background:#17294a}
.vt-angebote .vt-angebote__stufe h3{margin:0 0 6px;font-size:21px;color:#fff}
.vt-angebote .vt-angebote__stufe-preis{margin:0 0 14px;font-size:clamp(28px,2.6vw,34px);font-weight:700;line-height:1.1;color:var(--vt-a-accent)}
.vt-angebote .vt-angebote__stufe-text{margin:0 0 6px;font-size:16px;line-height:1.55;color:#e4edfa}
.vt-angebote .vt-angebote__stufe-zeit{margin:0;font-size:15px;line-height:1.5;color:#a9bddb}
.vt-angebote__aktionen{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;margin-top:32px}
.vt-angebote .vt-angebote__hinweis{margin:18px 0 0;font-size:15px;line-height:1.55;color:#c3d3ea}

/* Band 2: Arztpraxen, breite Karte mit Äskulapstab */
.vt-angebote__praxis{position:relative;overflow:hidden;padding:clamp(28px,3.4vw,44px);padding-right:clamp(28px,22vw,300px);border:1px solid #c8d7e7;border-radius:20px;background:#fff}
.vt-angebote__praxis::after{content:"";position:absolute;top:50%;right:clamp(28px,6vw,90px);width:140px;height:280px;transform:translateY(-50%);background-color:#cfdeef;-webkit-mask:url('../../../../images/contao/icons/stab_weiss.svg') center/contain no-repeat;mask:url('../../../../images/contao/icons/stab_weiss.svg') center/contain no-repeat;pointer-events:none;z-index:0}
.vt-angebote__praxis-inhalt{position:relative;z-index:1;max-width:680px}
.vt-angebote .vt-angebote__praxis .vt-band__title{margin-bottom:16px}
.vt-angebote .vt-angebote__praxis-text{margin:0 0 20px;font-size:17px;line-height:1.65}
.vt-angebote .vt-angebote__praxis-preis{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:0;color:#153d6d}
.vt-angebote__praxis-preis strong{font-size:clamp(28px,2.6vw,34px);font-weight:700;line-height:1.1}
.vt-angebote__praxis-preis span{font-size:15px;line-height:1.5;color:#3d5573}

/* Band 3: Websites, hell mit drei Karten (A4) */
.vt-angebote .vt-angebote__websites .vt-band__title{margin-bottom:32px}
.vt-angebote .vt-angebote__websites h3,.vt-angebote .vt-angebote__arbeitsweise h3{margin:0 0 10px;font-size:clamp(20px,1.8vw,23px)}
.vt-angebote .vt-angebote__websites :where(p:not([class])),.vt-angebote .vt-angebote__arbeitsweise :where(p:not([class])){font-size:17px;line-height:1.65;margin:0}
.vt-angebote__situationen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.vt-angebote__situation{min-width:0;padding:30px;border:1px solid #c8d7e7;border-radius:20px;background:#f6f9fd}
.vt-angebote__situation .vt-angebote__links{margin-top:16px}

/* Band 3b: Arbeitsweise, blau (A4) */
.vt-angebote .vt-angebote__arbeitsweise h3{color:#fff}
.vt-angebote .vt-angebote__arbeitsweise :where(p:not([class])),.vt-angebote .vt-angebote__arbeitsweise li{color:#eaf2ff}
.vt-angebote__fragen{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(28px,4vw,56px)}
.vt-angebote__fragen-text{max-width:680px}
.vt-angebote .vt-angebote__fragenliste{margin:14px 0 0;padding:0 0 0 22px;list-style:disc}
.vt-angebote .vt-angebote__fragenliste li{margin:0 0 8px;font-size:17px;line-height:1.6}
.vt-angebote .vt-angebote__fragenliste li::marker{color:#cfe3ff}
.vt-angebote__schnitt{min-width:0;margin-top:38px;padding-left:28px;border-left:2px solid #6a97d4}
.vt-angebote__nowrap{white-space:nowrap}
.vt-angebote__beleg{margin-top:24px;padding-top:18px;border-top:1px solid #6a97d4}
.vt-angebote .vt-angebote__beleg-label{margin:0 0 4px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#cfe3ff}
.vt-angebote .vt-angebote__beleg-text{margin:0 0 8px;font-size:16px;line-height:1.55;color:#fff}

/* Band 3c: erste Frage, hell (A6) */
.vt-angebote .vt-band.vt-angebote__womit{padding-top:64px;padding-bottom:48px}
.vt-angebote .vt-angebote__womit-einleitung{margin:0;font-size:17px;line-height:1.65;color:#2d415e}
.vt-angebote__womit-frage{padding-left:56px}
.vt-angebote .vt-angebote__womit-titel{margin:6px 0 0;font-size:clamp(24px,2.6vw,32px);font-weight:700;line-height:1.25;color:#0b1730}
.vt-angebote .vt-angebote__womit .vt-angebote__links{margin-top:16px;gap:12px 36px}
.vt-angebote .vt-angebote__womit .vt-textlink{font-size:18px}
.vt-angebote .vt-angebote__link-haupt{font-weight:700}
.vt-angebote__laptops{display:flex;gap:12px;align-items:center;justify-content:center}
.vt-angebote .vt-angebote__laptops img{display:block;width:48%;height:auto;max-height:200px;object-fit:contain;border-radius:0}

/* Hosting: dunkles Band mit Bild */
.vt-angebote .vt-angebote__hosting{background:#0b1730 url('https://2026c.visionthinks.org/wp-content/uploads/2026/10/visionthinks_aachen_serverraum001-scaled.jpeg') center center/cover no-repeat;position:relative;isolation:isolate}
.vt-angebote__hosting::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,20,42,.64),rgba(8,22,47,.66));z-index:-1}
.vt-angebote__hosting-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:36px}
.vt-angebote__hosting-grid article{padding:10px clamp(20px,4vw,58px) 8px 0}
.vt-angebote__hosting-grid article+article{border-left:1px solid rgba(215,234,255,.36);padding-left:clamp(20px,4vw,58px);padding-right:0}
.vt-angebote .vt-angebote__hosting-grid h3{color:#fff}
.vt-angebote .vt-angebote__hosting-grid p{color:#e4edfa;max-width:540px}

/* Anwendungen */
.vt-angebote__apps-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:32px}
.vt-angebote__apps-grid article{background:#fff;border:1px solid #d2deeb;border-radius:10px;padding:26px 22px;min-width:0}
.vt-angebote .vt-angebote__apps-grid h3{font-size:21px}
.vt-angebote .vt-angebote__apps-grid p{font-size:15px;margin-bottom:0}
.vt-angebote__app-index{display:block;margin-bottom:22px;font-size:12px;letter-spacing:.12em;color:#397eb2;font-weight:700}

@media(max-width:860px){
.vt-angebote__situationen{grid-template-columns:1fr;gap:14px}
}
@media(max-width:1000px){
.vt-angebote__apps-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.vt-angebote__situation{padding:24px}
}
@media(max-width:767px){
.vt-angebote__hosting-grid{grid-template-columns:1fr}
.vt-angebote__hosting-grid article,.vt-angebote__hosting-grid article+article{padding:0;border:0}
.vt-angebote__hosting-grid article+article{border-top:1px solid rgba(215,234,255,.36);margin-top:30px;padding-top:30px}
.vt-angebote__praxis{padding-right:clamp(24px,5vw,40px)}
.vt-angebote__praxis::after{top:24px;right:20px;width:70px;height:140px;transform:none;background-color:#e1eaf5}
.vt-angebote__praxis-inhalt{padding-right:56px}
.vt-angebote__fragen{grid-template-columns:1fr}
.vt-angebote__schnitt{margin-top:4px;padding-left:20px}
.vt-angebote .vt-band.vt-angebote__womit{padding-top:48px;padding-bottom:40px}
.vt-angebote__womit-frage{padding-left:24px}
}
@media(max-width:600px){
.vt-angebote__stufen{grid-template-columns:1fr;gap:14px}
.vt-angebote__stufe{padding:22px 24px}
}
@media(max-width:520px){
.vt-angebote__apps-grid{grid-template-columns:1fr}
.vt-angebote__links{gap:10px 20px}
}