/* ==========================================================================
   Steuerbüro Ketelsen, Bredstedt
   Karriereseite, Design-System
   Farben und Schriften 1:1 aus der Kanzlei-CI (steuerberater-bredstedt.de)
   ========================================================================== */

:root{
  /* Marke */
  --brand:#a81816;          /* CI color_2, Logo-Rot */
  --brand-dark:#5c0d0c;     /* CI color_3, Bordeaux */
  --brand-night:#3a0908;    /* abgeleitet, für dunkle Bänder */

  /* Text und Flächen */
  --ink:#322f2f;            /* CI color_1 */
  --ink-soft:#5b5555;
  --muted:#77706f;
  --line:#e3dcdc;
  --line-strong:#cbc0c0;
  --paper:#f4efef;          /* CI color_5 */
  --paper-deep:#eae2e2;
  --bg:#ffffff;

  /* Typografie */
  --font-display:'PT Serif',Georgia,'Times New Roman',serif;
  --font-body:'PT Sans','Helvetica Neue',Helvetica,Arial,sans-serif;

  /* Maße */
  --max-w:1220px;
  --max-w-text:720px;
  --radius:2px;
  --gut:clamp(20px,5vw,48px);
  --section-y:clamp(64px,9vw,124px);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;max-width:100%}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.14;margin:0;letter-spacing:-.01em}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
ul{margin:0;padding:0;list-style:none}
figure{margin:0}
blockquote{margin:0}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--max-w);margin:0 auto;padding:0 var(--gut)}
.section{padding:var(--section-y) 0}
.section--paper{background:var(--paper)}
.section--tight{padding-top:clamp(44px,6vw,80px)}
.measure{max-width:var(--max-w-text)}

/* ---------- Klammer, das Logo-Motiv als Gestaltungselement ---------- */
.klammer{
  display:block;width:56px;height:12px;
  border:2px solid var(--brand);border-bottom:0;
  margin-bottom:20px;
}
.klammer--end{border:2px solid var(--brand);border-top:0;margin:24px 0 0}
.klammer--draw{animation:drawK .9s .15s cubic-bezier(.22,.61,.36,1) both}
@keyframes drawK{from{width:0;opacity:0}to{width:56px;opacity:1}}
.klammer--light{border-color:rgba(255,255,255,.55)}

.overline{
  font-family:var(--font-body);
  font-size:12.5px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--brand);margin:0 0 14px;
}
.overline--muted{color:var(--muted)}
.overline--light{color:rgba(255,255,255,.72)}

/* ---------- Typo-Skalen ---------- */
.h-xl{font-size:clamp(2.35rem,6.1vw,4.35rem)}
.h-lg{font-size:clamp(1.9rem,4.1vw,3rem)}
.h-md{font-size:clamp(1.45rem,2.5vw,2rem)}
.h-sm{font-size:clamp(1.15rem,1.7vw,1.35rem)}
.lead{font-size:clamp(1.06rem,1.55vw,1.24rem);line-height:1.62;color:var(--ink-soft)}
.small{font-size:14.5px;line-height:1.6;color:var(--muted)}
em.acc{font-style:italic;color:var(--brand-dark)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  padding:15px 30px;border:2px solid transparent;border-radius:var(--radius);
  font-size:15.5px;font-weight:700;letter-spacing:.02em;
  text-decoration:none;cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn--solid{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn--solid:hover{background:var(--brand-dark);border-color:var(--brand-dark)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn--ghost:hover{border-color:var(--ink);background:transparent}
.btn--on-dark{background:#fff;color:var(--brand-dark);border-color:#fff}
.btn--on-dark:hover{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn--ghost-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn--ghost-dark:hover{border-color:#fff}
.btn .arw{transition:transform .2s ease}
.btn:hover .arw{transform:translateX(3px)}

.txtlink{
  display:inline-flex;align-items:center;gap:.5em;
  font-weight:700;font-size:15.5px;color:var(--brand);
  text-decoration:none;border-bottom:1px solid rgba(168,24,22,.3);
  padding-bottom:2px;transition:border-color .2s ease,gap .2s ease;
}
.txtlink:hover{border-color:var(--brand);gap:.8em}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid var(--line);
}
.header-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:82px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;flex-shrink:0}
.brand img{width:132px;height:auto}
.brand-tag{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);font-weight:700;
  padding-left:14px;border-left:1px solid var(--line-strong);
}
.nav{display:flex;align-items:center;gap:30px}
.nav a{
  font-size:15px;font-weight:700;text-decoration:none;color:var(--ink);
  position:relative;padding:6px 0;
}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--brand);transition:right .25s ease;
}
.nav a:hover::after,.nav a[aria-current="page"]::after{right:0}
.header-cta{display:flex;align-items:center;gap:18px}
.header-phone{font-size:15px;font-weight:700;text-decoration:none;white-space:nowrap}
.header-phone:hover{color:var(--brand)}
.navtoggle{
  display:none;background:none;border:1px solid var(--line-strong);
  border-radius:var(--radius);padding:10px 12px;cursor:pointer;
}
.navtoggle span{display:block;width:20px;height:2px;background:var(--ink);margin:4px 0}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--bg);overflow:hidden;padding:clamp(48px,7vw,86px) 0 clamp(56px,7vw,96px)}
.hero::before{
  content:"";position:absolute;inset:0 0 0 auto;width:46%;
  background:var(--paper);z-index:0;
}
.hero-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(32px,5vw,72px);align-items:center;
}
.hero-copy{max-width:620px}
.hero h1{font-size:clamp(2.4rem,5.6vw,4.15rem);letter-spacing:-.022em}
.hero-sub{margin-top:26px;max-width:540px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero-note{margin-top:22px;font-size:14.5px;color:var(--muted)}
.hero-note strong{color:var(--ink)}

.hero-figure{position:relative;justify-self:end;width:100%;max-width:420px}
.hero-figure .frame{
  position:absolute;top:-18px;right:-18px;bottom:34px;left:26px;
  border:2px solid var(--brand);border-left:0;z-index:0;
}
.hero-figure img{
  position:relative;z-index:1;width:100%;aspect-ratio:4/5;object-fit:cover;
  object-position:50% 18%;filter:saturate(.96);
}
.hero-figure figcaption{
  position:relative;z-index:1;background:#fff;margin:-40px 0 0 -28px;
  padding:18px 22px;max-width:330px;border-left:3px solid var(--brand);
  font-size:14.5px;line-height:1.55;color:var(--ink-soft);
}
.hero-figure figcaption b{display:block;font-family:var(--font-display);font-size:16.5px;color:var(--ink);margin-bottom:3px}

/* ---------- Zahlen-Leiste ---------- */
.trust{background:var(--brand-dark);color:#fff}
.trust-grid{display:grid;grid-template-columns:repeat(5,1fr)}
.trust-item{padding:34px 26px;border-left:1px solid rgba(255,255,255,.16)}
.trust-item:first-child{border-left:0;padding-left:0}
.trust-num{font-family:var(--font-display);font-size:clamp(1.75rem,3vw,2.5rem);line-height:1;font-weight:700}
.trust-num span{font-size:.5em;font-weight:400;letter-spacing:.02em}
.trust-lab{margin-top:9px;font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.8)}

/* ---------- Section-Header ---------- */
.sec-head{max-width:760px;margin-bottom:clamp(36px,4.5vw,60px)}
.sec-head .lead{margin-top:18px}
.sec-head--split{
  max-width:none;display:grid;grid-template-columns:1fr .82fr;
  gap:clamp(24px,5vw,64px);align-items:end;
}

/* ---------- Persona-Wege ---------- */
.paths{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)}
.path{
  background:var(--bg);padding:clamp(28px,3.4vw,44px);
  display:flex;flex-direction:column;gap:14px;
  text-decoration:none;color:inherit;position:relative;
  transition:background .25s ease;
}
.path::after{
  content:"";position:absolute;left:0;top:0;width:3px;height:0;
  background:var(--brand);transition:height .3s ease;
}
.path:hover{background:var(--paper)}
.path:hover::after{height:100%}
.path-num{
  font-family:var(--font-display);font-size:14px;font-weight:700;
  color:var(--brand);letter-spacing:.08em;
}
.path h3{font-size:clamp(1.3rem,2vw,1.6rem)}
.path p{color:var(--ink-soft);font-size:16px}
.path .go{margin-top:auto;padding-top:8px;font-size:14.5px;font-weight:700;color:var(--brand)}
.path .go .arw{display:inline-block;transition:transform .2s ease}
.path:hover .go .arw{transform:translateX(4px)}

/* ---------- Werte, 3 Spalten ---------- */
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,3.6vw,52px)}
.col-item h3{font-size:1.28rem;margin-bottom:12px}
.col-item p{color:var(--ink-soft);font-size:16px}
.col-item .klammer{width:40px;height:9px}

/* ---------- Split-Sektion ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,76px);align-items:center}
.split--wide-l{grid-template-columns:1.12fr .88fr}
.split-fig{position:relative}
.split-fig img{width:100%;object-fit:cover}
.split-fig .frame{
  position:absolute;left:-16px;bottom:-16px;width:58%;height:64%;
  border:2px solid var(--brand);border-right:0;border-top:0;z-index:0;
}
.split-fig figcaption{margin-top:14px;font-size:13.5px;color:var(--muted)}

/* Zeitleiste Team */
.tenure{margin-top:30px;border-top:1px solid var(--line)}
.tenure li{
  display:grid;grid-template-columns:118px 1fr;gap:20px;
  padding:16px 0;border-bottom:1px solid var(--line);align-items:baseline;
}
.tenure .yrs{font-family:var(--font-display);font-weight:700;font-size:1.18rem;color:var(--brand-dark)}
.tenure .who{font-weight:700}
.tenure .what{display:block;font-size:15px;color:var(--muted);font-weight:400;margin-top:2px}

/* ---------- Aufgaben, Strichliste ---------- */
.dashlist li{position:relative;padding:9px 0 9px 30px;font-size:16.5px;color:var(--ink-soft)}
.dashlist li::before{
  content:"";position:absolute;left:0;top:calc(9px + .82em);
  width:16px;height:2px;background:var(--brand);
}

/* ---------- Benefits ---------- */
.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.benefit{background:var(--bg);padding:26px 28px}
.benefit h4{font-family:var(--font-display);font-size:1.08rem;font-weight:700;margin:0 0 6px}
.benefit p{font-size:15px;color:var(--muted);line-height:1.55}
.section--paper .benefit{background:var(--paper)}
.section--paper .benefits{background:var(--line-strong)}

/* ---------- Pullquote ---------- */
.quote{background:var(--brand-night);color:#fff;padding:clamp(56px,7vw,96px) 0}
.quote blockquote{
  margin:0;max-width:900px;
  font-family:var(--font-display);font-weight:400;font-style:italic;
  font-size:clamp(1.45rem,3.1vw,2.3rem);line-height:1.36;letter-spacing:-.01em;
}
.quote cite{
  display:block;margin-top:26px;font-style:normal;
  font-family:var(--font-body);font-size:14px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.62);
}

/* ---------- Stellen-Karte ---------- */
.job{
  display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(26px,4vw,56px);
  background:var(--bg);border:1px solid var(--line);border-top:3px solid var(--brand);
  padding:clamp(28px,3.6vw,48px);align-items:center;
}
.job h3{font-size:clamp(1.5rem,2.6vw,2.05rem)}
.tags{display:flex;flex-wrap:wrap;gap:9px}
.job .tags{margin:18px 0 20px}
.tag{
  font-size:13px;font-weight:700;letter-spacing:.03em;
  padding:6px 13px;background:var(--paper);color:var(--ink-soft);border-radius:var(--radius);
}
.section--paper .tag{background:#fff}
.job-side{display:flex;flex-direction:column;gap:12px;align-items:flex-start}

/* ---------- CTA-Band ---------- */
.cta{background:var(--brand-dark);color:#fff;padding:clamp(58px,7vw,100px) 0}
.cta-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,70px);align-items:center}
.cta h2{font-size:clamp(1.85rem,3.7vw,2.85rem)}
.cta p{color:rgba(255,255,255,.8);margin-top:16px;max-width:480px}
.cta-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.cta-card{border:1px solid rgba(255,255,255,.24);padding:30px 32px}
.cta-card .lab{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.cta-card a{
  display:block;font-family:var(--font-display);font-size:clamp(1.15rem,2vw,1.5rem);
  font-weight:700;text-decoration:none;margin:6px 0 20px;word-break:break-word;
}
.cta-card a:last-child{margin-bottom:0}
.cta-card a:hover{color:rgba(255,255,255,.75)}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:rgba(255,255,255,.72);padding:clamp(52px,6vw,76px) 0 34px;font-size:15px}
.foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:clamp(28px,4vw,60px)}
.site-footer img.logo{width:150px;filter:brightness(0) invert(1);opacity:.9}
.site-footer h4{
  font-family:var(--font-body);font-size:12px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5);margin:0 0 14px;
}
.site-footer a{color:rgba(255,255,255,.82);text-decoration:none}
.site-footer a:hover{color:#fff}
.foot-list li{margin-bottom:9px}
.foot-bottom{
  margin-top:clamp(36px,4vw,56px);padding-top:22px;
  border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;
  font-size:13.5px;color:rgba(255,255,255,.5);
}
.foot-bottom a{color:rgba(255,255,255,.6)}


/* ---------- Team-Karten ---------- */
.people{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,24px)}
.person{display:flex;flex-direction:column}
.person figcaption{display:flex;flex-direction:column;flex:1 1 auto}
.person img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%;filter:saturate(.96)}
.person .nm{display:block;font-family:var(--font-display);font-weight:700;font-size:1.06rem;margin:16px 0 2px}
.person .ro{display:block;font-size:14px;color:var(--muted);padding-bottom:12px}
.person .yr{
  display:block;margin-top:auto;padding-top:12px;border-top:1px solid var(--line);
  font-size:14px;font-weight:700;color:var(--brand-dark);
}
.person .yr span{display:block;font-weight:400;color:var(--muted);margin-top:2px}
.section--paper .person .yr{border-top-color:var(--line-strong)}

.person--open{
  background:var(--brand-dark);color:#fff;padding:22px 20px;
  justify-content:space-between;text-decoration:none;min-height:100%;
  transition:background .25s ease;
}
.person--open:hover{background:var(--brand)}
.person--open .nm{color:#fff;margin-top:0;font-size:1.24rem;line-height:1.24}
.person--open p{font-size:14.5px;color:rgba(255,255,255,.8);margin:12px 0 0}
.person--open .go{display:block;margin-top:24px;font-size:14.5px;font-weight:700}
.person--open .arw{display:inline-block;transition:transform .2s ease}
.person--open:hover .arw{transform:translateX(4px)}

/* ---------- kleines Zitat im Fließtext ---------- */
.miniquote{
  border-left:3px solid var(--brand);padding:4px 0 4px 20px;margin:26px 0 0;
  font-family:var(--font-display);font-style:italic;font-size:1.1rem;line-height:1.5;color:var(--ink);
}
.miniquote span{
  display:block;margin-top:8px;font-family:var(--font-body);font-style:normal;
  font-size:13px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
}
.cta .miniquote{border-left-color:rgba(255,255,255,.5);color:#fff}
.cta .miniquote span{color:rgba(255,255,255,.6)}

/* ---------- Stellen-Liste ---------- */
.joblist{border-top:1px solid var(--line)}
.joblist a{
  display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;
  padding:26px 0;border-bottom:1px solid var(--line);text-decoration:none;
  transition:padding-left .25s ease;
}
.joblist a:hover{padding-left:12px}
.joblist h3{font-size:clamp(1.25rem,2.1vw,1.65rem)}
.joblist .meta{margin-top:8px;font-size:15px;color:var(--muted)}
.joblist .arw{color:var(--brand);font-weight:700;font-size:1.2rem;transition:transform .2s ease}
.joblist a:hover .arw{transform:translateX(5px)}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,66px);align-items:start}

/* ---------- Reveal on scroll ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}

/* ==========================================================================
   Breakpoints
   ========================================================================== */
@media (max-width:1040px){
  .trust-grid{grid-template-columns:repeat(3,1fr)}
  .trust-item{border-top:1px solid rgba(255,255,255,.16)}
  .trust-item:nth-child(-n+3){border-top:0}
  .trust-item:nth-child(4){border-left:0;padding-left:0}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .nav,.header-phone{display:none}
  .navtoggle{display:block}
  .site-header.open .nav{
    display:flex;position:absolute;top:82px;left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:0;
    background:#fff;border-bottom:1px solid var(--line);padding:8px var(--gut) 20px;
  }
  .site-header.open .nav a{padding:13px 0;width:100%;border-bottom:1px solid var(--line)}
  .site-header.open .nav a::after{display:none}

  .hero::before{display:none}
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .hero-figure{justify-self:start;max-width:380px}
  .hero-figure .frame{left:auto;right:-14px;top:-14px;bottom:44px;width:70%}

  .sec-head--split{grid-template-columns:1fr;align-items:start}
  .paths{grid-template-columns:1fr}
  .cols3{grid-template-columns:1fr;gap:32px}
  .split{grid-template-columns:1fr;gap:36px}
  .duo{grid-template-columns:1fr;gap:34px}
  .split--rev .split-fig{order:-1}
  .benefits{grid-template-columns:repeat(2,1fr)}
  .people{grid-template-columns:repeat(2,1fr)}
  .job{grid-template-columns:1fr}
  .cta-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  body{font-size:16.5px}
  .trust-grid{grid-template-columns:repeat(2,1fr)}
  .trust-item{padding:26px 20px;border-left:1px solid rgba(255,255,255,.16)}
  .trust-item:nth-child(odd){border-left:0;padding-left:0}
  .trust-item:nth-child(-n+2){border-top:0}
  .trust-item:nth-child(n+3){border-top:1px solid rgba(255,255,255,.16)}
  .foot-grid{grid-template-columns:1fr;gap:34px}
  .hero-figure figcaption{margin-left:0;max-width:none}
  .person--open{grid-column:1/-1;flex-direction:row;align-items:flex-end;gap:24px}
  .person--open p{max-width:34ch}
  .person--open .go{margin-top:0;white-space:nowrap}
}
@media (max-width:460px){
  .benefits{grid-template-columns:1fr}
  .joblist a{grid-template-columns:1fr}
  .tenure li{grid-template-columns:1fr;gap:2px}
  .hero-actions .btn,.cta-actions .btn{width:100%;justify-content:center}
  .brand img{width:112px}
  .brand-tag{display:none}
  .hero-figure .frame{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
}