/* ================================================================
   Charge Digital — style.css (v55)
   - Fixes Header + glass mobile menu (offcanvas/fullscreen)
   - Logo text always visible (ellipsis)
   - Blue accents, cards, icons
   - What-you-get with fine blue checks
   - Mobile-only call FAB (weiß auf Startseite via body.home)
   - Stabiler Zeilenumbruch/Hyphenation-Fix am Ende
   ================================================================ */

/* Base ----------------------------------------------------------- */
html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  margin: 0;
  padding-top: 80px;           /* Platz für fixen Header */
  line-height: 1.7;
  color: #333;
  background: #f8f8f8;
}

.container { width: 90%; max-width: 1200px; margin: auto; padding: 20px 0; }

/* Header --------------------------------------------------------- */
header{
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: #fff; color: #333;
  padding: 1rem 0;
  border-bottom: 1px solid #eee;
  box-shadow: 0 2px 5px rgba(0,0,0,.05);
  transition: padding .25s ease, font-size .25s ease;
}
header .container{ display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.logo-link{ display: flex; align-items: center; gap: 10px; text-decoration: none; flex: 1 1 auto; min-width: 0; }
.header-logo{ height: 40px; width: auto; display: block; object-fit: contain; transition: height .25s ease; }
.logo-text{
  display: inline-block; margin: 0; padding: 0;
  font-size: 1.8em; font-weight: 700; color: #007bff;
  max-width: 65vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: font-size .25s ease;
}
header.header-small{ padding: .15rem 0; }
header.header-small .header-logo{ height: 30px; }
header.header-small .logo-text{ font-size: 1.2em; }

/* Desktop Nav */
header nav{ display: flex; align-items: center; }
header nav ul{ margin: 0; padding: 0; list-style: none; display: flex; gap: 26px; align-items: center; }
header nav li{ display: inline-block; }
header nav a{
  color: #555; text-decoration: none; text-transform: uppercase;
  font-size: 15px; font-weight: 500; letter-spacing: .02em;
  transition: color .2s ease, opacity .2s ease;
}
header nav a:hover{ color: #007bff; font-weight: 600; }

/* Mobile Toggle */
.menu-toggle{ display: none; flex-direction: column; justify-content: space-between; width: 32px; height: 22px; cursor: pointer; user-select: none; }
.menu-toggle span{ display:block; height:3px; width:100%; background:#333; border-radius:3px; transition: transform .25s ease, opacity .25s ease; }
.menu-toggle.active span:nth-child(1){ transform: translateY(9px) rotate(45deg); }
.menu-toggle.active span:nth-child(2){ opacity: 0; }
.menu-toggle.active span:nth-child(3){ transform: translateY(-9px) rotate(-45deg); }

/* Offcanvas (mobile) + Backdrop */
#main-nav .nav-head{ display: none; }            /* nur mobil sichtbar */
#main-nav .nav-logo{ height: 28px; width: auto; object-fit: contain; }

.nav-backdrop{
  position: fixed; inset: 0; background: rgba(0,0,0,.25);
  backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease;
  z-index: 900;
}
.nav-backdrop.show{ opacity: 1; visibility: visible; }
body.nav-open{ overflow: hidden; }

/* Hero ----------------------------------------------------------- */
.hero{
  min-height: 450px;
  background: #e9f5ff url('https://via.placeholder.com/1500x450/cceeff/007bff?text=Ihre+digitale+Zukunft') no-repeat center/cover;
  color:#333; display:flex; align-items:center; justify-content:center;
  padding:50px 20px; box-shadow: inset 0 -5px 10px rgba(0,0,0,.05);
}
.hero .container{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.hero h2{ font-size:3.2em; margin:0 0 15px; color:#0056b3; text-shadow:1px 1px 2px rgba(0,0,0,.08); }
.hero p{ font-size:1.2em; margin:0 0 28px; max-width:700px; opacity:.9; }

/* Buttons -------------------------------------------------------- */
.btn{
  display:inline-block; border:none; cursor:pointer;
  color:#fff; background:#007bff; padding:12px 28px; border-radius:30px;
  text-decoration:none; font-weight:700; transition:background .2s ease, transform .15s ease, box-shadow .2s ease;
  box-shadow:0 6px 14px rgba(0,123,255,.18);
}
.btn:hover{ background:#005ed8; transform: translateY(-1px); }
.whatsapp-btn{ background:#25D366; box-shadow:0 6px 14px rgba(37,211,102,.18); }
.whatsapp-btn:hover{ background:#1DA851; }
.hero-buttons{ display:flex; justify-content:center; gap:18px; flex-wrap:wrap; }

/* Sections -------------------------------------------------------- */
section{
  padding: 60px 0; background: #fff;
  box-shadow: 0 0 15px rgba(0,0,0,.03);
  border-bottom: 1px solid #eee;
}
section:last-of-type{ border-bottom: none; }
section h3{
  text-align:center; font-size:2.4em; color:#0056b3; margin:0 0 40px; position:relative;
}
section h3::after{ content:""; display:block; width:60px; height:3px; background:#1e66ff; margin:15px auto 0; border-radius:2px; }

/* Services / Cards ----------------------------------------------- */
.service-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:30px; text-align:left; }
.service-item{
  padding:28px; border:1px solid #d6e4ff; border-radius:12px; background:#fff;
  box-shadow:0 6px 16px rgba(23,87,255,.06); transition: transform .25s ease, box-shadow .25s ease;
}
.service-item:hover{ transform:translateY(-4px); box-shadow:0 10px 22px rgba(23,87,255,.10); }
.service-item h4{ color:#007bff; margin:0 0 12px; font-size:1.4em; }
.service-item h4 i{ color:#007bff !important; margin-right:10px; }
.service-item p{ margin:0; color:#555; }

/* Packages -------------------------------------------------------- */
.product-packages{ margin-top:50px; }
.product-packages h4{ text-align:center; font-size:2em; margin:0 0 20px; color:#0056b3; }
.package-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:22px; }
.package-item{
  background:#f8faff; border:1px solid #d6e4ff; border-radius:12px; padding:28px; text-align:center;
  box-shadow:0 6px 16px rgba(23,87,255,.06); transition: transform .25s ease, box-shadow .25s ease;
  display:flex; flex-direction:column; justify-content:space-between;
}
.package-item:hover{ transform:translateY(-3px); box-shadow:0 10px 22px rgba(23,87,255,.10); }
.package-item h5{ font-size:1.4em; color:#007bff; margin:0 0 10px; }
.package-item .price{ font-size:1.6em; font-weight:800; color:#0056b3; }
.btn-package{ margin-top:14px; width:100%; max-width:220px; align-self:center; }

/* Why us ---------------------------------------------------------- */
.why-us ul{ list-style:none; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:20px; }
.why-us li{
  background:#f0f8ff; padding:22px; border-left:5px solid #1e66ff; border-radius:10px;
  box-shadow:0 4px 12px rgba(23,87,255,.08); flex:1 1 calc(33% - 40px); max-width:350px; min-width:280px;
  font-size:1.06em; color:#444; line-height:1.55; transition: transform .25s ease, box-shadow .25s ease;
}
.why-us li:hover{ transform:translateY(-3px); box-shadow:0 10px 22px rgba(23,87,255,.12); }
.why-us li strong{ color:#0056b3; font-size:1.15em; display:block; margin-bottom:6px; }
.why-us li i{ color:#007bff !important; margin-right:10px; }

/* Contact --------------------------------------------------------- */
.contact{ text-align:center; }
.contact-form{ max-width:600px; margin:0 auto 28px; text-align:left; }
.form-group{ margin-bottom:14px; }
.form-group label{ display:block; margin-bottom:6px; font-weight:700; color:#444; }
.form-group input, .form-group textarea{
  width:100%; padding:10px 12px; border:1px solid #ccc; border-radius:6px; font-size:1em; transition:border-color .2s ease, box-shadow .2s ease;
}
.form-group input:focus, .form-group textarea:focus{ border-color:#007bff; outline:0; box-shadow:0 0 0 3px rgba(0,123,255,.12); }
.contact .btn{ width:100%; }

/* Footer ---------------------------------------------------------- */
footer{ background:#333; color:#fff; text-align:center; padding:24px 0; }
footer a{ color:#99ccff; text-decoration:none; }
footer a:hover{ text-decoration:underline; }

/* Legal / main-content ------------------------------------------- */
.legal-page, .main-content{ padding:80px 0; }
.legal-page h3, .main-content h3{ text-align:center; font-size:2.4em; color:#0056b3; margin:0 0 34px; }
.service-detail-item{
  margin-bottom:36px; padding:22px; border:1px solid #d6e4ff; border-radius:12px; background:#f9fbff;
  box-shadow:0 6px 16px rgba(23,87,255,.06);
}
.service-detail-item h4{ font-size:1.6em; margin:0 0 12px; color:#0056b3; }
.service-detail-item h5{ font-size:1.2em; margin-top:22px; color:#007bff; }

/* FAQ -------------------------------------------------------------- */
.faq .faq-item{
  margin:10px auto; max-width:850px; border:1px solid #d6e4ff; border-radius:12px; background:#fff;
  box-shadow:0 6px 16px rgba(23,87,255,.06); overflow:hidden;
}
.faq .faq-item summary{ list-style:none; cursor:pointer; padding:16px 18px; font-weight:700; color:#0a5be0; }
.faq .faq-item summary::-webkit-details-marker{ display:none; }
.faq .faq-item[open] summary{ border-bottom:1px solid #eef4ff; }
.faq .faq-item p{ padding:14px 18px 18px; margin:0; color:#444; }

/* What-you-get (feine blaue Haken) -------------------------------- */
.what-you-get{
  background:#f7faff; border:1px solid #d6e4ff; border-left:4px solid #1f6fff;
  border-radius:14px; padding:20px 18px; box-shadow:0 6px 18px rgba(23,87,255,.08);
}
.what-you-get h5{ margin:0 0 12px; color:#0a5be0; font-weight:700; letter-spacing:.2px; }
.what-you-get ul{ margin:0; padding:0; list-style:none; }
.what-you-get li{
  position:relative; padding-left:26px; margin:10px 0; line-height:1.55;
  word-break:break-word; -webkit-hyphens:auto; hyphens:auto;
}
.what-you-get li::before{
  content:""; position:absolute; left:0; top:.45em; width:16px; height:12px; background-repeat:no-repeat; background-size:16px 12px;
  background-image:url("data:image/svg+xml,%3Csvg width='16' height='12' viewBox='0 0 16 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 6l3.5 3.5L14 1' fill='none' stroke='%231f6fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Floating Call Button (only mobile) -------------------------------- */
.fab-call{ display: none; }         /* Desktop aus */
@media (max-width: 1024px){
  .fab-call{
    display: grid; place-items: center;
    position: fixed; right: 16px; bottom: 16px;
    width: 56px; height: 56px; border-radius: 50%;
    text-decoration: none; font-size: 24px;
    color:#fff; background:#0a5be0;
    box-shadow:0 12px 24px rgba(10,91,224,.25); z-index: 900;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  }
  .fab-call:hover{ transform: translateY(-2px); box-shadow:0 16px 28px rgba(10,91,224,.30); background:#005ed8; }
}
@media (max-width: 480px){
  .fab-call{ width: 52px; height: 52px; font-size: 22px; }
}

/* Mobile Typography/Spacing (Dienstleistungen) --------------------- */
p, li, h3, h4{ -webkit-hyphens:auto; hyphens:auto; overflow-wrap:break-word; }
@media (max-width: 768px){
  .logo-text{ font-size: 1.35em; line-height: 1.1; }   /* sichtbar & kompakt */
  .header-logo{ height: 32px; }
  .menu-toggle{ display: flex; }

  /* Glass offcanvas (Basis) */
  #main-nav{
    position: fixed; top: 0; right: -80%; height: 100vh; width: 80%;
    background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
    box-shadow: -10px 0 30px rgba(0,0,0,.12);
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    padding: 70px 24px 24px; transition: right .28s ease; z-index: 1001;
  }
  #main-nav.active{ right: 0; }
  #main-nav ul{ flex-direction: column; gap: 18px; padding-left: 0; margin: 64px 0 0; width: 100%; text-align: center; }
  #main-nav a{ font-size: 1.2em; }
  #main-nav .nav-head{
    display: flex; align-items: center; gap: 10px;
    position: absolute; top: 12px; left: 16px; right: 16px; height: 44px;
    pointer-events: none;
  }
  .nav-backdrop{ background: rgba(0,0,0,.28); }

  /* Hero & Buttons */
  .hero h2{ font-size: 2.2em; }
  .hero p{ font-size: 1.05em; }
  .hero-buttons{ flex-direction: column; gap: 14px; }
  .btn{ width: 100%; text-align: center; }

  /* Grids einspaltig */
  .service-grid, .why-us ul, .package-grid{ grid-template-columns: 1fr; }
  .why-us li{ flex: 1 1 90%; max-width: 420px; }

  /* Dienstleistungs-Seite Lesbarkeit */
  .main-content h3{ font-size: 1.8em; line-height: 1.2; margin-bottom: 28px; }
  .service-detail-item{ padding: 18px; border-radius: 12px; }
  .service-detail-item h4{ font-size: 1.25em; line-height: 1.25; margin-bottom: 10px; }
  .service-detail-item h4 i{ position: relative; top: 2px; }
  .service-detail-item p{ font-size: 1rem; line-height: 1.65; margin: 10px 0 12px; }
  .service-detail-item ul{ padding-left: 20px; margin: 8px 0 0; }
  .service-detail-item li{ margin: 8px 0; font-size: 1rem; line-height: 1.6; }

  /* Platz fürs FAB */
  .main-content .container{ padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 360px){
  /* Schriftzug bleibt sichtbar, nur kleiner */
  .logo-text{ font-size: 1.05em; line-height: 1.1; }
}

/* Safety ----------------------------------------------------------- */
html, body{ max-width: 100%; overflow-x: hidden; }

/* v52 – Mobile Menü: Close-Button */
.menu-close{
  position:absolute; top:14px; right:14px;
  width:40px; height:40px; border:0; cursor:pointer;
  display:none; border-radius:999px;
  background: rgba(255,255,255,.65);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size:22px; line-height:1; color:#0a5be0; 
  box-shadow:0 4px 14px rgba(0,0,0,.12);
}
@media (max-width: 768px){
  #main-nav.active .menu-close{ display:inline-flex; align-items:center; justify-content:center; z-index:1; }
}

/* ===== v53: Spacing-Fix, Fullscreen-Glass-Menu (Mobile), helle Call-Taste ===== */

/* 0) Rhythmus-Variablen (nur Override, bricht nichts) */
:root{
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 72px;
}

/* 1) Einheitliche Abstände Desktop & Mobil (Sections, Texte) */
section{
  padding-top: clamp(var(--space-6), 7vw, var(--space-7)) !important;
  padding-bottom: clamp(var(--space-6), 7vw, var(--space-7)) !important;
}
section h3{ margin-bottom: clamp(var(--space-4), 4vw, var(--space-5)) !important; }
p{ margin: 0 0 var(--space-3) !important; }
ul{ margin: var(--space-2) 0 var(--space-3) !important; padding-left: 1.2em; }
li{ margin: 6px 0; }

/* Karten minimal angleichen */
.service-item,
.package-item,
.service-detail-item,
.faq .faq-item{
  margin-bottom: var(--space-4);
}

/* 2) Desktop wieder „ruhig“ (sperrt mobile Menü-Styles aus) */
@media (min-width: 769px){
  .menu-toggle{ display: none !important; }
  #main-nav{
    position: static !important;
    inset: auto !important;
    width: auto !important; height: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important; transform: none !important;
  }
  #main-nav ul{ flex-direction: row !important; gap: 26px !important; margin: 0 !important; }
}

/* 3) Mobiles Menü: Fullscreen + transparenter, Glas-Effekt */
@media (max-width: 768px){
  #main-nav{
    position: fixed !important;
    inset: 0 !important;               /* volle Breite/Höhe */
    width: 100% !important; height: 100dvh !important;
    transform: translateX(100%) !important;
    transition: transform .28s ease !important;
    background: rgba(255,255,255,.72) !important;   /* transparenter */
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: none !important;
    display: flex !important; flex-direction: column; align-items: center;
    padding: 100px 28px !important;
    z-index: 1001;
  }
  #main-nav.active{ transform: translateX(0) !important; }

  /* Liste zentriert & luftiger */
  #main-nav ul{
    flex-direction: column !important;
    align-items: center !important;
    gap: 22px !important;
    margin: 0 !important; padding: 0 !important; width: 100%;
  }

  /* Kopfzeile im Panel (Logo/Bereich) */
  #main-nav .nav-head{
    display: flex !important; align-items: center; gap: 10px;
    position: absolute; top: 16px; left: 16px; right: 60px; height: 44px;
    pointer-events: none;
  }

  /* Backdrop nicht nötig im Fullscreen-Panel */
  .nav-backdrop{ display: none !important; }
}

/* 4) „CHARGE DIGITAL“ immer sichtbar, platzsparend */
header .logo-link{ min-width: 0; flex: 1 1 auto; }
header .logo-link .logo-text{
  display: inline-block !important;
  max-width: 65vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: #007bff; font-weight: 700;
}
@media (max-width: 360px){
  header .logo-link .logo-text{ font-size: 1.05em; line-height: 1.1; }
}

/* 5) Helle Call-Taste NUR auf der Startseite (mobile) */
.fab-call{ display: none; }
@media (max-width: 1024px){
  .fab-call{
    display: grid; place-items: center;
    position: fixed; right: 16px; bottom: 16px;
    width: 56px; height: 56px; border-radius: 50%;
    text-decoration: none; font-size: 24px; z-index: 900;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
  }
}
/* helle Variante NUR auf der Startseite */
@media (max-width: 768px){
  body.home .fab-call{
    background: linear-gradient(#ffffff, #f6f9ff);
    border: 1px solid #e3ebff;
    color: #0a5be0;
    box-shadow: 0 10px 22px rgba(15, 50, 140, .12);
    width: 52px; height: 52px; font-size: 22px; right: 14px; bottom: 14px;
  }
  body.home .fab-call:hover{
    background: linear-gradient(#ffffff, #eef4ff);
    border-color: #d6e4ff;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(15, 50, 140, .16);
  }
}
@media (max-width: 480px){
  body.home .fab-call{ width: 48px; height: 48px; font-size: 20px; right: 12px; bottom: 12px; }
}

/* 6) Kleines Mobile-Spacing-Finetuning (zieht nichts kaputt) */
@media (max-width: 768px){
  .container{ width: 90%; }
  .hero h2{ margin-bottom: var(--space-2) !important; }
  .hero p{ margin-bottom: var(--space-4) !important; }
  .hero-buttons{ gap: var(--space-2) !important; }
  .btn{ width: 100%; text-align: center; }
  .service-grid, .why-us ul, .package-grid{ gap: var(--space-3) !important; }
  .main-content .container{ padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

/* 7) Safety: nie horizontale Scrollbar */
html, body{ max-width: 100%; overflow-x: hidden; }

/* — How we work / So arbeiten wir — */
.how-we-work{
  background:#f7faff; border:1px solid #d6e4ff; border-left:4px solid #1f6fff;
  border-radius:14px; padding:24px 20px; box-shadow:0 6px 18px rgba(23,87,255,.08);
}
.how-we-work h4{ margin:0 0 12px; color:#0a5be0; }
.how-we-work .steps{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px;
}
.how-we-work .step{
  background:#fff; border:1px solid #eef3ff; border-radius:12px; padding:16px;
  box-shadow:0 4px 12px rgba(23,87,255,.06);
}
.how-we-work .step-title{
  display:flex; align-items:center; gap:10px; margin:0 0 8px; color:#0056b3; font-weight:700;
}
.how-we-work .num{
  width:28px; height:28px; border-radius:999px; display:grid; place-items:center;
  background:#eaf1ff; color:#1f6fff; font-weight:800; font-size:.95em;
}

/* — Legal (Impressum/Datenschutz) mobil gut lesbar — */
.legal-page{ max-width:900px; margin:0 auto; }
.legal-page h1,.legal-page h2,.legal-page h3{ line-height:1.25; margin:0 0 var(--space-3); }
.legal-page p,.legal-page li{ font-size:1.05rem; line-height:1.7; }
.legal-page table{ width:100%; border-collapse:collapse; }
.legal-page table, .legal-page th, .legal-page td{ border:1px solid #e8eefc; }
.legal-page th, .legal-page td{ padding:10px; vertical-align:top; }
.legal-page a{ word-break:break-word; }
.legal-page pre, .legal-page code{ white-space:pre-wrap; word-break:break-word; }
@media (max-width:768px){
  .legal-page, .main-content{ padding:60px 0 !important; }
  .legal-page p, .legal-page li{ font-size:1rem; }
}

/* — Menü-Schließen-Button sichtbar im Fullscreen-Menü — */
.menu-close{
  position:absolute; top:14px; right:14px; width:40px; height:40px; border:0; cursor:pointer;
  display:none; border-radius:999px; background:rgba(255,255,255,.65);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  font-size:22px; line-height:1; color:#0a5be0; box-shadow:0 4px 14px rgba(0,0,0,.12);
}
@media (max-width:768px){ #main-nav.active .menu-close{ display:inline-flex; align-items:center; justify-content:center; z-index:1; } }

/* — Safety: nie horizontales Scrollen — */
html, body{ max-width:100%; overflow-x:hidden; }

/* === Stable Wrapping (minimal, zerstört nichts) ================== */
/* A) Überschriften: keine Silbentrennung, keine harten Umbrüche mitten im Wort */
.hero h2,
section h3,
.service-detail-item h4,
.package-item h5,
.logo-text {
  -webkit-hyphens: none !important;
  hyphens: none !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

/* Optional: auf sehr kleinen Screens Headline-Breite leicht begrenzen */
@media (max-width: 420px){
  .hero h2,
  section h3 { max-width: 26ch; margin-left: auto; margin-right: auto; }
}

/* B) Fließtext DE: elegante Silbentrennung */
html[lang="de"] p,
html[lang="de"] li {
  -webkit-hyphens: auto !important;
  hyphens: auto !important;
  overflow-wrap: break-word;
  word-break: normal !important;
}

/* C) Fließtext EN: keine automatische Silbentrennung */
html[lang="en"] p,
html[lang="en"] li {
  -webkit-hyphens: manual !important;
  hyphens: manual !important;
  overflow-wrap: break-word;
  word-break: normal !important;
}

/* D) Lange Links/Emails/URLs dürfen immer umbrechen */
a, .contact-info a, .legal-page a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* E) Utility: bestimmte Begriffe nie umbrechen */
.no-break { white-space: nowrap !important; }

/* === Fix: Deutsche Wörter nicht zerreißen ================== */

/* Keine Trennung in Überschriften */
h1, h2, h3, h4, h5, h6,
.service-item h4,
.package-item h5,
.logo-text {
  -webkit-hyphens: none !important;
  hyphens: none !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* Deutsche Fließtexte: elegante Silbentrennung */
html[lang="de"] p,
html[lang="de"] li,
html[lang="de"] summary {
  -webkit-hyphens: auto !important;
  hyphens: auto !important;
  word-break: normal !important;
  overflow-wrap: break-word;
}


html[lang="de"] h1, html[lang="de"] h2, html[lang="de"] h3,
html[lang="de"] h4, html[lang="de"] h5, html[lang="de"] h6,
html[lang="de"] p,  html[lang="de"] li,  html[lang="de"] summary,
.logo-text, .service-item h4, .package-item h5 {
  -webkit-hyphens: none !important;
  hyphens: none !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}


/* --- Hotfix: Close-Button im mobilen Menü sichtbar machen --- */
@media (max-width: 768px){
  #main-nav{ z-index: 1001; } /* Panel sicher über Inhalt */
  #main-nav.active > .menu-close{
    display: inline-flex !important;
    align-items: center; justify-content: center;
    position: absolute; top: 14px; right: 14px;
    width: 40px; height: 40px; border: 0; border-radius: 999px;
    background: rgba(255,255,255,.65);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    font-size: 22px; line-height: 1; color: #0a5be0;
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
    z-index: 1002; /* über dem Panel */
  }
}

/* --- Sale UI --- */
.sale-bar{
  background: linear-gradient(90deg,#0a58ff0d,#0a58ff1a);
  border: 1px solid #dbe6ff;
  border-radius: 12px;
  padding: .8rem 1rem;
  margin: .8rem 0 1.2rem;
  font-weight: 500;
}

.package-item{ position: relative; }

/* weiches Badge */
.badge-soft{
  display:inline-block;
  font-size:.8rem;
  padding:.25rem .55rem;
  border-radius:999px;
  background:#eef3ff;
  color:#0a5be0;
  margin-bottom:.35rem;
}

/* rotes Rabatt-Ribbon */
.ribbon{
  position:absolute;
  top:12px; left:-8px;
  background:#ff3b30;
  color:#fff;
  font-weight:700;
  font-size:.85rem;
  padding:.35rem .6rem;
  transform:rotate(-8deg);
  border-radius:6px;
  box-shadow:0 8px 18px rgba(255,59,48,.18);
}

.price-wrap{
  margin:.6rem 0 .2rem;
  display:flex; gap:.6rem; align-items:baseline;
}
.price{ font-weight:700; }
.price-old{
  color:#98a2b3;
  text-decoration:line-through;
}
.price-new{
  color:#0a5be0;
  font-size:1.35rem;
}
.price-note{
  font-size:.85rem;
  color:#667085;
  margin:.1rem 0 .8rem;
}

/* leichte Hervorhebung für Aktionskarten */
.package-sale{
  outline:1px solid #e7eeff;
  box-shadow:0 10px 26px rgba(15,50,140,.06);
  transition:transform .15s ease, box-shadow .15s ease;
}
.package-sale:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(15,50,140,.10);
}

/* Preise in Paketen mittig zentrieren */
.package-item .price-wrap {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Preise in einer Zeile mittig */
.package-item .price-wrap {
  display: flex;
  justify-content: center;
  align-items: baseline; /* sorgt für schöne Ausrichtung von hoch/tief gestellten Preisen */
  gap: 10px;             /* Abstand zwischen alt/neu */
  margin: 10px 0;
  text-align: center;
}

/* Paket-Preise: eine Zeile, zentriert – Datum darunter bleibt */
.package-item .price-wrap{
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: baseline !important; /* schöne Ausrichtung */
  gap: .6rem !important;
}
.package-item .price{ display: inline-block; }  /* falls irgendwo block gesetzt wurde */

/* EN-Karten (einzelne Textpreise) ebenfalls mittig */
.package-item p.price{
  text-align: center;
  margin: .6rem 0 .2rem;
  font-weight: 700;
}

/* Extra Abstand oberhalb der Hero-Buttons */
.hero .hero-buttons {
  margin-top: 24px;   /* nach Bedarf anpassen (z. B. 20–40px) */
}

/* Blog Artikel */
.blog-post {
  max-width: 850px;
  margin: 0 auto 60px;
  padding: 28px;
  background: #fff;
  border: 1px solid #d6e4ff;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(23,87,255,.06);
}

.blog-post h2 {
  color: #0056b3;
  font-size: 2em;
  margin-bottom: 10px;
}

.blog-meta {
  font-size: 0.9em;
  color: #777;
  margin-bottom: 20px;
}

.blog-img {
  width: 100%;
  border-radius: 12px;
  margin: 20px 0;
}

.blog-post h3 {
  margin-top: 24px;
  color: #1b70ca;
}

.blog-card .thumb{
  width:100%;
  display:block;
  border-radius:12px;
  margin-bottom:12px;
  object-fit:cover;
}

.blog-overview .blog-block {
  background: #fff;
  border: 1px solid #d6e4ff;
  border-radius: 12px;
  padding: 28px;
  margin-bottom: 28px;
  box-shadow: 0 6px 16px rgba(23,87,255,.06);
}

.blog-overview .blog-block h2 {
  margin-top: 0;
  color: #0056b3;
}

.blog-overview .blog-meta {
  font-size: 0.9em;
  color: #777;
  margin: 6px 0 16px;
}

.blog-overview .blog-block {
  background: #fff;
  border: 1px solid #d6e4ff;
  border-radius: 12px;
  padding: 28px;
  margin-bottom: 28px;
  box-shadow: 0 6px 16px rgba(23,87,255,.06);
}

.blog-overview .blog-block h2 {
  margin-top: 0;
  color: #0056b3;
}

.blog-overview .blog-meta {
  font-size: 0.9em;
  color: #777;
  margin: 6px 0 16px;
}

.blog-overview .thumb {
  width: 100%;
  border-radius: 12px;
  margin: 20px 0;
}

.benefit-block {
  margin: 18px 0;
  padding: 16px;
  background: #f8faff;
  border: 1px solid #d6e4ff;
  border-left: 4px solid #1e66ff;
  border-radius: 10px;
}

/* Chips / Tags */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 14px;padding:0;list-style:none}
.chips li{padding:6px 10px;border:1px solid #d6e4ff;border-radius:999px;background:#f8faff;font-size:.9rem}

/* Key Block */
.kblock{border:1px solid #d6e4ff;background:#f8faff;border-radius:12px;padding:18px 16px;margin:14px 0}
.kblock-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.kblock-head h3{margin:0;color:#0b56c0;font-size:1.05rem}
.kdot{width:10px;height:10px;border-radius:50%;background:#1e66ff;display:inline-block;box-shadow:0 0 0 4px rgba(30,102,255,.12)}
.klist{margin:0;padding-left:18px}
.klist li{margin:6px 0}

/* Steps / Timeline */
.steps{display:grid;gap:10px;margin:14px 0}
.step{display:flex;gap:12px;align-items:flex-start;border:1px solid #e6eeff;border-radius:10px;padding:12px;background:#fff;box-shadow:0 4px 10px rgba(23,87,255,.05)}
.snum{flex:0 0 30px;height:30px;display:inline-grid;place-items:center;border-radius:999px;background:#1e66ff;color:#fff;font-weight:700}
.step h4{margin:0 0 4px;color:#0b56c0;font-size:1rem}
.step p{margin:0}

/* Quote */
.quote{margin:18px 0;background:#f5f9ff;border:1px solid #e0ebff;border-radius:12px;padding:16px}
.quote blockquote{margin:0;font-size:1.05rem;line-height:1.5}
.quote figcaption{margin-top:6px;color:#667;font-size:.92rem}

/* FAQ (CSS only) */
.faq details{border:1px solid #e6eeff;border-radius:10px;background:#fff;padding:10px 12px;margin:8px 0;box-shadow:0 3px 8px rgba(23,87,255,.05)}
.faq summary{cursor:pointer;font-weight:600;color:#0b56c0;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq details p{margin:8px 0 2px}

/* Info bar */
.infobar{margin:14px 0;padding:12px 14px;border:1px dashed #cfe0ff;background:#f7fbff;border-radius:10px}

/* Author */
.authorbox{display:flex;gap:12px;align-items:flex-start;border:1px solid #e6eeff;border-radius:12px;padding:12px;background:#fff}
.authorbox img{width:52px;height:52px;object-fit:cover;border-radius:50%}
.authorbox h5{margin:0 0 4px;color:#0b56c0}
.authorbox p{margin:0;color:#445}