@charset "UTF-8";
:root{--green:#00F060;--green-dark:#00CB4F;--ink:#101820;--muted:#58616b;--line:#e7ebed;--white:#fff;--max:1380px}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:Inter,"Segoe UI",Arial,sans-serif;font-size:16px;line-height:1.55;background:#fff}
a{color:inherit;text-decoration:none}
button{font:inherit}
.wrap{width:min(var(--max),calc(100% - 72px));margin-inline:auto}
a:focus-visible,button:focus-visible{outline:3px solid var(--green-dark);outline-offset:3px}

/* Kopfbereich */
.site-header{background:#fff;position:relative;z-index:10;border-bottom:1px solid var(--line)}
.header-inner{min-height:90px;display:flex;justify-content:space-between;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:22px;white-space:nowrap}
.brand-symbol{font-size:38px;line-height:1;letter-spacing:-4px;font-weight:900;padding-right:22px}
.brand-dot{color:var(--green-dark)}
.brand-logo{display:inline-flex;align-items:center;gap:16px;text-decoration:none;color:var(--ink);flex-shrink:0;min-width:0;border:0;padding:0;margin:0}
.brand-logo img,.brand-logo .brand-image{display:block;width:92px;height:auto;flex-shrink:0;border:0;padding:0}
.brand-copy{display:flex;flex-direction:column;line-height:1.25}
.brand-logo .brand-copy{border-left:2px solid var(--green);padding-left:18px}
.brand-copy strong{font-size:23px;letter-spacing:-.8px}
.brand-copy small{font-size:12px;color:#3b4650;margin-top:5px}
.nav{display:flex;align-items:center;gap:5px}
.nav a{font-weight:650;font-size:14px;padding:11px 15px;border-radius:9px;white-space:nowrap;transition:background .18s}
.nav a:hover{background:#f0f8f2}
.nav a.current{background:var(--green);color:#082016}
.nav .language{border-left:1px solid #ccd2d5;border-radius:0;margin-left:10px;padding-left:23px}
.menu-toggle{display:none;border:1px solid #dbe2e1;border-radius:8px;background:#fff;padding:8px 12px}

/* Hero */
.hero{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(120deg,#071d22 0%,#11242a 52%,#14362d 100%);color:white;min-height:435px}
/* Weicher Uebergang vom dunklen linken Textbereich zum helleren Foto rechts. */
.hero-photo{
  position:absolute;
  inset:0 0 0 22%;
  background:url('../images/hero-finance-it-ohne-sap.webp') center center / cover no-repeat;
  z-index:-2;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.16) 22%, rgba(0,0,0,.65) 48%, #000 78%);
  mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.16) 22%, rgba(0,0,0,.65) 48%, #000 78%);
}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(5,22,27,.98) 0%,rgba(5,22,27,.94) 37%,rgba(5,22,27,.68) 53%,rgba(5,22,27,.04) 78%)}
.hero::after{content:"";position:absolute;left:0;bottom:0;width:35%;height:5px;background:var(--green)}
.hero-inner{min-height:435px;display:flex;align-items:center}
.hero-copy{padding:57px 0 60px;max-width:770px}
.eyebrow,.section-kicker{font-size:14px;letter-spacing:.13em;font-weight:800;color:var(--green-dark);margin:0 0 8px}
.eyebrow span{padding:0 5px}
.hero h1{font-size:clamp(44px,5.1vw,76px);letter-spacing:-.055em;line-height:1.08;margin:0 0 8px}
.hero-subline{font-size:clamp(17px,1.6vw,22px);margin:0 0 18px}
.accent-rule{width:65px;height:5px;background:var(--green);display:block;margin:18px 0}
.hero-description{max-width:630px;font-size:18px;line-height:1.53;margin:0 0 26px}
.actions{display:flex;gap:13px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:17px;font-weight:760;font-size:15px;min-height:49px;padding:11px 23px;border-radius:10px;transition:transform .16s,background .16s}
.btn:hover{transform:translateY(-2px)}
.btn-green{background:var(--green);color:#062015}
.btn-green:hover{background:#43ff86}
.btn-outline{border:1px solid #fff;color:#fff;background:rgba(0,0,0,.13)}
.btn-outline:hover{background:rgba(255,255,255,.14)}

/* Kompetenzkarten */
.expertise{padding-block:29px 31px}
.expertise-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px}
.expertise-card{display:flex;gap:14px;align-items:flex-start;padding:20px 18px 25px;min-height:137px;border-radius:16px;background:#fff;border:1px solid #edf0f0;box-shadow:0 6px 23px rgba(13,22,28,.09);position:relative}
.expertise-card::after{content:"";height:4px;position:absolute;bottom:10px;left:15px;right:15px;border-radius:5px;background:var(--green)}
.card-icon{background:var(--green);color:#063118;display:flex;align-items:center;justify-content:center;flex:0 0 56px;height:56px;border-radius:13px;font-weight:800;font-size:25px;letter-spacing:-2px}
.card-icon svg{width:30px;height:30px;stroke:currentColor;stroke-width:2;display:block}
.expertise-card h2{font-size:16px;line-height:1.25;letter-spacing:-.4px;margin:1px 0 6px}
.expertise-card p{font-size:13px;line-height:1.45;margin:0;color:#35414a}

/* Über mich */
.about{padding-block:28px 55px;display:grid;grid-template-columns:250px minmax(260px,1fr) minmax(280px,.94fr);gap:36px;align-items:start}
.portrait-placeholder{min-height:286px;background:linear-gradient(135deg,#e4ede9,#a6bdb2);border-radius:18px;border-left:7px solid var(--green);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;overflow:hidden}
.portrait-placeholder>span{font-size:85px;font-weight:900;letter-spacing:-9px;color:#133b30}
.portrait-placeholder>span span{color:var(--green-dark)}
.portrait-placeholder small{font-size:13px;color:#29483f}
.about-copy h2{font-size:36px;line-height:1.1;letter-spacing:-.04em;margin:0}
.about-copy .accent-rule{margin:15px 0 18px}
.about-copy p:not(.section-kicker){font-size:15px;line-height:1.7;margin:0 0 13px}
.text-link{font-weight:750;text-decoration:underline;text-decoration-color:var(--green-dark);text-decoration-thickness:3px;text-underline-offset:5px}
.facts{border-left:1px solid #d9dede;padding-left:32px}
.fact{display:flex;gap:17px;padding:8px 0 20px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.fact:last-child{border:0;margin-bottom:0}
.fact-icon{color:var(--green-dark);font-weight:800;font-size:31px;line-height:1;min-width:42px}
.fact h3{font-size:16px;margin:0 0 3px}
.fact p{font-size:14px;line-height:1.5;color:#48535e;margin:0}

/* Kontakt und Fußzeile */
.contact-band{background:#101b21;border-top:5px solid var(--green);color:#fff;padding:37px 0}
.contact-inner{display:flex;align-items:center;justify-content:space-between;gap:25px}
.contact-inner h2{font-size:30px;margin:0}
.contact-inner p:not(.section-kicker){color:#bdcacb;margin:5px 0 0}
.site-footer{background:#fff}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:15px;padding-block:23px;font-size:13px;color:#52606b}
.footer-inner>div{display:flex;flex-wrap:wrap;gap:20px}
.footer-inner a:hover{color:#008f3a}

/* Responsive Darstellung */
@media(max-width:1160px){
  .brand-copy small{display:none}
  .nav a{padding:10px 9px}
  .expertise-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .about{grid-template-columns:215px 1fr;gap:24px}
  .facts{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);padding:18px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
  .fact{border:0;padding-bottom:5px}
}
@media(max-width:760px){
  .wrap{width:min(var(--max),calc(100% - 36px))}
  .header-inner{min-height:74px;flex-wrap:wrap}
  .brand-symbol{font-size:32px;padding-right:15px}
  .brand-logo img,.brand-logo .brand-image{width:70px}
  .brand-copy strong{font-size:18px}
  .menu-toggle{display:block}
  .nav{display:none;flex-basis:100%;flex-direction:column;align-items:stretch;padding-bottom:15px}
  .nav.nav-open{display:flex}
  .nav a{padding:12px}
  .nav .language{margin:0;border:0;padding-left:12px}
  .hero{min-height:auto}
  .hero-photo{inset:0;opacity:.45;-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 70%);mask-image:linear-gradient(to right,transparent 0%,#000 70%)}
  .hero::before{background:linear-gradient(90deg,rgba(5,22,27,.97),rgba(5,22,27,.8))}
  .hero-inner{min-height:400px}
  .hero-copy{padding:55px 0}
  .hero-description{font-size:16px}
  .expertise-grid{grid-template-columns:1fr}
  .about{grid-template-columns:1fr;padding-block:15px 40px}
  .portrait-placeholder{min-height:170px}
  .facts{grid-column:auto;grid-template-columns:1fr}
  .contact-inner{align-items:flex-start;flex-direction:column}
  .contact-inner h2{font-size:25px}
  .footer-inner{align-items:flex-start;flex-direction:column}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}