/* =========================================================
   Agora Web — Design System
   Palette: paper white · pastel olive · sand / clay
   ========================================================= */

:root{
  /* Surfaces */
  --paper:      #FDFCFA;
  --white:      #FFFFFF;
  --tint:       #F6F4EF;   /* section wash (warm) */
  --tint-olive: #EFF3EE;   /* section wash (cool) */

  /* Ink */
  --ink:        #1B1F1C;
  --ink-mid:    #4A5249;
  --ink-soft:   #78806F;   /* wcag-safe on paper for large/secondary */
  --ink-faint:  #A7AC9F;

  /* Accents */
  --olive:       #7E9A80;
  --olive-deep:  #4E6853;
  --olive-tint:  #E6EDE4;
  --sand:        #E7DFD1;
  --sand-tint:   #F5F0E7;
  --clay:        #A98F76;
  --clay-tint:   #EFE6DA;

  /* Lines & shadows */
  --line:        rgba(27,31,28,.10);
  --line-soft:   rgba(27,31,28,.06);
  --shadow-sm:   0 1px 2px rgba(27,31,28,.04), 0 6px 18px -10px rgba(27,31,28,.14);
  --shadow-md:   0 2px 6px rgba(27,31,28,.04), 0 24px 60px -28px rgba(27,31,28,.28);
  --shadow-lg:   0 40px 120px -40px rgba(27,31,28,.34);

  /* Type */
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;

  /* Rhythm */
  --shell: 1200px;
  --gut: 28px;
  --sect-y: clamp(88px, 12vw, 168px);
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 34px;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur: .55s;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
/* The hidden attribute has to beat every display rule below — otherwise an
   element like the mobile menu stays in the layout and swallows clicks. */
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  font-weight:400;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
h1,h2,h3,h4,p,figure,ul,ol{ margin:0; }
ul,ol{ padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
:focus-visible{
  outline:2px solid var(--olive-deep);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link{
  position:fixed; top:-100px; left:16px; z-index:200;
  background:var(--ink); color:var(--paper);
  padding:12px 18px; border-radius:999px; font-size:14px;
  transition:top .3s var(--ease);
}
.skip-link:focus{ top:16px; }

/* ---------- Layout ---------- */
.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gut);
}
.shell-narrow{ max-width:820px; }
.section{ padding-block:var(--sect-y); position:relative; }
.section-tint{
  background:
    linear-gradient(180deg, var(--paper) 0%, var(--tint) 12%, var(--tint) 88%, var(--paper) 100%);
}

/* ---------- Type primitives ---------- */
.eyebrow{
  font-size:12px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--olive-deep);
  margin-bottom:22px;
}
.section-head{ max-width:760px; margin-bottom:clamp(48px,6vw,84px); }
.section-title{
  font-size:clamp(2rem, 4.6vw, 3.5rem);
  line-height:1.06;
  letter-spacing:-.035em;
  font-weight:400;
  color:var(--ink);
  text-wrap:balance;
}
.section-lead{
  margin-top:24px;
  font-size:clamp(1.02rem,1.35vw,1.2rem);
  line-height:1.65;
  color:var(--ink-mid);
  max-width:60ch;
  text-wrap:pretty;
}
.accent-serif{
  font-family:var(--serif);
  font-weight:300;
  font-style:italic;
  letter-spacing:-.02em;
  color:var(--olive-deep);
}

/* ---------- Buttons ---------- */
.btn{
  --btn-bg:var(--ink);
  --btn-fg:var(--paper);
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px;
  border-radius:999px;
  border:1px solid transparent;
  font-size:15px; font-weight:500; letter-spacing:-.01em;
  cursor:pointer;
  background:var(--btn-bg); color:var(--btn-fg);
  transition:transform .35s var(--ease-out), background-color .3s var(--ease),
             color .3s var(--ease), border-color .3s var(--ease), box-shadow .35s var(--ease);
  will-change:transform;
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn:active{ transform:translateY(0); }
.btn-solid{ background:var(--ink); color:var(--paper); }
.btn-solid:hover{ background:var(--olive-deep); }
.btn-ghost{
  background:transparent; color:var(--ink);
  border-color:var(--line);
  box-shadow:none;
}
.btn-ghost:hover{ background:var(--white); border-color:rgba(27,31,28,.2); }
.btn-sm{ padding:11px 22px; font-size:14px; }
.btn-block{ width:100%; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding-block:18px;
  transition:padding .4s var(--ease), background-color .4s var(--ease),
             box-shadow .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.is-stuck{
  padding-block:10px;
  background:rgba(253,252,250,.78);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  backdrop-filter:saturate(180%) blur(18px);
  border-bottom-color:var(--line-soft);
}
.header-inner{ display:flex; align-items:center; gap:24px; }

.brand{ display:inline-flex; align-items:center; gap:11px; flex:0 0 auto; }
.brand-mark{
  width:34px; height:34px; color:var(--olive-deep);
  transition:transform .5s var(--ease-out);
}
.brand:hover .brand-mark{ transform:rotate(-6deg) scale(1.04); }
.brand-word{
  font-size:19px; font-weight:600; letter-spacing:-.03em; color:var(--ink);
}
.brand-word-thin{ font-weight:300; color:var(--ink-soft); margin-left:2px; }

.nav-desktop{
  display:flex; gap:34px; margin-inline:auto;
  font-size:15px; color:var(--ink-mid);
}
.nav-desktop a{ position:relative; padding-block:4px; transition:color .3s var(--ease); }
.nav-desktop a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:var(--olive-deep); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease-out);
}
.nav-desktop a:hover{ color:var(--ink); }
.nav-desktop a:hover::after{ transform:scaleX(1); transform-origin:left; }

.header-actions{ display:flex; align-items:center; gap:14px; margin-left:auto; }

/* Language switch */
.lang-switch{
  position:relative;
  display:inline-flex; align-items:center; gap:2px;
  padding:4px; border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.6);
}
.lang-btn{
  position:relative; z-index:1;
  background:none; border:0; cursor:pointer;
  padding:5px 11px; border-radius:999px;
  font-size:12.5px; font-weight:500; letter-spacing:.06em;
  color:var(--ink-soft);
  transition:color .35s var(--ease);
}
.lang-btn.is-active{ color:var(--white); }
.lang-sep{ color:var(--ink-faint); font-size:12px; }
.lang-thumb{
  position:absolute; top:4px; left:4px;
  width:42px; height:calc(100% - 8px);
  border-radius:999px; background:var(--olive-deep);
  transition:transform .45s var(--ease-out), width .45s var(--ease-out);
}
/* Pre-JS fallback only — moveThumb() in main.js measures the real button
   positions and overrides this inline as soon as a language is applied. */
.lang-switch[data-active="en"] .lang-thumb{ transform:translateX(53px); }
.lang-switch[data-active="de"] .lang-thumb{ transform:translateX(106px); }

/* Burger */
.burger{
  display:none; width:40px; height:40px;
  background:none; border:0; cursor:pointer;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
}
.burger span{
  display:block; width:20px; height:1.5px; background:var(--ink); border-radius:2px;
  transition:transform .4s var(--ease-out), opacity .3s var(--ease);
}
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.25px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.25px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu{
  position:fixed; inset:0; z-index:99;
  background:rgba(253,252,250,.96);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  display:flex; align-items:center;
  opacity:0; pointer-events:none;
  transition:opacity .4s var(--ease);
}
.mobile-menu.is-open{ opacity:1; pointer-events:auto; }
.mobile-nav{ display:flex; flex-direction:column; gap:6px; width:100%; }
.mobile-nav a{
  font-size:clamp(1.9rem,8vw,2.6rem);
  letter-spacing:-.035em; font-weight:400; color:var(--ink);
  padding-block:10px;
  opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.mobile-menu.is-open .mobile-nav a{ opacity:1; transform:none; }
.mobile-nav a:nth-child(1){ transition-delay:.06s }
.mobile-nav a:nth-child(2){ transition-delay:.10s }
.mobile-nav a:nth-child(3){ transition-delay:.14s }
.mobile-nav a:nth-child(4){ transition-delay:.18s }
.mobile-nav a:nth-child(5){ transition-delay:.22s }
.mobile-nav .btn{
  align-self:flex-start; margin-top:26px; font-size:15px;
  transition-delay:.26s;
}
/* .mobile-nav a setzt color:var(--ink) und ist spezifischer als .btn-solid —
   ohne diese Zeile steht der CTA dunkel auf dunkel und ist unsichtbar. */
.mobile-nav .btn-solid{ color:var(--paper); }
.mobile-nav .btn-solid:hover{ color:var(--paper); }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  padding-top:clamp(140px,17vw,208px);
  padding-bottom:clamp(40px,6vw,80px);
  text-align:center;
  overflow:hidden;
}
.hero-glow{
  position:absolute; z-index:0; pointer-events:none;
  top:-28%; left:50%; transform:translateX(-50%);
  width:min(1150px,130vw); aspect-ratio:1.35/1;
  background:
    radial-gradient(46% 42% at 42% 44%, rgba(126,154,128,.20), transparent 68%),
    radial-gradient(44% 40% at 62% 56%, rgba(169,143,118,.16), transparent 70%);
  filter:blur(24px);
}
.hero-inner{ position:relative; z-index:1; }
.hero-title{
  font-size:clamp(2.7rem, 7.4vw, 6rem);
  line-height:.99;
  letter-spacing:-.045em;
  font-weight:400;
  max-width:16ch;
  margin-inline:auto;
  text-wrap:balance;
}
.hero-title .line{ display:block; }
.hero-sub{
  margin:30px auto 0;
  max-width:56ch;
  font-size:clamp(1.05rem,1.6vw,1.28rem);
  line-height:1.62;
  color:var(--ink-mid);
  text-wrap:pretty;
}
.hero-cta{
  margin-top:42px;
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
}
.hero-note{
  margin-top:26px;
  font-size:13.5px; color:var(--ink-soft); letter-spacing:.01em;
}

/* ---------- Device mockup ---------- */
.device-stage{
  position:relative;
  margin-top:clamp(56px,8vw,110px);
  perspective:1600px;
}
.device-browser{
  position:relative;
  max-width:960px; margin-inline:auto;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  transform:rotateX(4deg);
  transform-origin:top center;
  transition:transform 1s var(--ease-out);
}
.device-stage:hover .device-browser{ transform:rotateX(0deg); }
/* ---------------------------------------------------------------
   Mockup-Palette. Die Seite verspricht „ein Entwurf in Ihren Farben" —
   das Mockup ist der Beleg dafür und trägt deshalb NICHT unsere eigenen
   Farben, sondern die eines Betriebs. main.js wechselt `data-palette`
   zwischen den dreien, unter prefers-reduced-motion bleibt Taverne stehen.
   Ohne Attribut gilt Taverne, deshalb braucht es dafür keinen Selektor.
   --------------------------------------------------------------- */
.device-stage{
  --m-brand:  #1D3A5C;   /* Logo, Knopf                    */
  --m-accent: #C4643C;   /* Eyebrow, aktiver Navigationslink */
  --m-tint-1: #DCE6EF;   /* Navigation, Karte 1            */
  --m-tint-2: #F5E7DC;   /* Karte 2, Verlauf               */
  --m-tint-3: #EFD5C8;   /* Karte 3, Verlauf               */
  --m-bar-1:  #D8E0E9;   /* Überschriften-Balken           */
  --m-bar-2:  #E8EDF2;   /* Fliesstext-Balken              */
}
.device-stage[data-palette="nails"]{
  --m-brand:#6B3247; --m-accent:#B5697F;
  --m-tint-1:#F0E0E6; --m-tint-2:#F9EFEA; --m-tint-3:#E9D3DC;
  --m-bar-1:#EADFE4; --m-bar-2:#F4ECEF;
}
.device-stage[data-palette="werkstatt"]{
  --m-brand:#24282B; --m-accent:#D9702A;
  --m-tint-1:#E2E5E7; --m-tint-2:#F2E7DC; --m-tint-3:#DDE1E4;
  --m-bar-1:#DFE2E4; --m-bar-2:#ECEEEF;
}
/* Der Wechsel selbst — langsam genug, dass er neben der Überschrift
   nicht um Aufmerksamkeit kämpft. */
.mini-logo, .mini-links i, .mini-eyebrow, .mini-h1, .mini-p, .mini-btn,
.mini-card, .mini-hero-img, .ph-line, .ph-block, .ph-btn, .browser-bar .dot{
  transition:background .9s var(--ease-out);
}
@media (prefers-reduced-motion:reduce){
  .mini-logo, .mini-links i, .mini-eyebrow, .mini-h1, .mini-p, .mini-btn,
  .mini-card, .mini-hero-img, .ph-line, .ph-block, .ph-btn, .browser-bar .dot{
    transition:none;
  }
}

.browser-bar{
  display:flex; align-items:center; gap:7px;
  padding:13px 18px;
  border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg,#FCFBF8,#F7F5F1);
}
.browser-bar .dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--m-tint-1);
}
.browser-bar .dot:nth-child(2){ background:var(--m-tint-2); }
.browser-bar .dot:nth-child(3){ background:var(--m-tint-3); }
.browser-url{
  margin-left:14px; padding:4px 16px;
  background:var(--paper); border:1px solid var(--line-soft);
  border-radius:999px;
  font-size:11.5px; color:var(--ink-soft); letter-spacing:.01em;
}
.browser-body{ padding:clamp(18px,3vw,32px); text-align:left; }

.mini-nav{ display:flex; align-items:center; justify-content:space-between; margin-bottom:clamp(20px,3vw,34px); }
.mini-logo{ width:64px; height:12px; border-radius:3px; background:var(--m-brand); }
.mini-links{ display:flex; gap:12px; }
.mini-links i{ width:34px; height:7px; border-radius:3px; background:var(--m-tint-1); }
.mini-links i:last-child{ width:52px; background:var(--m-accent); opacity:.5; }

.mini-hero{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,3vw,34px); align-items:center; }
.mini-hero-text{ display:flex; flex-direction:column; gap:9px; }
.mini-eyebrow{ width:80px; height:7px; border-radius:3px; background:var(--m-accent); }
.mini-h1{ height:clamp(16px,2.4vw,24px); border-radius:5px; background:var(--m-bar-1); }
.mini-h1.short{ width:62%; }
.mini-p{ height:8px; border-radius:3px; background:var(--m-bar-2); margin-top:4px; }
.mini-p.short{ width:70%; }
.mini-btn{ width:104px; height:26px; border-radius:999px; background:var(--m-brand); margin-top:10px; }
.mini-hero-img{
  aspect-ratio:4/3; border-radius:var(--r-md);
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(255,255,255,.6), transparent 60%),
    linear-gradient(140deg, var(--m-tint-3), var(--m-tint-2) 55%, var(--m-accent));
  border:1px solid var(--line-soft);
}
.mini-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,2vw,20px); margin-top:clamp(18px,3vw,32px); }
.mini-card{
  height:clamp(56px,8vw,86px); border-radius:var(--r-sm);
  background:var(--m-tint-1); border:1px solid var(--line-soft);
}
.mini-card:nth-child(2){ background:var(--m-tint-2); }
.mini-card:nth-child(3){ background:var(--m-tint-3); }

.device-phone{
  position:absolute; right:2%; bottom:-34px;
  width:clamp(112px,13vw,158px); aspect-ratio:1/2.06;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:26px;
  box-shadow:var(--shadow-md);
  padding:14px 12px;
  transform:translateY(0) rotate(-3deg);
  animation:float 7s ease-in-out infinite;
}
.phone-screen{ display:flex; flex-direction:column; gap:8px; height:100%; }
.ph-line{ height:7px; border-radius:3px; background:var(--m-bar-2); }
.ph-line.w60{ width:60%; background:var(--m-accent); }
.ph-line.w80{ width:80%; }
.ph-line.w40{ width:40%; }
.ph-block{
  flex:1; border-radius:12px;
  background:linear-gradient(150deg,var(--m-tint-2),var(--m-tint-3));
}
.ph-btn{ height:22px; border-radius:999px; background:var(--m-brand); }

@keyframes float{
  0%,100%{ transform:translateY(0) rotate(-3deg); }
  50%{ transform:translateY(-12px) rotate(-1.5deg); }
}

/* =========================================================
   TICKER
   ========================================================= */
.ticker{
  border-block:1px solid var(--line-soft);
  padding-block:20px;
  overflow:hidden;
  background:var(--white);
  margin-top:clamp(56px,8vw,96px);
}
.ticker-track{ display:flex; width:max-content; animation:scroll 42s linear infinite; }
.ticker-set{
  display:flex; align-items:center; gap:38px; padding-right:38px;
  font-size:13px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-soft); white-space:nowrap;
}
.tick-dot{ width:4px; height:4px; border-radius:50%; background:var(--olive); flex:0 0 auto; }
@keyframes scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.ticker:hover .ticker-track{ animation-play-state:paused; }

/* =========================================================
   SERVICES
   ========================================================= */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:1px;
  background:var(--line-soft);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.card{
  position:relative;
  background:var(--white);
  padding:clamp(30px,3.4vw,46px);
  min-height:280px;
  display:flex; flex-direction:column;
  transition:background-color .5s var(--ease);
}
.card::after{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:var(--olive); transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--ease-out);
}
.card:hover{ background:var(--tint); }
.card:hover::after{ transform:scaleX(1); }
.card-num{
  position:absolute; top:clamp(26px,3vw,38px); right:clamp(26px,3vw,38px);
  font-size:12px; letter-spacing:.14em; color:var(--ink-faint);
}
.card-icon{
  width:38px; height:38px; color:var(--olive-deep);
  transition:transform .5s var(--ease-out);
}
.card-icon svg{ width:100%; height:100%; }
.card:hover .card-icon{ transform:translateY(-3px); }
.card h3{
  margin-top:clamp(48px,6vw,72px);
  font-size:1.22rem; font-weight:500; letter-spacing:-.022em;
}
.card p{
  margin-top:12px;
  font-size:15.2px; line-height:1.62; color:var(--ink-mid);
  text-wrap:pretty;
}

/* =========================================================
   BENEFITS
   ========================================================= */
.benefit-list{ display:flex; flex-direction:column; }
.benefit{
  display:grid;
  grid-template-columns:minmax(180px,300px) 1fr;
  gap:clamp(24px,5vw,80px);
  align-items:start;
  padding-block:clamp(38px,5vw,60px);
  border-top:1px solid var(--line);
}
.benefit:last-child{ border-bottom:1px solid var(--line); }
.benefit-figure{ display:flex; align-items:baseline; gap:12px; }
.benefit-num{
  font-family:var(--serif);
  font-size:clamp(3.4rem,7.5vw,5.6rem);
  font-weight:300; line-height:.86;
  letter-spacing:-.04em;
  color:var(--olive-deep);
}
.benefit-unit{
  font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft);
}
.benefit-body h3{
  font-size:clamp(1.35rem,2.4vw,1.85rem);
  font-weight:400; letter-spacing:-.028em;
}
.benefit-body p{
  margin-top:14px; max-width:56ch;
  color:var(--ink-mid); font-size:1.02rem; line-height:1.68;
  text-wrap:pretty;
}

.includes{
  margin-top:clamp(48px,6vw,80px);
  background:var(--white);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  padding:clamp(30px,4vw,54px);
  box-shadow:var(--shadow-sm);
}
.includes-title{
  font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:500; margin-bottom:28px;
}
.includes-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:16px 34px;
}
.includes-list li{
  position:relative; padding-left:28px;
  font-size:15.5px; color:var(--ink-mid);
}
.includes-list li::before{
  content:""; position:absolute; left:0; top:.52em;
  width:14px; height:8px;
  border-left:1.6px solid var(--olive-deep);
  border-bottom:1.6px solid var(--olive-deep);
  transform:rotate(-45deg);
}

/* =========================================================
   CREED — one quiet brand sentence, no card, no grid.
   Deliberately the only place the olive metaphor is spelled out.
   ========================================================= */
.creed{
  padding-block:clamp(52px,6.5vw,92px);
  text-align:center;
}
.creed-inner{ display:flex; flex-direction:column; align-items:center; }
.creed-mark{
  width:34px; height:34px;
  color:var(--olive);
  opacity:.55;
  margin-bottom:clamp(26px,3vw,38px);
}
.creed-mark svg{ width:100%; height:100%; }
.creed-text{
  max-width:46ch;
  font-size:clamp(1.1rem,2vw,1.5rem);
  line-height:1.62;
  letter-spacing:-.022em;
  color:var(--ink-mid);
  text-wrap:pretty;
}
.creed-lead{
  font-family:var(--serif);
  font-style:italic;
  font-weight:300;
  color:var(--olive-deep);
  margin-right:.35em;
}

/* =========================================================
   PROCESS
   ========================================================= */
.steps{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(28px,3.4vw,44px);
  counter-reset:step;
}
.step{ position:relative; padding-top:26px; border-top:1px solid var(--ink); }
.step:nth-child(n+2){ border-top-color:var(--line); }
.step-index{
  display:block;
  font-size:12px; letter-spacing:.16em; color:var(--olive-deep);
  margin-bottom:18px;
}
.step h3{ font-size:1.18rem; font-weight:500; letter-spacing:-.022em; }
.step p{ margin-top:12px; font-size:15.2px; line-height:1.62; color:var(--ink-mid); text-wrap:pretty; }

/* =========================================================
   PRICING TEASER
   ========================================================= */
.teaser{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:clamp(32px,5vw,72px);
  align-items:center;
  background:var(--white);
  border:1px solid var(--line-soft);
  border-radius:var(--r-xl);
  padding:clamp(34px,5vw,72px);
  box-shadow:var(--shadow-sm);
}
.teaser .section-title{ margin-top:0; }
.teaser .btn{ margin-top:34px; }
.teaser-figure{ display:flex; justify-content:center; }
.price-chip{
  width:100%; max-width:340px;
  display:flex; flex-direction:column; gap:18px;
  padding:clamp(30px,3.4vw,42px);
  border-radius:var(--r-lg);
  background:linear-gradient(160deg,var(--olive-tint),var(--sand-tint));
  border:1px solid var(--line-soft);
}
.price-chip-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
}
.price-chip-label{
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--olive-deep);
}
.price-chip-value{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.9rem,3.4vw,2.5rem); line-height:1;
  letter-spacing:-.03em; color:var(--ink); white-space:nowrap;
}
.price-chip-rule{ height:1px; background:rgba(27,31,28,.12); }
.price-chip-sub{ font-size:13px; color:var(--ink-soft); }

/* =========================================================
   FAQ
   ========================================================= */
.accordion{ border-top:1px solid var(--line); }
.acc{ border-bottom:1px solid var(--line); }
.acc summary{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding-block:26px;
  cursor:pointer; list-style:none;
  font-size:clamp(1.02rem,1.7vw,1.2rem);
  letter-spacing:-.02em;
  transition:color .3s var(--ease);
}
.acc summary::-webkit-details-marker{ display:none; }
.acc summary:hover{ color:var(--olive-deep); }
.acc-icon{
  position:relative; flex:0 0 auto; width:16px; height:16px;
}
.acc-icon::before,.acc-icon::after{
  content:""; position:absolute; inset:50% 0 auto 0;
  height:1.5px; background:var(--ink); border-radius:2px;
  transition:transform .45s var(--ease-out), opacity .3s var(--ease);
}
.acc-icon::after{ transform:rotate(90deg); }
.acc[open] .acc-icon::after{ transform:rotate(0deg); opacity:0; }
.acc-body{ padding-bottom:28px; max-width:62ch; }
.acc-body p{ color:var(--ink-mid); line-height:1.68; }
.acc[open] .acc-body{ animation:accIn .45s var(--ease-out) both; }
@keyframes accIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

/* =========================================================
   CONTACT
   ========================================================= */
.contact-section{
  background:linear-gradient(180deg,var(--paper),var(--tint-olive));
}
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(40px,6vw,96px);
  align-items:start;
}
.contact-meta{ margin-top:44px; display:flex; flex-direction:column; gap:18px; }
.contact-meta li{
  display:flex; flex-direction:column; gap:3px;
  padding-bottom:16px; border-bottom:1px solid var(--line-soft);
}
.cm-label{ font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
.contact-meta a{ transition:color .3s var(--ease); }
.contact-meta a:hover{ color:var(--olive-deep); }

.contact-form{
  background:var(--white);
  border:1px solid var(--line-soft);
  border-radius:var(--r-xl);
  padding:clamp(28px,3.6vw,46px);
  box-shadow:var(--shadow-md);
  display:flex; flex-direction:column; gap:20px;
}
.field{ display:flex; flex-direction:column; gap:8px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field label{
  font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);
}
.opt{ text-transform:none; letter-spacing:0; color:var(--ink-faint); }
.field input,.field textarea,.field select{
  width:100%;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:14px 16px;
  font-size:16px;
  color:var(--ink);
  transition:border-color .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field textarea{ resize:vertical; min-height:120px; line-height:1.6; }
.field input:hover,.field textarea:hover,.field select:hover{ border-color:rgba(27,31,28,.2); }
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;
  border-color:var(--olive);
  background:var(--white);
  box-shadow:0 0 0 4px rgba(126,154,128,.14);
}
.select-wrap{ position:relative; }
.select-wrap::after{
  content:""; position:absolute; right:18px; top:50%; pointer-events:none;
  width:8px; height:8px; margin-top:-6px;
  border-right:1.5px solid var(--ink-soft); border-bottom:1.5px solid var(--ink-soft);
  transform:rotate(45deg);
}
.field select{ appearance:none; -webkit-appearance:none; padding-right:44px; }

.field-error{
  display:none;
  font-size:13px; color:#A8543F;
}
.field.has-error input,.field.has-error textarea{ border-color:#C97B66; }
.field.has-error .field-error{ display:block; }
.consent-error{ margin-top:-10px; }
.checkbox.has-error ~ .consent-error{ display:block; }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.checkbox{
  display:flex; align-items:flex-start; gap:12px;
  cursor:pointer; font-size:14px; color:var(--ink-mid); line-height:1.55;
}
.checkbox input{ position:absolute; opacity:0; width:0; height:0; }
.checkbox .box{
  flex:0 0 auto; width:20px; height:20px; margin-top:1px;
  border:1px solid var(--line); border-radius:6px; background:var(--paper);
  position:relative;
  transition:background-color .3s var(--ease), border-color .3s var(--ease);
}
.checkbox .box::after{
  content:""; position:absolute; left:6px; top:2.5px;
  width:5px; height:10px;
  border-right:1.8px solid var(--white); border-bottom:1.8px solid var(--white);
  transform:rotate(45deg) scale(0);
  transition:transform .3s var(--ease-out);
}
.checkbox input:checked + .box{ background:var(--olive-deep); border-color:var(--olive-deep); }
.checkbox input:checked + .box::after{ transform:rotate(45deg) scale(1); }
.checkbox input:focus-visible + .box{ outline:2px solid var(--olive-deep); outline-offset:3px; }
.checkbox.has-error .box{ border-color:#C97B66; }

.form-status{
  font-size:14.5px; line-height:1.6; color:var(--olive-deep);
  min-height:1px;
}
.form-status.is-error{ color:#A8543F; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  background:var(--ink);
  color:#D9DCD5;
  padding-block:clamp(56px,7vw,88px) 34px;
}
.site-footer .brand-word{ color:var(--paper); }
.site-footer .brand-word-thin{ color:#8E9689; }
.site-footer .brand-mark{ color:var(--olive); }
.footer-top{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  flex-wrap:wrap;
  padding-bottom:clamp(38px,5vw,56px);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-claim{ color:#9AA294; font-size:15px; max-width:38ch; }
.footer-cols{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:36px;
  padding-block:clamp(38px,5vw,56px);
}
.footer-col{ display:flex; flex-direction:column; gap:12px; font-size:15px; }
.footer-h{
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:#7E8779; margin-bottom:6px;
}
.footer-col a{ color:#D9DCD5; transition:color .3s var(--ease); width:fit-content; }
.footer-col a:hover{ color:var(--white); }
.footer-bottom{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-top:26px; border-top:1px solid rgba(255,255,255,.1);
  font-size:13px; color:#7E8779;
}

/* =========================================================
   REVEAL ANIMATIONS
   ========================================================= */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .85s var(--ease-out), transform .85s var(--ease-out);
}
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-reveal-delay="1"]{ transition-delay:.08s }
.reveal[data-reveal-delay="2"]{ transition-delay:.16s }
.reveal[data-reveal-delay="3"]{ transition-delay:.24s }
.reveal[data-reveal-delay="4"]{ transition-delay:.32s }
.reveal[data-reveal-delay="5"]{ transition-delay:.40s }

/* Language cross-fade */
body.is-switching main,
body.is-switching .site-footer,
body.is-switching .site-header{
  opacity:.35;
  transition:opacity .2s var(--ease);
}
main,.site-footer,.site-header{ transition:opacity .35s var(--ease); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
/* In der deutschen Fassung steht „Fuer IKE" nicht im Menue: sie richtet sich
   an griechische Betriebe in Deutschland, dort gibt es keine IKE. Die Seite
   selbst und der Fusslink bleiben erreichbar. Gilt fuer Leiste und
   Handy-Menue; main.js setzt lang am <html>. */
html[lang="de"] a[data-i18n="nav.ike"]{ display:none; }

/* Sechs Menuepunkte (seit „Για ΙΚΕ") passen erst ab rund 1071 px in eine
   Zeile — gemessen auf Griechisch, der laengsten Fassung. Darunter bricht
   die Leiste um. Deshalb wechselt das Menue schon hier auf den Burger; der
   Knopf „Angebot anfragen" bleibt bis 960 px stehen. */
@media (max-width:1080px){
  .nav-desktop{ display:none; }
  .burger{ display:flex; }
}
@media (max-width:960px){
  .nav-desktop{ display:none; }
  .burger{ display:flex; }
  .hide-sm{ display:none; }
  .teaser{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .benefit{ grid-template-columns:1fr; gap:20px; }
  .benefit-figure{ align-items:center; }
  .benefit-num{ font-size:clamp(3rem,12vw,4rem); }
}
@media (max-width:640px){
  :root{ --gut:20px; }
  body{ font-size:16px; }
  .device-phone{ right:-2%; bottom:-26px; }
  .mini-hero{ grid-template-columns:1fr; }
  .mini-hero-img{ aspect-ratio:16/9; }
  .field-row{ grid-template-columns:1fr; }
  .footer-top{ flex-direction:column; align-items:flex-start; }
  .hero-cta .btn{ flex:1 1 100%; }
}

/* =========================================================
   MOTION / PRINT
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .device-browser{ transform:none; }
}
@media print{
  .site-header,.mobile-menu,.ticker,.device-stage{ display:none; }
  body{ background:#fff; }
}

/* Hinweis über dem Kontaktformular. Gleiche Sprache wie .changes-note
   auf der Preisseite: Olivenstrich als Fussnote zum Abschnitt. */
.contact-note{
  margin:22px 0 0;
  padding-left:18px; border-left:2px solid var(--olive);
  font-size:15px; line-height:1.7; color:var(--ink-mid);
  max-width:62ch; text-wrap:pretty;
}
.contact-note strong{ color:var(--ink); font-weight:600; }

/* =========================================================
   WER DAHINTERSTECKT
   Foto links, Text rechts. Bei einem Ein-Personen-Betrieb ist
   das Gesicht das stärkste Vertrauenssignal der Seite — und das
   einzige Foto überhaupt, deshalb schwarzweiss: ein farbiges
   Bild wäre neben Olivgrün und Sand das lauteste Element.
   ========================================================= */
.me{
  display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
  gap:clamp(28px,5vw,72px); align-items:center;
}
.me-media img{
  width:100%; height:auto; display:block;
  aspect-ratio:4/5; object-fit:cover;
  border-radius:var(--r-lg);
  background:var(--tint);
}
.me-text .h2{ margin-top:10px; }
.me-text .section-lead{ margin-top:18px; max-width:52ch; }
@media (max-width:820px){
  .me{ grid-template-columns:1fr; gap:26px; }
  .me-media{ max-width:320px; }
}