/* Linguaboard – Stylesheet
   Farben: Papier, Graphit, Bronze (Logo), Tafelgrün, Briefkastenrot (nur Aktionen und Randnotizen) */

@font-face { font-family: "Zilla Slab"; font-weight: 500; font-style: normal; font-display: swap; src: url(fonts/zillaslab-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Zilla Slab"; font-weight: 700; font-style: normal; font-display: swap; src: url(fonts/zillaslab-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Zilla Slab"; font-weight: 500; font-style: italic; font-display: swap; src: url(fonts/zillaslab-500-italic.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-style: normal; font-display: swap; src: url(fonts/atkinsonhyperlegible-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-style: italic; font-display: swap; src: url(fonts/atkinsonhyperlegible-400-italic.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-style: normal; font-display: swap; src: url(fonts/atkinsonhyperlegible-700-normal.woff2) format("woff2"); }

:root {
  --paper: #f4f6f5;
  --paper-deep: #e8ece9;
  --ink: #23272b;
  --ink-soft: #4f565c;
  --bronze: #7b4a1f;
  --board: #2e4a3f;
  --board-ink: #eef2ee;
  --chalk: #c9d6cd;
  --red: #b3202d;
  --rule: #cdd3cf;
  --serif: "Zilla Slab", Rockwell, "Roboto Slab", Georgia, serif;
  --sans: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --step--1: 0.82rem;
  --step-0: 1rem;
  --step-1: 1.12rem;
  --step-2: 1.4rem;
  --step-3: 1.75rem;
  --step-4: clamp(1.8rem, 3.4vw, 2.5rem);
  --measure: 70ch;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --wide: 64rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: var(--step-0); line-height: 1.65; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--bronze); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--red); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.15; color: var(--ink); margin: 0; }
p { margin: 0 0 1em; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wide)); margin-inline: auto; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 50; background: var(--ink); color: var(--paper); padding: 0.6rem 1rem; text-decoration: none; }
.skip:focus { top: 1rem; color: var(--paper); }

/* Kopfzeile */
.masthead { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--rule); }
.masthead .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 4.75rem; }
.brand { display: block; flex: none; }
.brand img { width: 230px; mix-blend-mode: multiply; }
@media (max-width: 22.5rem) { .brand img { width: 190px; } }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0.25rem 1.6rem; }
.nav a { color: var(--ink); text-decoration: none; font-size: 0.92rem; padding: 0.6rem 0; display: inline-block; }
.nav a:hover { color: var(--red); }
.nav a { transition: color 0.2s, box-shadow 0.2s; }
.nav a[aria-current] { color: var(--bronze); box-shadow: inset 0 -2px 0 var(--bronze); }
@media (prefers-reduced-motion: reduce) { .nav a { transition: none; } }
.nav-toggle { display: none; }
@media (max-width: 52rem) {
  .nav { display: none; }
  .nav-toggle { display: block; position: relative; }
  .nav-toggle summary { list-style: none; cursor: pointer; font-weight: 700; padding: 0.55rem 0.9rem; min-height: 44px; border: 1px solid var(--ink); border-radius: 3px; display: flex; align-items: center; }
  .nav-toggle summary::-webkit-details-marker { display: none; }
  .nav-toggle[open] summary { background: var(--ink); color: var(--paper); }
  .nav-toggle ul { position: absolute; right: 0; top: calc(100% + 0.5rem); width: min(80vw, 18rem); list-style: none; margin: 0; padding: 0.5rem 0; background: var(--paper); border: 1px solid var(--ink); box-shadow: 6px 6px 0 var(--paper-deep); }
  .nav-toggle a { display: block; padding: 0.75rem 1.1rem; color: var(--ink); text-decoration: none; }
  .nav-toggle a:hover { background: var(--paper-deep); }
  .nav-toggle a[aria-current] { font-weight: 700; color: var(--bronze); box-shadow: inset 3px 0 0 var(--bronze); background: var(--paper-deep); }
}

/* Randnotiz: englische Zeile unter deutschen Überschriften */
.note { display: inline-block; font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--red); font-size: var(--step-1); line-height: 1.3; margin-top: 0.35rem; position: relative; padding-bottom: 0.45rem; }
.note svg { position: absolute; left: -2%; bottom: 0; width: 104%; height: 0.55rem; overflow: visible; }
.note path { fill: none; stroke: var(--red); stroke-width: 2.2; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* Einstieg */
.hero { position: relative; padding-block: clamp(2.5rem, 6vw, 4.5rem); overflow: hidden; }
.hero-text { position: relative; z-index: 2; }
.hero-text > * { max-width: 36rem; }
.hero h1 { font-size: var(--step-4); letter-spacing: -0.01em; }
.hero h1 span { display: block; color: var(--bronze); font-weight: 500; }
.hero .note { font-size: var(--step-1); margin-top: 0.4rem; }
.hero .lede { font-size: 1.05rem; line-height: 1.6; color: var(--ink-soft); margin-top: 1.2rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.8rem 1.4rem; align-items: center; margin-top: 1.4rem; }
.button { display: inline-flex; align-items: center; background: var(--red); color: #fff; text-decoration: none; padding: 0.6rem 1.15rem; border-radius: 3px; min-height: 44px; font-size: 0.95rem; border: 0; font: inherit; font-weight: 700; cursor: pointer; }
.button:hover { background: #8f1823; color: #fff; }
.reach { line-height: 1.35; }
.reach .phone { margin: 0; color: var(--ink); font-weight: 700; }
.mail-hint { margin: 0; color: var(--ink-soft); font-size: 0.9rem; }
.mail-hint a { color: var(--ink); font-weight: 700; text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s; }
.mail-hint a:hover, .mail-hint a:focus-visible { color: var(--red); border-bottom-color: var(--red); }
.audiences { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; }
.audiences p { margin: 0 0.25rem 0 0; color: var(--ink-soft); font-size: 0.9rem; }
.audiences a { color: var(--ink); text-decoration: none; font-size: 0.9rem; background: var(--paper); border: 1px solid var(--ink-soft); border-radius: 999px; padding: 0.3rem 0.85rem; }
.audiences a:hover { background: var(--ink); color: var(--paper); }
.skyline { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.skyline img { width: 100%; height: 100%; object-fit: cover; object-position: center 70%; mix-blend-mode: multiply; opacity: 0.3; filter: grayscale(0.35); }
.skyline::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(244, 246, 245, 0.35) 0%, rgba(244, 246, 245, 0.7) 30%, rgba(244, 246, 245, 0.55) 50%, rgba(244, 246, 245, 0.15) 75%, rgba(244, 246, 245, 0.3) 100%), linear-gradient(to bottom, transparent 70%, var(--paper) 100%); }

@media (prefers-reduced-motion: no-preference) {
  .hero .note path { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: draw 1.1s 0.5s ease-out forwards; }
  @keyframes draw { to { stroke-dashoffset: 0; } }
}

/* Abschnitte */
.section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.section-head { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.section-head h2 { font-size: var(--step-3); }

/* Ansatz */
.approach { border-top: 1px solid var(--rule); }
.essays { display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); }
.essay h3 { font-size: var(--step-2); color: var(--bronze); font-weight: 500; }
.essay .note { font-size: 0.98rem; margin-bottom: 0.9rem; }
.essay p { max-width: var(--measure); }
.essay .note + p::first-letter { font-family: var(--serif); font-weight: 700; float: left; font-size: 2.9em; line-height: 0.85; padding: 0.08em 0.1em 0 0; color: var(--bronze); }

/* Kurse */
.courses { background: var(--paper-deep); }
.course { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); padding-block: clamp(1.75rem, 3vw, 2.5rem); border-top: 1px solid var(--rule); }
.course:first-of-type { border-top: 0; padding-top: 0; }
.course:nth-of-type(even) { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.course:nth-of-type(even) .course-art { order: 2; }
.course-art img { border: 1px solid var(--ink); background: #fff; }
.course h3 { font-size: var(--step-2); }
.course .for { margin: 0.3rem 0 0; font-weight: 700; color: var(--bronze); font-size: 0.9rem; }
.course .note { font-size: 0.98rem; margin-bottom: 0.8rem; }
.course p { max-width: var(--measure); }
@media (max-width: 48rem) {
  .course, .course:nth-of-type(even) { grid-template-columns: 1fr; }
  .course:nth-of-type(even) .course-art { order: 0; }
}
.formats { margin-top: clamp(2rem, 4vw, 3rem); padding: 1.5rem 1.75rem; border: 1px solid var(--ink); background: var(--paper); display: grid; gap: 0.6rem 2.5rem; grid-template-columns: 12rem minmax(0, 1fr); align-items: center; }
.formats ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.2rem; font-family: var(--serif); font-size: var(--step-1); font-weight: 700; }
.formats p { margin: 0; }
@media (max-width: 48rem) { .formats { grid-template-columns: 1fr; } }

/* Preise: dezente, matt-transparente Tafel */
.board {
  background: rgba(46, 74, 63, 0.07); color: var(--ink);
  border: 1px solid rgba(46, 74, 63, 0.22); border-radius: 6px;
  backdrop-filter: blur(4px);
  padding: clamp(1.25rem, 4vw, 2.25rem);
}
.board h2 { color: var(--board); font-size: var(--step-3); }
.board .intro { color: var(--ink-soft); max-width: var(--measure); margin-top: 0.9rem; font-size: 0.95rem; }
.switch { min-width: 0; max-width: 100%; padding: 0.2rem; margin: 1.1rem 0 0.9rem; display: inline-flex; flex-wrap: wrap; border: 1px solid rgba(46, 74, 63, 0.3); border-radius: 999px; background: rgba(255, 255, 255, 0.5); }
.switch legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.switch input { position: absolute; opacity: 0; }
.switch label { cursor: pointer; padding: 0.3rem 0.95rem; border-radius: 999px; min-height: 36px; display: inline-flex; align-items: center; font-size: 0.88rem; color: var(--ink-soft); }
.switch input:checked + label { background: rgba(46, 74, 63, 0.85); color: #fff; }
.switch input:focus-visible + label { outline: 3px solid var(--red); outline-offset: 2px; }
.price-table { width: 100%; max-width: 40rem; border-collapse: collapse; font-size: 0.95rem; }
.price-table caption { text-align: left; color: var(--ink-soft); padding-bottom: 0.4rem; font-size: 0.85rem; }
.price-table th, .price-table td { text-align: left; padding: 0.55rem 0.75rem 0.55rem 0; border-bottom: 1px solid rgba(46, 74, 63, 0.15); vertical-align: baseline; }
.price-table thead th { font-weight: 400; color: var(--ink-soft); font-size: 0.85rem; }
.price-table tbody th { font-weight: 400; }
.price-table .amount { font-weight: 700; color: var(--board); white-space: nowrap; }
.prices:has(#p-gruppe:checked) .col-einzel,
.prices:has(#p-einzel:checked) .col-gruppe { display: none; }
@supports not selector(:has(*)) { .switch { display: none; } }
.board .actions { margin-top: 1.4rem; }
.board .actions p { margin: 0; color: var(--ink-soft); font-size: 0.9rem; }
@media (max-width: 36rem) {
  .price-table thead th { hyphens: auto; }
}
/* Fragen */
.faq-list { max-width: 50rem; border-top: 1px solid var(--ink); }
.faq-list details { border-bottom: 1px solid var(--rule); }
.faq-list summary { cursor: pointer; list-style: none; padding: 0.95rem 2.5rem 0.95rem 0; position: relative; font-family: var(--serif); font-weight: 700; font-size: var(--step-1); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 0.25rem; top: 0.7rem; font-size: 1.4rem; color: var(--red); font-family: var(--sans); transition: transform 0.2s; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { max-width: var(--measure); padding-bottom: 0.6rem; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { .faq-list summary::after { transition: none; } }

/* Kontakt */
.contact { border-top: 1px solid var(--rule); }
.contact-grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
@media (max-width: 52rem) { .contact-grid { grid-template-columns: 1fr; } }
.form label { display: block; font-weight: 700; margin-bottom: 0.35rem; }
.form .field { margin-bottom: 1.25rem; }
.form input, .form textarea, .form select { width: 100%; font: inherit; color: var(--ink); background: #fff; border: 1px solid var(--ink-soft); border-radius: 3px; padding: 0.7rem 0.8rem; min-height: 44px; }
.form textarea { min-height: 10rem; resize: vertical; }
.form input:focus, .form textarea:focus, .form select:focus { outline: 3px solid var(--red); outline-offset: 1px; border-color: var(--ink); }
.form .hint { font-size: var(--step--1); color: var(--ink-soft); margin-top: 0.75rem; }
.form-msg { border-left: 4px solid; border-radius: 3px; padding: 0.85rem 1.1rem 0.2rem; margin-bottom: 1.4rem; }
.form-msg p { margin: 0 0 0.6rem; }
.form-msg.ok { border-color: var(--board); background: rgba(46, 74, 63, 0.09); color: var(--board); }
.form-msg.err { border-color: var(--red); background: rgba(179, 32, 45, 0.07); }
.form-msg:focus { outline: none; }.antispam { border: 1px solid var(--rule); border-radius: 3px; padding: 0.8rem 1rem 0.9rem; background: rgba(255, 255, 255, 0.5); }
.antispam legend { font-weight: 700; padding: 0 0.35rem; }
.as-options { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; }
.form .as-options label { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 400; margin: 0; min-height: 36px; cursor: pointer; }
.form .as-options input { width: 1.1rem; height: 1.1rem; min-height: 0; margin: 0; accent-color: var(--red); }
.as-error { color: var(--red); font-weight: 700; margin: 0.2rem 0 0.6rem; font-size: 0.92rem; }.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.card { border-left: 3px solid var(--bronze); padding-left: 1.5rem; }
.card h3 { font-size: var(--step-1); }
.card address { font-style: normal; margin: 0.5rem 0 1.25rem; }
.card dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; }
.card dt { color: var(--ink-soft); }
.card dd { margin: 0; }
.card dd a { color: var(--ink); font-weight: 700; }

/* Fußzeile */
.footer { background: var(--ink); color: #d7dbd8; padding-block: 1.75rem; font-size: 0.9rem; }
.footer .wrap { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; justify-content: space-between; align-items: baseline; }
.footer a { color: #fff; }
.footer a:hover { color: #f2b8b2; }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.footer p { margin: 0; }
.footer .mark { font-family: var(--serif); font-size: var(--step-1); color: #fff; }
.footer .mark i { font-weight: 500; color: #f2b8b2; }

/* Rechtstexte */
.legal { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.legal .doc > * { max-width: 44rem; }
.legal h1 { font-size: var(--step-3); margin-bottom: 0.3rem; }
.legal h2 { font-size: var(--step-2); margin: 2.6rem 0 0.8rem; color: var(--bronze); font-weight: 500; }
.legal h3 { font-size: var(--step-1); margin: 1.8rem 0 0.5rem; }
.legal p, .legal li { overflow-wrap: anywhere; }
.legal table { width: 100%; border-collapse: collapse; background: var(--paper-deep); margin: 1rem 0 1.5rem; font-size: 1rem; }
.legal td { padding: 1rem 1.2rem; }
.legal img { margin: 1rem 0; border: 1px solid var(--rule); background: #fff; }
.legal .toc { background: var(--paper-deep); padding: 1.25rem 1.5rem; margin: 1.5rem 0 1rem; }
.legal .toc h2 { margin: 0 0 0.5rem; font-size: var(--step-1); color: var(--ink); font-weight: 700; }
.legal .toc ol { margin: 0; padding-left: 1.4rem; columns: 2 16rem; }
.legal .toc li { break-inside: avoid; }

/* Vorschlag Einstieg: ruhige Wegweiser statt Termin-Button */
.hero-text > .paths { max-width: 48rem; margin-top: 1.9rem; }
.paths-title { margin: 0 0 0.7rem; color: var(--ink-soft); font-size: 0.95rem; }
.paths ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.paths a {
  display: block; height: 100%; padding: 0.75rem 1rem 0.8rem; text-decoration: none; color: var(--ink);
  background: rgba(244, 246, 245, 0.75); border: 1px solid var(--rule); border-left: 3px solid var(--bronze); border-radius: 3px;
  transition: border-color 0.2s, background-color 0.2s;
}
.paths a strong { display: block; font-family: var(--serif); font-weight: 700; font-size: 1.05rem; line-height: 1.25; }
.paths a span { display: block; margin-top: 0.15rem; font-size: 0.85rem; color: var(--ink-soft); }
.paths a:hover, .paths a:focus-visible { background: #fff; border-color: var(--bronze); }
.paths a:hover strong { color: var(--bronze); }
.first-talk { margin-top: 1.5rem; max-width: 40rem; }
.first-talk > p:first-child { margin: 0 0 0.45rem; font-size: 0.95rem; color: var(--ink-soft); }
.first-talk strong { color: var(--ink); }
.quiet-contact { margin: 0; font-size: 0.9rem; color: var(--ink-soft); }
.quiet-contact .talk-link { color: var(--bronze); border-bottom-color: var(--bronze); margin-right: 0.2rem; }
.quiet-contact .phone-inline { color: var(--ink); font-weight: 700; white-space: nowrap; }
.quiet-contact a { color: var(--ink); font-weight: 700; text-decoration: none; border-bottom: 1px solid transparent; }
.quiet-contact a:hover, .quiet-contact a:focus-visible { color: var(--red); border-bottom-color: var(--red); }
@media (max-width: 40rem) { .paths ul { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .paths a { transition: none; } }

/* Vorschlag Business English: mögliche Inhalte in vier Gruppen */
.course .topics { grid-column: 1 / -1; order: 3; }
.topics-title { margin: 0 0 0.8rem; font-size: 0.95rem; color: var(--ink-soft); }
.topics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; }
.topics-grid section { background: rgba(255, 255, 255, 0.55); border: 1px solid var(--rule); border-top: 3px solid var(--bronze); border-radius: 3px; padding: 0.85rem 1rem 0.6rem; }
.topics-grid h4 { margin: 0 0 0.45rem; font-family: var(--serif); font-size: 1.02rem; line-height: 1.25; color: var(--ink); }
.topics-grid ul { margin: 0; padding-left: 1.05rem; font-size: 0.9rem; line-height: 1.5; color: var(--ink-soft); }
.topics-grid li { margin-bottom: 0.25rem; }
.topics-grid li::marker { color: var(--bronze); }
@media (max-width: 60rem) { .topics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 36rem) { .topics-grid { grid-template-columns: 1fr; } }