/* ------------------------------------------------------
   artecons.de – style.css (inkl. Endloskarussell-Anpassungen)
   ------------------------------------------------------ */
:root{
  --bg:#ffffff;
  --text:#1b2533;
  --muted:#5c6a80;
  --primary:#0b2a63;
  --accent:#ff7e00;
  --neutral:#e3d9c6;
  --radius:16px;
  --shadow:0 8px 24px rgba(0,0,0,.08);
  --w:1200px;
}

/* Base */
*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;
}
img{max-width:100%;height:auto}
.container{width:100%;max-width:var(--w);margin:0 auto;padding:0 1rem}

/* Type */
h1{font-size:clamp(2rem,4vw,3.5rem);line-height:1.1;margin:.25rem 0 1rem}
h2{font-size:clamp(1.6rem,2.5vw,2.2rem);line-height:1.2;margin:0 0 1rem}
h3{font-size:1.15rem;margin:.25rem 0 .5rem}
.lead{font-size:1.1rem;color:var(--muted);max-width:60ch}
.eyebrow{
  display:inline-block;
  text-transform:none;
  letter-spacing:.08em;
  font-weight:700;
  color:#fff;
  background:var(--primary);
  padding:.35rem .6rem;
  border-radius:999px;
  font-size:.8rem;
}

/* Buttons */
.btn{display:inline-block;padding:.9rem 1.1rem;border-radius:12px;text-decoration:none;font-weight:700}
.btn-sm{padding:.6rem .8rem;border-radius:10px}
.btn-primary,.btn-primary:link,.btn-primary:visited{background:var(--primary);color:#fff!important}
.btn-accent{background:var(--accent);color:#fff!important}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}

/* Header/Nav */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid rgba(0,0,0,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.6rem 0}
.brand img{height:36px;display:block}
.nav-links{display:flex;gap:1rem;align-items:center}
.nav-links a{color:var(--text);text-decoration:none;font-weight:600}
.nav-links a:hover{color:var(--primary)}
.nav-toggle{display:none;background:none;border:0;font-size:1.4rem}

/* Hero */
.hero{padding:5rem 0 3rem;background:linear-gradient(180deg, rgba(11,42,99,.06), transparent)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center}
.badges{display:flex;gap:.6rem;list-style:none;padding:0;margin:.5rem 0 1rem}
.badges li {
  border: 1.5px solid var(--accent); /* CI-Orange-Rahmen */
  padding: 0.45rem 0.85rem;          /* mehr Innenabstand */
  border-radius: 999px;              /* bleibt oval */
  background: #fff;                  /* Weißer Hintergrund beibehalten */
  font-size: .95rem;
  box-shadow: var(--shadow);
}

.badges i {
  color: var(--primary);
  font-size: 1.2em;                  /* größerer Haken */
  vertical-align: middle;
  margin-right: 0.35em;
}

.hero-media img{border-radius:16px;box-shadow:var(--shadow)}

/* Logos – Endloskarussell */
.logos{padding:2rem 0}
.logos-strip{background:var(--neutral);border-radius:12px;padding:1.2rem}
.logos-viewport{overflow:hidden}
.logos-track{
  display:flex;
  flex-wrap:nowrap;
  gap:2rem;
  align-items:center;
  overflow:hidden;
  padding:.2rem .25rem;
  -ms-overflow-style:none;
  scrollbar-width:none;
}
.logos-track::-webkit-scrollbar{display:none}
.logos-track li{list-style:none;flex:0 0 auto}
.logos-track img{max-height:50px;object-fit:contain;filter:grayscale(100%);opacity:.9;transition:filter .3s ease,opacity .3s ease}
.logos-track img:hover{filter:grayscale(0%);opacity:1}
@keyframes logos-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.logos-track.animate{animation:logos-scroll linear infinite}

/* Sections & grids */
.section{padding:4rem 0}
.section-neutral{background:var(--neutral)}
.subhead{color:var(--muted);max-width:70ch}
.grid{display:grid;gap:1.2rem}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Cards */
.card,.stack-card{background:#fff;border-radius:var(--radius);padding:1.2rem;box-shadow:var(--shadow);border:1px solid rgba(0,0,0,.04)}
.stack-cards{display:grid;gap:1rem}

/* Wünsche-Sektion */
#wuensche .stack-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(128, 150, 168, 0.103));
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  color: #000;
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.25), 0 6px 18px rgba(0,0,0,0.08);
  padding: 1.2rem;
  transition: transform .25s ease, box-shadow .25s ease;
}
#wuensche .stack-card:hover {
  transform: translateY(-6px);
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.25), 0 12px 28px rgba(0,0,0,0.12);
}
#wuensche .stack-card h3,
#wuensche .stack-card p { color: #000; }

/* About */
.about-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center}
.placeholder-media{background:#e9eef5;border:2px dashed #c6cfdb;color:#64748b;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;min-height:260px;font-weight:700}

/* Listen */
.list-lines{list-style:none;padding:0;margin:1rem 0;display:grid;gap:.9rem}
.list-lines li{padding:1rem;border-bottom:1px solid rgba(0,0,0,.1);background:#fff;border-radius:12px;box-shadow:var(--shadow)}
.list-lines li strong{display:block;margin-bottom:.25rem}

/* CTA */
.cta-box{margin-top:2rem;background:#fff;border:2px solid var(--primary);border-radius:var(--radius);padding:1.2rem;box-shadow:var(--shadow)}
.bullets{padding-left:1.1rem}
.bullets.inline{display:flex;flex-wrap:wrap;gap:1.2rem;list-style:none;padding-left:0}
.bullets.inline li{position:relative;padding-left:1rem}
.bullets.inline li::before{content:"•";position:absolute;left:0;color:var(--primary);font-weight:bold}

/* Footer */
.small{font-size:.9rem;color:#5c6a80}
.site-footer{background:#0f1a2a;color:#e9edf5;padding:2rem 0;margin-top:2rem}
.site-footer .brand-inline img{height:28px}
.footer-grid{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.footer-links a{color:#e9edf5;text-decoration:none;margin-right:1rem}
.footer-links a:hover{text-decoration:underline}

/* Case Studies */
.case-viewport{overflow:hidden}
.case-track{display:flex;gap:1rem;overflow-x:hidden;padding-bottom:.5rem}
.case-card{flex:0 0 calc(33.333% - .67rem);background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:1.2rem;border:1px solid rgba(0,0,0,.04);color:var(--text)}
.case-card h3{color:#0B2A63}
.case-card li{color:var(--muted)}
.case-card ul{padding-left:1.2rem}

/* Entscheider-Zeilenlayout */
.decision-rows{display:flex;flex-direction:column}
.decision-row{display:grid;grid-template-columns:1.05fr 1.95fr;gap:2rem;align-items:start;padding:1.1rem 0;border-bottom:1px solid #d8cdb7}
.decision-row:last-child{border-bottom:none}
.decision-title{color:#0B2A63;font-weight:800;font-size:1.05rem}
.decision-text{color:#2b2b2b;font-size:0.98rem;line-height:1.5;max-width:70ch}

/* Icon-Helfer */
.icon-24{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:.5rem;vertical-align:middle;flex-shrink:0}
.icon-24 svg,.icon-24 img{width:100%;height:100%;display:block;fill:currentColor}
.card-title{display:flex;align-items:center;gap:.75rem;margin:0 0 .75rem 0;font-size:1.15rem;font-weight:700;color:var(--primary)}

/* Responsive */
@media (max-width:960px){
  .grid-3{grid-template-columns:1fr 1fr}
  .about-grid{grid-template-columns:1fr}
  .hero-grid{grid-template-columns:1fr}
  .hero-media{order:-1}
  /* 2 Karten auf Tablet, nativer Swipe aktiv */
  .case-track{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;touch-action:pan-x}
  .case-card{flex-basis:calc(50% - .5rem);scroll-snap-align:start}
}
@media (max-width:640px){
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .case-card{flex-basis:100%}
  .badges{flex-wrap:wrap}
  .nav-links{display:none}
  .nav-toggle{display:inline-block}
}

/* Individuelle Button-Farbe für Discovery Call im Header */
.btn-orange { background:#ff7e00 !important; color:#fff !important; }
.btn-orange:hover { background:#e67200 !important; }

/* Stil für die Kacheln im "Schnell Klarheit herstellen"-Bereich */
.check-card{
  background:linear-gradient(180deg,rgba(255,255,255,1),rgba(255,126,0,0.08));
  border:1px solid rgba(0,0,0,.06);
  border-radius:var(--radius);
  color:#000;
  box-shadow:inset 0 2px 4px rgba(255,255,255,0.25), 0 6px 18px rgba(0,0,0,0.08);
  transition:transform .25s ease, box-shadow .25s ease;
}
.check-card:hover{ transform:translateY(-6px); box-shadow:inset 0 2px 4px rgba(255,255,255,0.25), 0 12px 28px rgba(0,0,0,0.12); }
.check-card h3, .check-card p { color:#000; }