/* Werkinzicht.eu — Style Sheet */
/* Prefix: wiz- */

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;600;700;800&family=Work+Sans:wght@300;400;500;600&display=swap');

/* === RESET === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
ul,ol{list-style:none}
button{border:none;background:none;cursor:pointer;font:inherit}

/* === VARIABLES === */
:root{
  --wiz-primary:#00897B;
  --wiz-primary-dark:#00695C;
  --wiz-secondary:#455A64;
  --wiz-accent:#FF6F61;
  --wiz-accent-dark:#E65749;
  --wiz-bg:#F8FAFA;
  --wiz-surface:#FFFFFF;
  --wiz-text:#263238;
  --wiz-text-light:#607D8B;
  --wiz-border:#CFD8DC;
  --wiz-heading:'Raleway',sans-serif;
  --wiz-body:'Work Sans',sans-serif;
  --wiz-max-w:1180px;
  --wiz-radius:4px;
  --wiz-shadow:0 2px 8px rgba(38,50,56,.08);
  --wiz-shadow-hover:0 6px 20px rgba(38,50,56,.12);
  --wiz-transition:220ms ease;
}

/* === BASE === */
body{
  font-family:var(--wiz-body);
  font-size:16px;
  line-height:1.65;
  color:var(--wiz-text);
  background:var(--wiz-bg);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--wiz-heading);
  font-weight:700;
  line-height:1.25;
  color:var(--wiz-text);
}
h1{font-size:2.25rem;font-weight:800}
h2{font-size:1.75rem}
h3{font-size:1.35rem}
h4{font-size:1.1rem;font-weight:600}
p{margin-bottom:1rem}
strong{font-weight:600}

/* === CONTAINER === */
.wiz-container{
  width:100%;
  max-width:var(--wiz-max-w);
  margin:0 auto;
  padding:0 24px;
}

/* === HEADER === */
.wiz-header{
  position:sticky;
  top:0;
  z-index:100;
  background:var(--wiz-surface);
  border-bottom:1px solid var(--wiz-border);
  box-shadow:0 1px 4px rgba(38,50,56,.06);
}
.wiz-header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:64px;
}
.wiz-logo{display:flex;align-items:center;gap:8px}
.wiz-logo img{height:36px;width:auto}
.wiz-nav{display:flex;align-items:center;gap:28px}
.wiz-nav a{
  font-family:var(--wiz-heading);
  font-size:.9rem;
  font-weight:600;
  color:var(--wiz-secondary);
  transition:color var(--wiz-transition);
  position:relative;
}
.wiz-nav a::after{
  content:'';
  position:absolute;
  bottom:-4px;
  left:0;
  width:0;
  height:2px;
  background:var(--wiz-primary);
  transition:width var(--wiz-transition);
}
.wiz-nav a:hover{color:var(--wiz-primary)}
.wiz-nav a:hover::after{width:100%}

/* Hamburger */
.wiz-hamburger{
  display:none;
  flex-direction:column;
  gap:5px;
  padding:8px;
}
.wiz-hamburger span{
  display:block;
  width:24px;
  height:2px;
  background:var(--wiz-secondary);
  transition:var(--wiz-transition);
}
.wiz-hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.wiz-hamburger.active span:nth-child(2){opacity:0}
.wiz-hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* === HERO === */
.wiz-hero{
  position:relative;
  background:linear-gradient(135deg,var(--wiz-primary) 0%,var(--wiz-secondary) 100%);
  color:#fff;
  padding:80px 0 72px;
  overflow:hidden;
}
.wiz-hero::before{
  content:'';
  position:absolute;
  top:-50%;right:-20%;
  width:600px;height:600px;
  background:rgba(255,255,255,.04);
  border-radius:50%;
}
.wiz-hero h1{color:#fff;font-size:2.75rem;margin-bottom:16px}
.wiz-hero p{
  font-size:1.15rem;
  max-width:620px;
  opacity:.92;
  line-height:1.7;
  margin-bottom:28px;
}
.wiz-hero-content{position:relative;z-index:1}

/* === BUTTONS === */
.wiz-btn{
  display:inline-block;
  font-family:var(--wiz-heading);
  font-weight:600;
  font-size:.9rem;
  padding:12px 28px;
  border-radius:var(--wiz-radius);
  transition:all var(--wiz-transition);
  text-align:center;
}
.wiz-btn-primary{
  background:var(--wiz-accent);
  color:#fff;
}
.wiz-btn-primary:hover{
  background:var(--wiz-accent-dark);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(255,111,97,.3);
}
.wiz-btn-outline{
  border:2px solid #fff;
  color:#fff;
}
.wiz-btn-outline:hover{
  background:#fff;
  color:var(--wiz-primary);
}

/* === SECTION === */
.wiz-section{
  padding:64px 0;
}
.wiz-section-title{
  text-align:center;
  margin-bottom:12px;
}
.wiz-section-subtitle{
  text-align:center;
  color:var(--wiz-text-light);
  max-width:600px;
  margin:0 auto 48px;
}

/* === CARD GRID === */
.wiz-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
.wiz-card{
  background:var(--wiz-surface);
  border-radius:var(--wiz-radius);
  box-shadow:var(--wiz-shadow);
  overflow:hidden;
  transition:box-shadow var(--wiz-transition),transform var(--wiz-transition);
}
.wiz-card:hover{
  box-shadow:var(--wiz-shadow-hover);
  transform:translateY(-3px);
}
.wiz-card-img{
  width:100%;
  height:200px;
  object-fit:cover;
}
.wiz-card-body{
  padding:24px;
}
.wiz-card-meta{
  font-size:.8rem;
  color:var(--wiz-text-light);
  margin-bottom:8px;
  display:flex;
  align-items:center;
  gap:12px;
}
.wiz-card-body h3{
  margin-bottom:10px;
  font-size:1.15rem;
}
.wiz-card-body h3 a{
  color:var(--wiz-text);
  transition:color var(--wiz-transition);
}
.wiz-card-body h3 a:hover{
  color:var(--wiz-primary);
}
.wiz-card-body p{
  font-size:.92rem;
  color:var(--wiz-text-light);
  line-height:1.6;
  margin-bottom:16px;
}
.wiz-card-link{
  font-family:var(--wiz-heading);
  font-weight:600;
  font-size:.85rem;
  color:var(--wiz-primary);
  transition:color var(--wiz-transition);
}
.wiz-card-link:hover{color:var(--wiz-primary-dark)}
.wiz-card-link::after{content:' →'}

/* === STATS BAR === */
.wiz-stats{
  background:var(--wiz-secondary);
  padding:40px 0;
}
.wiz-stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  text-align:center;
  color:#fff;
}
.wiz-stat-number{
  font-family:var(--wiz-heading);
  font-size:2.2rem;
  font-weight:800;
  color:var(--wiz-accent);
  display:block;
}
.wiz-stat-label{
  font-size:.85rem;
  opacity:.85;
  margin-top:4px;
}

/* === CTA SECTION === */
.wiz-cta{
  background:linear-gradient(135deg,var(--wiz-primary) 0%,#26A69A 100%);
  padding:56px 0;
  text-align:center;
  color:#fff;
}
.wiz-cta h2{color:#fff;margin-bottom:16px}
.wiz-cta p{opacity:.9;max-width:520px;margin:0 auto 28px}

/* === FOOTER === */
.wiz-footer{
  background:var(--wiz-text);
  color:rgba(255,255,255,.75);
  padding:56px 0 0;
  font-size:.9rem;
}
.wiz-footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:36px;
  margin-bottom:40px;
}
.wiz-footer h4{
  color:#fff;
  font-size:1rem;
  margin-bottom:16px;
}
.wiz-footer-brand p{
  font-size:.85rem;
  line-height:1.65;
  opacity:.8;
}
.wiz-footer-links a{
  display:block;
  padding:4px 0;
  color:rgba(255,255,255,.7);
  transition:color var(--wiz-transition);
  font-size:.88rem;
}
.wiz-footer-links a:hover{color:var(--wiz-accent)}
.wiz-footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  padding:20px 0;
  text-align:center;
  font-size:.8rem;
  opacity:.6;
}

/* === ARTICLE PAGE === */
.wiz-article-hero{
  background:linear-gradient(135deg,var(--wiz-primary) 0%,var(--wiz-secondary) 100%);
  color:#fff;
  padding:56px 0 48px;
}
.wiz-article-hero h1{color:#fff;font-size:2.25rem;max-width:800px}
.wiz-breadcrumb{
  font-size:.82rem;
  margin-bottom:16px;
  opacity:.8;
}
.wiz-breadcrumb a{color:rgba(255,255,255,.85);text-decoration:underline}
.wiz-breadcrumb a:hover{color:#fff}
.wiz-article-meta{
  font-size:.88rem;
  margin-top:16px;
  opacity:.85;
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}

.wiz-article-content{
  max-width:780px;
  margin:0 auto;
  padding:48px 24px 64px;
}
.wiz-article-content h2{
  margin:40px 0 16px;
  padding-top:16px;
}
.wiz-article-content h3{
  margin:28px 0 12px;
}
.wiz-article-content p{
  line-height:1.75;
  margin-bottom:1.15rem;
}
.wiz-article-content ul,
.wiz-article-content ol{
  margin:0 0 1.15rem 24px;
}
.wiz-article-content ul{list-style:disc}
.wiz-article-content ol{list-style:decimal}
.wiz-article-content li{
  margin-bottom:.5rem;
  line-height:1.65;
}
.wiz-article-content blockquote{
  border-left:3px solid var(--wiz-primary);
  padding:16px 20px;
  margin:24px 0;
  background:rgba(0,137,123,.04);
  font-style:italic;
  color:var(--wiz-secondary);
}
.wiz-article-img{
  width:100%;
  border-radius:var(--wiz-radius);
  margin:32px 0;
  box-shadow:var(--wiz-shadow);
}

/* Author box */
.wiz-author-box{
  display:flex;
  gap:20px;
  align-items:center;
  padding:24px;
  background:var(--wiz-bg);
  border-radius:var(--wiz-radius);
  margin-top:48px;
  border:1px solid var(--wiz-border);
}
.wiz-author-avatar{
  width:72px;
  height:72px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
}
.wiz-author-name{
  font-family:var(--wiz-heading);
  font-weight:700;
  font-size:1rem;
  margin-bottom:4px;
}
.wiz-author-role{
  font-size:.82rem;
  color:var(--wiz-text-light);
  margin-bottom:6px;
}
.wiz-author-bio{
  font-size:.88rem;
  color:var(--wiz-secondary);
  line-height:1.55;
  margin-bottom:0;
}

/* FAQ */
.wiz-faq{
  margin-top:48px;
}
.wiz-faq h2{margin-bottom:24px}
.wiz-faq-item{
  border-bottom:1px solid var(--wiz-border);
  padding:18px 0;
}
.wiz-faq-q{
  font-family:var(--wiz-heading);
  font-weight:600;
  font-size:1rem;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:var(--wiz-text);
}
.wiz-faq-q::after{
  content:'+';
  font-size:1.4rem;
  color:var(--wiz-primary);
  transition:transform var(--wiz-transition);
}
.wiz-faq-item.active .wiz-faq-q::after{
  content:'−';
}
.wiz-faq-a{
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease;
  color:var(--wiz-text-light);
  font-size:.92rem;
  line-height:1.65;
}
.wiz-faq-item.active .wiz-faq-a{
  max-height:500px;
  padding-top:12px;
}

/* Related articles */
.wiz-related{
  padding:56px 0;
  background:var(--wiz-bg);
}
.wiz-related h2{text-align:center;margin-bottom:36px}

/* === LEGAL PAGES === */
.wiz-legal{
  max-width:780px;
  margin:0 auto;
  padding:48px 24px 64px;
}
.wiz-legal h1{margin-bottom:8px}
.wiz-legal .wiz-legal-date{
  color:var(--wiz-text-light);
  font-size:.88rem;
  margin-bottom:32px;
}
.wiz-legal h2{margin:32px 0 12px}
.wiz-legal p{line-height:1.75}
.wiz-legal ul{margin:0 0 1rem 24px;list-style:disc}
.wiz-legal li{margin-bottom:.4rem;line-height:1.6}

/* === 404 PAGE === */
.wiz-404{
  text-align:center;
  padding:100px 24px;
  min-height:60vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.wiz-404 h1{font-size:5rem;color:var(--wiz-primary);margin-bottom:8px}
.wiz-404 p{color:var(--wiz-text-light);font-size:1.1rem;margin-bottom:28px}

/* === SCROLL ANIMATION === */
.wiz-slide-in{
  opacity:0;
  transform:translateX(-30px);
  transition:opacity .5s ease,transform .5s ease;
}
.wiz-slide-in.wiz-visible{
  opacity:1;
  transform:translateX(0);
}

/* === ABOUT PAGE === */
.wiz-about-content{
  max-width:780px;
  margin:0 auto;
  padding:48px 24px 64px;
}
.wiz-about-content h2{margin:32px 0 12px}
.wiz-about-content p{line-height:1.75}

/* === RESPONSIVE === */
@media(max-width:1060px){
  .wiz-grid{grid-template-columns:repeat(2,1fr)}
  .wiz-footer-grid{grid-template-columns:repeat(2,1fr)}
  .wiz-stats-grid{grid-template-columns:repeat(2,1fr);gap:28px}
}
@media(max-width:840px){
  .wiz-nav{
    display:none;
    position:absolute;
    top:64px;left:0;right:0;
    background:var(--wiz-surface);
    flex-direction:column;
    padding:20px 24px;
    gap:16px;
    border-bottom:1px solid var(--wiz-border);
    box-shadow:var(--wiz-shadow);
  }
  .wiz-nav.active{display:flex}
  .wiz-hamburger{display:flex}
  .wiz-hero h1{font-size:2rem}
  .wiz-hero{padding:56px 0 48px}
  h1{font-size:1.85rem}
  h2{font-size:1.45rem}
}
@media(max-width:520px){
  .wiz-grid{grid-template-columns:1fr}
  .wiz-footer-grid{grid-template-columns:1fr}
  .wiz-stats-grid{grid-template-columns:1fr;gap:20px}
  .wiz-hero h1{font-size:1.65rem}
  .wiz-hero p{font-size:1rem}
  .wiz-header-inner{height:56px}
  .wiz-container{padding:0 16px}
  .wiz-section{padding:44px 0}
  .wiz-article-content{padding:32px 16px 48px}
  .wiz-author-box{flex-direction:column;text-align:center}
}