/* ===== Aus HTML ausgelagerter Style-Block 1 ===== */
/* TYPELOG Worktimer: dezente CTA-Interaktion */
.cta:not(.secondary){
  box-shadow:none !important;
  transition:transform .16s ease, background-color .16s ease, border-color .16s ease;
}
.cta:not(.secondary):hover{
  box-shadow:none !important;
  transform:scale(1.035);
  background-color:#249a35 !important;
  border-color:#249a35 !important;
}
.cta:not(.secondary):active{
  transform:scale(1.015);
}
@media (prefers-reduced-motion:reduce){
  .cta:not(.secondary){
    transition:none;
  }
  .cta:not(.secondary):hover,
  .cta:not(.secondary):active{
    transform:none;
  }
}


/* ===== Aus HTML ausgelagerter Style-Block 2 ===== */
/* Bilder in zweispaltigen Bereichen oben an der jeweiligen Überschrift ausrichten */
.hero-grid,
.problem-grid,
.feature-photo,
.export-grid,
.backup-grid{
  align-items:start !important;
}

.hero-photo,
.problem-grid > .photo-card,
.feature-photo > .photo-card,
.export-grid > .photo-card,
.backup-grid > .photo-card{
  align-self:start !important;
  margin-top:0 !important;
}

.hero-photo .zoom-trigger,
.problem-grid > .photo-card .zoom-trigger,
.feature-photo > .photo-card .zoom-trigger,
.export-grid > .photo-card .zoom-trigger,
.backup-grid > .photo-card .zoom-trigger{
  margin-top:0 !important;
}


/* ===== Aus HTML ausgelagerter Style-Block 3 ===== */
/* Lesbarkeit, Navigation und Buttons */
:root{
  --body-font-size:1rem;
}

body,
p,
li,
td,
th,
summary,
details,
.lead,
.muted,
.point,
.point .muted,
.float-card,
.float-card strong,
.chip,
.eyebrow,
.stat span,
.footer,
.brand small{
  font-size:var(--body-font-size) !important;
  line-height:1.55;
}

.nav a,
.cta,
.timer-button,
.export-tag,
.image-dialog-actions button{
  font-size:1.05rem !important;
  font-weight:700;
}

.topbar .brand img{
  width:120px !important;
  height:120px !important;
  flex:0 0 120px;
  object-fit:contain;
}

.topbar-inner{
  min-height:132px;
}

.brand{
  gap:16px;
}

.brand span{
  font-size:1.12rem;
}

.brand small{
  display:block;
  margin-top:3px;
}

/* Bilddialog: nur Vergrößern/Anpassen, kein separater Öffnen-Link */
.image-dialog-actions{
  justify-content:center;
}

/* Desktop: Text umfließt die Fotos, damit unter Bildern keine Leerräume bleiben */
@media (min-width:901px){
  .problem-grid,
  .feature-photo,
  .export-grid,
  .backup-grid{
    display:block !important;
  }

  .problem-grid::after,
  .feature-photo::after,
  .export-grid::after,
  .backup-grid::after{
    content:"";
    display:block;
    clear:both;
  }

  .problem-grid > .photo-card,
  .export-grid > .photo-card{
    float:left;
    width:46%;
    margin:0 4.5% 1.5rem 0 !important;
  }

  .feature-photo > .photo-card,
  .backup-grid > .photo-card{
    float:right;
    width:46%;
    margin:0 0 1.5rem 4.5% !important;
  }

  .problem-grid > div:not(.photo-card),
  .feature-photo > div:not(.photo-card),
  .export-grid > div:not(.photo-card),
  .backup-grid > div:not(.photo-card){
    display:block;
  }

  .photo-card img,
  .photo-card .zoom-trigger{
    width:100%;
  }
}

/* Mobil bleibt alles sauber untereinander */
@media (max-width:900px){
  .topbar .brand img{
    width:72px !important;
    height:72px !important;
    flex-basis:72px;
  }
  .topbar-inner{
    min-height:auto;
  }
}


/* ===== Aus HTML ausgelagerter Style-Block 4 ===== */
/* Lesbarkeit korrigiert: kleine Texte deutlich größer */
body{
  font-size:18px !important;
}

p,
li,
td,
th,
details p,
.faq p,
.lead,
.muted,
.point,
.point .muted,
.callout,
.stat span,
.footer,
.float-card,
.float-card strong{
  font-size:18px !important;
  line-height:1.6 !important;
}

/* FAQ bewusst etwas größer und luftiger */
.faq summary{
  font-size:20px !important;
  line-height:1.45 !important;
  font-weight:800 !important;
}
.faq details p{
  font-size:18px !important;
  line-height:1.65 !important;
}

/* kleine Labels nicht mehr winzig */
.eyebrow,
.chip,
.export-tag,
.brand small{
  font-size:16px !important;
  line-height:1.4 !important;
}

/* Fließtexte nutzen dieselbe verfügbare Breite wie die Überschriften */
.lead,
.center .lead,
.section p,
.feature-photo p,
.export-grid p,
.backup-grid p,
.problem-grid p,
.final-box p{
  max-width:none !important;
  width:auto !important;
}

/* Menü und Buttons größer */
.nav a{
  font-size:18px !important;
}
.cta,
.timer-button,
.image-dialog-actions button{
  font-size:18px !important;
  font-weight:700 !important;
}

/* Deutlicher, aber dezenter Hover für alle klickbaren Buttons */
.cta,
.timer-button{
  box-shadow:none !important;
  cursor:pointer !important;
  transform:scale(1);
  transform-origin:center;
  transition:
    transform .18s ease,
    background-color .18s ease,
    border-color .18s ease,
    filter .18s ease !important;
}

.cta:not(.secondary):hover,
.cta:not(.secondary):focus-visible{
  transform:scale(1.06) !important;
  background:#1f8f31 !important;
  background-color:#1f8f31 !important;
  border-color:#1f8f31 !important;
  filter:brightness(.97);
}

.cta.secondary:hover,
.cta.secondary:focus-visible{
  transform:scale(1.06) !important;
  background:#e9eef5 !important;
  border-color:#aebdcd !important;
}

.timer-button.start:hover,
.timer-button.start:focus-visible{
  transform:scale(1.06) !important;
  background:#1f8f31 !important;
  background-color:#1f8f31 !important;
}

.timer-button.pause:hover,
.timer-button.pause:focus-visible{
  transform:scale(1.06) !important;
  filter:brightness(.90);
}

.timer-button.end:hover,
.timer-button.end:focus-visible{
  transform:scale(1.06) !important;
  filter:brightness(.90);
}

@media (prefers-reduced-motion:reduce){
  .cta,
  .timer-button{
    transition:none !important;
  }
  .cta:hover,
  .cta:focus-visible,
  .timer-button:hover,
  .timer-button:focus-visible{
    transform:none !important;
  }
}


/* ===== Aus HTML ausgelagerter Style-Block 5 ===== */
/* Lesbarkeit: Fließtexte zwei Stufen größer */
body{
  font-size:22px !important;
}

p,
li,
td,
th,
details p,
.faq p,
.lead,
.muted,
.point,
.point .muted,
.callout,
.stat span,
.footer,
.float-card,
.float-card strong{
  font-size:22px !important;
  line-height:1.62 !important;
}

/* FAQ entsprechend größer */
.faq summary{
  font-size:24px !important;
  line-height:1.45 !important;
  font-weight:800 !important;
}
.faq details p{
  font-size:22px !important;
  line-height:1.65 !important;
}

/* Kleine Labels ebenfalls anheben */
.eyebrow,
.chip,
.export-tag,
.brand small{
  font-size:18px !important;
}

/* Menü und Buttons passend größer */
.nav a{
  font-size:20px !important;
}
.cta,
.timer-button,
.image-dialog-actions button{
  font-size:20px !important;
}

/* Hero-H1 bewusst zwei Stufen kleiner */
.hero h1{
  font-size:clamp(2.65rem,4.6vw,4.35rem) !important;
  line-height:1.02 !important;
  letter-spacing:-.035em;
}

/* Problemabschnitt:
   Überschrift und Einleitung dürfen das Bild umfließen,
   die nummerierten Schritte beginnen danach wieder über die volle Breite. */
.problem-grid .problem-points{
  clear:both !important;
  width:100% !important;
  padding-top:1.5rem !important;
  margin-top:1.5rem !important;
  border-top:1px solid rgba(13,37,62,.14);
}

.problem-grid .big-controls,
.problem-grid .callout{
  clear:both !important;
}

/* Typische Einsätze ohne doppelte Fotos */
.role-texts{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  margin-top:2rem;
}
.role-text{
  padding:1.4rem 1.5rem;
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  background:rgba(255,255,255,.04);
}
.role-text h3{
  margin-top:0;
  font-size:1.3em;
}
.role-text p{
  margin-bottom:0;
}

@media (max-width:900px){
  body{
    font-size:19px !important;
  }
  p,
  li,
  td,
  th,
  details p,
  .faq p,
  .lead,
  .muted,
  .point,
  .point .muted,
  .callout,
  .stat span,
  .footer,
  .float-card,
  .float-card strong{
    font-size:19px !important;
  }
  .faq summary{
    font-size:21px !important;
  }
  .faq details p{
    font-size:19px !important;
  }
  .hero h1{
    font-size:clamp(2.25rem,10vw,3.2rem) !important;
  }
  .role-texts{
    grid-template-columns:1fr;
  }
}


/* ===== Aus HTML ausgelagerter Style-Block 6 ===== */
/* Buttons: sehr dezenter neutraler Schatten und nur leichter Hover */
.cta,
.timer-button,
.image-dialog-actions button,
.image-dialog-close{
  box-shadow:0 2px 8px rgba(0,0,0,.10) !important;
  transition:transform .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease !important;
}

.cta:hover,
.cta:focus-visible,
.timer-button:hover,
.timer-button:focus-visible,
.image-dialog-actions button:hover,
.image-dialog-actions button:focus-visible,
.image-dialog-close:hover,
.image-dialog-close:focus-visible{
  transform:scale(1.018) !important;
  box-shadow:0 3px 10px rgba(0,0,0,.13) !important;
}

.cta:not(.secondary):hover,
.cta:not(.secondary):focus-visible,
.timer-button.start:hover,
.timer-button.start:focus-visible{
  background:#249a35 !important;
  background-color:#249a35 !important;
  border-color:#249a35 !important;
  filter:none !important;
}

.timer-button.pause:hover,
.timer-button.pause:focus-visible,
.timer-button.end:hover,
.timer-button.end:focus-visible{
  filter:brightness(.94) !important;
}

/* Bild-Zoom-Buttons bleiben optisch unsichtbar und ohne Schatten */
.zoom-trigger,
.zoom-trigger:hover,
.zoom-trigger:focus-visible{
  box-shadow:none !important;
  transform:none !important;
}

/* Mobile Navigation sichtbar und ohne überbreiten Etsy-Button */
@media (max-width:900px){
  .topbar-inner{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:10px !important;
    padding-top:8px !important;
    padding-bottom:10px !important;
  }

  .brand{
    align-self:flex-start;
  }

  .nav{
    display:flex !important;
    width:100% !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:8px !important;
    flex-wrap:wrap !important;
  }

  .nav a{
    display:inline-flex !important;
    width:auto !important;
    max-width:100% !important;
    flex:0 0 auto !important;
    white-space:nowrap !important;
  }

  .nav .cta{
    padding:.7rem .95rem !important;
    font-size:17px !important;
  }

  .mobile-buy{
    padding:8px 10px !important;
  }

  .mobile-buy .cta{
    display:inline-flex !important;
    width:auto !important;
    max-width:calc(100vw - 20px) !important;
    padding:.72rem 1rem !important;
    font-size:17px !important;
    white-space:nowrap !important;
  }
}

@media (max-width:520px){
  .nav{
    gap:6px !important;
  }

  .nav a:not(.cta){
    font-size:16px !important;
    padding:.45rem .35rem !important;
  }

  .nav .cta{
    font-size:16px !important;
    padding:.62rem .8rem !important;
  }

  .mobile-buy .cta{
    font-size:16px !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .cta:hover,
  .cta:focus-visible,
  .timer-button:hover,
  .timer-button:focus-visible,
  .image-dialog-actions button:hover,
  .image-dialog-actions button:focus-visible,
  .image-dialog-close:hover,
  .image-dialog-close:focus-visible{
    transform:none !important;
  }
}


/* ===== Aus HTML ausgelagerter Style-Block 7 ===== */
/* Mobile Layout stabilisieren */
html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

body{
  margin:0;
}

.wrap,
section,
header,
footer,
main{
  max-width:100%;
  box-sizing:border-box;
}

.topbar{
  background:#f1f3f5 !important;
  width:100%;
}

.topbar-inner{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}

/* Zoomdialog komplett neu: immer im Viewport, ohne Scrollzwang */
.image-dialog{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100dvh !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}

.image-dialog::backdrop{
  background:rgba(4,12,22,.86) !important;
}

.image-dialog-box{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  box-sizing:border-box !important;
  border-radius:0 !important;
  padding:56px 16px 18px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:center !important;
  background:rgba(11,18,26,.98) !important;
}

.image-dialog-scroll{
  flex:1 1 auto !important;
  min-height:0 !important;
  width:100% !important;
  max-width:100% !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.image-dialog img{
  display:block !important;
  max-width:100% !important;
  max-height:calc(100dvh - 150px) !important;
  width:auto !important;
  height:auto !important;
  object-fit:contain !important;
  cursor:zoom-in;
}

.image-dialog img.is-original{
  max-width:none !important;
  max-height:none !important;
  width:auto !important;
  height:auto !important;
}

.image-dialog-close{
  position:absolute !important;
  top:10px !important;
  right:12px !important;
  z-index:3 !important;
}

.image-dialog-actions{
  flex:0 0 auto !important;
  width:100% !important;
  margin-top:12px !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:10px !important;
  position:relative !important;
  z-index:2 !important;
}

.image-dialog-actions button{
  pointer-events:auto !important;
  position:relative !important;
  z-index:3 !important;
}

/* Mobile Header sauber innerhalb des grauen Bereichs */
@media (max-width:900px){
  .topbar{
    position:relative !important;
    overflow:visible !important;
    background:#f1f3f5 !important;
  }

  .topbar-inner{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:10px !important;
    padding:10px 14px 14px !important;
  }

  .brand{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    align-self:stretch !important;
  }

  .nav{
    display:flex !important;
    position:static !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:8px !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
  }

  .nav a,
  .nav .cta{
    box-sizing:border-box !important;
    max-width:100% !important;
  }

  .mobile-buy{
    position:static !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    margin:0 !important;
    padding:10px 14px !important;
    background:#f1f3f5 !important;
  }

  .mobile-buy .cta{
    width:auto !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  .hero,
  .section,
  .final-cta,
  .footer{
    width:100% !important;
    max-width:100% !important;
  }

  .hero-grid,
  .problem-grid,
  .feature-photo,
  .export-grid,
  .backup-grid,
  .cards,
  .stats,
  .role-texts,
  .final-box{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
}


/* ===== Aus HTML ausgelagerter Style-Block 8 ===== */
/* ===== Responsive Korrektur ===== */

/* Einheitliche Inhaltsbreite auf Desktop */
.wrap{
  width:min(1180px, calc(100% - 48px)) !important;
  max-width:1180px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}

.topbar-inner{
  width:min(1180px, calc(100% - 48px)) !important;
  max-width:1180px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Der Header bleibt ein eigener, vollständig geschlossener Bereich */
.topbar{
  position:relative !important;
  z-index:20 !important;
  width:100% !important;
  background:#f1f3f5 !important;
  border-bottom:1px solid rgba(13,37,62,.10);
}

main{
  position:relative !important;
  z-index:1 !important;
}

/* Keine zusätzliche mobile Kaufleiste, damit kein doppelter/überlagerter CTA entsteht */
.mobile-buy{
  display:none !important;
}

/* Mobile */
@media (max-width:900px){

  html,body{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  .wrap,
  .topbar-inner{
    width:calc(100% - 28px) !important;
    max-width:none !important;
    margin-left:14px !important;
    margin-right:14px !important;
  }

  /* Header vollständig hellgrau, Menü darin eingeschlossen */
  .topbar{
    background:#f1f3f5 !important;
    overflow:visible !important;
  }

  .topbar-inner{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:10px !important;
    padding:10px 0 14px !important;
    min-height:0 !important;
  }

  .brand{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    width:100% !important;
  }

  .topbar .brand img{
    width:72px !important;
    height:72px !important;
    flex:0 0 72px !important;
  }

  .brand span{
    font-size:18px !important;
    line-height:1.15 !important;
  }

  .brand small{
    font-size:14px !important;
    line-height:1.25 !important;
    margin-top:4px !important;
  }

  .nav{
    position:static !important;
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:6px 12px !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:8px 0 0 !important;
    background:transparent !important;
  }

  .nav a{
    width:auto !important;
    max-width:100% !important;
    margin:0 !important;
    padding:4px 0 !important;
    font-size:16px !important;
    line-height:1.25 !important;
    white-space:nowrap !important;
  }

  .nav .cta{
    flex-basis:auto !important;
    width:auto !important;
    padding:9px 14px !important;
    font-size:16px !important;
    margin-left:0 !important;
  }

  /* Mobile Schriften zwei Stufen kleiner */
  body{
    font-size:16px !important;
  }

  p,
  li,
  td,
  th,
  details p,
  .faq p,
  .lead,
  .muted,
  .point,
  .point .muted,
  .callout,
  .stat span,
  .footer{
    font-size:13px !important;
    line-height:1.55 !important;
  }

  .lead{
    font-size:17px !important;
  }

  .faq summary{
    font-size:18px !important;
    line-height:1.4 !important;
  }

  .faq details p{
    font-size:16px !important;
  }

  .eyebrow,
  .chip,
  .export-tag{
    font-size:14px !important;
  }

  .cta,
  .timer-button,
  .image-dialog-actions button{
    font-size:16px !important;
  }

  .hero h1{
    font-size:clamp(1.8rem, 9.2vw, 2.8rem) !important;
    line-height:1.04 !important;
  }

  h2{
    font-size:clamp(1.65rem, 7vw, 2.2rem) !important;
    line-height:1.08 !important;
  }

  h3{
    font-size:1.2rem !important;
  }

  /* Hero sauber unter dem Header */
  .hero{
    padding-top:28px !important;
  }

  .hero-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:24px !important;
  }

  .hero-photo{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
  }

  .hero-photo .zoom-trigger,
  .hero-photo img{
    width:100% !important;
    max-width:100% !important;
  }

  /* Weiße Start/Pause/Ende-Box auf Mobile deutlich kompakter */
  .hero-photo .float-card{
    left:10px !important;
    right:auto !important;
    bottom:10px !important;
    width:auto !important;
    max-width:220px !important;
    padding:10px 12px !important;
    border-radius:14px !important;
  }

  .hero-photo .float-card strong{
    display:block !important;
    font-size:14px !important;
    line-height:1.3 !important;
    margin-bottom:8px !important;
  }

  .hero-photo .timer-buttons{
    display:flex !important;
    gap:6px !important;
    flex-wrap:nowrap !important;
  }

  .hero-photo .timer-button{
    font-size:13px !important;
    padding:7px 10px !important;
    min-width:0 !important;
  }

  /* Desktop-Floats auf Mobile vollständig zurücksetzen */
  .problem-grid,
  .feature-photo,
  .export-grid,
  .backup-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:24px !important;
  }

  .problem-grid > .photo-card,
  .feature-photo > .photo-card,
  .export-grid > .photo-card,
  .backup-grid > .photo-card{
    float:none !important;
    width:100% !important;
    margin:0 !important;
  }
}

/* Footer Schriftgröße */
.footer{
  font-size:15px !important;
  line-height:1.55 !important;
}

@media(max-width:900px){
  .footer{
    font-size:13px !important;
    line-height:1.55 !important;
  }
}

/* Sehr kleine Displays */
@media (max-width:480px){
  .wrap,
  .topbar-inner{
    width:calc(100% - 20px) !important;
    margin-left:10px !important;
    margin-right:10px !important;
  }

  .nav{
    gap:5px 10px !important;
  }

  .nav a{
    font-size:15px !important;
  }

  .nav .cta{
    font-size:15px !important;
    padding:8px 12px !important;
  }

  .hero-photo .float-card{
    max-width:190px !important;
    padding:9px 10px !important;
  }

  .hero-photo .float-card strong{
    font-size:13px !important;
  }

  .hero-photo .timer-button{
    font-size:12px !important;
    padding:6px 8px !important;
  }
}


/* ===== Aus HTML ausgelagerter Style-Block 9 ===== */
/* Header / Burger-Menü */
.topbar-inner{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:20px !important;
}
.menu-toggle{
  display:none;
  width:46px;
  height:42px;
  border:1px solid rgba(13,37,62,.14);
  border-radius:10px;
  background:#fff;
  padding:9px 10px;
  cursor:pointer;
  box-shadow:0 2px 7px rgba(0,0,0,.08);
}
.menu-toggle span{
  display:block;
  height:3px;
  margin:4px 0;
  border-radius:4px;
  background:#0d253e;
}
.nav{
  display:flex !important;
  align-items:center !important;
  gap:24px !important;
}

/* Unterste CTA-Box */
.final-box{
  display:grid !important;
  grid-template-columns:340px minmax(0,1fr) !important;
  align-items:center !important;
  gap:42px !important;
}
.final-icon-wrap img{
  display:block;
  width:340px !important;
  height:340px !important;
  object-fit:contain;
}
.final-copy .cta{
  margin-top:12px;
}

/* Mobile */
@media (max-width:900px){
  .topbar{
    background:#f1f3f5 !important;
  }

  .topbar-inner{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:10px !important;
    padding-top:10px !important;
    padding-bottom:10px !important;
  }

  .brand{
    min-width:0 !important;
  }

  .menu-toggle{
    display:block !important;
    grid-column:2;
    grid-row:1;
  }

  .nav{
    display:none !important;
    grid-column:1 / -1;
    width:100% !important;
    background:#e6e9ed !important;
    border-radius:12px;
    padding:10px 12px !important;
    margin:0 !important;
    gap:0 !important;
    box-sizing:border-box !important;
  }

  .nav.is-open{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
  }

  .nav a{
    display:block !important;
    width:100% !important;
    padding:10px 4px !important;
    font-size:16px !important;
    border-bottom:1px solid rgba(13,37,62,.10);
    white-space:normal !important;
  }

  .nav a:last-child{
    border-bottom:0;
  }

  .final-box{
    grid-template-columns:1fr !important;
    text-align:center !important;
    gap:18px !important;
  }

  .final-icon-wrap{
    display:flex;
    justify-content:center;
  }

  .final-icon-wrap img{
    width:min(52vw,190px) !important;
    height:auto !important;
  }

  .final-copy .cta{
    display:inline-flex !important;
    width:auto !important;
  }
}

/* Kleine Displays */
@media (max-width:480px){
  .topbar .brand img{
    width:62px !important;
    height:62px !important;
    flex-basis:62px !important;
  }

  .brand span{
    font-size:16px !important;
  }

  .brand small{
    font-size:12px !important;
  }

  .menu-toggle{
    width:42px;
    height:40px;
  }
}


/* ===== Aus HTML ausgelagerter Style-Block 10 ===== */
/* Vergleichstabelle mobil als Karten statt zu breit */
@media (max-width:760px){
  .compare{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    border:0 !important;
  }

  .compare thead{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
    border:0 !important;
  }

  .compare tbody,
  .compare tr,
  .compare td{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  .compare tr{
    margin:0 0 16px !important;
    border:1px solid rgba(13,37,62,.14) !important;
    border-radius:14px !important;
    overflow:hidden !important;
    background:#fff !important;
    box-shadow:0 2px 8px rgba(0,0,0,.05);
  }

  .compare td{
    display:grid !important;
    grid-template-columns:minmax(120px,42%) minmax(0,58%) !important;
    gap:12px !important;
    align-items:start !important;
    padding:11px 12px !important;
    border:0 !important;
    border-bottom:1px solid rgba(13,37,62,.09) !important;
    text-align:left !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
  }

  .compare td:last-child{
    border-bottom:0 !important;
  }

  .compare td::before{
    content:attr(data-label);
    font-weight:800;
    color:#0d253e;
  }

  .compare td:first-child{
    background:#f3f6f8 !important;
    font-weight:800 !important;
  }

  .compare td:first-child::before{
    content:"";
    display:none;
  }

  .compare td:first-child{
    grid-template-columns:1fr !important;
  }
}

@media (max-width:420px){
  .compare td{
    grid-template-columns:1fr !important;
    gap:4px !important;
  }

  .compare td::before{
    display:block;
    margin-bottom:2px;
  }

  .compare td:first-child::before{
    display:none;
  }
}


/* ===== Aus HTML ausgelagerter Style-Block 11 ===== */
/* Negative Vergleichswerte */
.compare td.negative{
  color:#c62828 !important;
  font-weight:700 !important;
}

/* Kleine Überschriften oberhalb der eigentlichen Überschriften auf Desktop größer */
@media (min-width:901px){
  .eyebrow{
    font-size:22px !important;
    line-height:1.35 !important;
  }
}

/* Dezenter Trenner im Export-Bereich */
.export-separator{
  border:0;
  border-top:1px solid rgba(13,37,62,.16);
  margin:1.5rem 0 1.25rem;
}


/* ===== Aus HTML ausgelagerter Style-Block 12 ===== */
/* Kleine Abschnittsüberschriften auf Desktop wieder eine Stufe kleiner */
@media (min-width:901px){
  .eyebrow{
    font-size:20px !important;
  }
}

/* Zoomansicht: Bild immer vollständig in den sichtbaren Bereich einpassen */
.image-dialog-actions{
  display:none !important;
}
.image-dialog-scroll{
  overflow:hidden !important;
}
.image-dialog img{
  max-width:calc(100vw - 32px) !important;
  max-height:calc(100dvh - 88px) !important;
  width:auto !important;
  height:auto !important;
  object-fit:contain !important;
  cursor:default !important;
}

/* Vergleichstabelle: keine Fettschrift in den weißen Datenfeldern */
.compare td:not(:first-child),
.compare td:not(:first-child) strong,
.compare td.negative,
.compare td.negative strong{
  font-weight:400 !important;
}

/* Nur die Funktionsbezeichnung in der linken, abgesetzten Spalte bleibt hervorgehoben */
.compare td:first-child,
.compare td:first-child strong{
  font-weight:700 !important;
}


/* ===== Aus HTML ausgelagerter Style-Block 13 ===== */
.footer a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:3px;
}
.footer a:hover,
.footer a:focus-visible{
  text-decoration-thickness:2px;
}

@media (min-width:901px){
  .faq summary{
    font-weight:600 !important;
  }
}


/* ===== Aus HTML ausgelagerter Style-Block 14 ===== */
/* ===== FINAL: Sticky Header + Scroll-Pfeile ===== */

/* overflow:hidden on body can break position:sticky in some browsers */
html{
  width:100%;
  overflow-x:clip !important;
  scroll-behavior:auto !important;
}
body{
  width:100%;
  overflow-x:clip !important;
}

/* Header wirklich sticky */
.topbar{
  position:-webkit-sticky !important;
  position:sticky !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  z-index:9999 !important;
  background:#eaf4fb !important;
  box-shadow:0 3px 12px rgba(15,35,55,.10) !important;
  border-bottom:1px solid rgba(13,37,62,.08) !important;
}

/* Pfeile rechts innerhalb derselben Inhaltsbreite wie die Seite */
.scroll-arrow-wrap{
  width:min(1180px, calc(100% - 48px)) !important;
  max-width:1180px !important;
  margin:0 auto !important;
  padding:10px 0 !important;
  display:flex !important;
  justify-content:flex-end !important;
  box-sizing:border-box !important;
}
.scroll-arrow{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:44px !important;
  height:44px !important;
  border:1px solid rgba(13,37,62,.14) !important;
  border-radius:10px !important;
  background:#fff !important;
  color:#0d253e !important;
  text-decoration:none !important;
  font-size:26px !important;
  line-height:1 !important;
  box-shadow:0 2px 8px rgba(0,0,0,.09) !important;
  transition:transform .16s ease, background-color .16s ease, box-shadow .16s ease !important;
}
.scroll-arrow:hover,
.scroll-arrow:focus-visible{
  transform:scale(1.02) !important;
  background:#f4f8fb !important;
  box-shadow:0 3px 10px rgba(0,0,0,.12) !important;
}

/* Buttons und Abschlusslogo */
.cta,
.timer-button,
.menu-toggle,
.image-dialog-close{
  border-radius:10px !important;
  box-shadow:0 2px 8px rgba(0,0,0,.10) !important;
}
.final-icon-wrap img{
  border-radius:24px !important;
  box-shadow:0 6px 18px rgba(0,0,0,.12) !important;
}

@media (max-width:900px){
  .scroll-arrow-wrap{
    width:calc(100% - 28px) !important;
    margin:0 14px !important;
    padding:8px 0 !important;
  }
  .scroll-arrow{
    width:40px !important;
    height:40px !important;
    font-size:24px !important;
  }
  .final-icon-wrap img{
    border-radius:18px !important;
  }
}

@media (max-width:480px){
  .scroll-arrow-wrap{
    width:calc(100% - 20px) !important;
    margin:0 10px !important;
  }
}


/* ===== Aus HTML ausgelagerter Style-Block 15 ===== */
/* Pfeilbereiche ohne weißen Streifen, passend zum Seitenverlauf */
.scroll-arrow-wrap{
  background:linear-gradient(90deg,#f3f8fd 0%,#ffffff 52%,#f3faef 100%) !important;
}

/* Navigation: Unterstreichung beim Hover */
.nav a:not(.cta){
  text-decoration:none !important;
  text-underline-offset:5px;
}
.nav a:not(.cta):hover,
.nav a:not(.cta):focus-visible{
  text-decoration:underline !important;
  text-decoration-thickness:2px !important;
}

/* Nur Desktop: Markenbezeichnung oben größer, aber weniger fett */
@media (min-width:901px){
  .brand span{
    font-size:1.45rem !important;
    font-weight:600 !important;
    line-height:1.15 !important;
  }

  .brand small{
    font-size:1rem !important;
    font-weight:500 !important;
    letter-spacing:.08em !important;
    line-height:1.25 !important;
  }
}

/* Mobile bleibt bei der bisherigen Größe */
@media (max-width:900px){
  .scroll-arrow-wrap{
    background:linear-gradient(90deg,#f3f8fd 0%,#ffffff 52%,#f3faef 100%) !important;
  }
}


/* ===== Aus HTML ausgelagerter Style-Block 16 ===== */
/* Pfeilbereich volle Browserbreite, Inhalt darin rechts an Seitenbreite ausgerichtet */
.scroll-arrow-wrap{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:10px max(24px, calc((100vw - 1180px) / 2)) !important;
  box-sizing:border-box !important;
  justify-content:flex-end !important;
  background:linear-gradient(90deg,#f3f8fd 0%,#ffffff 52%,#f3faef 100%) !important;
}

@media (max-width:900px){
  .scroll-arrow-wrap{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:8px 14px !important;
  }
}

@media (max-width:480px){
  .scroll-arrow-wrap{
    padding:8px 10px !important;
  }
}


/* ===== Aus HTML ausgelagerter Style-Block 17 ===== */
/* Header etwas dunkleres, weiterhin helles Blau */
.topbar{
  background:#d9eaf6 !important;
}

/* Pfeile jetzt direkt im Seiteninhalt, rechts ausgerichtet */
.content-scroll-arrow{
  width:min(1180px, calc(100% - 48px));
  max-width:1180px;
  margin:0 auto;
  display:flex;
  justify-content:flex-end;
  box-sizing:border-box;
  position:relative;
  z-index:2;
}

.content-scroll-arrow-down{
  padding-top:14px;
  margin-bottom:-6px;
}

.content-scroll-arrow-up{
  padding-bottom:14px;
  margin-top:6px;
}

/* Alte Streifen-Regeln neutralisieren */
.scroll-arrow-wrap{
  display:none !important;
}

@media (max-width:900px){
  .topbar{
    background:#d9eaf6 !important;
  }

  .content-scroll-arrow{
    width:calc(100% - 28px);
    margin-left:14px;
    margin-right:14px;
  }
}

@media (max-width:480px){
  .content-scroll-arrow{
    width:calc(100% - 20px);
    margin-left:10px;
    margin-right:10px;
  }
}


/* ===== Aus HTML ausgelagerter Style-Block 18 ===== */
/* ===== FINAL Header-Branding und Pfeilpositionen ===== */

/* Header-Logo entfernen, nur Textmarke */
.brand-text{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:center !important;
  gap:3px !important;
  text-decoration:none !important;
}

.brand-main{
  display:block !important;
  line-height:1 !important;
  letter-spacing:.01em !important;
  font-size:clamp(1.65rem, 2.1vw, 2.25rem) !important;
  font-weight:700 !important;
}

.brand-type{
  color:#8fc548 !important;
  font-weight:700 !important;
}
.brand-log{
  color:#2c74b7 !important;
  font-weight:700 !important;
}
.brand-worktimer{
  color:#333333 !important;
  font-weight:700 !important;
}

.brand-text small{
  display:block !important;
  color:#607084 !important;
  font-size:.92rem !important;
  font-weight:600 !important;
  letter-spacing:.12em !important;
  line-height:1.2 !important;
  margin:3px 0 0 !important;
}

/* obere Pfeilposition 30px höher */
.content-scroll-arrow-down{
  transform:translateY(-30px) !important;
  padding-top:0 !important;
  margin-bottom:-30px !important;
}

/* unterer Pfeil ohne eigenen weißen Streifen */
.content-scroll-arrow-up{
  background:transparent !important;
  padding-top:0 !important;
  padding-bottom:10px !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
}

/* Der Bereich um den unteren Pfeil übernimmt den Verlauf des letzten Inhaltsbereichs */
.final-cta{
  position:relative;
}
.final-cta + .content-scroll-arrow-up,
.content-scroll-arrow-up{
  background:linear-gradient(90deg,#f3f8fd 0%,#ffffff 52%,#f3faef 100%) !important;
  width:100% !important;
  max-width:none !important;
  padding-left:max(24px, calc((100vw - 1180px) / 2)) !important;
  padding-right:max(24px, calc((100vw - 1180px) / 2)) !important;
  box-sizing:border-box !important;
}

/* Desktop: Größenverhältnis wie gewünscht */
@media (min-width:901px){
  .brand-main{
    font-size:clamp(1.75rem, 2.2vw, 2.35rem) !important;
  }
  .brand-text small{
    font-size:.95rem !important;
  }
}

/* Mobile kompakt halten */
@media (max-width:900px){
  .brand-main{
    font-size:1.45rem !important;
  }
  .brand-text small{
    font-size:.78rem !important;
  }

  .content-scroll-arrow-down{
    transform:translateY(-18px) !important;
    margin-bottom:-18px !important;
  }

  .content-scroll-arrow-up{
    padding-left:14px !important;
    padding-right:14px !important;
  }
}

@media (max-width:480px){
  .brand-main{
    font-size:1.25rem !important;
  }
  .brand-text small{
    font-size:.7rem !important;
    letter-spacing:.08em !important;
  }

  .content-scroll-arrow-up{
    padding-left:10px !important;
    padding-right:10px !important;
  }
}


/* ===== Aus HTML ausgelagerter Style-Block 19 ===== */
/* Header-Schriftzüge jeweils drei Stufen größer */
@media (min-width:901px){
  .brand-main{
    font-size:clamp(2.45rem, 3.15vw, 3.35rem) !important;
  }

  .brand-text small{
    font-size:1.35rem !important;
  }
}

@media (max-width:900px){
  .brand-main{
    font-size:2rem !important;
  }

  .brand-text small{
    font-size:1rem !important;
  }
}

@media (max-width:480px){
  .brand-main{
    font-size:1.75rem !important;
  }

  .brand-text small{
    font-size:.9rem !important;
  }
}


/* ===== Aus HTML ausgelagerter Style-Block 20 ===== */
/* TYPELOG WORKTIMER deutlich größer und kräftiger, Unterzeile unverändert */
@media (min-width:901px){
  .brand-main{
    font-size:clamp(4.9rem, 6.3vw, 6.7rem) !important;
    font-weight:700 !important;
    line-height:.95 !important;
  }

  .brand-main .brand-type,
  .brand-main .brand-log,
  .brand-main .brand-worktimer{
    font-weight:700 !important;
  }
}

@media (max-width:900px){
  .brand-main{
    font-size:4.0rem !important;
    font-weight:700 !important;
    line-height:.98 !important;
  }

  .brand-main .brand-type,
  .brand-main .brand-log,
  .brand-main .brand-worktimer{
    font-weight:700 !important;
  }
}

@media (max-width:480px){
  .brand-main{
    font-size:3rem !important;
  }
}


/* ===== Aus HTML ausgelagerter Style-Block 21 ===== */
/* FINAL FIX:
   Die ältere Regel ".brand span { font-size: ... !important; }"
   war spezifischer und hat deshalb .brand-main trotz !important überschrieben. */

@media (min-width:901px){
  .brand .brand-main{
    font-size:3.1rem !important;
    font-weight:700 !important;
    line-height:1 !important;
  }

  /* Die drei inneren SPANs wurden ebenfalls von ".brand span" festgenagelt.
     Deshalb müssen sie die Größe ausdrücklich vom brand-main erben. */
  .brand .brand-main .brand-type,
  .brand .brand-main .brand-log,
  .brand .brand-main .brand-worktimer{
    font-size:inherit !important;
    font-weight:700 !important;
    line-height:inherit !important;
  }

  /* Unterzeile so lassen wie zuletzt */
  .brand-text small{
    font-size:1.35rem !important;
    font-weight:600 !important;
  }
}


/* ===== Aus HTML ausgelagerter Style-Block 22 ===== */
/* FINAL: Pfeile am rechten Bildschirmrand, über dem Inhalt */
.content-scroll-arrow{
  width:auto !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  position:fixed !important;
  right:12px !important;
  z-index:9500 !important;
  background:transparent !important;
  pointer-events:none;
}

.content-scroll-arrow .scroll-arrow{
  pointer-events:auto;
}

/* Oberer Pfeil noch 10 px weiter nach oben */
.content-scroll-arrow-down{
  top:calc(var(--header-offset, 150px) + 4px) !important;
  transform:none !important;
}

/* Unterer Pfeil aus jedem Streifen heraus, direkt über dem Inhalt am rechten Rand */
.content-scroll-arrow-up{
  bottom:18px !important;
  transform:none !important;
}

/* Alte Flächen-/Streifenregeln sicher neutralisieren */
.final-cta + .content-scroll-arrow-up,
.scroll-arrow-wrap,
.content-scroll-arrow-up{
  background:transparent !important;
}

/* Header-Schrift exakt nach Vorgabe */
@media (min-width:901px){
  .brand .brand-main{
    font-size:3.1rem !important;
    font-weight:700 !important;
    line-height:1 !important;
  }

  .brand .brand-main .brand-type,
  .brand .brand-main .brand-log,
  .brand .brand-main .brand-worktimer{
    font-size:inherit !important;
    font-weight:700 !important;
    line-height:inherit !important;
  }
}

@media (max-width:900px){
  .content-scroll-arrow{
    right:8px !important;
  }

  .content-scroll-arrow-down{
    top:118px !important;
  }

  .content-scroll-arrow-up{
    bottom:12px !important;
  }
}


/* ===== Aus HTML ausgelagerter Style-Block 23 ===== */
/* FINAL MOBILE BRAND SIZE
   Die älteren .brand span-Regeln werden hier gezielt überschrieben. */
@media (max-width:900px){
  .brand .brand-main{
    font-size:1.55rem !important;
    font-weight:800 !important;
    line-height:1 !important;
  }

  .brand .brand-main .brand-type,
  .brand .brand-main .brand-log,
  .brand .brand-main .brand-worktimer{
    font-size:inherit !important;
    font-weight:800 !important;
    line-height:inherit !important;
  }
}

@media (max-width:480px){
  .brand .brand-main{
    font-size:1.45rem !important;
  }
}


/* ===== Aus HTML ausgelagerter Style-Block 24 ===== */
/* FINAL: beide großen Überschriften etwas kleiner */

/* Farbiger TYPELOG WORKTIMER Schriftzug im Header */
@media (min-width:901px){
  .brand .brand-main{
    font-size:2.9rem !important;
  }
}

/* Normale H1 im Hero ebenfalls leicht kleiner */
@media (min-width:901px){
  .hero h1{
    font-size:clamp(2.45rem,4.25vw,4rem) !important;
  }
}


/* ===== Aus HTML ausgelagerter Style-Block 25 ===== */
/* FINAL: Mobile beide großen Überschriften nur leicht kleiner */
@media (max-width:900px){
  .brand .brand-main{
    font-size:1.38rem !important;
  }

  .hero h1{
    font-size:clamp(1.65rem,8.2vw,2.45rem) !important;
  }
}

@media (max-width:480px){
  .brand .brand-main{
    font-size:1.30rem !important;
  }
}


/* ===== Aus HTML ausgelagerter Style-Block 26 ===== */
/* FINAL TYPOGRAPHIE:
   H2 klar unter H1 einordnen, Mobile-H1 noch etwas kleiner */

/* Desktop: alle H2 kleiner als die H1 */
@media (min-width:901px){
  h2{
    font-size:clamp(2rem,3vw,2.75rem) !important;
    line-height:1.1 !important;
  }
}

/* Mobile: H1 noch etwas kleiner, H2 sichtbar darunter */
@media (max-width:900px){
  .hero h1{
    font-size:clamp(1.55rem,7.6vw,2.3rem) !important;
  }

  h2{
    font-size:clamp(1.4rem,6.2vw,1.95rem) !important;
    line-height:1.1 !important;
  }
}

@media (max-width:480px){
  .hero h1{
    font-size:clamp(1.45rem,7vw,2.05rem) !important;
  }

  h2{
    font-size:clamp(1.3rem,5.8vw,1.8rem) !important;
  }
}


/* ===== Aus HTML ausgelagerter Style-Block 27 ===== */
/* Typische Einsätze: Kacheln leicht heller als der dunkle Hintergrund */
.dark .role-text{
  background:rgba(255,255,255,.075) !important;
  border-color:rgba(255,255,255,.16) !important;
}

/* Abschlusszeile unter den sechs Kacheln */
.role-texts-note{
  grid-column:1 / -1;
  margin:4px 0 0 !important;
  text-align:center;
  font-size:22px !important;
  line-height:1.62 !important;
  color:rgba(255,255,255,.84) !important;
}

@media (max-width:900px){
  .role-texts-note{
    font-size:16px !important;
    line-height:1.55 !important;
  }
}


/* ===== Aus HTML ausgelagerter Style-Block 28 ===== */
/* Kleiner Abstand zwischen Miniüberschrift und großer Überschrift */
.eyebrow + h2{
  margin-top:.38rem !important;
}

/* Zusätzlicher XLSX-Filterabschnitt */
.xlsx-filter-block{
  display:grid;
  grid-template-columns:minmax(0,1fr) 46%;
  gap:4.5%;
  align-items:start;
  margin-top:3rem !important;
}

.xlsx-filter-block .photo-card{
  margin:0 !important;
}

.xlsx-filter-block .photo-card img,
.xlsx-filter-block .photo-card .zoom-trigger{
  width:100%;
}

@media (max-width:900px){
  .xlsx-filter-block{
    grid-template-columns:1fr;
    gap:24px;
    margin-top:2.25rem !important;
  }

  .xlsx-filter-block .xlsx-filter-copy{
    order:1;
  }

  .xlsx-filter-block .photo-card{
    order:2;
  }
}


/* ===== Aus HTML ausgelagerter Style-Block 29 ===== */
/* XLSX-Filter: Überschrift über volle Breite, Bild erst neben dem Fließtext */
.xlsx-filter-block{
  display:block !important;
}

.xlsx-filter-flow::after{
  content:"";
  display:block;
  clear:both;
}

@media (min-width:901px){
  .xlsx-filter-photo{
    float:right !important;
    width:46% !important;
    margin:.15rem 0 1.5rem 4.5% !important;
  }

  .xlsx-filter-photo .zoom-trigger,
  .xlsx-filter-photo img{
    width:100% !important;
  }

  /* Der grüne Kasten bleibt links neben dem Bild und nimmt etwa die halbe Breite ein. */
  .xlsx-filter-callout{
    width:49.5% !important;
    max-width:49.5% !important;
    box-sizing:border-box !important;
  }
}

@media (max-width:900px){
  .xlsx-filter-photo{
    float:none !important;
    width:100% !important;
    margin:0 0 1.25rem 0 !important;
  }

  .xlsx-filter-callout{
    width:100% !important;
    max-width:none !important;
  }
}


/* ===== Aus HTML ausgelagerter Style-Block 30 ===== */
/* FINAL XLSX-FILTER-LAYOUT:
   Einleitung volle Breite, Bild erst ab zweitem Absatz rechts. */
.xlsx-filter-intro{
  width:100% !important;
  max-width:none !important;
  display:block !important;
  margin-bottom:1.4rem !important;
}

.xlsx-filter-flow::after{
  content:"";
  display:block;
  clear:both;
}

@media (min-width:901px){
  .xlsx-filter-photo{
    float:right !important;
    width:46% !important;
    margin:.15rem 0 1.5rem 4.5% !important;
  }

  .xlsx-filter-photo .zoom-trigger,
  .xlsx-filter-photo img{
    width:100% !important;
  }

  /* Grüner Hinweis links neben dem Bild, solange das Bild reicht */
  .xlsx-filter-callout{
    width:auto !important;
    max-width:none !important;
    margin-right:50.5% !important;
    box-sizing:border-box !important;
  }
}

@media (max-width:900px){
  .xlsx-filter-intro{
    margin-bottom:1.1rem !important;
  }

  .xlsx-filter-photo{
    float:none !important;
    width:100% !important;
    margin:0 0 1.25rem 0 !important;
  }

  .xlsx-filter-callout{
    margin-right:0 !important;
    width:100% !important;
    max-width:none !important;
  }
}


/* ===== Aus HTML ausgelagerter Style-Block 31 ===== */
/* Mehr Luft zwischen Fließtext/Callout und XLSX-Bild */
@media (min-width:901px){
  .xlsx-filter-photo{
    margin-left:6.5% !important;
    width:44% !important;
  }

  .xlsx-filter-callout{
    margin-right:51% !important;
  }
}


/* ===== Aus HTML ausgelagerter Style-Block 32 ===== */
/* XLSX-Filter: Fließtext bündig mit dem grünen Hinweis, klarer Abstand zum Bild */
@media (min-width:901px){
  .xlsx-filter-flow > p:not(.xlsx-filter-intro){
    margin-right:51% !important;
  }

  .xlsx-filter-callout{
    margin-right:51% !important;
  }

  .xlsx-filter-photo{
    width:44% !important;
    margin-left:5% !important;
  }
}

/* Mobile: kleiner Abstand unter dem Bild, damit der folgende Text nicht direkt anstößt */
@media (max-width:900px){
  .xlsx-filter-photo{
    margin-bottom:1.5rem !important;
  }
}


/* ===== Aus HTML ausgelagerter Style-Block 33 ===== */
/* XLSX-Filterbereich komplett neu, angelehnt an den dunklen Service-Abschnitt */
.xlsx-filter-section{
  margin-top:3rem;
  background:#101923;
  color:#fff;
}

.xlsx-filter-panel{
  display:grid !important;
  grid-template-columns:46% minmax(0,1fr) !important;
  gap:4.5% !important;
  align-items:start !important;
  padding-top:3.25rem !important;
  padding-bottom:3.25rem !important;
}

.xlsx-filter-panel .photo-card{
  float:none !important;
  width:100% !important;
  margin:0 !important;
  align-self:start !important;
}

.xlsx-filter-panel .photo-card .zoom-trigger,
.xlsx-filter-panel .photo-card img{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
}

.xlsx-filter-copy{
  min-width:0;
}

.xlsx-filter-copy h2{
  color:#fff !important;
}

.xlsx-filter-copy .lead,
.xlsx-filter-copy p{
  color:rgba(255,255,255,.88) !important;
}

.xlsx-filter-tip{
  margin-top:1.4rem;
  padding:1.05rem 1.2rem;
  border-left:4px solid #8fc548;
  border-radius:0 12px 12px 0;
  background:rgba(255,255,255,.075);
  color:rgba(255,255,255,.92);
  font-size:22px !important;
  line-height:1.62 !important;
}

.xlsx-filter-tip strong{
  color:#fff;
}

@media (max-width:900px){
  .xlsx-filter-section{
    margin-top:2.25rem;
  }

  .xlsx-filter-panel{
    grid-template-columns:1fr !important;
    gap:24px !important;
    padding-top:2.25rem !important;
    padding-bottom:2.25rem !important;
  }

  .xlsx-filter-panel .photo-card{
    margin:0 0 6px 0 !important;
  }

  .xlsx-filter-copy{
    margin-top:0 !important;
  }

  .xlsx-filter-tip{
    margin-top:1.25rem;
    font-size:16px !important;
    line-height:1.55 !important;
  }
}


/* ===== Aus HTML ausgelagerter Style-Block 34 ===== */
/* FINAL XLSX-FILTER-LAYOUT
   Desktop: Überschrift oben, Fließtext links, Bild rechts, Hinweis unten über volle Breite.
   Mobile: Bild oben, deutlicher Abstand, Text darunter. */
.xlsx-filter-panel{
  display:block !important;
  padding-top:3.25rem !important;
  padding-bottom:3.25rem !important;
}

.xlsx-filter-heading{
  width:100%;
  margin-bottom:1.6rem;
}

.xlsx-filter-main{
  display:grid;
  grid-template-columns:minmax(0,1fr) 46%;
  gap:4.5%;
  align-items:start;
}

.xlsx-filter-copy{
  min-width:0;
}

.xlsx-filter-photo{
  float:none !important;
  width:100% !important;
  margin:0 !important;
  align-self:start !important;
}

.xlsx-filter-photo .zoom-trigger,
.xlsx-filter-photo img{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
}

.xlsx-filter-tip{
  width:100% !important;
  max-width:none !important;
  box-sizing:border-box !important;
  margin:1.7rem 0 0 !important;
}

@media (max-width:900px){
  .xlsx-filter-panel{
    padding-top:2.25rem !important;
    padding-bottom:2.25rem !important;
  }

  .xlsx-filter-heading{
    margin-bottom:1.35rem;
  }

  .xlsx-filter-main{
    display:flex;
    flex-direction:column;
    gap:0;
  }

  .xlsx-filter-photo{
    order:1;
    margin:0 0 1.8rem 0 !important;
  }

  .xlsx-filter-copy{
    order:2;
  }

  .xlsx-filter-tip{
    margin-top:1.4rem !important;
  }
}


/* ===== Aus HTML ausgelagerter Style-Block 35 ===== */
/* Ankerziele unter dem sticky Header sauber sichtbar halten */
#funktionen,
#export,
#faq,
#so-gehts{
  scroll-margin-top:150px;
}

@media (max-width:900px){
  #funktionen,
  #export,
  #faq,
  #so-gehts{
    scroll-margin-top:110px;
  }
}


/* ===== Aus HTML ausgelagerter Style-Block 36 ===== */
/* Weißraum unter dem XLSX-Filterblock entfernen.
   Der dunkle Block liegt innerhalb von #export, dessen unteres Section-Padding
   sonst nach dem Block als weißer Streifen sichtbar bleibt. */
#export{
  padding-bottom:0 !important;
}


/* ===== Aus HTML ausgelagerter Style-Block 37 ===== */
/* ===== Desktop-Sprachleiste ===== */

.typelog-language-bar{
  width:100%;
  background:#f3f8fd;
  border-bottom:1px solid rgba(13,37,62,.08);
}

.typelog-language-inner{
  width:min(1180px, calc(100% - 48px));
  max-width:1180px;
  margin:0 auto;
  padding:8px 0;
  box-sizing:border-box;

  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
}

.typelog-language-link{
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:26px;
  padding:3px;
  box-sizing:border-box;

  border:1px solid transparent;
  border-radius:6px;
  background:transparent;

  text-decoration:none;
  transition:
    transform .15s ease,
    background-color .15s ease,
    border-color .15s ease;
}

.typelog-language-link img{
  display:block;
  width:28px;
  height:auto;
  max-height:20px;
  object-fit:contain;
}

.typelog-language-link:hover,
.typelog-language-link:focus-visible{
  transform:scale(1.08);
  background:#fff;
  border-color:rgba(13,37,62,.16);
}

.typelog-language-link.is-active{
  background:#fff;
  border-color:#2c74b7;
  box-shadow:0 1px 5px rgba(0,0,0,.10);
}


/* ===== Mobile-Sprachmenü im Burger ===== */

.typelog-language-mobile{
  display:none;
}

@media (max-width:900px){

  /* Desktop-Flaggenleiste verschwindet */
  .typelog-language-bar{
    display:none !important;
  }

  /* Sprachbereich innerhalb des Burger-Menüs */
  .typelog-language-mobile{
    display:block;
    width:100%;
    margin-top:8px;
    padding-top:8px;
    border-top:1px solid rgba(13,37,62,.14);
  }

  .typelog-language-mobile-title{
    display:block;
    padding:6px 4px 7px;
    color:#607084;
    font-size:14px !important;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.06em;
  }

  .typelog-language-mobile a{
    display:flex !important;
    align-items:center;
    gap:12px;

    width:100% !important;
    box-sizing:border-box;
    padding:9px 4px !important;

    color:#0d253e;
    text-decoration:none;
    font-size:16px !important;

    border-bottom:1px solid rgba(13,37,62,.08);
  }

  .typelog-language-mobile a:last-child{
    border-bottom:0;
  }

  .typelog-language-mobile img{
    display:block;
    width:28px;
    height:auto;
    max-height:20px;
    object-fit:contain;
    flex:0 0 28px;
  }

  .typelog-language-mobile a.is-active{
    font-weight:700;
    color:#2c74b7;
  }

  .typelog-language-mobile a.is-active::after{
    content:"✓";
    margin-left:auto;
    color:#2c74b7;
    font-weight:700;
  }
}

@media (max-width:480px){
  .typelog-language-mobile a{
    font-size:15px !important;
  }
}