:root{ --page:#f4f8fd; --page-2:#eef5fb; --surface:#ffffff; --surface-soft:#f8fbff; --surface-blue:#eef7ff; --ink:#113052; --text:#35506e; --muted:#6c7e94; --line:#d9e5f1; --line-strong:#c5d6e8; --blue:#123f6d; --blue-2:#1d5b91; --blue-3:#2c76b5; --cyan:#20c9de; --magenta:#e244a4; --yellow:#ffd43b; --green:#18a977; --shadow:0 20px 55px rgba(20,59,105,.12); --shadow-soft:0 12px 32px rgba(20,59,105,.08); --max:1220px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{ margin:0; font-family:Inter,Segoe UI,Roboto,Arial,sans-serif; color:var(--text); background: radial-gradient(circle at 85% 0%,rgba(82,199,255,.14),transparent 28%), radial-gradient(circle at 8% 12%,rgba(226,68,164,.06),transparent 24%), linear-gradient(180deg,#fbfdff 0%,var(--page) 44%,#ffffff 100%); line-height:1.62;
}
a{color:#0c5f9e;text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
.wrapper{width:min(100% - 2rem,var(--max));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:auto}.skip-link:focus{left:1rem;top:1rem;background:#fff;color:#000;padding:.75rem 1rem;border-radius:10px;z-index:9999} .site-header{ position:sticky;top:0;z-index:80; background:rgba(255,255,255,.92); backdrop-filter:blur(18px); border-bottom:1px solid rgba(17,48,82,.10); box-shadow:0 8px 28px rgba(17,48,82,.08);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;min-height:76px}
.logo{display:inline-flex;align-items:center;flex:0 0 auto}
.logo img{width:clamp(155px,17vw,215px);height:auto;border-radius:10px;background:#fff;box-shadow:none}
.nav-links{display:flex;gap:.8rem;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.nav-links a{color:var(--ink);font-weight:760;opacity:.94}
.nav-links a[aria-current="page"]{color:#0d69a8} .button,.nav-links .button{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px; padding:.78rem 1.1rem;border-radius:999px;border:1px solid transparent; background:linear-gradient(135deg,var(--blue),var(--blue-3)); color:#fff!important;font-weight:850; box-shadow:0 14px 28px rgba(29,91,145,.22);cursor:pointer
}
.button.secondary{ background:#fff;border-color:var(--line-strong);color:var(--ink)!important;box-shadow:var(--shadow-soft)
}
.button:hover{text-decoration:none;filter:brightness(1.04);transform:translateY(-1px)}
.nav-cta{padding-inline:1.25rem} .hero{padding:2.1rem 0 2.6rem}
.hero .hero-grid{ position:relative;overflow:hidden; display:grid;grid-template-columns:1.02fr .98fr;gap:2rem;align-items:center; padding:clamp(1.45rem,3.5vw,3.3rem); border-radius:34px; background: radial-gradient(circle at 88% 10%,rgba(32,201,222,.30),transparent 26%), radial-gradient(circle at 9% 0%,rgba(226,68,164,.18),transparent 24%), linear-gradient(135deg,#123d69 0%,#1b578d 52%,#2b75b4 100%); box-shadow:0 28px 80px rgba(18,63,109,.22);
}
.badge{ display:inline-flex;align-items:center;gap:.45rem;padding:.45rem .82rem;border-radius:999px; border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.14); color:#ecf8ff;font-size:.93rem;font-weight:760
}
.hero h1{margin:1rem 0 .9rem;font-size:clamp(2.35rem,4.55vw,4.65rem);line-height:1.04;letter-spacing:-.045em;color:#fff}
.hero p{font-size:1.14rem;max-width:68ch;color:#e6f1fb}
.hero-actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.35rem}
.hero .button.secondary{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.34);color:#fff!important;box-shadow:none} .hero-panel,.card,.content-panel,.legal-card,.legal-content,.contact-box,.mini-panel,.story-callout{ background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow)
}
.hero-panel{padding:1.15rem;color:var(--text)}
.hero-panel h2,.hero-panel h3,.hero-panel strong{color:var(--ink)}
.hero-panel p,.hero-panel li,.hero-panel span{color:var(--muted)}
.hero-brand-panel{padding:1.25rem}
.logo-showcase{padding:1rem;border-radius:22px;background:linear-gradient(180deg,#fff,#f5f9ff);box-shadow:inset 0 0 0 1px rgba(23,52,97,.08)}
.logo-showcase img{border-radius:16px}
.hero-brand-copy{display:flex;justify-content:space-between;gap:1rem;align-items:center;margin-top:1rem;padding:.9rem 1rem;border:1px solid var(--line);border-radius:18px;background:var(--surface-soft)}
.hero-brand-copy strong{color:var(--ink)}
.hero-brand-copy span{color:var(--muted);text-align:right} .section{padding:1.3rem 0 3.6rem}
.section h2{margin:.1rem 0 .55rem;font-size:clamp(1.65rem,2.6vw,2.6rem);line-height:1.1;color:var(--ink);letter-spacing:-.025em}
.section-lead{max-width:78ch;color:var(--muted);margin-top:0}
.stats-section{padding-top:.15rem}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.stat-card{padding:1.2rem;border-radius:24px;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-soft)}
.stat-card strong{display:block;font-size:clamp(1.65rem,2.8vw,2.55rem);line-height:1;color:var(--blue)}
.stat-card span{display:block;margin-top:.42rem;color:var(--muted)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.25rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1.25rem}
.card{padding:1.25rem;background:#fff}
.card h3{margin:.35rem 0 .4rem;color:var(--ink);font-size:1.18rem}
.card p,.card li{color:var(--muted)}
.card ul{padding-left:1.1rem}
.card-icon{width:54px;height:54px;border-radius:17px;display:grid;place-items:center;background:linear-gradient(135deg,#edf8ff,#f8eff8);border:1px solid #d7e9f7;font-size:1.45rem;color:var(--blue)}
.card-link{margin-top:1rem}
.material-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1.25rem}
.material-tile{display:block;min-height:150px;padding:1.25rem;border:1px solid var(--line);border-radius:24px;background:linear-gradient(135deg,#fff 0%,#f2f8ff 100%);box-shadow:var(--shadow-soft)}
.material-tile strong{display:block;font-size:1.7rem;color:var(--ink);letter-spacing:-.02em}
.material-tile span{display:block;margin-top:.45rem;color:var(--muted)}
.material-tile:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 18px 44px rgba(20,59,105,.12)}
.split-panel{display:grid;grid-template-columns:1.2fr .8fr;gap:1.2rem;align-items:center;margin-top:1.25rem;padding:1.35rem;border-radius:28px;border:1px solid var(--line);background:linear-gradient(135deg,#ffffff 0%,#eef7ff 100%);box-shadow:var(--shadow-soft)}
.split-panel h3{color:var(--ink);font-size:1.35rem;margin-top:0}
.split-panel img{max-height:320px;margin-inline:auto}
.check-list{padding-left:0;list-style:none}
.check-list li{position:relative;padding-left:1.8rem;margin:.58rem 0;color:var(--text)}
.check-list li::before{content:'✓';position:absolute;left:0;top:0;color:var(--green);font-weight:900}
.big-list li{font-size:1.05rem}
.notice{margin-top:1rem;padding:1rem 1.1rem;border-radius:16px;border-left:4px solid var(--green);background:#eefbf6;color:var(--text)}
.content-panel{padding:1.35rem;background:#fff}
.prose p,.prose li{font-size:1.04rem}.prose strong{color:var(--ink)}
.story-callout{padding:1.35rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;background:linear-gradient(135deg,#ffffff 0%,#eff7ff 100%)}
.story-callout p{font-size:1.2rem;max-width:760px;color:var(--ink);margin:0}.top-gap{margin-top:1rem}
.mini-panel{padding:1.2rem;background:#fff}.mini-panel strong{display:block;color:var(--ink);font-size:1.25rem}
.process-list{counter-reset:item;display:grid;gap:.85rem;padding-left:0;list-style:none;margin-top:1.2rem}
.process-list li{padding:1rem 1.05rem;border:1px solid var(--line);border-radius:18px;background:#fff;color:var(--text);box-shadow:var(--shadow-soft)}
.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.2rem}
.timeline div{padding:1.2rem;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:var(--shadow-soft)}
.timeline strong{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--blue-3));color:#fff}
.timeline h3{color:var(--ink)}
.table-wrap{overflow:auto;margin-top:1.25rem;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:var(--shadow-soft)}
table{width:100%;border-collapse:collapse;min-width:760px}th,td{padding:1rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}th{color:var(--ink);background:#f3f8fe}td{color:var(--text)}tr:last-child td{border-bottom:0}
.material-card{scroll-margin-top:130px}.data-card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1.25rem}
.faq-list{display:grid;gap:.75rem;margin-top:1.2rem}.faq-list details{border:1px solid var(--line);border-radius:18px;background:#fff;padding:1rem 1.1rem;box-shadow:var(--shadow-soft)}.faq-list summary{cursor:pointer;color:var(--ink);font-weight:800}.faq-list p{color:var(--muted)}
code{background:#eef5fb;border:1px solid var(--line);padding:.1rem .35rem;border-radius:.35rem;color:var(--ink)}
.contact-box{padding:1.2rem;margin-top:1.2rem;background:#fff}.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.contact-item{padding:1rem;border:1px solid var(--line);border-radius:18px;background:var(--surface-soft)}.contact-item strong{display:block;margin-bottom:.35rem;color:var(--ink)} .site-footer{padding:2.2rem 0 2.5rem;border-top:1px solid var(--line);background:linear-gradient(180deg,#fff,#f4f8fd)}
.footer-grid{display:grid;grid-template-columns:1.05fr 1fr 1fr;gap:1.25rem;align-items:start}.footer-brand img{width:min(100%,220px);padding:.28rem;border-radius:12px;background:#fff;box-shadow:none}.footer-links{display:flex;gap:.65rem 1rem;flex-wrap:wrap}.footer-links a{color:var(--muted);font-weight:650}.legal-footer-links a{font-size:.94rem}.small{font-size:.94rem;color:var(--muted)} .legal-main{padding:3.2rem 0 4rem}.legal-shell{display:grid;grid-template-columns:320px 1fr;gap:1.2rem;align-items:start}.legal-card{padding:1.2rem;position:sticky;top:104px;background:#fff}.legal-brand{margin:.2rem 0 1rem;padding:.7rem;border-radius:18px;background:#fff;border:1px solid var(--line)}.legal-brand img{border-radius:12px}.legal-card h1{font-size:clamp(1.55rem,2.5vw,2.25rem);line-height:1.12;margin:.2rem 0 .7rem;color:var(--ink)}.legal-title-long{overflow-wrap:anywhere;hyphens:auto}.legal-card p{color:var(--muted)}.legal-meta{margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--line);color:var(--muted);font-size:.94rem}.legal-mini-nav{display:grid;gap:.45rem;margin-top:1rem}.legal-mini-nav a{display:block;padding:.58rem .72rem;border:1px solid var(--line);border-radius:12px;background:var(--surface-soft);color:var(--ink)}.legal-mini-nav a:hover{text-decoration:none;background:#eef7ff}.legal-content{padding:1.45rem 1.65rem;background:#fff}.legal-content h2{margin-top:1.75rem;margin-bottom:.55rem;font-size:1.35rem;color:var(--ink)}.legal-content h3{margin-top:1.15rem;color:var(--ink)}.legal-content p,.legal-content li,.legal-content address{color:var(--text)}.legal-content address{font-style:normal}.legal-content ul{padding-left:1.2rem}.legal-content .highlight{padding:1rem;border:1px solid #badcf5;border-radius:16px;background:#eef7ff} @media(max-width:1100px){.nav{min-height:auto;padding:1rem 0;align-items:flex-start}.logo img{width:clamp(155px,26vw,200px)}.hero .hero-grid,.split-panel,.legal-shell{grid-template-columns:1fr}.legal-card{position:static}.data-card-grid,.grid-4,.material-strip,.stats-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1fr}}
@media(max-width:880px){.nav{flex-direction:column}.nav-links{justify-content:flex-start}.hero{padding-top:1.4rem}.grid-3,.timeline,.contact-grid{grid-template-columns:1fr}.hero-brand-copy{flex-direction:column;align-items:flex-start}.hero-brand-copy span{text-align:left}.story-callout{align-items:flex-start;flex-direction:column}.stats-grid,.data-card-grid,.grid-4,.material-strip{grid-template-columns:1fr}.footer-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem 1rem}}
@media(max-width:620px){.wrapper{width:min(100% - 1.2rem,var(--max))}.logo img{width:min(100%,185px)}.nav-links{gap:.55rem}.nav-links a:not(.button){font-size:.94rem}.button{width:auto}.hero .hero-grid{border-radius:24px;padding:1.15rem}.hero h1{font-size:clamp(2rem,9vw,3rem)}.legal-content{padding:1.1rem}.card,.content-panel,.hero-panel{border-radius:20px}.footer-links{grid-template-columns:1fr}}
@media print{.site-header,.site-footer,.skip-link,.legal-mini-nav{display:none!important}body{background:#fff;color:#000}.legal-shell{display:block}.legal-card,.legal-content{box-shadow:none;border:0;background:#fff;color:#000}.legal-content p,.legal-content li,.legal-content address{color:#000}} /* FAQ Sprungmarken */
.faq-quicklinks{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1rem}
.faq-quicklinks a{display:inline-flex;align-items:center;min-height:38px;padding:.55rem .78rem;border-radius:999px;background:#f2f8ff;border:1px solid var(--line);color:var(--ink);font-weight:760}
.faq-quicklinks a:hover{text-decoration:none;background:#e7f4ff;transform:translateY(-1px)}
.faq-list details[id]{scroll-margin-top:120px}
.section[id]{scroll-margin-top:105px}
.faq-list details:target{border-color:#72bee9;box-shadow:0 0 0 4px rgba(114,190,233,.18), var(--shadow-soft)}
.faq-list details:target summary{color:#0d69a8} /* Technische Datenblätter / PDF-Downloads */
.download-grid{align-items:stretch}
.download-card{display:flex;flex-direction:column;gap:.35rem}
.download-card .small{margin-top:auto}
.download-actions{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:.8rem}
.download-actions .button{min-height:40px;padding:.62rem .9rem;font-size:.94rem}
.download-card:target{border-color:#72bee9;box-shadow:0 0 0 4px rgba(114,190,233,.18), var(--shadow)} /* V7: DoPro Man auf der Startseite */
.hero-doproman-panel{ padding:0; overflow:hidden; background: linear-gradient(180deg,rgba(255,255,255,.82),rgba(238,247,255,.92));
}
.doproman-frame{ margin:0; min-height:420px; display:flex; align-items:flex-end; justify-content:center; background: radial-gradient(circle at 70% 18%,rgba(32,201,222,.15),transparent 34%), linear-gradient(180deg,#ffffff 0%,#eef7ff 100%);
}
.doproman-frame img{ width:100%; height:100%; max-height:610px; object-fit:cover; object-position:center top; border-radius:0;
}
.doproman-caption{ margin:.9rem; background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
}
.filament-visual-note{ margin-top:1.05rem; padding:1rem 1.1rem; border:1px solid var(--line); border-radius:20px; background:linear-gradient(135deg,#ffffff 0%,#f2f8ff 100%); box-shadow:var(--shadow-soft); display:flex; gap:.7rem 1rem; justify-content:space-between; align-items:center;
}
.filament-visual-note strong{color:var(--ink)}
.filament-visual-note span{color:var(--muted);text-align:right;max-width:660px} @media(max-width:1100px){ .doproman-frame{min-height:360px} .doproman-frame img{max-height:560px;object-position:center 12%}
}
@media(max-width:760px){ .filament-visual-note{display:block} .filament-visual-note span{display:block;text-align:left;margin-top:.35rem}
} /* V8: echte Filament-Bildstrecke */
.badge.light{ color:#0f4c7e; background:#edf8ff; border:1px solid #cfe8f8;
}
.filament-gallery-panel{ margin-top:1.35rem; padding:1.35rem; border:1px solid var(--line); border-radius:30px; background: radial-gradient(circle at 12% 20%,rgba(32,201,222,.11),transparent 24%), linear-gradient(135deg,#ffffff 0%,#eef7ff 100%); box-shadow:var(--shadow-soft); overflow:hidden;
}
.gallery-heading{ display:grid; grid-template-columns: 1fr auto; gap:.4rem 1rem; align-items:end;
}
.gallery-heading .badge{justify-self:start;grid-column:1 / -1}
.gallery-heading h3{ margin:.2rem 0 0; color:var(--ink); font-size:clamp(1.35rem,2.1vw,2.05rem); line-height:1.12; letter-spacing:-.02em;
}
.gallery-heading p{ margin:.2rem 0 0; color:var(--muted); max-width:520px; text-align:right;
}
.filament-photo-strip{ display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:.7rem; margin-top:1.1rem;
}
.filament-photo-strip figure{ margin:0; aspect-ratio:1/1; border-radius:19px; overflow:hidden; background:#fff; border:1px solid rgba(17,48,82,.10); box-shadow:0 12px 28px rgba(20,59,105,.09);
}
.filament-photo-strip img{ width:100%; height:100%; object-fit:cover; transition:transform .22s ease;
}
.filament-photo-strip figure:hover img{transform:scale(1.045)}
.gallery-actions{ display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; margin-top:1.15rem;
}
.filament-photo-strip.compact{ grid-template-columns:repeat(6,minmax(0,1fr));
} @media(max-width:1100px){ .filament-photo-strip{grid-template-columns:repeat(4,minmax(0,1fr))} .filament-photo-strip.compact{grid-template-columns:repeat(4,minmax(0,1fr))} .gallery-heading{display:block} .gallery-heading p{text-align:left;margin-top:.45rem}
}
@media(max-width:620px){ .filament-gallery-panel{padding:1rem;border-radius:24px} .filament-photo-strip, .filament-photo-strip.compact{grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}
} /* V8.2: erweiterte Kontaktseite */
.contact-hero-panel{ padding:1.35rem; background: radial-gradient(circle at 85% 10%,rgba(32,201,222,.12),transparent 28%), linear-gradient(135deg,#ffffff 0%,#eef7ff 100%);
}
.contact-hero-panel h2{margin:.1rem 0 .7rem;color:var(--ink);font-size:1.75rem}
.contact-hero-panel p{font-size:1.08rem;color:var(--text)}
.contact-pill-list{display:grid;gap:.65rem;margin-top:1rem}
.contact-pill-list a{ display:flex; align-items:center; min-height:44px; padding:.72rem .9rem; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--ink); font-weight:800;
}
.contact-pill-list a:hover{text-decoration:none;background:#f2f8ff;transform:translateY(-1px)}
.contact-split{align-items:stretch}
.contact-data-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; margin-top:1rem;
}
.contact-data-grid div,
.contact-note-card{ padding:1rem; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:var(--shadow-soft);
}
.contact-data-grid strong{display:block;color:var(--ink);margin-bottom:.25rem}
.contact-data-grid span{display:block;color:var(--muted)}
.contact-note-card h3{margin-top:0;color:var(--ink)}
.contact-note-card p{color:var(--muted)}
.service-strip .material-tile strong{font-size:1.45rem} @media(max-width:760px){ .contact-data-grid{grid-template-columns:1fr}
} /* V8.3: Telefonservice / echte Ansprechpartner */
.service-phone-band{ padding:1.1rem 0 1.8rem;
}
.service-phone-inner{ display:grid; grid-template-columns:1.35fr .65fr; gap:1rem; align-items:center; padding:1.25rem; border:1px solid var(--line); border-radius:30px; background: radial-gradient(circle at 88% 16%,rgba(32,201,222,.13),transparent 28%), linear-gradient(135deg,#ffffff 0%,#eef7ff 100%); box-shadow:var(--shadow-soft);
}
.service-phone-inner h2{ margin:.4rem 0 .25rem; color:var(--ink); font-size:clamp(1.55rem,2.4vw,2.35rem); line-height:1.1;
}
.service-phone-inner p{ margin:.2rem 0 0; color:var(--text); max-width:880px;
}
.phone-action-card{ padding:1.05rem; border-radius:24px; background:linear-gradient(135deg,var(--blue),var(--blue-3)); color:#fff; box-shadow:0 18px 38px rgba(18,63,109,.22); text-align:center;
}
.phone-action-card span{ display:block; font-size:.86rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.76);
}
.phone-action-card a{ display:block; margin:.28rem 0; color:#fff; font-size:clamp(1.35rem,2.5vw,2.05rem); line-height:1.1; font-weight:950; text-decoration:none; letter-spacing:-.02em;
}
.phone-action-card a:hover{text-decoration:underline}
.phone-action-card small{display:block;color:rgba(255,255,255,.78)}
.phone-action-card.large{align-self:center}
.service-promise-panel{ display:grid; grid-template-columns:1.3fr .7fr; gap:1rem; align-items:center; padding:1.35rem; border:1px solid var(--line); border-radius:30px; background:linear-gradient(135deg,#ffffff 0%,#f1f8ff 100%); box-shadow:var(--shadow-soft);
}
.service-promise-panel h2{ margin:.4rem 0 .45rem; color:var(--ink); font-size:clamp(1.55rem,2.5vw,2.35rem); line-height:1.1;
}
.service-promise-panel p{color:var(--text);margin:0}
.phone-strong{font-weight:950}
.footer-phone-note{ margin:.45rem 0 0; color:var(--ink); font-weight:850;
}
.footer-phone-note a{color:var(--blue);font-weight:950} @media(max-width:900px){ .service-phone-inner, .service-promise-panel{grid-template-columns:1fr} .phone-action-card{text-align:left}
} /* V8.4: Labor / Testcenter / praxisnaher Support */
.lab-section{ padding-top:.2rem;
}
.lab-panel{ display:grid; grid-template-columns:1.35fr .65fr; gap:1rem; align-items:center; padding:1.35rem; border:1px solid var(--line); border-radius:30px; background: radial-gradient(circle at 92% 12%,rgba(226,68,164,.09),transparent 28%), radial-gradient(circle at 8% 88%,rgba(32,201,222,.11),transparent 30%), linear-gradient(135deg,#ffffff 0%,#f1f8ff 100%); box-shadow:var(--shadow-soft);
}
.lab-panel h2,
.lab-split h2{ margin:.4rem 0 .55rem; color:var(--ink); font-size:clamp(1.55rem,2.5vw,2.35rem); line-height:1.1;
}
.lab-panel p,
.lab-split p{color:var(--text)}
.lab-fact-card{ min-height:260px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:1.2rem; border-radius:26px; background:linear-gradient(135deg,var(--blue),var(--blue-3)); color:#fff; box-shadow:0 18px 38px rgba(18,63,109,.22);
}
.lab-fact-card strong{ display:block; font-size:clamp(3.1rem,6vw,5.4rem); line-height:.92; letter-spacing:-.06em;
}
.lab-fact-card span{ display:block; margin-top:.35rem; font-size:1.15rem; font-weight:900;
}
.lab-fact-card small{ display:block; margin-top:.75rem; color:rgba(255,255,255,.78); max-width:260px;
}
.lab-split{align-items:stretch}
.contact-service-grid{grid-template-columns:repeat(4,1fr)} @media(max-width:1100px){ .lab-panel, .contact-service-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){ .lab-panel, .contact-service-grid{grid-template-columns:1fr} .lab-fact-card{min-height:210px}
} /* V8.5: konkrete Servicezeiten */
.footer-phone-note span{ display:inline-block; margin-top:.15rem; color:var(--muted); font-weight:650;
}
.business-hours-card{ margin-top:1rem; padding:1rem; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:var(--shadow-soft);
}
.business-hours-card strong{ display:block; color:var(--ink); margin-bottom:.35rem;
}
.business-hours-card span{ display:block; color:var(--text); font-weight:760;
} /* V8.8: Laternen-Story auf der Über-uns-Seite */
.laternen-hero-panel{ padding:1rem; background:linear-gradient(180deg,#ffffff 0%,#eef7ff 100%);
}
.laternen-hero-figure{ margin:0; border-radius:20px; overflow:hidden; border:1px solid rgba(17,48,82,.10); box-shadow:0 12px 28px rgba(20,59,105,.09);
}
.laternen-hero-figure img{ width:100%; height:min(58vw,440px); object-fit:cover; object-position:center center;
}
.laternen-hero-copy{margin-top:1rem}
.laternen-story-section{padding-top:.2rem}
.laternen-story-grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:1rem; margin-top:1.25rem;
}
.laternen-story-card{ grid-column:span 4; margin:0; overflow:hidden; border:1px solid var(--line); border-radius:24px; background:#fff; box-shadow:var(--shadow-soft);
}
.laternen-story-card--wide{grid-column:span 8}
.laternen-story-card img{ width:100%; aspect-ratio:4/3; object-fit:cover;
}
.laternen-story-card figcaption{ padding:1rem 1.05rem 1.15rem;
}
.laternen-story-card strong{ display:block; color:var(--ink); font-size:1.08rem; margin-bottom:.25rem;
}
.laternen-story-card span{color:var(--muted)}
@media(max-width:1100px){ .laternen-story-card, .laternen-story-card--wide{grid-column:span 6}
}
@media(max-width:760px){ .laternen-story-grid{grid-template-columns:1fr} .laternen-story-card, .laternen-story-card--wide{grid-column:auto} .laternen-hero-figure img{height:auto;max-height:420px}
} /* V9.0: Filamente-Seite mit echtem Vierer-Kachelbild */
.filament-hero-panel{ padding:1rem; background:linear-gradient(180deg,#ffffff 0%,#eef7ff 100%);
}
.filament-hero-figure{ margin:0; border-radius:22px; overflow:hidden; border:1px solid rgba(17,48,82,.10); box-shadow:0 12px 28px rgba(20,59,105,.09); background:#fff;
}
.filament-hero-figure img{ width:100%; height:min(58vw,500px); object-fit:cover; object-position:center center;
}
.filament-hero-copy{margin-top:1rem}
@media(max-width:760px){ .filament-hero-figure img{height:auto;max-height:520px}
} /* V9.1: ausführliche Laternen-Geschichte */
.story-hero .hero h1{}
.story-long-section{padding-top:1rem}
.story-layout{ display:grid; grid-template-columns:330px minmax(0,1fr); gap:1.4rem; align-items:start;
}
.story-side-card{ position:sticky; top:105px; padding:1.2rem; border:1px solid var(--line); border-radius:26px; background:linear-gradient(135deg,#ffffff 0%,#eef7ff 100%); box-shadow:var(--shadow-soft);
}
.story-side-card h2{ margin:.7rem 0 .5rem; color:var(--ink); font-size:1.55rem; line-height:1.12;
}
.story-side-card p{color:var(--muted)}
.story-prose{ padding:clamp(1.2rem,3vw,2.2rem); border:1px solid var(--line); border-radius:30px; background:#fff; box-shadow:var(--shadow-soft);
}
.story-prose h2{ margin:2rem 0 .65rem; color:var(--ink); font-size:clamp(1.45rem,2.25vw,2.15rem); line-height:1.12;
}
.story-prose h2:first-child{margin-top:0}
.story-prose p{ font-size:1.08rem; color:var(--text); max-width:82ch;
}
.story-prose strong{color:var(--ink)}
.story-image-wide,
.story-image-grid{ margin:1.5rem 0 1.85rem; border:1px solid var(--line); border-radius:24px; overflow:hidden; background:#fff; box-shadow:var(--shadow-soft);
}
.story-image-wide img{ width:100%; max-height:560px; object-fit:cover;
}
.story-image-grid{ display:grid; grid-template-columns:1fr 1fr;
}
.story-image-grid img{ width:100%; height:360px; object-fit:cover;
}
.story-image-wide figcaption,
.story-image-grid figcaption{ grid-column:1 / -1; padding:1rem 1.1rem; color:var(--muted); background:#f8fbff;
}
.story-final-callout{ margin-top:2rem; padding:1.35rem; border-radius:26px; background:linear-gradient(135deg,#eef7ff 0%,#ffffff 100%); border:1px solid var(--line);
}
.story-final-callout h2{margin-top:0}
@media(max-width:1050px){ .story-layout{grid-template-columns:1fr} .story-side-card{position:static}
}
@media(max-width:720px){ .story-prose{padding:1rem} .story-image-grid{grid-template-columns:1fr} .story-image-grid img{height:auto}
} /* V9.2: Laternenbild in der Langgeschichte korrigiert */
.story-image-wide img.story-lantern-full{ object-position:center 12%;
}
@media(max-width:720px){ .story-image-wide img.story-lantern-full{ object-fit:cover; object-position:center top; }
} /* V9.3: Rücknahmeprogramm mit filamentspezifischem Bild */
.ruecknahme-visual{ margin:0; border-radius:24px; overflow:hidden; border:1px solid rgba(17,48,82,.10); background:#fff; box-shadow:0 12px 28px rgba(20,59,105,.09);
}
.ruecknahme-visual img{ width:100%; height:auto; max-height:420px; object-fit:cover; object-position:center center;
}
.ruecknahme-visual figcaption{ padding:.85rem 1rem; color:var(--muted); background:linear-gradient(180deg,#ffffff,#f5f9ff); font-size:.96rem;
}
.hero-ruecknahme-visual img{max-height:520px}
.ruecknahme-hero-panel{ padding:1rem; background:linear-gradient(180deg,#ffffff 0%,#eef7ff 100%);
}
@media(max-width:760px){ .ruecknahme-visual img, .hero-ruecknahme-visual img{max-height:none}
} /* V9.5: Hinweis Rücknahme nur für DoPro-3D-Material */
.material-origin-notice{ border-left-color:var(--blue); background:linear-gradient(135deg,#eef7ff 0%,#ffffff 100%);
}
.material-origin-notice strong{ color:var(--ink);
} /* V9.6: korrigiertes Viererbild auf der Filamente-Seite */
.filament-hero-figure img[src$="filamente-hero-viererbild-v2.webp"]{ object-fit:cover; object-position:center center;
} /* V9.8: Filamente-Viererbild final korrigiert */
.filament-hero-figure img{ object-position:center center;
} /* V10.0: finale Korrektur Filamente und Rücknahmebild */
.filament-hero-figure img{object-position:center center}
.ruecknahme-visual img{object-position:center center} /* V10.2: Filamente-Hero mit vier Originalfotos ohne Beschnitt */
.filament-hero-figure img{ width:100%; height:auto !important; max-height:none !important; object-fit:contain !important; object-position:center center !important; display:block;
}
.filament-hero-panel{ overflow:visible;
} /* V10.4: Wechselspule technische Daten */
.spool-tech-section .split-panel{align-items:center}
.spec-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; margin:1.1rem 0;
}
.spec-grid div{ padding:1rem; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:var(--shadow-soft);
}
.spec-grid strong{ display:block; color:var(--ink); font-size:1.55rem; line-height:1.1;
}
.spec-grid span{ display:block; color:var(--muted); margin-top:.25rem;
}
.spool-tech-visual,
.spool-image-row figure{ margin:0; border:1px solid var(--line); border-radius:24px; overflow:hidden; background:#fff; box-shadow:var(--shadow-soft);
}
.spool-tech-visual img,
.spool-image-row img{ width:100%; display:block;
}
.spool-image-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1rem;
}
.spool-image-row figcaption{ padding:.85rem 1rem; color:var(--muted); background:#f8fbff;
}
@media(max-width:860px){ .spec-grid, .spool-image-row{grid-template-columns:1fr}
} /* V10.5: Wechselspulenseite sichtbar eingebunden und überarbeitet */
.spool-hero-panel{ padding:1rem; background:linear-gradient(180deg,#ffffff 0%,#eef7ff 100%);
}
.spool-hero-figure{ margin:0; border:1px solid var(--line); border-radius:24px; overflow:hidden; background:#fff; box-shadow:var(--shadow-soft);
}
.spool-hero-figure img{ width:100%; display:block;
}
.spool-image-wide{ margin:1rem 0 0; border:1px solid var(--line); border-radius:24px; overflow:hidden; background:#fff; box-shadow:var(--shadow-soft);
}
.spool-image-wide img{ width:100%; display:block;
}
.spool-image-wide figcaption{ padding:.95rem 1.1rem; color:var(--muted); background:#f8fbff;
}
.spool-crosslink-panel{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.2rem; border:1px solid var(--line); border-radius:26px; background:linear-gradient(135deg,#ffffff 0%,#eef7ff 100%); box-shadow:var(--shadow-soft);
}
.spool-crosslink-panel h2{ margin:.4rem 0 .35rem; color:var(--ink); font-size:clamp(1.45rem,2.2vw,2.1rem); line-height:1.12;
}
.spool-crosslink-panel p{ margin:0; color:var(--text);
}
@media(max-width:820px){ .spool-crosslink-panel{display:block} .spool-crosslink-panel .button{margin-top:1rem}
} /* V10.7: Wechselspulenseite korrekt bereinigt */
.spool-image-wide{ max-width:1100px; margin:1.15rem auto 0; border:1px solid var(--line); border-radius:24px; overflow:hidden; background:#fff; box-shadow:var(--shadow-soft);
}
.spool-image-wide img{ width:100%; max-height:640px; object-fit:contain; background:#f8fbff; display:block;
}
.spool-image-wide figcaption{ padding:.95rem 1.1rem; color:var(--muted); background:#f8fbff;
} /* V10.8: Gewichtsgrafik symmetrisch und reduziert */
.spool-image-wide{ max-width:1120px; margin:1.15rem auto 0;
}
.spool-image-wide img{ width:100%; max-height:560px; object-fit:contain; background:#f8fbff;
} /* V10.9: korrigierte Maßgrafik / anklickbare Grafiken */
.spool-tech-visual a,
.spool-image-wide a{ display:block;
}
.spool-tech-visual a:hover img,
.spool-image-wide a:hover img{ filter:brightness(1.025);
}
.spool-tech-visual figcaption{ padding:.75rem 1rem; color:var(--muted); background:#f8fbff;
}
.spool-tech-visual img{ width:100%; display:block; object-fit:contain;
} /* V10.10: Gewichtsgrafik ohne doppelte Formelzeile */
.spool-image-wide img{ max-height:520px;
} /* V10.11: Maßgrafik ohne Website-Tipp, Außenbreite mit echtem Foto */
.spool-tech-visual figcaption{ display:none;
}