/*
Theme Name: Zweisam Theme
Theme URI: https://www.zweisam-mode.de/
Description: Schlankes, eigengebautes klassisches Theme für Zweisam Corporate Fashion. WooCommerce-kompatibel, builderfrei, ohne Drittlast (Inter lokal gehostet, keine externen Skripte). Umgesetzt nach Design-System v1.1. Ersetzt das X-Theme und dessen Builder (Cornerstone/RevSlider).
Author: Zweisam Mode
Version: 0.4.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: zweisam-theme
Tags: custom-background, custom-logo, custom-menu, featured-images, translation-ready
*/

/* =========================================================================
   Schrift: Inter, lokal gehostet
   Vorgabe Design-System v1.1 §7.1 — bewusst NICHT über das Google-CDN:
   kein Drittanbieter-Request (Consent), keine externe Ladelast.
   font-display:swap zeigt sofort den Fallback, bis Inter geladen ist.
   ========================================================================= */
@font-face{
  font-family:"Inter";
  src:url("assets/fonts/inter-var.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* =========================================================================
   Design-Tokens — Zweisam Corporate Fashion Design-System v1.1
   Quelle: docs/brand-design/zweisam-corporate-fashion-design-system-v1.1.md
   Gestaltungsformel: Warm. Klar. Menschlich. Robust genug.

   Farbverteilung (§3.2): Cream/Sand ~55 % Flächen · Ink/Petrol ~20 % Headlines,
   Header, Footer, Buttons · Sage/Forest ~10 % Beratung/Region · Bilder ~10 % ·
   Camel/Terracotta ~5 % warme Akzente.

   Gold-Regel (§3.3): Gold ist KEIN Hauptakzent. Der frühere Bronze-Ton
   (#b38f5f) ist deshalb durch Camel ersetzt.
   ========================================================================= */
:root{
  /* Marken-Tokens (kanonische Namen aus dem Design-System) */
  --zcf-ink:#1E252D;
  --zcf-petrol:#23434A;
  --zcf-forest:#2F4A3B;
  --zcf-sage:#A8BFAF;
  --zcf-cream:#FCFAF5;
  --zcf-sand:#F6F1E8;
  --zcf-stone:#E8DED1;
  --zcf-camel:#B88A5B;
  --zcf-terracotta:#C97955;
  --zcf-white:#FFFFFF;
  --zcf-text:#1E252D;
  --zcf-muted:#64717A;
  --zcf-border:#E2D9CC;

  --radius-sm:10px;
  --radius-md:18px;
  --radius-lg:28px;
  --radius-pill:999px;
  --shadow-soft:0 18px 45px rgba(30,37,45,.08);
  --shadow-card:0 10px 28px rgba(30,37,45,.07);

  /* Kompatibilitäts-Aliase: Bestehendes Theme- und Shop-CSS nutzt diese kurzen
     Namen. Sie zeigen jetzt auf die Marken-Tokens, damit die Umstellung greift,
     ohne jede Regel anzufassen. Neue Regeln nutzen direkt --zcf-*. */
  --ink:var(--zcf-ink);
  --ink-2:var(--zcf-petrol);   /* Primärbutton-Hover: Petrol statt Grau */
  --paper:var(--zcf-cream);
  --paper-2:var(--zcf-sand);
  --white:var(--zcf-white);
  --accent:var(--zcf-camel);   /* war Bronze/Gold — Gold-Regel §3.3 */
  --accent-ink:var(--zcf-terracotta);
  --muted:var(--zcf-muted);
  --line:var(--zcf-border);
  --ok:var(--zcf-forest);

  --maxw:1160px;
  --gap:clamp(16px,3vw,28px);
  --radius:var(--radius-sm);
  --font:"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  /* Kein Serif mehr: Das Design-System setzt durchgängig Inter mit kräftigen
     Gewichten und negativem Buchstabenabstand (§7.3). */
  --serif:var(--font);
}

/* =========================================================================
   Reset / Basis
   ========================================================================= */
*,*::before,*::after{box-sizing:border-box}
body,h1,h2,h3,h4,p,figure,ul,ol,blockquote{margin:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  font-size:17px;          /* Design-System §7.3 */
  color:var(--zcf-text);
  background:var(--zcf-cream);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
/* Links in Petrol, nicht in Camel/Terracotta: Die warmen Töne sind laut §3.2
   auf ~5 % Akzentfläche begrenzt — Fließtext-Links wären zu viel davon. */
a{color:var(--zcf-petrol)}
a:hover{color:var(--zcf-ink)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--accent);outline-offset:2px;
}
ul{padding-left:1.1rem}

/* Skip-Link (A11y) */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:.6rem 1rem;z-index:100}
.skip-link:focus{left:8px;top:8px}

/* Layout-Helfer */
.container{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(16px,4vw,32px)}
.section{padding-block:clamp(40px,7vw,84px)}
.section--tint{background:var(--paper-2)}
.section--dark{background:var(--ink);color:var(--paper)}
.eyebrow{font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:.8rem}
.section--dark .eyebrow{color:var(--accent)}
/* Überschriften: Inter mit kräftigen Gewichten und negativem Buchstabenabstand
   (Design-System §7.3) — ersetzt die frühere Georgia-Serife. */
h1,h2,h3{font-family:var(--font)}
h1{font-size:clamp(2.35rem,5vw,4.4rem);line-height:1.04;font-weight:750;letter-spacing:-.04em}
h2{font-size:clamp(1.75rem,3.2vw,3rem);line-height:1.12;font-weight:720;letter-spacing:-.03em}
h3{font-size:clamp(1.3rem,2vw,1.75rem);line-height:1.2;font-weight:680}
.lead{font-size:clamp(1.05rem,2.2vw,1.2rem);color:var(--muted);max-width:46ch}
.section--dark .lead{color:#e7e3da}

/* Buttons — Design-System §11: Pill-Radius, Primär in Petrol,
   Sekundär mit Camel-Kontur auf leicht transparentem Weiß. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;padding:.9rem 1.35rem;border-radius:var(--radius-pill);
  text-decoration:none;font-weight:750;font-size:1rem;
  border:1px solid transparent;cursor:pointer;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}
.btn-primary{background:var(--zcf-petrol);color:var(--zcf-white);border-color:var(--zcf-petrol)}
.btn-primary:hover{background:var(--zcf-ink);border-color:var(--zcf-ink)}
.btn-outline{background:rgba(255,255,255,.72);color:var(--zcf-petrol);border-color:var(--zcf-camel)}
.btn-outline:hover{background:var(--zcf-white);border-color:var(--zcf-terracotta)}
.section--dark .btn-outline{background:transparent;border-color:var(--zcf-sage);color:var(--zcf-cream)}
.section--dark .btn-outline:hover{border-color:var(--zcf-cream)}

/* =========================================================================
   Header / Navigation
   ========================================================================= */
.site-header{background:var(--white);border-bottom:1px solid var(--line)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:14px}
.site-brand img,.site-brand .txt{display:block}
.site-brand img{width:clamp(150px,20vw,210px)}
.site-brand .txt{font-family:var(--serif);font-size:1.4rem;letter-spacing:.2em;text-transform:uppercase}
.main-nav ul{display:flex;gap:clamp(12px,2vw,26px);list-style:none;margin:0;padding:0}
.main-nav a{color:var(--ink);text-decoration:none;font-size:.98rem;padding:.4rem 0}
.main-nav a:hover{color:var(--accent-ink)}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:6px;min-height:44px;min-width:44px;align-items:center;justify-content:center}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{content:"";display:block;width:20px;height:2px;background:var(--ink);position:relative}
.nav-toggle span::before{position:absolute;top:-6px}
.nav-toggle span::after{position:absolute;top:6px}

/* Warenkorb-Link im Header (fester Theme-Baustein, kein Menüpunkt;
   global gestylt, weil der Header auf allen Seiten erscheint) */
.header-cart{
  display:inline-flex;align-items:center;gap:.45rem;
  min-height:44px;padding:.35rem .8rem;flex:none;
  border:1px solid var(--line);border-radius:var(--radius);
  color:var(--ink);text-decoration:none;font-size:.95rem;font-weight:600;
}
.header-cart:hover{border-color:var(--ink)}
.header-cart__count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:1.4rem;height:1.4rem;padding:0 .3rem;border-radius:999px;
  background:var(--accent);color:var(--white);font-size:.8rem;line-height:1;
}

@media (max-width:820px){
  .nav-toggle{display:inline-flex}
  .main-nav{display:none;width:100%}
  .main-nav.is-open{display:block}
  .site-header__inner{flex-wrap:wrap}
  .main-nav ul{flex-direction:column;gap:0;width:100%;padding-block:8px}
  .main-nav a{display:block;padding:.7rem 0;border-top:1px solid var(--line)}
  /* Mobil: Warenkorb neben dem Menü-Toggle, Navigation klappt darunter */
  .header-cart{order:2}
  .nav-toggle{order:3}
  .main-nav{order:4}
}

/* =========================================================================
   Hero
   ========================================================================= */
.hero{background:linear-gradient(180deg,var(--white),var(--paper));border-bottom:1px solid var(--line)}
.hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--gap);align-items:center}
.hero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.6rem}
.hero__aside{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(18px,3vw,26px)}
.hero__aside h2{font-size:1.15rem;font-family:var(--font);font-weight:700}
.hero__aside ul{margin-top:.6rem;color:var(--muted)}
@media (max-width:820px){.hero__grid{grid-template-columns:1fr}}

/* =========================================================================
   Karten-Raster (USP / Branchen)
   ========================================================================= */
.grid{display:grid;gap:var(--gap)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid--3,.grid--4{grid-template-columns:1fr}}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(18px,2.5vw,24px)}
.card h3{margin-bottom:.4rem}
.card p{color:var(--muted);font-size:.97rem}
.card__tag{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink)}

/* CTA-Band */
.cta-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--gap)}
.cta-band .btn{flex:none}

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer{background:var(--ink);color:#c9c4ba}
.site-footer a{color:#e3dfd5}
.site-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--gap);padding-block:clamp(32px,5vw,52px)}
.site-footer h3{font-family:var(--font);font-size:1rem;font-weight:700;color:var(--paper);margin-bottom:.7rem}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.site-footer__bar{border-top:1px solid rgba(246,244,239,.14);padding-block:16px;font-size:.85rem;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}
/* „Cookie-Einstellungen": Button, der wie ein Footer-Link aussieht. */
.site-footer__legal-link{appearance:none;background:none;border:0;padding:0;margin:0;font:inherit;color:#e3dfd5;text-decoration:underline;cursor:pointer;text-align:left}
.site-footer__legal-link:hover{color:var(--paper)}
/* Pflicht-Widerrufsbutton (§356a BGB): dauerhaft sichtbar, hervorgehoben. */
.site-footer__widerruf{margin-top:.9rem}
.site-footer__widerruf-btn{display:inline-block;padding:.5rem 1.1rem;border:1px solid rgba(246,244,239,.5);border-radius:999px;color:var(--paper)!important;text-decoration:none;font-size:.9rem;font-weight:600}
.site-footer__widerruf-btn:hover{background:rgba(246,244,239,.12)}
@media (max-width:760px){.site-footer__grid{grid-template-columns:1fr}}

/* WooCommerce: dezente Grundabstände (Layout kommt später) */
.woocommerce-content{padding-block:clamp(24px,4vw,48px)}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}