/* =====================================================================
   Christliche IT-Lösungen — Design System
   Ein Projekt von Steger Visuals
   Hell, warm, vertrauensvoll · systemeigene Fonts (DSGVO-konform)
   ===================================================================== */

/* ---------- Design Tokens ---------- */
:root{
  --bg:            #FBF6EF;   /* warmes Creme */
  --bg-deep:       #F5ECDE;
  --surface:       #FFFFFF;
  --surface-2:     #FDF9F2;
  --ink:           #26221C;   /* warmes Fast-Schwarz */
  --ink-soft:      #423B31;
  --muted:         #6E655A;
  --line:          #EAE1D3;
  --line-strong:   #DDD1BE;

  --primary:       #1F6E62;   /* tiefes Petrol-Grün */
  --primary-600:   #185750;
  --primary-700:   #124239;
  --primary-050:   #E7F1EE;

  --accent:        #C98A2E;   /* warmes Gold */
  --accent-600:    #AE7422;
  --accent-050:    #F6EAD3;

  --danger:        #B23B3B;
  --ok:            #2E7D53;

  --radius:        18px;
  --radius-sm:     12px;
  --radius-lg:     28px;
  --shadow-sm:     0 1px 2px rgba(38,34,28,.06), 0 2px 8px rgba(38,34,28,.05);
  --shadow-md:     0 6px 22px rgba(38,34,28,.10);
  --shadow-lg:     0 24px 60px rgba(31,110,98,.16);

  --maxw:          1160px;
  --pad:           clamp(20px, 5vw, 40px);

  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset / Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; }
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  line-height:1.65;
  font-size:clamp(16px, 1.02vw + 14px, 18px);
  overflow-x:clip;
}
img{ max-width:100%; display:block; }
a{ color:var(--primary-600); text-decoration:none; }
a:hover{ color:var(--accent-600); }
h1,h2,h3,h4{ line-height:1.15; margin:0 0 .5em; font-weight:700; letter-spacing:-.01em; }
h1{ font-size:clamp(2.1rem, 4.6vw, 3.5rem); }
h2{ font-size:clamp(1.7rem, 3.3vw, 2.5rem); }
h3{ font-size:clamp(1.2rem, 1.6vw, 1.45rem); }
p{ margin:0 0 1rem; }
.lead{ font-size:clamp(1.1rem,1.6vw,1.3rem); color:var(--ink-soft); }
.muted{ color:var(--muted); }
:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; border-radius:6px; }

/* ---------- Layout helpers ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding:clamp(56px, 8vw, 110px) 0; }
.section--tight{ padding:clamp(40px,5vw,64px) 0; }
.center{ text-align:center; }
.eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:.82rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--primary-700); background:linear-gradient(135deg,#E9F3F0,var(--primary-050));
  padding:.4em .9em; border-radius:999px; margin-bottom:1rem; box-shadow:inset 0 0 0 1px rgba(31,110,98,.08);
}
.eyebrow--gold{ color:var(--accent-600); background:linear-gradient(135deg,#FBEFD6,var(--accent-050)); box-shadow:inset 0 0 0 1px rgba(201,138,46,.12); }
.grid{ display:grid; gap:clamp(18px,2.4vw,28px); }
.cols-2{ grid-template-columns:repeat(2,1fr); }
.cols-3{ grid-template-columns:repeat(3,1fr); }
.cols-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .cols-3,.cols-4{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .cols-2,.cols-3,.cols-4{ grid-template-columns:1fr;} }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em; white-space:nowrap;
  font:inherit; font-weight:700; cursor:pointer;
  padding:.85em 1.5em; border-radius:999px; border:2px solid transparent;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .2s, color .2s;
  will-change:transform;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn--primary{ background:linear-gradient(135deg,#248275,var(--primary) 45%,var(--primary-700)); color:#fff; box-shadow:var(--shadow-md); background-size:140% 140%; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background-position .5s var(--ease); }
.btn--primary:hover{ background-position:100% 100%; color:#fff; box-shadow:var(--shadow-lg); }
.btn--ghost{ background:transparent; color:var(--primary-700); border-color:var(--line-strong); }
.btn--ghost:hover{ border-color:var(--primary); color:var(--primary-600); }
.btn--gold{ background:linear-gradient(135deg,#E0A954,var(--accent) 50%,var(--accent-600)); color:#fff; box-shadow:var(--shadow-md); background-size:140% 140%; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background-position .5s var(--ease); }
.btn--gold:hover{ background-position:100% 100%; color:#fff; box-shadow:var(--shadow-lg); }
.btn--lg{ padding:1.05em 1.9em; font-size:1.05rem; }

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(251,246,239,.82);
  backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, box-shadow .3s, background .3s;
}
.site-header.scrolled{ border-bottom-color:var(--line); box-shadow:0 4px 20px rgba(38,34,28,.05); }
.nav{ display:flex; align-items:center; gap:1rem; padding-block:.7rem; }
.brand{ display:flex; align-items:center; gap:.6rem; font-weight:800; letter-spacing:-.02em; color:var(--ink); font-size:1.04rem; }
.brand:hover{ color:var(--ink); }
.brand > span:not(.logo-mark){ white-space:nowrap; line-height:1.05; }
.brand .logo-mark{
  width:38px; height:38px; border-radius:11px; flex:0 0 auto;
  background:linear-gradient(140deg, var(--primary), var(--primary-700));
  display:grid; place-items:center; color:#fff; box-shadow:var(--shadow-sm);
  position:relative; overflow:hidden;
}
.brand .logo-mark svg{ width:22px; height:22px; }
.brand small{ display:block; font-weight:600; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.brand .brand-by{ display:flex; align-items:center; gap:.35em; text-transform:none; letter-spacing:.01em; font-size:.68rem; color:var(--muted); margin-top:.15em; }
.brand .brand-logo{ height:16px; width:auto; display:block; }
.nav-links{ display:flex; align-items:center; gap:.35rem; margin-left:auto; list-style:none; padding:0; }
.nav-links a:not(.btn){ position:relative; color:var(--ink-soft); font-weight:600; padding:.5em .55em; border-radius:8px; transition:color .2s; white-space:nowrap; }
.nav-links a:not(.btn)::after{ content:""; position:absolute; left:.55em; right:.55em; bottom:.18em; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--primary),var(--accent)); transform:scaleX(0); transform-origin:left; transition:transform .28s var(--ease); }
.nav-links a:not(.btn):hover{ color:var(--primary-700); }
.nav-links a:not(.btn):hover::after{ transform:scaleX(1); }
.nav-links a[aria-current="page"]{ color:var(--primary-700); }
.nav-links a[aria-current="page"]::after{ transform:scaleX(1); }
.nav-cta{ margin-left:.5rem; }
.nav-cta .btn{ min-width:16.5rem; } /* feste Breite: „Projekt anfragen" & „Interesse anmelden" gleich groß → Header springt beim Tab-Wechsel nicht */
.nav-links .btn--primary, .nav-links .btn--primary:hover{ color:#fff; }
.nav-links .btn--ghost{ color:var(--primary-700); }
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:.4em; margin-left:auto; }
.nav-toggle span{ display:block; width:26px; height:2px; background:var(--ink); margin:5px 0; transition:.3s; border-radius:2px; }
@media (max-width:980px){
  .nav-toggle{ display:block; }
  .nav-links{
    position:absolute; inset:100% 0 auto 0; flex-direction:column; align-items:stretch;
    background:var(--surface); gap:.2rem; padding:1rem var(--pad) 1.4rem; margin:0;
    box-shadow:var(--shadow-md); border-top:1px solid var(--line);
    clip-path:inset(0 0 100% 0); opacity:0; transition:clip-path .35s var(--ease), opacity .25s;
  }
  .nav-links.open{ clip-path:inset(0 0 0 0); opacity:1; }
  .nav-links a{ padding:.75em .8em; }
  .nav-cta{ margin:.4rem 0 0; }
  .nav[data-open="true"] .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav[data-open="true"] .nav-toggle span:nth-child(2){ opacity:0; }
  .nav[data-open="true"] .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}

/* ---------- Hero ---------- */
.hero{ position:relative; padding:clamp(56px,9vw,120px) 0 clamp(48px,7vw,90px); overflow:hidden; }
.hero__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.blob{ position:absolute; border-radius:50%; filter:blur(50px); opacity:.5; animation:float 18s var(--ease) infinite; }
.blob--1{ width:520px; height:520px; background:radial-gradient(circle at 30% 30%, #BFE3DC, transparent 70%); top:-160px; right:-120px; }
.blob--2{ width:460px; height:460px; background:radial-gradient(circle at 30% 30%, #F3E0BC, transparent 70%); bottom:-180px; left:-120px; animation-delay:-6s; }
.blob--3{ width:300px; height:300px; background:radial-gradient(circle at 30% 30%, #D7ECE7, transparent 70%); top:40%; left:45%; animation-delay:-11s; }
.hero__inner{ position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,56px); align-items:center; }
.hero__inner > *{ min-width:0; }
.hero__media{ min-width:0; }
.device{ max-width:100%; }
@media (max-width:940px){ .hero__inner{ grid-template-columns:1fr; } }
.hero h1 .grad{
  background:linear-gradient(120deg,var(--primary),var(--accent-600));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.6rem; }
.hero__trust{ display:flex; flex-wrap:wrap; gap:1.2rem 1.8rem; margin-top:2rem; color:var(--muted); font-size:.92rem; }
.hero__trust b{ color:var(--ink); }
.hero__media{ position:relative; }

/* Floating device card mockup in hero */
.device{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); overflow:hidden; transform:rotate(1.2deg);
  transition:transform .5s var(--ease);
}
.device:hover{ transform:rotate(0) translateY(-4px); }
.device__bar{ display:flex; align-items:center; gap:.4rem; padding:.7rem 1rem; background:var(--surface-2); border-bottom:1px solid var(--line); }
.device__bar i{ width:11px; height:11px; border-radius:50%; background:var(--line-strong); display:block; }
.device__bar i:nth-child(1){ background:#E9A09A; } .device__bar i:nth-child(2){ background:#EBCB86; } .device__bar i:nth-child(3){ background:#9AD1B0; }
.device__body{ padding:1.1rem 1.2rem 1.3rem; }

/* image placeholder frame */
.ph{
  position:relative; display:grid; place-items:center; text-align:center;
  background:
    linear-gradient(135deg, var(--primary-050), var(--accent-050));
  border:1px dashed var(--line-strong); border-radius:var(--radius);
  color:var(--muted); font-size:.85rem; aspect-ratio:16/10; overflow:hidden;
}
.ph[data-ratio="1"]{ aspect-ratio:1; } .ph[data-ratio="4-3"]{ aspect-ratio:4/3; } .ph[data-ratio="21-9"]{ aspect-ratio:21/9; }
.ph span{ display:block; padding:.6em 1em; }
.ph code{ font-size:.78rem; color:var(--primary-700); background:rgba(255,255,255,.6); padding:.2em .5em; border-radius:6px; }

/* ---------- Cards ---------- */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(20px,2.4vw,30px); box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
  height:100%;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--line-strong); }
.card .ic{
  width:54px; height:54px; border-radius:15px; display:grid; place-items:center; margin-bottom:1rem; font-size:1.4rem;
  background:linear-gradient(140deg,#E9F3F0,var(--primary-050)); color:var(--primary-700);
  box-shadow:inset 0 0 0 1px rgba(31,110,98,.08);
}
.card--gold{ background:linear-gradient(180deg,#FFFDF8,var(--surface)); }
.card--gold .ic{ background:linear-gradient(140deg,#FBEFD6,var(--accent-050)); color:var(--accent-600); box-shadow:inset 0 0 0 1px rgba(201,138,46,.12); }
.card h3{ margin-bottom:.35em; }
.card p{ color:var(--muted); margin-bottom:0; }
.card__link{ display:inline-flex; align-items:center; gap:.35em; margin-top:1rem; font-weight:700; }
.card__link svg{ transition:transform .25s var(--ease); }
.card:hover .card__link svg{ transform:translateX(4px); }

.feature-card{ position:relative; overflow:hidden; }
.feature-card::after{
  content:""; position:absolute; inset:auto -30% -40% auto; width:220px; height:220px;
  background:radial-gradient(circle, var(--accent-050), transparent 70%); opacity:0; transition:opacity .4s;
}
.feature-card:hover::after{ opacity:1; }

/* Numbered process steps */
.steps{ counter-reset:step; }
.step{ position:relative; padding-left:4.2rem; }
.step .num{
  position:absolute; left:0; top:0; width:3rem; height:3rem; border-radius:50%;
  display:grid; place-items:center; font-weight:800; font-size:1.15rem; color:#fff;
  background:linear-gradient(140deg,var(--primary),var(--primary-700)); box-shadow:var(--shadow-md);
}
.step h3{ margin-top:.2rem; }

/* ---------- Pills / badges ---------- */
.pill{ display:inline-flex; align-items:center; gap:.4em; font-size:.85rem; font-weight:600; color:var(--primary-700); background:var(--primary-050); padding:.4em .85em; border-radius:999px; }
.pill--gold{ color:var(--accent-600); background:var(--accent-050); }
.tag-row{ display:flex; flex-wrap:wrap; gap:.5rem; }

/* ---------- Split / prose ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); align-items:center; }
.split--reverse .split__media{ order:-1; }
@media (max-width:860px){ .split{ grid-template-columns:1fr; } .split--reverse .split__media{ order:0; } }
.checklist{ list-style:none; padding:0; margin:1.2rem 0 0; display:grid; gap:.7rem; }
.checklist li{ display:flex; gap:.7rem; align-items:flex-start; }
.checklist svg{ flex:0 0 auto; margin-top:.2rem; color:var(--primary); }

/* ---------- CTA band ---------- */
.cta-band{
  position:relative; overflow:hidden; border-radius:var(--radius-lg);
  background:linear-gradient(135deg,var(--primary-700),var(--primary)); color:#fff;
  padding:clamp(36px,5vw,64px); text-align:center; box-shadow:var(--shadow-lg);
}
.cta-band h2{ color:#fff; }
.cta-band p{ color:rgba(255,255,255,.86); }
.cta-band::before{ content:""; position:absolute; inset:-40% 60% 40% -10%; background:radial-gradient(circle,rgba(201,138,46,.4),transparent 70%); }
.cta-band .btn--gold{ position:relative; }

/* ---------- Contact / Form ---------- */
.form{ display:grid; gap:1rem; }
.form .row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:560px){ .form .row{ grid-template-columns:1fr; } }
.field{ display:grid; gap:.35rem; }
.field label{ font-weight:600; font-size:.92rem; }
.field input, .field textarea, .field select{
  font:inherit; padding:.8em .95em; border-radius:12px; border:1.5px solid var(--line-strong);
  background:var(--surface); color:var(--ink); transition:border-color .2s, box-shadow .2s;
}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-050);
}
.field textarea{ min-height:140px; resize:vertical; }
.form__consent{ display:flex; gap:.6rem; align-items:flex-start; font-size:.9rem; color:var(--muted); }
.form__consent input{ margin-top:.25rem; }
.form__status{ font-size:.92rem; }
.form__status.ok{ color:var(--ok); } .form__status.err{ color:var(--danger); }

/* ---------- Footer ---------- */
.site-footer{ background:#211D18; color:#C9C0B2; padding:clamp(48px,6vw,72px) 0 2rem; margin-top:2rem; }
.site-footer a{ color:#E7DECF; } .site-footer a:hover{ color:#fff; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem; }
@media (max-width:820px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .footer-grid{ grid-template-columns:1fr; } }
.site-footer h4{ color:#fff; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:1rem; }
.footer-links{ list-style:none; padding:0; margin:0; display:grid; gap:.55rem; }
.footer-bottom{ margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.1); display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; justify-content:space-between; font-size:.85rem; color:#948B7C; }
.footer-brand small{ display:block; color:#948B7C; margin-top:.4rem; font-size:.85rem; line-height:1.6; }

/* ---------- Cookie consent ---------- */
.cookie{
  position:fixed; left:50%; bottom:20px; transform:translateX(-50%) translateY(140%);
  width:min(680px, calc(100% - 32px)); z-index:200;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); padding:1.3rem 1.4rem; opacity:0;
  transition:transform .5s var(--ease), opacity .4s;
}
.cookie.show{ transform:translateX(-50%) translateY(0); opacity:1; }
.cookie h3{ font-size:1.1rem; margin-bottom:.4rem; }
.cookie p{ font-size:.9rem; color:var(--muted); margin-bottom:1rem; }
.cookie__actions{ display:flex; flex-wrap:wrap; gap:.6rem; }
.cookie__actions .btn{ padding:.65em 1.2em; font-size:.92rem; }
.cookie__toggles{ display:grid; gap:.6rem; margin:0 0 1rem; }
.cookie__toggle{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.6rem .8rem; background:var(--surface-2); border-radius:10px; font-size:.9rem; }
.switch{ position:relative; width:44px; height:24px; flex:0 0 auto; }
.switch input{ opacity:0; width:0; height:0; }
.switch .track{ position:absolute; inset:0; background:var(--line-strong); border-radius:999px; transition:.25s; cursor:pointer; }
.switch .track::before{ content:""; position:absolute; height:18px; width:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.25s; box-shadow:var(--shadow-sm); }
.switch input:checked + .track{ background:var(--primary); }
.switch input:checked + .track::before{ transform:translateX(20px); }
.switch input:disabled + .track{ background:var(--primary); opacity:.5; cursor:not-allowed; }

/* ---------- Reveal on scroll ---------- */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal][data-delay="1"]{ transition-delay:.08s; }
[data-reveal][data-delay="2"]{ transition-delay:.16s; }
[data-reveal][data-delay="3"]{ transition-delay:.24s; }
[data-reveal][data-delay="4"]{ transition-delay:.32s; }

/* ---------- Stat / counter ---------- */
.stat{ text-align:center; }
.stat .big{ font-size:clamp(2rem,4vw,3rem); font-weight:800; line-height:1;
  background:linear-gradient(120deg,var(--primary),var(--accent-600)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat .lab{ color:var(--muted); font-size:.9rem; margin-top:.4rem; }

/* ---------- Legal / long-form pages ---------- */
.doc{ max-width:800px; }
.doc h2{ margin-top:2.4rem; font-size:1.5rem; }
.doc h3{ margin-top:1.6rem; }
.doc p, .doc li{ color:var(--ink-soft); }
.doc ul{ padding-left:1.2rem; }
.doc a{ text-decoration:underline; }
.doc .ph-legal{ background:var(--accent-050); border:1px dashed var(--accent-600); border-radius:8px; padding:.15em .5em; color:var(--accent-600); font-weight:600; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  [data-reveal]{ opacity:1; transform:none; }
}

/* ---------- Keyframes ---------- */
@keyframes float{
  0%,100%{ transform:translate(0,0) scale(1); }
  33%{ transform:translate(24px,-20px) scale(1.05); }
  66%{ transform:translate(-18px,16px) scale(.97); }
}
@keyframes pulse-ring{ 0%{ box-shadow:0 0 0 0 rgba(31,110,98,.35);} 100%{ box-shadow:0 0 0 16px rgba(31,110,98,0);} }