/* ═══════════════════════════════════════════════════════
   HELPET – main.css
   Kraftwerk Marketing
   Alle Styles aus dem Mockup, sauber als externes CSS
═══════════════════════════════════════════════════════ */

/* ── VARIABLES ── */
:root {
  --red:       #CC1F29;
  --red-dark:  #A8161F;
  --blue:      #003B6F;
  --blue-mid:  #0D5294;
  --blue-lt:   #EBF2F9;
  --orange:    #E8820A;
  --orange-lt: #FEF3E5;
  --white:     #FFFFFF;
  --cream:     #F7F5F2;
  --text:      #1A2635;
  --text-md:   #3D5166;
  --text-lt:   #6B7F91;
  --border:    #DDE5ED;
  --navy:      #091828;
  --f-head:    'Oswald', sans-serif;
  --f-body:    'DM Sans', system-ui, sans-serif;
  --shadow-sm: 0 2px 8px rgba(0,59,111,.07);
  --shadow-md: 0 8px 28px rgba(0,59,111,.12);
  --shadow-lg: 0 16px 48px rgba(0,59,111,.18);
  --radius:    10px;
  --container: 1180px;
}

/* ── RESET ── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--f-body); color: var(--text); background: var(--white); line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
svg { display: inline-block; vertical-align: middle; }

/* ── LAYOUT ── */
.container { max-width: var(--container); margin: 0 auto; padding: 0 28px; }

/* ── TYPOGRAPHY ── */
.eyebrow {
  font-family: var(--f-body);
  font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--blue-mid); display: block; margin-bottom: 10px;
}
h2.stitle {
  font-family: var(--f-head);
  font-size: clamp(26px, 3.6vw, 42px);
  font-weight: 600; line-height: 1.1;
  color: var(--blue); text-transform: uppercase; letter-spacing: .02em;
}
h2.stitle span { color: var(--red); }
.sub { font-size: 15px; color: var(--text-md); margin-top: 10px; max-width: 520px; line-height: 1.7; }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-head); font-size: 13px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 12px 24px; border-radius: 4px;
  cursor: pointer; border: 2px solid transparent;
  transition: all .2s; white-space: nowrap;
}
.btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.btn-red   { background: var(--red);   color: #fff; }
.btn-red:hover   { background: var(--red-dark); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(204,31,41,.32); }
.btn-blue  { background: var(--blue);  color: #fff; }
.btn-blue:hover  { background: var(--blue-mid); transform: translateY(-1px); }
.btn-orange { background: var(--orange); color: #fff; }
.btn-orange:hover { background: #c96f00; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(232,130,10,.32); }
.btn-white { background: #fff; color: var(--red); }
.btn-white:hover { background: #f0f0f0; transform: translateY(-1px); }
.btn-ow    { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.btn-ow:hover    { border-color: #fff; background: rgba(255,255,255,.09); }

/* ══ EMERGENCY BAR ══ */
.ebar { background: var(--orange); color: #fff; padding: 10px 0; }
.ebar-in { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.pdot { width: 8px; height: 8px; border-radius: 50%; background: #fff; flex-shrink: 0; animation: pdot 1.6s ease infinite; }
@keyframes pdot { 0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,.6); } 60% { box-shadow: 0 0 0 7px rgba(255,255,255,0); } }
.etxt { font-family: var(--f-head); font-size: 13px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; }
a.elink { display: inline-flex; align-items: center; gap: 6px; background: rgba(0,0,0,.18); color: #fff; padding: 5px 14px; border-radius: 3px; font-family: var(--f-head); font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; transition: background .2s; }
a.elink:hover { background: rgba(0,0,0,.30); }
a.elink svg { width: 13px; height: 13px; }

/* ══ NAV ══ */
.nav { position: sticky; top: 0; z-index: 200; background: var(--blue); box-shadow: 0 2px 14px rgba(0,0,0,.30); }
.navi { display: flex; align-items: center; height: 62px; }
.nlogo { font-family: var(--f-head); font-size: 22px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; margin-right: 28px; flex-shrink: 0; display: flex; align-items: center; gap: 9px; }
.nlogo span { color: var(--red); }
.ncross { width: 24px; height: 24px; position: relative; flex-shrink: 0; }
.ncross::before, .ncross::after { content: ''; position: absolute; background: var(--red); border-radius: 2px; }
.ncross::before { width: 6px; height: 24px; left: 9px; top: 0; }
.ncross::after  { width: 24px; height: 6px; left: 0; top: 9px; }
.nlinks { display: flex; align-items: center; flex: 1; }
.nlinks a { font-family: var(--f-head); font-size: 11px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.68); padding: 0 11px; height: 62px; display: flex; align-items: center; border-bottom: 3px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; }
.nlinks a:hover, .nlinks a.current-menu-item { color: #fff; border-color: rgba(255,255,255,.30); }
.nlinks a.on, .nlinks a.current_page_item { color: #fff; border-color: var(--red); }
.nact { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nwa { display: flex; align-items: center; gap: 5px; color: rgba(255,255,255,.65); font-size: 13px; transition: color .15s; }
.nwa:hover { color: #fff; }
.nwa svg { width: 14px; height: 14px; }

/* ══ HERO ══ */
.hero { position: relative; min-height: 620px; display: flex; align-items: center; overflow: hidden; background: var(--blue); }
.hero-svg-bg { position: absolute; inset: 0; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(0,28,56,.92) 0%, rgba(0,45,88,.78) 42%, rgba(0,28,56,.60) 100%); }
.hero-in { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 380px; gap: 52px; align-items: center; padding: 72px 0; }
.hero-in--single { grid-template-columns: 1fr; }
.hero-in--single .hero-content { max-width: 820px; }
.hero--claim .hero-claim-h1 { font-family: var(--f-head); font-size: clamp(30px, 4.6vw, 52px); font-weight: 700; line-height: 1.05; text-transform: none; letter-spacing: -.01em; color: #fff; margin-bottom: 18px; }
.hero--claim .hero-ey { color: var(--orange); font-weight: 700; letter-spacing: .12em; }
.hero--claim .hero-sub { max-width: 640px; }
.hero-ey { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-body); font-size: 11px; font-weight: 500; letter-spacing: .17em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 14px; }
.hero-ey::before { content: ''; display: block; width: 22px; height: 2px; background: var(--red); }
.hero h1 { font-family: var(--f-head); font-size: clamp(36px, 5.5vw, 64px); font-weight: 700; line-height: 1.0; text-transform: uppercase; letter-spacing: .02em; color: #fff; margin-bottom: 16px; }
.hero h1 .ac { color: var(--red); }
.hero-sub { font-size: 16px; color: rgba(255,255,255,.75); line-height: 1.7; max-width: 450px; margin-bottom: 28px; }
.hero-ctas { display: flex; gap: 11px; flex-wrap: wrap; margin-bottom: 32px; }
.hero-trust { display: flex; gap: 20px; flex-wrap: wrap; }
.titem { display: flex; align-items: center; gap: 7px; font-size: 13px; color: rgba(255,255,255,.58); }
.titem svg { width: 13px; height: 13px; color: rgba(255,255,255,.32); }

/* Hero Panel */
.hpanel { background: rgba(255,255,255,.08); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.13); border-radius: var(--radius); overflow: hidden; }
.hph { background: var(--red); padding: 14px 19px; display: flex; align-items: center; gap: 8px; }
.hph svg { width: 17px; height: 17px; color: #fff; }
.hph span { font-family: var(--f-head); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.hpb { padding: 16px 19px; }
.hpi { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.hpi:last-of-type { border: none; }
.hpic { width: 32px; height: 32px; border-radius: 7px; background: rgba(255,255,255,.10); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hpic svg { width: 15px; height: 15px; color: rgba(255,255,255,.75); }
.hpn { font-family: var(--f-head); font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: #fff; display: block; }
.hpp { font-size: 11px; color: rgba(255,255,255,.42); display: block; margin-top: 1px; }
.hpcta { margin-top: 14px; display: block; width: 100%; text-align: center; }

/* ══ SERVICES ══ */
.svcs { padding: 80px 0; }
.svcs-head { margin-bottom: 40px; }
.svcs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sc { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: #fff; transition: all .25s; }
.sc:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: transparent; }
.sc-img { height: 180px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; background: var(--blue-lt); }
.sc-img svg { width: 52px; height: 52px; opacity: .18; }
.sc-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,40,80,.22), transparent 55%); }
.sbadge { position: absolute; top: 11px; left: 11px; z-index: 2; font-family: var(--f-head); font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 3px 9px; border-radius: 3px; background: var(--blue); color: #fff; }
.sbadge-r { background: var(--red); }
.sbadge-o { background: var(--orange); }
.sc-body { padding: 18px 20px; }
.sc-body h3 { font-family: var(--f-head); font-size: 17px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--blue); margin-bottom: 6px; }
.sc-body p { font-size: 13px; color: var(--text-md); line-height: 1.65; margin-bottom: 13px; }
.sc-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 11px; border-top: 1px solid var(--border); }
.sc-price { font-family: var(--f-head); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-lt); }
.sc-lnk { font-family: var(--f-head); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--red); transition: letter-spacing .2s; }
.sc:hover .sc-lnk { letter-spacing: .13em; }

/* ══ VALUES ══ */
.values { padding: 76px 0; background: var(--blue); position: relative; overflow: hidden; }
.values::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,0,0,.10) 0%, transparent 55%); }
.val-in { position: relative; z-index: 2; display: grid; grid-template-columns: 320px 1fr; gap: 64px; align-items: start; }
.val-left h2 { font-family: var(--f-head); font-size: clamp(26px, 3.5vw, 38px); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: #fff; margin-bottom: 16px; }
.val-left h2 span { color: var(--red); }
.val-left p { font-size: 14px; color: rgba(255,255,255,.6); line-height: 1.75; margin-bottom: 24px; }
.val-left .eyebrow { color: rgba(255,255,255,.38); }
.val-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: rgba(255,255,255,.07); border-radius: var(--radius); overflow: hidden; }
.vi { background: rgba(0,0,0,.14); padding: 28px 24px; transition: background .2s; }
.vi:hover { background: rgba(0,0,0,.24); }
.vi-icon { width: 42px; height: 42px; border-radius: 9px; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; }
.vio { background: rgba(232,130,10,.22); }
.vir { background: rgba(204,31,41,.22); }
.vil { background: rgba(255,255,255,.10); }
.vi-icon svg { width: 20px; height: 20px; color: #fff; }
.vi h3 { font-family: var(--f-head); font-size: 15px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #fff; margin-bottom: 7px; }
.vi p { font-size: 13px; color: rgba(255,255,255,.58); line-height: 1.7; }

/* ══ TEAM ══ */
.team { padding: 80px 0; background: var(--cream); }
.team-head { margin-bottom: 38px; }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tc { background: #fff; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); transition: all .25s; }
.tc:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: transparent; }
.tc-photo { height: 180px; background: var(--blue-lt); display: flex; align-items: center; justify-content: center; position: relative; background-size: cover; background-position: center top; }
.tc-photo svg { width: 60px; height: 60px; color: var(--blue); opacity: .16; }
.tc-spec { position: absolute; bottom: 9px; left: 50%; transform: translateX(-50%); font-family: var(--f-head); font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; background: var(--red); color: #fff; padding: 3px 10px; border-radius: 3px; white-space: nowrap; }
.tc-body { padding: 15px 17px; }
.tc-body h3 { font-family: var(--f-head); font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--blue); margin-bottom: 3px; }
.tc-body .role { font-size: 12px; color: var(--text-lt); }
.stars { display: flex; gap: 2px; margin-top: 8px; }
.star { width: 11px; height: 11px; color: var(--orange); }
.tc-rat { font-size: 11px; color: var(--text-lt); margin-top: 3px; }

/* ══ TESTIMONIALS ══ */
.testis { padding: 80px 0; }
.testis-head { margin-bottom: 38px; }
.testis-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tcard { background: var(--blue-lt); border-radius: var(--radius); padding: 24px 22px; position: relative; border: 1px solid rgba(0,59,111,.07); transition: box-shadow .2s; }
.tcard:hover { box-shadow: var(--shadow-md); }
.tmark { position: absolute; top: 14px; right: 18px; font-size: 56px; line-height: 1; color: rgba(0,59,111,.09); font-family: Georgia, serif; pointer-events: none; }
.tstars { display: flex; gap: 2px; margin-bottom: 12px; }
.ttext { font-size: 14px; color: var(--text); line-height: 1.72; margin-bottom: 16px; font-style: italic; }
.tauth { display: flex; align-items: center; gap: 10px; padding-top: 13px; border-top: 1px solid rgba(0,59,111,.09); }
.tav { width: 36px; height: 36px; border-radius: 50%; background: rgba(0,59,111,.14); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.tav svg { width: 18px; height: 18px; color: var(--blue); opacity: .38; }
.tname { font-family: var(--f-head); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--blue); }
.tpet { font-size: 11px; color: var(--text-lt); margin-top: 2px; }

/* ══ FAQ ══ */
.faq { padding: 80px 0; background: var(--cream); }
.faq-head { margin-bottom: 36px; }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 940px; }
.fi { background: #fff; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; cursor: pointer; }
.fiq { display: flex; align-items: center; justify-content: space-between; padding: 16px 19px; gap: 12px; user-select: none; }
.fiq span { font-family: var(--f-head); font-size: 13px; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; color: var(--blue); line-height: 1.3; }
.fii { width: 22px; height: 22px; border-radius: 50%; background: var(--blue-lt); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform .2s, background .2s; }
.fii svg { width: 12px; height: 12px; color: var(--blue); }
.fi.open .fii { background: var(--red); transform: rotate(45deg); }
.fi.open .fii svg { color: #fff; }
.fia { padding: 0 19px; max-height: 0; overflow: hidden; transition: max-height .3s ease, padding .3s; font-size: 13px; color: var(--text-md); line-height: 1.72; }
.fi.open .fia { max-height: 200px; padding: 0 19px 16px; }

/* ══ LOCATION ══ */
.loc { padding: 80px 0; }
.loc-in { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.locmap { height: 340px; border-radius: var(--radius); background: var(--blue-lt); display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); position: relative; overflow: hidden; }
.locmap svg { width: 52px; height: 52px; color: var(--blue); opacity: .22; }
.locmap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.locmap-lbl { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); font-family: var(--f-head); font-size: 9px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text-lt); white-space: nowrap; }
.locd { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.lodic { width: 36px; height: 36px; border-radius: 8px; background: var(--blue-lt); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lodic svg { width: 17px; height: 17px; color: var(--blue); }
.lodt { font-size: 14px; color: var(--text-md); line-height: 1.6; }
.lodt strong { display: block; font-family: var(--f-head); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--blue); margin-bottom: 2px; }
.loc-acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }

/* ══ CTA BANNER ══ */
.ctab { background: var(--red); padding: 64px 0; position: relative; overflow: hidden; }
.ctab::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 80% 50%, rgba(255,255,255,.05), transparent 50%); }
.ctab-in { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.ctab-in h2 { font-family: var(--f-head); font-size: clamp(24px, 3.2vw, 38px); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #fff; margin-bottom: 8px; }
.ctab-in p { font-size: 15px; color: rgba(255,255,255,.78); max-width: 480px; line-height: 1.65; }
.ctab-btns { display: flex; gap: 10px; flex-wrap: wrap; }

/* ══ FOOTER ══ */
.foot { background: var(--navy); padding: 56px 0 26px; }
.foot-grid { display: grid; grid-template-columns: 200px 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.foot-brand {}
.flogo { font-family: var(--f-head); font-size: 20px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; margin-bottom: 10px; }
.flogo span { color: var(--red); }
.ftxt { font-size: 13px; color: rgba(255,255,255,.38); line-height: 1.7; }
.fsoc { display: flex; gap: 7px; margin-top: 16px; }
.fsoc-item { width: 30px; height: 30px; border-radius: 6px; background: rgba(255,255,255,.07); display: flex; align-items: center; justify-content: center; transition: background .2s; }
.fsoc-item:hover { background: rgba(255,255,255,.14); }
.fsoc-item svg { width: 14px; height: 14px; color: rgba(255,255,255,.5); }
.fcol h4 { font-family: var(--f-head); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.30); margin-bottom: 14px; }
.fcol a, .fcol p { display: block; font-size: 13px; color: rgba(255,255,255,.52); margin-bottom: 8px; transition: color .15s; line-height: 1.5; }
.fcol a:hover { color: #fff; }
.foot-hours { font-size: 12px; color: rgba(255,255,255,.28) !important; margin-top: 8px !important; }
.fbot { padding-top: 22px; border-top: 1px solid rgba(255,255,255,.07); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.fbot p, .fbot a { font-size: 11px; color: rgba(255,255,255,.22); }
.fbot a:hover { color: rgba(255,255,255,.55); }
.foot-credit { color: rgba(255,255,255,.12) !important; }
.fbot-links { display: flex; gap: 16px; }

/* ══ FLOATING WHATSAPP ══ */
.wafl { position: fixed; bottom: 24px; right: 24px; z-index: 999; width: 50px; height: 50px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(37,211,102,.4); transition: transform .2s, box-shadow .2s; }
.wafl:hover { transform: scale(1.1); box-shadow: 0 6px 24px rgba(37,211,102,.5); }
.wafl svg { width: 26px; height: 26px; color: #fff; }

/* ══ RESPONSIVE ══ */
@media (max-width: 1024px) {
  .hero-in    { grid-template-columns: 1fr; }
  .hpanel     { display: none; } /* Panel ab Tablet ausblenden */
  .svcs-grid  { grid-template-columns: repeat(2, 1fr); }
  .team-grid  { grid-template-columns: repeat(2, 1fr); }
  .val-in     { grid-template-columns: 1fr; gap: 40px; }
  .val-grid   { grid-template-columns: repeat(2, 1fr); }
  .foot-grid  { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .nlinks     { display: none; } /* Mobile Menü TODO */
  .svcs-grid  { grid-template-columns: 1fr; }
  .testis-grid{ grid-template-columns: 1fr; }
  .faq-grid   { grid-template-columns: 1fr; }
  .loc-in     { grid-template-columns: 1fr; }
  .ctab-in    { flex-direction: column; text-align: center; }
  .foot-grid  { grid-template-columns: 1fr; }
  .fbot       { flex-direction: column; align-items: flex-start; }
  .etxt       { display: none; } /* Emergency Bar kürzen */
}

/* ══ HAMBURGER + MOBILE MENU ══ */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px; height: 36px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  margin-left: 8px;
}
.hamburger span {
  display: block;
  width: 100%; height: 2px;
  background: rgba(255,255,255,.8);
  border-radius: 2px;
  transition: transform .25s, opacity .25s;
  transform-origin: center;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0,20,40,.55);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
.mobile-menu.open {
  opacity: 1;
  pointer-events: all;
}
.mm-inner {
  position: absolute;
  top: 0; right: 0;
  width: min(340px, 88vw);
  height: 100%;
  background: var(--blue);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
}
.mobile-menu.open .mm-inner {
  transform: translateX(0);
}
.mm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  flex-shrink: 0;
}
.mm-logo {
  font-family: var(--f-head);
  font-size: 20px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: #fff;
}
.mm-logo span { color: var(--red); }
.mm-close {
  background: transparent; border: none;
  cursor: pointer; padding: 4px;
  color: rgba(255,255,255,.6);
  transition: color .2s;
}
.mm-close:hover { color: #fff; }
.mm-close svg { width: 20px; height: 20px; }
.mm-nav { flex: 1; padding: 12px 0; }
.mm-nav ul { list-style: none; }
.mm-nav a {
  display: block;
  padding: 13px 22px;
  font-family: var(--f-head);
  font-size: 14px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.72);
  border-left: 3px solid transparent;
  transition: color .15s, border-color .15s, background .15s;
}
.mm-nav a:hover,
.mm-nav .current-menu-item a {
  color: #fff;
  border-color: var(--red);
  background: rgba(255,255,255,.05);
}
.mm-foot {
  padding: 20px 22px 28px;
  border-top: 1px solid rgba(255,255,255,.1);
  flex-shrink: 0;
}
.mm-contact {
  margin-top: 14px;
  text-align: center;
}
.mm-contact a {
  font-family: var(--f-head);
  font-size: 13px; letter-spacing: .06em;
  color: rgba(255,255,255,.45);
  transition: color .2s;
}
.mm-contact a:hover { color: #fff; }

@media (max-width: 768px) {
  .hamburger { display: flex; }
  .nwa       { display: none; }
  .nlinks    { display: none; }
}

/* ═══════════════════════════════════════════════════════
   PAGE / SINGLE TEMPLATE
═══════════════════════════════════════════════════════ */
.page-main {
    padding: 60px 0 80px;
    min-height: 60vh;
    background: #fff;
}
.page-title {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(28px, 4vw, 48px);
    color: #003B6F;
    margin: 0 0 32px;
    line-height: 1.15;
}
.page-body {
    max-width: 800px;
    font-size: 17px;
    line-height: 1.8;
    color: #333;
}
.page-body h2 { font-family: 'Oswald', sans-serif; color: #003B6F; font-size: 28px; margin: 40px 0 12px; }
.page-body h3 { font-family: 'Oswald', sans-serif; color: #003B6F; font-size: 22px; margin: 32px 0 10px; }
.page-body p  { margin: 0 0 20px; }
.page-body ul, .page-body ol { padding-left: 24px; margin: 0 0 20px; }
.page-body li { margin-bottom: 8px; }
.page-body img { max-width: 100%; height: auto; border-radius: 8px; margin: 24px 0; }
.page-body a { color: #003B6F; text-decoration: underline; }
.post-meta { font-size: 13px; color: #888; margin-bottom: 16px; }
.post-thumb { margin-bottom: 32px; border-radius: 12px; overflow: hidden; }
.post-thumb img { width: 100%; display: block; }

/* ============================================================
   PAGE HERO (.phero)
   ============================================================ */
.phero {
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.phero--blau   { background: linear-gradient(135deg, #001e3c 0%, #003B6F 100%); }
.phero--orange { background: linear-gradient(135deg, #b36200 0%, #E8820A 100%); }
.phero--dunkel { background: linear-gradient(135deg, #050e1a 0%, #091828 100%); }

.phero-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1;
}
.phero-in {
  position: relative;
  z-index: 2;
  padding: 80px 0 64px;
  max-width: 760px;
}
.phero-content { color: #fff; }
.eyebrow--light { color: rgba(255,255,255,.7); }
.phero-h1 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 700;
  line-height: 1.1;
  margin: 12px 0 20px;
  text-transform: uppercase;
}
.phero-sub {
  font-size: 1.05rem;
  line-height: 1.65;
  color: rgba(255,255,255,.85);
  max-width: 560px;
  margin-bottom: 28px;
}
.phero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.phero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 20px;
  margin-bottom: 16px;
}
.phero-badge--dark { background: rgba(0,0,0,.25); border-color: rgba(255,255,255,.4); }

/* Page fallback article */
.page-article-head { min-height: 200px; }
.page-article-body { padding: 60px 0; }

/* ============================================================
   CONTENT TEXT (.ctext)
   ============================================================ */
.ctext { padding: 80px 0; }
.ctext--bg-grau  { background: var(--light); }
.ctext--bg-blau  { background: #eef4fb; }
.ctext--bg-weiss { background: #fff; }

.ctext-in--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.ctext-in--split.ctext-in--img-links { direction: rtl; }
.ctext-in--split.ctext-in--img-links > * { direction: ltr; }
.ctext-in--full { max-width: 760px; margin: 0 auto; }

.ctext-img img {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,.12);
}
.prose p { margin-bottom: 1em; line-height: 1.75; color: var(--text-light); }
.prose ul { padding-left: 1.4em; margin-bottom: 1em; }
.prose li { margin-bottom: .5em; line-height: 1.65; color: var(--text-light); }
.prose strong { color: var(--text); }

@media (max-width: 768px) {
  .ctext-in--split { grid-template-columns: 1fr; gap: 32px; }
  .ctext-in--split.ctext-in--img-links { direction: ltr; }
}

/* ============================================================
   INFO CARDS (.icards)
   ============================================================ */
.icards { padding: 80px 0; background: #fff; }
.icards + .icards { padding-top: 72px; }

.icards-grid { display: grid; gap: 24px; }
.icards-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.icards-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.icards-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

.icard {
  background: #fff;
  border: 1px solid #e8ecf0;
  border-radius: 12px;
  padding: 28px 24px;
  transition: box-shadow .2s, transform .2s;
  text-decoration: none;
  display: block;
  color: inherit;
}
.icard:hover {
  box-shadow: 0 8px 32px rgba(0,59,111,.1);
  transform: translateY(-3px);
}
a.icard { cursor: pointer; }

.icard-icon {
  width: 48px; height: 48px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.icard-icon--blau   { background: rgba(0,59,111,.1); color: var(--blue); }
.icard-icon--rot    { background: rgba(204,31,41,.1); color: var(--red); }
.icard-icon--orange { background: rgba(232,130,10,.15); color: var(--orange); }
.icard-icon svg { width: 22px; height: 22px; }

.icard-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text);
  margin-bottom: 8px;
}
.icard-text {
  font-size: .9rem;
  line-height: 1.6;
  color: var(--text-light);
}
.icard-more {
  display: block;
  margin-top: 12px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--blue);
}

@media (max-width: 900px) {
  .icards-grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
  .icards-grid--cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .icards-grid--cols-2,
  .icards-grid--cols-3,
  .icards-grid--cols-4 { grid-template-columns: 1fr; }
}

/* ============================================================
   ACCORDION SECTION (.acc-section)
   ============================================================ */
.acc-section { padding: 80px 0; background: var(--light); }

/* ============================================================
   HIGHLIGHTS (.highlights)
   ============================================================ */
.highlights { padding: 48px 0; }
.highlights--blau  { background: var(--blue); }
.highlights--weiss { background: #fff; border-top: 1px solid #e8ecf0; border-bottom: 1px solid #e8ecf0; }

.hl-grid {
  display: grid;
  gap: 2px;
}
.hl-grid--2 { grid-template-columns: repeat(2, 1fr); }
.hl-grid--3 { grid-template-columns: repeat(3, 1fr); }
.hl-grid--4 { grid-template-columns: repeat(4, 1fr); }
.hl-grid--5 { grid-template-columns: repeat(5, 1fr); }

.hl-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px;
  text-align: center;
}
.highlights--blau .hl-item { border-right: 1px solid rgba(255,255,255,.15); }
.highlights--blau .hl-item:last-child { border-right: none; }

.hl-zahl {
  font-family: var(--font-heading);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 6px;
}
.highlights--blau .hl-zahl  { color: #fff; }
.highlights--weiss .hl-zahl { color: var(--blue); }

.hl-label {
  font-size: .82rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-weight: 500;
}
.highlights--blau .hl-label  { color: rgba(255,255,255,.7); }
.highlights--weiss .hl-label { color: var(--text-light); }

@media (max-width: 700px) {
  .hl-grid--4,
  .hl-grid--5 { grid-template-columns: repeat(2, 1fr); }
}


/* ============================================================
   UNTERSEITEN ACCORDION (.faq-item / .faq-q / .faq-a)
   ============================================================ */
.faq-list { display: flex; flex-direction: column; gap: 8px; }

.faq-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-heading);
  font-size: .95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--blue);
  line-height: 1.3;
  transition: background .15s;
}
.faq-q:hover { background: rgba(0,59,111,.04); }
.faq-q:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

.faq-arrow {
  width: 20px; height: 20px;
  flex-shrink: 0;
  transition: transform .3s ease;
  color: var(--blue);
}
.faq-item.open .faq-arrow { transform: rotate(180deg); }

/* Panel: hidden attribute = geschlossen, open class = geöffnet */
.faq-a {
  padding: 0 22px;
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease, padding .3s;
  font-size: .9rem;
  color: var(--text-light);
  line-height: 1.75;
}
/* Wenn [hidden] nicht gesetzt (JS entfernt es) UND .open auf parent */
.faq-item.open .faq-a {
  max-height: 800px;
  padding: 0 22px 20px;
}
/* [hidden] override – damit CSS-Transition funktioniert statt display:none */
.faq-a[hidden] {
  display: block !important; /* hidden=block damit max-height-Transition läuft */
  max-height: 0;
  padding: 0 22px;
}

/* Prose in accordion */
.faq-a.prose p:last-child { margin-bottom: 0; }
.faq-a ul { padding-left: 1.4em; margin-bottom: 1em; }
.faq-a li { margin-bottom: .4em; }


/* ============================================================
   LOGO IMAGE  (.nlogo-img)
   ============================================================ */
.nlogo-img {
  display: block;
  max-height: 52px;
  width: auto;
  object-fit: contain;
}
.nlogo-svg svg {
  display: block;
  max-height: 52px;
  width: auto;
}
/* Desktop-only / Mobile-only logo */
.nlogo-mob { display: none; }
@media (max-width: 768px) {
  .nlogo-desk { display: none; }
  .nlogo-mob  { display: block; }
}

/* Wenn kein Bild: Text-Logo bleibt wie gehabt */
.nlogo .ncross { /* bleibt unverändert */ }


/* ============================================================
   SPACING FIXES
   ============================================================ */

/* Mehr Luft zwischen allen Sektionen */
.ctext       { padding: 96px 0; }
.icards      { padding: 96px 0; }
.acc-section { padding: 96px 0; }
.highlights  { padding: 56px 0; }

/* Abstand vor Footer: letzte Section bekommt extra margin-bottom */
body > section:last-of-type,
.page-cta-last,
.cta,
.loc {
  margin-bottom: 0;
}

/* Wrapper um Seiteninhalt + Abstand zum Footer */
.site-content-end {
  padding-bottom: 0;
}

/* Footer bekommt selbst mehr Abstand nach oben */
.foot {
  margin-top: 0;
  border-top: 4px solid rgba(255,255,255,.06);
}

/* Section-Head: mehr Luft nach unten */
.section-head {
  margin-bottom: 56px;
}
.section-head .eyebrow {
  display: block;
  margin-bottom: 12px;
}
.section-head .stitle {
  margin-bottom: 16px;
}
.section-head .sdesc {
  max-width: 580px;
  margin: 0 auto;
}

/* Info-Cards: mehr Luft zwischen Karten */
.icards-grid { gap: 28px; }

/* Content-Text: mehr Luft im Split-Layout */
.ctext-in--split { gap: 72px; }

/* Accordion: Luft zwischen den Items */
.faq-list     { gap: 10px; }
.faq-item     { border-radius: 10px; }

/* Highlights: Trenner zwischen Items */
.highlights--weiss .hl-item {
  border-right: 1px solid #e8ecf0;
}
.highlights--weiss .hl-item:last-child { border-right: none; }

/* Page Hero: mehr Luft oben/unten */
.phero-in { padding: 96px 0 80px; }

/* Zwischen Accordion-Section und vorherigen Sektionen */
.acc-section + .highlights,
.icards + .acc-section,
.ctext + .icards,
.icards + .ctext {
  margin-top: 0; /* keine Dopplung – padding reicht */
}

/* Hintergrund-Wechsel erzeugen visuellen Abstand — zwischen gleichfarbigen
   Sektionen (beide weiss) trotzdem Trennlinie */
.ctext--bg-weiss + .ctext--bg-weiss,
.icards + .icards {
  border-top: 1px solid #f0f2f5;
}

/* Abstand der letzten Sektion zum Footer */
.foot { margin-top: 0; }
.phero ~ section:last-of-type,
.icards:last-of-type,
.ctext:last-of-type,
.acc-section:last-of-type { padding-bottom: 104px; }
.cta-page + .foot,
.pcta + .foot { margin-top: 0; }

/* Mobile: etwas kompakter aber noch luftig */
@media (max-width: 768px) {
  .ctext       { padding: 64px 0; }
  .icards      { padding: 64px 0; }
  .acc-section { padding: 64px 0; }
  .section-head { margin-bottom: 40px; }
  .phero-in { padding: 64px 0 56px; }
}


/* ============================================================
   GALERIE (.galerie)
   ============================================================ */
.galerie { padding: 64px 0 96px; }

/* Tabs */
.gal-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 48px;
}
.gal-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 2px solid var(--border);
  border-radius: 6px;
  background: #fff;
  font-family: var(--font-heading);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-light);
  cursor: pointer;
  transition: all .2s;
}
.gal-tab:hover { border-color: var(--blue); color: var(--blue); }
.gal-tab.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.gal-tab-count {
  background: rgba(255,255,255,.25);
  border-radius: 20px;
  padding: 1px 7px;
  font-size: .75rem;
}
.gal-tab.active .gal-tab-count { background: rgba(255,255,255,.2); }
.gal-tab:not(.active) .gal-tab-count { background: var(--light); color: var(--text-light); }

/* Panels */
.gal-panel { display: none; }
.gal-panel.active { display: block; }

/* Grid */
.gal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 900px) { .gal-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .gal-grid { grid-template-columns: repeat(2, 1fr); } }

/* Item */
.gal-item {
  display: block;
  text-decoration: none;
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 4/3;
}
.gal-item-inner {
  position: relative;
  width: 100%;
  height: 100%;
}
.gal-item-inner img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.gal-item:hover .gal-item-inner img { transform: scale(1.05); }
.gal-item-overlay {
  position: absolute; inset: 0;
  background: rgba(0,21,42,.45);
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .25s;
}
.gal-item-overlay svg { width: 36px; height: 36px; stroke: #fff; }
.gal-item:hover .gal-item-overlay,
.gal-item:focus-visible .gal-item-overlay { opacity: 1; }

/* Empty */
.gal-empty {
  text-align: center;
  padding: 80px 0;
  color: var(--text-light);
}
.gal-empty svg { width: 64px; height: 64px; margin: 0 auto 20px; stroke: var(--border); display: block; }

/* ── Lightbox ─────────────────────────────── */
.gal-lb {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.gal-lb[hidden] { display: none; }
.gal-lb-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,10,20,.92);
  z-index: 0;
}
.gal-lb-img-wrap {
  position: relative; z-index: 2;
  max-width: min(90vw, 1200px);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#gal-lb-img {
  max-width: 100%; max-height: 82vh;
  border-radius: 6px;
  object-fit: contain;
  display: block;
  box-shadow: 0 20px 80px rgba(0,0,0,.5);
}
.gal-lb-cap {
  color: rgba(255,255,255,.7);
  font-size: .85rem;
  margin-top: 12px;
  text-align: center;
  max-width: 600px;
}
.gal-lb-close,
.gal-lb-prev,
.gal-lb-next {
  position: absolute; z-index: 3;
  background: rgba(255,255,255,.1);
  border: none; border-radius: 50%;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .2s;
  color: #fff;
}
.gal-lb-close:hover,
.gal-lb-prev:hover,
.gal-lb-next:hover { background: rgba(255,255,255,.25); }
.gal-lb-close { top: 16px; right: 16px; }
.gal-lb-close svg { width: 22px; height: 22px; }
.gal-lb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.gal-lb-next { right: 16px; top: 50%; transform: translateY(-50%); }
.gal-lb-prev svg,
.gal-lb-next svg { width: 22px; height: 22px; }

/* ============================================================
   BLOG ARCHIV (.blog-arch)
   ============================================================ */
.blog-arch { padding: 64px 0 96px; }

/* Kategorie-Filter */
.blog-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 48px;
}
.blog-cat-tag {
  padding: 7px 16px;
  border: 2px solid var(--border);
  border-radius: 20px;
  font-family: var(--font-heading);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-light);
  text-decoration: none;
  transition: all .2s;
}
.blog-cat-tag:hover { border-color: var(--blue); color: var(--blue); }
.blog-cat-tag.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.blog-cat-tag span { opacity: .6; font-size: .7em; }

/* Blog Grid */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 56px;
}
.blog-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .blog-grid,
  .blog-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .blog-grid,
  .blog-grid--3 { grid-template-columns: 1fr; }
}

/* Blog Card */
.bcard {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s, transform .2s;
}
.bcard:hover {
  box-shadow: 0 8px 36px rgba(0,59,111,.1);
  transform: translateY(-3px);
}
.bcard-img-wrap {
  display: block;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--light);
  text-decoration: none;
}
.bcard-img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.bcard:hover .bcard-img { transform: scale(1.04); }
.bcard-img-placeholder {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px;
  color: var(--text-light);
  font-size: .8rem;
  font-family: var(--font-heading);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.bcard-img-placeholder svg { width: 40px; height: 40px; stroke: var(--border); }

.bcard-body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.bcard-cat {
  font-family: var(--font-heading);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--red);
  text-decoration: none;
  display: block;
}
.bcard-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}
.bcard-title a {
  color: var(--text);
  text-decoration: none;
  transition: color .2s;
}
.bcard-title a:hover { color: var(--blue); }
.bcard-excerpt {
  font-size: .88rem;
  line-height: 1.6;
  color: var(--text-light);
  margin: 0;
}
.bcard-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  color: var(--text-light);
  margin-top: auto;
}
.bcard-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--border);
}

/* Pagination */
.blog-pagi {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 48px;
}
.blog-pagi a,
.blog-pagi span {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: .85rem;
  font-family: var(--font-heading);
  color: var(--text-light);
  text-decoration: none;
  transition: all .2s;
}
.blog-pagi a:hover { border-color: var(--blue); color: var(--blue); }
.blog-pagi .current { background: var(--blue); border-color: var(--blue); color: #fff; }

/* Empty */
.blog-empty { text-align: center; padding: 60px 0; color: var(--text-light); }

/* ============================================================
   SINGLE ARTIKEL (.art-*)
   ============================================================ */

/* Header */
.art-head { position: relative; background: var(--navy); padding: 56px 0 0; }
.art-head--has-img { min-height: 440px; padding-bottom: 0; }
.art-head-img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
}
.art-head-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,21,42,.55) 0%, rgba(0,21,42,.75) 100%);
}
.art-head-in {
  position: relative; z-index: 2;
  max-width: 800px;
  padding: 24px 0 56px;
  color: #fff;
}
.art-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: .78rem;
  color: rgba(255,255,255,.6);
  margin-bottom: 20px;
}
.art-breadcrumb a { color: rgba(255,255,255,.75); text-decoration: none; }
.art-breadcrumb a:hover { color: #fff; }
.art-cat {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--orange);
  text-decoration: none;
  margin-bottom: 12px;
}
.art-title {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 24px;
  color: #fff;
}
.art-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}
.art-av {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,.3);
}
.art-meta-text { display: flex; flex-direction: column; gap: 2px; }
.art-author { font-weight: 600; font-size: .9rem; color: #fff; }
.art-meta-sub { font-size: .8rem; color: rgba(255,255,255,.6); }

/* Layout */
.art-main { padding: 64px 0 80px; }
.art-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 56px;
  align-items: start;
}
@media (max-width: 900px) {
  .art-layout { grid-template-columns: 1fr; }
  .art-sidebar { order: -1; }
}

/* Prose */
.prose-blog {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--text);
  max-width: 740px;
}
.prose-blog h2 {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--blue);
  margin: 48px 0 16px;
}
.prose-blog h3 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  margin: 32px 0 12px;
}
.prose-blog p { margin-bottom: 1.2em; color: var(--text-light); }
.prose-blog ul, .prose-blog ol { padding-left: 1.5em; margin-bottom: 1.2em; }
.prose-blog li { margin-bottom: .5em; color: var(--text-light); }
.prose-blog img { width: 100%; border-radius: 8px; margin: 24px 0; }
.prose-blog blockquote {
  border-left: 3px solid var(--blue);
  margin: 32px 0;
  padding: 16px 24px;
  background: var(--light);
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: var(--text-light);
}

/* Tags */
.art-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 40px 0;
  font-size: .85rem;
  color: var(--text-light);
}
.art-tag {
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 20px;
  text-decoration: none;
  color: var(--text-light);
  font-size: .8rem;
  transition: all .2s;
}
.art-tag:hover { border-color: var(--blue); color: var(--blue); }

/* Autor Box */
.art-author-box {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: var(--light);
  border-radius: 12px;
  padding: 24px;
  margin-top: 48px;
}
.art-author-av {
  width: 64px; height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.art-author-info strong { display: block; margin-bottom: 4px; color: var(--text); }
.art-author-info p { font-size: .88rem; color: var(--text-light); margin: 0; }

/* Sidebar */
.art-sidebar { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 24px; }

.art-back {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--blue);
  text-decoration: none;
}
.art-back svg { width: 16px; height: 16px; flex-shrink: 0; }
.art-back:hover { color: var(--red); }

.art-sb-box {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
}
.art-sb-title {
  font-family: var(--font-heading);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 12px;
}
.art-sb-cats { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.art-sb-cats a {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: .88rem;
  color: var(--text-light);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: color .2s;
}
.art-sb-cats li:last-child a { border-bottom: none; }
.art-sb-cats a:hover { color: var(--blue); }
.art-sb-cats span { font-size: .78rem; opacity: .6; }

.art-sb-cta {
  background: var(--blue);
  border-radius: 10px;
  padding: 20px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.art-sb-cta p { margin: 0; font-size: .88rem; color: rgba(255,255,255,.8); }
.btn-sm { padding: 9px 16px; font-size: .78rem; }

/* Verwandte Posts */
.art-related { padding: 0 0 80px; background: var(--light); }
.art-related .container { padding-top: 64px; }
.section-head--left { text-align: left; }
.section-head--left .stitle,
.section-head--left .sdesc { margin-left: 0; }


/* ============================================================
   NAV FIXES
   ============================================================ */

/* Desktop Menü: ul-wrapper, kein list-style, Wrapping erlaubt */
.nlinks-ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;          /* mehrzeilig wenn nötig */
  flex: 1;
  gap: 0;
}
.nlinks-ul li {
  list-style: none;
  display: flex;
  align-items: center;
}
/* Link-Styling: height auto statt fixed 62px damit Wrap funktioniert */
.nlinks a,
.nlinks-ul a {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  padding: 6px 12px;
  min-height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
  text-decoration: none;
}
.nlinks-ul a:hover,
.nlinks-ul .current-menu-item > a,
.nlinks-ul .current_page_item > a,
.nlinks-ul .current-menu-ancestor > a {
  color: #fff;
  border-bottom-color: var(--red);
}

/* Fallback-Menü Links (helpet_fallback_menu gibt <a> direkt aus) */
.nlinks > a {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  padding: 6px 12px;
  display: flex;
  align-items: center;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color .15s, border-color .15s;
}
.nlinks > a:hover { color: #fff; border-bottom-color: var(--red); }

/* Nav-Höhe passt sich an wenn mehrzeilig */
.navi {
  height: auto;
  min-height: 62px;
  flex-wrap: wrap;
  padding: 4px 0;
}

/* ── Mobile Menü Logo ── */
.mm-logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.mm-logo-img {
  max-height: 40px;
  width: auto;
  object-fit: contain;
  display: block;
}
.mm-logo-svg svg {
  max-height: 40px;
  width: auto;
  display: block;
}
/* Weiss-Filter für dunklen Hintergrund falls Logo dunkel ist */
.mm-logo-img,
.mm-logo-svg svg {
  filter: brightness(0) invert(1);
}


/* ============================================================
   WAYFINDER — "¿Cómo podemos ayudarte?"
   ============================================================ */
.wayfinder { padding: 96px 0; background: var(--light); }
.wf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 8px;
}
@media (max-width: 900px) { .wf-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .wf-grid { grid-template-columns: 1fr; } }

.wf-item {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 22px;
  text-decoration: none;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.wf-item:hover {
  border-color: var(--blue);
  box-shadow: 0 10px 34px rgba(0,59,111,.12);
  transform: translateY(-2px);
}
.wf-ico {
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: 10px;
  background: #EEF3F9;
  display: flex; align-items: center; justify-content: center;
}
.wf-ico svg { width: 24px; height: 24px; stroke: var(--blue); }
.wf-item--urg .wf-ico { background: #FFF1E6; }
.wf-item--urg .wf-ico svg { stroke: var(--orange); }
.wf-body { flex: 1; min-width: 0; }
.wf-q {
  display: block;
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 16px;
  color: var(--text);
  line-height: 1.2;
}
.wf-sub {
  display: block;
  font-size: 13px;
  color: var(--text-light);
  margin-top: 3px;
}
.wf-arrow {
  flex-shrink: 0;
  color: var(--border);
  transition: color .18s, transform .18s;
}
.wf-item:hover .wf-arrow { color: var(--blue); transform: translateX(3px); }
.wf-arrow svg { width: 20px; height: 20px; }

/* ============================================================
   STEPS — Ablauf als Tabs (1-2-3), farblich abgesetzt (blau)
   ============================================================ */
.steps { padding: 96px 0; background: linear-gradient(160deg,#002d5a,#003b6f); color:#fff; }
.steps .section-head .stitle { color:#fff; }
.steps .section-head .sdesc { color:rgba(255,255,255,.75); }
.steps-wrap { max-width: 960px; margin: 0 auto; }

.steps-tabs { display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; margin-bottom:36px; }
.steps-tab {
  display:flex; align-items:center; gap:12px; cursor:pointer;
  background:transparent; border:none; padding:10px 16px; border-radius:12px;
  color:rgba(255,255,255,.6); transition:color .2s, background .2s;
}
.steps-tab:hover { color:#fff; }
.steps-num {
  width:52px; height:52px; flex-shrink:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-head); font-size:26px; font-weight:700;
  background:rgba(255,255,255,.10); border:2px solid transparent; transition:all .25s;
}
.steps-tab-label { font-family:var(--f-head); font-weight:500; font-size:15px; text-align:left; max-width:150px; line-height:1.2; }
.steps-tab.is-active { color:#fff; }
.steps-tab.is-active .steps-num { background:var(--red); border-color:rgba(255,255,255,.5); transform:scale(1.06); }
.steps-sep { color:rgba(255,255,255,.3); font-size:20px; }

.steps-panels { position:relative; }
.steps-panel {
  display:none; gap:26px; align-items:center;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius:18px; padding:38px 40px;
}
.steps-panel.is-active { display:flex; animation:stepfade .4s ease; }
@keyframes stepfade { from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }
.steps-panel-ico {
  width:72px; height:72px; flex-shrink:0; border-radius:16px;
  background:rgba(255,255,255,.10); display:flex; align-items:center; justify-content:center; color:#fff;
}
.steps-panel-ico svg { width:36px; height:36px; }
.steps-panel-kicker { display:block; text-transform:uppercase; letter-spacing:.14em; font-size:11px; color:var(--orange); font-weight:700; margin-bottom:6px; }
.steps-panel-body h3 { font-family:var(--f-head); font-size:22px; color:#fff; margin-bottom:8px; }
.steps-panel-body p { color:rgba(255,255,255,.82); line-height:1.65; margin:0; }
@media (max-width:680px){
  .steps-tab-label{ display:none; }
  .steps-panel{ flex-direction:column; text-align:center; padding:30px 24px; }
}

/* ============================================================
   ALERT — dramatische Warnung (rot)
   ============================================================ */
.alertband { padding: 20px 0 72px; }
.alertband-in {
  display:flex; gap:28px; align-items:flex-start;
  background:linear-gradient(150deg,#b81c25,#CC1F29); color:#fff;
  border-radius:20px; padding:40px 44px;
  box-shadow:0 20px 60px rgba(204,31,41,.28);
}
.alertband-mark {
  flex-shrink:0; width:76px; height:76px; border-radius:16px;
  background:rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; color:#fff;
  animation:alertpulse 2s ease-in-out infinite;
}
.alertband-mark svg { width:42px; height:42px; }
@keyframes alertpulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.08);} }
.alertband-kicker { display:block; text-transform:uppercase; letter-spacing:.16em; font-size:12px; font-weight:700; color:rgba(255,255,255,.85); margin-bottom:8px; }
.alertband-title { font-family:var(--f-head); font-size:clamp(24px,3.2vw,34px); font-weight:700; line-height:1.12; color:#fff; margin-bottom:12px; }
.alertband-text { color:rgba(255,255,255,.92); font-size:17px; line-height:1.6; margin-bottom:18px; max-width:640px; }
.alertband-list { list-style:none; margin:0 0 22px; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:8px 26px; }
.alertband-list li { display:flex; align-items:center; gap:9px; font-weight:600; font-size:15px; }
.alertband-list svg { width:16px; height:16px; flex-shrink:0; opacity:.85; }
.alertband-ctas { display:flex; gap:12px; flex-wrap:wrap; }
.btn-white { background:#fff; color:var(--red); font-weight:700; }
.btn-white:hover { background:#f4f4f4; }
.btn-ghostw { background:transparent; color:#fff; border:2px solid rgba(255,255,255,.55); }
.btn-ghostw:hover { border-color:#fff; background:rgba(255,255,255,.1); }
@media (max-width:680px){
  .alertband-in{ flex-direction:column; gap:18px; padding:30px 24px; }
  .alertband-list{ grid-template-columns:1fr; }
}

/* ============================================================
   NAV — Dropdown-Untermenü (z. B. Especialidades ▸ Dermatología)
   ============================================================ */
.nlinks-ul { flex-wrap: nowrap; }            /* kein chaotischer Umbruch mehr */
.nlinks-ul > li { position: relative; }
.nlinks-ul .menu-item-has-children > a::after {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); opacity: .7;
}
.nlinks-ul .sub-menu {
  list-style: none; margin: 0; padding: 8px;
  position: absolute; top: 100%; left: 0; min-width: 220px;
  background: #fff; border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0,0,0,.22);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .18s, transform .18s, visibility .18s; z-index: 300;
}
.nlinks-ul > li:hover > .sub-menu,
.nlinks-ul > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nlinks-ul .sub-menu li { display: block; }
.nlinks-ul .sub-menu a {
  color: var(--blue); border: none; border-radius: 8px;
  padding: 10px 14px; min-height: 0; white-space: nowrap; font-size: 12px;
}
.nlinks-ul .sub-menu a:hover { background: var(--light); color: var(--blue); }

@media (max-width: 1180px) {
  .nlinks a, .nlinks-ul a { padding: 6px 9px; font-size: 11px; letter-spacing: .04em; }
}

/* ============================================================
   HEADER — Reservar hora in der oberen Leiste (rot)
   ============================================================ */
a.ebar-reservar {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--red); color: #fff;
  padding: 5px 15px; border-radius: 4px;
  font-family: var(--f-head); font-size: 11px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
  transition: background .2s, transform .2s;
}
a.ebar-reservar:hover { background: #b31a22; transform: translateY(-1px); }
a.ebar-reservar svg { width: 13px; height: 13px; }

/* Nav-Aktionsbereich: nur noch Hamburger (mobil) */
.nact { display: flex; align-items: center; gap: 12px; }
@media (min-width: 769px) { .nact { display: none; } }

/* ============================================================
   NAV — Centro Felino hervorgehoben (Katzen-Icon, grösser, Farbe)
   ============================================================ */
.nlinks-ul li.nav-felino > a {
  background: transparent;
  color: #fff !important;
  padding: 0 11px 0 34px;
  font-weight: 700;
  margin-left: 4px;
  position: relative;
}
.nlinks-ul li.nav-felino > a::before {
  content: "";
  position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 26px;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzkgOTAgNTM0IDY2MCc+PHBhdGggZmlsbD0nd2hpdGUnIGQ9J000MTQuODIsMzUzLjk5bDEuNjQtMjAuODRjNTEuMzMtMi42OSwxMzIuOS05OS44LDEyNS42MS0xNjYuODUtNDcuMDEsMjkuODUtNTUuNjcsMjMuMDktNzkuMywyLjQ2LTE1Ljg0LTEzLjgzLTM0Ljk5LTEyLjg5LTQxLjc3LTIyLjY1LTguMDItMTEuNTUsMS42Mi01Ni4yLDEuNjItNTYuMi01MC43LDIxLjkyLTkyLjAxLDcxLjEzLTExMi44MSwxMDUuMjQtMTcuOTIsMjkuMzctMzEuMjIsNTguNTEtNDEuMSw4NS4xLTE4LjMsNDkuMTktMjQuODUsODkuNjEtMjYuOTYsMTA2LjM4LS41OSw0LjcyLS45MSw5LjQ2LS45OSwxNC4yMWwtMy43NSwyMDkuODJjLS42NiwzNi45NSwxMy4zLDY5Ljg5LDM1LjcsOTQuNDktMTguNDgsMS45MS0zNy4wMiwxLjQ4LTU1LTIuOTktMzkuMi05LjcxLTc3LjczLTQ4LjM2LTcwLjMzLTg4LjMsMy4zOS0xOC4yNiwxNS4zMS0zNC43NywyNy45My01Mi4yMywxMi4yOS0xNy4wMiwyNS0zNC42MSwzMS43Ni01Ni4wNywxNS42Mi00OS41Ny05LjgyLTEwOC4xNi01Ni43LTEzMC41OS00Ni44Ni0yMi40NS0xMDguNDYtNS41MS0xMzcuMjgsMzcuNzUtNS42Niw4LjQ5LTMuMzYsMTkuOTksNS4xNCwyNS42NSw4LjUxLDUuNjQsMTkuOTgsMy4zNiwyNS42Ni01LjE0LDE4LjY4LTI4LjA0LDYwLjEzLTM5LjQ1LDkwLjUxLTI0LjksMzAuNCwxNC41NSw0Ny41Miw1My45OCwzNy40LDg2LjEyLTQuOTYsMTUuNzUtMTUuNCwzMC4yMi0yNi40Niw0NS41Mi0xNC40NiwyMC4wMS0yOS40MSw0MC43LTM0LjMxLDY3LjE0LTExLjMxLDYxLjA1LDQxLjQ0LDExNyw5Ny44MSwxMzAuOTcsMTMuMjgsMy4yOCwyNi42Nyw0Ljg1LDQwLjEsNS4wOSwyMS40MS4zOCw0Mi44OS0yLjY4LDY0LjEyLTcuNTQsMzIuMTYsMTYuMTIsNzAuNjksMTkuNzIsMTA3Ljk5LDQuNjUsMjUuMjEtMTAuMTgsNDcuOTUtMjguMSw2NC41Ny01NS43Myw2My4wNS0xMDQuODEsMTkuMDItMTk4LjIyLTUwLjcyLTI3Mi41MS0xNC42Mi0xNS41OC0yMS43NC0zNi43Ni0yMC4wNS01OC4wNlonLz48L3N2Zz4=") no-repeat center / contain;
}
.nlinks-ul li.nav-felino > a:hover {
  background: transparent; box-shadow: none; border-color: rgba(255,255,255,.30);
}

/* ============================================================
   CAROUSEL / GALERIE — 3 sichtbar, läuft durch
   ============================================================ */
.hcar-section { padding: 20px 0 88px; }
.hcar { position: relative; }
.hcar-viewport { overflow: hidden; width: 100%; border-radius: 14px; }
.hcar-track { display: flex; gap: 16px; transition: transform .55s cubic-bezier(.4,0,.2,1); will-change: transform; }
.hcar-slide { flex: 0 0 calc((100% - 32px) / 3); }
.hcar-slide img {
  display: block; width: 100%; height: 300px; object-fit: cover;
  border-radius: 14px; background: var(--light);
}
.hcar-arrow {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%;
  background: #fff; border: 1px solid var(--border); color: var(--blue);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,59,111,.14); transition: background .2s, transform .2s, color .2s; z-index: 2;
}
.hcar-arrow:hover { background: var(--blue); color: #fff; transform: scale(1.06); }
.hcar-arrow svg { width: 22px; height: 22px; }
.hcar-arrow:disabled { opacity: .35; cursor: default; }
.hcar-arrow:disabled:hover { background: #fff; color: var(--blue); transform: none; }

@media (max-width: 900px) {
  .hcar-slide { flex-basis: calc((100% - 16px) / 2); }
  .hcar-slide img { height: 240px; }
}
@media (max-width: 560px) {
  .hcar-slide { flex-basis: 100%; }
  .hcar-slide img { height: 260px; }
  .hcar-arrow { width: 40px; height: 40px; }
}

/* ============================================================
   MOBILE-VERBESSERUNGEN (Header + Cards)
   ============================================================ */

/* Info-Cards: Icon neben dem Text (kompakter) */
.icard { display: flex; align-items: flex-start; gap: 16px; }
.icard-icon { margin-bottom: 0; flex-shrink: 0; }
.icard-body { flex: 1; min-width: 0; }
.icard-title { margin-bottom: 6px; }

/* Orange Leiste mobil: nur Icons, grössere Touch-Flächen */
@media (max-width: 768px) {
  .ebar .elabel { display: none; }
  .ebar .pdot { display: none; }
  .ebar-in { gap: 12px; }
  a.elink,
  a.ebar-reservar {
    width: 48px; height: 48px; min-width: 48px;
    padding: 0; justify-content: center; border-radius: 8px;
  }
  a.elink svg,
  a.ebar-reservar svg { width: 22px; height: 22px; }
}

/* ============================================================
   FEINSCHLIFF: Cards, Spacing, Team, FAQ, Footer-Logo
   ============================================================ */

/* 1) 4-spaltige Info-Cards wieder gestapelt (Icon über Text) */
.icards-grid--cols-4 .icard { flex-direction: column; }
.icards-grid--cols-4 .icard-icon { margin-bottom: 14px; }

/* 2) Mehr Luft: Überschrift -> Text/Liste in content_text */
.ctext-body .stitle { margin-bottom: 26px; }
.ctext-body .eyebrow { margin-bottom: 14px; }
.prose p  { margin-bottom: 1.2em; }
.prose ul { margin-top: .4em; }
.prose li { margin-bottom: .75em; }

/* 3) Team: Foto 4:5, Spezialität als Text unter dem Namen (kein Badge) */
.tc-photo { height: auto; aspect-ratio: 4 / 5; }
.tc-spec {
  position: static; transform: none;
  display: block; background: none; color: var(--red);
  padding: 0; margin: 5px 0 6px; border-radius: 0;
  font-family: var(--f-head); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; white-space: normal; line-height: 1.3;
}
.tc-body { padding: 16px 18px 18px; }

/* 4) FAQ: Antwort klebt nicht mehr oben am Frage-Bereich */
.faq-item.open .faq-a { padding: 14px 22px 24px; }
.faq-a[hidden] { padding: 0 22px; }

/* 5) Footer-Logo (Bild statt Text) */
.flogo img,
.flogo-svg svg { max-height: 46px; width: auto; display: block; }
.flogo-svg { display: inline-block; }

/* ============================================================
   TEAM als Carousel (4 sichtbar, blättert bei mehr)
   ============================================================ */
.hcar--team .hcar-slide { flex: 0 0 calc((100% - 48px) / 4); display: flex; }
.hcar--team .hcar-slide .tc { width: 100%; }
/* Wenige Medicos: zentriert statt linksbündig */
.hcar--fits .hcar-track { justify-content: center; }

@media (max-width: 900px) {
  .hcar--team .hcar-slide { flex-basis: calc((100% - 16px) / 2); }
}
@media (max-width: 560px) {
  .hcar--team .hcar-slide { flex-basis: 100%; }
}


/* ── Carousel-Pfeile ausserhalb des Rasters ── */
.hcar-arrow { position: absolute; top: 50%; transform: translateY(-50%); }
.hcar-arrow:hover { transform: translateY(-50%) scale(1.06); }
.hcar-prev { left: -58px; }
.hcar-next { right: -58px; }
/* Wenn draussen kein Platz ist (schmaler als Container + Pfeile): an die Ränder legen */
@media (max-width: 1300px) {
  .hcar-prev { left: 8px; }
  .hcar-next { right: 8px; }
  .hcar-arrow { background: rgba(255,255,255,.94); box-shadow: 0 4px 16px rgba(0,0,0,.20); }
}

/* ============================================================
   HERO MIT TABS (4 HELPET-Säulen)
   ============================================================ */
.herotabs { position: relative; overflow: hidden; background: #002d5a; color: #fff; }
.herotabs .ht-bgs, .herotabs .ht-overlay { position: absolute; inset: 0; }
.ht-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity .6s ease; }
.ht-bg.is-active { opacity: 1; }
.ht-overlay { background: linear-gradient(180deg, rgba(0,20,44,.72), rgba(0,30,60,.82)); z-index: 1; }
.herotabs .container { position: relative; z-index: 2; display: flex; flex-direction: column; min-height: 680px; padding-top: 48px; padding-bottom: 0; }

.ht-eyebrow { color: var(--orange); font-family: var(--f-head); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: 13px; margin-bottom: 20px; }

/* Tabs */
.ht-tabs { display: flex; gap: 10px; margin-top: 0; }
.ht-tab { flex: 1 1 0; min-width: 0; }
.ht-tab {
  display: flex; flex-direction: column; gap: 5px; text-align: left;
  background: #fff; border: none;
  border-radius: 12px 12px 0 0; padding: 20px 22px; cursor: pointer;
  color: var(--blue); transition: background .2s, color .2s, transform .15s;
  position: relative;
}
.ht-tab:hover { background: #eef3f9; }
.ht-tab-label { font-family: var(--f-head); font-weight: 700; font-size: 21px; line-height: 1.12; text-transform: uppercase; letter-spacing: .01em; }
.ht-tab-sub { font-size: 14px; color: #5A6B80; }
.ht-tab.is-active { color: #fff; }
.ht-tab.is-active .ht-tab-sub { color: rgba(255,255,255,.85); }
.ht-tab--blau.is-active   { background: var(--blue); }
.ht-tab--rot.is-active    { background: var(--red); }
.ht-tab--orange.is-active { background: var(--orange); }
.ht-tab--blau.is-active::after   { background: #4a9fe0; }
.ht-tab--rot.is-active::after    { background: var(--red); }

/* Panels */
.ht-panels { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.herotabs .ht-eyebrow { margin-bottom: 24px; }
.ht-panel { display: none; max-width: 720px; animation: htfade .45s ease; }
.ht-panel.is-active { display: block; }
@keyframes htfade { from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }
.ht-headline { font-family: var(--f-head); font-size: clamp(30px, 4.4vw, 50px); font-weight: 700; line-height: 1.06; color: #fff; margin-bottom: 16px; }
.ht-sub { font-size: 18px; line-height: 1.55; color: rgba(255,255,255,.9); margin-bottom: 26px; max-width: 620px; }
.ht-ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* Mobil: Tabs als 2x2 Grid, kompakter */
@media (max-width: 760px) {
  .ht-tabs { flex-wrap: wrap; gap: 8px; margin-top: 0; }
  .ht-tab { flex: 1 1 42%; }
  .ht-tab { padding: 15px 16px; }
  .ht-tab-label { font-size: 16px; }
  .ht-tab-sub { font-size: 12px; }
  .herotabs .container { padding-top: 28px; padding-bottom: 0; min-height: 560px; }
  .ht-panels { min-height: 0; }
  .ht-ctas .btn { flex: 1 1 100%; justify-content: center; }
}


/* Hauptnavigation zentriert (wie die obere Leiste) */
@media (min-width: 769px) {
  .navi { justify-content: center; }
  .nlinks, .nlinks-ul { flex: 0 1 auto; }
}

/* Footer-Spalten als WP-Menü */
.fcol .fmenu { list-style: none; margin: 0; padding: 0; }
.fcol .fmenu li { display: block; }

/* ============================================================
   HERO-TABS — Mobil-Optimierung: Bild oben, Text darunter,
   ein CTA, Tabs als scrollbare Chips
   ============================================================ */
@media (max-width: 760px) {
  .herotabs { background: #002d5a; }

  /* Bild als Band oben statt Vollflächen-Hintergrund (kein Text auf Foto) */
  .herotabs .ht-bgs { position: relative; height: 200px; }
  .herotabs .ht-bg  { position: absolute; inset: 0; }
  .herotabs .ht-overlay { display: none; }

  /* Inhalt fliesst darunter auf einheitlichem Blau */
  .herotabs .container { position: static; min-height: 0; padding-top: 24px; padding-bottom: 26px; }
  .ht-panels { flex: none; min-height: 0; }
  .ht-eyebrow { margin-bottom: 12px; }
  .ht-headline { font-size: clamp(26px, 7vw, 34px); margin-bottom: 12px; }
  .ht-sub { font-size: 16px; margin-bottom: 20px; }

  /* Nur der primäre CTA, volle Breite */
  .ht-ctas .btn { flex: 1 1 100%; justify-content: center; }
  .ht-ctas .btn:not(:first-child) { display: none; }

  /* Tabs: kompakte, horizontal scrollbare Chips (nur Label) */
  .ht-tabs { flex-wrap: nowrap; overflow-x: auto; gap: 8px; margin-top: 22px;
             padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .ht-tabs::-webkit-scrollbar { display: none; }
  .ht-tab { flex: 0 0 auto; border-radius: 10px; padding: 11px 15px; }
  .ht-tab-sub { display: none; }
  .ht-tab-label { font-size: 14px; }
}

/* ============================================================
   WHATSAPP-BUTTON — global (WhatsApp-Grün, weiss, Icon davor)
   ============================================================ */
.btn-wa {
  background: #25D366; color: #fff !important; border-color: #25D366;
}
.btn-wa:hover {
  background: #1ebe5d; border-color: #1ebe5d;
  transform: translateY(-1px); box-shadow: 0 6px 18px rgba(37,211,102,.32);
}
.btn-wa::before {
  content: ""; width: 18px; height: 18px; flex-shrink: 0;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nd2hpdGUnPjxwYXRoIGQ9J00xNy40NzIgMTQuMzgyYy0uMjk3LS4xNDktMS43NTgtLjg2Ny0yLjAzLS45NjctLjI3My0uMDk5LS40NzEtLjE0OC0uNjcuMTUtLjE5Ny4yOTctLjc2Ny45NjYtLjk0IDEuMTY0LS4xNzMuMTk5LS4zNDcuMjIzLS42NDQuMDc1LS4yOTctLjE1LTEuMjU1LS40NjMtMi4zOS0xLjQ3NS0uODgzLS43ODgtMS40OC0xLjc2MS0xLjY1My0yLjA1OS0uMTczLS4yOTctLjAxOC0uNDU4LjEzLS42MDYuMTM0LS4xMzMuMjk4LS4zNDcuNDQ2LS41Mi4xNDktLjE3NC4xOTgtLjI5OC4yOTgtLjQ5Ny4wOTktLjE5OC4wNS0uMzcxLS4wMjUtLjUyLS4wNzUtLjE0OS0uNjY5LTEuNjEyLS45MTYtMi4yMDctLjI0Mi0uNTc5LS40ODctLjUtLjY2OS0uNTEtLjE3My0uMDA4LS4zNzEtLjAxLS41Ny0uMDEtLjE5OCAwLS41Mi4wNzQtLjc5Mi4zNzItLjI3Mi4yOTctMS4wNCAxLjAxNi0xLjA0IDIuNDc5IDAgMS40NjIgMS4wNjUgMi44NzUgMS4yMTMgMy4wNzQuMTQ5LjE5OCAyLjA5NiAzLjIgNS4wNzcgNC40ODcuNzA5LjMwNiAxLjI2Mi40ODkgMS42OTQuNjI1LjcxMi4yMjcgMS4zNi4xOTUgMS44NzEuMTE4LjU3MS0uMDg1IDEuNzU4LS43MTkgMi4wMDYtMS40MTMuMjQ4LS42OTQuMjQ4LTEuMjg5LjE3My0xLjQxMy0uMDc0LS4xMjQtLjI3Mi0uMTk4LS41Ny0uMzQ3eicvPjxwYXRoIGQ9J00xMiAwQzUuMzczIDAgMCA1LjM3MyAwIDEyYzAgMi4xMjcuNTU4IDQuMTIyIDEuNTMzIDUuODQ3TC4wNTcgMjMuODUyYS41LjUgMCAwMC42MTEuNjExbDYuMDA1LTEuNDc2QTExLjk0MiAxMS45NDIgMCAwMDEyIDI0YzYuNjI3IDAgMTItNS4zNzMgMTItMTJTMTguNjI3IDAgMTIgMHptMCAyMmMtMS45MiAwLTMuNzIyLS41MDgtNS4yNzctMS4zOTVsLS4zNjctLjIxMy0zLjgwMS45OTcuOTk3LTMuODAxLS4yMTQtLjM2N0E5Ljk0NSA5Ljk0NSAwIDAxMiAxMkMyIDYuNDc3IDYuNDc3IDIgMTIgMnMxMCA0LjQ3NyAxMCAxMC00LjQ3NyAxMC0xMCAxMHonLz48L3N2Zz4=") no-repeat center / contain;
}
/* Falls ein altes Inline-SVG im Button steckt: ausblenden (Icon kommt per ::before) */
.btn-wa svg { display: none; }

/* ============================================================
   HERO-TABS — Home-Tab (kompakt, nur Icon)
   ============================================================ */
.ht-tab--home { flex: 0 0 auto; align-items: center; justify-content: center; padding: 20px; }
.ht-tab--home svg { width: 24px; height: 24px; display: block; }
.ht-tab--home.is-active { background: var(--blue); color: #fff; }
@media (max-width: 760px) {
  .ht-tab--home { padding: 13px 15px; }
  .ht-tab--home svg { width: 20px; height: 20px; }
}

/* ============================================================
   RESPONSIVE HERO-BILDER (Desktop --bg / Mobil --bg-m)
   ============================================================ */
/* Höhere Spezifität (doppelte Klasse), damit das Bild den Farbverlauf der
   Farb-Klasse (.phero--blau etc.) sicher überschreibt. */
.phero.phero--hasbg { background-image: var(--bg) !important; background-size: cover; background-position: center; }
.hero.hero--hasbg   { background-image: var(--bg) !important; background-size: cover; background-position: center 30%; }
.ht-bg[style*="--bg"] { background-image: var(--bg); }

@media (max-width: 760px) {
  .phero.phero--hasbg { background-image: var(--bg-m) !important; }
  .hero.hero--hasbg   { background-image: var(--bg-m) !important; }
  .ht-bg[style*="--bg"] { background-image: var(--bg-m); }
}

/* ============================================================
   MAPS CONSENT-PLATZHALTER (CookieYes-Blocking)
   ============================================================ */
.locmap-consent {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center; padding: 24px;
  background: var(--blue-lt);
}
.locmap-consent svg { width: 40px; height: 40px; color: var(--blue); opacity: .5; }
.locmap-consent p { font-size: 14px; color: var(--text-md); max-width: 320px; line-height: 1.5; margin: 0; }
/* Sobald der iFrame durch Consent eine src bekommt, Platzhalter ausblenden */
.locmap iframe[src] ~ .locmap-consent { display: none; }

/* Maps-Consent: externer Link unter dem Button */
.locmap-ext { font-size: 13px; color: var(--text-md); text-decoration: underline; margin-top: 4px; }
.locmap-ext:hover { color: var(--blue); }