/* ════════════════════════════════════════════════════════════════════════════
   deweb.co – gemeinsames Stylesheet für alle Seiten
   Lag früher dreifach in den HTML-Dateien, in leicht abweichenden Fassungen.

   Grundsatz: Der Blau-Violett-Verlauf gehört der Wortmarke – nirgends sonst.
   ════════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Inter';src:url('fonts/inter-latin-var.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;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:'Syne';src:url('fonts/syne-latin-var.woff2') format('woff2');font-weight:400 800;font-style:normal;font-display:swap;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}

/* ── Tokens ───────────────────────────────────────────────────────────────── */
:root{
  --bg:#07080b; --surface:#0d0f14;
  --line:rgba(255,255,255,0.10); --line-strong:rgba(255,255,255,0.20);
  --ink:#f2f4f7; --ink-mute:rgba(242,244,247,0.62); --ink-faint:rgba(242,244,247,0.40);
  --accent:#4c86ff; --accent-ink:#8fb4ff;
  --brand-a:#3d7fff; --brand-b:#7b5cff;
  --warn:#ffcf6b; --error:#ff9c9c;

  /* Sieben Stufen statt zehn zufälliger Größen */
  --t--2:0.75rem; --t--1:0.875rem; --t-0:1rem; --t-1:1.25rem;
  --t-2:1.75rem; --t-3:2.5rem; --t-4:clamp(2rem,8vw,5.25rem);

  --r-sm:4px; --r-md:10px; --r-full:999px;

  --sp-1:0.5rem; --sp-2:1rem; --sp-3:1.5rem; --sp-4:2rem;
  --sp-5:3rem; --sp-6:4rem; --sp-7:6rem; --sp-8:9rem;

  --sans:'Inter',system-ui,sans-serif;
  --display:'Syne',system-ui,sans-serif;
  --maxw:1180px; --measure:62ch;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);
     font-size:var(--t-0);line-height:1.65;-webkit-font-smoothing:antialiased}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-sm)}
a{color:inherit}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:clamp(1.25rem,5vw,3rem)}
.skip-link{position:absolute;left:-9999px;top:0;z-index:300;background:var(--accent);
           color:#fff;padding:0.75rem 1.25rem;border-radius:0 0 var(--r-sm) 0;
           font-size:var(--t--1);text-decoration:none}
.skip-link:focus{left:0}

/* ── Kopfzeile ────────────────────────────────────────────────────────────── */
header{position:sticky;top:0;z-index:50;background:rgba(7,8,11,0.82);
       backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;
     padding-block:var(--sp-2);gap:var(--sp-3)}
.logo{font-family:var(--display);font-size:1.35rem;font-weight:800;
      letter-spacing:-0.045em;text-decoration:none;white-space:nowrap}
/* Der Verlauf bleibt der Wortmarke vorbehalten. */
.logo .grad,.footer-logo .grad{background:linear-gradient(90deg,var(--brand-a),var(--brand-b));
      -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* Das zweite "e" steht gespiegelt und braucht einen eigenen Verlauf, weil
   background-clip:text nicht über ein transformiertes Kindelement greift. */
.flip-e{display:inline-block;transform:scaleX(-1);
        background:linear-gradient(90deg,#5f74ff,#6a6bff);
        -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.nav{display:flex;align-items:center;gap:var(--sp-4);font-size:var(--t--1)}
.nav a{color:var(--ink-mute);text-decoration:none;transition:color .2s}
.nav a:hover{color:var(--ink)}
.nav .link-cta{color:var(--ink);border:1px solid var(--line-strong);
               padding:0.5rem 1rem;border-radius:var(--r-sm);
               transition:border-color .2s,background .2s}
.nav .link-cta:hover{border-color:var(--accent);background:rgba(76,134,255,0.08)}
.back-link{color:var(--ink-mute);text-decoration:none;font-size:var(--t--1);
           transition:color .2s;white-space:nowrap}
.back-link:hover{color:var(--ink)}

/* Sprachwahl dort, wo man sie sucht. Bei drei Sprachen ist die Liste kürzer
   als jeder Aufklapper. */
.lang{display:flex;align-items:center;gap:0.45rem;font-size:var(--t--2);
      letter-spacing:0.08em;padding-left:var(--sp-2);margin-left:var(--sp-1);
      border-left:1px solid var(--line)}
.lang button{background:none;border:0;padding:0.55rem 0.35rem;cursor:pointer;
             font:inherit;color:var(--ink-faint);transition:color .2s;min-height:44px}
.lang button:hover{color:var(--ink-mute)}
.lang button[aria-current="true"]{color:var(--ink)}
.lang .sep{color:var(--line-strong)}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero{padding-block:var(--sp-8) var(--sp-7);position:relative;overflow:hidden}
/* Eine einzelne feine Linienstruktur – kein Gradient-Blob, kein Glow. */
.hero::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:clamp(60px,8vw,110px) 100%;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.55),transparent 65%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.55),transparent 65%)}
.hero>*{position:relative;z-index:1}
.eyebrow{display:flex;align-items:center;gap:0.75rem;font-size:var(--t--2);
         letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-faint);
         margin-bottom:var(--sp-4)}
.eyebrow::before{content:'';width:2.5rem;height:1px;background:var(--line-strong);flex-shrink:0}
h1{font-family:var(--display);font-size:var(--t-4);font-weight:800;line-height:1.02;
   letter-spacing:-0.045em;max-width:16ch;margin-bottom:var(--sp-4);
   overflow-wrap:break-word;hyphens:auto}
h1 .quiet{color:var(--ink-faint)}
.lede{font-size:var(--t-1);line-height:1.55;color:var(--ink-mute);
      max-width:52ch;margin-bottom:var(--sp-5)}
.actions{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:center}
.btn{display:inline-flex;align-items:center;gap:0.6rem;font-size:var(--t-0);
     text-decoration:none;border-radius:var(--r-sm);padding:0.9rem 1.6rem;
     transition:background .2s,transform .2s,color .2s}
.btn-solid{background:var(--ink);color:var(--bg);font-weight:500}
.btn-solid:hover{background:#fff;transform:translateY(-1px)}
.btn-text{color:var(--ink-mute);padding-inline:0}
.btn-text:hover{color:var(--ink)}
.btn-text::after{content:'→';transition:transform .2s}
.btn-text:hover::after{transform:translateX(3px)}
.hero-meta{margin-top:var(--sp-5);font-size:var(--t--1);color:var(--ink-faint);
           display:flex;gap:0.6rem;flex-wrap:wrap;align-items:center}
.hero-meta .dot{color:var(--line-strong)}

/* ── Abschnitte ───────────────────────────────────────────────────────────── */
.section{padding-block:var(--sp-7);border-top:1px solid var(--line)}
.section-head{display:flex;align-items:baseline;justify-content:space-between;
              gap:var(--sp-4);margin-bottom:var(--sp-6);flex-wrap:wrap}
h2{font-family:var(--display);font-size:var(--t-3);font-weight:700;
   letter-spacing:-0.03em;line-height:1.12;max-width:20ch}
h2 em{font-style:normal;color:var(--accent-ink)}
.section-note{font-size:var(--t--1);color:var(--ink-faint);max-width:34ch}

/* Leistungen als typografische Liste statt Karten mit Emoji-Icons */
.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:4.5rem 1fr 1.15fr;gap:var(--sp-4);
     padding-block:var(--sp-4);border-bottom:1px solid var(--line);
     align-items:start;transition:background .25s}
.row:hover{background:var(--surface)}
.row-num{font-family:var(--display);font-size:var(--t--1);font-weight:700;
         color:var(--ink-faint);letter-spacing:0.06em;padding-top:0.35rem;
         transition:color .25s}
.row:hover .row-num{color:var(--accent-ink)}
h3{font-family:var(--display);font-size:var(--t-2);font-weight:700;
   letter-spacing:-0.02em;line-height:1.15}
.row-desc{color:var(--ink-mute);max-width:46ch}

.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6)}
.prose p{color:var(--ink-mute);max-width:var(--measure);margin-bottom:var(--sp-3)}
.prose p:last-child{margin-bottom:0}
.statement{border-left:2px solid var(--accent);padding-left:var(--sp-4);
           font-family:var(--display);font-size:var(--t-2);font-weight:700;
           line-height:1.25;letter-spacing:-0.02em;color:var(--ink);max-width:22ch}
.statement .statement-body{display:block;margin-top:var(--sp-3);font-family:var(--sans);
                font-size:var(--t-0);font-weight:400;line-height:1.6;
                letter-spacing:0;color:var(--ink-mute);max-width:34ch}

/* ── Kontakt / Formular ───────────────────────────────────────────────────── */
.contact{display:grid;grid-template-columns:1fr 1.1fr;gap:var(--sp-6);align-items:start}
.contact-note{margin-top:var(--sp-3);max-width:38ch}
form{display:flex;flex-direction:column;gap:var(--sp-3)}
.field label{display:block;font-size:var(--t--2);letter-spacing:0.1em;
             text-transform:uppercase;color:var(--ink-faint);margin-bottom:0.5rem}
.field input,.field textarea{width:100%;background:transparent;color:var(--ink);
  border:0;border-bottom:1px solid var(--line-strong);padding:0.7rem 0;
  font-family:var(--sans);font-size:var(--t-0);transition:border-color .2s}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--accent)}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-faint)}
.field textarea{resize:vertical;min-height:120px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
button.submit{align-self:flex-start;margin-top:var(--sp-2);background:var(--ink);
  color:var(--bg);border:0;border-radius:var(--r-sm);padding:0.9rem 1.8rem;
  font-family:var(--sans);font-size:var(--t-0);font-weight:500;cursor:pointer;
  transition:background .2s,transform .2s,opacity .2s}
button.submit:hover{background:#fff;transform:translateY(-1px)}
button.submit:disabled{opacity:0.55;cursor:not-allowed;transform:none}
.form-error{margin-top:var(--sp-1);padding:0.75rem 1rem;border-left:2px solid var(--error);
            background:rgba(255,107,107,0.07);color:var(--error);font-size:var(--t--1)}
.form-success{border-left:2px solid var(--accent);padding-left:var(--sp-4)}
.form-success strong{display:block;font-family:var(--display);font-size:var(--t-2);
                     font-weight:700;letter-spacing:-0.02em;margin-bottom:var(--sp-2)}
.form-success span{color:var(--ink-mute)}

/* ── Rechtstexte (Impressum, Datenschutz) ─────────────────────────────────── */
.legal{padding-block:var(--sp-7) var(--sp-6);max-width:760px}
.legal h1{font-size:var(--t-3);max-width:none;margin-bottom:var(--sp-6)}
.legal-block{padding-block:var(--sp-4);border-top:1px solid var(--line)}
.legal-block h2{font-family:var(--display);font-size:var(--t-1);font-weight:700;
                letter-spacing:-0.02em;max-width:none;margin-bottom:var(--sp-2)}
.legal-block p,.legal-block address{color:var(--ink-mute);font-style:normal;
                                    max-width:var(--measure);margin-bottom:var(--sp-2)}
.legal-block p:last-child,.legal-block address:last-child{margin-bottom:0}
.legal-block a{color:var(--accent-ink);text-decoration:none}
.legal-block a:hover{text-decoration:underline}
.legal-list{list-style:none;color:var(--ink-mute);margin-bottom:var(--sp-2)}
.legal-list li{padding-left:1.1rem;position:relative}
.legal-list li::before{content:'–';position:absolute;left:0;color:var(--ink-faint)}
.contact-block{color:var(--ink-mute);line-height:2}
.todo{color:var(--warn);font-weight:500}

/* Honeypot: aus dem Sichtfeld geschoben statt display:none – Bots, die
   ausgeblendete Felder überspringen, füllen dieses hier trotzdem. Nicht auf
   0×0 setzen, das erkennen manche Bots ebenfalls. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ── Fuß ──────────────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line);padding-block:var(--sp-4);
       display:flex;justify-content:space-between;align-items:center;
       gap:var(--sp-3);flex-wrap:wrap;font-size:var(--t--1);color:var(--ink-faint)}
.footer-logo{font-family:var(--display);font-weight:800;font-size:1rem;
             letter-spacing:-0.03em;color:var(--ink)}
footer a{color:var(--ink-faint);text-decoration:none;transition:color .2s;
         display:inline-flex;align-items:center;min-height:44px;padding-inline:0.15rem}
footer a:hover{color:var(--ink)}
.footer-links{display:flex;gap:var(--sp-3);flex-wrap:wrap}

/* ── 404 ──────────────────────────────────────────────────────────────────── */
.notfound{min-height:70vh;display:flex;flex-direction:column;justify-content:center;
          padding-block:var(--sp-7)}
.notfound .code{font-family:var(--display);font-size:clamp(3rem,12vw,6rem);
                font-weight:800;line-height:1;letter-spacing:-0.05em;
                color:var(--ink-faint);margin-bottom:var(--sp-3)}

/* ── Umbrüche ─────────────────────────────────────────────────────────────── */
@media(max-width:860px){
  .split,.contact{grid-template-columns:1fr;gap:var(--sp-5)}
  .statement,.statement .statement-body{max-width:none}
  .row{grid-template-columns:2.5rem 1fr;row-gap:var(--sp-2)}
  .row-desc{grid-column:2}
  .hero{padding-block:var(--sp-6) var(--sp-5)}
  .section,.legal{padding-block:var(--sp-6)}
}
@media(max-width:560px){
  .nav .nav-sec{display:none}
  .two{grid-template-columns:1fr}
  h1{max-width:none}
  /* Logo + CTA + Sprachwahl passen sonst nicht nebeneinander und schieben
     die Seite seitlich raus. */
  .bar{gap:var(--sp-1)}
  .nav{gap:var(--sp-2)}
  .nav .link-cta{padding:0.5rem 0.8rem}
  .lang{padding-left:var(--sp-1);margin-left:0;gap:0.2rem}
  .lang button{padding:0.55rem 0.25rem}
  .row{column-gap:var(--sp-2)}
  .hero-meta{flex-direction:column;align-items:flex-start;gap:0.2rem}
  .hero-meta .dot{display:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:0.01ms!important;animation-duration:0.01ms!important}
}