/* Lokale Schriftarten – keine externe Verbindung zu Google Fonts */
@font-face{
  font-family:"Inter";
  src:url("assets/fonts/inter-variable.ttf") format("truetype");
  font-weight:400 600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("assets/fonts/inter-italic-variable.ttf") format("truetype");
  font-weight:400 600;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:"Source Serif 4";
  src:url("assets/fonts/source-serif-4-variable.ttf") format("truetype");
  font-weight:300 700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Source Serif 4";
  src:url("assets/fonts/source-serif-4-italic-variable.ttf") format("truetype");
  font-weight:300 700;
  font-style:italic;
  font-display:swap;
}

/* ===========================================================
   Atila & Partner Immobilien — gemeinsame Styles (alle Seiten)
   =========================================================== */
/* Fonts: keine externen Google-Font-Aufrufe; datensparsame System-Font-Stacks. */

:root{
  --tann-dunkel:#1F3A2E; --tann-tief:#14271F; --tann-hell:#2C5142;
  --loss:#C9B79A; --loss-hell:#E8DECE; --loss-tief:#9B8870;
  --ziegel:#B8442E; --ziegel-tief:#9A3621;
  --anthrazit:#1B1B1A; --stein:#5C5C58; --nebel:#E6E4DE;
  --papier:#F7F5F0; --weiss:#FFFFFF; --karte:#FBFAF6;
  --serif:"Source Serif 4", Georgia, serif;
  --sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --container:1240px; --radius:4px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{font-family:var(--sans);font-size:16px;color:var(--anthrazit);background:var(--papier);line-height:1.55;overflow-x:clip;width:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* Skip-Link: nur sichtbar, wenn per Tastatur fokussiert */
.skip{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
  z-index:9999;
}
.skip:focus,
.skip:focus-visible{
  left:16px;
  top:16px;
  width:auto;
  height:auto;
  padding:10px 14px;
  background:var(--tann-tief);
  color:var(--weiss);
  border:2px solid var(--loss);
  border-radius:var(--radius);
  outline:none;
  font-weight:600;
}
.container{max-width:var(--container);margin:0 auto;padding:0 24px}

h1,h2,h3,h4{font-family:var(--serif);font-weight:300;letter-spacing:-0.01em;color:var(--tann-tief);line-height:1.15}
h1{font-size:clamp(38px,5.6vw,68px)}
h2{font-size:clamp(28px,3.8vw,46px);line-height:1.18}
h3{font-size:23px;line-height:1.3;font-weight:400}
.lead{font-size:19px;line-height:1.55;color:var(--stein);max-width:62ch}
h2+.lead{margin-top:16px}
.section-head h2+.lead,.darksec h2+.lead{margin-top:0}
.eyebrow{display:flex;align-items:center;flex-wrap:wrap;gap:12px;font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;color:var(--tann-dunkel);margin-bottom:18px}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--tann-dunkel);flex:none}
.prep-label{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--loss-tief);border:1px dashed var(--loss-tief);border-radius:40px;padding:5px 14px;margin-bottom:18px}

/* Buttons — einheitlich Tonziegel */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;font-family:var(--sans);font-weight:600;font-size:15px;border-radius:var(--radius);transition:background .14s,color .14s,border-color .14s,transform .14s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--ziegel);color:var(--weiss)}
.btn-primary:hover{background:var(--ziegel-tief)}
.btn-secondary{border:1px solid var(--ziegel);color:var(--ziegel);background:transparent}
.btn-secondary:hover{background:var(--ziegel);color:var(--weiss)}
.btn-wa{background:#25D366;color:var(--weiss);border:1px solid #25D366}
.btn-wa:hover{background:#1ebe5a;border-color:#1ebe5a}
.btn-wa svg{color:var(--weiss);width:22px;height:22px}
.btn-text{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid var(--ziegel);border-radius:var(--radius);color:var(--ziegel);font-weight:500;font-size:14px;background:transparent;transition:background .14s,color .14s}
.btn-text::after{content:"→";transition:transform .14s}
.btn-text:hover{background:var(--ziegel);color:var(--weiss)}
.btn-text:hover::after{transform:translateX(3px)}

/* Utility */
.utility{background:var(--tann-tief);color:var(--loss-hell);font-size:13px}
.utility .container{display:flex;align-items:center;justify-content:space-between;padding:10px 24px;gap:20px;flex-wrap:wrap}
.utility-list{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.utility-list a,.utility-list span{display:inline-flex;align-items:center;gap:8px;color:var(--loss-hell)}
.utility-list a:hover{color:var(--weiss)}
.utility-list svg{width:15px;height:15px;color:var(--loss);flex:none}
.utility-right{display:flex;align-items:center;gap:16px}
.utility-social{display:flex;gap:12px}
.utility-social a svg{width:17px;height:17px;color:var(--loss)}
.utility-social a:hover svg{color:var(--weiss)}
.utility-region{font-size:11px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;color:var(--loss)}

/* Header */
.header{position:sticky;top:0;z-index:60;background:var(--weiss);border-bottom:1px solid var(--nebel);transition:box-shadow .2s}
.header.scrolled{box-shadow:0 1px 8px rgba(20,39,31,.06)}
.header .container{display:flex;align-items:center;justify-content:space-between;padding:11px 24px;gap:24px;position:relative}
.brand img{height:64px;width:auto}
.brand .fallback{font-family:var(--serif);font-weight:300;font-size:24px;color:var(--tann-tief)}
.nav{display:flex;align-items:center;gap:30px}
.nav a{position:relative;padding:6px 2px;font-size:14px;font-weight:500;color:var(--anthrazit)}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--tann-dunkel);transition:right .18s}
.nav a:hover::after,.nav a.active::after{right:0}
.nav a.active{color:var(--tann-dunkel)}
.header-cta{display:flex;align-items:center;gap:16px}
.menu-toggle{display:none;width:42px;height:42px;align-items:center;justify-content:center;border:1px solid var(--nebel);border-radius:var(--radius)}
.menu-toggle svg{width:22px;height:22px;color:var(--tann-tief)}

/* Hero (Start) */
.hero{position:relative;padding:90px 0 78px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:64px;align-items:end;position:relative;z-index:2}
.hero h1{margin:0 0 22px}
.hero .lead{margin-bottom:30px}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap}
.hero-rating{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:24px;background:var(--karte);border:1px solid var(--nebel);border-radius:40px;padding:12px 20px}
.hero-rating .hr-stars{color:#E0A82E;letter-spacing:2px;font-size:18px}
.hero-rating .hr-score{font-weight:600;color:var(--anthrazit)}
.hero-rating .hr-txt{font-size:14px;color:var(--stein)}
.hero-rating a{font-size:14px;color:var(--ziegel);font-weight:600}
.hero-rating a:hover{text-decoration:underline}
.hero-meta{border-left:1px solid var(--nebel);padding-left:32px}
.hero-meta .meta-item{margin-bottom:24px}.hero-meta .meta-item:last-child{margin-bottom:0}
.hero-meta .mlabel{display:block;font-size:11px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--loss-tief);margin-bottom:6px}
.hero-meta .mval{font-family:var(--serif);font-weight:300;font-size:20px;color:var(--tann-tief);line-height:1.35}
.hero-horizon{position:absolute;left:0;right:0;bottom:36px;width:100%;height:60px;z-index:1;opacity:.9;pointer-events:none}

/* Page-Hero (Unterseiten) */
.page-hero{background:var(--tann-dunkel);color:var(--loss-hell);padding:64px 0 60px;position:relative;overflow:hidden}
.page-hero .crumb{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--loss);margin-bottom:16px}
.page-hero .crumb a:hover{color:var(--weiss)}
.page-hero h1{color:var(--weiss);font-size:clamp(32px,4.6vw,54px);margin-bottom:14px}
.page-hero p{color:var(--loss-hell);opacity:.9;max-width:60ch;font-size:18px}
.page-hero .ph-line{position:absolute;left:0;right:0;bottom:20px;width:100%;height:40px;opacity:.6}

/* Portal-Badges */
.badges{background:var(--weiss);border-top:1px solid var(--nebel);border-bottom:1px solid var(--nebel)}
.badges .container{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;padding:18px 24px}
.badges .badges-label{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--loss-tief)}
.badges .badge{font-size:14px;font-weight:600;color:var(--tann-dunkel);border:1px solid var(--nebel);border-radius:40px;padding:7px 16px;background:var(--karte)}

section{padding:76px 0}
.section-head{max-width:64ch;margin-bottom:44px}
.section-head h2{margin-bottom:16px}

/* Leistungen / Reasons / Steps */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.svc{background:var(--karte);border:1px solid var(--nebel);border-radius:var(--radius);padding:30px;display:flex;flex-direction:column;transition:border-color .14s,transform .14s}
.svc:hover{border-color:var(--tann-hell);transform:translateY(-3px)}
.svc .ic{width:34px;height:34px;color:var(--tann-dunkel);margin-bottom:22px}.svc .ic svg{width:100%;height:100%}
.svc .kicker{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--loss-tief);display:block;margin-bottom:8px}
.svc h3{font-family:var(--serif);font-size:21px;margin-bottom:12px;color:var(--tann-tief)}
.svc p{font-size:15px;color:var(--stein);margin-bottom:22px}
.svc .btn-text{margin-top:auto;align-self:flex-start}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.step{border-top:2px solid var(--tann-dunkel);padding-top:20px}
.step .num{font-family:var(--serif);font-weight:300;font-size:30px;color:var(--loss-tief);line-height:1;margin-bottom:12px}
.step h4{font-family:var(--serif);font-size:19px;color:var(--tann-tief);margin-bottom:10px}
.step p{font-size:14px;color:var(--stein);line-height:1.5}
.cta-row{margin-top:44px;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.warum-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.reason{border-top:2px solid var(--tann-dunkel);padding-top:20px}
.reason .ic{width:28px;height:28px;color:var(--tann-dunkel);margin-bottom:14px}
.reason h4{font-family:var(--serif);font-size:19px;color:var(--tann-tief);margin-bottom:8px}
.reason p{font-size:14px;color:var(--stein);line-height:1.5}

/* Karten */
.tone-loss{background:var(--loss-hell)}
.tone-papier{background:var(--papier)}
.imm-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px;flex-wrap:wrap}
.imm-head .section-head{margin-bottom:0}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card{background:var(--karte);border:1px solid var(--nebel);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:border-color .14s,transform .14s}
.card:hover{border-color:var(--tann-hell);transform:translateY(-3px)}
.card .ph{aspect-ratio:4/3;background:var(--loss) center/cover no-repeat;position:relative}
.card .tag{position:absolute;top:14px;left:14px;background:var(--tann-tief);color:var(--loss-hell);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border-radius:2px}
.card .tag.verkauft{background:var(--stein)}
.card .body{padding:22px 24px;display:flex;flex-direction:column;flex:1}
.card .ort{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--loss-tief);margin-bottom:10px}
.card h3{font-family:var(--serif);font-size:19px;line-height:1.3;color:var(--tann-tief);margin-bottom:16px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.card .facts{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--stein);margin-bottom:18px}
.card .facts b{font-weight:500;color:var(--anthrazit)}
.card .foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:16px;border-top:1px solid var(--nebel)}
.card .preis{font-family:var(--serif);font-size:20px;font-weight:400;color:var(--tann-dunkel)}
.card .preis small{font-family:var(--sans);font-size:12px;color:var(--stein);font-weight:500}
.ph-note{margin-top:24px;font-size:13px;color:var(--loss-tief)}

/* Filterleiste */
.filterbar{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:36px}
.filterbar select,.filterbar input{min-height:48px;min-width:0;padding:11px 14px;border:1px solid var(--nebel);border-radius:var(--radius);background:var(--weiss);font-size:14px;font-family:var(--sans)}
.filterbar select:focus,.filterbar input:focus{outline:none;border-color:var(--tann-dunkel)}

/* Objekt-Detail */
.obj-gallery{display:grid;grid-template-columns:2fr 1fr;gap:14px;margin-bottom:44px}
.obj-gallery .big{aspect-ratio:16/10;background:var(--loss) center/cover no-repeat;border-radius:var(--radius)}
.obj-gallery .col{display:grid;grid-template-rows:1fr 1fr;gap:14px}
.obj-gallery .col div{background:var(--loss) center/cover no-repeat;border-radius:var(--radius);min-height:120px}
.obj-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:56px;align-items:start}
.obj-facts{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--nebel);border-radius:var(--radius);overflow:hidden;background:var(--karte);margin:24px 0}
.obj-facts div{padding:16px 18px;border-bottom:1px solid var(--nebel)}
.obj-facts div:nth-child(2n){border-left:1px solid var(--nebel)}
.obj-facts .k{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--loss-tief);margin-bottom:4px}
.obj-facts .v{font-size:16px;color:var(--anthrazit)}
.obj-side{background:var(--karte);border:1px solid var(--nebel);border-radius:var(--radius);padding:28px;position:sticky;top:96px}
.obj-side .price{font-family:var(--serif);font-weight:300;font-size:34px;color:var(--tann-dunkel);margin-bottom:6px}
.obj-side .pricelab{font-size:13px;color:var(--stein);margin-bottom:20px}
.obj-side .btn{width:100%;justify-content:center;margin-bottom:10px}

/* Marktüberblick (Chart) */
.chart-card{background:var(--karte);border:1px solid var(--nebel);border-radius:var(--radius);padding:30px}
.chart-legend{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:18px;font-size:13px;color:var(--stein)}
.chart-legend i{display:inline-block;width:14px;height:3px;border-radius:2px;margin-right:7px;vertical-align:middle}
.chart-card svg{width:100%;height:auto;display:block}

/* Wert / dunkle Formsektion */
.darksec{background:var(--tann-dunkel);color:var(--loss-hell)}
.darksec .eyebrow{color:var(--loss)}.darksec .eyebrow::before{background:var(--loss)}
.darksec h2{color:var(--weiss);margin-bottom:16px}
.darksec .lead{color:var(--loss-hell);opacity:.9;margin-bottom:26px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split-about{grid-template-columns:1.7fr 1fr;align-items:start}
.split.start{align-items:start}
.darksec ul{list-style:none;display:flex;flex-direction:column;gap:13px}
.darksec ul li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--loss-hell)}
.darksec ul li svg{width:20px;height:20px;color:var(--loss);flex:none;margin-top:1px}
.form-card{background:var(--weiss);border-radius:var(--radius);padding:30px}
.form-card h3{font-family:var(--serif);font-size:22px;color:var(--tann-tief);margin-bottom:6px}
.form-card .sub{font-size:14px;color:var(--stein);margin-bottom:22px}

/* Formfelder */
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:500;color:var(--anthrazit);margin-bottom:8px}
.field input,.field select,.field textarea{width:100%;min-width:0;min-height:52px;padding:13px 16px;font-family:var(--sans);font-size:15px;color:var(--anthrazit);background:var(--weiss);border:1px solid var(--nebel);border-radius:var(--radius)}
.field textarea{min-height:108px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--tann-dunkel)}
.field .unit{position:relative}
.field .unit input{padding-right:36px}
.field .unit span{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--stein);font-size:14px;pointer-events:none}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.consent{font-size:13px;color:var(--stein);margin:8px 0 18px;line-height:1.5}
.consent a{color:var(--tann-dunkel);text-decoration:underline}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--stein);margin-bottom:12px;line-height:1.45}
.check input{width:18px;height:18px;min-height:0;margin-top:2px;flex:none}
.crm-hint{font-size:12px;color:var(--loss-tief);margin-top:14px;display:flex;align-items:flex-start;gap:8px;line-height:1.45}
.crm-hint svg{width:14px;height:14px;flex:none;margin-top:2px}

/* Vergleich */
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.cmp-col{background:var(--karte);border:1px solid var(--nebel);border-radius:var(--radius);padding:30px}
.cmp-col.us{border-color:var(--tann-dunkel);border-width:2px}
.cmp-col h3{font-family:var(--serif);font-size:22px;color:var(--tann-tief);margin-bottom:18px}
.cmp-col ul{list-style:none;display:flex;flex-direction:column;gap:20px}
.cmp-col li{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--stein);line-height:1.45}
.cmp-col li>div{display:flex;flex-direction:column;gap:3px}
.cmp-col li b{font-weight:600;color:var(--anthrazit);font-size:15px}
.cmp-col li span{color:var(--stein)}
.cmp-col li svg{width:18px;height:18px;flex:none;margin-top:3px}
.cmp-col.us li svg{color:var(--tann-dunkel)}.cmp-col.priv li svg{color:var(--loss-tief)}

/* Statement / Über */
.statement{border:1px solid var(--tann-dunkel);padding:30px;margin-top:30px}
.statement p{font-family:var(--serif);font-weight:300;font-size:21px;line-height:1.4;color:var(--tann-tief)}
.about-side .as-img{aspect-ratio:4/3;background:var(--loss) center/cover no-repeat;border-radius:var(--radius)}

/* Team */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.member{background:var(--karte);border:1px solid var(--nebel);border-radius:var(--radius);overflow:hidden;transition:border-color .14s,transform .14s}
.member:hover{border-color:var(--tann-hell);transform:translateY(-3px)}
.member .pf{aspect-ratio:1/1;background:var(--loss) center/cover no-repeat;display:flex;align-items:flex-end;overflow:hidden}
.member .pf img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.member .pf .ph-tag{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--weiss);background:rgba(20,39,31,.55);padding:5px 10px;margin:12px}
.member .mbody{padding:24px 26px 28px}
.member .role{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ziegel);display:block;margin-bottom:8px}
.member h4{font-family:var(--serif);font-weight:400;font-size:23px;color:var(--tann-tief);margin-bottom:12px}
.member p{font-size:14px;color:var(--stein);line-height:1.55}.member p strong{color:var(--anthrazit);font-weight:600}

/* Region */
.region-list{border-top:1px solid rgba(255,255,255,.12)}
.region-row{display:grid;grid-template-columns:240px 1fr;gap:32px;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.12);align-items:baseline}
.region-row .place{font-family:var(--serif);font-size:22px;font-weight:300;color:var(--weiss)}
.region-row .note{font-size:15px;color:var(--loss-hell);opacity:.82;line-height:1.5}

/* Tippgeber */
.tipp-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.praemie{font-family:var(--serif);font-weight:300;font-size:22px;color:var(--tann-tief);margin:24px 0 28px;line-height:1.4}
.praemie b{color:var(--tann-dunkel);font-weight:400}
.tipp-list{border-top:1px solid rgba(31,58,46,.14)}
.tline{display:flex;gap:22px;padding:22px 0;border-bottom:1px solid rgba(31,58,46,.14);align-items:baseline}
.tline .tnum{font-family:var(--serif);font-weight:300;font-size:26px;color:var(--loss-tief);line-height:1;flex:none;width:34px}
.tline h4{font-family:var(--serif);font-size:19px;color:var(--tann-tief);margin-bottom:6px}
.tline p{font-size:14px;color:var(--stein);line-height:1.5}

/* Locked / Insider */
.locked{position:relative;aspect-ratio:16/9;border:1px solid rgba(255,255,255,.18);border-radius:var(--radius);background:var(--tann-tief);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:24px;margin-bottom:18px}
.locked svg{width:34px;height:34px;color:var(--loss)}
.locked .lt{font-size:14px;color:var(--loss-hell);max-width:36ch}

/* Downloads */
.dl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:28px}
.dl{display:flex;gap:22px;align-items:flex-start;background:var(--karte);border:1px solid var(--nebel);border-radius:var(--radius);padding:28px}
.dl .dic{flex:none;width:46px;height:46px;border-radius:var(--radius);background:var(--tann-dunkel);color:var(--loss-hell);display:flex;align-items:center;justify-content:center}
.dl .dic svg{width:24px;height:24px}
.dl h4{font-family:var(--serif);font-size:20px;color:var(--tann-tief);margin-bottom:8px}
.dl p{font-size:14px;color:var(--stein);line-height:1.5;margin-bottom:14px}
.dl .dlrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.dl input{flex:1 1 160px;min-width:0;min-height:46px;padding:11px 14px;font-size:14px;border:1px solid var(--nebel);border-radius:var(--radius);background:var(--weiss)}
.dl input:focus{outline:none;border-color:var(--tann-dunkel)}

/* Finanzrechner */
.fin-out{background:var(--tann-dunkel);color:var(--loss-hell);border-radius:var(--radius);padding:24px;margin-top:8px;text-align:center}
.fin-out .fo-lab{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--loss);margin-bottom:8px}
.fin-out .fo-rate{font-family:var(--serif);font-weight:300;font-size:38px;color:var(--weiss);line-height:1}
.fin-out .fo-sub{font-size:13px;color:var(--loss-hell);opacity:.85;margin-top:10px}

/* Bewertungen */
.rev-top{text-align:center;max-width:60ch;margin:0 auto 40px}.rev-top .eyebrow{justify-content:center}
.rev-stars{font-size:22px;letter-spacing:4px;color:#E0A82E}
.rev-score{font-family:var(--serif);font-weight:300;font-size:34px;color:var(--tann-tief);margin:6px 0 2px}
.rev-count{font-size:14px;color:var(--stein)}.rev-count strong{color:var(--anthrazit);font-weight:600}
.tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.tst{border:1px solid var(--tann-dunkel);padding:26px;display:flex;flex-direction:column}
.tst .rs{font-size:13px;letter-spacing:3px;color:#E0A82E;margin-bottom:14px}
.tst .quote{font-family:var(--serif);font-weight:300;font-style:italic;font-size:17px;line-height:1.5;color:var(--tann-tief);margin-bottom:18px}
.tst .who{font-size:14px;color:var(--stein);margin-top:auto}.tst .who strong{color:var(--anthrazit);font-weight:600}
.rev-foot{text-align:center;margin-top:32px}.rev-foot .btn-text{display:inline-flex}

/* Newsletter */
.nl-grid{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.nl-grid p{color:var(--loss-hell);opacity:.85;max-width:44ch;margin-top:8px}
.nl-form{display:flex;gap:12px;flex-wrap:wrap;flex:1 1 420px;min-width:0}
.fin-note{display:flex;align-items:flex-start;gap:12px;margin-top:22px;background:rgba(201,183,154,.15);border:1px solid rgba(201,183,154,.4);border-radius:var(--radius);padding:14px 16px;font-size:14px;line-height:1.55;color:var(--stein)}
.fin-note svg{width:20px;height:20px;flex-shrink:0;margin-top:2px;color:var(--tann-tief)}
.fin-note strong{color:var(--tann-tief)}
.nl-form input{flex:1 1 280px;min-width:0;min-height:52px;padding:13px 16px;border:1px solid rgba(255,255,255,.25);border-radius:var(--radius);background:rgba(255,255,255,.06);color:var(--weiss);font-size:15px}
.nl-form input::placeholder{color:rgba(232,222,206,.6)}
.nl-form input:focus{outline:none;border-color:var(--loss)}

/* Blog */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.post{background:var(--karte);border:1px solid var(--nebel);border-radius:var(--radius);overflow:hidden}
.post .pimg{aspect-ratio:16/9;background:var(--loss) center/cover no-repeat}
.post .pbody{padding:24px}
.post .pcat{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--loss-tief);margin-bottom:10px;display:block}
.post h4{font-family:var(--serif);font-size:20px;color:var(--tann-tief);line-height:1.3}

/* Termin */
.booking-card{background:var(--karte);border:1px solid var(--nebel);border-radius:var(--radius);padding:30px;text-align:center}
.slots{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:18px 0 22px}
.slot{border:1px solid var(--nebel);border-radius:var(--radius);padding:10px 14px;font-size:14px;color:var(--tann-dunkel);background:var(--weiss)}
.slot.busy{color:var(--loss-tief);text-decoration:line-through;background:transparent}

/* FAQ */
.faq-list{max-width:840px;border-top:1px solid var(--nebel)}
.faq-list details{border-bottom:1px solid var(--nebel)}
.faq-list summary{padding:20px 0;font-family:var(--serif);font-weight:400;font-size:19px;color:var(--tann-tief);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";font-size:22px;color:var(--loss-tief);flex:none}
.faq-list details[open] summary::after{content:"–"}
.faq-list details[open] .ans{animation:faqOpen .27s ease}
.faq-list .ans{font-size:15px;color:var(--stein);line-height:1.6;max-width:72ch;padding-bottom:22px}
@keyframes faqOpen{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}

/* Kontakt */
.kontakt-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:56px}
.kontakt-side h3{font-family:var(--serif);font-size:24px;color:var(--tann-tief);margin-bottom:16px}
.kontakt-side .intro{font-size:15px;color:var(--stein);margin-bottom:26px}
.cblock{margin-bottom:20px}
.cblock .clabel{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--loss-tief);display:block;margin-bottom:6px}
.cblock .cval{font-size:17px;color:var(--anthrazit);line-height:1.5}.cblock .cval a:hover{color:var(--tann-dunkel)}
.rueckruf{background:var(--karte);border:1px solid var(--nebel);border-radius:var(--radius);padding:24px;margin-top:26px}
.rueckruf h4{font-family:var(--serif);font-size:20px;color:var(--tann-tief);margin-bottom:6px}
.rueckruf p{font-size:14px;color:var(--stein);margin-bottom:16px}
.map-wrap{margin-top:48px;border:1px solid var(--nebel);border-radius:var(--radius);overflow:hidden}
.map-wrap iframe{width:100%;height:360px;border:0;display:block;filter:grayscale(.2)}

/* Rechtstext */
.legal{max-width:820px}
.legal h2{font-size:26px;margin:32px 0 12px}
.legal p,.legal li{font-size:15px;color:var(--stein);line-height:1.7;margin-bottom:12px}
.legal ul{padding-left:20px}

/* Footer */
footer{background:var(--tann-dunkel);color:var(--loss-hell);padding:44px 0 30px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.footer-brand .fname{font-family:var(--serif);font-weight:300;font-size:24px;color:var(--weiss);display:block}
.footer-brand .fsub{font-size:10px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--loss);margin-top:6px;display:block}
.footer-brand p{font-size:14px;color:var(--loss-hell);opacity:.8;margin-top:18px;max-width:34ch;line-height:1.6}
.footer-social{display:flex;gap:12px;margin-top:18px}
.footer-social a svg{width:20px;height:20px;color:var(--loss)}
.footer-social a:hover svg{color:var(--weiss)}
.footer-col h5{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--loss);margin-bottom:18px}
.footer-col ul{list-style:none}.footer-col li{margin-bottom:10px;font-size:14px;color:var(--loss-hell);opacity:.85}
.footer-col a:hover{opacity:1;color:var(--weiss)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:44px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);font-size:12px;color:var(--loss-hell);opacity:.7;flex-wrap:wrap}

/* Sticky Mobile-CTA + Cookie */
.mobile-cta{display:none}
.cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:90;background:var(--tann-tief);color:var(--loss-hell);border-radius:var(--radius);padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;box-shadow:0 6px 30px rgba(20,39,31,.25)}
.cookie p{font-size:13px;line-height:1.5;max-width:62ch}
.cookie p a{color:var(--loss);text-decoration:underline}
.cookie .ck-btns{display:flex;gap:10px;flex-wrap:wrap}
.cookie .btn{padding:11px 18px;font-size:14px}
.ck-ghost{border:1px solid var(--loss);color:var(--loss-hell);background:transparent}
.ck-ghost:hover{background:rgba(201,183,154,.12)}

/* Referenzen — ein Objekt pro Zeile, alternierend */
.ref{background:var(--papier)}
.ref-list{display:flex;flex-direction:column;gap:64px;margin-top:48px}
.ref-row{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:center}
.ref-row:nth-child(even) .ref-gallery{order:2}
.ref-gallery{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:10px;height:100%}
.rg-main{position:relative;grid-row:1 / 3;border-radius:var(--radius);overflow:hidden;background:var(--nebel)}
.rg-main img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3}
.rg-thumbs{display:contents}
.rg-thumbs img{width:100%;height:100%;object-fit:cover;display:block;border-radius:var(--radius);background:var(--nebel)}
.ref-badge{position:absolute;left:14px;top:14px;z-index:2;font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--weiss);padding:6px 14px;border-radius:40px;backdrop-filter:blur(2px)}
.ref-badge.verkauft{background:var(--ziegel)}
.ref-badge.vermietet{background:var(--tann-hell)}
.ref-ort{display:inline-block;font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ziegel);margin-bottom:10px}
.ref-info h3{font-family:var(--serif);font-weight:300;font-size:27px;line-height:1.2;color:var(--anthrazit);margin-bottom:14px}
.ref-info p{color:var(--stein);line-height:1.6;margin-bottom:20px;max-width:52ch}
.ref-facts{display:flex;flex-wrap:wrap;gap:10px}
.ref-facts span{font-size:13px;font-weight:500;color:var(--tann-dunkel);background:var(--karte);border:1px solid var(--nebel);border-radius:40px;padding:6px 15px}
.ref-note{margin-top:56px;text-align:center;font-size:15px;color:var(--stein)}
.ref-note a{color:var(--tann-tief);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* Responsive */
@media (max-width:980px){
  .hero-grid,.split,.split-about,.tipp-grid,.cmp,.kontakt-grid,.nl-grid,.obj-grid,.obj-gallery{grid-template-columns:1fr;gap:40px}
  .hero-meta{border-left:none;border-top:1px solid var(--nebel);padding-left:0;padding-top:30px}
  .obj-side{position:static}
  .svc-grid,.steps,.warum-grid{grid-template-columns:repeat(2,1fr)}
  .grid3,.tst-grid,.team-grid,.blog-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .ref-row,.ref-row:nth-child(even){grid-template-columns:1fr;gap:24px}
  .ref-row:nth-child(even) .ref-gallery{order:0}
  .ref-list{gap:48px}
}
@media (max-width:860px){
  .nav{display:none}.header-cta .btn{display:none}.menu-toggle{display:flex}
  .nav.open{display:flex;flex-direction:column;gap:0;position:absolute;top:100%;left:0;right:0;background:var(--weiss);border-bottom:1px solid var(--nebel);padding:8px 24px 16px;z-index:70}
  .nav.open a{padding:13px 0;border-bottom:1px solid var(--nebel)}.nav.open a::after{display:none}
}
@media (max-width:720px){
  section{padding:56px 0}
  .row,.row3,.obj-facts{grid-template-columns:1fr}
  .obj-facts div:nth-child(2n){border-left:none}
  .region-row{grid-template-columns:1fr;gap:8px}
  .ref-gallery{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .rg-main{grid-row:auto;grid-column:1 / 3}

  .utility .container{justify-content:center;text-align:center}
  .utility-list{gap:14px;font-size:12px;justify-content:center}
  .utility-region{display:none}
  .wa-top{display:none}
  body{padding-bottom:70px}
  .mobile-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:80;gap:8px;padding:6px 12px;background:var(--weiss);border-top:1px solid var(--nebel)}
  .mobile-cta .btn{flex:1;justify-content:center;padding:9px 14px;font-size:14px}
  .mobile-cta .btn-wa{flex:none;width:46px;padding:9px 0}
  .cookie{bottom:84px}
}
@media (max-width:520px){
  .svc-grid,.steps,.warum-grid,.grid3,.tst-grid,.team-grid,.blog-grid,.footer-grid{grid-template-columns:1fr}
  .dl{flex-direction:column;gap:14px}
  .brand img{height:50px}
}

/* ===== Scroll-Animationen — aktiv nur, wenn <html class="anim"> (derzeit: Startseite) ===== */
html.anim .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;will-change:opacity,transform}
html.anim .reveal.in{opacity:1;transform:none}
html.anim .stagger>*{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}
html.anim .stagger.in>*{opacity:1;transform:none}
html.anim .stagger.in>*:nth-child(2){transition-delay:.07s}
html.anim .stagger.in>*:nth-child(3){transition-delay:.14s}
html.anim .stagger.in>*:nth-child(4){transition-delay:.21s}
html.anim .stagger.in>*:nth-child(5){transition-delay:.28s}
html.anim .stagger.in>*:nth-child(6){transition-delay:.35s}
@media (prefers-reduced-motion:reduce){html.anim .reveal,html.anim .reveal.in,html.anim .stagger>*,html.anim .stagger.in>*{opacity:1!important;transform:none!important;transition:none!important}}

/* ===========================================================
   Animationen (alle Seiten) — dezent, mit Reduce-Motion-Schutz
   Aktiv nur bei .js (sonst alles sofort sichtbar)
   =========================================================== */
@keyframes aUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes aDraw{to{stroke-dashoffset:0}}
/* Hero (Startseite) */
.js .hero .eyebrow,.js .hero h1,.js .hero .lead,.js .hero-ctas,.js .hero-rating,.js .hero-meta .meta-item{opacity:0;animation:aUp .8s cubic-bezier(.2,.6,.2,1) forwards}
.js .hero h1{animation-delay:.12s}.js .hero .lead{animation-delay:.26s}.js .hero-ctas{animation-delay:.4s}.js .hero-rating{animation-delay:.54s}
.js .hero-meta .meta-item{animation-delay:.34s}.js .hero-meta .meta-item:nth-child(2){animation-delay:.44s}.js .hero-meta .meta-item:nth-child(3){animation-delay:.54s}
.js .hero-horizon path{stroke-dasharray:3000;stroke-dashoffset:3000;animation:aDraw 1.9s ease forwards .35s}
/* Page-Hero (Unterseiten) */
.js .page-hero .crumb,.js .page-hero h1,.js .page-hero p{opacity:0;animation:aUp .75s cubic-bezier(.2,.6,.2,1) forwards}
.js .page-hero h1{animation-delay:.12s}.js .page-hero p{animation-delay:.24s}
.js .page-hero .ph-line path{stroke-dasharray:3000;stroke-dashoffset:3000;animation:aDraw 1.8s ease forwards .3s}
/* Scroll-Reveal entfernt — Inhalt immer sichtbar (keine opacity:0-Regel mehr) */
.js .section-head,.js .svc,.js .grid3>.card,.js .reason,.js .tst,.js .member,.js .cmp-col,.js .step,.js .tline,.js .dl,.js .region-row,.js .rev-top,.js .split>div,.js .badge,.js .post,.js .chart-card,.js .booking-card,.js .filterbar{opacity:1;transform:none}
.js .is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .hero .eyebrow,.js .hero h1,.js .hero .lead,.js .hero-ctas,.js .hero-rating,.js .hero-meta .meta-item,
  .js .page-hero .crumb,.js .page-hero h1,.js .page-hero p,
  .js .section-head,.js .svc,.js .grid3>.card,.js .reason,.js .tst,.js .member,.js .cmp-col,.js .step,.js .tline,.js .dl,.js .region-row,.js .rev-top,.js .split>div,.js .badge,.js .post,.js .chart-card,.js .booking-card,.js .filterbar{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
  .js .hero-horizon path,.js .page-hero .ph-line path{animation:none!important;stroke-dashoffset:0!important}
  .js .faq-list details[open] .ans{animation:none!important}
}

/* ===========================================================
   Cookie-Overlay
   =========================================================== */
.cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:90;background:var(--tann-tief);color:var(--loss-hell);border-radius:var(--radius);padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;box-shadow:0 6px 30px rgba(20,39,31,.25)}
.cookie p{font-size:13px;line-height:1.5;max-width:62ch}
.cookie p a{color:var(--loss);text-decoration:underline}
.cookie .ck-btns{display:flex;gap:10px;flex-wrap:wrap}
.cookie .btn{padding:11px 18px;font-size:14px}
.ck-ghost{border:1px solid var(--loss);color:var(--loss-hell);background:transparent}
.ck-ghost:hover{background:rgba(201,183,154,.12)}
.cookie-overlay{left:50%;top:50%;bottom:auto;right:auto;transform:translate(-50%,-50%);width:min(560px,calc(100vw - 32px));flex-direction:column;align-items:flex-start;z-index:9999;box-shadow:0 12px 60px rgba(20,39,31,.45)}
body.consent-pending::before{content:'';position:fixed;inset:0;background:rgba(20,39,31,.55);backdrop-filter:blur(3px);z-index:9998}
body.consent-pending{overflow:hidden}
@media(max-width:640px){.cookie:not(.cookie-overlay){bottom:84px}}

/* ===========================================================
   Portal-Cards & Coming-Notice
   =========================================================== */
.portal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:32px}
.portal-card{display:flex;flex-direction:column;gap:12px;background:var(--karte);border:1px solid var(--nebel);border-radius:var(--radius);padding:24px 28px;text-decoration:none;color:inherit;transition:box-shadow .2s,border-color .2s}
.portal-card:hover{box-shadow:0 6px 24px rgba(31,58,46,.12);border-color:var(--loss)}
.portal-card .pc-name{font-family:var(--serif);font-size:18px;font-weight:300;color:var(--tann-tief)}
.portal-card .pc-desc{font-size:14px;color:var(--stein);line-height:1.5}
.portal-card .pc-cta{font-size:13px;font-weight:600;color:var(--ziegel);display:flex;align-items:center;gap:6px;margin-top:auto}
.portal-card .pc-cta::after{content:'→'}
.coming-notice{background:var(--papier);border:1px solid var(--nebel);border-left:3px solid var(--loss);border-radius:var(--radius);padding:20px 24px;margin-top:28px}
.coming-notice .cn-head{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--stein);margin-bottom:10px}
.coming-notice ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px}
.coming-notice ul li{font-size:14px;color:var(--tann-tief);padding-left:18px;position:relative}
.coming-notice ul li::before{content:'·';position:absolute;left:0;color:var(--loss);font-weight:700}

/* Coming-soon-box & Formular-Feedback */
.coming-soon-box{display:flex;align-items:flex-start;gap:12px;background:rgba(201,183,154,.15);border:1px solid rgba(201,183,154,.4);border-radius:var(--radius);padding:14px 16px;font-size:13px;line-height:1.55;color:var(--stein)}
.coming-soon-box svg{width:18px;height:18px;flex-shrink:0;margin-top:2px;color:var(--tann-tief)}
.coming-soon-box strong{display:block;margin-bottom:3px;color:var(--tann-tief)}
.coming-soon-box a{color:var(--tann-tief);text-decoration:underline}
.coming-soon-box p{margin:0;font-size:13px}
.form-ok{background:#e8f5e9;color:#2e7d32;border:1px solid #a5d6a7;padding:12px;border-radius:6px;font-size:14px}
.form-err{background:#fce4ec;color:#c62828;border:1px solid #ef9a9a;padding:12px;border-radius:6px;font-size:14px}


/* ===========================================================
   Accessibility: Skip-Link nur bei Tastaturfokus sichtbar
   =========================================================== */
.skip{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
  z-index:9999;
}
.skip:focus,
.skip:focus-visible{
  left:16px;
  top:16px;
  width:auto;
  height:auto;
  padding:10px 14px;
  background:var(--weiss);
  color:var(--tann-tief);
  border:2px solid var(--tann-dunkel);
  border-radius:var(--radius);
  box-shadow:0 4px 16px rgba(0,0,0,.15);
}

/* ===========================================================
   Utility-Header: kompakt erst ab 880px
   Links: Tel. | E-Mail | WhatsApp
   Rechts: Denzlingen · Südbaden | Instagram | Facebook
   Region wird erst ab 730px ausgeblendet
   =========================================================== */
@media (max-width:850px){
  .utility{font-size:12px}
  .utility .container{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    flex-wrap:nowrap!important;
    gap:12px!important;
    padding:7px 14px!important;
    overflow:hidden!important;
    text-align:left!important;
  }
  .utility-list{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    flex-wrap:nowrap!important;
    gap:18px!important;
    min-width:0!important;
    flex:1 1 auto!important;
    overflow:hidden!important;
    line-height:1!important;
  }
  .utility-list a,
  .utility-list span{
    display:inline-flex!important;
    align-items:center!important;
    gap:7px!important;
    white-space:nowrap!important;
    flex:0 0 auto!important;
  }
  .utility-list svg,
  .utility-social a svg{
    width:15px!important;
    height:15px!important;
    flex:0 0 auto!important;
  }

  /* Tel./E-Mail kürzen, WhatsApp ausgeschrieben lassen */
  .utility-list a[href^="tel"],
  .utility-list a[href^="mailto"]{
    font-size:0!important;
  }
  .utility-list a[href^="tel"]::after{
    content:"Tel."!important;
    font-size:13px!important;
  }
  .utility-list a[href^="mailto"]::after{
    content:"E-Mail"!important;
    font-size:13px!important;
  }
  .utility-list .wa-top{
    display:inline-flex!important;
    font-size:13px!important;
  }
  .utility-list .wa-top::before,
  .utility-list .wa-top::after{
    content:none!important;
    display:none!important;
  }

  /* Region + Social Icons rechts */
  .utility-right{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    flex:0 0 auto!important;
    gap:16px!important;
    margin-left:auto!important;
    min-width:0!important;
  }
  .utility-region{
    display:inline-flex!important;
    align-items:center!important;
    white-space:nowrap!important;
    flex:0 0 auto!important;
    font-size:11px!important;
    letter-spacing:.13em!important;
    line-height:1!important;
  }
  .utility-social{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    flex-wrap:nowrap!important;
    gap:16px!important;
    flex:0 0 auto!important;
  }
  .utility-social a{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 auto!important;
  }

  /* Header kompakter */
  .header .container{
    padding:7px 16px!important;
    gap:12px!important;
    min-height:56px!important;
  }
  .brand img{
    height:44px!important;
  }
  .menu-toggle{
    width:38px!important;
    height:38px!important;
  }
  .menu-toggle svg{
    width:20px!important;
    height:20px!important;
  }
}

@media (max-width:530px){
  .utility-region{
    display:none!important;
  }
}

@media (max-width:430px){
  .utility .container{
    padding:7px 10px!important;
    gap:10px!important;
  }
  .utility-list{
    gap:15px!important;
  }
  .utility-social{
    gap:14px!important;
  }
  .utility-list a,
  .utility-list span{
    gap:6px!important;
  }
}

@media (max-width:360px){
  .utility .container{
    padding:7px 8px!important;
    gap:8px!important;
  }
  .utility-list{
    gap:11px!important;
  }
  .utility-social{
    gap:10px!important;
  }
  .utility-list a[href^="tel"]::after,
  .utility-list a[href^="mailto"]::after,
  .utility-list .wa-top{
    font-size:12px!important;
  }
  .header .container{padding:6px 14px!important;min-height:52px!important}
  .brand img{height:40px!important}
  .menu-toggle{width:36px!important;height:36px!important}
}