/* =========================================================
   Creative Artutopia – Deutsche Seiten
   Shared stylesheet for the German microsite (/de)
   ========================================================= */

:root{
  --ink:#22201d;          /* main text */
  --ink-soft:#4a4641;     /* secondary text */
  --paper:#ffffff;        /* background */
  --paper-warm:#f7f3ed; /* warm section background */
  --line:#e6ded3;         /* hairlines / borders */
  --accent:#9c5b3b;       /* terracotta accent */
  --accent-dark:#7d4329;  /* hover */
  --gold:#b08d57;
  --maxw:1120px;
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.7;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:"Playfair Display",Georgia,"Times New Roman",serif;
  color:var(--ink);
  font-weight:600;
  line-height:1.22;
  margin:0 0 .5em;
}
h1{font-size:clamp(2.1rem,4.5vw,2.7rem);}
h2{font-size:24px;}
h3{font-size:26px;}
h4{
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  color:var(--ink);font-weight:700;line-height:1.2;margin:0 0 .5em;
  font-size:1.05rem;letter-spacing:.5px;text-transform:uppercase;
}

p{margin:0 0 1.1em;}
a{color:var(--accent);text-decoration:none;}
a:hover{color:var(--accent-dark);text-decoration:underline;}
img{max-width:100%;height:auto;display:block;}
hr{border:none;border-top:1px solid var(--line);margin:2.4rem 0;}

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:var(--maxw);margin:0 auto;padding:.6rem 1.25rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.brand{display:flex;align-items:center;gap:.7rem;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:24px;font-weight:600;color:var(--ink);}
.brand:hover{text-decoration:none;color:var(--accent);}
.brand img{height:58px;width:auto;display:block;}
.nav-toggle{display:none;background:none;border:none;font-size:1.6rem;color:var(--ink);cursor:pointer;line-height:1;}
.main-nav ul{list-style:none;display:flex;gap:1.35rem;margin:0;padding:0;flex-wrap:wrap;}
.main-nav a{
  color:var(--ink);font-size:14px;letter-spacing:1px;text-transform:uppercase;font-weight:400;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
}
.main-nav a:hover{color:var(--accent);text-decoration:none;}
.main-nav a.active{color:var(--accent);}
.lang-pill{border:1px solid var(--line);border-radius:999px;padding:.2rem .6rem;font-size:.72rem;}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 1.25rem;}
.section{padding:3.2rem 0;}
.narrow{max-width:760px;margin-left:auto;margin-right:auto;}
.center{text-align:center;}
.lead{font-size:1.25rem;color:var(--ink-soft);}

/* ---------- Hero ---------- */
.hero{padding:2.6rem 0 1.4rem;text-align:center;}
.hero-banner{max-width:920px;margin:0 auto 1.6rem;}
.eyebrow{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;text-transform:uppercase;letter-spacing:3px;font-size:.75rem;color:var(--accent);margin-bottom:.8rem;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;background:#007572;color:#fff;
  padding:.8rem 1.6rem;border-radius:5px;font-size:.85rem;letter-spacing:1.5px;
  text-transform:uppercase;font-weight:400;border:1px solid #007572;
  transition:background .2s,border-color .2s,color .2s;
}
.btn:hover{background:#8FCEDB;border-color:#8FCEDB;color:#000;text-decoration:none;}
.btn-outline{background:transparent;color:#007572;border-color:#007572;}
.btn-outline:hover{background:#8FCEDB;border-color:#8FCEDB;color:#000;}
.btn-row{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin:1.4rem 0;}

/* ---------- Cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.8rem;margin-top:1.5rem;}
.card{border:1px solid var(--line);border-radius:4px;padding:1.4rem;text-align:center;background:#fff;transition:box-shadow .2s,transform .2s;}
.card:hover{box-shadow:0 10px 30px rgba(0,0,0,.07);transform:translateY(-3px);}
.card img{margin:0 auto 1rem;border-radius:3px;}
.card h3{margin-bottom:.4rem;}

/* ---------- Media blocks (image + text) ---------- */
.media{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem;align-items:center;}
.media.reverse .media-img{order:2;}
.media-img img{border-radius:4px;margin:0 auto;}
@media(max-width:820px){.media{grid-template-columns:1fr;}.media.reverse .media-img{order:0;}}

/* ---------- Warm section ---------- */
.bg-warm{background:#f7f3ed;}
.bg-ink{background:#22201d;color:#efe9e0;}
.bg-ink h1,.bg-ink h2,.bg-ink h3{color:#fff;}
.bg-ink a{color:var(--gold);}

/* ---------- Price / highlight ---------- */
.price{font-family:"Playfair Display",Georgia,serif;font-weight:600;font-size:1.8rem;color:var(--accent);}
.card h3{font-size:20px;}
.chart-embed{margin-top:1.6rem;}

/* ---------- Creator Lab knowledge list ---------- */
.lab-list{list-style:none;padding:0;margin:.4rem 0 2.4rem;columns:2;column-gap:2.6rem;}
.lab-list li{margin:0 0 .65rem;break-inside:avoid;}
.lab-list a{color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:1px;}
.lab-list a:hover{color:var(--accent);border-color:var(--accent);text-decoration:none;}
@media(max-width:640px){.lab-list{columns:1;}}
.highlight{background:#f7f3ed;border-left:3px solid var(--accent);padding:1.2rem 1.4rem;border-radius:0 4px 4px 0;}

/* ---------- Contact form ---------- */
.form-field{margin-bottom:1rem;}
.form-field label{display:block;font-size:.85rem;letter-spacing:.5px;margin-bottom:.35rem;color:var(--ink-soft);}
.form-field input,.form-field textarea{
  width:100%;padding:.7rem .8rem;border:1px solid var(--line);border-radius:3px;font:inherit;font-size:1rem;background:#fff;
}
.form-field textarea{min-height:160px;resize:vertical;}

/* ---------- Footer ---------- */
.site-footer{background:#22201d;color:#cfc6b8;padding:3rem 0 2rem;margin-top:2rem;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem;}
.site-footer h4{color:#fff;}
.site-footer a{color:#cfc6b8;}
.site-footer a:hover{color:#fff;}
.footer-cols ul{list-style:none;margin:0;padding:0;}
.footer-cols li{margin-bottom:.4rem;font-size:.92rem;}
.footer-bottom{border-top:1px solid #3a352e;margin-top:2rem;padding-top:1.2rem;font-size:.8rem;color:#8c8479;text-align:center;}
@media(max-width:760px){.footer-grid{grid-template-columns:1fr;}}

/* ---------- Newsletter strip ---------- */
.newsletter{background:#f7f3ed;text-align:center;padding:3rem 1.25rem;}
.newsletter .wrap{max-width:620px;}

/* ---------- Article (blog posts) ---------- */
.article{max-width:760px;margin:0 auto;}
.article .post-meta{font-size:.85rem;color:var(--ink-soft);letter-spacing:1px;text-transform:uppercase;margin-bottom:1.5rem;}
.article img{margin:1.6rem auto;border-radius:4px;}
.article h2{margin-top:2rem;}
.breadcrumb{font-size:.8rem;letter-spacing:1px;text-transform:uppercase;color:var(--ink-soft);margin-bottom:1rem;}

/* ---------- Mobile nav ---------- */
@media(max-width:880px){
  .nav-toggle{display:block;}
  .main-nav{display:none;width:100%;}
  .main-nav.open{display:block;}
  .header-inner{flex-wrap:wrap;}
  .main-nav ul{flex-direction:column;gap:.2rem;padding:.6rem 0;width:100%;}
  .main-nav li{border-top:1px solid var(--line);}
  .main-nav a{display:block;padding:.6rem 0;}
}