/* Kanonische zukunftsfit.jetzt Workshop-Web-Basis ab 23.09.2026. */
:root {
  --deep-teal: hsl(189 80% 25%);
  --solar-amber: hsl(24 79% 40%);
  --solar-gold: hsl(36 90% 55%);
  --solar-light-gold: #ffcb75;
  --deep-solar-amber: hsl(24 79% 34%);
  --future-horizon: hsl(193 55% 52%);
  --creme: hsl(40 33% 97%);
  --text-primary: hsl(0 0% 10%);
  --text-secondary: hsl(0 0% 29%);
  --white: #fff;
  --border: hsl(40 20% 88%);
  --border-light: hsl(40 25% 92%);
  --gold-light: hsl(36 90% 94%);
  --workshop-accent: var(--solar-amber);
  --partner-client-color: var(--deep-teal);
  --workshop-header-height: 4rem;
  --site-shell-max: 1400px;
  --site-content-max: 1024px;
  --site-gutter: clamp(1rem, 3vw, 2rem);
  --space-1: .5rem;
  --space-2: .75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-full: 999px;
  --shadow-sm: 0 2px 8px rgb(0 0 0 / .06);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--creme);
  color: var(--text-primary);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
main { padding-top: var(--workshop-header-height); }
h1, h2, h3 { color: var(--deep-teal); font-family: "Plus Jakarta Sans", Inter, sans-serif; line-height: 1.16; }
h1, h2, h3, p { margin-top: 0; }
a { color: var(--deep-teal); }
a:hover { color: var(--deep-solar-amber); }
:where(a, button, summary):focus-visible { outline: 3px solid var(--solar-gold); outline-offset: 3px; }

.workshop-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  background: rgb(255 255 255 / .96);
  border-bottom: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.workshop-header-inner {
  width: min(100%, var(--site-shell-max));
  min-height: var(--workshop-header-height);
  margin-inline: auto;
  padding-inline: var(--site-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.workshop-header-brand { display: inline-flex; align-items: center; gap: .5rem; flex-shrink: 0; text-decoration: none; }
.workshop-header-brand img { display: block; width: auto; height: 2rem; }
.workshop-header-logo-text,
.workshop-site-footer-logo-text {
  background: linear-gradient(90deg, var(--solar-amber), var(--solar-gold), var(--solar-light-gold));
  background-clip: text;
  color: transparent;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -.025em;
  -webkit-background-clip: text;
}
.workshop-header-center { display: none; }
.workshop-header-actions { display: flex; align-items: center; gap: .9rem; }
.workshop-header-actions a { color: var(--text-secondary); font-size: .84rem; font-weight: 650; text-decoration: none; }
.workshop-header-actions a:hover { color: var(--deep-teal); }
.workshop-header-actions a.workshop-header-current {
  padding: .65rem 1rem;
  border-radius: 0;
  background: linear-gradient(90deg, var(--solar-amber), var(--solar-gold), var(--solar-light-gold));
  color: var(--white);
  font-weight: 750;
}
.workshop-header-actions a.workshop-header-current:hover { color: var(--white); opacity: .95; }
.workshop-header-burger {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--deep-teal);
  cursor: pointer;
}
.workshop-header-panel { display: none; }
.workshop-header-panel.is-open {
  display: block;
  padding: 1rem var(--site-gutter) 1.25rem;
  border-top: 1px solid var(--border-light);
  background: rgb(255 255 255 / .99);
}
.workshop-header-panel a {
  display: block;
  padding: .7rem 0;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-secondary);
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
}
.workshop-header-panel a:last-child { border-bottom: 0; }
.workshop-header-panel a.workshop-header-current {
  padding: .75rem .85rem;
  border: 0;
  border-radius: 0;
  background: linear-gradient(90deg, var(--solar-amber), var(--solar-gold), var(--solar-light-gold));
  color: var(--white);
}

.workshop-hero,
.content-section,
.hub-grid {
  width: min(100%, var(--site-content-max));
  margin-inline: auto;
  padding-inline: var(--site-gutter);
}
.workshop-hero { padding-top: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: var(--space-5); }
.workshop-program-line,
.workshop-partner-line {
  margin-bottom: .8rem;
  color: var(--solar-amber);
  font-size: .8rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.workshop-program-line .partner-client,
.workshop-partner-line .partner-client { color: var(--partner-client-color); }
.workshop-hero h1,
.chapter-header h1 { max-width: 820px; margin-bottom: 1rem; font-size: clamp(2.2rem, 5vw, 4rem); }
.workshop-meta { max-width: 48rem; color: var(--text-secondary); }

.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: var(--space-4);
  padding-bottom: var(--space-6);
}
.hub-card,
.content-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); }
.hub-card {
  min-height: 240px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.4rem 1.5rem;
  text-align: left;
}
.hub-card--featured { border-top: 4px solid var(--workshop-accent); }
.hub-card--gold { border-top: 4px solid var(--solar-gold); }
.hub-card--amber { border-top: 4px solid var(--solar-amber); }
.hub-card--teal { border-top: 4px solid var(--deep-teal); }
.hub-card h2 { margin-bottom: var(--space-2); font-size: 1.3rem; }
.hub-card p { max-width: 25rem; margin-bottom: .8rem; color: var(--text-secondary); }
.hub-card .button-row { margin-top: auto; justify-content: flex-start; }
.hub-card--insights .hub-emoji { margin-bottom: .65rem; font-size: 1.7rem; line-height: 1; }

.button-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.button,
.copy-btn {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .65rem 1.05rem;
  border: 2px solid var(--deep-teal);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--deep-teal);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.button:hover,
.button--primary,
.copy-btn:hover { background: var(--deep-teal); color: var(--white); }
.hub-card .button::after { content: "→"; margin-left: .55rem; transition: transform .18s ease; }
.hub-card .button:hover::after { transform: translateX(.18rem); }

.content-section { margin-block: 1rem; padding-top: 1rem; padding-bottom: 1rem; }
.content-section:first-of-type { padding-top: 0; }
.content-section h2 { margin-bottom: .65rem; }
.content-section .section-lead { margin-bottom: .8rem; }
.content-card { padding: var(--space-4); }
.takeaway-grid { gap: 1rem; }
.exercise-accordion { overflow: clip; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); }
.exercise-accordion-summary { min-height: 3.25rem; padding: .9rem 1rem; cursor: pointer; }
.exercise-accordion-body { padding: 0 1rem 1rem; }

.prompt-box {
  margin: 1.2rem 0;
  overflow: hidden;
  background: var(--gold-light);
  border: 2px solid var(--solar-gold);
  border-radius: var(--radius-md);
}
.prompt-box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: .7rem 1rem;
  background: rgb(245 166 35 / .15);
  border-bottom: 1px solid rgb(245 166 35 / .2);
}
.prompt-box-tool { color: var(--deep-teal); font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.prompt-box-content {
  max-height: none;
  padding: 1rem;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  font-family: "Source Code Pro", "JetBrains Mono", monospace;
  font-size: .95rem;
  line-height: 1.7;
}
.prompt-box .copy-btn {
  min-height: 0;
  padding: .4rem .7rem;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--deep-solar-amber);
  font-size: .85rem;
}
.prompt-box .copy-btn:hover { background: rgb(245 166 35 / .2); color: var(--deep-solar-amber); }

.workshop-site-footer { margin-top: 2rem; background: var(--deep-teal); color: var(--white); text-align: center; }
.workshop-site-footer-inner { max-width: 36rem; margin: 0 auto; padding: 2.25rem 1.25rem 1.25rem; }
.workshop-site-footer-brand-row { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-bottom: .65rem; }
.workshop-site-footer-brand-row img { display: block; width: auto; height: 2rem; }
.workshop-site-footer-line { margin: 0 0 .4rem; color: rgb(255 255 255 / .72); font-size: .875rem; }
.workshop-site-footer-email { display: inline-block; margin-bottom: .65rem; color: var(--solar-gold); font-size: .875rem; text-decoration: none; }
.workshop-site-footer-legal { padding: 1rem 1.25rem 1.5rem; border-top: 1px solid rgb(255 255 255 / .1); }
.workshop-site-footer-legal p { margin: .2rem 0; color: var(--white); font-size: .75rem; line-height: 1.45; }

@media (max-width: 900px) {
  .workshop-header-actions { display: none; }
  .workshop-header-burger { display: inline-flex; }
}
@media (max-width: 560px) {
  .workshop-header-logo-text { font-size: 1rem; }
  .workshop-hero { padding-top: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}