/* ==========================================================================
   Kalle Glauch Sprachunterricht – Layout und Komponenten
   Reihenfolge: Basis · Layout · Typografie · Komponenten · Abschnitte · Responsive
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Basis
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-ink);
}

p {
  margin: 0 0 var(--space-4);
}

p:last-child {
  margin-bottom: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid rgba(31, 53, 82, 0.28);
  outline-offset: 3px;
  border-radius: var(--radius-small);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--color-ink);
  color: var(--color-white);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--duration-standard) ease;
}

.skip-link:focus {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   2. Layout
   -------------------------------------------------------------------------- */

.container {
  width: min(calc(100% - (2 * var(--page-padding))), var(--container-wide));
  margin-inline: auto;
}

.container--standard {
  max-width: var(--container-standard);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.section {
  padding-block: clamp(3rem, 12vw, 4rem);
}

.section--subtle {
  background: var(--color-surface-subtle);
}

.grid {
  display: grid;
  gap: var(--space-6);
}

/* Zusammengehörige Elemente stehen enger beieinander (Designsystem 5.2) */
.stack-tight > * + * {
  margin-top: var(--space-3);
}

.stack > * + * {
  margin-top: var(--space-5);
}

.stack-wide > * + * {
  margin-top: var(--space-6);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

/* --------------------------------------------------------------------------
   3. Typografie
   -------------------------------------------------------------------------- */

/* Der Hero-Text steht in einer 7-von-12-Spalte, nicht über die volle Breite.
   Die Obergrenze von --text-hero (6rem) würde dort umbrechen, deshalb 4rem. */
.hero-title {
  font-size: clamp(2.5rem, 5.5vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.heading-large {
  font-size: clamp(2.25rem, 4vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.heading-small {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.12;
}

.heading-card {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.2;
  font-weight: 600;
}

.eyebrow {
  display: block;
  margin-bottom: var(--space-4);
  color: var(--color-ink-soft);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.prose {
  max-width: 66ch;
}

.lead {
  font-size: clamp(1.125rem, 1.6vw, 1.3rem);
  line-height: 1.55;
  color: var(--color-ink-soft);
}

.small {
  font-size: var(--text-sm);
  line-height: 1.5;
}

.muted {
  color: var(--color-ink-muted);
}

/* Ein einzelnes Wort in Terracotta – sparsam einsetzen (Designsystem 4.7) */
.accent-word {
  color: var(--color-terracotta);
  font-style: normal;
}

/* Kurze, leicht organische Unterstreichung in Apricot (Designsystem 15.1) */
.accent-underline {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.accent-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.1em;
  height: 0.32em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M2 7.2C22 3.4 47 2.2 70 3.6c17 1 32 2.8 48 4.6' fill='none' stroke='%23D89A6A' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   4. Buttons und Links
   -------------------------------------------------------------------------- */

.button-primary,
.button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  min-width: 44px;
  padding: 0.875rem 1.4rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--duration-standard) ease,
    background-color var(--duration-standard) ease,
    box-shadow var(--duration-standard) ease;
}

.button-primary {
  border: 1px solid var(--color-ink);
  background: var(--color-ink);
  color: var(--color-white);
}

.button-primary:hover {
  transform: translateY(-2px);
  background: var(--color-ink-strong);
  box-shadow: var(--shadow-hover);
}

.button-secondary {
  border: 1px solid var(--color-ink);
  background: transparent;
  color: var(--color-ink);
}

.button-secondary:hover {
  transform: translateY(-2px);
  background: var(--color-sky-light);
  box-shadow: var(--shadow-soft);
}

.text-link {
  color: var(--color-terracotta);
  font-weight: 650;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.text-link:hover {
  text-decoration-thickness: 2px;
}

/* --------------------------------------------------------------------------
   5. Karten, Linien, Marker
   -------------------------------------------------------------------------- */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.card-interactive {
  transition:
    transform var(--duration-standard) ease,
    border-color var(--duration-standard) ease,
    box-shadow var(--duration-standard) ease;
}

.card-interactive:hover {
  transform: translateY(-3px);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-soft);
}

.card-sage {
  background: var(--color-sage-light);
}

.card-sky {
  background: var(--color-sky-light);
}

.card-warm {
  background: var(--color-surface-warm);
}

.divider {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--color-border);
}

.accent-line {
  width: 4rem;
  height: 2px;
  background: var(--color-apricot);
}

.marker-list {
  display: grid;
  gap: var(--space-3);
}

.marker-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--space-3);
}

.list-marker {
  width: 0.45rem;
  height: 0.45rem;
  margin-top: 0.62em;
  border-radius: 50%;
  background: var(--color-apricot);
  flex: none;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-circle);
  background: var(--color-ink);
  color: var(--color-white);
  flex: none;
}

.icon-circle-light {
  background: var(--color-sky-light);
  color: var(--color-ink);
  border: 1px solid var(--color-border);
}

.icon-circle svg,
.icon-circle-light svg {
  width: 24px;
  height: 24px;
}

/* Line-Art-Illustrationen: einheitliche Strichstärke, runde Enden */
.line-art {
  width: 100%;
  height: auto;
  color: var(--color-ink);
}

.line-art [data-accent] {
  stroke: var(--color-apricot);
}

.line-art [data-accent-fill] {
  fill: var(--color-apricot);
  stroke: none;
}

/* --------------------------------------------------------------------------
   6. Kopfbereich und Navigation
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-background);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-standard) ease;
}

.site-header[data-scrolled="true"] {
  border-bottom-color: var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-4);
}

.wordmark {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.1;
  text-decoration: none;
  color: var(--color-ink);
}

.wordmark__name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.wordmark__role {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.nav-link {
  position: relative;
  display: inline-block;
  padding-block: var(--space-2);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 0.925rem;
  font-weight: 600;
  text-decoration: none;
}

/* Aktive Links erhalten eine kurze apricotfarbene Linie (Designsystem 14.3) */
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--color-apricot);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-standard) ease;
}

.nav-link:hover::after,
.nav-link[aria-current="true"]::after {
  transform: scaleX(1);
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
}

.nav-toggle svg {
  width: 18px;
  height: 18px;
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.hero {
  padding-block: clamp(2.5rem, 8vw, 5rem) clamp(3rem, 9vw, 6rem);
  /* Nötig als Mischpartner für die Illustration: der Hintergrund von body wird
     auf die Zeichenfläche hochgezogen, und mit der mischt mix-blend-mode nicht. */
  background: var(--color-background);
}

.hero__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

.hero__meta li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.hero__meta li + li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-border-strong);
}

.hero__actions {
  margin-top: var(--space-6);
}

/* --------------------------------------------------------------------------
   8. Porträt
   -------------------------------------------------------------------------- */

.portrait {
  position: relative;
  /* Das Foto ist 396 Pixel breit: nicht darüber hinaus skalieren, sonst wird es unscharf */
  max-width: 24rem;
  margin-inline: auto;
}

.portrait::before {
  content: "";
  position: absolute;
  inset: -6% -6% -10% -6%;
  border-radius: 48% 52% 44% 56% / 52% 44% 56% 48%;
  background: var(--color-sage-light);
  z-index: -1;
}

.portrait img {
  width: 100%;
  border-radius: 46% 54% 42% 58% / 50% 46% 54% 50%;
  border: 1px solid var(--color-border);
}

/* --------------------------------------------------------------------------
   9. Abschnittsköpfe und Karten-Raster
   -------------------------------------------------------------------------- */

.section__head {
  max-width: 46rem;
  margin-bottom: clamp(2rem, 5vw, 3rem);
}

.card-grid {
  display: grid;
  gap: var(--space-5);
}

.subject-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.subject-card__illustration {
  width: 84px;
  flex: none;
}

.subject-card .heading-card {
  margin-bottom: var(--space-3);
}

.subject-card ul {
  margin-top: var(--space-5);
}

/* Zielgruppen */
.audience-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: start;
}

/* Ablauf in drei Schritten */
.steps {
  counter-reset: step;
  display: grid;
  gap: var(--space-6);
}

.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  align-items: start;
}

.step__number {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 600;
  line-height: 1;
  color: var(--color-apricot);
}

/* Orte */
.places {
  display: grid;
  gap: var(--space-5);
}

.place-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* Preise */
.price-panel {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

/* FAQ */
.faq {
  border-top: 1px solid var(--color-border);
}

.faq__item {
  border-bottom: 1px solid var(--color-border);
}

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 56px;
  padding-block: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary::after {
  content: "";
  width: 12px;
  height: 12px;
  flex: none;
  border-right: 2px solid var(--color-apricot);
  border-bottom: 2px solid var(--color-apricot);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--duration-standard) ease;
}

.faq__item[open] summary::after {
  transform: rotate(225deg) translateY(-2px);
}

.faq__answer {
  max-width: 66ch;
  padding-bottom: var(--space-5);
  color: var(--color-ink-soft);
}

/* --------------------------------------------------------------------------
   10. Formular
   -------------------------------------------------------------------------- */

.contact-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}

.form-grid {
  display: grid;
  gap: var(--space-5);
}

.field {
  display: block;
}

.label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--color-ink);
  font-size: 0.875rem;
  font-weight: 700;
}

.label__optional {
  font-weight: 400;
  color: var(--color-ink-muted);
}

.input {
  width: 100%;
  min-height: 48px;
  padding: 0.875rem 1rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-small);
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.4;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.input:focus {
  outline: none;
  border-color: var(--color-ink);
  box-shadow: 0 0 0 3px rgba(31, 53, 82, 0.12);
}

select.input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231F3552' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M4 6.5 8 10.5l4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 16px;
  padding-right: 2.6rem;
}

textarea.input {
  min-height: 140px;
  resize: vertical;
}

.checkbox-field {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-ink-soft);
}

.checkbox-field input {
  width: 20px;
  height: 20px;
  margin-top: 0.15em;
  accent-color: var(--color-ink);
}

.field-error {
  display: none;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  color: var(--color-terracotta);
  font-size: var(--text-sm);
  font-weight: 600;
}

.field-error::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
}

.field[data-invalid="true"] .input {
  border-color: var(--color-terracotta);
}

.field[data-invalid="true"] .field-error {
  display: flex;
}

.contact-aside dt {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.contact-aside dd {
  margin: var(--space-1) 0 var(--space-5);
  font-weight: 600;
}

.contact-aside dd:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   11. Fußbereich
   -------------------------------------------------------------------------- */

.site-footer {
  padding-block: var(--space-7) var(--space-6);
  border-top: 1px solid var(--color-border);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}

.site-footer a {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}

/* --------------------------------------------------------------------------
   11b. Startseite: Bausteine, Vorstellungsbox, Handlungsband
   -------------------------------------------------------------------------- */

/* Illustration im Hero. Das Bild hat einen weissen Hintergrund; multiply
   verrechnet ihn mit dem Seitenhintergrund, sodass er exakt passt – egal
   welchen Ton der Abschnitt hat. Das spart gegenüber einer freigestellten
   Datei mit Alphakanal rund zwei Drittel Dateigrösse.
   Voraussetzung: der Hintergrund dahinter bleibt hell. */
.hero-art {
  max-width: 34rem;
  margin-inline: auto;
}

.hero-art img {
  width: 100%;
  mix-blend-mode: multiply;
}

/* Vorstellungsbox, angelehnt an den Flyer */
.intro-box {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--color-apricot);
  border-radius: var(--radius-large);
  background: var(--color-surface);
}

.intro-box__portrait {
  width: 132px;
  height: 132px;
  flex: none;
  border-radius: var(--radius-circle);
  border: 1px solid var(--color-border);
  object-fit: cover;
  background: var(--color-sand-light);
}

.intro-box__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-terracotta);
  margin-bottom: var(--space-3);
}

/* Bausteine als verlinkte Karten */
.block-grid {
  display: grid;
  gap: var(--space-5);
}

.block-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  padding: clamp(1.5rem, 2.6vw, 2rem);
  text-decoration: none;
  color: inherit;
  transition:
    transform var(--duration-standard) ease,
    border-color var(--duration-standard) ease,
    box-shadow var(--duration-standard) ease;
}

.block-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-soft);
}

.block-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.block-card__number {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-apricot);
  line-height: 1;
}

.block-card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.2;
}

.block-card__text {
  color: var(--color-ink-soft);
  font-size: var(--text-base);
  margin: 0;
}

.block-card__more {
  margin-top: auto;
  color: var(--color-terracotta);
  font-size: var(--text-sm);
  font-weight: 700;
}

.block-card:hover .block-card__more {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* Handlungsband, angelehnt an den Kasten im Flyer */
.cta-band {
  display: grid;
  gap: var(--space-5);
  justify-items: center;
  text-align: center;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border: 1px solid var(--color-apricot);
  border-radius: var(--radius-large);
  background: var(--color-surface);
}

.cta-band__text {
  max-width: 46ch;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.3;
}

/* Hinweisfeld für vorübergehende Zustände, derzeit der Aufnahmestopp.
   Bewusst ruhig gehalten: Apricot statt einer Warnfarbe, denn es ist eine
   Auskunft und kein Fehler. Wer es entfernt, muss auch den Hinweis auf
   contatto.html und die Antwort im Chat anfassen – sonst widerspricht sich
   die Seite. */
.notice {
  max-width: 60ch;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-apricot);
  border-left-width: 4px;
  border-radius: var(--radius-medium);
  background: var(--color-surface-warm);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.notice strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
}

.notice p {
  margin: 0;
}

.notice p + p {
  margin-top: var(--space-2);
}

/* Auf der Kontaktseite trägt der Hinweis den Abschnitt und darf breiter sein */
.notice--wide {
  max-width: none;
}

/* Studentenstimmen. Hier stehen ausschliesslich Sätze, die die Person wirklich
   gesagt hat, mit ihrem Einverständnis. Nichts hier nachdichten: eine erfundene
   Empfehlung ist genau der Schaden, den dieser Abschnitt verhindern soll. */
.quote {
  margin: 0;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-apricot);
  border-radius: var(--radius-medium);
  background: var(--color-surface);
}

.quote__text {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  line-height: 1.45;
  color: var(--color-ink);
}

.quote__source {
  display: block;
  margin-top: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-style: normal;
  color: var(--color-ink-muted);
}

.quote__source strong {
  color: var(--color-ink);
  font-weight: 700;
}

/* Laufende Lernwege, ohne Namen: zeigt die Bandbreite der Arbeit, ohne über
   Dritte etwas zu veröffentlichen, das sie nicht freigegeben haben. */
.goals {
  display: grid;
  gap: var(--space-4);
  margin-top: clamp(1.5rem, 3vw, 2rem);
}

@media (min-width: 48rem) {
  .goals {
    grid-template-columns: repeat(3, 1fr);
  }
}

.goals__item {
  padding: var(--space-4) var(--space-5);
  border-top: 2px solid var(--color-apricot-light);
  font-size: var(--text-sm);
  line-height: 1.55;
}

.goals__item strong {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   11c. Unterseiten
   -------------------------------------------------------------------------- */

.page-hero {
  padding-block: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 4vw, 2.5rem);
  /* Wie beim Hero der Startseite: eigener Hintergrund, damit die Illustration
     mit multiply darauf rechnen kann (siehe .hero und .art-blend). */
  background: var(--color-background);
}

.page-hero__grid {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

.page-hero__art {
  max-width: 15rem;
  justify-self: center;
}

.figure-line {
  margin: 0;
  max-width: 26rem;
}

.figure-line img {
  width: 100%;
}

/* Illustration als Rasterbild mit weissem Hintergrund. multiply verrechnet das
   Weiss mit dem Cremeton des Abschnitts, sodass kein Rechteck sichtbar bleibt.
   Der Abschnitt dahinter muss einen eigenen hellen Hintergrund haben. */
.art-blend img {
  mix-blend-mode: multiply;
}

/* Nummerierte Abschnittsüberschrift wie im Flyer */
.numbered-heading {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 600;
  line-height: 1.15;
}

.numbered-heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.numbered-heading__index {
  color: var(--color-apricot);
}

/* Kontaktangaben mit runden Icons */
.contact-list {
  display: grid;
  gap: var(--space-5);
}

.contact-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: center;
}

.contact-list__value {
  font-weight: 700;
  font-size: var(--text-lg);
}

.contact-list a {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* Weiterführung am Seitenende */
.page-next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

/* --------------------------------------------------------------------------
   11c2. Terminbuchung
   -------------------------------------------------------------------------- */

.booking {
  display: grid;
  gap: var(--space-6);
}

.booking__calendar {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
}

/* Rahmen um den eingebetteten Kalender, damit er als Teil der Seite liest
   und nicht als hineingeklebtes Fremdelement */
.booking-frame {
  width: 100%;
  min-height: 34rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  background: var(--color-surface);
  overflow: hidden;
}

.booking-note {
  max-width: 58ch;
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-ink-muted);
}

/* --------------------------------------------------------------------------
   11d. Chat-Fenster
   -------------------------------------------------------------------------- */

.chat-launcher {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 52px;
  padding: 0 1.25rem;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.925rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition:
    transform var(--duration-standard) ease,
    box-shadow var(--duration-standard) ease;
}

.chat-launcher:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.chat-launcher svg {
  width: 20px;
  height: 20px;
  flex: none;
}

.chat-panel {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 71;
  display: flex;
  flex-direction: column;
  width: min(24rem, calc(100vw - 2rem));
  max-height: min(34rem, calc(100vh - 2rem));
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-large);
  background: var(--color-surface);
  box-shadow: var(--shadow-hover);
  overflow: hidden;
}

.chat-panel[hidden] {
  display: none;
}

.chat-panel__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-subtle);
}

.chat-panel__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.2;
}

.chat-panel__subtitle {
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

.chat-panel__close {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 0;
  border-radius: var(--radius-circle);
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
}

.chat-panel__close:hover {
  background: var(--color-sand-light);
}

.chat-panel__close svg {
  width: 18px;
  height: 18px;
}

.chat-log {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.chat-message {
  max-width: 88%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-medium);
  font-size: 0.95rem;
  line-height: 1.55;
}

.chat-message p {
  margin: 0 0 var(--space-3);
}

.chat-message p:last-child {
  margin-bottom: 0;
}

.chat-message ul {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
}

.chat-message li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
}

.chat-message li::before {
  content: "";
  width: 0.35rem;
  height: 0.35rem;
  margin-top: 0.6em;
  border-radius: 50%;
  background: var(--color-apricot);
}

.chat-message--bot {
  align-self: flex-start;
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  color: var(--color-ink);
}

.chat-message--user {
  align-self: flex-end;
  background: var(--color-ink);
  color: var(--color-white);
}

.chat-message a {
  color: inherit;
  font-weight: 700;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0 var(--space-5) var(--space-4);
}

.chat-chip {
  min-height: 36px;
  padding: 0 0.85rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) ease,
    border-color var(--duration-fast) ease;
}

.chat-chip:hover {
  background: var(--color-sky-light);
  border-color: var(--color-ink);
}

.chat-form {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}

.chat-form .input {
  min-height: 44px;
  padding: 0.6rem 0.85rem;
  font-size: 0.95rem;
}

.chat-form button {
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
}

.chat-note {
  padding: 0 var(--space-5) var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

/* --------------------------------------------------------------------------
   12. Platzhaltermarkierung (nur während der Entwicklung)
   Vor dem Livegang dürfen keine .placeholder-Elemente mehr vorhanden sein.
   -------------------------------------------------------------------------- */

.placeholder {
  padding: 0 0.25em;
  border-bottom: 2px dotted var(--color-apricot);
  background: var(--color-apricot-light);
  border-radius: 3px;
  font-style: normal;
}

/* --------------------------------------------------------------------------
   13. Dezentes Einblenden beim Scrollen
   -------------------------------------------------------------------------- */

/* Die Klasse js-reveal setzt main.js selbst. Ohne JavaScript – oder wenn das
   Skript nicht lädt – bleibt jeder Inhalt sichtbar. */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--duration-slow) ease,
    transform var(--duration-slow) ease;
}

.js-reveal [data-reveal][data-visible="true"] {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   14. Responsive – Inhalte werden neu angeordnet, nicht nur verkleinert
   -------------------------------------------------------------------------- */

/* Unter 48rem: einspaltig, Navigation als Panel */
@media (max-width: 47.999rem) {
  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 60;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--space-6);
    padding: var(--space-5) var(--page-padding) var(--space-8);
    background: var(--color-background);
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transition:
      opacity var(--duration-standard) ease,
      visibility var(--duration-standard) ease;
  }

  .site-nav[data-open="true"] {
    visibility: visible;
    opacity: 1;
  }

  .site-nav__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 52px;
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav-list li {
    border-bottom: 1px solid var(--color-border);
  }

  .nav-link {
    display: flex;
    align-items: center;
    min-height: 56px;
    font-size: var(--text-lg);
  }

  .nav-link::after {
    display: none;
  }

  .site-nav .button-primary {
    width: 100%;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .hero__actions .button-primary,
  .hero__actions .button-secondary,
  .contact-form .button-primary {
    width: 100%;
  }

  .subject-card__illustration {
    width: 64px;
  }

  /* Porträts und Illustrationen bleiben klein (Designsystem 17.5) */
  .portrait {
    max-width: 17rem;
  }

  .intro-box {
    justify-items: center;
    text-align: center;
  }

  .hero-art {
    max-width: 21rem;
  }

  .chat-panel {
    right: 0;
    bottom: 0;
    width: 100vw;
    max-height: 100vh;
    height: 100%;
    border-radius: 0;
    border-width: 0;
  }

  .chat-launcher span {
    display: none;
  }

  .chat-launcher {
    width: 56px;
    min-height: 56px;
    padding: 0;
    justify-content: center;
  }
}

/* Ab 48rem: Desktop-Navigation, zweispaltige Bereiche */
@media (min-width: 48rem) {
  .site-nav__head {
    display: none;
  }

  .section {
    padding-block: clamp(5rem, 9vw, 7rem);
  }

  .card-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-grid {
    grid-template-columns: 7fr 4fr;
  }

  .form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }

  .places {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .price-panel {
    grid-template-columns: 6fr 5fr;
  }

  .block-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .intro-box {
    grid-template-columns: auto 1fr;
  }

  .page-hero__grid {
    grid-template-columns: 7fr 4fr;
  }
}

/* Der Aufruf im Kopfbereich erscheint erst, wenn genug Platz da ist */
@media (max-width: 63.999rem) and (min-width: 48rem) {
  .site-nav .button-primary {
    display: none;
  }
}

/* Ab 64rem: 12-Spalten-Verhältnisse aus dem Designsystem (6.2) */
@media (min-width: 64rem) {
  .hero__grid {
    grid-template-columns: 7fr 5fr;
  }

  .about-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
  }

  .card-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .card-grid--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6) var(--space-7);
  }

  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-7);
  }

  .where-grid {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
  }

  .block-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   15. Reduzierte Bewegung
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .js-reveal [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   16. Druck
   -------------------------------------------------------------------------- */

@media print {
  .site-header,
  .nav-toggle,
  .contact-form {
    display: none;
  }

  body {
    background: var(--color-white);
  }
}