/* Reset & base */
*{box-sizing:border-box}html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:#0f172a;background:#fff}
:root{--brand:#0ea5e9;--ink:#0f172a;--muted:#475569;--line:#e5e7eb;--bg:#f8fafc;--card:#fff;--shadow:0 8px 26px rgba(2,6,23,.06)}
.container{max-width:1180px;margin-inline:auto;padding-inline:clamp(12px,3vw,18px)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* Topbar */
.topbar{background:#f0fff7;border-bottom:1px solid #c6f6d5}
.topbar-inner{display:flex;align-items:center;justify-content:flex-end;gap:10px;height:36px;font-size:.95rem}
.wa-link{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:#065f46;font-weight:700}
.wa-link:hover{text-decoration:underline}

/* Header */
.site-header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--line)}
.header-grid{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.brand img{display:block;height:48px;width:auto}
.nav-toggle{display:none;background:#fff;border:1px solid var(--line);padding:8px 10px;border-radius:10px}
.nav-list{display:flex;gap:12px;list-style:none;margin:0;padding:0}
.nav-list a{text-decoration:none;color:var(--ink);font-weight:600;padding:8px 10px;border-radius:10px}
.nav-list a:hover{background:#f0f9ff;color:var(--brand)}
@media (max-width:880px){.nav-toggle{display:inline-flex}.nav-list{display:none;position:absolute;right:12px;top:100px;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;min-width:230px;box-shadow:var(--shadow)}.nav-list.show{display:flex}}

/* Hero */
.hero{position:relative;min-height:56vh;display:grid;align-items:center}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.62) contrast(1.05)}
.hero-inner{position:relative;color:#fff;padding-block:clamp(32px,7vw,72px);text-align:center}
.hero-inner h1{margin:0 0 8px;font-size:clamp(1.9rem,3.8vw,3rem)}
.hero-inner p{margin:0 0 18px;font-size:clamp(1rem,1.8vw,1.25rem);color:#e6f4ff}
.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;padding:10px 14px;border-radius:12px;background:var(--brand);color:#fff;text-decoration:none;font-weight:700;box-shadow:0 8px 20px rgba(14,165,233,.22)}
.btn:hover{transform:translateY(-1px)}
.btn-ghost{background:#fff;color:var(--brand);border:1px solid var(--brand);box-shadow:none}
.btn-ghost:hover{background:#f0f9ff}

/* Brand strip */
#brand-strip{padding-block:10px}
.brand-scroll{display:grid;grid-auto-flow:column;grid-auto-columns:max-content;gap:22px;overflow-x:auto;padding:10px 4px;scroll-snap-type:x mandatory}
.brand-scroll img{height:44px;width:auto;filter:grayscale(100%);opacity:.9;scroll-snap-align:start;transition:all .2s ease}
.brand-scroll img:hover{filter:none;opacity:1;transform:translateY(-2px)}
@media (min-width:980px){.brand-scroll{grid-auto-flow:row;grid-template-columns:repeat(7,1fr);overflow:visible}.brand-scroll img{justify-self:center}}

/* Tiles */
#service-modes{padding-block:28px}
.grid-2{display:grid;gap:24px;grid-template-columns:1fr}
@media (min-width:980px){.grid-2{grid-template-columns:1fr 1fr}}
.tile{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.tile-media{height:260px;background-size:cover;background-position:center}
.tile-body{padding:16px 16px 18px;display:grid;gap:10px}
.list{margin:0;padding:0 0 0 18px}
.list li{margin:4px 0}

/* Sections */
section.container{padding-block:28px}
h2{font-size:clamp(1.3rem,2.2vw,1.8rem);margin:4px 0 12px}
.muted{color:var(--muted)}
.grid-3{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:980px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.card{border:1px solid var(--line);border-radius:14px;padding:14px;background:#fff;box-shadow:var(--shadow)}
.note{border:1px dashed var(--line);border-radius:12px;padding:12px 14px;background:#f8fafc;color:#0f172a;box-shadow:var(--shadow)}

/* Form */
.form{display:grid;gap:12px;max-width:820px}
.form .row{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:800px){.form .row{grid-template-columns:1fr 1fr}}
label{display:grid;gap:6px;font-weight:600;color:#0f172a}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font:inherit;background:#fff}
textarea{resize:vertical}

/* Kontakt */
.contact{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:980px){.contact{grid-template-columns:1.1fr 1fr}}
.row-inline{display:flex;gap:10px;flex-wrap:wrap}
.map{width:100%;min-height:280px}
.map-ph{height:100%;display:grid;place-items:center;border:1px dashed var(--line);border-radius:12px;color:#64748b;background:#fff}

/* Footer */
.site-footer{border-top:1px solid var(--line);padding-block:18px;background:#fff;margin-top:12px}
.footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.footer a{color:#334155;text-decoration:none}
.footer a:hover{text-decoration:underline}
.trademark-note{margin-top:8px;color:#64748b;font-size:.85rem}

/* Extra spacing under Versand description */
.tile-body .spacer{height:12px}


/* ====== Topbar V2 (two-line hotline + icons) ====== */
.topbarV2{background:#ffffff;border-bottom:1px solid #e6f6f4}
.topbarV2-inner{display:flex;align-items:center;justify-content:flex-end;gap:14px;height:54px}
.hotline-stack{display:flex;flex-direction:column;line-height:1.15;align-items:flex-end}
.hotline-label{font-size:.92rem;color:#0ea5e9;font-weight:700}
.hotline-number{font-size:1.1rem;color:#0ea5e9;text-decoration:none;font-weight:800}
.hotline-number:hover{text-decoration:underline}
.hotline-icons{display:flex;gap:8px}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:6px;text-decoration:none;color:#fff}
.icon-btn.wa{background:#25D366}
.icon-btn.tel{background:#0ea5e9}
@media (max-width: 520px){
  .topbarV2-inner{justify-content:center}
  .hotline-stack{align-items:center}
}

/* Consistent spacing: add margin between description and list in both tiles */
.tile-body p + .list { margin-top: 10px; }
/* Ensure buttons align baseline by giving tile-body equal min-heights on desktop */
@media (min-width:980px){
  #service-modes .tile-body{min-height: 260px;}
}
/* PDF download link styles */
.pdf-download { margin-top: 10px; }
.pdf-download a { text-decoration: none; font-weight: 700; }
.pdf-download a:hover { text-decoration: underline; }


/* ===== Header layout with large logo + right contact ===== */
.site-header{padding-block:8px}
.header-grid{align-items:center; gap:20px}
.brand img{height:220px; width:auto; display:block} /* ~4-5x größer */
.header-contact{margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:6px}
.hotline-label{font-size:1rem; color:#0ea5e9; font-weight:800}
.hotline-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.hotline-number{font-size:1.25rem; font-weight:800; color:#0ea5e9; text-decoration:none}
.hotline-number:hover{text-decoration:underline}
.icon-btn{display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:6px; color:#fff; text-decoration:none}
.icon-btn.wa{background:#25D366}
.icon-btn.tel{background:#0ea5e9}
@media (max-width:900px){
  .brand img{height:140px}
  .header-contact{align-items:center}
  .site-header{padding-block:6px}
}
@media (max-width:640px){
  .brand img{height:110px}
  .header-grid{flex-direction:column; align-items:center}
  .header-contact{order:2}
  .nav{order:3}
}


/* === Sticky Header Fix (mobile & desktop) === */
:root{ --header-h: 72px; }
@media (max-width: 880px){ :root{ --header-h: 80px; } }

.site-header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background:#fff;
  box-shadow: 0 2px 10px rgba(2,6,23,.06);
}
.header-grid{
  min-height: var(--header-h);
}

/* Compact mobile logo to keep header usable */
@media (max-width: 880px){
  .brand img{ height: 56px !important; }
}

/* Mobile dropdown should appear *below* sticky header */
@media (max-width: 880px){
  .nav-list{
    position: fixed;
    right: 12px;
    top: calc(var(--header-h) + 8px);
    z-index: 1200;
  }
}



/* ===== Mobile fixed topbar to prevent navigation shifting ===== */
:root{ --topbar-h: 0px; }
@media (max-width: 880px){
  :root{ --topbar-h: 38px; }
  #mobile-topbar{
    position: fixed; top: 0; left: 0; right: 0;
    height: var(--topbar-h);
    background:#ffffff; border-bottom:1px solid #e6f6f4; z-index: 1200;
  }
  .mtb-inner{display:flex; align-items:center; justify-content:space-between; gap:8px; height:100%}
  .mtb-label{font-size:.85rem; color:#0ea5e9; font-weight:800}
  .mtb-number{font-size:1rem; font-weight:800; color:#0ea5e9; text-decoration:none}
  .mtb-icons{display:flex; gap:6px}
  .mtb-btn{display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:6px; color:#fff; text-decoration:none; font-weight:800; font-size:.75rem}
  .mtb-btn.wa{background:#25D366}
  .mtb-btn.tel{background:#0ea5e9}
  /* Hide header's hotline block on mobile to avoid double */
  .header-contact, .header-hotline{display:none !important;}
  /* Offset sticky header below fixed topbar */
  .site-header{ top: var(--topbar-h) !important; }
  /* Ensure page content isn't hidden under bars */
  body{ padding-top: var(--topbar-h); }
  /* Mobile dropdown should sit below both bars */
  .nav-list{ top: calc(var(--topbar-h) + var(--header-h) + 8px) !important; }
}


/* ==== Cleanup: no separate mobile topbar, keep header sticky & compact ==== */
:root{ --header-h: 72px; }
@media (max-width: 880px){ :root{ --header-h: 64px; } }

.site-header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background:#ffffff !important;
  border-bottom:1px solid var(--line);
  box-shadow: 0 2px 10px rgba(2,6,23,.06);
}
.header-grid{min-height: var(--header-h)}

/* Hotline styles (ensure not default blue text links) */
.hotline-label{color:#0ea5e9; font-weight:800}
.hotline-number{color:#0ea5e9 !important; text-decoration:none !important; font-weight:900}
.hotline-number:hover{text-decoration:underline !important}
.icon-btn{color:#fff; text-decoration:none}

/* Mobile scaling */
@media (max-width: 880px){
  .brand img{height:56px}
  .hotline-label{font-size:.85rem}
  .hotline-number{font-size:1rem}
}

/* Prevent hero content being hidden under sticky header on iOS */
.hero{scroll-margin-top: var(--header-h);}


/* === Mobile fixed header with JS-calculated offset === */
@media (max-width: 880px){
  .site-header{ position: fixed !important; top: 0 !important; left: 0; right: 0; z-index: 1200; }
  body{ padding-top: var(--header-h) !important; }
  .nav-list{ position: fixed; right:12px; top: calc(var(--header-h) + 8px); z-index: 1300; }
}


/* ==== Mobile header constant height & compact hotline === */
@media (max-width: 880px){
  :root{ --header-h: 64px !important; }
  .site-header{ position: fixed !important; top:0; left:0; right:0; z-index:1200; }
  body{ padding-top: var(--header-h) !important; }
  .brand img{ height:48px !important; }
  .header-grid{ min-height: var(--header-h) !important; align-items:center; }
  /* Hotline compact single line */
  .hotline-label{ display:none !important; }
  .hotline-row{ gap:6px !important; }
  .hotline-number{ font-size: .95rem !important; white-space: nowrap !important; }
  /* Mobile dropdown positioning below fixed header */
  .nav-list{ position: fixed !important; right:12px; top: calc(var(--header-h) + 6px) !important; z-index:1300; }
  .nav-toggle{ position: static !important; } /* keep inside header */
}

/* Prevent large blank top gap in hero */
.hero{ margin-top: 0 !important; }


/* ===== Robust fixed header (no growth on scroll) ===== */
:root{ --header-h: 64px; }

.site-header{
  position: fixed; top:0; left:0; right:0;
  height: var(--header-h);
  z-index: 1200;
  background:#ffffff;
  border-bottom:1px solid var(--line);
  box-shadow: 0 2px 10px rgba(2,6,23,.06);
}
.header-grid{
  display:flex; align-items:center; justify-content:space-between;
  height: 100%; gap:12px; overflow:hidden;
}
.brand img{ height:48px; width:auto; display:block }
.header-contact, .header-hotline{ display:flex; align-items:center; gap:8px; max-width:60%; overflow:hidden }
.hotline-label{ font-weight:800; color:#0ea5e9; display:none } /* hide label on mobile */
.hotline-row{ display:flex; align-items:center; gap:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.hotline-number{ color:#0ea5e9 !important; text-decoration:none !important; font-weight:900; font-size:.98rem }
.icon-btn{ width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border-radius:6px; color:#fff; text-decoration:none }
.icon-btn.wa{ background:#25D366 } .icon-btn.tel{ background:#0ea5e9 }

/* Body offset so content doesn't hide under fixed header */
body{ padding-top: var(--header-h); }

/* iOS safe area support */
@supports (padding-top: env(safe-area-inset-top)){
  .site-header{ padding-top: env(safe-area-inset-top) }
  body{ padding-top: calc(var(--header-h) + env(safe-area-inset-top)) }
}

/* Mobile nav */
.nav-toggle{ display:none; }
@media (max-width:880px){
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; height:36px; padding:0 12px; border:1px solid var(--line); border-radius:10px; background:#fff }
  .nav-list{ display:none; position:fixed; right:12px; top: calc(var(--header-h) + 8px); z-index:1300;
             flex-direction:column; gap:8px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px; min-width:230px; box-shadow:0 8px 24px rgba(2,6,23,.15) }
  .nav-list.show{ display:flex }
  .header-contact, .header-hotline{ max-width:45% }
}

/* Prevent any extra top margin on hero */
.hero{ margin-top:0 !important; }


/* === Larger logo (5x size) while keeping layout === */
:root{ --header-h: 260px; }

.site-header{
  height: var(--header-h);
  align-items:center;
}
.brand img{
  height:240px !important;
  width:auto;
  display:block;
}
.header-grid{
  align-items:center;
}
body{
  padding-top: var(--header-h);
}

/* Mobile adjustments */
@media (max-width:880px){
  :root{ --header-h: 140px; }
  .brand img{ height:120px !important; }
  .site-header{ height: var(--header-h); }
  body{ padding-top: var(--header-h); }
}


/* === v18: Logo 3x bigger on desktop & mobile (based on v16) === */
/* Desktop: logo ~240px * 3 = 720px; header ~260px * 3 ≈ 780px */
@media (min-width:881px){
  :root{ --header-h: 780px; }
  .site-header{ height: var(--header-h); }
  .brand img{ height: 720px !important; width: auto; display:block; }
  body{ padding-top: var(--header-h); }
  .header-grid{ align-items:center; }
}

/* Mobile: logo ~120px * 3 = 360px; header ~140px * 3 ≈ 420px */
@media (max-width:880px){
  :root{ --header-h: 420px; }
  .site-header{ height: var(--header-h); }
  .brand img{ height: 360px !important; width:auto; display:block; }
  body{ padding-top: var(--header-h); }
  .header-grid{ align-items:center; }
}


/* === v19: Adjusted logo sizes === */
@media (min-width:881px){
  :root{ --header-h: 200px; }
  .site-header{ height: var(--header-h); }
  .brand img{ height: 170px !important; width:auto; display:block; }
  body{ padding-top: var(--header-h); }
  .header-grid{ align-items:center; }
}

@media (max-width:880px){
  :root{ --header-h: 80px; }
  .site-header{ height: var(--header-h); }
  .brand img{ height: 64px !important; width:auto; display:block; }
  body{ padding-top: var(--header-h); }
  .header-grid{ align-items:center; }
}


/* === v20: High-quality WhatsApp SVG icon === */
.icon-btn.wa{ background: transparent !important; padding: 0; width: 30px; height: 30px; }
.icon-btn.wa svg{ display:block; width: 100%; height: 100%; }


/* v21: Ensure WA SVG displays as original icon */
.icon-btn.wa{ background: transparent !important; width:30px; height:30px; padding:0; }
.icon-btn.wa svg{ display:block; width:100%; height:100%; }


/* v22: Use official WhatsApp SVG via <img>, and ensure mobile hotline block is visible right of logo */
.icon-btn.wa{ background: transparent !important; padding:0; width:30px; height:30px; }
.icon-btn.wa .wa-svg{ display:block; width:100%; height:100%; }

@media (max-width:880px){
  .header-contact, .header-hotline{ display:flex !important; align-items:center; gap:8px; margin-left:auto; }
  .hotline-label{ display:none !important; }
  .hotline-number{ font-size:1rem; white-space:nowrap; }
  .brand{ order:1 }
  .header-contact{ order:2 }
  .nav{ order:3; }
}


/* v23: Mobile header layout - logo left, phone + WhatsApp center, menu right */
@media (max-width:880px){
  .header-grid{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; }
  .brand{ grid-column:1; }
  .mobile-contact{ grid-column:2; display:flex; align-items:center; justify-content:center; gap:8px; }
  .nav{ grid-column:3; justify-self:end; }
  .hotline-number{ font-size:1rem; font-weight:900; color:#0ea5e9; text-decoration:none; white-space:nowrap; }
  .icon-btn.wa{ background:transparent !important; width:30px; height:30px; padding:0; }
  .icon-btn.wa .wa-svg{ display:block; width:100%; height:100%; }
  /* Ensure any previous header-contact doesn't hide this */
  .header-contact, .header-hotline{ display:none !important; }
}


/* v24: Ensure mobile number + WhatsApp are visible in header center */
@media (max-width:880px){
  :root{ --header-h: 96px; }
  .site-header{ height: var(--header-h); }
  body{ padding-top: var(--header-h); }
  .header-grid{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; overflow:visible !important; }
  .brand{ grid-column:1; justify-self:start; }
  .mobile-contact{ grid-column:2; display:flex; align-items:center; justify-content:center; gap:10px; }
  .nav{ grid-column:3; justify-self:end; }
  .hotline-number{ font-size:1.05rem; font-weight:900; color:#0ea5e9; text-decoration:none; white-space:nowrap; }
  .icon-btn.wa{ width:30px; height:30px; background:transparent !important; padding:0; }
  .icon-btn.wa svg{ display:block; width:100%; height:100%; }
  /* Hide any alternate hotline blocks on mobile */
  .header-contact, .header-hotline{ display:none !important; }
}


/* v25: Mobile header shows .header-contact centered (phone + WhatsApp) */
@media (max-width:880px){
  :root{ --header-h: 96px; }
  .site-header{ height: var(--header-h); }
  body{ padding-top: var(--header-h); }
  .header-grid{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; overflow:visible !important; }
  .brand{ grid-column:1; justify-self:start; }
  .header-contact{ grid-column:2; display:flex !important; flex-direction:column; align-items:center; gap:2px; }
  .hotline-label{ display:none !important; }
  .hotline-row{ display:flex; align-items:center; gap:8px; }
  .hotline-number{ font-size:1.05rem; font-weight:900; color:#0ea5e9 !important; text-decoration:none !important; white-space:nowrap; }
  .icon-btn.wa{ width:30px; height:30px; background:transparent !important; padding:0; }
  .icon-btn.wa img, .icon-btn.wa svg{ display:block; width:100%; height:100%; }
  .nav{ grid-column:3; justify-self:end; }
}


/* v26: Tighter mobile header so phone number fits */
@media (max-width:880px){
  :root{ --header-h: 88px; } /* slightly lower but enough */
  .site-header{ height: var(--header-h); }
  body{ padding-top: var(--header-h); }
  .header-grid{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:6px; }
  .header-contact{ grid-column:2; display:flex !important; align-items:center; justify-content:center; max-width:100%; }
  .hotline-row{ display:flex; align-items:center; gap:6px; max-width:100%; overflow:hidden; }
  .hotline-number{ font-size:.92rem !important; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 78vw; }
  .hotline-number .muted{ display:none !important; } /* hide (Mobil) on mobile to save space */
  .icon-btn.wa{ width:28px; height:28px; padding:0; }
  .nav-toggle{ transform: scale(0.92); } /* slightly smaller menu button */
}