/* gurado — zentrale Mobile-/Tablet-Schicht
   Wird von gurado-nav.js als letztes Stylesheet in <head> eingehängt → gewinnt gegen seitenweise Inline-Styles.
   Breakpoints: 1024 (Tablet) · 768 (Mobile) · 400 (kleines Mobile) */

/* ── TABLET + MOBILE ≤1024, plus touch tablets in landscape up to 1366 (iPad) ── */
@media (max-width:1024px),(hover:none) and (pointer:coarse) and (max-width:1366px){
  /* Navigation: Burger statt Desktop-Menü */
  .hdr-topbar{display:none !important;}
  html body .hdr,html body .hdr.topbar-gone{top:0 !important;margin-top:0 !important;transition:transform .38s cubic-bezier(.4,0,.2,1) !important;}
  body{padding-top:86px !important;}
  .nav .nav-item,.nav a:not(.btn),.lang-toggle,.hdr-actions .hdr-cta{display:none !important;}
  .hdr-in>.nav,.hdr-in>.hdr-actions{display:none !important;}
  .mega-panel,.mini-panel{display:none !important;}
  .hdr-in{grid-template-columns:1fr auto !important;height:64px;padding:0 10px 0 22px !important;margin:10px auto 6px;}
  .brand{display:inline-flex;align-items:center;min-height:44px;}
  .brand-mark{height:36px;}
  .hdr-ham{display:flex !important;flex-direction:column;align-items:center;justify-content:center;gap:5px;
    width:44px !important;height:44px !important;border-radius:11px !important;background:var(--cyan) !important;
    border:0 !important;margin-left:0 !important;transform:none !important;padding:0;cursor:pointer;flex-shrink:0;}
  .hdr-ham:hover{filter:brightness(1.06);transform:none !important;}
  .hdr-ham span{display:block;width:18px !important;height:2px;background:#fff !important;border-radius:999px;
    transition:transform .26s cubic-bezier(.4,0,.2,1),opacity .2s;}
  .hdr-ham.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .hdr-ham.open span:nth-child(2){opacity:0;}
  .hdr-ham.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  /* Vollbild-Overlay */
  .ham-panel{position:fixed !important;inset:0 !important;z-index:48;background:var(--surface);
    display:flex;flex-direction:column;padding:96px 0 calc(28px + env(safe-area-inset-bottom)) !important;
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
  .ham-nav{padding:0 clamp(20px,5vw,48px) !important;max-width:720px;width:100%;margin:0 auto;}
  .ham-nav-item{min-height:60px;padding:14px 0 !important;font-size:clamp(1.3rem,3.4vw,1.6rem) !important;}
  .ham-acc-btn{min-height:60px;}
  .ham-chev{display:grid;place-items:center;width:32px;height:32px;}
  .ham-sub-item{min-height:52px;justify-content:center;padding:10px 14px !important;border-radius:10px;}
  .ham-sub-cat{font-size:1.05rem !important;}
  .ham-sub-title{font-size:.86rem !important;}
  /* Ebene 3 (Funktionen / Vorteile / Anwendungen): eingerückte, leisere Liste */
  .ham-grp{margin:14px 0 0;padding:16px 14px 6px;border-top:1px solid var(--line);font-family:var(--head);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
  .ham-links{display:flex;flex-direction:column;padding:0 0 4px;}
  .ham-link{display:flex;align-items:center;min-height:44px;padding:6px 14px;border-radius:10px;font-weight:500;font-size:.95rem;color:var(--text);text-decoration:none;}
  .ham-link:hover{background:var(--bg,#f9f9f9);color:var(--ink);}
  .ham-link[aria-current="page"]{background:#e2f3fa;color:#1b97bd;font-weight:600;}
  /* Support-Links + Kontaktblock */
  .ham-crow{display:flex;align-items:center;gap:14px;min-height:56px;padding:8px 14px;border-radius:12px;text-decoration:none;color:var(--ink);}
  .ham-crow:hover{background:var(--bg,#f9f9f9);}
  .ham-crow-txt{display:flex;flex-direction:column;gap:1px;min-width:0;}
  .ham-crow-lab{font-size:.78rem;font-weight:600;color:var(--muted);}
  .ham-crow-val{font-family:var(--head);font-weight:700;font-size:1.02rem;color:var(--ink);}
  .ham-acc-body .ham-crow{margin:0 0 2px;}
  .ham-contact{padding:8px clamp(20px,5vw,48px) 0;max-width:720px;width:100%;margin:8px auto 0;}
  .ham-contact .ham-grp{border-top:1px solid var(--line);margin:0;}
  .ham-contact-note{margin:6px 14px 0;font-size:.86rem;color:var(--muted);}
  .ham-ctas{padding:24px clamp(20px,5vw,48px) 0 !important;max-width:720px;width:100%;margin:0 auto;}
  .ham-ctas .btn{min-height:52px;}
  .ham-ctas .btn-primary{order:-1;}
  .ham-lang{padding:16px 24px 0 !important;gap:4px !important;}
  .ham-lang-btn{min-width:48px;min-height:44px;font-size:.95rem !important;border-radius:10px !important;}
  body.ham-open{overflow:hidden;}

  /* Hover-Inhalte auf Touch: sichtbar */
  .tc-cta{opacity:1 !important;}

  /* Seitenspezifische Überläufe (Audit) */
  .pr-tblwrap{position:relative;overflow-x:auto !important;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;}
  .eh-intro-side{width:100%;min-width:0;}
  .eh-intro-cta{flex-wrap:wrap;}
  .ogs-way>*{min-width:0;}
  /* Deko, die Inhalt überlagert */
  .faq .bx{display:none !important;}
}
/* Kontakt-CTA (.kt-a) ≤1024: Portrait als Avatar-Zeile über der Headline */
@media (max-width:1024px){
  html body .kt-a-in{grid-template-columns:1fr !important;gap:clamp(22px,4vw,32px) !important;}
  html body .kt-a-figure{display:flex !important;align-items:center;gap:20px;padding-bottom:0 !important;}
  html body .kt-a-photo{flex:none;width:clamp(112px,18vw,150px) !important;height:clamp(112px,18vw,150px) !important;aspect-ratio:1 !important;
    border-radius:50% !important;border:2px solid rgba(255,255,255,.5) !important;box-shadow:0 10px 24px -10px rgba(0,0,0,.45) !important;}
  html body .kt-a-photo img{object-position:50% 18% !important;}
  html body .kt-a-person{position:static !important;padding:0 !important;background:none !important;border:0 !important;
    box-shadow:none !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;}
  html body .kt-a-person::before{display:none !important;}
  html body .kt-a-person{flex:1;min-width:0;}
  html body .kt-a-person-name{font-size:1.2rem !important;}
  html body .kt-a-val{white-space:nowrap;}
  html body .kt-a-person-role{white-space:normal;overflow-wrap:break-word;}
}
@media (max-width:768px){
  html body .kt-a .wrap{width:calc(100% - 32px) !important;}
  html body .kt-a-rows{flex-direction:column;}
  html body .kt-a-row{width:100%;}
}
/* Hochkant-Produktkarten (.tcard) ≤1024: Foto oben, Text-Fläche darunter – nichts wird abgeschnitten */
@media (max-width:1024px){
  html body .tcard{min-height:0 !important;flex-grow:0 !important;}
  html body .tcard .tc-photo{position:relative !important;inset:auto !important;aspect-ratio:4/3.6;flex:none;overflow:hidden !important;}
  html body .tcard .tc-glass{position:relative !important;top:auto !important;bottom:auto !important;flex:1;
    padding:22px 18px 26px !important;background:var(--surface) !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;
    border-top:1px solid var(--line) !important;overflow:visible !important;justify-content:flex-start !important;}
  html body .tcard .tc-cta{display:none !important;}
  html body .tcard .tc-pill{font-size:clamp(1rem,2vw,1.3rem) !important;padding:7px 12px !important;max-width:100%;white-space:nowrap;text-align:center;letter-spacing:-.035em !important;}
  html body .tcard .tc-glass{padding:20px 14px 24px !important;}
  html body .tcard .tc-sub{font-size:clamp(.95rem,1.9vw,1.05rem) !important;}
  html body .tcard .tc-sub{margin-top:14px;}
  /* Referenzen-Slider überlappt sonst das CTA-Band */
  html body .ts-stage{margin-bottom:0 !important;}
  html body section.cta{padding-top:clamp(40px,6vw,64px) !important;}
}
/* Hero mit Foto (.eh-hero-media · Branchen & Funktionen) */
@media (min-width:769px) and (max-width:1024px){
  html body .hero-in:has(>.eh-hero-media){grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr) !important;gap:clamp(24px,3.5vw,40px) !important;
    align-items:center;min-height:0 !important;padding:clamp(24px,4vw,44px) 0 clamp(32px,5vw,56px) !important;}
  html body .hero-in:has(>.eh-hero-media) h1{font-size:clamp(2.3rem,5vw,3rem) !important;margin-top:0 !important;text-wrap:balance;}
  html body .hero-in:has(>.eh-hero-media) .hero-sub{font-size:1.02rem !important;margin-top:16px;}
  html body .hero-in:has(>.eh-hero-media) .hero-cta{flex-direction:column;align-items:stretch;gap:10px;margin-top:24px;max-width:320px;}
  html body .eh-hero-media{margin-top:0 !important;}
  html body .eh-hero-photo{width:100% !important;max-width:none !important;aspect-ratio:4/5 !important;margin:0 !important;}
}
@media (max-width:768px){
  html body .hero-in:has(>.eh-hero-media){gap:28px !important;padding:clamp(20px,5vw,32px) 0 clamp(28px,6vw,44px) !important;}
  html body .eh-hero-media{margin-top:0 !important;}
  html body .eh-hero-photo{width:100% !important;max-width:none !important;aspect-ratio:4/3 !important;margin:0 !important;}
  html body .hero-in:has(>.eh-hero-media) .hero-cta{flex-wrap:wrap;gap:10px;}
}
@media (max-width:1024px){ html body .eh-hero-media .hero-sq{display:none !important;} }
/* Mobile: flacher Fotostreifen ÜBER dem Text */
@media (max-width:768px){
  html body .hero-in:has(>.eh-hero-media){gap:22px !important;padding-top:12px !important;}
  html body .hero-in>.eh-hero-media{order:-1;}
  html body .eh-hero-photo{aspect-ratio:21/9 !important;max-height:180px;border-radius:22px !important;}
  html body .hero-in:has(>.eh-hero-media) h1{margin-top:0 !important;}
}
/* Startseiten-Hero (.hero-vis Collage) */
@media (max-width:1024px){
  html body .hero-in:has(>.hero-vis){gap:clamp(20px,4vw,32px) !important;min-height:0 !important;padding-bottom:clamp(24px,4vw,40px) !important;}
  html body .hero-in>.hero-vis{transform:none !important;margin:0 auto !important;width:min(100%,680px) !important;max-width:none !important;}
  html body .hero-in>.hero-vis .hero-img{width:100% !important;height:auto !important;}
}
@media (max-width:768px){
  html body .hero-in>.hero-vis{width:calc(100% + 16px) !important;margin:0 -8px !important;}
  html body .hero-in>.hero-vis .hero-sq{display:none !important;}
  html body .hero-in:has(>.hero-vis) .hero-cta{flex-wrap:wrap;gap:10px;}
}
/* Gutscheinsystem-Hero: Visual überdeckte auf Tablet/Mobile den Feature-Streifen (margin-bottom:-220px) */
@media (max-width:1024px){
  html body .gs-hero-visual{margin-bottom:0 !important;width:min(100%,720px) !important;}
}
/* Produkt-Heros mit Freisteller-Fotos (Rabatte · Loyalty · Ticketshop): Fotos als Band UNTER dem Text */
@media (max-width:1024px){
  html body .gs-hero:has(>.gs-hero-photo,>.gs-hero-cutout,>.gs-hero-cutout-l){--hp:clamp(230px,40vw,360px);padding-bottom:var(--hp) !important;}
  html body .gs-hero>:is(.gs-hero-photo,.gs-hero-cutout,.gs-hero-cutout-l){position:absolute !important;top:auto !important;bottom:0 !important;
    height:calc(var(--hp) - 12px) !important;width:auto !important;max-width:54% !important;object-fit:contain !important;object-position:bottom !important;
    transform:none !important;margin:0 !important;z-index:1;}
  html body .gs-hero>:is(.gs-hero-photo-l,.gs-hero-cutout-l){left:0 !important;right:auto !important;}
  /* Rabatte: linkes Freisteller-PNG hat viel Leerraum → optisch angleichen */
  html body .gs-hero>img.gs-hero-photo-l{transform:scale(1.28) !important;transform-origin:bottom left;}
  html body .gs-hero>.gs-hero-photo:not(.gs-hero-photo-l),html body .gs-hero>.gs-hero-cutout:not(.gs-hero-cutout-l){right:0 !important;left:auto !important;}
  html body .gs-hero:has(>.gs-hero-photo,>.gs-hero-cutout) .gs-sq{display:none !important;}
  html body .gs-hero>:is(.gs-hero-photo,.gs-hero-cutout,.gs-hero-cutout-l):not(img){display:flex;align-items:flex-end;}
  html body .gs-hero>:is(.gs-hero-photo,.gs-hero-cutout,.gs-hero-cutout-l):not(img) img{height:100% !important;width:auto !important;max-width:none !important;object-fit:contain;display:block;}
}
@media (max-width:768px){
  html body .gs-hero:has(>.gs-hero-photo,>.gs-hero-cutout,>.gs-hero-cutout-l){--hp:clamp(230px,62vw,300px);}
  html body .gs-hero>:is(.gs-hero-photo,.gs-hero-cutout,.gs-hero-cutout-l){max-width:64% !important;}
  html body .gs-hero>img.gs-hero-photo-l{transform:scale(1.5) !important;}
  html body .gs-hero-in{padding-bottom:12px !important;}
  /* Ticketshop (linkes Foto als Container): beide Fotos an den Rand, nicht voreinander */
  html body .gs-hero:has(>div.gs-hero-photo-l){--hp:clamp(180px,44vw,260px);}
  html body .gs-hero:has(>div.gs-hero-photo-l)>:is(.gs-hero-photo-l,.gs-hero-photo-r){width:54% !important;max-width:54% !important;height:var(--hp) !important;}
  html body .gs-hero:has(>div.gs-hero-photo-l)>div.gs-hero-photo-l{overflow:visible;justify-content:flex-start;left:0 !important;}
  html body .gs-hero:has(>div.gs-hero-photo-l)>div.gs-hero-photo-l img{width:100% !important;height:100% !important;object-fit:contain !important;object-position:left bottom !important;transform:scale(1.3);transform-origin:left bottom;}
  html body .gs-hero:has(>div.gs-hero-photo-l)>img.gs-hero-photo-r{object-fit:contain !important;object-position:right bottom !important;right:0 !important;}
}
/* Mobile: Produktkarten als kompakte Zeilen (Foto links, Text rechts) */
@media (max-width:768px){
  html body :is(.mtall,.gs-more-grid):has(>.tcard){grid-template-columns:1fr !important;gap:12px !important;}
  html body .tcard{flex-direction:row !important;align-items:stretch;}
  html body .tcard .tc-photo{aspect-ratio:auto !important;width:38%;min-height:150px;}
  html body .tcard .tc-glass{border-top:0 !important;border-left:1px solid var(--line) !important;align-items:flex-start !important;text-align:left !important;justify-content:center !important;padding:18px 16px !important;}
  html body .tcard .tc-sub{text-align:left !important;margin-top:10px;}
  html body .tcard .tc-pill{font-size:1.1rem !important;}
}
/* Heros, die hinter den Header ragen: an die neue Header-Höhe anpassen (vorher 130/102px) */
@media (max-width:1024px){
  html body :is(.gs-hero,.pr-hero){margin-top:-86px !important;padding-top:calc(86px + clamp(28px,5vw,52px)) !important;}
}
@media (max-width:768px){
  html body :is(.gs-hero,.pr-hero){margin-top:-70px !important;padding-top:calc(70px + clamp(24px,6vw,40px)) !important;}
}
/* Text/Bild-Blöcke: beim Stapeln Bild zuerst, CTA schließt ab */
@media (max-width:1024px){
  html body .gs-widget-in{grid-template-columns:1fr !important;gap:clamp(24px,4vw,36px) !important;}
  html body .gs-widget-in>.gs-widget-vis{order:-1;}
  html body .gs-widget-vis img{max-width:100%;height:auto;}
  html body .gs-widget-copy{text-align:center;display:flex;flex-direction:column;align-items:center;}
  html body .gs-widget-copy .lead{margin-inline:auto;}
  html body .gs-widget-copy :is(.wallet-strip,[class*="-strip"],[class*="-row"]){justify-content:center;align-items:center;}
  html body .gs-widget-copy .wallet-strip{flex-direction:column;}
  html body .gs-widget-copy .wallet-chips{justify-content:center;flex-wrap:wrap;}
  html body .gs-integ-in>:is(.gs-integ-vis,.gs-integ-media,[class*="-vis"]){order:-1;}
}
/* ── Logo-Tab-Raster (.gs-tab-grid) · ALLE Breiten ──────────
   Jede Zelle hat Linie rechts + unten; der äußere Rand ragt 1px über und wird von .gs-tab-card (overflow:hidden) abgeschnitten.
   Dadurch stimmen die Linien bei jeder Spaltenzahl, ohne nth-child-Regeln. */
html body .gs-tab-grid{margin:0 -1px -1px 0;}
html body .gs-tab-grid>.gs-tab-cell{border-right:1px solid rgba(255,255,255,.16) !important;border-bottom:1px solid rgba(255,255,255,.16) !important;}
/* Branchen-Raster einklappbar (Button aus gurado-nav.js) */
.more-toggle{display:none;}
@media (max-width:1024px){
  html body .is-collapsible:not(.is-open)>:nth-child(n+5){display:none !important;}
  html body .is-collapsible>*{grid-column:auto !important;}
  .more-toggle{display:flex;justify-content:center;margin-top:clamp(18px,3vw,26px);}
  .more-toggle .btn{min-height:48px;}
}
/* Stepper (3 Schritte): Tablet 3 nebeneinander, Mobile wischbar */
@media (min-width:769px) and (max-width:1024px){
  html body .stepper[style*="--stepper-cols:3"]{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:16px;}
  html body .stepper[style*="--stepper-cols:3"] .step-thumb::after{display:none;}
}
@media (max-width:768px){
  html body .stepper[style*="--stepper-cols:3"]{display:flex !important;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;margin-inline:min(0px,calc(50% - 50vw));padding:4px max(16px,calc(50vw - 50%)) 14px;scroll-padding-inline:max(16px,calc(50vw - 50%));}
  html body .stepper[style*="--stepper-cols:3"]::-webkit-scrollbar{display:none;}
  html body .stepper[style*="--stepper-cols:3"]>.step{flex:0 0 84%;scroll-snap-align:start;}
  html body .stepper[style*="--stepper-cols:3"] .step-title{flex:1;min-width:0;max-width:none !important;white-space:normal;}
  html body .stepper[style*="--stepper-cols:3"] .step-thumb::after{display:none;}
  html body .gs-stepper-dark .bx{display:none !important;}
}
/* Vorteile/Anwendung: Rollen-Switcher wischbar, Kennzahlen 2×2 */
@media (max-width:768px){
  html body .rl-switch-in{display:flex !important;flex-wrap:nowrap !important;overflow-x:auto;scrollbar-width:none;gap:4px 18px !important;
    justify-content:flex-start !important;margin-inline:min(0px,calc(50% - 50vw));padding-inline:max(16px,calc(50vw - 50%));width:auto !important;}
  html body .rl-switch-in::-webkit-scrollbar{display:none;}
  html body .rl-switch-in>*{flex:0 0 auto;white-space:nowrap;}
  html body .rl-tab{min-height:48px;display:inline-flex;align-items:center;}
  html body .vf-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px !important;}
  html body .vf-stat{padding:16px !important;}
}
/* Preise: Vergleichstabelle passt ohne Querscrollen (Handy + Tablet) */
@media (max-width:1024px){
  html body table.pr-tbl{min-width:0 !important;width:100% !important;table-layout:fixed;font-size:.8rem;}
  html body table.pr-tbl tr>*:first-child{width:36%;padding-left:10px !important;padding-right:6px !important;overflow-wrap:break-word;}
  html body table.pr-tbl tr>*:not(:first-child){padding-left:2px !important;padding-right:2px !important;text-align:center;}
  html body table.pr-tbl .pr-th-tag,html body table.pr-tbl .pr-th-price{display:none !important;}
  html body table.pr-tbl .pr-th-name{font-size:.74rem !important;letter-spacing:-.01em;display:block;}
  html body table.pr-tbl tr:nth-child(2) td:not(:first-child),html body table.pr-tbl tbody tr:first-child td:not(:first-child){font-size:.82rem !important;white-space:nowrap;}
  html body table.pr-tbl tr.pr-grp>*{font-size:.82rem;}
  html body table.pr-tbl .pr-ico{width:16px !important;height:16px !important;}
  html body .pr-tblwrap{overflow-x:visible !important;}
}
/* Einheitlicher Seitenrand auf dem Handy (seitenweise .wrap-Breiten überschreiben) */
@media (max-width:768px){
  html body section .wrap:not(.hdr-in){width:calc(100% - 32px) !important;max-width:none !important;}
  html body .wg-adv-wide{display:flex !important;flex-direction:column;align-items:flex-start !important;}
  /* Tab-Leisten wischbar statt gestapelt */
  html body .fr-tabs{flex-wrap:nowrap !important;overflow-x:auto;scrollbar-width:none;justify-content:flex-start !important;
    margin-inline:min(0px,calc(50% - 50vw));padding-inline:max(16px,calc(50vw - 50%));scroll-padding-inline:16px;}
  html body .fr-tabs::-webkit-scrollbar{display:none;}
  html body .fr-tab{flex:0 0 auto;white-space:nowrap;min-height:44px;}
}
@media (max-width:400px){
  html body section .wrap:not(.hdr-in){width:calc(100% - 28px) !important;}
}
@media (max-width:1024px){ html body .pr-sq{display:none !important;} }
@media (min-width:600px) and (max-width:1024px){
  html body table.pr-tbl{font-size:.9rem;}
  html body table.pr-tbl .pr-th-name{font-size:1rem !important;}
  html body table.pr-tbl .pr-th-price{display:block !important;font-size:.9rem !important;}
}
/* Full-Bleed-Hintergründe (100vw) dürfen kein Querscrollen erzeugen */
@media (max-width:1024px){ html,html body{overflow-x:clip;} }
/* Startseite: Hero → Logoleiste enger, Logoleiste → Module luftiger */
@media (max-width:1024px){
  html body .hero + .logos,html body section.logos{margin-top:clamp(20px,5vw,40px) !important;}
  html body .logos + .modules{padding-top:clamp(56px,11vw,88px) !important;}
}
/* Startseite Bonuskarte-Teaser: Spalte darf nicht breiter als der Bildschirm werden */
@media (max-width:1024px){
  html body .teaser-band{grid-template-columns:minmax(0,1fr) !important;}
  html body .teaser-band>*{min-width:0;max-width:100%;}
  html body .teaser-copy h2{white-space:normal !important;overflow-wrap:break-word;font-size:clamp(1.7rem,6.4vw,2.4rem) !important;}
  html body .bcard-wrap,html body .bcard-wrap img{max-width:100%;}
}
/* Bonuskarte-Teaser Tablet: Handy nach rechts, Deko-Quadrate aus dem Text raus */
@media (min-width:600px) and (max-width:1024px){
  html body .bcard-wrap{justify-self:end;width:min(62%,420px);margin-top:-40px;}
  html body .teaser .bx,html body .teaser-band .deco,html body .teaser-band .deco2{display:none !important;}
}
@media (max-width:599px){ html body .teaser .bx{display:none !important;} }

/* Produkt-Pill (Hochkant-Karten): Schrift wächst nie über die Kartenbreite – alle Breiten */
html body .tc-glass{container-type:inline-size;}
html body .tcard .tc-pill{max-width:calc(100% - 8px);white-space:nowrap;font-size:min(clamp(1.3rem,1.7vw,1.75rem),7.4cqi) !important;}
@media (max-width:1024px){ html body .tcard .tc-pill{font-size:min(clamp(1rem,2vw,1.3rem),7.4cqi) !important;} }
/* Tablet: Header ist eine Pille → Burger rund, gleicher Abstand oben/rechts/unten */
@media (min-width:769px) and (max-width:1024px),(min-width:769px) and (hover:none) and (pointer:coarse) and (max-width:1366px){
  html body .hdr-in{padding-right:10px !important;}
  html body .hdr-ham{border-radius:50% !important;}
}
/* Tablet: 3 Produktkarten nebeneinander statt 2+1 */
@media (max-width:400px){
  html body table.pr-tbl{font-size:12px;}
  html body table.pr-tbl tr>*:first-child{width:32%;padding-left:8px !important;}
  html body table.pr-tbl .pr-th-name{font-size:12px !important;letter-spacing:-.03em;}
  html body table.pr-tbl tr:nth-child(2) td:not(:first-child),html body table.pr-tbl tbody tr:first-child td:not(:first-child){font-size:12px !important;white-space:normal;letter-spacing:-.02em;}
}
@media (min-width:769px) and (max-width:1024px){
  .mtall:has(>:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
}
/* Vorteil-Galerie (.vgal) ≤1024: Karten mit Foto oben, Text darunter – kein Glas-Overlay */
@media (max-width:1024px),(hover:none) and (pointer:coarse) and (max-width:1366px){
  html body .vgal{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;height:auto !important;flex-direction:initial;}
  html body .vgal .vcard{display:flex !important;flex-direction:column;flex:none !important;height:auto !important;min-height:0 !important;
    background:var(--surface) !important;cursor:default;transform:none !important;box-shadow:var(--shadow-s);transition:none;}
  html body .vgal .vcard .vc-photo{position:relative !important;inset:auto !important;display:block;aspect-ratio:16/10;flex:none;opacity:1 !important;overflow:hidden !important;}
  html body .vgal .vcard .vc-photo::after{display:none !important;}
  html body .vgal .vcard .vc-inner{position:static !important;inset:auto !important;width:auto !important;flex:1;
    display:flex !important;flex-direction:column !important;align-items:flex-start !important;justify-content:flex-start !important;
    padding:20px 22px 24px !important;background:none !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;
    border:0 !important;border-radius:0 !important;box-shadow:none !important;}
  html body .vgal .vcard .vc-head{writing-mode:horizontal-tb !important;transform:none !important;position:static !important;white-space:normal !important;
    font-size:clamp(1.15rem,2.4vw,1.35rem) !important;font-weight:700 !important;line-height:1.15 !important;max-width:none !important;color:var(--ink) !important;}
  html body .vgal .vcard .vc-detail{display:flex !important;flex-direction:column;flex:1;gap:18px;max-height:none !important;opacity:1 !important;margin-top:10px !important;max-width:none !important;}
  html body .vgal .vcard .vc-detail>a{margin-top:auto !important;align-self:flex-start;}
  html body .vgal .vcard .vc-short{display:none !important;}
  html body .vgal .vcard .vc-long{display:inline !important;}
  html body .vgal .vcard .vc-arrow{display:none !important;}
}
@media (max-width:768px){
  /* Wischbar: Karten 84 % breit, nächste Karte lugt hervor */
  html body .vgal{display:flex !important;grid-template-columns:none;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;
    margin-inline:min(0px,calc(50% - 50vw));padding:4px max(16px,calc(50vw - 50%)) 18px;scroll-padding-inline:max(16px,calc(50vw - 50%));}
  html body .vgal::-webkit-scrollbar{display:none;}
  html body .vgal .vcard{flex:0 0 84% !important;scroll-snap-align:start;}
  html body .vgal .vcard .vc-photo{aspect-ratio:16/11;}
}

/* ── MOBILE ≤768 ───────────────────────────────────────────────────── */
@media (max-width:768px){
  .hdr-in{height:58px;padding:0 8px 0 16px !important;margin:0 !important;border-radius:0 !important;
    border-left:0;border-right:0;width:100% !important;max-width:100% !important;box-shadow:none;}
  .brand-mark{height:32px;}
  body{padding-top:70px !important;}
  .ham-panel{padding-top:78px !important;}
  .ogs-ways{grid-template-columns:1fr !important;}
  .ogs-ways>.ogs-way{min-width:0;flex-direction:column !important;align-items:flex-start !important;}
  .btn{white-space:normal;text-align:center;max-width:100%;line-height:1.2;}

  /* Mindestschrift 12px */
  .src,.kt-a-lab,.sb-lab,.sb-pill,.sb-url,.sb-bt,.wallet-label,.fr-chip,footer small,.foot small,small{font-size:max(12px,.8em) !important;}
  .src{font-size:12px !important;}

  /* Lange Wörter umbrechen statt überlaufen */
  h1,h2,h3,h4,p,li{overflow-wrap:break-word;}

  /* Touch-Flächen */
  .faq-q{min-height:56px;}
  .ts-dot,.vf-dot,.tdot{position:relative;}
  .ts-dot::after,.vf-dot::after,.tdot::after{content:"";position:absolute;inset:-19px -4px;}
  .foot a,footer a{display:inline-flex;align-items:center;min-height:40px;}
}

/* ── KLEINES MOBILE ≤400 ────────────────────────────────────────────── */
@media (max-width:400px){
  .wrap{width:calc(100% - 28px);}
  .btn{padding-left:20px;padding-right:20px;}
}

/* Mindestschrift + Touch-Flächen auch auf Tablet (Audit 820px) */
@media (max-width:1024px),(hover:none) and (pointer:coarse) and (max-width:1366px){
  .src,.kt-a-lab,.sb-lab,.sb-pill,.sb-url,.sb-bt,.wallet-label,.fr-chip,footer small,.foot small,small{font-size:max(12px,.8em) !important;}
  .src{font-size:12px !important;}
  .faq-q{min-height:56px;}
  .foot a,footer a,.gf a{display:inline-flex;align-items:center;min-height:44px;}
  /* Kleine Tipp-Ziele: unsichtbare Trefffläche vergrößern */
  .gs-slider-dot{position:relative;}
  .gs-slider-dot::after{content:"";position:absolute;inset:-10px;}
  .gs-slider-dot::after{inset:-18px -4px;}
  .fr-start-link{display:inline-flex;align-items:center;min-height:44px;}
  .gs-sc-teaser-eyebrow{font-size:12px !important;}
}

/* Hero-H1 (Modulseiten) auf dem Handy mit der Breite skalieren; farbige Wörter wie "gurado" nie trennen */
@media (max-width:640px){.gs-hero-h1{font-size:clamp(1.85rem,8.6vw,2.9rem);max-width:100%;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;}.gs-hero-h1 .hl{border-radius:10px;}.gs-hero-h1 span:not(.hl){-webkit-hyphens:manual;hyphens:manual;}}

/* Footer deco squares on phones: keep them on the giant wordmark, away from the links */
@media (max-width:768px){
  html body .gf-b .sq{top:auto !important;}
  html body .gf-b .sq[data-d="14"]{right:8% !important;left:auto !important;bottom:64px;}
  html body .gf-b .sq[data-d="22"]{left:6% !important;right:auto !important;top:auto !important;bottom:28px;}
  html body .gf-b .sq[data-d="10"]{left:44% !important;bottom:14px;}
  html body .gf-b .sq[data-d="18"]{left:70% !important;bottom:40px;}
}
/* Slider dots: larger invisible tap area, same look */
@media (max-width:1024px),(hover:none) and (pointer:coarse) and (max-width:1366px){
  html body .blog-dot{position:relative;}
  html body .blog-dot::after{content:"";position:absolute;inset:-16px -6px;}
  html body .vf-dot{position:relative;}
  html body .vf-dot::after{content:"";position:absolute;inset:-19px -4px;}
}
/* Hochkant-Produktkarten, 4er-Reihe 1025–1279: Glas-Panel etwas höher, damit dreizeilige Texte und das Plus hineinpassen */
@media (min-width:1025px) and (max-width:1279px){
  html body .mtall:has(>.tcard:nth-child(4)) .tc-glass{top:62%;}
  html body .mtall:has(>.tcard:nth-child(4)) .tcard:hover .tc-glass{top:calc(62% - 60px);}
}
/* Schnittstellen-Kacheln (.istep), 3er-Raster 769–900: Kachel nur so hoch wie der Inhalt statt quadratisch */
@media (min-width:769px) and (max-width:900px){
  html body .istep{aspect-ratio:auto;}
}
/* Startseiten-Hero, Tablet hochkant 769–920 (Text über dem Bild): Textblock mittig */
@media (min-width:769px) and (max-width:920px){
  html body .hero-in:has(>.hero-vis) .hero-copy{text-align:center;}
  html body .hero-in:has(>.hero-vis) .hero-sub{margin-inline:auto;}
  html body .hero-in:has(>.hero-vis) .hero-cta{justify-content:center;}
}
/* Burger-Button immer rund (vorher auf dem Handy ≤768 eckig mit 11px Radius) */
@media (max-width:1024px),(hover:none) and (pointer:coarse) and (max-width:1366px){
  html body .hdr-ham{border-radius:50% !important;}
}
/* Startseite Bonuskarte-Teaser, Handy ≤599: Handy-Mockup tiefer im Anschnitt (Schnittkante 100px höher) und näher am Button.
   margin-top gleicht den transparenten Rand des 763×728-Bildes aus (object-fit:contain), damit der Abstand bei jeder Breite gleich bleibt.
   pointer-events:none: das Bild lag unsichtbar über dem Button „Bonuskarte entdecken“. */
@media (max-width:599px){
  html body .bcard-wrap img{clip-path:inset(0 0 308px 0) !important;margin-top:calc(.477 * (100vw - 32px) - 361px) !important;margin-bottom:-340px !important;pointer-events:none;}
}
/* Branchen-Slider (.gs-sc): Karten wachsen mit dem Inhalt statt fester Höhe – Teaser-Text und Button liefen sonst an den Rand oder darüber hinaus.
   Mindesthöhe = bisherige feste Höhe, die Karten einer Reihe bleiben gleich hoch (Flex-Stretch). */
html body :is(.gs-sc-card,.gs-sc-teaser){height:auto;min-height:clamp(260px,calc(36vw - 5rem),480px);}
@media (max-width:820px){ html body :is(.gs-sc-card,.gs-sc-teaser){min-height:clamp(220px,calc(75vw - 5rem),400px);} }
/* Blog- und Branchen-Slider (Foto-Karten mit Glasfläche): Glasfläche mindestens so hoch wie Pfeil + Abstände, Titel mittig –
   bei einzeiligen Titeln saß der Pfeil (fest 18px über der Unterkante) sonst an der Oberkante der Glasfläche */
html body .blog-card:has(.has-img) .blog-body,html body .gs-sc-card .gs-sc-body{min-height:78px;justify-content:center;}
/* Wallet-Chips (Apple/Google Wallet) auf dem Handy ≤599: kompakter, damit beide nebeneinander in eine Zeile passen (Startseite + Bonuskarten-Seite) */
@media (max-width:599px){
  html body .wallet-chips{flex-wrap:nowrap;gap:8px;width:100%;}
  html body .wallet-chip{flex:0 1 auto;min-width:0;gap:7px;padding:8px 12px 8px 8px;font-size:.88rem;white-space:nowrap;}
  html body .wallet-chip img{height:24px;}
  html body .gs-widget-copy .wallet-chips{flex-wrap:nowrap;}
}