/* princoso – Mobile-Optimierung (für alle Seiten, wird nach den Seiten-Styles geladen) */
picture{ display:contents; }
:root{ color-scheme:only light; }
:where(div[data-h]){ font-weight:bold; }
:where(div[data-h="3"]){ font-size:1.17em; }
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.utility-phone a{ display:inline-flex; align-items:center; gap:6px; color:inherit; text-decoration:none; }

/* ---------- Menü-Knopf + Menü (Smartphone/Tablet) ---------- */
.m-menu-btn{ display:none; width:40px; height:40px; border-radius:9px; border:1.5px solid var(--line, #E3E8F0); background:var(--paper, #fff); color:var(--ink, #101828); align-items:center; justify-content:center; cursor:pointer; padding:0; margin-left:2px; }
.m-menu-btn svg{ width:22px; height:22px; }
.m-nav-overlay{ position:fixed; inset:0; background:rgba(8,20,45,.55); z-index:9998; opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s; }
.m-nav{ position:fixed; top:0; right:0; bottom:0; width:min(340px, 88vw); background:var(--paper, #fff); color:var(--ink, #101828); z-index:9999; transform:translateX(100%); transition:transform .25s ease; display:flex; flex-direction:column; box-shadow:-20px 0 40px -20px rgba(14,42,87,.45); visibility:hidden; }
.m-nav-open .m-nav{ transform:none; visibility:visible; }
.m-nav-open .m-nav-overlay{ opacity:1; visibility:visible; }
.m-nav-open{ overflow:hidden; }
.m-nav-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line, #E3E8F0); }
.m-nav-head img{ height:30px; width:auto; }
.m-nav-close{ width:40px; height:40px; border-radius:9px; border:1.5px solid var(--line, #E3E8F0); background:none; color:inherit; font-size:18px; cursor:pointer; }
.m-nav-body{ overflow-y:auto; padding:8px 0 20px; flex:1; }
.m-nav-body a{ display:flex; align-items:center; justify-content:space-between; padding:14px 20px; font-size:16px; font-weight:600; color:var(--ink, #101828); text-decoration:none; border-bottom:1px solid var(--line, #E3E8F0); }
.m-nav-body a::after{ content:"›"; color:var(--slate, #57657C); font-size:20px; line-height:1; }
.m-nav-body a.is-current{ color:var(--blue-600, #1D4FA6); }
.m-nav-body a.m-sub{ padding-left:34px; font-size:15px; font-weight:500; }
.m-nav-sec{ padding:18px 20px 6px; font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--slate, #57657C); }
.m-nav-contact{ padding:16px 20px; display:flex; flex-direction:column; gap:10px; }
.m-nav-contact a{ display:flex; align-items:center; justify-content:center; gap:8px; padding:12px; border-radius:10px; font-weight:700; font-size:15px; text-decoration:none; border:1.5px solid var(--line, #E3E8F0); color:var(--ink, #101828); }
.m-nav-contact a::after{ content:none !important; }
.m-nav-contact a.m-primary{ background:var(--blue-600, #1D4FA6); border-color:var(--blue-600, #1D4FA6); color:#fff; }

/* ---------- Kaufleiste unten (Produktseiten) ---------- */
.m-buybar{ display:none; }

/* 05.10.2026: bis 980px statt 900px - zwischen 901 und ~960px passte die Desktop-Navigation nicht (Warenkorb-Symbol ragte rechts raus) */
@media (max-width:980px){
  .m-menu-btn{ display:inline-flex; }
  /* Infoleiste oben: eine Zeile – links wechselnde Vorteile, rechts Telefon */
  .utility .wrap{ flex-wrap:nowrap !important; justify-content:space-between !important; padding-top:7px !important; padding-bottom:7px !important; gap:10px !important; }
  .utility-items{ position:relative; flex:1 1 auto; min-width:0; height:18px; display:block !important; gap:0 !important; overflow:hidden; }
  .utility-items span{ position:absolute; left:0; top:0; right:0; display:flex !important; align-items:center; gap:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:12px; line-height:18px; opacity:0; transform:translateY(6px); transition:opacity .35s ease, transform .35s ease; }
  .utility-items span.on{ opacity:1; transform:none; }
  .utility-items span:first-child{ opacity:1; transform:none; }
  .utility-items.rot span:first-child:not(.on){ opacity:0; transform:translateY(6px); }
  .utility-items svg{ flex:0 0 auto; width:13px; height:13px; }
  .utility-phone{ flex:0 0 auto; font-size:12.5px; white-space:nowrap; }
  .utility-phone a{ color:inherit; text-decoration:none; }

  nav.main-nav{ display:none !important; }
}

@media (max-width:960px){
  .m-buybar{ position:fixed; left:0; right:0; bottom:0; z-index:9990; display:flex; align-items:center; gap:12px; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:var(--paper, #fff); border-top:1px solid var(--line, #E3E8F0); box-shadow:0 -12px 28px -18px rgba(14,42,87,.45); transform:translateY(110%); transition:transform .2s ease; }
  .m-buybar.show{ transform:none; }
  .m-buybar .mb-price{ flex:1; min-width:0; line-height:1.2; }
  .m-buybar .mb-price small{ white-space:nowrap; display:block; font-size:11.5px; color:var(--slate, #57657C); font-weight:600; }
  .m-buybar .mb-price b{ font-family:"Archivo",sans-serif; font-size:20px; font-weight:800; color:var(--ink, #101828); }
  .m-buybar button{ flex:0 0 auto; border:none; border-radius:10px; background:var(--blue-600, #1D4FA6); color:#fff; font-weight:700; font-size:15px; padding:13px 18px; cursor:pointer; font-family:inherit; }
  body.has-buybar{ padding-bottom:76px; }
  body.has-buybar #pc-a11y-btn{ bottom:88px !important; }
}

/* ---------- Allgemein: Smartphone ---------- */
@media (max-width:760px){
  html, body{ overflow-x:clip; }
  body{ margin:0 !important; }
  [class*="-grid"] > *, [class*="-layout"] > *{ min-width:0; }
  .cart-layout > *, .checkout-layout > *, .configurator > *, .request-layout > *, .auth-grid > *{ min-width:0; }
  /* Kopfzeile: Logo links, vier gleich große Symbole rechts */
  header.site{ position:sticky; top:0; z-index:500; background:var(--paper, #fff); box-shadow:0 1px 0 var(--line, #E3E8F0); }
  .header-row{ padding:8px 0 !important; gap:8px !important; min-height:56px; }
  .logo{ flex:0 1 auto; min-width:0; }
  .logo img{ height:28px !important; width:auto; max-width:100%; }
  .header-actions{ gap:0 !important; flex:0 0 auto; margin-right:-6px; }
  .header-actions .icon-btn, .m-menu-btn{ width:42px !important; height:42px !important; border:none !important; border-radius:10px !important; background:none !important; display:inline-flex; align-items:center; justify-content:center; color:var(--ink, #101828); }
  .header-actions .icon-btn svg, .m-menu-btn svg{ width:22px !important; height:22px !important; }
  .header-actions .icon-btn:active, .m-menu-btn:active{ background:var(--blue-100, #E7EEFB) !important; }
  .cart-count{ top:4px !important; right:3px !important; }
  .icon-btn.is-logged-in::after{ right:7px !important; top:7px !important; }

  /* Lange Wörter (z. B. in AGB/Datenschutz) nicht aus dem Bildschirm laufen lassen */
  h1, h2, h3, h4{ overflow-wrap:break-word; hyphens:auto; -webkit-hyphens:auto; }
  p, li, td, label, .crumb{ overflow-wrap:break-word; }

  .crumb{ padding-top:12px !important; font-size:12.5px !important; line-height:1.6; }
  .crumb span{ margin:0 4px !important; }

  /* Beschnittmarken-Ecken etwas näher an die Box, damit nichts übersteht */
  .crop-mark::before, .crop-mark::after{ top:-6px !important; }
  .crop-mark::before, .crop-mark .cm-bl{ left:-6px !important; }
  .crop-mark::after, .crop-mark .cm-br{ right:-6px !important; }
  .crop-mark .cm-bl, .crop-mark .cm-br{ bottom:-6px !important; }

  /* Tabellen scrollbar statt abgeschnitten */
  table{ max-width:100%; }
  .k-table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }

  /* Footer */
  footer{ padding-top:44px !important; margin-top:64px !important; }
  .footer-grid{ gap:26px 18px !important; padding-bottom:32px !important; }
  .footer-grid > div:first-child{ grid-column:1 / -1; }
  .footer-desc{ max-width:none !important; }
  .footer-grid a{ hyphens:auto; -webkit-hyphens:auto; overflow-wrap:normal; word-break:normal; }
  .footer-grid li{ margin-bottom:2px; }
  .footer-bottom{ flex-direction:column-reverse; align-items:stretch; gap:16px !important; padding:20px 0 76px !important; font-size:12.5px !important; }
  .footer-bottom > span{ display:block; line-height:1.7; opacity:.85; }
  .footer-bottom > div{ display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid rgba(255,255,255,.12); border-left:1px solid rgba(255,255,255,.12); }
  .footer-bottom > div a{ margin:0 !important; padding:11px 12px; font-size:13px; font-weight:600; border-right:1px solid rgba(255,255,255,.12); border-bottom:1px solid rgba(255,255,255,.12); text-decoration:none !important; }
  .footer-bottom > div a:last-child:nth-child(odd){ grid-column:1 / -1; }

  /* Barrierefreiheits-Knopf kleiner und weiter in die Ecke */
  #pc-a11y-btn{ width:42px !important; height:42px !important; left:12px !important; bottom:12px !important; border-radius:12px !important; font-size:14px !important; }

  /* Cookie-Hinweis: kein leerer Riesenblock */
  .cookie-banner-text{ flex:0 0 auto !important; }
  .cookie-banner-card{ gap:14px !important; }
  .cookie-banner-actions .cb-settings{ flex:0 0 100% !important; order:3; padding:6px !important; }
}

@media (max-width:600px){
  .wrap{ padding-left:16px !important; padding-right:16px !important; }
  /* iOS zoomt bei Eingabefeldern unter 16px – verhindern */
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea{ font-size:16px !important; }

  .page-head h1{ font-size:26px !important; line-height:1.2 !important; }
  .page-head p{ font-size:14.5px !important; }

  /* Konfigurator: Auswahl volle Breite, Info-Punkt neben die Überschrift */
  .config-row{ display:grid !important; grid-template-columns:1fr auto; align-items:center; gap:8px 10px !important; }
  .config-row > label{ grid-column:1; grid-row:1; }
  .config-row > .info-dot{ grid-column:2; grid-row:1; position:static !important; margin:0 !important; }
  .config-row > :not(label):not(.info-dot){ grid-column:1 / -1; width:100%; }

  /* Formular-Karten: etwas weniger Innenabstand */
  .form-card{ padding-left:18px !important; padding-right:18px !important; }
  .submit-row .btn-primary{ width:100%; justify-content:center; }

  .variant-grid{ grid-template-columns:1fr !important; }

  /* Warenkorb-Positionen */
  .cart-item{ gap:12px !important; padding:16px !important; }
  .ci-thumb{ width:44px !important; height:44px !important; }
  .ci-thumb svg{ width:20px !important; height:20px !important; }
  .ci-upload{ flex-wrap:wrap; margin-left:-56px; }
  .ci-upload-text{ flex:1 1 calc(100% - 40px) !important; }
  .ci-upload label.btn-outline{ flex:1 1 100%; text-align:center; }
  .ci-uploaded{ margin-left:-56px; }
  .ci-foot{ gap:10px !important; }

  /* Startseite: Angebots-Ticket ohne Abriss-Stummel, Feld volle Breite */
  .ticket-stub{ display:none !important; }
  .ticket-main{ padding:18px !important; }
  .ticket-field input{ min-width:0; flex:1; }
}

/* ---------- Produkte-Mega-Menü (alle Seiten) ---------- */
.nav-dropdown{ position:relative; }
.nav-dropdown-trigger{ display:flex; align-items:center; gap:6px; font-family:inherit; background:none; border:none; border-bottom:2px solid transparent; cursor:pointer; padding:6px 2px; font-size:14.5px; font-weight:600; color:var(--ink); white-space:nowrap; }
.nav-dropdown-trigger:hover, .nav-dropdown.open .nav-dropdown-trigger{ border-color:var(--blue-500); color:var(--blue-600); }
.nav-caret{ width:14px; height:14px; transition:transform .15s ease; }
.nav-dropdown.open .nav-caret{ transform:rotate(180deg); }
.mega-menu{ position:fixed; left:50%; transform:translateX(-50%); width:min(980px, 92vw); max-height:calc(100vh - 90px); overflow-y:auto; background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:0 30px 60px -24px rgba(14,42,87,.35); padding:18px 24px 10px; z-index:500; opacity:0; visibility:hidden; translate:0 8px; transition:opacity .16s ease, translate .16s ease, visibility .16s; }
.nav-dropdown.open .mega-menu{ opacity:1; visibility:visible; translate:0 0; }
.mega-menu-inner{ display:grid; grid-template-columns:repeat(5, 1fr); gap:14px 22px; }
.mega-col{ display:flex; flex-direction:column; }
.mega-col div[data-h="4"]{ font-family:"Archivo","Public Sans",sans-serif; font-size:11.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:var(--blue-600); margin:0 0 6px; }
nav.main-nav .mega-menu a{ white-space:normal; border-bottom:none; }
nav.main-nav .mega-col a{ font-size:13px; font-weight:500; color:var(--slate); padding:2px 0; line-height:1.35; }
nav.main-nav .mega-col a:hover{ color:var(--blue-600); }
.mega-cta-card{ background:var(--blue-100); border:1px solid var(--blue-100); border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:4px; height:100%; }
.mega-cta-card svg{ width:20px; height:20px; color:var(--blue-600); }
.mega-cta-card div[data-h="4"]{ font-family:"Archivo","Public Sans",sans-serif; font-size:13px; font-weight:800; color:var(--ink); margin:6px 0 0; text-transform:none; letter-spacing:0; }
.mega-cta-card p{ font-size:12px; color:var(--slate); line-height:1.4; margin:0; flex:1; }
nav.main-nav .mega-cta-card .btn-primary{ display:inline-flex; align-items:center; justify-content:center; background:var(--blue-600); color:#fff; font-size:12.5px; font-weight:700; padding:8px 12px; border-radius:8px; text-decoration:none; margin-top:6px; }
nav.main-nav .mega-cta-card .btn-primary:hover{ background:var(--blue-700); }
.mega-menu-footer{ border-top:1px solid var(--line); margin-top:12px; padding-top:9px; text-align:center; }
nav.main-nav .mega-menu-footer a{ font-size:13px; font-weight:700; color:var(--blue-600); padding:0; }
nav.main-nav .mega-menu-footer a:hover{ text-decoration:underline; }
@media (max-width:1200px){ .nav-dropdown-trigger{ font-size:14px; } }
@media (max-width:1100px){ .nav-dropdown-trigger{ font-size:13.5px; } .mega-menu-inner{ grid-template-columns:repeat(3,1fr); } .mega-col-cta{ grid-column:span 3; } }
@media (max-width:1000px){ .nav-dropdown-trigger{ font-size:13px; } }

/* ---------- Footer-Unterzeile (Desktop): zwei Zeilen, mittig ---------- */
@media (min-width:761px){
  .footer-bottom{ flex-direction:column !important; align-items:center !important; justify-content:center !important; text-align:center; gap:10px !important; }
  .footer-bottom > div{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 22px; }
  .footer-bottom > div a{ margin-left:0 !important; white-space:nowrap; }
}

/* ---------- 05.10.2026: kein horizontales Scrollen auf Smartphone/Tablet ---------- */
@media (max-width:980px){
  /* Schnittmarken an Karten (Kasse, Login, Konto, Angebot einloesen, Visitenkarten ...) nicht ueber den Rand */
  .crop-mark::before, .crop-mark .cm-bl{ left:0 !important; }
  .crop-mark::after, .crop-mark .cm-br{ right:0 !important; }
  img, video, iframe{ max-width:100%; }
}
@media (max-width:760px){
  /* Formularfelder: lange Auswahl-Texte (z. B. Widerruf) duerfen das Feld nicht breiter machen */
  .field, .field-row > *, .form-grid > *, .form-row > *{ min-width:0; }
  select, input, textarea{ max-width:100%; }
  /* lange Woerter (z. B. "Papiergewichtsrechner" im Footer bei 320px) notfalls umbrechen */
  .footer-grid a, .footer-grid li{ overflow-wrap:break-word; }
}