/* ═══════════════════════════════════════════════════════════════
   debacom · site.css
   Zeitloses Corporate-Layout · Mobile-First · selbstgehostete Fonts
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. SCHRIFTEN (lokal, keine externen Requests → DSGVO-sauber) ── */
@font-face{font-family:'Franklin';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/libre-franklin-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Franklin';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/libre-franklin-latin-ext-400-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Franklin';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/libre-franklin-latin-500-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Franklin';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/libre-franklin-latin-ext-500-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Franklin';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/libre-franklin-latin-600-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Franklin';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/libre-franklin-latin-ext-600-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Franklin';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/libre-franklin-latin-700-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Franklin';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/libre-franklin-latin-ext-700-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}


/* ── 2. TOKENS ── */
:root{
  /* Flächen */
  --paper:#ffffff;
  --paper-2:#f6f8fc;
  --paper-3:#eef2f9;
  --ink-900:#0b1524;
  --ink-800:#132038;

  /* Linien */
  --line:#e4e9f2;
  --line-2:#cfd8e8;
  --line-dark:rgba(255,255,255,.13);

  /* Text */
  --tx-1:#0b1524;
  --tx-2:#4a5a76;
  --tx-3:#7b8aa5;
  --tx-inv-1:#ffffff;
  --tx-inv-2:#a9b7ce;

  /* Marke (unverändert aus dem Logo) */
  --cyan:#22d3ee;
  --indigo:#6366f1;
  --violet:#8b5cf6;
  --brand:#4f46e5;          /* interaktiv – kontraststark auf Weiß */
  --brand-dark:#4338ca;
  --brand-soft:#eef0fe;
  --seam:linear-gradient(90deg,#22d3ee 0%,#6366f1 55%,#8b5cf6 100%);

  /* Status */
  --ok:#0f766e;
  --err:#b91c1c;

  /* Typo */
  --f-sans:'Franklin',Franklin Gothic,ITC Franklin Gothic,system-ui,-apple-system,Segoe UI,sans-serif;

  /* Maße */
  --header-h:64px;
  --max-w:1200px;
  --r-btn:6px;
  --r-card:12px;

  --ease:280ms cubic-bezier(.2,.6,.2,1);
  --ease-fast:150ms ease;
}

@media (min-width:960px){ :root{ --header-h:76px; } }


/* ── 3. RESET & BASIS ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--f-sans);
  font-size:1.0625rem;
  line-height:1.65;
  color:var(--tx-2);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video,canvas{display:block;max-width:100%}
input,button,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
a{color:var(--brand);text-decoration:none;transition:color var(--ease-fast)}
a:hover{color:var(--brand-dark)}
ul,ol{list-style:none}
strong{font-weight:600;color:var(--tx-1)}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:3px}
[id]{scroll-margin-top:calc(var(--header-h) + 16px)}

h1,h2,h3,h4{font-weight:700;color:var(--tx-1);line-height:1.12;letter-spacing:-.018em}
h1{font-size:clamp(2.05rem,1.35rem + 3vw,3.65rem);letter-spacing:-.024em;line-height:1.06;text-wrap:balance}
h2{font-size:clamp(1.6rem,1.28rem + 1.6vw,2.4rem);letter-spacing:-.02em;text-wrap:balance}
h3{font-size:1.175rem;letter-spacing:-.012em}

.container{width:100%;max-width:var(--max-w);margin-inline:auto;padding-inline:clamp(1.25rem,5vw,2.5rem)}
.section{padding-block:clamp(2.75rem,5.5vw,5rem)}
.section--tint{background:var(--paper-2);border-block:1px solid var(--line)}
.section--ink{background:var(--ink-900);color:var(--tx-inv-2)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{
  position:fixed;top:.6rem;left:.6rem;z-index:1200;transform:translateY(-160%);
  padding:.7rem 1.1rem;background:var(--ink-900);color:#fff;border-radius:var(--r-btn);
  font-size:.9rem;transition:transform var(--ease);
}
.skip:focus-visible{transform:none;color:#fff}


/* ── 4. WIEDERKEHRENDE BAUSTEINE ── */
.eyebrow{
  font-family:var(--f-sans);font-size:.775rem;font-weight:600;
  letter-spacing:.075em;text-transform:uppercase;color:var(--tx-3);
  display:flex;align-items:center;gap:.7rem;margin-bottom:1.1rem;
}
.eyebrow::before{content:'';width:26px;height:2px;background:var(--seam);flex:none;border-radius:2px}
.section--ink .eyebrow{color:#8aa0c4}

.s-head{max-width:44rem;margin-bottom:clamp(1.75rem,3.5vw,2.75rem)}
.s-head--center{margin-inline:auto;text-align:center}
.s-head--center .eyebrow{justify-content:center}
.s-lead{margin-top:1rem;font-size:clamp(1.02rem,.98rem + .3vw,1.175rem);color:var(--tx-2);max-width:38rem}
.s-head--center .s-lead{margin-inline:auto}
.section--ink .s-lead{color:var(--tx-inv-2)}
.section--ink h2{color:#fff}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.85rem 1.5rem;border-radius:var(--r-btn);
  font-size:.95rem;font-weight:500;letter-spacing:-.005em;
  transition:background var(--ease-fast),color var(--ease-fast),border-color var(--ease-fast),transform var(--ease-fast);
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--brand);color:#fff}
.btn--primary:hover{background:var(--brand-dark);color:#fff}
.btn--ghost{border:1px solid var(--line-2);color:var(--tx-1);background:var(--paper)}
.btn--ghost:hover{border-color:var(--tx-1);color:var(--tx-1)}
.btn--light{background:#fff;color:var(--ink-900)}
.btn--light:hover{background:#e9edf6;color:var(--ink-900)}
.btn--block{width:100%}
.btn__arrow{transition:transform var(--ease-fast)}
.btn:hover .btn__arrow{transform:translateX(3px)}

/* Textlink mit Pfeil */
.tlink{display:inline-flex;align-items:center;gap:.45rem;font-weight:500;font-size:.95rem;color:var(--brand)}
.tlink svg{width:15px;height:15px;transition:transform var(--ease-fast)}
.tlink:hover svg{transform:translateX(3px)}


/* ── 5. MARKENKANTE & HEADER ── */
.brand-seam{position:fixed;top:0;left:0;right:0;height:3px;background:var(--seam);z-index:1002}

.header{
  position:fixed;top:3px;left:0;right:0;z-index:1000;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color var(--ease),background var(--ease);
}
.header.is-scrolled{border-bottom-color:var(--line);background:rgba(255,255,255,.94)}
.header__inner{
  height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  width:100%;max-width:var(--max-w);margin-inline:auto;padding-inline:clamp(1.25rem,5vw,2.5rem);
}
.logo{display:flex;align-items:center;gap:.6rem}
.logo__mark{width:34px;height:34px;flex:none}
.logo__word{font-size:1.3rem;font-weight:700;letter-spacing:-.025em;color:var(--tx-1);line-height:1}
.logo__word b{font-weight:700;color:var(--brand)}

.nav{display:none}
@media (min-width:960px){
  .nav{display:flex;align-items:center;gap:.35rem}
  .nav__link{
    position:relative;padding:.5rem .7rem;border-radius:5px;
    font-size:.925rem;font-weight:500;color:var(--tx-2);
  }
  .nav__link::after{
    content:'';position:absolute;left:.7rem;right:.7rem;bottom:.15rem;height:2px;
    background:var(--seam);border-radius:2px;transform:scaleX(0);transform-origin:left;
    transition:transform var(--ease);
  }
  .nav__link:hover{color:var(--tx-1)}
  .nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1)}
  .nav__link.is-active{color:var(--tx-1);font-weight:500}
}
.header__cta{display:none}
@media (min-width:1100px){.header__cta{display:inline-flex;padding:.62rem 1.15rem;font-size:.9rem}}

/* Burger */
.burger{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:42px;height:42px;margin-right:-9px;padding-inline:9px;border-radius:6px;
}
@media (min-width:960px){.burger{display:none}}
.burger span{display:block;height:2px;width:22px;background:var(--tx-1);border-radius:2px;transition:transform var(--ease),opacity var(--ease-fast)}
.burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobiles Menü – Einträge laufen versetzt ein */
.mobnav{
  position:fixed;inset:0;z-index:999;background:var(--paper);
  padding:calc(var(--header-h) + 1.5rem) clamp(1.25rem,5vw,2.5rem) 1.75rem;
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;
  transition:opacity 240ms ease,visibility 240ms ease;
  overflow-y:auto;overscroll-behavior:contain;
}
.mobnav.is-open{opacity:1;visibility:visible}
.mobnav__link{
  display:flex;align-items:center;gap:.9rem;
  padding:1.05rem 0;border-bottom:1px solid var(--line);
  font-size:1.4rem;font-weight:500;color:var(--tx-1);letter-spacing:-.025em;
  opacity:0;transform:translateY(16px);
  transition:opacity 460ms cubic-bezier(.16,.84,.28,1),transform 460ms cubic-bezier(.16,.84,.28,1),color var(--ease-fast);
}
.mobnav.is-open .mobnav__link{opacity:1;transform:none}
.mobnav.is-open .mobnav__link:nth-child(1){transition-delay:60ms}
.mobnav.is-open .mobnav__link:nth-child(2){transition-delay:110ms}
.mobnav.is-open .mobnav__link:nth-child(3){transition-delay:160ms}
.mobnav.is-open .mobnav__link:nth-child(4){transition-delay:210ms}
.mobnav.is-open .mobnav__link:nth-child(5){transition-delay:260ms}
.mobnav.is-open .mobnav__link:nth-child(6){transition-delay:310ms}
.mobnav__link span{
  font-size:.72rem;font-weight:600;color:var(--tx-3);letter-spacing:.06em;
  min-width:1.5rem;align-self:flex-start;padding-top:.55rem;
}
.mobnav__link svg{width:17px;height:17px;margin-left:auto;color:var(--line-2);transition:color var(--ease-fast),transform var(--ease-fast)}
.mobnav__link:active,.mobnav__link:focus-visible{color:var(--brand)}
.mobnav__link:active svg{color:var(--brand);transform:translateX(3px)}

.mobnav__foot{
  margin-top:auto;padding-top:2rem;
  opacity:0;transform:translateY(16px);
  transition:opacity 460ms cubic-bezier(.16,.84,.28,1),transform 460ms cubic-bezier(.16,.84,.28,1);
}
.mobnav.is-open .mobnav__foot{opacity:1;transform:none;transition-delay:370ms}
.mobnav__foot .btn{margin-bottom:1rem;padding-block:1rem}
.mobnav__hint{font-size:.82rem;color:var(--tx-3);text-align:center;margin-bottom:1.15rem}
.mobnav__mail{display:flex;align-items:center;justify-content:center;gap:.6rem;font-size:.95rem;font-weight:500;color:var(--tx-2)}
.mobnav__mail svg{width:17px;height:17px;flex:none;color:var(--brand)}


/* ── 6. HERO ── */
.hero{position:relative;padding-top:calc(var(--header-h) + clamp(2.5rem,6vw,4.5rem));padding-bottom:clamp(1.75rem,3.5vw,3rem);overflow:hidden}
.hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(70% 55% at 78% 6%,rgba(99,102,241,.07),transparent 70%),
    radial-gradient(45% 40% at 8% 0%,rgba(34,211,238,.06),transparent 70%);
}
.hero__inner{position:relative}
.hero__grid{display:flex;flex-direction:column}
/* Schmale Displays: eine Spalte in Lesereihenfolge (Titel → Text → Buttons) */
@media (max-width:1079px){
  .hero__main,.hero__side{display:contents}
  .hero__grid .eyebrow{order:1}
  .hero__title{order:2}
  .hero__lead{order:3}
  .hero__actions{order:4}
  .hero__note{order:5}
}
@media (min-width:1080px){
  .hero__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:4.5rem;align-items:start}
  .hero__side{padding-top:2.55rem}
  .hero__lead{margin-top:0}
  .hero__title{max-width:none}
  .hero__actions{margin-top:2.75rem}
}
.hero__title{max-width:21ch}
.hero__lead{margin-top:1.5rem;max-width:38rem;font-size:clamp(1.05rem,1rem + .35vw,1.25rem);color:var(--tx-2)}
.hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.25rem}
.hero__actions .btn{flex:1 1 auto;min-width:12rem}
@media (min-width:600px){.hero__actions .btn{flex:0 0 auto;min-width:0}}
.hero__note{margin-top:1.15rem;font-size:.875rem;color:var(--tx-3)}

/* Vertrauensleiste */
.trust{margin-top:clamp(2.25rem,5vw,3.5rem)}
.trust__grid{display:grid;grid-template-columns:1fr;gap:0}
@media (min-width:640px){.trust__grid{grid-template-columns:1fr 1fr;column-gap:2rem}}
@media (min-width:1000px){.trust__grid{grid-template-columns:repeat(4,1fr);column-gap:2.25rem}}
.trust__item{position:relative;padding:1.5rem 0 1.35rem;border-top:1px solid var(--line)}
.trust__item::before{content:'';position:absolute;top:-1px;left:0;width:38px;height:2px;background:var(--seam)}
@media (min-width:640px){.trust__item{padding:1.65rem 0 0}}
@media (min-width:1000px){.trust__item{padding:1.75rem 0 0}}
.trust__key{font-size:.72rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--brand);margin-bottom:.55rem}
.trust__val{font-size:1.02rem;font-weight:500;color:var(--tx-1);line-height:1.35;margin-bottom:.3rem}
.trust__desc{font-size:.875rem;color:var(--tx-3);line-height:1.5}


/* ── 7. LEISTUNGEN (Verzeichnis mit Haarlinien) ── */
.svc{border-top:1px solid var(--line)}
.svc__row{
  position:relative;display:grid;grid-template-columns:1fr;gap:1rem;
  padding:2rem 0;border-bottom:1px solid var(--line);
}
.svc__row::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--seam);
  transform:scaleX(0);transform-origin:left;transition:transform 420ms cubic-bezier(.2,.6,.2,1);
}
.svc__row:hover::after,.svc__row:focus-within::after{transform:scaleX(1)}
@media (min-width:900px){
  .svc__row{grid-template-columns:minmax(0,7fr) minmax(0,9fr);gap:3.5rem;padding:2.75rem 0}
}
.svc__icon{
  width:44px;height:44px;border:1px solid var(--line-2);border-radius:9px;
  display:grid;place-items:center;color:var(--brand);margin-bottom:1.1rem;background:var(--paper);
  transition:border-color var(--ease),background var(--ease);
}
.svc__row:hover .svc__icon{border-color:var(--brand);background:var(--brand-soft)}
.svc__icon svg{width:21px;height:21px}
.svc__title{margin-bottom:.6rem}
.svc__desc{font-size:1rem;color:var(--tx-2)}
.svc__list{display:grid;grid-template-columns:1fr;gap:.1rem;align-content:start}
@media (min-width:520px){.svc__list{grid-template-columns:1fr 1fr;column-gap:2rem}}
.svc__item{
  display:flex;gap:.7rem;align-items:flex-start;
  padding:.7rem 0;border-bottom:1px solid var(--line);
  font-size:.94rem;color:var(--tx-2);
}
.svc__item:last-child,.svc__list>.svc__item:nth-last-child(-n+2){border-bottom:0}
@media (max-width:519px){.svc__list>.svc__item:nth-last-child(2){border-bottom:1px solid var(--line)}}
.svc__item svg{width:15px;height:15px;flex:none;margin-top:.32rem;color:var(--cyan)}


/* ── 8. ABLAUF ── */
.steps{display:grid;grid-template-columns:1fr;gap:0;counter-reset:step}
@media (min-width:860px){.steps{grid-template-columns:repeat(4,1fr);gap:0}}
.step{position:relative;padding:1.5rem 0 1.35rem;border-top:1px solid var(--line)}
@media (min-width:860px){.step{padding:2rem 1.5rem 0 0}}
.step::before{
  content:'';position:absolute;top:-1px;left:0;width:44px;height:2px;background:var(--seam);
}
.step__num{font-size:.72rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--tx-3);margin-bottom:.85rem}
.step__title{font-size:1.075rem;margin-bottom:.5rem}
.step__text{font-size:.94rem;color:var(--tx-2)}


/* ── 9. GRUNDSÄTZE (dunkles Band) ── */
.principles{display:grid;grid-template-columns:1fr;gap:0}
@media (min-width:700px){.principles{grid-template-columns:1fr 1fr}}
@media (min-width:1040px){.principles{grid-template-columns:repeat(3,1fr)}}
.principle{padding:1.6rem 0;border-top:1px solid var(--line-dark)}
@media (min-width:700px){
  .principle{padding:1.9rem 2rem 1.9rem 0}
  .principle:nth-child(2n){padding-right:0;padding-left:2rem;border-left:1px solid var(--line-dark)}
}
@media (min-width:1040px){
  .principle{padding:2rem 2.25rem 2rem 0;border-left:0}
  .principle:nth-child(2n){padding-left:0;padding-right:2.25rem;border-left:0}
  .principle:nth-child(3n+2),.principle:nth-child(3n+3){padding-left:2.25rem;border-left:1px solid var(--line-dark)}
}
.principle__title{color:#fff;font-size:1.06rem;font-weight:500;margin-bottom:.5rem;letter-spacing:-.015em}
.principle__text{font-size:.94rem;color:var(--tx-inv-2)}
.principle__mark{width:22px;height:2px;background:var(--seam);border-radius:2px;margin-bottom:1.1rem}


/* ── 10. PAKETE ── */
.plans{display:grid;grid-template-columns:1fr;gap:1.25rem}
@media (min-width:800px){.plans{grid-template-columns:repeat(3,1fr);gap:1.5rem}}
.plan{
  display:flex;flex-direction:column;
  padding:1.75rem;border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper);
  transition:border-color var(--ease),box-shadow var(--ease),transform var(--ease);
}
.plan:hover{border-color:var(--line-2);box-shadow:0 12px 34px rgba(11,21,36,.07);transform:translateY(-2px)}
.plan--focus{border-color:var(--brand);position:relative}
.plan--focus::before{
  content:attr(data-badge);position:absolute;top:-.72rem;left:1.75rem;
  font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  background:var(--brand);color:#fff;padding:.28rem .6rem;border-radius:4px;
}
.plan__name{font-size:.75rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--tx-3);margin-bottom:1rem}
.plan__price{font-size:2rem;font-weight:600;color:var(--tx-1);letter-spacing:-.03em;line-height:1.1}
.plan__price small{display:block;font-size:.8rem;font-weight:400;color:var(--tx-3);letter-spacing:0;margin-top:.4rem}
.plan__desc{margin:1.1rem 0 1.4rem;font-size:.94rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.plan__list{display:grid;gap:.6rem;margin-bottom:1.75rem;font-size:.94rem}
.plan__list li{display:flex;gap:.65rem;align-items:flex-start}
.plan__list svg{width:15px;height:15px;flex:none;margin-top:.3rem;color:var(--brand)}
.plan .btn{margin-top:auto}
.plans__note{margin-top:1.75rem;font-size:.85rem;color:var(--tx-3);max-width:46rem}


/* ── 11. ÜBER UNS ── */
.about{display:grid;grid-template-columns:1fr;gap:2.5rem}
@media (min-width:960px){.about{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:4.5rem;align-items:start}}
.about__body p+p{margin-top:1.1rem}
.about__quote{
  margin-top:1.75rem;padding-left:1.25rem;border-left:2px solid transparent;
  border-image:var(--seam) 1;
  font-size:1.05rem;color:var(--tx-1);font-weight:500;letter-spacing:-.015em;line-height:1.5;
}
.people{display:grid;grid-template-columns:1fr;gap:1.25rem}
@media (min-width:560px){.people{grid-template-columns:1fr 1fr}}
.person{padding:1.6rem;border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper)}
.person__photo{
  width:60px;height:60px;border-radius:50%;margin-bottom:1.1rem;object-fit:cover;
  display:grid;place-items:center;background:var(--paper-3);color:var(--brand);
  font-size:1.2rem;font-weight:600;letter-spacing:-.02em;border:1px solid var(--line);
}
.person__name{font-size:1.075rem;font-weight:600;color:var(--tx-1);letter-spacing:-.015em}
.person__role{font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-3);margin:.35rem 0 .9rem}
.person__bio{font-size:.92rem}


/* ── 12. FAQ ── */
.faq{max-width:52rem;border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;width:100%;
  padding:1.25rem 0;text-align:left;
  font-size:1.02rem;font-weight:500;color:var(--tx-1);letter-spacing:-.015em;line-height:1.4;
  transition:color var(--ease-fast);
}
.faq__q:hover{color:var(--brand)}
.faq__sign{position:relative;flex:none;width:16px;height:16px;margin-top:.3rem}
.faq__sign::before,.faq__sign::after{
  content:'';position:absolute;background:var(--brand);border-radius:1px;
  transition:transform var(--ease),opacity var(--ease);
}
.faq__sign::before{top:7px;left:0;width:16px;height:2px}
.faq__sign::after{left:7px;top:0;width:2px;height:16px}
.faq__item.is-open .faq__sign::after{transform:rotate(90deg);opacity:0}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--ease)}
.faq__item.is-open .faq__a{grid-template-rows:1fr}
.faq__a>div{overflow:hidden}
.faq__a p{padding-bottom:1.35rem;max-width:46rem;font-size:.97rem}


/* ── 13. KONTAKT ── */
.contact{display:grid;grid-template-columns:1fr;gap:2rem}
@media (min-width:960px){.contact{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:3.5rem;align-items:start}}
.form{display:grid;gap:1.15rem}
.form__row{display:grid;grid-template-columns:1fr;gap:1.15rem}
@media (min-width:560px){.form__row{grid-template-columns:1fr 1fr}}
.field label{
  display:block;font-size:.73rem;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--tx-3);margin-bottom:.5rem;
}
.field input,.field textarea{
  width:100%;padding:.8rem .9rem;background:var(--paper);
  border:1px solid var(--line-2);border-radius:var(--r-btn);
  font-size:1rem;color:var(--tx-1);
  transition:border-color var(--ease-fast),box-shadow var(--ease-fast);
}
.field input::placeholder,.field textarea::placeholder{color:var(--tx-3)}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(79,70,229,.13);
}
.field textarea{resize:vertical;min-height:9rem}

/* Auswahlliste: gleiche Optik wie die übrigen Felder, eigener Pfeil */
.select{position:relative}
.select select{
  width:100%;padding:.8rem 2.6rem .8rem .9rem;background:var(--paper);
  border:1px solid var(--line-2);border-radius:var(--r-btn);
  font-size:1rem;color:var(--tx-1);cursor:pointer;
  appearance:none;-webkit-appearance:none;
  transition:border-color var(--ease-fast),box-shadow var(--ease-fast);
}
.select select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(79,70,229,.13)}
.select svg{
  position:absolute;right:.9rem;top:50%;margin-top:-8px;width:16px;height:16px;
  color:var(--tx-3);pointer-events:none;
}
/* Kurz hervorheben, wenn ein Paket vorausgewählt wurde */
.field.is-prefilled .select select{border-color:var(--brand);box-shadow:0 0 0 3px rgba(79,70,229,.16)}
.field.is-prefilled label{color:var(--brand)}

/* Direktlink unter den Leistungsbeschreibungen */
.svc__link{margin-top:1rem}
.consent{display:flex;gap:.75rem;align-items:flex-start;font-size:.87rem;color:var(--tx-2);line-height:1.55}
.consent input{width:18px;height:18px;flex:none;margin-top:.15rem;accent-color:var(--brand)}
.form__submit{width:100%}
@media (min-width:560px){.form__submit{width:auto}}
.form__msg{display:none;padding:.8rem 1rem;border-radius:var(--r-btn);font-size:.9rem}
.form__msg.is-visible{display:block}
.form__msg.is-ok{background:#ecfdf5;color:var(--ok);border:1px solid #a7f3d0}
.form__msg.is-err{background:#fef2f2;color:var(--err);border:1px solid #fecaca}

.aside{display:grid;gap:1.25rem}
.aside__box{padding:1.5rem;border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper-2)}
.aside__title{font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-3);margin-bottom:.9rem}
.aside__mail{display:flex;align-items:center;gap:.6rem;font-size:1.02rem;font-weight:500;color:var(--tx-1);word-break:break-all}
.aside__mail:hover{color:var(--brand)}
.aside__mail svg{width:18px;height:18px;flex:none;color:var(--brand)}
.aside__text{font-size:.92rem}
.aside__list{display:grid;gap:.6rem;font-size:.92rem;margin-top:.25rem}
.aside__list li{display:flex;gap:.65rem;align-items:flex-start}
.aside__list svg{width:15px;height:15px;flex:none;margin-top:.28rem;color:var(--cyan)}


/* ── 14. FOOTER ── */
.footer{background:var(--ink-900);color:var(--tx-inv-2);padding-block:clamp(3rem,6vw,4.5rem) 0;position:relative}
.footer::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--seam)}
.footer__grid{display:grid;grid-template-columns:1fr;gap:2.5rem}
@media (min-width:720px){.footer__grid{grid-template-columns:1fr 1fr;gap:2.5rem 2rem}}
@media (min-width:1000px){.footer__grid{grid-template-columns:2.2fr 1fr 1fr 1fr;gap:3rem}}
.footer .logo__word{color:#fff}
.footer .logo__word b{color:#a5b4fc}
.footer__tagline{margin-top:1.1rem;font-size:.92rem;max-width:26rem}
.footer__col-title{font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#8b9cb8;margin-bottom:1rem}
.footer__links{display:grid;gap:.7rem}
.footer__links a{color:var(--tx-inv-2);font-size:.92rem}
.footer__links a:hover{color:#fff}
.footer__bottom{
  margin-top:clamp(2.5rem,5vw,3.5rem);padding-block:1.5rem;border-top:1px solid var(--line-dark);
  display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:space-between;align-items:center;
  font-size:.85rem;color:#7d8fad;
}
.footer__bottom nav{display:flex;gap:1.5rem}
.footer__bottom a{color:#7d8fad}
.footer__bottom a:hover{color:#fff}


/* ── 15. COOKIE-BANNER ── */
.cookie{
  position:fixed;left:0;right:0;bottom:0;z-index:1100;
  background:var(--paper);border-top:1px solid var(--line);
  box-shadow:0 -10px 40px rgba(11,21,36,.1);
  transform:translateY(110%);transition:transform 420ms cubic-bezier(.2,.6,.2,1);
}
.cookie.is-visible{transform:none}
.cookie__inner{
  max-width:var(--max-w);margin-inline:auto;padding:1.25rem clamp(1.25rem,5vw,2.5rem);
  display:grid;gap:1rem;
}
@media (min-width:860px){.cookie__inner{grid-template-columns:1fr auto;align-items:center;gap:2.5rem}}
.cookie__text{font-size:.875rem;color:var(--tx-2);max-width:52rem}
.cookie__text strong{display:block;margin-bottom:.25rem;font-size:.95rem}
.cookie__actions{display:flex;gap:.6rem;flex-wrap:wrap}
.cookie__actions .btn{flex:1 1 auto;padding:.7rem 1.15rem;font-size:.88rem}
@media (min-width:860px){.cookie__actions .btn{flex:0 0 auto}}


/* ── 16. RECHTSSEITEN ── */
.legal{padding-top:calc(var(--header-h) + 2.5rem);padding-bottom:clamp(3rem,6vw,5rem)}
.legal__head{max-width:46rem;margin-bottom:2.75rem;padding-bottom:2rem;border-bottom:1px solid var(--line)}
.legal__meta{font-size:.85rem;font-weight:500;color:var(--tx-3);margin-top:.9rem}
.legal__body{max-width:46rem}
.legal__body h2{font-size:1.35rem;margin:2.5rem 0 .9rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.legal__body h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal__body h3{font-size:1.05rem;margin:1.75rem 0 .6rem}
.legal__body p{margin-bottom:.9rem;font-size:.97rem}
.legal__body ul{margin:0 0 1.1rem;display:grid;gap:.45rem}
.legal__body li{position:relative;padding-left:1.1rem;font-size:.97rem}
.legal__body li::before{content:'';position:absolute;left:0;top:.72em;width:5px;height:1px;background:var(--tx-3)}
.legal__box{padding:1.5rem;border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper-2);margin-bottom:1.5rem}
.legal__box p{margin-bottom:.3rem}
.legal__box p:last-child{margin-bottom:0}


/* ── 17. AUFTAKT ──
   Weiße Fläche, Logo groß in der Mitte, dann fliegt es auf seine Position im
   Header. Position und Maßstab rechnet bundle.js aus – hier stehen nur die
   Ausgangszustände und ein Sicherheitsnetz, falls das Skript ausbleibt. */
.intro{display:none}
.intro-on .intro{
  display:block;position:fixed;inset:0;z-index:2000;pointer-events:none;
  animation:introFail 400ms linear 3000ms forwards;
}
@keyframes introFail{to{opacity:0;visibility:hidden}}

.intro__bg{position:absolute;inset:0;background:var(--paper)}
.intro__logo{
  position:absolute;top:0;left:0;transform-origin:0 0;
  opacity:0;will-change:transform;backface-visibility:hidden;
}
.intro__logo picture{display:block;flex:none}
.intro__logo .logo__mark{width:auto;height:auto}
.intro__logo .logo__word{line-height:1}
.intro__line{
  position:absolute;left:50%;top:50%;height:2px;border-radius:2px;
  width:clamp(150px,20vw,240px);background:var(--seam);
  transform:translateX(-50%) scaleX(0);transform-origin:left center;opacity:0;
}

/* Das echte Logo im Header bleibt verdeckt, bis das fliegende gelandet ist */
.intro-on .header .logo{opacity:0;animation:introLogoBack 0s linear 3000ms forwards}
@keyframes introLogoBack{to{opacity:1}}
.intro-done .header .logo{opacity:1;animation:none}

@media (prefers-reduced-motion:reduce){
  .intro{display:none !important}
  .intro-on .header .logo{opacity:1;animation:none}
}


/* ── 18. BEWEGUNG ── */

/* Markenkante zeichnet sich beim Laden von links nach rechts */
.brand-seam{transform:scaleX(0);transform-origin:left}
.is-ready .brand-seam{transform:none;transition:transform 1100ms cubic-bezier(.16,.84,.28,1)}
.no-js .brand-seam{transform:none}

/* Hero-Überschrift steigt zeilenweise aus der Maske auf.
   Der Fallback blendet sie auch dann ein, wenn das Skript nicht lädt. */
html:not(.no-js) .hero__title{opacity:0;animation:heroFallback 0s linear 1600ms forwards}
@keyframes heroFallback{to{opacity:1}}
html:not(.no-js) .hero__title.is-split{opacity:1;animation:none}
.hero__title .ln{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
.hero__title .ln__i{display:block;transform:translateY(115%);transition:transform 1000ms cubic-bezier(.16,.84,.28,1)}
.hero__title.is-split.is-in .ln__i{transform:none}

/* Kurze Markenstriche wachsen aus dem Nichts */
.eyebrow::before,.step::before,.principle__mark,.trust__item::before{transform:scaleX(0);transform-origin:left;transition:transform 780ms cubic-bezier(.16,.84,.28,1) 120ms}
.is-in .eyebrow::before,.eyebrow.is-in::before,.step.is-in::before,.principle.is-in .principle__mark,
.trust.is-in .trust__item::before{transform:none}
.no-js .eyebrow::before,.no-js .step::before,.no-js .principle__mark,.no-js .trust__item::before{transform:none}

/* Verlaufslinie zieht sich über die Vertrauensleiste */

/* Inhalte steigen beim Scrollen leicht auf */
.reveal{opacity:0;transform:translateY(14px);transition:opacity 620ms cubic-bezier(.2,.6,.2,1),transform 620ms cubic-bezier(.2,.6,.2,1)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:80ms}
.reveal[data-delay="2"]{transition-delay:160ms}
.reveal[data-delay="3"]{transition-delay:240ms}
.reveal[data-delay="4"]{transition-delay:320ms}
.no-js .reveal{opacity:1;transform:none}

/* Im Hero größere Abstände, damit die Überschrift den Auftakt macht */
.hero .eyebrow.reveal{transition-delay:0ms}
.hero .reveal[data-delay="2"]{transition-delay:480ms}
.hero .reveal[data-delay="3"]{transition-delay:580ms}
.hero .reveal[data-delay="4"]{transition-delay:660ms}
.hero .trust.reveal{transition-delay:700ms}
.trust__item:nth-child(1)::before{transition-delay:760ms}
.trust__item:nth-child(2)::before{transition-delay:860ms}
.trust__item:nth-child(3)::before{transition-delay:960ms}
.trust__item:nth-child(4)::before{transition-delay:1060ms}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;transition-delay:0ms !important}
  .reveal{opacity:1;transform:none}
  .mobnav__link,.mobnav__foot{opacity:1;transform:none}
  html:not(.no-js) .hero__title{opacity:1;animation:none}
  .hero__title .ln__i{transform:none}
  .brand-seam,.eyebrow::before,.step::before,.principle__mark,.trust__item::before{transform:none}
}

@media print{
  .header,.brand-seam,.cookie,.mobnav,.burger{display:none !important}
  body{color:#000}
}


/* ── 19. HANDY-ANSICHT ──
   Auf dem Desktop trägt das Haarlinien-Raster die Gliederung. Auf einem
   schmalen Display fällt dieses Raster in eine einzige Spalte zusammen und
   die Seite liest sich als durchgehende Textwand. Deshalb bekommen die
   Abschnitte hier eine eigene, kräftigere Gliederung: abgesetzte Karten,
   nummerierte Schritte mit Verbindungslinie und eine zweispaltige Faktenreihe. */
@media (max-width:720px){

  /* Abschnittsköpfe deutlicher vom Inhalt trennen */
  .s-head{margin-bottom:1.5rem;padding-bottom:1.25rem;border-bottom:1px solid var(--line)}
  .section--ink .s-head{border-bottom-color:var(--line-dark)}
  .s-lead{font-size:1rem}

  /* Vertrauensleiste: zwei Spalten statt vier Blöcke untereinander */
  .trust__grid{grid-template-columns:1fr 1fr;column-gap:1.1rem;row-gap:0}
  .trust__item{padding:1.15rem 0 1.1rem}
  .trust__item::before{width:28px}
  .trust__key{font-size:.66rem;letter-spacing:.05em;margin-bottom:.35rem}
  .trust__val{font-size:.95rem;line-height:1.3}
  .trust__desc{font-size:.8rem;line-height:1.45}

  /* Leistungen: klar abgegrenzte Karten statt Zeilen mit Haarlinien */
  .svc{border-top:0}
  .svc__row{
    display:block;padding:1.5rem 1.25rem;margin-bottom:1rem;
    border:1px solid var(--line);border-bottom:1px solid var(--line);
    border-radius:var(--r-card);background:var(--paper);
    box-shadow:0 1px 2px rgba(11,21,36,.04);
  }
  .svc__row:last-child{margin-bottom:0}
  .svc__row::after{left:1.25rem;right:1.25rem;bottom:auto;top:0;border-radius:2px}
  .svc__icon{width:40px;height:40px;margin-bottom:.9rem}
  .svc__icon svg{width:19px;height:19px}
  .svc__desc{font-size:.95rem}
  .svc__list{margin-top:1rem;padding-top:.35rem;border-top:1px solid var(--line)}
  .svc__item{padding:.55rem 0;font-size:.9rem;border-bottom:0}
  .svc__list>.svc__item:nth-last-child(2){border-bottom:0}

  /* Ablauf: nummerierte Marken auf einer durchgehenden Linie */
  .steps{position:relative;padding-left:2.6rem}
  .steps::before{
    content:'';position:absolute;left:.9rem;top:.4rem;bottom:1.6rem;
    width:1px;background:var(--line);
  }
  .step{border-top:0;padding:.35rem 0 1.5rem;counter-increment:step}
  .step:last-child{padding-bottom:0}
  .step::before{
    content:counter(step);position:absolute;left:-2.6rem;top:0;
    width:1.8rem;height:1.8rem;border-radius:50%;background:var(--paper);
    border:1px solid var(--line-2);color:var(--brand);
    font-size:.78rem;font-weight:700;line-height:1.75rem;text-align:center;
    transform:none;
  }
  .step__num{display:none}
  .step__title{font-size:1.05rem;margin-bottom:.35rem}
  .step__text{font-size:.92rem}

  /* Grundsätze: als abgesetzte Blöcke statt endloser Liste */
  .principles{gap:.6rem}
  .principle{
    padding:1.1rem 1.15rem;border-top:0;
    border:1px solid var(--line-dark);border-radius:var(--r-card);
    background:rgba(255,255,255,.03);
  }
  .principle__mark{margin-bottom:.75rem}
  .principle__title{font-size:1rem}
  .principle__text{font-size:.9rem}

  /* Über uns: Bild und Name nebeneinander, Text darunter – spart Höhe,
     ohne die Zeilen auf acht Wörter zusammenzuquetschen */
  .about{gap:1.75rem}
  .people{grid-template-columns:1fr;gap:.85rem}
  .person{
    display:grid;grid-template-columns:46px 1fr;
    column-gap:.9rem;row-gap:.1rem;align-items:center;
    padding:1.15rem 1.25rem;
  }
  .person__photo{grid-row:span 2;width:46px;height:46px;font-size:1.05rem;margin-bottom:0}
  .person__name{font-size:1rem;align-self:end}
  .person__role{font-size:.68rem;letter-spacing:.05em;margin:.2rem 0 0;align-self:start}
  .person__bio{grid-column:1 / -1;margin-top:.85rem;font-size:.89rem;line-height:1.55}
  .about__body p{font-size:.97rem}
  .about__quote{font-size:1rem}

  /* Pakete und Formular etwas kompakter */
  .plan{padding:1.35rem 1.25rem}
  .plan__price{font-size:1.8rem}
  .plans{gap:1rem}
  .aside__box{padding:1.25rem}

  /* FAQ: die obere Linie entfällt, sonst stehen zwei Striche direkt
     untereinander – der Abschnittskopf bringt seine eigene mit */
  .faq{border-top:0}
  .faq__q{font-size:.98rem;padding:1.1rem 0}

  /* Tapflächen: Fingerkuppen brauchen mehr Platz als Mauszeiger */
  .footer__links{gap:.2rem}
  .footer__links a{display:block;padding-block:.55rem}
  .footer__bottom nav a{display:inline-block;padding-block:.5rem}
  .tlink{padding-block:.55rem}
  .svc__link{margin-top:.35rem}
  .aside__mail{padding-block:.45rem}
  .consent input{width:22px;height:22px;margin-top:0}
  .consent{gap:.85rem;align-items:center}
  .consent label{padding-block:.2rem}
  .consent label a{display:inline-block;padding-block:.35rem}
  .header .logo{padding-block:5px}
  .cookie__text a{display:inline-block;padding-block:.35rem}
  .legal__body a{padding-block:.15rem}
}

/* Sehr schmale Geräte: zweispaltige Blöcke wieder auflösen */
@media (max-width:359px){
  .trust__grid{grid-template-columns:1fr}
}