/* ===================================================================
   MJK MEDIA - Website Unterseiten - gemeinsames Stylesheet
   Design-System 1:1 wie die Startseite (mjkmedia.de):
   Roboto (Basis) + Playfair Display italic (Akzente, <em>) in Blau.
   Reines HTML/CSS, kein JS. Jede Unterseite = eine vollstaendige Seite.
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,400..700&family=Roboto:wght@300..900&display=swap');

:root{
  --blue:#3b6bff; --blue-hover:#2f5cf0;
  --ink:#12141a; --muted:#5a6070; --line:#e6e8ef;
  --red:#e2536b; --green:#22c55e;
  --maxw:1200px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; color:var(--ink);
  font-family:'Roboto',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  background:#ffffff;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
em{font-family:'Playfair Display',Georgia,serif; font-style:italic; font-weight:400; color:var(--blue);}

/* ---------------- Layout ---------------- */
.section{
  position:relative; overflow-x:clip;
  padding:clamp(56px,8vw,120px) clamp(16px,3vw,40px);
}
.section__inner{max-width:var(--maxw); margin:0 auto;}
.section--tint{
  background:
    radial-gradient(1000px 640px at 85% -14%, rgba(59,107,255,.10), transparent 56%),
    radial-gradient(820px 560px at 0% 118%, rgba(59,107,255,.06), transparent 55%),
    linear-gradient(180deg,#ffffff 0%,#f4f5f8 60%,#eef0f5 100%);
}
.section--tint-alt{
  background:
    radial-gradient(1000px 640px at 12% -14%, rgba(59,107,255,.11), transparent 56%),
    radial-gradient(820px 560px at 100% 116%, rgba(34,197,94,.06), transparent 55%),
    linear-gradient(180deg,#eef0f5 0%,#f4f5f8 45%,#ffffff 100%);
}

.eyebrow{margin:0 0 16px; font-size:12px; font-weight:700; letter-spacing:.14em; color:var(--blue);}
.title{
  margin:0 0 14px; font-weight:800; letter-spacing:-.025em; line-height:1.06;
  font-size:clamp(30px,4.2vw,54px); max-width:900px;
}
.lead{
  margin:0 0 clamp(32px,4vw,48px); font-size:clamp(16px,1.25vw,18px);
  line-height:1.6; color:var(--muted); max-width:660px;
}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--blue); color:#fff; text-decoration:none; font-size:15.5px; font-weight:600;
  padding:15px 28px; border-radius:12px; box-shadow:0 12px 30px -10px rgba(59,107,255,.6);
  transition:background .18s ease, transform .18s ease; border:none; cursor:pointer;
}
.btn:hover{background:var(--blue-hover); transform:translateY(-2px);}
.btn--green{
  background:linear-gradient(140deg,#16a34a,#22c55e);
  box-shadow:0 12px 30px -10px rgba(34,197,94,.6);
}
.btn--green:hover{background:linear-gradient(140deg,#128a3e,#1fb857);}

/* ---------------- Navigation ---------------- */
.nav{position:sticky; top:0; z-index:9990; border-bottom:1px solid rgba(230,232,239,.7);}
/* Weichzeichner auf eigener Ebene: backdrop-filter direkt auf .nav sperrt das Vollbild-Menü (position:fixed) in die Leiste ein */
.nav::before{content:""; position:absolute; inset:0; z-index:-1; background:rgba(255,255,255,.82); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); pointer-events:none;}
.nav__inner{
  max-width:var(--maxw); margin:0 auto; padding:12px clamp(16px,3vw,40px);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px;
}
.nav__side{display:flex; align-items:center; gap:clamp(16px,2.2vw,30px);}
.nav__side--r{justify-content:flex-end;}
.nav__link{
  position:relative; text-decoration:none; color:var(--ink);
  font-size:14.5px; font-weight:500; line-height:1; padding:6px 0; white-space:nowrap;
  transition:color .18s ease;
}
.nav__link::after{content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background:var(--blue); border-radius:2px; transition:right .22s ease;}
.nav__link:hover{color:var(--blue);}
.nav__link:hover::after{right:0;}
.nav__logo{grid-column:2; display:inline-flex; align-items:center; justify-content:center; transition:transform .18s ease;}
.nav__logo:hover{transform:translateY(-1px);}
.nav__logo img{height:36px; width:auto;}
.nav__cta{display:inline-flex; align-items:center; background:var(--blue); color:#fff; text-decoration:none; font-size:13.5px; font-weight:600; padding:10px 18px; border-radius:10px; transition:background .18s ease, transform .18s ease;}
.nav__cta:hover{background:var(--blue-hover); transform:translateY(-1px);}

.nav__open{grid-column:3; justify-self:end; display:none; cursor:pointer; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px; background:#fff; border:1px solid var(--line); box-shadow:0 8px 20px -14px rgba(30,41,90,.5); -webkit-tap-highlight-color:transparent;}
.nav__burger{position:relative; width:20px; height:14px;}
.nav__burger span{position:absolute; left:0; width:100%; height:2px; border-radius:2px; background:var(--ink);}
.nav__burger span:nth-child(1){top:0;} .nav__burger span:nth-child(2){top:6px;} .nav__burger span:nth-child(3){top:12px;}

.nav__overlay{position:fixed; inset:0; z-index:100000; display:flex; flex-direction:column; background:rgba(255,255,255,.985); backdrop-filter:blur(10px); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .45s ease, visibility 0s linear .45s;}
.nav__overlay:target{opacity:1; visibility:visible; pointer-events:auto; transition:opacity .45s ease, visibility 0s linear 0s;}
.nav__scrim{position:absolute; inset:0; text-decoration:none;}
.nav__panel{position:relative; z-index:2; display:flex; flex-direction:column; min-height:100%; padding:clamp(20px,6vw,34px);}
.nav__ohead{display:flex; align-items:center; justify-content:space-between; margin-bottom:clamp(28px,7vh,64px);}
.nav__ohead img{height:32px; width:auto;}
.nav__x{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px; background:#fff; border:1px solid var(--line); color:var(--ink); text-decoration:none; font-size:26px; line-height:1;}
.nav__olist{display:flex; flex-direction:column; gap:clamp(4px,1.4vh,10px); margin:auto 0;}
.nav__mlink{text-decoration:none; color:var(--ink); font-size:clamp(26px,7.5vw,40px); font-weight:600; letter-spacing:-.01em; padding:10px 2px;}
.nav__mlink:active{color:var(--blue);}

@media (max-width:900px){
  .nav__inner{grid-template-columns:auto 1fr auto; padding:12px 18px;}
  .nav__side{display:none;}
  .nav__logo{grid-column:1; justify-self:start;}
  .nav__open{display:inline-flex;}
}

/* ---------------- Hero ---------------- */
.hero{
  position:relative; overflow-x:clip;
  padding:clamp(64px,9vw,120px) clamp(16px,3vw,40px) clamp(56px,7vw,96px);
  background:
    radial-gradient(1100px 680px at 82% -12%, rgba(59,107,255,.13), transparent 56%),
    radial-gradient(850px 600px at 2% 114%, rgba(59,107,255,.07), transparent 55%),
    linear-gradient(180deg,#ffffff 0%,#f4f5f8 55%,#eef0f5 100%);
}
.hero__inner{max-width:var(--maxw); margin:0 auto;}
.hero__eyebrow{margin:0 0 20px; font-size:12.5px; font-weight:700; letter-spacing:.16em; color:var(--blue); text-transform:uppercase;}
.hero__title{margin:0 0 22px; font-weight:800; line-height:1.02; letter-spacing:-.025em; font-size:clamp(38px,6vw,76px); max-width:15ch;}
.hero__title em{font-size:1em; line-height:1.02;}
.hero__sub{margin:0 0 34px; font-size:clamp(16px,1.5vw,20px); line-height:1.55; color:var(--muted); max-width:640px;}
.hero__sub strong{color:var(--ink); font-weight:600;}
.hero__note{margin:16px 0 0; font-size:14px; color:var(--muted);}

/* Aufpoppen der Hero-Inhalte */
@keyframes mjkPop{0%{opacity:0; transform:translateY(10px);}100%{opacity:1; transform:none;}}
.hero__eyebrow,.hero__title,.hero__sub,.hero__actions{animation:mjkPop .7s ease both;}
.hero__title{animation-delay:.06s;}
.hero__sub{animation-delay:.12s;}
.hero__actions{animation-delay:.18s;}
@media (prefers-reduced-motion:reduce){.hero__eyebrow,.hero__title,.hero__sub,.hero__actions{animation:none;}}

/* rotierende Kern-Aussage (rein CSS) */
.rot{display:inline-grid; grid-template-columns:minmax(0,1fr);}
.rot__item{
  grid-area:1/1; color:var(--blue);
  font-family:'Playfair Display',Georgia,serif; font-style:italic; font-weight:400;
  opacity:0; animation:mjkPhrase 24s infinite;
}
@keyframes mjkPhrase{0%{opacity:0; transform:translateY(6px);}1.5%{opacity:1; transform:none;}12%{opacity:1; transform:none;}14%{opacity:0; transform:translateY(-6px);}100%{opacity:0; transform:translateY(-6px);}}
.rot__item:nth-child(1){animation-delay:0s;}
.rot__item:nth-child(2){animation-delay:3s;}
.rot__item:nth-child(3){animation-delay:6s;}
.rot__item:nth-child(4){animation-delay:9s;}
.rot__item:nth-child(5){animation-delay:12s;}
.rot__item:nth-child(6){animation-delay:15s;}
.rot__item:nth-child(7){animation-delay:18s;}
.rot__item:nth-child(8){animation-delay:21s;}

/* ---------------- Prosa / Text-Block ---------------- */
.prose{max-width:760px;}
.prose p{margin:0 0 18px; font-size:clamp(16px,1.2vw,18px); line-height:1.7; color:#3a4050;}
.prose p.big{font-size:clamp(18px,1.5vw,22px); color:var(--ink); font-weight:500;}
.prose .kicker{font-size:14px; color:var(--muted);}

/* ---------------- Feature-Karten Grid ---------------- */
.grid{display:grid; gap:clamp(16px,2vw,26px);}
.grid--2{grid-template-columns:repeat(2,1fr);}
.grid--3{grid-template-columns:repeat(3,1fr);}
.card{
  background:#fff; border:1px solid var(--line); border-radius:20px;
  padding:clamp(24px,2.8vw,34px); box-shadow:0 26px 58px -34px rgba(30,41,90,.28);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{transform:translateY(-4px); border-color:rgba(59,107,255,.4); box-shadow:0 36px 70px -34px rgba(30,41,90,.36);}
.card__ic{
  display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:15px;
  margin-bottom:18px; color:#fff; background:linear-gradient(140deg,var(--blue),#6d8bff);
  box-shadow:0 12px 26px -8px rgba(59,107,255,.55);
}
.card__h{margin:0 0 9px; font-size:clamp(18px,1.6vw,22px); font-weight:800; letter-spacing:-.01em;}
.card__p{margin:0; font-size:15px; line-height:1.6; color:var(--muted);}

/* ---------------- Framework (4 Schritte) ---------------- */
.steps{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2.4vw,28px); max-width:980px;}
.step{position:relative; background:#fff; border:1px solid var(--line); border-radius:20px; padding:clamp(24px,2.6vw,34px); box-shadow:0 26px 58px -34px rgba(30,41,90,.3); transition:transform .2s ease, border-color .2s ease;}
.step:hover{transform:translateY(-4px); border-color:rgba(59,107,255,.4);}
.step__num{display:inline-flex; align-items:center; justify-content:center; width:50px; height:50px; border-radius:15px; margin-bottom:18px; font-family:'Playfair Display',Georgia,serif; font-style:italic; font-size:25px; color:#fff; background:linear-gradient(140deg,var(--blue),#6d8bff); box-shadow:0 12px 26px -8px rgba(59,107,255,.55);}
.step--last .step__num{background:linear-gradient(140deg,#16a34a,#22c55e); box-shadow:0 12px 26px -6px rgba(34,197,94,.55);}
.step__eyb{font-size:11px; font-weight:700; letter-spacing:.12em; color:var(--blue); margin:0 0 8px;}
.step--last .step__eyb{color:var(--green);}
.step__h{margin:0 0 9px; font-size:clamp(18px,1.6vw,22px); font-weight:800; letter-spacing:-.01em;}
.step__p{margin:0; font-size:15px; line-height:1.55; color:var(--muted);}

/* ---------------- Vergleich ---------------- */
.cmp{display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.4vw,28px); align-items:stretch;}
.cmp__card{background:#fff; border:1px solid var(--line); border-radius:22px; padding:clamp(24px,3vw,38px); display:flex; flex-direction:column;}
.cmp__card--old{background:#fbfbfd;}
.cmp__card--mjk{border:1px solid rgba(59,107,255,.35); box-shadow:0 30px 70px -30px rgba(30,41,90,.32); position:relative;}
.cmp__card--mjk::before{content:""; position:absolute; inset:0; border-radius:22px; pointer-events:none; background:radial-gradient(520px 300px at 80% -10%, rgba(59,107,255,.08), transparent 60%);}
.cmp__badge{display:inline-flex; align-items:center; gap:7px; align-self:flex-start; font-size:11px; font-weight:700; letter-spacing:.08em; padding:6px 12px; border-radius:999px; margin-bottom:18px;}
.cmp__badge--old{color:#9096a4; background:#eef0f4; border:1px solid var(--line);}
.cmp__badge--mjk{color:var(--blue); background:rgba(59,107,255,.10); border:1px solid rgba(59,107,255,.28);}
.cmp__h{margin:0 0 6px; font-size:clamp(19px,1.9vw,24px); font-weight:800; letter-spacing:-.01em;}
.cmp__sub{margin:0 0 22px; font-size:14.5px; line-height:1.5; color:var(--muted);}
.cmp__list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px;}
.cmp__row{display:flex; gap:12px; align-items:flex-start; font-size:clamp(14.5px,1.05vw,15.5px); line-height:1.5;}
.cmp__row span:last-child{color:#3a4050;}
.cmp__card--old .cmp__row span:last-child{color:#6a7080;}
.cmp__ic{flex:none; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700;}
.cmp__ic--no{color:var(--red); background:rgba(226,83,107,.12); border:1px solid rgba(226,83,107,.25);}
.cmp__ic--yes{color:var(--green); background:rgba(34,197,94,.13); border:1px solid rgba(34,197,94,.28);}

/* ---------------- Team (Flip-Karten) ---------------- */
.team{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,26px);}
.team__card{position:relative; border-radius:22px; perspective:1600px; outline:none; cursor:pointer;}
.team__flip{position:relative; width:100%; border-radius:22px; transform-style:preserve-3d; transition:transform .75s cubic-bezier(.22,.68,.2,1);}
.team__card:hover .team__flip,.team__card:focus-within .team__flip,.team__card:focus .team__flip{transform:rotateY(180deg);}
.team__face{border-radius:22px; overflow:hidden; background:#fff; border:1px solid var(--line); box-shadow:0 24px 55px -34px rgba(30,41,90,.3); -webkit-backface-visibility:hidden; backface-visibility:hidden;}
.team__front{position:relative;}
.team__back{position:absolute; inset:0; transform:rotateY(180deg); display:flex; flex-direction:column; justify-content:center; padding:clamp(22px,2.4vw,30px); color:#fff; border-color:transparent; background:radial-gradient(520px 320px at 82% -12%, rgba(255,255,255,.14), transparent 60%),linear-gradient(155deg,#3b6bff 0%,#2f4fd6 60%,#25307a 100%); box-shadow:0 30px 66px -30px rgba(30,41,90,.5);}
.team__photo{position:relative; width:100%; aspect-ratio:1/1; overflow:hidden; background:#eef0f5;}
.team__photo img{width:100%; height:100%; object-fit:cover;}
.team__badge{position:absolute; top:12px; right:12px; z-index:2; display:inline-flex; align-items:center; gap:6px; padding:6px 11px 6px 9px; border-radius:999px; background:rgba(255,255,255,.82); backdrop-filter:blur(6px); font-size:11px; font-weight:700; color:var(--blue); box-shadow:0 6px 16px -6px rgba(30,41,90,.35); transition:opacity .25s ease;}
.team__card:hover .team__badge,.team__card:focus-within .team__badge{opacity:0;}
.team__body{padding:18px 20px 22px;}
.team__name{margin:0; font-size:clamp(17px,1.5vw,20px); font-weight:800; letter-spacing:-.01em;}
.team__role{margin:6px 0 0; font-size:13.5px; font-weight:600; color:var(--blue);}
.team__brole{font-size:11px; font-weight:700; letter-spacing:.12em; color:rgba(255,255,255,.75); margin-bottom:4px;}
.team__bname{font-size:clamp(20px,1.8vw,24px); font-weight:800; letter-spacing:-.01em; margin-bottom:14px;}
.team__bname::after{content:""; display:block; width:34px; height:3px; border-radius:3px; background:rgba(255,255,255,.55); margin-top:12px;}
.team__bio{margin:0; font-size:clamp(13px,1.02vw,14.5px); line-height:1.55; color:rgba(255,255,255,.94);}

/* ---------------- Testimonials ---------------- */
.tst{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,24px); align-items:start;}
.tst__card{background:#fff; border:1px solid var(--line); border-radius:20px; padding:clamp(24px,2.6vw,32px); box-shadow:0 24px 55px -36px rgba(30,41,90,.3); display:flex; flex-direction:column;}
.tst__stars{color:#f5b301; font-size:15px; letter-spacing:2px; margin-bottom:14px;}
.tst__quote{margin:0 0 20px; font-size:15px; line-height:1.65; color:#3a4050;}
.tst__who{margin-top:auto; display:flex; align-items:center; gap:12px;}
.tst__av{flex:none; width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; color:#fff; background:linear-gradient(140deg,var(--blue),#6d8bff);}
.tst__name{font-size:14.5px; font-weight:700;}
.tst__firm{font-size:12.5px; color:var(--muted);}

/* ---------------- Jobs ---------------- */
.jobs{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2vw,24px);}
.job{background:#fff; border:1px solid var(--line); border-radius:20px; padding:clamp(24px,2.6vw,32px); box-shadow:0 22px 50px -36px rgba(30,41,90,.28); display:flex; flex-direction:column; transition:transform .2s ease, border-color .2s ease;}
.job:hover{transform:translateY(-4px); border-color:rgba(59,107,255,.4);}
.job__tag{align-self:flex-start; font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--blue); background:rgba(59,107,255,.10); border:1px solid rgba(59,107,255,.24); padding:5px 11px; border-radius:999px; margin-bottom:14px;}
.job__h{margin:0 0 10px; font-size:clamp(18px,1.6vw,21px); font-weight:800; letter-spacing:-.01em;}
.job__p{margin:0 0 22px; font-size:14.5px; line-height:1.6; color:var(--muted);}
.job__cta{margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:var(--blue); font-weight:600; font-size:14.5px;}
.job__cta:hover{color:var(--blue-hover);}

/* Aktionsreihe in Stellenkacheln: sekundaeres "Mehr erfahren" plus gefuellter Bewerben-Knopf.
   Nur auf der Karriereseite, das Playbook nutzt .job__cta weiter als reinen Textlink. */
.job__akt{margin-top:auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.job__akt .job__cta{margin-top:0;}
.job__mehr{
  display:inline-flex; align-items:center; text-decoration:none; font-size:14.5px; font-weight:600;
  color:var(--ink); background:#fff; border:1.5px solid var(--line); border-radius:9px;
  padding:10px 18px; transition:border-color .15s ease, color .15s ease;
}
.job__mehr:hover{border-color:rgba(59,107,255,.45); color:var(--blue);}
.job__cta--voll{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  font-size:14.5px; font-weight:600; color:#fff; background:var(--blue);
  border:1.5px solid var(--blue); border-radius:9px; padding:10px 18px; transition:background .15s ease;
}
.job__cta--voll:hover{background:var(--blue-hover); color:#fff;}


/* ---------------- FAQ ---------------- */
.faq{display:flex; flex-direction:column; gap:14px; max-width:820px;}
.faq__item{background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:0 18px 46px -34px rgba(30,41,90,.28); transition:border-color .2s ease;}
.faq__item[open]{border-color:rgba(59,107,255,.4);}
.faq__q{display:flex; align-items:center; gap:16px; cursor:pointer; list-style:none; padding:clamp(18px,2.2vw,24px) clamp(20px,2.4vw,28px); font-size:clamp(16px,1.5vw,19px); font-weight:700;}
.faq__q::-webkit-details-marker{display:none;}
.faq__ic{flex:none; margin-left:auto; position:relative; width:24px; height:24px; border-radius:50%; background:rgba(59,107,255,.10); border:1px solid rgba(59,107,255,.26);}
.faq__ic::before,.faq__ic::after{content:""; position:absolute; top:50%; left:50%; width:11px; height:2px; border-radius:2px; background:var(--blue); transform:translate(-50%,-50%); transition:transform .25s ease, opacity .2s ease;}
.faq__ic::after{transform:translate(-50%,-50%) rotate(90deg);}
.faq__item[open] .faq__ic::after{opacity:0;}
.faq__a{padding:0 clamp(20px,2.4vw,28px) clamp(20px,2.4vw,26px); font-size:clamp(14.5px,1.15vw,16.5px); line-height:1.65; color:var(--muted); max-width:660px;}

/* ---------------- CTA-Band ---------------- */
.band{position:relative; background:#0f1116; color:#fff; border-radius:24px; overflow:hidden; padding:clamp(30px,4vw,52px); box-shadow:0 30px 70px -34px rgba(30,41,90,.45); display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;}
.band::before{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(620px 340px at 88% -30%, rgba(59,107,255,.3), transparent 60%);}
.band__text{position:relative; min-width:0;}
.band__h{margin:0 0 8px; font-size:clamp(22px,2.6vw,34px); font-weight:800; letter-spacing:-.02em; line-height:1.1;}
.band__h em{color:#8fa8ff;}
.band__p{margin:0; font-size:15px; color:#a7adbd; line-height:1.55;}
.band__cta{position:relative; flex:none; display:inline-flex; align-items:center; gap:10px; background:var(--blue); color:#fff; text-decoration:none; font-size:16px; font-weight:600; padding:16px 30px; border-radius:12px; box-shadow:0 14px 34px -10px rgba(59,107,255,.7); transition:background .18s ease, transform .18s ease;}
.band__cta:hover{background:var(--blue-hover); transform:translateY(-2px);}

/* ---------------- Quote ---------------- */
.quote{max-width:900px; margin:0 auto; text-align:center;}
.quote__t{margin:0; font-family:'Playfair Display',Georgia,serif; font-style:italic; font-weight:400; font-size:clamp(24px,3.4vw,44px); line-height:1.25; color:var(--ink);}
.quote__t span{color:var(--blue);}

/* ---------------- Kontakt-Karte ---------------- */
.contact{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,3vw,44px); align-items:center;}
.contact__card{background:#fff; border:1px solid var(--line); border-radius:20px; padding:clamp(26px,3vw,36px); box-shadow:0 24px 55px -36px rgba(30,41,90,.3);}
.contact__row{display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--line);}
.contact__row:last-child{border-bottom:none;}
.contact__ic{flex:none; width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:rgba(59,107,255,.08); border:1px solid rgba(59,107,255,.22);}
.contact__k{font-size:11.5px; font-weight:700; letter-spacing:.1em; color:#8a90a0;}
.contact__v{font-size:15.5px; font-weight:600; color:var(--ink); text-decoration:none;}
a.contact__v:hover{color:var(--blue);}

/* ---------------- Footer ---------------- */
.footer{position:relative; overflow-x:clip; color:var(--ink); background:radial-gradient(1000px 620px at 88% -20%, rgba(59,107,255,.12), transparent 56%),linear-gradient(180deg,#eef0f5 0%,#e8ebf2 100%); padding:clamp(48px,6vw,80px) clamp(16px,3vw,40px) clamp(28px,3vw,40px);}
.footer__inner{max-width:var(--maxw); margin:0 auto;}
.footer__top{display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(28px,4vw,56px); padding-bottom:clamp(28px,3.4vw,40px); border-bottom:1px solid rgba(18,20,26,.1);}
.footer__logo{font-size:22px; font-weight:800; letter-spacing:-.02em; margin:0 0 12px;}
.footer__logo span{color:var(--blue);}
.footer__tag{margin:0; max-width:380px; font-size:15px; line-height:1.6; color:var(--muted);}
.footer__contacts{display:flex; flex-direction:column; gap:12px;}
.footer__row{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); font-size:15px; font-weight:600;}
.footer__row:hover{color:var(--blue);}
.footer__cic{flex:none; width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid var(--line); box-shadow:0 8px 20px -12px rgba(30,41,90,.4);}
.footer__rlabel{display:flex; flex-direction:column; gap:1px;}
.footer__rk{font-size:11.5px; font-weight:700; letter-spacing:.1em; color:#8a90a0;}
.footer__bottom{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:22px;}
.footer__copy{font-size:13.5px; color:var(--muted);}
.footer__legal{display:flex; gap:22px; flex-wrap:wrap;}
.footer__legal a{font-size:13.5px; color:var(--muted); text-decoration:none;}
.footer__legal a:hover{color:var(--blue);}

/* ---------------- Legal / Prosa-Seiten ---------------- */
.legal{max-width:840px;}
.legal h2{margin:38px 0 12px; font-size:clamp(20px,2.2vw,27px); font-weight:800; letter-spacing:-.015em;}
.legal h3{margin:26px 0 10px; font-size:clamp(16.5px,1.6vw,19px); font-weight:700;}
.legal h4{margin:20px 0 8px; font-size:15.5px; font-weight:700; color:#2a3040;}
.legal p{margin:0 0 14px; font-size:15.5px; line-height:1.72; color:#3a4050;}
.legal ul{margin:0 0 16px; padding-left:22px;}
.legal li{margin:0 0 8px; font-size:15.5px; line-height:1.65; color:#3a4050;}
.legal a{color:var(--blue); word-break:break-word;}
.legal strong{color:var(--ink);}
.legal .updated{margin-top:36px; font-size:13.5px; color:var(--muted); font-style:italic;}

/* ---------------- Artikel / Ratgeber ---------------- */
.article{max-width:768px; margin:0 auto;}
.author{display:inline-flex; align-items:center; gap:11px; margin:0 0 22px; font-size:14px; color:var(--muted);}
.author__av{flex:none; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13.5px; color:#fff; background:linear-gradient(140deg,var(--blue),#6d8bff);}

img.author__av{object-fit:cover; object-position:50% 30%; background:none; padding:0;}
.author strong{color:var(--ink); font-weight:700;}
.prose{max-width:768px; margin:0 auto;}
.prose h2{margin:44px 0 14px; font-size:clamp(21px,2.4vw,29px); font-weight:800; letter-spacing:-.018em; line-height:1.15;}
.prose h2 em{font-family:'Playfair Display',Georgia,serif; font-style:italic; font-weight:400; color:var(--blue);}
.prose h3{margin:30px 0 10px; font-size:clamp(17px,1.7vw,20px); font-weight:700; letter-spacing:-.01em;}
.prose p{margin:0 0 16px; font-size:16.5px; line-height:1.76; color:#33394a;}
.prose ul{margin:0 0 18px; padding-left:22px;}
.prose li{margin:0 0 9px; font-size:16px; line-height:1.68; color:#33394a;}
.prose strong{color:var(--ink);}
.prose a{color:var(--blue); word-break:break-word;}
.prose > :first-child{margin-top:0;}

/* Callout-Boxen (Merke / Nicht vergessen) */
.callout{position:relative; background:#fff; border:1px solid var(--line); border-left:4px solid var(--blue); border-radius:14px; padding:20px 24px; margin:26px 0; box-shadow:0 18px 46px -34px rgba(30,41,90,.3);}
.callout__k{display:block; font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--blue); margin:0 0 8px;}
.callout p{margin:0 0 10px; font-size:15.5px; line-height:1.7; color:#33394a;}
.callout p:last-child{margin-bottom:0;}
.callout ul{margin:0; padding-left:20px;}
.callout li{font-size:15px; line-height:1.6; color:#33394a; margin-bottom:6px;}
.callout--tip{border-left-color:var(--green);}
.callout--tip .callout__k{color:#16a34a;}
.callout--warn{border-left-color:var(--red);}
.callout--warn .callout__k{color:var(--red);}

/* ---------------- Responsive ---------------- */
@media (max-width:920px){
  .grid--3,.team,.tst{grid-template-columns:1fr 1fr;}
  .contact{grid-template-columns:1fr;}
  .footer__top{grid-template-columns:1fr; gap:28px;}
}
@media (max-width:820px){
  .steps,.cmp,.jobs,.grid--2{grid-template-columns:1fr;}
  .band{flex-direction:column; align-items:flex-start;}
}
@media (max-width:560px){
  .grid--3,.team,.tst{grid-template-columns:1fr;}
  .section,.hero{padding-left:22px; padding-right:22px;}
}