/* ============================================================
   Lars Weber GmbH – Trainings- und Weiterbildungsportal
   Corporate Identity Stylesheet
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,300;0,400;0,600;0,700;1,300;1,600&display=swap');

:root {
    --lw-gruen: #92C361;
    --lw-gruen-hell: #C9E0B3;
    --lw-blau: #002F41;
    --lw-blau-hell: #4C6E79;
    --lw-bg-warm: #F7F6F3;
    --lw-bg-blau: #E8EEF1;
    --lw-bg-gruen: #EFF6E8;
    --lw-text: #333333;
    --lw-muted: #6B7280;
    --lw-border: #D5D2CD;
    --lw-weiss: #FFFFFF;
    --lw-max-width: 1200px;
    --lw-nav-height: 80px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:var(--lw-nav-height); }
body { font-family:'Titillium Web',Calibri,Arial,sans-serif; font-weight:400; font-size:16px; line-height:1.7; color:var(--lw-text); background:var(--lw-weiss); -webkit-font-smoothing:antialiased; }
img { max-width:100%; height:auto; display:block; }
a { color:var(--lw-blau); text-decoration:none; transition:color .3s ease; }
a:hover { color:var(--lw-gruen); }

h1,h2,h3,h4 { font-weight:600; line-height:1.3; color:var(--lw-blau); }
h1 { font-size:clamp(28px,5vw,42px); margin-bottom:20px; }
h2 { font-size:clamp(24px,3.5vw,32px); margin-bottom:16px; }
h3 { font-size:clamp(18px,2.5vw,22px); margin-bottom:12px; }
h4 { font-size:18px; margin-bottom:8px; }
p { margin-bottom:16px; }

.container { max-width:var(--lw-max-width); margin:0 auto; padding:0 24px; }
.section { padding:80px 0; }
.section--warm { background:var(--lw-bg-warm); }
.section--blau { background:var(--lw-blau); color:var(--lw-weiss); }
.section--blau h2,.section--blau h3,.section--blau h4 { color:var(--lw-weiss); }
.section--blau-hell { background:var(--lw-bg-blau); }
.section--gruen-hell { background:var(--lw-bg-gruen); }
.divider { width:60px; height:3px; background:var(--lw-gruen); margin-bottom:24px; }

/* Buttons */
.btn { display:inline-block; padding:14px 32px; font-family:'Titillium Web',Calibri,Arial,sans-serif; font-weight:600; font-size:16px; border-radius:4px; cursor:pointer; transition:all .3s ease; border:2px solid transparent; text-align:center; }
.btn--primary { background:var(--lw-gruen); color:var(--lw-weiss); border-color:var(--lw-gruen); }
.btn--primary:hover { background:#7db34e; border-color:#7db34e; color:var(--lw-weiss); }
.btn--secondary { background:transparent; color:var(--lw-weiss); border-color:var(--lw-weiss); }
.btn--secondary:hover { background:var(--lw-weiss); color:var(--lw-blau); }
.btn--outline { background:transparent; color:var(--lw-blau); border-color:var(--lw-blau); }
.btn--outline:hover { background:var(--lw-blau); color:var(--lw-weiss); }
.btn-group { display:flex; gap:16px; flex-wrap:wrap; margin-top:24px; }

/* Navigation */
.nav { position:fixed; top:0; left:0; right:0; z-index:1000; height:var(--lw-nav-height); display:flex; align-items:center; background:var(--lw-weiss); border-bottom:1px solid var(--lw-border); transition:box-shadow .3s ease; }
.nav--scrolled { box-shadow:0 2px 16px rgba(0,47,65,.08); }
.nav__inner { max-width:var(--lw-max-width); margin:0 auto; padding:0 24px; width:100%; display:flex; align-items:center; justify-content:space-between; }
.nav__logo img { height:44px; width:auto; }
.nav__links { display:flex; gap:4px; list-style:none; align-items:center; }
.nav__links a { font-size:14px; font-weight:600; color:var(--lw-blau); padding:8px 10px; border-radius:4px; transition:all .3s ease; white-space:nowrap; }
.nav__links a:hover,.nav__links a.active { color:var(--lw-gruen); background:var(--lw-bg-gruen); }
.nav__links .nav__cta { background:var(--lw-gruen); color:var(--lw-weiss); }
.nav__links .nav__cta:hover { background:#7db34e; color:var(--lw-weiss); }
.nav__toggle { display:none; background:none; border:none; cursor:pointer; padding:8px; }
.nav__toggle span { display:block; width:24px; height:2px; background:var(--lw-blau); margin:6px 0; transition:all .3s ease; }

/* Breadcrumb */
.breadcrumb { padding:16px 0; font-size:13px; color:var(--lw-muted); }
.breadcrumb a { color:var(--lw-blau-hell); }
.breadcrumb a:hover { color:var(--lw-gruen); }
.breadcrumb span { margin:0 6px; color:var(--lw-border); }

/* Page Hero */
.page-hero { padding-top:calc(var(--lw-nav-height) + 48px); padding-bottom:56px; background:var(--lw-blau); color:var(--lw-weiss); position:relative; overflow:hidden; }
.page-hero::before { content:''; position:absolute; top:-100px; right:-200px; width:500px; height:500px; background:radial-gradient(circle,rgba(146,195,97,.08) 0%,transparent 70%); pointer-events:none; }
.page-hero h1 { color:var(--lw-weiss); max-width:800px; }
.page-hero__sub { font-size:clamp(16px,2vw,18px); font-weight:300; line-height:1.6; color:rgba(255,255,255,.8); max-width:680px; }
.page-hero__badge { display:inline-block; font-size:12px; font-weight:600; letter-spacing:.05em; color:var(--lw-gruen); margin-bottom:20px; padding:5px 14px; border:1px solid rgba(146,195,97,.3); border-radius:4px; }

/* Content Layout */
.content-grid { display:grid; grid-template-columns:280px 1fr; gap:48px; align-items:start; }
.sidebar { position:sticky; top:calc(var(--lw-nav-height) + 24px); }
.sidebar__nav { list-style:none; }
.sidebar__nav li { margin-bottom:2px; }
.sidebar__nav a { display:block; padding:10px 16px; font-size:14px; color:var(--lw-blau-hell); border-left:3px solid transparent; border-radius:0 4px 4px 0; transition:all .2s ease; }
.sidebar__nav a:hover { color:var(--lw-blau); background:var(--lw-bg-warm); border-left-color:var(--lw-border); }
.sidebar__nav a.active { color:var(--lw-blau); background:var(--lw-bg-gruen); border-left-color:var(--lw-gruen); font-weight:600; }
.main-content h2 { margin-top:40px; }
.main-content h2:first-child { margin-top:0; }
.main-content h3 { margin-top:32px; color:var(--lw-blau-hell); }

/* Two Column */
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }

/* Cards */
.card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; margin-top:32px; }
.card { background:var(--lw-weiss); border:1px solid var(--lw-border); border-radius:6px; padding:28px 24px; transition:all .3s ease; }
.card:hover { border-color:var(--lw-gruen); box-shadow:0 4px 20px rgba(0,47,65,.06); }
.card h3 { font-size:17px; }
.card p { font-size:14px; color:var(--lw-muted); margin-bottom:12px; }
.card--highlight { border-color:var(--lw-gruen); border-width:2px; }
.card__link { font-size:14px; font-weight:600; color:var(--lw-gruen); }

/* Feature List */
.feature-list { list-style:none; margin:24px 0; }
.feature-list li { padding:10px 0 10px 32px; position:relative; border-bottom:1px solid var(--lw-border); font-size:15px; }
.feature-list li:last-child { border-bottom:none; }
.feature-list li::before { content:''; position:absolute; left:0; top:16px; width:16px; height:2px; background:var(--lw-gruen); }

/* Leitsatz Tags */
.leitsatz-grid { display:flex; flex-wrap:wrap; gap:10px; margin:24px 0; }
.leitsatz { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; background:var(--lw-bg-gruen); border-radius:4px; font-size:14px; font-weight:600; color:var(--lw-blau); }
.leitsatz__alt { font-weight:300; color:var(--lw-blau-hell); }

/* Teaser Tags */
.teaser-tags { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }
.teaser-tag { padding:6px 14px; background:var(--lw-bg-gruen); border-radius:4px; font-size:13px; font-weight:600; color:var(--lw-blau); }

/* External Link */
.ext-link { display:inline-flex; align-items:center; gap:4px; font-weight:600; font-size:inherit; color:var(--lw-gruen); }
.ext-link:hover { color:#7db34e; }
.ext-link svg { width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2.5; }

/* CTA Block */
.cta-block { background:var(--lw-blau); color:var(--lw-weiss); padding:56px 0; text-align:center; }
.cta-block h2 { color:var(--lw-weiss); }
.cta-block p { color:rgba(255,255,255,.8); max-width:560px; margin:0 auto 24px; }
.cta-block .divider { margin:0 auto 24px; }

/* Contact Info */
.contact-row { display:flex; gap:32px; justify-content:center; flex-wrap:wrap; margin-top:24px; font-size:15px; }
.contact-row a { color:var(--lw-weiss); font-weight:600; }
.contact-row a:hover { color:var(--lw-gruen); }

/* Related Pages */
.related { margin-top:48px; padding-top:32px; border-top:1px solid var(--lw-border); }
.related h3 { font-size:16px; color:var(--lw-blau-hell); margin-bottom:16px; }
.related-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; }
.related-link { display:block; padding:16px 20px; background:var(--lw-bg-warm); border-radius:4px; font-size:14px; font-weight:600; color:var(--lw-blau); transition:all .2s ease; }
.related-link:hover { background:var(--lw-bg-gruen); color:var(--lw-gruen); }

/* Info Box */
.info-box { background:var(--lw-bg-blau); border-left:4px solid var(--lw-blau-hell); padding:24px 28px; border-radius:0 6px 6px 0; margin:24px 0; }
.info-box p { margin-bottom:0; font-size:15px; }
.info-box strong { color:var(--lw-blau); }

/* Trust Grid */
.trust-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:24px; margin-top:32px; }
.trust-item { text-align:center; padding:24px 16px; }
.trust-item__number { font-size:36px; font-weight:700; color:var(--lw-gruen); line-height:1; margin-bottom:6px; }
.trust-item__label { font-size:14px; font-weight:600; color:var(--lw-blau); }

/* Themen Links */
.themen-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin-top:24px; }
.themen-link { display:flex; align-items:center; gap:12px; padding:16px 20px; background:var(--lw-weiss); border:1px solid var(--lw-border); border-radius:6px; transition:all .3s ease; font-weight:600; font-size:14px; color:var(--lw-blau); }
.themen-link:hover { border-color:var(--lw-gruen); color:var(--lw-blau); }

/* Footer */
.footer { background:var(--lw-blau); color:rgba(255,255,255,.7); padding:56px 0 28px; font-size:14px; }
.footer__grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px; }
.footer__brand img { height:36px; margin-bottom:12px; }
.footer__brand p { font-size:13px; line-height:1.6; margin-bottom:12px; }
.footer__motto { font-weight:600; font-style:italic; color:var(--lw-gruen); font-size:13px; }
.footer h4 { color:var(--lw-weiss); font-size:13px; font-weight:600; margin-bottom:12px; letter-spacing:.02em; text-transform:uppercase; }
.footer__links { list-style:none; }
.footer__links li { margin-bottom:6px; }
.footer__links a { color:rgba(255,255,255,.6); font-size:13px; }
.footer__links a:hover { color:var(--lw-gruen); }
.footer__bottom { border-top:1px solid rgba(255,255,255,.1); padding-top:20px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:11px; }
.footer__legal { display:flex; gap:20px; }
.footer__legal a { color:rgba(255,255,255,.5); }
.footer__legal a:hover { color:var(--lw-gruen); }

/* Hero (Landing Page) */
.hero { padding-top:calc(var(--lw-nav-height) + 80px); padding-bottom:80px; background:var(--lw-blau); color:var(--lw-weiss); position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; top:-100px; right:-200px; width:600px; height:600px; background:radial-gradient(circle,rgba(146,195,97,.08) 0%,transparent 70%); pointer-events:none; }
.hero__content { position:relative; z-index:1; max-width:800px; }
.hero__badge { display:inline-block; font-size:13px; font-weight:600; letter-spacing:.05em; color:var(--lw-gruen); margin-bottom:24px; padding:6px 16px; border:1px solid rgba(146,195,97,.3); border-radius:4px; }
.hero h1 { color:var(--lw-weiss); margin-bottom:24px; }
.hero__sub { font-size:clamp(17px,2vw,19px); font-weight:300; line-height:1.6; color:rgba(255,255,255,.85); margin-bottom:8px; max-width:680px; }

/* Hub Section */
.hub { background:linear-gradient(135deg,var(--lw-blau) 0%,#003d56 100%); color:var(--lw-weiss); padding:80px 0; }
.hub h2 { color:var(--lw-weiss); }
.hub h3 { color:var(--lw-gruen); }
.hub p { color:rgba(255,255,255,.85); }
.hub .leitsatz { background:rgba(146,195,97,.15); color:var(--lw-weiss); border:1px solid rgba(146,195,97,.3); }
.hub .leitsatz__alt { color:rgba(255,255,255,.5); }
.hub .ext-link { color:var(--lw-gruen-hell); }
.hub .ext-link:hover { color:var(--lw-gruen); }
.hub-aspects { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin-top:36px; }
.hub-aspect { padding:20px 24px; background:rgba(255,255,255,.06); border-left:3px solid var(--lw-gruen); border-radius:0 4px 4px 0; font-size:15px; color:rgba(255,255,255,.9); }

/* Card Highlight */
.card--highlight::before { content:'Kernbereich'; position:absolute; top:-12px; left:24px; background:var(--lw-gruen); color:var(--lw-weiss); font-size:12px; font-weight:600; padding:2px 12px; border-radius:3px; }
.card--highlight { position:relative; }
.card__icon { width:48px; height:48px; background:var(--lw-bg-gruen); border-radius:8px; display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.card__icon svg { width:24px; height:24px; stroke:var(--lw-gruen); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* Contact Block */
.contact-block { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.contact-info { font-size:15px; }
.contact-info__item { display:flex; align-items:center; gap:16px; padding:16px 0; border-bottom:1px solid rgba(255,255,255,.1); }
.contact-info__item:last-child { border-bottom:none; }
.contact-info__icon { flex-shrink:0; width:44px; height:44px; border-radius:8px; background:rgba(146,195,97,.15); display:flex; align-items:center; justify-content:center; }
.contact-info__icon svg { width:20px; height:20px; stroke:var(--lw-gruen); fill:none; stroke-width:2; }
.contact-info__label { font-size:13px; color:rgba(255,255,255,.5); font-weight:600; }
.contact-info__value { color:var(--lw-weiss); font-weight:600; }
.contact-info__value a { color:var(--lw-weiss); }
.contact-info__value a:hover { color:var(--lw-gruen); }

@media(max-width:1024px) { .contact-block { grid-template-columns:1fr; gap:40px; } }
@media(max-width:640px) { .hero { padding-top:calc(var(--lw-nav-height) + 48px); padding-bottom:56px; } .hub-aspects { grid-template-columns:1fr; } }

/* Reveal */
.reveal { opacity:0; transform:translateY(20px); transition:opacity .6s ease,transform .6s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* Responsive */
@media(max-width:1024px) {
    .nav__links { display:none; position:fixed; top:var(--lw-nav-height); left:0; right:0; bottom:0; background:var(--lw-weiss); flex-direction:column; padding:24px; gap:4px; overflow-y:auto; border-top:1px solid var(--lw-border); }
    .nav__links.open { display:flex; }
    .nav__toggle { display:block; }
    .content-grid { grid-template-columns:1fr; }
    .sidebar { position:static; }
    .two-col { grid-template-columns:1fr; gap:32px; }
    .footer__grid { grid-template-columns:1fr 1fr; gap:24px; }
}
@media(max-width:640px) {
    .section { padding:48px 0; }
    .page-hero { padding-top:calc(var(--lw-nav-height) + 32px); padding-bottom:40px; }
    .card-grid { grid-template-columns:1fr; }
    .footer__grid { grid-template-columns:1fr; }
    .footer__bottom { flex-direction:column; text-align:center; }
    .btn-group { flex-direction:column; }
    .btn { width:100%; }
    .related-grid { grid-template-columns:1fr; }
}

/* Long nav labels */
@media(min-width:1025px) {
    .nav__links a { font-size:13px; padding:8px 8px; }
}
@media(min-width:1200px) {
    .nav__links a { font-size:13.5px; padding:8px 10px; }
}