/* =========================================================
   DOTMADE – Base Styles (Satoshi Variable only, local)
   ========================================================= */

/* ---------- Font: Satoshi Variable (lokal) ---------- */
@font-face{
  font-family:"Satoshi";
  src:url("/media/brand/fonts/Satoshi-Variable.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal italic;
  font-display:swap;
}

/* ---------- Design Tokens ---------- */


  :root{
  /* Colors */
  --bg:#ffffff;
  --fg:#111111;
  --brand:#000000;
  --brand40:rgb(0 0 0 / .44);
  --light-gray:#E5E7EB;
  --lighter-gray:#f8f8f8;
  --background: var(--bg);
  --foreground: var(--fg);


  /* Elevations */
  --elev-sm: 0 1px 2px rgba(0,0,0,.06);

  /* Layout */
  --container-wide:1440px;
  --container-content:1180px;
  --edge: clamp(24px, 6vw, 64px);
  --gap-desktop:24px;
  --gap-tablet:20px;
  --gap-mobile:16px;
  --radius:16px;

  /* Spacing (Sections) */
  --space-xs: clamp(12px, 2.0vw, 20px);
  --space-sm: clamp(20px, 3.2vw, 40px);
  --space-md: clamp(32px, 4.5vw, 64px);
  --space-lg: clamp(48px, 6.5vw, 96px);

  /* Font family */
  --font: "Satoshi", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Noto Sans", sans-serif;

  /* ---------- Typografie Tokens (min 18px für Text & Headings) ---------- */
  --fs-h1: clamp(36px, 6vw, 72px);  --lh-h1: 1.05;
  --fs-h2: clamp(28px, 4.2vw, 56px);--lh-h2: 1.12;
  --fs-h3: clamp(22px, 3.0vw, 36px);--lh-h3: 1.25;
  --fs-h4: clamp(20px, 2.2vw, 28px);--lh-h4: 1.35;
  --fs-h5: clamp(18px, 1.8vw, 22px);--lh-h5: 1.3;

  /* WICHTIG: Lauftext min. 18px */
  --fs-p:  clamp(18px, 1.5vw, 20px); --lh-p:  1.6;

  /* Meta/Buttons dürfen kleiner sein, aber lesbar */
  --fs-meta: clamp(18px, 1.5vw, 20px); --lh-meta: 1.45;
  --fs-btn:  clamp(18px, 1.5vw, 20px); --lh-btn:  1.2;

  /* Listen sollen wie Body wirken → min 18px */
  --fs-li:   clamp(18px, 1.5vw, 20px); --lh-li:  1.45;

  --fs-pretty: clamp(18px,1.5vw,20px); --lh-pretty: 1.65;
}

/* =========================================================
   RESET & BASE
   ========================================================= */
*{ box-sizing:border-box; }
html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font);
  font-size:16px;                /* Basis; Größen kommen über Tokens */
  line-height:var(--lh-p);
  letter-spacing:.01px;
  font-variation-settings:"wght" 450;
  font-optical-sizing:auto;
  text-rendering:optimizeLegibility;
}
img,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-underline-offset:3px; text-decoration-color:rgba(0,0,0,.25); }
p{ margin:0 0 .9rem; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,1,1); white-space:nowrap; border:0; }

/* =========================================================
   TYPOGRAPHY
   ========================================================= */
h1,h2,h3,h4,h5{ margin:0 0 2rem; letter-spacing:-.01em; font-variation-settings:"wght" 740; }
h1{ font-size:var(--fs-h1); line-height:var(--lh-h1); text-align:center; }
h2{ font-size:var(--fs-h2); line-height:var(--lh-h2); }
h3{ font-size:var(--fs-h3); line-height:var(--lh-h3); font-variation-settings:"wght" 620; }
h4{ font-size:var(--fs-h4); line-height:var(--lh-h4); font-variation-settings:"wght" 580; }
h5{ font-size:var(--fs-h5); line-height:var(--lh-h5); font-variation-settings:"wght" 560; }
h2.h1 {text-align: center;}

p{ font-size:var(--fs-p); line-height:var(--lh-p); }
p.meta{ font-size:var(--fs-meta); line-height:var(--lh-meta); color:var(--brand40); }
p.bold{ font-variation-settings:"wght" 650; }
p.intro{ font-size:var(--fs-p); text-align:center; margin:0; }
p.intro.lead {font-variation-settings:"wght" 700; }
p.pretty{ font-size:var(--fs-pretty); line-height:var(--lh-pretty); }
p.cta-line {text-align: center;}

.display{
  font-size:clamp(32px,5vw,56px); /* etwas ruhiger & immer >18 */
  line-height:1.08;
  font-variation-settings:"wght" 740;
  letter-spacing:-.01em;
  margin:0 0 clamp(16px,2.2vw,28px);
}

/* Lists */
ul,ol{ margin:0 0 1rem; padding-left:1.2rem; }
ul li,ol li{ font-size:var(--fs-li); line-height:var(--lh-li); margin:.25rem 0; }

/* =========================================================
   LAYOUT: Container, Grid, Sections
   ========================================================= */
.container{ max-width:var(--container-content); margin:0 auto; padding-inline:var(--edge); }
.grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gap-desktop); }
.span-12{ grid-column:1 / -1; }
.span-10{ grid-column:2 / span 10; }
.span-8 { grid-column:3 / span 8; }
.span-6 { grid-column:4 / span 6; }

.section.smaller{ padding-block:var(--space-xs); }
.section.small  { padding-block:var(--space-sm); }
.section        { padding-block:var(--space-md); }
.section.large  { padding-block:var(--space-lg); }

/* =========================================================
   BUTTONS
   ========================================================= */
a.button, .btn{
  display:inline-block;
  border:1px solid var(--light-gray);
  padding:14px 18px;
  border-radius:999px;
  font-size:var(--fs-btn);
  line-height:var(--lh-btn);
  transition:background .15s, transform .15s, box-shadow .15s, border-color .15s;
}
.btn:hover{ background:#fafafa; border-color:var(--light-gray); box-shadow:var(--elev-sm); transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn-primary{ background:var(--brand); border-color:var(--brand); color:var(--background); font-variation-settings:"wght" 600; }
.btn-primary:hover{ background:var(--brand); border-color:var(--brand); }
.btn-line{ text-decoration:underline; border:none; padding:0; }
.btn-outline{ text-decoration:none;  }

/* =========================================================
   HERO media (figure im #hero)
   ========================================================= */


#hero figure { margin:0; padding:0; }
#hero figure img, #hero figure picture{
  display:block;
  width:calc(100vw - (var(--edge)*2));
  max-width:none;
  height:auto;
  margin-inline:auto;
}

/* =========================================================
   CTA
   ========================================================= */
#cta {
  background-color:var(--lighter-gray);
  text-align: center;
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position: sticky;
  top: 0;
  z-index: 1300;
  border-bottom:1px solid transparent;
  transition:border-color .2s, box-shadow .2s, background .2s;
  background:var(--background);
}
.header-inner{
  max-width:var(--container-wide);
  margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding-inline:var(--edge); height:80px;
}
.brand img{ height:60px; width:auto; display:block; transform:translateY(.5px); }

@media (max-width:768px){
  .brand img{ height:44px; }
}

.header-actions{ display:flex; align-items:center; gap:18px; }
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  border:1px solid #e6e8eb; border-radius:9999px; background:var(--background); cursor:pointer;
  transition:background .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.icon-btn:hover{ background:#fafafa; border-color:var(--light-gray); box-shadow:var(--elev-sm); transform:translateY(-1px); }
.icon-btn--ghost{ border:none; background:transparent; box-shadow:none; }
.icon-btn--ghost:hover{ background:rgba(0,0,0,.04); }

.login-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; padding:0 18px;
  border:1px solid var(--light-gray); border-radius:9999px; background:var(--background); color:var(--brand);
  text-decoration:none; font-variation-settings:"wght" 560;
  transition:background .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.login-btn:hover{ background:var(--lighter-gray); border-color:var(--light-gray); box-shadow:var(--elev-sm); }

/* Header scrolled state */
.site-header.is-scrolled{ box-shadow:0 1px 8px rgba(0,0,0,.06); border-color: var(--lighter-gray); }

/* ---------- Search flyout (fixed – verschiebt nichts) ---------- */
.search-panel{
  position: fixed;
  left: 0; right: 0;
  top: var(--header-h, 80px);
  z-index: 1200;
  background:var(--background);
  border-bottom:1px solid #ececec;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}
.search-panel[hidden]{ display:none !important; }
.search-form{
  max-width:var(--container-wide);
  margin:0 auto;
  padding:14px var(--edge);
  display:flex; gap:12px;
}
.search-form input{
  flex:1; min-width:0; height:44px;
  padding:0 14px; border:1px solid var(--light-gray); border-radius:12px;
  font:inherit; background:var(--background); color:inherit;
}
.search-form .btn-primary{
  height:44px; padding:0 16px; border-radius:12px;
  border:1px solid var(--light-gray); background:var(--brand); color:var(--background);
}

/* Panels Animation */
@keyframes dm-pop-in{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes dm-pop-out{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-6px) scale(.98)}}
.fade-in{ animation:dm-pop-in .18s ease-out both; }
.fade-out{ animation:dm-pop-out .14s ease-in both; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition:none !important; }
}

/* ---------- Mobile Menu (panel unter Header) ---------- */
.mobile-nav{
  position:fixed;
  inset: 0;
  top:var(--header-h, 80px); left:0; right:0; bottom:0;
  z-index:2000;
  display:block;
  background:var(--background);
  overflow:auto;
  border:none;
}
.mobile-nav[hidden]{ display:none !important; }
.mobile-nav .container{
  display:flex; flex-direction:column;
  max-width:var(--container-wide);
  margin:0 auto;
  padding: clamp(12px, 3vw, 24px) var(--edge) clamp(24px, 6vw, 64px);
}
.mobile-back{
  display:inline-flex; align-items:center; gap:6px;
  padding-left:5px; margin-bottom:20px;
  background:none; border:0; cursor:pointer; color:rgba(0,0,0,.44);
  font-size:clamp(18px,2.6vw,22px); font-variation-settings:"wght" 500; line-height:1.3;
}
.mobile-list{ list-style:none; margin:0; padding:0; display:grid; gap:24px; }
.mobile-list a{
  display:block; text-decoration:none; color:var(--brand);
  font-size:clamp(18px,2.6vw,22px); font-variation-settings:"wght" 500; line-height:1.3;
  padding:.5rem .75rem;
}
.mobile-list a.is-active, .mobile-list a:hover{
  display:inline-block; width:fit-content; padding:.5rem .75rem; background:#F5F5F5; border-radius:10px; }

/* Backdrop (unterhalb Header) */
#nav-backdrop{
  position:fixed; left:0; right:0; bottom:0; top:var(--header-h, 80px);
  background:rgba(0,0,0,.18);
  z-index:999;
  opacity:0; pointer-events:none;
  transition:opacity .18s ease;
}
#nav-backdrop.is-on{ opacity:1; pointer-events:auto; }

/* Body ohne Scroll wenn Menü offen */
body.nav-open{ overflow:hidden; }

/* Hamburger ↔ Close Icon-Wechsel */
#menu-toggle .icon-close{ display:none; }
body.nav-open #menu-toggle .icon-hamburger{ display:none; }
body.nav-open #menu-toggle .icon-close{ display:block; }

/* Footer: gleicher Rand wie Header */
.site-footer{
  margin-top: 80px;
  background:var(--background);
}
.site-footer .inner{
  max-width: var(--container-wide);
  margin: 0 auto;
  padding-inline: var(--edge);
  padding-block: clamp(24px, 4vw, 40px);
}
.footer-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap: var(--gap-desktop);
}
.footer-nav{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}
.footer-nav h4{margin:0 0 8px;font-size:.95rem;color:var(--brand40);font-variation-settings:"wght" 560}
.footer-nav ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.footer-nav a{display:inline-block;padding:2px 0;text-decoration:none}
.footer-nav a:hover{text-decoration:none}

.footer-meta{
  margin-top: 32px;
  max-width: var(--container-wide);
  margin-left: auto;
  margin-right: auto;
  padding-inline: var(--edge);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.footer-social{display:flex;align-items:center;gap:18px}
.footer-social a{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px}
.footer-social svg{width:20px;height:20px}
.footer-meta .copyright{color:var(--brand);font-size:.95rem}
.lang-chip{
  display:inline-flex;align-items:center;height:36px;padding:0 14px;border:0;
  background:var(--lighter-gray);border-radius:40px;color:var(--brand);font-size:.95rem;
}

/* Responsive Footer */
@media (max-width:1024px){
  .footer-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:768px){
  .footer-meta{ flex-direction:column; align-items:flex-start; gap:16px; }
}

/* =========================================================
   CONTACT – clean layout
   ========================================================= */
address{ font-style:normal; }
.kontakt { padding-block: clamp(40px, 6vw, 96px); }

.kontakt-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}
@media (min-width: 980px){
  .kontackt-grid, .kontakt-grid {
    grid-template-columns: minmax(0,1fr) minmax(0,1.15fr);
    column-gap: clamp(24px, 3vw, 48px);
  }
}

/* Linke Spalte */
.kontakt-left{
  max-width: 46ch;
  display: grid;
  gap: 14px;
}
.kontakt-eyebrow{
  margin: 0;
  font-size: clamp(14px, 1.2vw, 15px);
  line-height: 1.2;
  color: var(--brand40);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-variation-settings: "wght" 600;
}
.kontakt-lines{
  margin: 0 0 8px;
  font-size: clamp(18px, 1.6vw, 20px); /* min 18 */
  line-height: 1.6;
}
.kontakt-link{
  text-decoration: underline;
  text-underline-offset: 3px;
}
.kontakt-actions{ margin-top: 4px; }

/* Rechte Spalte – Map schlicht */
.kontakt-right{ width: 100%; }
.kontakt-map{
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--lighter-gray);
}
.kontakt-map iframe{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* Mobil */
@media (max-width: 768px){
  .kontakt-grid{ grid-template-columns: 1fr; }
  .kontakt-map{ aspect-ratio: 3 / 2; }
}

/* =========================================================
   FORM – OpenAI-like clean
   ========================================================= */
form.form{
  --border:var(--light-gray);
  --border-2:var(--light-gray);
  --focus:var(--brand);
  --ring:rgba(0,0,0,.08);
  --muted:rgba(0,0,0,.55);
  --radius:12px;
  --py:12px; --px:16px;

  display:grid;
  gap:16px;
  max-width:640px;
  text-align:left;
}
form.form .grid{ row-gap:16px; }
form.form input[type="text"],
form.form input[type="email"],
form.form input[type="tel"],
form.form input[type="url"],
form.form input[type="search"],
form.form input[type="password"],
form.form textarea,
form.form select{
  width:100%;
  padding:var(--py) var(--px);
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--bg); color: var(--brand);
  font:inherit; line-height:1.35;
  transition:border-color .15s, box-shadow .15s, background .15s;
  -webkit-appearance:none; appearance:none;
  font-size: clamp(16px, 1.4vw, 18px); /* Inputs gut lesbar */
}
form.form textarea{ min-height:160px; resize:vertical; }
form.form input:hover,
form.form textarea:hover,
form.form select:hover{ border-color:var(--border-2); }
form.form :is(input,textarea,select):focus-visible{
  outline:0; border-color:var(--focus); box-shadow:0 0 0 3px var(--ring);
}
form.form ::placeholder{ color:var(--muted); opacity:.9; }

form.form input[type="checkbox"]{ width:20px; height:20px; margin:2px 10px 0 0; accent-color:var(--brand); border-radius:6px; }
form.form label[for="consent"]{ font-variation-settings:"wght" 520; }

form.form .btn-primary{
  min-height:44px; padding:0 18px; border-radius:12px;
  border:1px solid var(--brand); background:var(--brand); color:var(--background);
  font-variation-settings:"wght" 600;
  transition: transform .06s, box-shadow .15s, background .15s, border-color .15s;
}
form.form .btn-primary:hover{ background:var(--brand); border-color:var(--brand); box-shadow:0 1px 2px rgba(0,0,0,.08); transform:translateY(-1px); }
form.form .btn-primary:active{ transform:translateY(0); box-shadow:none; }
form.form .btn-primary[disabled]{ opacity:.6; cursor:not-allowed; }

#form-status{ color:var(--brand40); font-size:.95rem; margin-left:10px; }

/* =========================================================
   CURSOR (Yuya-like)
   ========================================================= */
@media (pointer:fine){
  html,body,a,button,[role="button"],.clickable{ cursor:none; }
  #cursor-dot{
    position:fixed; z-index:2147483647; top:0; left:0;
    width:15px; height:15px; border-radius:999px;
    background:var(--background); pointer-events:none; transform:translate(-50%,-50%);
    opacity:0; mix-blend-mode:difference;
    transition:opacity .18s, width .18s, height .18s, background .18s;
    will-change:transform;
  }
  #cursor-dot.is-on{ opacity:1; }
  #cursor-dot.is-hide{ opacity:0 !important; }
  #cursor-dot.is-link{ width:22px; height:22px; }
  #cursor-dot.is-media{ width:36px; height:36px; }
}

/* =========================================================
   RESPONSIVE Layout (kein Downscale der Typo!)
   ========================================================= */
@media (max-width:1024px){
  .container{ padding-inline:clamp(20px,4vw,40px); }
  .grid{ grid-template-columns:repeat(8,minmax(0,1fr)); column-gap:var(--gap-tablet); }
  .span-10,.span-8,.span-6{ grid-column:1 / -1; }
  .footer-nav{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:768px){
  .container{ padding-inline:clamp(16px,5vw,24px); }
  .grid{ grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:var(--gap-mobile); }
  .footer-meta{ flex-direction:column; align-items:flex-start; gap:16px; }
}

/* FIX */
:root{
  --edge: clamp(24px, 6vw, 64px);
  --header-h: 88px; /* Fallback – wird von JS überschrieben */
  --light-gray:#E5E7EB;
}

/* =========================================================
   HEADER (clean, konsolidiert)
   ========================================================= */
#site-header{
  position: sticky;
  top: 0;
  z-index: 1100;
  background: var(--background);
  border-bottom: 1px solid transparent;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
  padding-top: 0;
}
.header-inner{
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--edge);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.brand img{
  display:block;
  height: 56px;
  width: auto;
  transform: translateY(.5px);
}
.header-actions{ display:flex; align-items:center; gap: 16px; }
.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px; height:44px;
  border:1px solid var(--light-gray);
  border-radius:999px;
  background:var(--background);
  cursor:pointer;
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease, transform .12s ease;
  -webkit-tap-highlight-color: transparent;
   stroke: var(--brand)!important;
  color: var(--brand)!important; 
  fill: none;             
}
.icon-btn--ghost{ border:none; background:transparent; }
.icon-btn:hover{ background:var(--lighter-gray); border-color:var(--light-gray); box-shadow:0 1px 2px rgba(0,0,0,.06); transform:translateY(-1px); }
.icon-btn:active{ transform:translateY(0); box-shadow:none; }
.icon-btn svg{ width:24px; height:24px; stroke: var(--brand); color: var(--brand); fill: none;}

#menu-toggle .icon-close{ display:none; }
body.nav-open #menu-toggle .icon-hamburger{ display:none; }
body.nav-open #menu-toggle .icon-close{ display:block; }


.site-header.is-scrolled{
  border-bottom-color:var(--lighter-gray);
  box-shadow: 0 6px 22px rgba(0,0,0,.04);
}

/* Mobile/Nav Panel & Backdrop */
.mobile-nav{
  position: fixed;
  top: var(--header-h, 88px);
  left: 0; right: 0; bottom: 0;
  z-index: 1050;
  background:var(--background);
  overflow:auto;
  border: none;
}
.mobile-nav[hidden]{ display:none !important; }
#nav-backdrop{
  position: fixed;
  top: var(--header-h, 88px);
  left:0; right:0; bottom:0;
  background: rgba(0,0,0,.18);
  z-index: 1040;
  opacity:0; pointer-events:none;
  transition: opacity .18s ease;
}
#nav-backdrop.is-on{ opacity:1; pointer-events:auto; }

.mobile-nav .container{
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(12px,3vw,24px) var(--edge) clamp(24px,6vw,64px);
}
.mobile-back{
  display:inline-flex; align-items:center; gap:6px;
  background:none; border:0; color:rgba(0,0,0,.44); cursor:pointer;
  padding-left:4px; margin-bottom:16px;
  font-size: clamp(18px,2.6vw,22px);
}
.mobile-list{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.mobile-list a{
  display:block; text-decoration:none; color:var(--brand);
  padding:.5rem .75rem; border-radius:10px;
  font-size: clamp(18px,2.6vw,22px);
}
.mobile-list a:hover, .mobile-list a.is-active{ background:#F5F5F5; }

body.nav-open{ overflow:hidden; }
.nav-open .site-header{ box-shadow:none !important; border-color:transparent !important; }

@media (max-width: 1024px){
  .brand img{ height:50px; }
}
@media (max-width: 640px){
  .brand img{ height:44px; }
  .header-inner{ gap:14px; }
  .icon-btn{ width:42px; height:42px; }
}

/* iOS Safari: natives blaues X entfernen */
input[type="search"]::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; display:none; }