/*
Theme Name: Zimon Studio
Theme URI: https://zimonstudio.de
Author: Zimon Studio
Author URI: https://zimonstudio.de
Description: Minimalistisches Theme für Zimon Studio, 3D-gedruckte Lampen, Vasen und Wohnobjekte. Startseite als Coming-soon-Seite, Rechtsseiten und Vasen-Designer übernommen.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: zimonstudio
*/

/* ==========================================================
   FONTS: selbst gehostet (kein Google-Fonts-CDN, siehe
   Datenschutzerklärung). Fraunces liegt nur noch für den
   Vasen-Designer im Ordner, die Website selbst nutzt es nicht.
   ========================================================== */
@font-face {
  font-family: 'Archivo Var';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/archivo-var.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/plex-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/plex-mono-500.woff2') format('woff2');
}

/* ==========================================================
   DESIGN-TOKENS
   Eine Palette: helles Grau-Weiß, Beinahe-Schwarz, ein Akzent.
   Der Akzent (--accent) wird nur für Fokus und Hover-Linien
   benutzt, nie als Fläche. Ecken sind überall scharf (0).
   ========================================================== */
:root {
  --bg:      #EEEEEB;
  --bg-2:    #E5E5E1;
  --ink:     #161615;
  --ink-2:   #3A3A37;
  --mute:    #5E5E59;
  --line:    rgba(22, 22, 21, .16);
  --accent:  #D9481F;

  --font-sans: 'Archivo Var', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --wrap: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:     #131312;
    --bg-2:   #1B1B1A;
    --ink:    #ECECE8;
    --ink-2:  #C9C9C3;
    --mute:   #A1A19A;
    --line:   rgba(236, 236, 232, .18);
    --accent: #FF6A3D;
  }
}

/* ==========================================================
   BASIS
   ========================================================== */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.site-main { flex: 1; }

img, svg { max-width: 100%; height: auto; display: block; }
p { margin: 0; }
h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: -.025em;
  text-wrap: balance;
}
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  padding: .75rem 1rem;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: .85rem;
  z-index: 100;
}
.skip-link:focus { top: .75rem; }

.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: .82rem;
  font-weight: 400;
  color: var(--mute);
}

.num { font-variant-numeric: tabular-nums; }

/* ==========================================================
   HEADER
   ========================================================== */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 1.5rem var(--gutter);
}

.site-logo {
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: -.02em;
  text-decoration: none;
}
.site-logo strong { font-weight: 640; }

.site-nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav-list a {
  display: inline-block;
  padding: .7rem 0;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: .85rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.site-nav-list a:hover,
.site-nav-list .current-menu-item > a,
.site-nav-list .current_page_item > a { border-bottom-color: var(--ink); }

/* ==========================================================
   FOOTER
   ========================================================== */
.site-footer { border-top: 1px solid var(--line); }
.site-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 3rem;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 1.5rem var(--gutter) 2rem;
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--mute);
}
.footer-nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-nav-list a {
  display: inline-block;
  padding: .45rem 0;
  color: var(--mute);
  text-decoration: none;
}
.footer-nav-list a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .3em; }

/* ==========================================================
   COMING-SOON-STARTSEITE
   "Coming soon" ist das Hauptelement, groß gesetzt und unten
   im Fenster verankert. Darunter eine ruhige Infozeile mit
   Trennlinie. Nur ein Akzent: das Wort "soon".
   Der Aufbau der Wörter läuft in 20 Stufen von unten nach oben,
   wie ein 3D-Druck Schicht für Schicht (nur wenn Bewegung
   erlaubt ist).
   ========================================================== */
.zs-soon {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: calc(100dvh - 12.5rem);
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(2rem, 8vh, 5rem) var(--gutter) clamp(2rem, 6vh, 4rem);
}

.zs-big {
  margin: 0 0 0 -.04em;               /* optischer Randausgleich links */
  font-size: clamp(3.4rem, 13.4vw, 12.5rem);
  font-weight: 500;
  line-height: .9;
  letter-spacing: -.055em;
}
.zs-word { display: inline-block; padding-bottom: .06em; }
.zs-word--accent { color: var(--accent); }

@media (max-width: 640px) {
  .zs-big { font-size: clamp(3.4rem, 25vw, 8rem); }
  .zs-word { display: block; }
}

.zs-info {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem 3rem;
  margin-top: clamp(2rem, 5vh, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.zs-lede {
  max-width: 30rem;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.zs-link {
  display: inline-block;
  padding: .8rem 0;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: .95rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .35em;
}
.zs-link:hover { text-decoration-color: var(--accent); text-decoration-thickness: 2px; }

@media (prefers-reduced-motion: no-preference) {
  .zs-word { animation: zs-print 1.6s steps(20, end) both; }
  .zs-word--accent { animation-delay: .35s; }
  .zs-info { animation: zs-fade .8s ease 1.5s both; }
  @keyframes zs-print {
    from { clip-path: inset(100% 0 0 0); }
    to   { clip-path: inset(-.15em -.08em -.3em -.08em); }
  }
  @keyframes zs-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

/* ==========================================================
   INNENSEITEN (Impressum, AGB, Datenschutz, Cookies, FAQ,
   Kontakt, page.php). Die Klassennamen lt-* bleiben bewusst
   erhalten, damit die übernommenen Rechtstexte unverändert
   weiterlaufen.
   ========================================================== */
.lt-hero {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 5rem) var(--gutter) clamp(1.5rem, 3vw, 2.5rem);
}
.lt-hero-inner { max-width: 46rem; }
.lt-hero .eyebrow { margin-bottom: 1rem; }
.lt-hero h1 {
  font-size: clamp(2rem, 4.2vw + .4rem, 3.5rem);
  line-height: 1.05;
  letter-spacing: -.04em;
}
.lt-hero h2 { font-size: clamp(1.5rem, 2.4vw + .5rem, 2.25rem); line-height: 1.15; }
.lt-hero p.lede {
  max-width: 34rem;
  margin-top: 1.25rem;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--ink-2);
}

.lt-section {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.lt-section--tint { background: transparent; }
.lt-section-inner { padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(3rem, 7vw, 5rem); }
.lt-section-inner--narrow > * { max-width: 46rem; }

.section-head { margin-bottom: 2rem; }
.section-head h2 { font-size: clamp(1.4rem, 1.6vw + .8rem, 2rem); }
.section-head .eyebrow { margin-top: .5rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .9rem 1.4rem;
  min-height: 2.75rem;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-sans);
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--ink);
  border-radius: 0;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.btn:hover { background: transparent; color: var(--ink); }
.btn--outline { background: transparent; color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--bg); }

.card-grid {
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.75rem);
  grid-template-columns: repeat(var(--cols, 3), 1fr);
}
@media (max-width: 760px) { .card-grid { grid-template-columns: 1fr; } }

.info-card { padding-top: 1.25rem; border-top: 1px solid var(--line); }
.info-card h3 { font-size: 1.2rem; }
.info-card p {
  margin-top: .6rem;
  font-size: .95rem;
  line-height: 1.7;
  color: var(--ink-2);
}
.info-card ul { margin: .9rem 0 0; padding: 0; list-style: none; }
.info-card li {
  padding: .5rem 0;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--ink-2);
}
.info-card li:first-child { border-top: none; padding-top: 0; }

/* FAQ (natives details/summary) */
.faq-list { display: flex; flex-direction: column; }
.faq-group {
  margin: 3rem 0 .5rem;
  font-size: 1.2rem;
}
.faq-group:first-child { margin-top: 0; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-group + .faq-item { border-top: 1px solid var(--line); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 0;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { font-size: 1.05rem; font-weight: 500; letter-spacing: -.01em; }
.faq-toggle { position: relative; flex-shrink: 0; width: 14px; height: 14px; }
.faq-toggle::before,
.faq-toggle::after {
  content: "";
  position: absolute;
  background: var(--ink);
  transition: transform .2s ease, opacity .2s ease;
}
.faq-toggle::before { left: 0; top: 50%; width: 100%; height: 1px; }
.faq-toggle::after { top: 0; left: 50%; width: 1px; height: 100%; }
.faq-item[open] .faq-toggle::after { transform: rotate(90deg); opacity: 0; }
.faq-item .faq-answer {
  padding: 0 0 1.5rem;
  max-width: 40rem;
  font-size: .95rem;
  line-height: 1.75;
  color: var(--ink-2);
}
.faq-item .faq-answer strong { color: var(--ink); font-weight: 600; }

/* Rechtstexte */
.lt-legal h2 {
  margin: 3rem 0 1rem;
  font-size: 1.4rem;
  letter-spacing: -.02em;
}
.lt-legal > h2:first-child { margin-top: 0; }
.lt-legal h3 {
  margin: 1.75rem 0 .5rem;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -.01em;
}
.lt-legal p,
.lt-legal li,
.lt-page-content { font-size: .95rem; line-height: 1.75; color: var(--ink-2); }
.lt-legal p { margin-top: .9rem; }
.lt-legal ul,
.lt-legal ol { margin: .9rem 0 0; padding-left: 1.25rem; }
.lt-legal li { margin-top: .4rem; padding-left: .25rem; }
.lt-legal li::marker { color: var(--mute); }
.lt-legal a,
.lt-page-content a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: .25em;
  text-decoration-thickness: 1px;
  word-break: break-word;
}
.lt-legal a:hover,
.lt-page-content a:hover { text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.lt-legal strong { color: var(--ink); font-weight: 600; }

.lt-legal-callout {
  margin-top: 1.25rem;
  padding: 1.25rem 1.5rem;
  border-left: 2px solid var(--ink);
  background: var(--bg-2);
}
.lt-legal-callout p { margin-top: .75rem; }
.lt-legal-callout p:first-child { margin-top: 0; }

.lt-legal-toc {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.lt-legal-toc .lt-section-inner {
  padding: 1.5rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.lt-legal-toc ol {
  display: grid;
  gap: .4rem 2rem;
  grid-template-columns: repeat(2, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .9rem;
  color: var(--ink-2);
}
@media (max-width: 620px) { .lt-legal-toc ol { grid-template-columns: 1fr; } }
.lt-legal-toc a { color: inherit; text-decoration: none; }
.lt-legal-toc a:hover { text-decoration: underline; text-underline-offset: .25em; }

/* Cookie-Tabelle: auf schmalen Bildschirmen seitlich scrollbar */
.lt-cookie-table {
  display: block;
  width: 100%;
  margin-top: 1rem;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: .85rem;
}
.lt-cookie-table th {
  padding: .75rem 1rem;
  text-align: left;
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
}
.lt-cookie-table td {
  padding: .85rem 1rem;
  vertical-align: top;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line);
}

/* Generische Seiten (page.php, index.php, 404) */
.lt-page {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 5rem) var(--gutter) clamp(3rem, 7vw, 5rem);
}
.lt-page-inner { max-width: 46rem; }
.lt-page-title {
  margin: 0 0 2rem;
  font-size: clamp(2rem, 4.2vw + .4rem, 3.5rem);
  line-height: 1.05;
  letter-spacing: -.04em;
}
.lt-page-content h2 { margin: 2.5rem 0 1rem; font-size: 1.5rem; }
.lt-page-content h3 { margin: 1.75rem 0 .75rem; font-size: 1.1rem; }
.lt-page-content p { margin: 0 0 1.25rem; }
.lt-page-content ul,
.lt-page-content ol { margin: 0 0 1.25rem 1.25rem; }

/* ==========================================================
   COOKIE-BANNER (Complianz)
   Alle Schaltflächen bewusst gleichwertig gestaltet, damit
   "Ablehnen" nicht gegenüber "Akzeptieren" versteckt wird.
   Das Complianz-Stylesheet wird nach diesem geladen, daher
   !important. Nach Aktivierung des Themes im Browser prüfen.
   ========================================================== */
.cmplz-cookiebanner {
  background: var(--bg) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--font-sans) !important;
}
.cmplz-cookiebanner .cmplz-title,
.cmplz-cookiebanner .cmplz-message { color: var(--ink) !important; }
.cmplz-cookiebanner .cmplz-btn {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--ink) !important;
  border-radius: 0 !important;
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
}
.cmplz-cookiebanner .cmplz-btn:hover {
  background: var(--ink) !important;
  color: var(--bg) !important;
}
.cmplz-cookiebanner .cmplz-links a { color: var(--ink-2) !important; }
#cmplz-manage-consent .cmplz-manage-consent {
  background: var(--bg) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  font-family: var(--font-mono) !important;
}