/* Web target only. Loaded instead of messe-fixed.css; every rule is also scoped. */
html:has(body[data-mode="web-vorschau"]) { height:auto; }
body[data-mode="web-vorschau"] { height:auto; min-height:100dvh; }
body[data-mode="web-vorschau"] .app-shell {
  height:auto; min-height:100dvh; width:100%; max-width:none;
  grid-template-rows:auto 1fr 10px auto;
}
body[data-mode="web-vorschau"] .app-header {
  width:100%; max-width:1440px; height:auto; padding:48px 40px 28px !important;
}
body[data-mode="web-vorschau"] .app-header h1 { font-size:clamp(38px,5vw,68px); line-height:1.05; }
body[data-mode="web-vorschau"] .language-switch { top:32px; right:max(32px,calc((100vw - 1360px)/2)); }
/* Keep the original line angle and spacing; crop the tall artwork rather than
   compressing it into the header. Both layers are anchored to the page top. */
body[data-mode="web-vorschau"] .app-background-lines,
body[data-mode="web-vorschau"] .app-background-single {
  inset:0 0 auto; height:clamp(380px,48vw,700px);
}
body[data-mode="web-vorschau"] .app-background-lines {
  background-size:clamp(760px,83.4vw,1600px) auto;
  background-position:right -160px;
  mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);
}
body[data-mode="web-vorschau"] .app-background-single {
  background-size:clamp(320px,52vw,860px) auto; background-position:right top;
}
body[data-mode="web-vorschau"] .app-main {
  width:100%; max-width:1440px; margin:0 auto; padding:28px 40px 64px;
  grid-template-columns:250px minmax(0,1fr); align-items:start; gap:24px;
}
body[data-mode="web-vorschau"] .app-main.is-home { grid-template-columns:minmax(0,1fr); }
body[data-mode="web-vorschau"] .app-sidebar { height:auto; overflow:visible; padding:20px 0; }
body[data-mode="web-vorschau"] .app-sidebar nav a { font-size:19px; padding:18px 20px; overflow-wrap:anywhere; }
body[data-mode="web-vorschau"] .page-content { height:auto; overflow:visible; padding:28px; scrollbar-gutter:auto; }
body[data-mode="web-vorschau"] .is-home .page-content { padding:0; }
body[data-mode="web-vorschau"] .tile-grid {
  height:auto; grid-template-rows:none; grid-auto-rows:auto; align-content:start; justify-content:start; gap:20px;
}
body[data-mode="web-vorschau"] .home-grid,
body[data-mode="web-vorschau"] .category-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
body[data-mode="web-vorschau"] .category-grid.two-columns,
body[data-mode="web-vorschau"] .world-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
body[data-mode="web-vorschau"] .showcase-tile { min-width:0; padding:16px; justify-content:flex-start; }
body[data-mode="web-vorschau"] .showcase-tile img { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:contain; }
body[data-mode="web-vorschau"] .showcase-tile>span:not(.tile-arrow) {
  font-size:clamp(18px,1.7vw,24px); line-height:1.25; padding:14px 4px 4px;
  overflow-wrap:anywhere; hyphens:auto; margin-top:auto;
}
body[data-mode="web-vorschau"] .world-grid .showcase-tile { padding:0; }
body[data-mode="web-vorschau"] .world-grid .showcase-tile img { aspect-ratio:16/10; object-fit:cover; }
body[data-mode="web-vorschau"] .world-grid .showcase-tile>span:not(.tile-arrow) { padding:18px 14px; }
body[data-mode="web-vorschau"] .video-tile { min-height:200px; justify-content:center; }
body[data-mode="web-vorschau"] .video-tile>span:not(.tile-arrow) { margin:auto; }
body[data-mode="web-vorschau"] .entry-tile { animation-name:web-tile-enter; }
@keyframes web-tile-enter { from { opacity:0; transform:scale(.985); } to { opacity:1; transform:none; } }
body[data-mode="web-vorschau"] .app-breadcrumb { font-size:17px; overflow-wrap:anywhere; }
body[data-mode="web-vorschau"] .app-breadcrumb>* { min-width:0; max-width:100%; }
body[data-mode="web-vorschau"] .product-heading h1,
body[data-mode="web-vorschau"] .section-title { font-size:clamp(28px,3vw,40px); overflow-wrap:anywhere; hyphens:auto; }
body[data-mode="web-vorschau"] .product-heading p { font-size:22px; overflow-wrap:anywhere; }
body[data-mode="web-vorschau"] .product-hero { width:100%; height:auto; max-height:none; object-fit:contain; }
body[data-mode="web-vorschau"] .imported-content { font-size:18px; line-height:1.55; }
body[data-mode="web-vorschau"] .imported-content .row { margin-left:0; margin-right:0; }
body[data-mode="web-vorschau"] .btn,
body[data-mode="web-vorschau"] .accordion-button { white-space:normal; overflow-wrap:anywhere; min-width:0; max-width:100%; }
body[data-mode="web-vorschau"] .category-legend { margin-top:24px; padding:16px; border-left:4px solid var(--mauth-blue); background:#f3f7fb; }
body[data-mode="web-vorschau"] .app-footer { width:100%; max-width:none; margin-inline:0; height:auto; padding:36px !important; }
body[data-mode="web-vorschau"] .app-footer img { width:min(360px,80%); }
body[data-mode="web-vorschau"] .web-navigation { display:none; }
body[data-mode="web-vorschau"] .modal-title { min-width:0; overflow-wrap:anywhere; }
body[data-mode="web-vorschau"] .modal .btn-close { flex-shrink:0; }
body[data-mode="web-vorschau"] .modal-body { overflow-wrap:anywhere; }
body[data-mode="web-vorschau"] .viewer-variants { flex-wrap:wrap; }
body[data-mode="web-vorschau"] .viewer-variants select { max-width:100%; min-width:0; }
@media (max-width:1100px) {
  body[data-mode="web-vorschau"] .app-main { grid-template-columns:220px minmax(0,1fr); padding:24px 24px 48px; gap:20px; }
  body[data-mode="web-vorschau"] .page-content { padding:22px; }
  body[data-mode="web-vorschau"] .category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:991.98px) {
  body[data-mode="web-vorschau"] .app-background-lines { background-size:900px auto; background-position:left 28vw top -120px; }
  body[data-mode="web-vorschau"] .app-main { grid-template-columns:minmax(0,1fr); }
  body[data-mode="web-vorschau"] .app-sidebar { display:none; }
  body[data-mode="web-vorschau"] .web-navigation { display:block; min-width:0; }
  body[data-mode="web-vorschau"] .web-menu-toggle { display:flex; align-items:center; gap:12px; width:100%; text-align:left; }
  body[data-mode="web-vorschau"] #web-menu { margin-top:8px; padding:8px; background:white; border:1px solid var(--line); border-radius:12px; }
  body[data-mode="web-vorschau"] #web-menu a,
  body[data-mode="web-vorschau"] #web-menu button { display:block; width:100%; padding:14px 16px; min-height:48px; border:0; border-radius:6px; font:600 18px/1.35 'Mada',Arial,sans-serif; text-align:left; color:var(--ink); background:white; white-space:normal; overflow-wrap:anywhere; }
  body[data-mode="web-vorschau"] #web-menu [aria-current] { background:var(--mauth-blue); color:white; }
  body[data-mode="web-vorschau"] .web-menu-actions { border-top:1px solid var(--line); margin-top:8px; padding-top:8px; }
  body[data-mode="web-vorschau"] .home-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:575.98px) {
  body[data-mode="web-vorschau"] .app-header { padding:76px 20px 20px !important; }
  body[data-mode="web-vorschau"] .app-header h1 { font-size:42px; }
  body[data-mode="web-vorschau"] .language-switch { top:16px; right:20px; }
  body[data-mode="web-vorschau"] .app-background-lines { background-size:660px auto; background-position:left 28vw top -80px; }
  body[data-mode="web-vorschau"] .app-background-single { background-size:80%; background-position:left 40vw top -8px; }
  body[data-mode="web-vorschau"] .app-main { padding:16px 16px 32px; gap:16px; }
  body[data-mode="web-vorschau"] .page-content { padding:18px; }
  body[data-mode="web-vorschau"] .tile-grid { gap:12px; }
  body[data-mode="web-vorschau"] .showcase-tile { padding:10px; }
  body[data-mode="web-vorschau"] .showcase-tile>span:not(.tile-arrow) { font-size:18px; }
  body[data-mode="web-vorschau"] .world-grid,
  body[data-mode="web-vorschau"] .media-grid { grid-template-columns:minmax(0,1fr); }
  body[data-mode="web-vorschau"] .imported-content .row>[class*="col-"] { width:100%; }
  body[data-mode="web-vorschau"] .modal-body .row>[class*="col-"] { width:100%; }
  body[data-mode="web-vorschau"] .imported-content h2 { font-size:25px; }
  body[data-mode="web-vorschau"] .product-actions .btn { width:100%; }
  body[data-mode="web-vorschau"] .contact-card { grid-template-columns:72px minmax(0,1fr); gap:12px; }
  body[data-mode="web-vorschau"] .contact-card img { height:96px; }
  body[data-mode="web-vorschau"] .modal-header,
  body[data-mode="web-vorschau"] .modal-footer { padding:14px 16px; }
  body[data-mode="web-vorschau"] .modal-body model-viewer { min-height:220px; height:45dvh; }
  body[data-mode="web-vorschau"][data-page="vhm_verzahnung"] .accordion-body .col-8 { font-size:16px; line-height:1.5; }
  body[data-mode="web-vorschau"][data-page="vhm_verzahnung"] .accordion-body .col-10 { display:grid; gap:12px; }
}