/*
Theme Name: Baumdienst Uzun
Theme URI: https://www.safaenesiscioglu.com
Author: Safa Enes İşcioğlu
Author URI: https://www.safaenesiscioglu.com
Description: Premium, dreisprachiges (DE/TR/EN) Theme für Baumdienst Uzun GmbH — Baumpflege, Baumfällung und Gutachten in Berlin. Zwei Logo-Varianten für helle und dunkle Flächen, sprachpräfixierte URLs (/de/ /tr/ /en/) mit deutschem Fallback, Kontaktformular mit FluentSMTP-Versand und ein vollständig dreisprachiges Admin-Panel unter "Baumdienst".
Version: 1.3.0
Requires at least: 6.2
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bdu
Tags: business, custom-colors, custom-logo, custom-menu, featured-images, translation-ready, accessibility-ready, threaded-comments
*/

/* ============ TOKENS ============ */
:root{
--forest-900:#16281F;--forest-800:#1F3A2E;--forest-700:#2B4E3D;--forest-600:#3A6350;
--olive-600:#5C6A40;--olive-500:#6F7F4E;--olive-400:#8A9868;
--sage-500:#A8B79B;--sage-300:#C6D0BC;--sage-100:#E3E8DC;
--offwhite-50:#FAF8F3;--offwhite-100:#F5F1E8;--offwhite-200:#EBE5D8;
--stone-600:#6E6A61;--stone-400:#A5A096;--stone-300:#C7C2B8;--stone-200:#DBD7CE;
--terracotta-700:#A85A28;--terracotta-600:#C8743B;--terracotta-500:#D68B57;--terracotta-100:#F2E2D5;
--pure-white:#FFFFFF;
--surface-page:var(--offwhite-100);--surface-page-alt:var(--offwhite-50);--surface-card:var(--offwhite-50);
--surface-card-botanical:var(--sage-100);--surface-inverse:var(--forest-800);--surface-footer:var(--forest-900);
--surface-field:var(--offwhite-50);--surface-glass:rgba(245,241,232,.86);
--text-heading:var(--forest-800);--text-body:#33403A;--text-muted:var(--stone-600);
--text-on-inverse:var(--offwhite-100);--text-on-inverse-muted:rgba(245,241,232,.68);
--text-accent:var(--terracotta-600);--text-botanical:var(--olive-500);
--border-hairline:var(--stone-300);--border-soft:var(--stone-200);--border-on-inverse:rgba(245,241,232,.22);
--font-serif-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
--font-sans-body:"Manrope","Helvetica Neue",Arial,sans-serif;
--size-lead:21px;--size-body:17px;--size-body-sm:15px;--size-caption:13px;--size-eyebrow:12px;
--tracking-eyebrow:.16em;--tracking-label:.08em;--tracking-display:-.015em;
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;
--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;
--section-py:128px;--gutter:32px;--container:1280px;--measure:62ch;--card-padding:32px;
--radius-xs:2px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-pill:999px;
--shadow-xs:0 1px 2px rgba(22,40,31,.05);--shadow-md:0 8px 24px rgba(22,40,31,.08);
--shadow-lift:0 14px 36px rgba(22,40,31,.12);
--scrim-hero:linear-gradient(180deg,rgba(22,40,31,.58) 0%,rgba(22,40,31,.30) 45%,rgba(22,40,31,.74) 100%);
--scrim-bottom:linear-gradient(180deg,rgba(22,40,31,0) 38%,rgba(22,40,31,.80) 100%);
--dur-fast:180ms;--dur-base:300ms;--dur-slow:500ms;--dur-reveal:700ms;
--ease:cubic-bezier(.22,.61,.36,1);--ease-in:cubic-bezier(.16,.84,.44,1);
--utility-h:38px;
--nav-h:78px;
--header-h:calc(var(--utility-h) + var(--nav-h));
}

/* ============ BASE ============ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-sans-body);font-size:var(--size-body);line-height:1.68;-webkit-font-smoothing:antialiased;text-wrap:pretty;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--font-serif-display);color:var(--text-heading);font-weight:300;letter-spacing:var(--tracking-display);margin:0;overflow-wrap:break-word;hyphens:auto}
h1{font-size:clamp(42px,6vw,88px);line-height:1.0}
h2{font-size:clamp(30px,3.6vw,48px);line-height:1.1}
h3{font-size:clamp(24px,2.4vw,36px);line-height:1.16}
h4{font-size:clamp(20px,1.7vw,24px);line-height:1.24}
p{margin:0 0 var(--space-3)}
img{max-width:100%;height:auto;display:block}
a{color:var(--forest-800);text-decoration:none;border-bottom:1px solid var(--stone-300);transition:color var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease)}
a:hover{color:var(--terracotta-600);border-color:var(--terracotta-600)}
a.plain,a.plain:hover{border-bottom:none}
:focus-visible{outline:2px solid var(--terracotta-600);outline-offset:3px}
::selection{background:var(--sage-300);color:var(--forest-900)}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--forest-800);color:var(--offwhite-100);padding:12px 20px}
.skip-link:focus{left:12px;top:12px}

/* ============ LAYOUT ============ */
.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.section{padding:var(--section-py) 0}
.section--alt{background:var(--surface-page-alt);border-top:1px solid var(--stone-300);border-bottom:1px solid var(--stone-300)}
.section--forest{background:var(--surface-inverse);color:var(--text-on-inverse)}
.section--tight{padding:var(--space-9) 0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-9);align-items:center}
.grid-2--wide-left{grid-template-columns:1.1fr .9fr}
.grid-2--wide-right{grid-template-columns:.9fr 1.1fr}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6)}
.stack{display:flex;flex-direction:column;gap:var(--space-5)}
.row{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center}

/* ============ TYPE HELPERS ============ */
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:var(--size-eyebrow);font-weight:600;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-botanical)}
.eyebrow::before{content:"";width:32px;height:1px;background:currentColor;opacity:.55}
.eyebrow--plain::before{display:none}
.section--forest .eyebrow{color:var(--sage-500)}
.lead{font-size:var(--size-lead);line-height:1.62;color:var(--text-muted);max-width:var(--measure)}
.section--forest .lead,.section--forest p{color:var(--text-on-inverse-muted)}
.section--forest h1,.section--forest h2,.section--forest h3,.section--forest h4{color:var(--text-on-inverse)}
.prose{max-width:var(--measure)}
.prose p{font-size:var(--size-body);margin-bottom:var(--space-5);color:var(--text-muted)}
.prose h2,.prose h3{margin:var(--space-7) 0 var(--space-4)}
.prose ul,.prose ol{color:var(--text-muted);padding-left:1.25em;margin:0 0 var(--space-5)}
.prose li{margin-bottom:8px}
.section-head{display:flex;flex-direction:column;gap:6px;max-width:56ch}
.section-head h2,.section-head h1{margin-top:10px;max-width:22ch}
.section-head .lead{margin-top:14px}

/* ============ BUTTONS ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-sans-body);font-size:14px;font-weight:600;letter-spacing:var(--tracking-label);text-transform:uppercase;line-height:1;padding:15px 28px;border-radius:var(--radius-sm);border:1px solid transparent;cursor:pointer;transition:background var(--dur-base) var(--ease),color var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease),transform var(--dur-fast) var(--ease);min-height:48px}
.btn:hover{border-bottom-width:1px}
.btn:active{transform:scale(.985)}
.btn--primary{background:var(--terracotta-600);border-color:var(--terracotta-600);color:var(--offwhite-50)}
.btn--primary:hover{background:var(--terracotta-700);border-color:var(--terracotta-700);color:var(--offwhite-50)}
.btn--secondary{background:var(--forest-800);border-color:var(--forest-800);color:var(--offwhite-100)}
.btn--secondary:hover{background:var(--forest-700);border-color:var(--forest-700);color:var(--offwhite-100)}
.btn--ghost{background:transparent;border-color:var(--stone-300);color:var(--forest-800)}
.btn--ghost:hover{background:var(--sage-100);border-color:var(--olive-500);color:var(--forest-800)}
.btn--inverse{background:transparent;border-color:var(--border-on-inverse);color:var(--offwhite-100)}
.btn--inverse:hover{background:rgba(245,241,232,.10);border-color:var(--offwhite-100);color:var(--offwhite-100)}
.btn--sm{padding:11px 20px;font-size:13px;min-height:40px}
.btn--lg{padding:19px 34px;font-size:15px;min-height:56px}
.btn[disabled]{background:var(--stone-200);border-color:var(--stone-200);color:var(--stone-400);cursor:not-allowed}
.textlink{display:inline-flex;align-items:center;gap:8px;font-size:var(--size-eyebrow);font-weight:600;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--forest-800);border:none}
.textlink:hover{color:var(--terracotta-600)}
.textlink .ico{transition:transform var(--dur-base) var(--ease)}
.textlink:hover .ico{transform:translateX(4px)}

/* ============ ICONS ============ */
.ico{display:inline-block;width:1em;height:1em;flex:0 0 auto;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;font-size:16px}
.ico--lg{font-size:20px}
.ico--accent{background-color:var(--terracotta-600)}
.ico--sage{background-color:var(--sage-500)}

/* ============ BADGES / STATS / TRUST ============ */
.badge{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:var(--radius-xs);font-size:var(--size-caption);font-weight:500;letter-spacing:var(--tracking-label);text-transform:uppercase;line-height:1;background:var(--sage-100);color:var(--forest-800);border:1px solid var(--sage-300)}
.badge--outline{background:transparent;color:var(--text-muted);border-color:var(--border-hairline)}
.badge--accent{background:var(--terracotta-100);color:var(--terracotta-700);border-color:var(--terracotta-500)}
.badge--inverse{background:rgba(245,241,232,.10);color:var(--offwhite-100);border-color:var(--border-on-inverse)}
.stats{display:flex;flex-wrap:wrap;gap:var(--space-8)}
.stat{display:flex;flex-direction:column;gap:10px}
.stat b{font-family:var(--font-serif-display);font-weight:300;font-size:clamp(38px,4.4vw,66px);line-height:1;color:var(--text-heading);letter-spacing:var(--tracking-display)}
.stat span{font-size:var(--size-eyebrow);font-weight:600;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-botanical)}
.section--forest .stat b{color:var(--text-on-inverse)}
.section--forest .stat span{color:var(--sage-500)}
.trust{list-style:none;margin:0;padding:var(--space-5) 0;display:flex;flex-wrap:wrap;gap:var(--space-5) var(--space-7);border-top:1px solid var(--stone-300);border-bottom:1px solid var(--stone-300)}
.trust li{display:flex;align-items:center;gap:10px;font-size:var(--size-eyebrow);font-weight:600;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted)}

/* ============ HEADER ============ */
.site-header{position:fixed;top:0;left:0;right:0;z-index:60;border-bottom:1px solid rgba(245,241,232,.16);transition:background var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease),padding var(--dur-base) var(--ease)}
.site-header .header-main{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);padding-top:19px;padding-bottom:19px;transition:padding var(--dur-base) var(--ease)}
/* Utility bar: part of the same overlay, deliberately quieter than the nav row —
   small type, reduced opacity, a hairline instead of a filled band. */
.utility-bar{border-bottom:1px solid rgba(245,241,232,.12)}
.utility-bar .container{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);height:var(--utility-h)}
.utility-link{display:inline-flex;align-items:center;gap:8px;border:none;font-size:12.5px;font-weight:500;color:rgba(245,241,232,.72);transition:color var(--dur-base) var(--ease)}
.utility-link .ico{font-size:14px}
.utility-link:hover{color:var(--offwhite-100)}
.utility-bar__left{display:flex;align-items:center;gap:var(--space-4)}
.utility-note{font-size:11px;font-weight:600;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--sage-500);padding-left:var(--space-4);border-left:1px solid rgba(245,241,232,.18)}
.is-solid .utility-bar{border-bottom-color:var(--border-soft)}
.is-solid .utility-link{color:var(--stone-600)}
.is-solid .utility-link:hover{color:var(--forest-800)}
.is-solid .utility-note{color:var(--olive-500);border-left-color:var(--stone-300)}
.is-solid .utility-bar .ico:not(.ico--accent){color:var(--stone-600)}
.site-header.is-solid{background:var(--surface-glass);-webkit-backdrop-filter:saturate(120%) blur(14px);backdrop-filter:saturate(120%) blur(14px);border-color:var(--border-hairline);box-shadow:0 1px 0 rgba(22,40,31,.08)}
.site-header.is-solid .header-main{padding-top:12px;padding-bottom:12px}
.site-header.is-solid{--nav-h:64px}
.wordmark{display:flex;flex-direction:column;justify-content:center;line-height:1.05;border:none;flex:0 0 auto;min-width:0}
/* The uploaded file stays at full resolution; only the rendered box is capped.
   height:auto + object-fit:contain keeps the original aspect ratio intact. */
.wordmark img,.wordmark__img{display:block;width:auto;height:auto;object-fit:contain;object-position:left center}
.wordmark--header img{max-height:52px;max-width:220px}
.site-header.is-solid .wordmark--header img{max-height:44px}
.wordmark--drawer img{max-height:40px;max-width:120px}
.wordmark--footer img{max-height:56px;max-width:240px}
.wordmark b{font-family:var(--font-serif-display);font-weight:300;font-size:21px;letter-spacing:-.01em;color:var(--offwhite-100)}
.wordmark span{font-size:9px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--sage-500);margin-top:4px}
.is-solid .wordmark b{color:var(--forest-800)}
.is-solid .wordmark span{color:var(--olive-500)}

.main-nav{flex:1 1 auto;display:flex;justify-content:center;min-width:0}
.main-nav ul{list-style:none;display:flex;align-items:center;gap:clamp(16px,2.1vw,34px);margin:0;padding:0;flex-wrap:nowrap}
.main-nav li{flex:0 0 auto}
.main-nav a{position:relative;border:none;padding:6px 0;font-size:15px;font-weight:500;white-space:nowrap;color:var(--text-on-inverse-muted)}
.main-nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--olive-400);transition:width var(--dur-base) var(--ease)}
.main-nav a:hover,.main-nav .current-menu-item>a,.main-nav .is-current>a{color:var(--offwhite-100)}
.main-nav a:hover::after,.main-nav .current-menu-item>a::after,.main-nav .is-current>a::after{width:100%}
.main-nav .current-menu-item>a::after,.main-nav .is-current>a::after{background:var(--terracotta-600)}
.is-solid .main-nav a{color:var(--stone-600)}
.is-solid .main-nav a:hover,.is-solid .main-nav .current-menu-item>a,.is-solid .main-nav .is-current>a{color:var(--forest-800)}
.header-tools{display:flex;align-items:center;justify-content:flex-end;gap:clamp(12px,1.4vw,22px);margin-left:auto;flex:0 0 auto}
.phone-link{display:inline-flex;align-items:center;gap:10px;border:none;font-weight:600;font-size:var(--size-body-sm);color:var(--offwhite-100)}
.is-solid .phone-link{color:var(--forest-800)}
.phone-link:hover{color:var(--terracotta-600)}
.phone-link small{font-size:var(--size-caption);font-weight:400;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-on-inverse-muted)}
.is-solid .phone-link small{color:var(--text-muted)}
.phone-link--lg{font-family:var(--font-serif-display);font-weight:300;font-size:clamp(22px,2.4vw,28px)}
.lang-switch{display:inline-flex;align-items:center;gap:2px;position:relative;z-index:2}
.lang-switch a{border:none;padding:4px 2px;font-size:var(--size-caption);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-on-inverse-muted);border-bottom:1px solid transparent}
.is-solid .lang-switch a{color:var(--stone-600)}
.lang-switch .is-current{padding:4px 2px;font-size:var(--size-caption);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;font-weight:600;color:var(--offwhite-100);border-bottom:1px solid var(--terracotta-600)}
.is-solid .lang-switch .is-current{color:var(--forest-800)}
.lang-switch a:hover{color:var(--offwhite-100)}
.is-solid .lang-switch a:hover{color:var(--forest-800)}
.lang-switch i{width:1px;height:12px;background:rgba(245,241,232,.35);margin:0 6px}
.is-solid .lang-switch i{background:var(--stone-300)}
.nav-toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:transparent;border:1px solid rgba(245,241,232,.28);border-radius:var(--radius-sm);color:var(--offwhite-100);cursor:pointer}
.is-solid .nav-toggle{border-color:var(--stone-300);color:var(--forest-800)}
.mobile-panel{position:fixed;inset:0;z-index:70;background:var(--forest-800);display:flex;flex-direction:column;padding:calc(var(--space-5) + env(safe-area-inset-top,0px)) var(--gutter) calc(var(--space-6) + env(safe-area-inset-bottom,0px));gap:var(--space-6);transform:translateY(-100%);transition:transform var(--dur-slow) var(--ease);overflow-y:auto;overscroll-behavior:contain}
.mobile-panel.is-open{transform:none}
.mobile-panel ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-4)}
.mobile-panel a{border:none;color:var(--offwhite-100);font-family:var(--font-serif-display);font-size:30px;font-weight:300}
.mobile-panel .panel-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5)}
.mobile-bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:55;border-top:1px solid var(--border-hairline);background:var(--surface-glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding-bottom:env(safe-area-inset-bottom,0px)}
.mobile-bar>*{flex:1;justify-content:center;border-radius:0;padding:16px 0;text-align:center}
/* The number sat on a light glass panel in near-invisible light type — it now
   uses the brand's forest green; the glyph keeps the terracotta accent. */
.mobile-bar .phone-link{color:var(--forest-800);font-weight:600;font-size:var(--size-body-sm)}
.mobile-bar .phone-link:hover,.mobile-bar .phone-link:focus-visible{color:var(--forest-900)}
.mobile-bar .phone-link .ico{background-color:var(--terracotta-600)}
.mobile-bar .phone-link small{display:none}

/* ============ HERO ============ */
/* Hero must own the whole first screen so the cream section below never peeks in.
   The header is an overlay on top of it, so the hero itself stays a full viewport
   tall and only its top padding grows with --header-h (utility bar + nav row) —
   adding the utility bar therefore does not push the hero down or shrink it.
   svh = the smallest viewport (address bar visible), the safe floor on iOS Safari
   and Android Chrome; dvh follows the live viewport where supported. min-height
   only, so taller content grows naturally instead of being clipped. */
.hero{position:relative;display:flex;align-items:flex-end;background:var(--forest-800);overflow:hidden;
padding-top:calc(var(--header-h) + var(--space-6));padding-bottom:var(--space-9);
min-height:calc(100vh - env(safe-area-inset-bottom,0px))}
@supports (height:100svh){.hero{min-height:calc(100svh - env(safe-area-inset-bottom,0px))}}
@supports (height:100dvh){.hero{min-height:calc(100dvh - env(safe-area-inset-bottom,0px))}}
.hero__media,.hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__media::after{content:"";position:absolute;inset:0;background:var(--scrim-hero)}
.hero__inner{position:relative;width:100%}
.hero h1{color:var(--offwhite-100);margin:var(--space-5) 0 0;max-width:24ch}
.hero .eyebrow{color:var(--sage-500)}
.hero__lead{color:var(--text-on-inverse-muted);font-size:var(--size-lead);line-height:1.62;max-width:56ch;margin:var(--space-5) 0 var(--space-6)}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center}
.page-hero{background:var(--forest-800);color:var(--text-on-inverse);padding:calc(var(--header-h) + var(--space-9)) 0 var(--space-8);position:relative;overflow:hidden}
.page-hero__media{position:absolute;inset:0}
.page-hero__media img{width:100%;height:100%;object-fit:cover}
.page-hero__media::after{content:"";position:absolute;inset:0;background:rgba(22,40,31,.72)}
.page-hero .container{position:relative}
.page-hero h1{color:var(--offwhite-100);max-width:26ch;margin-top:10px}
.page-hero .lead{color:var(--text-on-inverse-muted)}
.breadcrumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:var(--size-caption);color:var(--text-on-inverse-muted);margin-bottom:var(--space-4)}
.breadcrumbs a{color:var(--sage-500);border:none}

/* ============ MEDIA FRAMES ============ */
.frame{position:relative;margin:0;overflow:hidden;border-radius:var(--radius-md);background:var(--sage-100)}
.frame img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease)}
.frame--zoom:hover img{transform:scale(1.035)}
.frame--4x3{aspect-ratio:4/3}.frame--3x4{aspect-ratio:3/4}.frame--16x9{aspect-ratio:16/9}.frame--16x10{aspect-ratio:16/10}.frame--4x5{aspect-ratio:4/5}.frame--1x1{aspect-ratio:1/1}
.frame__ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:var(--space-5);font-size:var(--size-caption);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--olive-500)}
.frame--forest{background:var(--forest-700)}
.frame--forest .frame__ph{color:var(--text-on-inverse-muted)}
.frame--stone{background:var(--offwhite-200)}
.frame--stone .frame__ph{color:var(--stone-600)}
.frame__caption{position:absolute;left:0;right:0;bottom:0;padding:var(--space-5);color:var(--offwhite-100);font-size:var(--size-body-sm);background:var(--scrim-bottom)}

/* ============ SERVICE CARDS ============ */
.card-service{display:flex;flex-direction:column;background:var(--surface-card);border:1px solid var(--border-soft);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-xs);transition:box-shadow var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease),transform var(--dur-base) var(--ease)}
.card-service:hover{border-color:var(--olive-400);box-shadow:var(--shadow-md);transform:translateY(-3px)}
.card-service>.frame{border-radius:0}
.card-service__body{padding:var(--card-padding);display:flex;flex-direction:column;gap:12px;flex:1}
.card-service h3{font-size:clamp(22px,2vw,30px);overflow-wrap:break-word;hyphens:auto}
.card-service p{margin:0;font-size:var(--size-body-sm);color:var(--text-muted)}
.card-service .textlink{margin-top:auto;padding-top:var(--space-4)}
.card-service a.cover{position:absolute;inset:0;border:none;z-index:2}
.card-service{position:relative}
/* project tiles */
.tile{position:relative;display:block;border:none;border-radius:var(--radius-md);overflow:hidden}
.tile .frame{border-radius:var(--radius-md)}
.tile__meta{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:var(--space-5);background:var(--scrim-bottom);transition:background var(--dur-base) var(--ease)}
.tile:hover .tile__meta{background:rgba(31,58,46,.62)}
.tile__meta small{font-size:var(--size-eyebrow);font-weight:600;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--sage-300)}
.tile__meta b{font-family:var(--font-serif-display);font-weight:300;font-size:26px;line-height:1.15;color:var(--offwhite-100)}
.tile__meta span{font-size:var(--size-body-sm);color:rgba(245,241,232,.72);max-height:0;opacity:0;overflow:hidden;transition:opacity var(--dur-base) var(--ease),max-height var(--dur-base) var(--ease)}
.tile:hover .tile__meta span{max-height:44px;opacity:1}

/* ============ EQUIPMENT / LISTS ============ */
.eq-list{list-style:none;padding:0;margin:var(--space-7) 0 0;display:grid;grid-template-columns:1fr 1fr;gap:12px var(--space-5)}
.eq-list li{display:flex;gap:10px;align-items:flex-start;font-size:var(--size-body-sm);color:var(--text-on-inverse-muted);padding-bottom:12px;border-bottom:1px solid var(--border-on-inverse)}
.feature-card{padding:var(--card-padding);background:var(--surface-card);border:1px solid var(--border-soft);border-radius:var(--radius-md);box-shadow:var(--shadow-xs)}
.feature-card h4{margin-top:var(--space-3)}
.callout{border-radius:var(--radius-md);padding:var(--space-8);display:flex;flex-direction:column;gap:var(--space-3);background:var(--surface-inverse);color:var(--text-on-inverse)}
.callout h2,.callout h3{color:var(--offwhite-100)}
.callout p{color:var(--text-on-inverse-muted);max-width:52ch;margin:0}
.callout .row{margin-top:var(--space-5)}
.callout--botanical{background:var(--surface-card-botanical);color:var(--text-heading)}
.callout--botanical p{color:var(--text-muted)}
.callout--paper{background:var(--surface-card);color:var(--text-heading);border:1px solid var(--border-soft);box-shadow:var(--shadow-xs)}
.callout--paper p,.callout--paper span:not(.eyebrow),.callout--paper a{color:var(--text-muted)}
.callout--paper h3,.callout--paper h4{color:var(--text-heading)}
.callout--botanical .eyebrow,.callout--paper .eyebrow{color:var(--text-botanical)}
.callout--botanical .phone-link,.callout--paper .phone-link{color:var(--forest-800)}
.breadcrumbs>span:last-child{color:var(--offwhite-100)}

/* ============ BEFORE / AFTER ============ */
.ba{position:relative;border-radius:var(--radius-md);overflow:hidden;aspect-ratio:16/9;background:var(--sage-100);touch-action:pan-y}
.ba__layer{position:absolute;inset:0}
.ba__layer img{width:100%;height:100%;object-fit:cover}
.ba__before{overflow:hidden;width:50%}
.ba__before img{width:100vw;max-width:none;height:100%}
.ba__tag{position:absolute;top:var(--space-4);padding:6px 10px;background:rgba(22,40,31,.72);color:var(--offwhite-100);font-size:var(--size-caption);letter-spacing:var(--tracking-label);text-transform:uppercase;border-radius:var(--radius-xs);z-index:3}
.ba__tag--b{left:var(--space-4)}.ba__tag--a{right:var(--space-4)}
.ba__line{position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--offwhite-100);z-index:3;pointer-events:none}
.ba__handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:var(--radius-pill);background:var(--offwhite-100);border:1px solid var(--stone-300);display:flex;align-items:center;justify-content:center;color:var(--forest-800);z-index:4;pointer-events:none}
.ba input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:ew-resize;z-index:5}

/* ============ FORM ============ */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
.field{display:flex;flex-direction:column;gap:8px}
.field--full{grid-column:1/-1}
.field label{font-size:var(--size-caption);font-weight:600;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}
.field .req{color:var(--terracotta-600)}
.field input,.field select,.field textarea{font:inherit;font-size:var(--size-body-sm);color:var(--text-body);padding:14px 16px;background:var(--surface-field);border:1px solid var(--border-hairline);border-radius:var(--radius-sm);box-shadow:inset 0 1px 0 rgba(22,40,31,.04);outline:none;transition:border-color var(--dur-base) var(--ease);width:100%;min-height:48px}
.field textarea{min-height:140px;resize:vertical}
.field select{appearance:none;background-image:none;padding-right:44px}
.field--select{position:relative}
.field--select .ico{position:absolute;right:14px;bottom:16px;color:var(--stone-600);pointer-events:none}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--olive-500)}
.field .hint{font-size:var(--size-caption);color:var(--text-muted)}
.field.has-error input,.field.has-error textarea,.field.has-error select{border-color:var(--terracotta-600)}
.field .err{font-size:var(--size-caption);color:var(--terracotta-700)}
.checkbox{display:flex;align-items:flex-start;gap:12px;cursor:pointer;font-size:var(--size-body-sm);line-height:1.5}
.checkbox input{position:absolute;opacity:0;width:0;height:0}
.checkbox .box{width:22px;height:22px;flex:0 0 auto;margin-top:1px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-xs);background:var(--surface-field);border:1px solid var(--border-hairline);color:var(--offwhite-100);transition:background var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease)}
.checkbox input:checked+.box{background:var(--forest-800);border-color:var(--forest-800)}
.checkbox .box .ico{opacity:0;font-size:13px}
.checkbox input:checked+.box .ico{opacity:1}
.checkbox input:focus-visible+.box{outline:2px solid var(--terracotta-600);outline-offset:2px}
.form-note{font-size:var(--size-body-sm);padding:14px 16px;border-radius:var(--radius-sm);border:1px solid var(--sage-300);background:var(--sage-100);color:var(--forest-800)}
.form-note--error{border-color:var(--terracotta-500);background:var(--terracotta-100);color:var(--terracotta-700)}
.hp-field{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.file-drop{display:flex;flex-direction:column;gap:8px;padding:16px;border:1px dashed var(--border-hairline);border-radius:var(--radius-sm);background:var(--surface-field);font-size:var(--size-body-sm);color:var(--text-muted)}

/* ============ MAP ============ */
.map-wrap{position:relative;border-radius:var(--radius-md);overflow:hidden;background:var(--offwhite-200);aspect-ratio:4/3}
.map-wrap iframe{width:100%;height:100%;border:0;display:block;filter:saturate(.75) contrast(1.02)}
.map-consent{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-4);text-align:center;padding:var(--space-6);background:var(--sage-100);color:var(--text-muted);font-size:var(--size-body-sm)}
.map-band{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch}
.map-band .map-wrap{aspect-ratio:auto;min-height:420px;border-radius:0}
.map-band__info{padding:var(--space-9) var(--space-8);background:var(--surface-card-botanical);display:flex;flex-direction:column;gap:var(--space-4);justify-content:center}

/* ============ FOOTER ============ */
.site-footer{background:var(--surface-footer);color:var(--text-on-inverse);padding-top:var(--space-9)}
.site-footer a{color:var(--text-on-inverse-muted);border:none}
.site-footer a:hover{color:var(--offwhite-100)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:var(--space-7)}
.footer-col{display:flex;flex-direction:column;gap:12px}
.footer-col h5{margin:0 0 4px;font-family:var(--font-sans-body);font-size:var(--size-eyebrow);font-weight:600;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--sage-500)}
.footer-col p,.footer-col span,.footer-col a{font-size:var(--size-body-sm);color:var(--text-on-inverse-muted)}
.footer-bottom{display:flex;flex-wrap:wrap;gap:var(--space-5);justify-content:space-between;align-items:center;margin-top:var(--space-8);padding:var(--space-5) 0;border-top:1px solid var(--border-on-inverse);font-size:var(--size-caption);color:var(--text-on-inverse-muted)}
.footer-bottom nav{display:flex;flex-wrap:wrap;gap:var(--space-5)}
/* Developer credit: deliberately quieter than the company details next to it. */
.lang-switch--footer .is-current{color:var(--offwhite-100)}
.lang-switch--footer a{color:var(--text-on-inverse-muted)}
.footer-bottom .credit{font-size:11px;letter-spacing:.04em;color:rgba(245,241,232,.42)}
.footer-bottom .credit a{color:rgba(245,241,232,.62);border-bottom:1px solid rgba(245,241,232,.22)}
.footer-bottom .credit a:hover{color:var(--offwhite-100);border-color:var(--terracotta-600)}

/* ============ REVEAL ============ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity var(--dur-reveal) var(--ease-in),transform var(--dur-reveal) var(--ease-in)}
.reveal.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
.reveal{opacity:1;transform:none}
}

/* ============ RESPONSIVE ============ */
@media(max-width:1440px){
.header-tools .btn{padding:13px 20px;font-size:13px}
}
@media(max-width:1280px){
/* MacBook 13"/14" with the long German labels — tighten spacing, not the type. */
.main-nav a{font-size:14px}
.utility-link{font-size:12px}
.wordmark--header img{max-height:46px;max-width:190px}
.wordmark b{font-size:19px}
}
@media(max-width:1160px){
.main-nav ul{gap:16px}
.header-tools .btn{padding:12px 16px;font-size:12px}
.utility-note{display:none}
}
@media(max-width:1200px){:root{--section-py:104px;--space-9:80px}}
@media(max-width:1080px){
.main-nav{display:none}
.nav-toggle{display:inline-flex}
.grid-2,.grid-2--wide-left,.grid-2--wide-right{gap:var(--space-8)}
/* No centre column left — the tools group is pinned to the container's right edge. */
.site-header .header-main{justify-content:space-between;gap:var(--space-3)}
.header-tools{margin-left:auto;margin-right:0;gap:var(--space-3)}
.wordmark--header img{max-height:44px;max-width:170px}
/* Tablet keeps the utility bar (there is no fixed bottom bar yet at this width). */
.utility-note{display:inline}
}
@media(max-width:820px){
/* Below this the fixed bottom bar carries phone + quote, so the utility row is
   redundant; removing it also gives the hero its full height back. */
:root{--utility-h:0px;--nav-h:70px}
.utility-bar{display:none}
}
@media(max-width:1000px){
.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
.map-band{grid-template-columns:1fr}
.map-band .map-wrap{min-height:320px}
}
@media(max-width:820px){
:root{--section-py:72px;--gutter:20px}
.grid-2,.grid-2--wide-left,.grid-2--wide-right{grid-template-columns:1fr;gap:var(--space-6)}
.footer-grid{grid-template-columns:1fr 1fr}
.form-grid{grid-template-columns:1fr}
.eq-list{grid-template-columns:1fr}
.header-tools .phone-link,.header-tools .btn{display:none}
.header-tools{gap:10px}
.wordmark--header img{max-height:38px;max-width:150px}
.wordmark--drawer img{max-height:36px;max-width:110px}
.mobile-bar{display:flex}
body{padding-bottom:64px}
.hero{min-height:auto;padding-top:calc(var(--header-h) + var(--space-8));padding-bottom:var(--space-8)}
.stats{gap:var(--space-6)}
.callout{padding:var(--space-6)}
.map-band__info{padding:var(--space-7) var(--gutter)}
}
@media(max-width:600px){
.grid-3,.grid-4{grid-template-columns:1fr}
.footer-grid{grid-template-columns:1fr}
.trust{gap:var(--space-4)}
.tile__meta span{max-height:44px;opacity:1}
.mobile-panel a{font-size:26px}
.wordmark--header img{max-height:34px;max-width:132px}
.wordmark--drawer img{max-height:32px;max-width:104px}
.wordmark b{font-size:18px}
.header-tools{gap:8px}
.lang-switch a{padding:4px 1px}
.lang-switch i{margin:0 4px}
}