/* Approved DE Pannenhilfe design. Scoped to this page only. */
.panne-preview { --red:#d43a30; --red-rgb:212,58,48; }
.panne-preview .panne-hero { min-height:760px; height:auto; display:flex; align-items:center; isolation:isolate; padding:170px 0 80px; position:relative; overflow:hidden; }
.panne-preview .panne-hero > .hero-media { position:absolute; z-index:-2; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--hero-position); opacity:1; }
.panne-preview .panne-hero::after { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,rgba(5,6,7,.94),rgba(5,6,7,.78) 40%,rgba(5,6,7,.18) 80%),linear-gradient(0deg,#090a0b 0%,transparent 35%); }
.panne-preview .panne-hero .hero-inner { display:block; width:var(--shell); max-width:1360px; margin:auto; padding:0; }
.panne-preview .panne-hero .eyebrow { font-size:12px; letter-spacing:2.5px; font-weight:700; color:#ef5b51; text-transform:uppercase; }
.panne-preview .panne-hero h1 { font-size:clamp(48px,7.2vw,92px); font-weight:520; line-height:1.05; letter-spacing:-.045em; max-width:900px; margin:26px 0; text-transform:none; overflow-wrap:normal; hyphens:none; }
.panne-preview .panne-hero h1 span,.panne-preview .panne-hero h1 em { display:block; }
.panne-preview .panne-hero h1 em { font-style:normal; color:#ef5b51; font-weight:430; }
.panne-preview .panne-hero .lead { max-width:640px; font-size:18px; line-height:1.7; color:#c6c8ca; margin:0; }
.panne-preview .actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }
.panne-preview .button { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:14px 23px; border:1px solid rgba(255,255,255,.26); border-radius:999px; background:rgba(9,10,11,.65); color:#f4f3ef; font-size:14px; font-weight:700; text-decoration:none; }
.panne-preview .button.primary { background:#d43a30; border-color:#d43a30; }
.panne-preview .button:hover { border-color:#f4f3ef; }
.panne-preview .intent-nav { padding:22px 0; border-block:1px solid rgba(255,255,255,.12); background:#0d0f10; }
.panne-preview .intent-nav-inner { width:var(--shell); max-width:1360px; margin:auto; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.panne-preview .intent-nav a { padding:17px 18px; border:1px solid rgba(255,255,255,.13); border-radius:14px; font-size:14px; background:#111315; }
.panne-preview main > .section { padding:76px 0; }
.panne-preview .section-inner { width:var(--shell); max-width:1360px; margin:auto; }
.panne-preview .section-heading { display:block; max-width:900px; margin-bottom:30px; }
.panne-preview main h2 { font-size:clamp(30px,3.4vw,48px); line-height:1.13; font-weight:520; letter-spacing:-.035em; margin:0 0 18px; }
.panne-preview main h3 { font-size:23px; line-height:1.25; font-weight:600; margin:0 0 14px; }
.panne-preview .section-intro,.panne-preview .card p { color:#b1b5b8; font-size:16px; line-height:1.75; margin:0; }
.panne-preview .grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.panne-preview .grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.panne-preview .card { padding:30px; border:1px solid rgba(255,255,255,.13); border-radius:20px; background:linear-gradient(130deg,#151718,#101213); min-width:0; }
.panne-preview .section.alt { background:#111315; }
.panne-preview .case-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.panne-preview .case-card { margin:0; border:1px solid rgba(255,255,255,.13); border-radius:20px; background:#111315; overflow:hidden; }
.panne-preview .case-card img { width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; object-position:var(--case-position,center); }
.panne-preview .case-card figcaption { padding:25px; font-size:15px; line-height:1.7; color:#b1b5b8; }
.panne-preview .case-card strong { display:block; color:#f4f3ef; font-size:20px; margin-bottom:8px; }
.panne-preview .case-link { display:inline-flex; min-height:44px; align-items:center; color:#f4f3ef; font-weight:700; margin-top:10px; text-decoration:underline; text-underline-offset:5px; }
.panne-preview .form-wrap { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:28px; align-items:start; }
.panne-preview .contact-card,.panne-preview .form { min-width:0; padding:32px; border:1px solid rgba(255,255,255,.14); border-radius:22px; background:#111315; }
.panne-preview .contact-card h2,.panne-preview .form h2 { font-size:30px; }
.panne-preview .contact-list { display:grid; gap:24px; margin:26px 0; }
.panne-preview .contact-list small { display:block; color:#b1b5b8; font-size:14px; margin-bottom:8px; }
.panne-preview .contact-list a { font-size:18px; display:inline-flex; align-items:center; min-height:44px; text-decoration:underline; text-underline-offset:5px; }
.panne-preview .trust { display:flex; flex-wrap:wrap; gap:10px; color:#b1b5b8; font-size:13px; }
.panne-preview .trust span { border:1px solid rgba(255,255,255,.16); border-radius:999px; padding:8px 12px; }
.panne-preview .form { display:grid; gap:20px; }
.panne-preview .field { display:grid; gap:10px; }
.panne-preview .field label { color:#c6c8ca; font-size:15px; font-weight:600; }
.panne-preview .field input,.panne-preview .field textarea { width:100%; min-width:0; min-height:54px; border:1px solid #343638; border-radius:12px; background:#090b0c; padding:14px 16px; color:#f4f3ef; font:inherit; }
.panne-preview .field textarea { min-height:140px; resize:vertical; }
.panne-preview .form .button { width:100%; }
.panne-preview .field-note { font-size:13px; line-height:1.7; color:#b1b5b8; margin:0; }
.panne-preview .field-note a { text-decoration:underline; }
.panne-preview .honeypot { display:none; }
.panne-preview .footer { display:flex; justify-content:space-between; flex-wrap:wrap; align-items:center; gap:20px; padding:32px max(16px,calc((100vw - 1360px)/2)); border-top:1px solid rgba(255,255,255,.13); color:#b1b5b8; font-size:14px; }
.panne-preview .footer nav { display:flex; flex-wrap:wrap; gap:18px; }
.panne-preview .footer-phone { display:none; }
@media(max-width:700px) {
 .panne-preview .panne-hero { min-height:720px; padding:145px 0 64px; }
 .panne-preview .panne-hero h1 { font-size:clamp(38px,10.5vw,64px); }
 .panne-preview .panne-hero .hero-inner { width:calc(100% - 32px); }
 .panne-preview .panne-hero .eyebrow { font-size:11px; letter-spacing:1.5px; }
 .panne-preview .panne-hero .lead { font-size:16px; line-height:1.75; }
 .panne-preview .panne-hero > .hero-media { object-position:57% 50%; }
 .panne-preview .panne-hero::after { background:linear-gradient(90deg,rgba(5,6,7,.87),rgba(5,6,7,.5)),linear-gradient(0deg,#090a0b,transparent 50%); }
 .panne-preview .actions { display:grid; grid-template-columns:1fr; }
 .panne-preview .intent-nav-inner { grid-template-columns:repeat(2,minmax(0,1fr)); width:calc(100% - 32px); }
 .panne-preview .intent-nav a { padding:14px 10px; font-size:12px; }
 .panne-preview main > .section { padding:50px 0; }
 .panne-preview .section-inner { width:calc(100% - 32px); }
 .panne-preview .grid,.panne-preview .grid.two,.panne-preview .case-grid,.panne-preview .form-wrap { grid-template-columns:1fr; }
 .panne-preview .card,.panne-preview .contact-card,.panne-preview .form { padding:24px; }
 .panne-preview main h2 { font-size:30px; }
 .panne-preview .contact-card h2,.panne-preview .form h2 { font-size:27px; }
 .panne-preview .contact-list a { font-size:16px; }
 .panne-preview .footer { padding-bottom:105px; }
}