/* ============================================================
   VORLAGE EINSTIEG · KlarkiDigital
   Pro Kunde wird NUR der Token-Block unten angepasst.
   Der Rest bleibt unberührt, außer der Kunde braucht wirklich
   etwas Eigenes (dann im Zettel notieren).
   ============================================================ */

/* ------------------------------------------------------------
   1 · TOKEN-BLOCK (pro Kunde anpassen)
   Akzentfarbe aus Logo/Fragebogen D12, Kontrast auf Hell
   mindestens 4,5:1 pruefen bevor sie hier landet.
   ------------------------------------------------------------ */
:root{
  --canvas:#f7f6f3;
  --band:#ebe9e4;
  --ink:#1d1d1b;
  --ink-soft:#5b5b57;
  --accent:#2f4f4f;
  --accent-deep:#1f3535;
  --accent-soft:rgba(47,79,79,.10);
  --line:rgba(28,25,23,.12);
  --radius:18px;
  --font-display:'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-text:'Switzer',-apple-system,'Segoe UI',sans-serif;
  --w:1140px;
}

/* Text-Schrift Switzer liegt bei (assets/fonts/). Die Display-Schrift wird
   pro Kunde gewählt: woff2 nach assets/fonts/, Block unten einkommentieren. */
@font-face{font-family:'Switzer';src:url('../fonts/Switzer-Variable.woff2') format('woff2-variations');font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:'Space Grotesk';src:url('../fonts/space-grotesk-var.woff2') format('woff2-variations');font-weight:300 700;font-display:swap;}
/*
@font-face{font-family:'PLATZHALTER-DISPLAY';src:url('../fonts/display.woff2') format('woff2');font-weight:400 700;font-display:swap;}
*/

/* ------------------------------------------------------------
   2 · GRUNDLAGEN
   ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--font-text);
  background:var(--canvas);
  color:var(--ink);
  line-height:1.6;
  font-size:1.0625rem;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-deep)}
.container{max-width:var(--w);margin:0 auto;padding:0 24px}

.skip-link{
  position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;
  padding:10px 18px;z-index:99;border-radius:0 0 10px 0;text-decoration:none;
}
.skip-link:focus{left:0}

h1,h2,h3{font-family:var(--font-display);line-height:1.12;letter-spacing:-.01em;font-weight:600}
h1{font-size:clamp(2.4rem,6vw,4.2rem)}
h2{font-size:clamp(1.9rem,4vw,2.9rem);margin-bottom:.6em;max-width:18ch}
h3{font-size:1.25rem}
p{max-width:62ch}

section,header.hero{padding:clamp(72px,10vw,130px) 0}
.band{background:var(--band)}

/* ------------------------------------------------------------
   3 · NAVIGATION
   ------------------------------------------------------------ */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  background:transparent;
  transition:background .3s ease,box-shadow .3s ease;
}
.nav.solid{background:rgba(250,247,242,.92);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line)}
.nav-inner{display:flex;align-items:center;gap:28px;height:68px}
.brand{
  font-family:var(--font-display);font-weight:700;font-size:1.15rem;
  color:var(--ink);text-decoration:none;margin-right:auto;
}
.nav-links{display:flex;gap:22px}
.nav-links a{color:var(--ink-soft);text-decoration:none;font-size:.95rem}
.nav-links a:hover{color:var(--ink)}
.nav-cta{
  background:var(--accent);color:#fff;text-decoration:none;
  padding:9px 18px;border-radius:999px;font-size:.92rem;font-weight:600;
}
.nav-cta:hover{background:var(--accent-deep)}
@media (max-width:760px){.nav-links{display:none}}

/* Mobiler Sticky-CTA am unteren Rand */
.sticky-cta{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:49;
  display:none;justify-content:center;
  background:var(--accent);color:#fff;text-decoration:none;
  padding:15px 20px;border-radius:14px;font-weight:700;text-align:center;
  box-shadow:0 10px 28px rgba(0,0,0,.22);
  transform:translateY(120%);transition:transform .35s ease;
}
.sticky-cta.show{transform:none}
@media (max-width:760px){.sticky-cta{display:flex}}

/* ------------------------------------------------------------
   4 · HERO
   ------------------------------------------------------------ */
.hero{padding-top:clamp(130px,18vw,190px)}
.eyebrow{
  font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-deep);font-weight:700;margin-bottom:18px;
}
.hero h1 .grad{color:var(--accent)}
.sub{font-size:1.2rem;color:var(--ink-soft);margin:22px 0 30px;max-width:52ch}
.btn-row{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.btn{
  display:inline-block;background:var(--ink);color:var(--canvas);
  text-decoration:none;padding:15px 30px;border-radius:999px;font-weight:700;
  transition:transform .2s ease,background .2s ease;
}
.btn:hover{background:var(--accent-deep);transform:translateY(-2px)}
.link-arrow{
  display:inline-flex;align-items:center;gap:8px;color:var(--ink);
  text-decoration:none;font-weight:600;
}
.link-arrow svg{width:18px;height:18px;transition:transform .2s ease}
.link-arrow:hover svg{transform:translateX(4px)}
.trust-row{
  display:flex;gap:26px;flex-wrap:wrap;margin-top:44px;
  font-size:.9rem;color:var(--ink-soft);
}
.trust-row span{display:flex;align-items:center;gap:8px}
.trust-row span::before{
  content:'';width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;
}
.hero-bild{margin-top:clamp(40px,6vw,72px)}
.hero-bild img{
  width:min(var(--w),calc(100% - 48px));margin:0 auto;
  border-radius:var(--radius);box-shadow:0 30px 70px rgba(28,25,23,.18);
  object-fit:cover;aspect-ratio:16/9;
}

/* ------------------------------------------------------------
   5 · KICKER + LEISTUNGEN
   ------------------------------------------------------------ */
.kicker{
  display:inline-flex;align-items:center;gap:12px;margin-bottom:18px;
  font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:700;
}
.kicker .num{
  font-family:var(--font-display);color:var(--accent);
  border:1px solid var(--line);border-radius:999px;
  width:34px;height:34px;display:grid;place-items:center;font-size:.8rem;
}
.kicker.center{justify-content:center;width:100%}

.cards{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px;
}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;transition:transform .25s ease,box-shadow .25s ease;
}
.card:hover{transform:translateY(-5px);box-shadow:0 22px 44px rgba(28,25,23,.12)}
.card img{aspect-ratio:8/5;object-fit:cover;width:100%}
.card h3{padding:20px 22px 6px}
.card p{padding:0 22px 24px;color:var(--ink-soft);font-size:.98rem}
@media (max-width:900px){.cards{grid-template-columns:1fr;max-width:480px;margin-inline:auto}}

/* ------------------------------------------------------------
   6 · ÜBER
   ------------------------------------------------------------ */
.ueber{display:grid;grid-template-columns:.85fr 1fr;gap:clamp(32px,6vw,72px);align-items:center}
.ueber-bild img{
  border-radius:var(--radius);aspect-ratio:9/11;object-fit:cover;
  box-shadow:0 24px 54px rgba(28,25,23,.16);
}
.ueber p{color:var(--ink-soft);margin-bottom:1em}
.facts{display:flex;gap:34px;flex-wrap:wrap;margin-top:26px}
.facts span{display:flex;flex-direction:column;font-size:.88rem;color:var(--ink-soft)}
.facts strong{
  font-family:var(--font-display);font-size:1.7rem;color:var(--accent-deep);line-height:1.1;
}
@media (max-width:860px){
  .ueber{grid-template-columns:1fr}
  .ueber-bild{max-width:420px}
}

/* ------------------------------------------------------------
   7 · FRAGEN (FAQ)
   ------------------------------------------------------------ */
.faq-list{margin-top:36px;max-width:760px}
.faq-item{border-top:1px solid var(--line)}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-item summary{
  cursor:pointer;list-style:none;padding:22px 40px 22px 0;position:relative;
  font-weight:600;font-size:1.08rem;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:'+';position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-size:1.5rem;color:var(--accent);transition:transform .25s ease;
}
.faq-item[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq-body{padding:0 0 24px;color:var(--ink-soft)}

/* ------------------------------------------------------------
   8 · KONTAKT
   ------------------------------------------------------------ */
.kontakt{text-align:center}
.kontakt h2{margin-inline:auto}
.closing{max-width:24ch}
.lead{margin:0 auto 36px;color:var(--ink-soft);font-size:1.15rem}
.kontakt-methods{display:flex;justify-content:center;gap:18px;flex-wrap:wrap}
.kontakt-card{
  display:flex;flex-direction:column;gap:4px;text-decoration:none;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 34px;min-width:240px;
  transition:transform .25s ease,box-shadow .25s ease;
}
.kontakt-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(28,25,23,.12)}
.kontakt-card .label{
  font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
}
.kontakt-card .value{font-weight:700;color:var(--accent-deep);font-size:1.1rem}
.micro{margin:26px auto 0;font-size:.88rem;color:var(--ink-soft)}

/* ------------------------------------------------------------
   9 · FOOTER
   ------------------------------------------------------------ */
footer{background:var(--ink);color:rgba(250,247,242,.75);padding:44px 0;font-size:.9rem}
.footer-inner{display:flex;align-items:center;gap:24px;flex-wrap:wrap;justify-content:space-between}
.footer-brand{font-family:var(--font-display);font-weight:700;color:var(--canvas);font-size:1.05rem}
.footer-links{display:flex;gap:18px}
footer a{color:rgba(250,247,242,.75)}
footer a:hover{color:#fff}

/* Unterseiten (Impressum/Datenschutz) */
.rechtsseite{padding-top:140px;max-width:760px;margin:0 auto}
.rechtsseite h1{font-size:clamp(2rem,5vw,3rem);margin-bottom:.6em}
.rechtsseite h2{font-size:1.4rem;margin-top:1.8em}
.rechtsseite p{margin-bottom:1em;color:var(--ink-soft)}
.rechtsseite address{font-style:normal;color:var(--ink-soft);margin-bottom:1em}

/* ------------------------------------------------------------
   10 · REVEALS (mit Delay-Rente, Muster aus klarkidigital-neu)
   ------------------------------------------------------------ */
.js [data-reveal]{
  opacity:0;transform:translateY(26px);
  transition:opacity .7s ease,transform .7s ease;
}
.js [data-reveal].in{opacity:1;transform:none}
.js [data-reveal]:nth-child(2){transition-delay:.08s}
.js [data-reveal]:nth-child(3){transition-delay:.16s}
.js [data-reveal]:nth-child(4){transition-delay:.24s}
.js [data-reveal].done{transition-delay:0s !important}

@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  .btn,.card,.kontakt-card{transition:none}
}

/* Muster-Extras: Karte/Preise, Anfrage, Stelle, Beispiel-Banner (Klarkidigital 23.08.2026) */
.m-demo{background:var(--ink);color:#fff;font-size:.9rem;text-align:center;padding:10px 16px;position:sticky;top:0;z-index:60}
.m-demo strong{color:#f5d9b0}
.m-demo a{color:#fff}
.m-demo-paket{display:block;font-size:.8rem;opacity:.8;margin-top:2px}
body.has-demo .nav{top:58px}
.m-karte{list-style:none;display:grid;gap:0;max-width:760px;border-top:1px solid var(--line)}
.m-karte li{display:flex;justify-content:space-between;gap:20px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line)}
.m-karte strong{display:block;font-weight:600}
.m-karte em{display:block;font-style:normal;color:var(--ink-soft);font-size:.92rem;margin-top:2px}
.m-karte b{font-family:var(--font-display);font-weight:600;color:var(--accent);white-space:nowrap}
.m-anfrage-wrap{display:grid;gap:36px}
@media (min-width:860px){.m-anfrage-wrap{grid-template-columns:1fr 1.1fr;align-items:start}}
.m-form{display:grid;gap:14px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.m-form label{display:grid;gap:6px;font-size:.92rem;font-weight:600}
.m-form input{border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;font:inherit;font-size:1rem;background:var(--canvas);min-height:44px}
.m-form input:focus{outline:0;border-color:var(--accent)}
.m-form .btn{border:0;cursor:pointer;font:inherit;margin-top:6px}
.m-hinweis{font-size:.82rem;color:var(--ink-soft)}
.m-danke{background:var(--accent-soft);border-radius:12px;padding:16px 18px;font-weight:600}
.m-jobs>div{max-width:720px}
.m-fakten{list-style:none;display:grid;gap:10px;margin:18px 0 18px}
.m-fakten li{padding-left:22px;position:relative}
.m-fakten li::before{content:'';position:absolute;left:0;top:.55em;width:10px;height:10px;border-radius:50%;background:var(--accent)}


/* ---- Nachtrag 20260829-1934: Tastaturbedienung und Trefferflaechen -----------
   Ergaenzt nach better-accessibility. Bestehende Regeln bleiben unberuehrt,
   dieser Block steht am Ende und gewinnt bei gleicher Spezifitaet.
   1. Ein sichtbarer Fokusring fuer alles, was den Fokus bekommen kann.
      Vorher gab es nur eine Randfaerbung im Formular, und outline:0 hat
      den Ring des Browsers sogar entfernt.
   2. Mindestens 44 Pixel Hoehe fuer Navigationslinks und den Kopfknopf.
      .btn ist mit seiner Polsterung schon ueber 44 und bleibt, wie er ist. */
:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:4px; }
.m-form input:focus-visible,
.m-form textarea:focus-visible,
.m-form select:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
.nav-links a,
.link-arrow{ min-height:44px; display:inline-flex; align-items:center; }
.nav-cta{ min-height:44px; display:inline-flex; align-items:center; justify-content:center; }

/* ---- Bewegung, Klarkidigital 06.09.2026: die Kante zündet. Vorlage Einstieg/Standard.
   Hover auf allem Klickbaren: Kante zuerst (200 ms), weicher Glow 120 ms später,
   dazu zwei Pixel Anheben. Nur mit Maus; Tastaturfokus behält seinen Ring,
   Reduced Motion schaltet alles ab. */
.btn,.card,.kontakt-card,.nav-cta {outline:1px solid transparent;outline-offset:-1px}
@media (hover:hover) and (pointer:fine){
  .btn,.card,.kontakt-card,.nav-cta {transition:outline-color .2s ease,box-shadow .45s cubic-bezier(.16,1,.3,1) .12s,transform .35s cubic-bezier(.16,1,.3,1) .05s,border-color .25s ease,background .25s ease,color .2s ease}
  .btn:hover,.card:hover,.kontakt-card:hover,.nav-cta:hover{outline-color:color-mix(in srgb, var(--accent) 62%, transparent);box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent),0 0 22px -4px color-mix(in srgb, var(--accent) 30%, transparent),0 14px 34px -18px color-mix(in srgb, var(--accent) 60%, transparent),0 18px 40px -22px rgba(0,0,0,.28);transform:translateY(-2px)}
  .faq-item summary{transition:box-shadow .35s cubic-bezier(.16,1,.3,1) .08s,color .2s ease}
  .faq-item summary:hover{box-shadow:0 1px 0 color-mix(in srgb, var(--accent) 55%, transparent),0 8px 20px -14px color-mix(in srgb, var(--accent) 50%, transparent)}
}
@media (prefers-reduced-motion:reduce){.btn,.card,.kontakt-card,.nav-cta,.faq-item summary{transition:none!important;transform:none!important}}
.js .hero [data-reveal]:nth-child(5){transition-delay:.32s}
.js .hero [data-reveal]:nth-child(6){transition-delay:.4s}
.card img{transition:transform .7s cubic-bezier(.16,1,.3,1)}
@media (hover:hover) and (pointer:fine){.card:hover img{transform:scale(1.03)}}
@media (prefers-reduced-motion:reduce){.card img{transition:none}.card:hover img{transform:none}}
/* Nachtrag: die Einblend-Regel (.js [data-reveal].in) hat mehr Gewicht als ein Hover, darum hier ausdrücklich. */
@media (hover:hover) and (pointer:fine){.js [data-reveal].in:is(.btn,.card,.kontakt-card):hover{transform:translateY(-2px)}}