/* the crumble — Komponenten. Lädt nach tokens.css; alle Werte kommen aus den Tokens. Präfix: tc- */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 26px; background: var(--surface); color: var(--ink); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
.tc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Logo: die Wortmarke als Maske, färbt sich mit currentColor ---------- */
.tc-logo { display: inline-block; flex: none; width: 96px; aspect-ratio: 2400 / 1367; background: currentColor;
  -webkit-mask: url("../img/logo.webp") center / contain no-repeat;
          mask: url("../img/logo.webp") center / contain no-repeat; }

/* ---------- Fokus ---------- */
.tc-btn:focus-visible, .tc-iconbtn:focus-visible, .tc-card:focus-visible, .tc-link:focus-visible,
.tc-menu__list a:focus-visible, .tc-check input:focus-visible, .tc-footer a:focus-visible {
  outline: var(--border-outline) solid var(--focus); outline-offset: 2px; }

/* ---------- Icon-Button ---------- */
.tc-iconbtn { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0;
  border-radius: var(--radius-pill); background: transparent; color: inherit; cursor: pointer; transition: background-color .2s ease-out; }
.tc-iconbtn:hover { background: var(--line-soft); }
.tc-icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.tc-count { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill);
  background: var(--brand); color: var(--on-brand); font: 800 11px/18px var(--font-sans); text-align: center; }

/* ---------- Button ---------- */
.tc-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; padding: 0 var(--space-6);
  border: var(--border-outline) solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--ink);
  font: 700 15px/20px var(--font-sans); letter-spacing: .005em; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .2s ease-out, color .2s ease-out, border-color .2s ease-out; }
.tc-btn em { font-style: italic; }
.tc-btn .tc-icon { width: 20px; height: 20px; }
.tc-btn--primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.tc-btn--primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.tc-btn--outline { border-color: var(--line); color: var(--ink); }
.tc-btn--outline:hover { background: var(--ink); color: var(--surface); }
.tc-btn--photo { background: var(--scrim); border-color: var(--ink-on-photo); color: var(--ink-on-photo); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.tc-btn--photo:hover { background: var(--ink-on-photo); color: var(--cup-cocoa); }
.tc-btn--photo:focus-visible { outline-color: var(--ink-on-photo); }
.tc-btn--inverse { background: var(--ink-inverse); border-color: var(--ink-inverse); color: var(--surface-inverse); }
.tc-btn--inverse:hover { background: transparent; color: var(--ink-inverse); }
.tc-btn--inverse:focus-visible { outline-color: var(--ink-inverse); }
.tc-btn--sm { min-height: 36px; padding: 0 var(--space-4); font-size: 14px; }
.tc-btn--block { display: flex; width: 100%; }
.tc-btn[disabled], .tc-btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }

/* ---------- Textlink ---------- */
.tc-link { color: var(--brand); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.tc-link:hover { text-decoration-thickness: 3px; }

/* ---------- Site-Header ---------- */
.tc-header { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--header-height);
  padding: 0 var(--space-4); background: var(--surface); color: var(--ink); }
.tc-header__start { justify-self: start; display: flex; align-items: center; gap: var(--space-4); }
.tc-header__end { justify-self: end; display: flex; align-items: center; gap: var(--space-1); }
.tc-header__brand { display: inline-flex; color: inherit; }
.tc-header__brand .tc-logo { width: 88px; }
.tc-header__nav { display: flex; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.tc-header__nav a { color: inherit; font: 700 16px/24px var(--font-sans); text-decoration: none; }
.tc-header__nav a:hover, .tc-header__nav a[aria-current="page"] { color: var(--brand); }
@media (max-width: 720px) { .tc-header__nav, .tc-header__end .tc-btn { display: none; } }

/* ---------- Hero ---------- */
.tc-hero { position: relative; isolation: isolate; display: grid; place-items: center; min-height: 560px; padding: var(--space-24) var(--space-6);
  overflow: hidden; color: var(--ink-on-photo); text-align: center; }
.tc-hero__media { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.tc-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--scrim); }
.tc-hero__eyebrow { margin: 0 0 var(--space-4); font: 800 13px/16px var(--font-sans); letter-spacing: .12em; }
.tc-hero__title { margin: 0; font: 800 clamp(72px, 13vw, 120px)/.95 var(--font-sans); letter-spacing: -.03em; }
.tc-hero__rule { width: min(300px, 60%); height: var(--border-outline); margin: var(--space-6) auto var(--space-8); border: 0; border-radius: var(--radius-pill); background: var(--ink-on-photo); }
.tc-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4) var(--space-8); }

/* ---------- Section (Farbband) ---------- */
.tc-section { position: relative; isolation: isolate; overflow: hidden; padding: var(--space-24) var(--space-10); color: var(--ink); }
.tc-section--cream { background: var(--surface); }
.tc-section--peach { background: var(--surface-peach); }
.tc-section--blush { background: var(--surface-blush); }
.tc-section--sand { background: var(--surface-sand); }
.tc-section__inner { position: relative; max-width: var(--container-max); margin: 0 auto; }
.tc-section--center { text-align: center; }
.tc-section--center .tc-section__inner { max-width: var(--container-text); }
.tc-section__title { margin: 0 0 var(--space-6); font: 700 40px/46px var(--font-sans); letter-spacing: -.01em; }
.tc-section__lead { margin: 0 0 var(--space-4); font: 500 20px/30px var(--font-sans); }
.tc-section__actions { margin-top: var(--space-8); display: flex; flex-wrap: wrap; gap: var(--space-4); }
.tc-section--center .tc-section__actions { justify-content: center; }
.tc-watermark { position: absolute; z-index: -1; left: 50%; top: 50%; width: min(620px, 80%); aspect-ratio: 2400 / 1367; transform: translate(-50%, -46%) rotate(-4deg);
  background: var(--frame); pointer-events: none;
  -webkit-mask: url("../img/logo.webp") center / contain no-repeat;
          mask: url("../img/logo.webp") center / contain no-repeat; }
.tc-section--peach .tc-watermark, .tc-section--sand .tc-watermark { opacity: .55; }
[data-theme="dark"] .tc-watermark { opacity: .4; }
@media (max-width: 640px) { .tc-section { padding: var(--space-16) var(--space-4); } .tc-section__title { font-size: 32px; line-height: 38px; } }

/* ---------- Section-Titel mit Strich ---------- */
.tc-section-title { margin: 0 0 var(--space-12); font: 700 40px/46px var(--font-sans); letter-spacing: -.01em; color: var(--ink); }
.tc-section-title::before { content: ""; display: block; width: min(var(--section-rule-width), 50%); height: var(--border-frame); margin-bottom: var(--space-6);
  border-radius: var(--radius-pill); background: var(--frame); }
.tc-section--cream .tc-section-title::before, .tc-section-title--brand::before { background: var(--brand); }
@media (max-width: 640px) { .tc-section-title { font-size: 32px; line-height: 38px; margin-bottom: var(--space-8); } }

/* ---------- Produktkarte ---------- */
.tc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: var(--space-8); }
.tc-card { position: relative; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-3) var(--space-3) var(--space-5);
  border: var(--border-frame) solid var(--frame); border-radius: var(--radius-lg); color: inherit; text-decoration: none;
  transition: transform .2s ease-out, box-shadow .2s ease-out; }
a.tc-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.tc-card__media { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-sm); }
.tc-card__body { display: grid; gap: var(--space-1); text-align: center; }
.tc-card__title { margin: 0; font: 800 20px/26px var(--font-sans); color: var(--ink-muted); }
.tc-card__meta { margin: 0; font: 400 14px/22px var(--font-sans); color: var(--ink-muted); }
.tc-card > .tc-seal { position: absolute; top: calc(var(--space-4) * -1); right: calc(var(--space-4) * -1); }

/* ---------- Siegel „neu“ ---------- */
.tc-seal { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent);
  font: italic 900 18px/1 var(--font-sans); letter-spacing: -.01em; transform: rotate(-10deg);
  outline: var(--border-hairline) dashed var(--on-accent); outline-offset: -6px; }
.tc-seal--lg { width: 88px; height: 88px; font-size: 24px; outline-offset: -8px; }
.tc-seal--brand { background: var(--brand); color: var(--on-brand); outline-color: var(--on-brand); }

/* ---------- Build-Steps ---------- */
.tc-steps { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3) var(--space-10); margin: 0; padding: 0;
  list-style: none; counter-reset: step; font: 500 20px/30px var(--font-sans); }
.tc-steps--arrow::before { content: "→"; font-size: 24px; font-weight: 400; }
.tc-steps li { counter-increment: step; }
.tc-steps li::before { content: counter(step) ". "; font-weight: 800; }
.tc-build { display: grid; gap: var(--space-6); max-width: 960px; margin: 0 auto; }
.tc-build__media { width: 100%; aspect-ratio: 1800 / 620; object-fit: cover; border-radius: var(--radius-lg); }
.tc-build .tc-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); text-align: center; }
.tc-build .tc-steps span { display: block; font: 400 14px/22px var(--font-sans); color: var(--ink-muted); }
@media (max-width: 560px) { .tc-build .tc-steps { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Split-Feature ---------- */
.tc-split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 480px; background: var(--surface); color: var(--ink); }
.tc-split__body { align-self: center; max-width: 560px; padding: var(--space-16) var(--space-10); }
.tc-split__title { margin: 0 0 var(--space-6); font: 700 40px/46px var(--font-sans); letter-spacing: -.01em; }
.tc-split__text { margin: 0 0 var(--space-8); }
.tc-split__media { width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
.tc-split__media--arch { align-self: end; height: calc(100% - var(--space-10)); width: calc(100% - var(--space-10)); border-radius: var(--radius-pill) var(--radius-pill) 0 0; }
.tc-split--reverse .tc-split__media { order: -1; justify-self: end; }
@media (max-width: 640px) { .tc-split { grid-template-columns: 1fr; } .tc-split__body { padding: var(--space-12) var(--space-4); } .tc-split__media--arch { width: 100%; } }

/* ---------- Statement ---------- */
.tc-statement { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 520px;
  padding: var(--space-16) var(--space-10); color: var(--ink-on-photo); }
.tc-statement__media { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.tc-statement::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, var(--scrim) 0%, var(--scrim) 40%, transparent 90%); }
.tc-statement__kicker { margin: 0 0 var(--space-2); font: 700 28px/34px var(--font-sans); }
.tc-statement__word { margin: 0; font: 800 clamp(72px, 17vw, 180px)/.88 var(--font-sans); letter-spacing: -.04em; }

/* ---------- Social-Strip ---------- */
.tc-social { text-align: center; }
.tc-social__title { margin: 0; font: 700 28px/34px var(--font-sans); }
.tc-social__handles { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2) var(--space-3); margin: var(--space-3) 0 var(--space-8); }
.tc-handle { color: var(--ink); font: italic 600 18px/24px var(--font-sans); text-decoration: none; }
.tc-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--space-3); border: var(--border-hairline) solid var(--line); border-radius: var(--radius-pill);
  color: var(--ink); font: 700 13px/16px var(--font-sans); text-decoration: none; }
.tc-reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin-top: var(--space-12); }
.tc-reels img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-sm); }

/* ---------- Standortkarte ---------- */
.tc-location { display: flex; flex-direction: column; gap: var(--space-4); max-width: 360px; padding: var(--space-3) var(--space-3) var(--space-5);
  border: var(--border-frame) solid var(--frame); border-radius: var(--radius-lg); color: var(--ink); }
.tc-location__media { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); }
.tc-location__media--arch { aspect-ratio: 4 / 5; border-radius: var(--radius-pill) var(--radius-pill) var(--radius-sm) var(--radius-sm); }
.tc-location__body { display: grid; gap: var(--space-3); padding: 0 var(--space-1); }
.tc-location__address { margin: 0; font: 400 16px/24px var(--font-sans); }
.tc-location__rule { height: 2px; margin: 0; border: 0; border-radius: var(--radius-pill); background: var(--frame); }
.tc-location__hours { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-4); margin: 0; font: 400 14px/22px var(--font-sans); }
.tc-location__hours dt { font-weight: 800; }
.tc-location__hours dd { margin: 0; }
.tc-location__label { margin: 0; font: 800 16px/24px var(--font-sans); }

/* ---------- Menü-Overlay ---------- */
.tc-menu { position: relative; display: flex; flex-direction: column; gap: var(--space-8); min-height: 100%; padding: var(--space-4) var(--space-10) var(--space-12);
  background: var(--surface-sand); color: var(--ink); box-shadow: var(--shadow-overlay); }
.tc-menu__top { display: flex; align-items: center; justify-content: space-between; margin-left: calc(var(--space-3) * -1); }
.tc-menu__list { max-width: 340px; margin: 0; padding: 0; list-style: none; border-top: var(--border-hairline) solid var(--line); }
.tc-menu__list a { display: block; padding: var(--space-2) 0; border-bottom: var(--border-hairline) solid var(--line); color: inherit;
  font: 600 36px/44px var(--font-sans); letter-spacing: -.01em; text-decoration: none; transition: color .2s ease-out, padding .2s ease-out; }
.tc-menu__list a:hover { padding-left: var(--space-2); color: var(--brand); }
.tc-menu__list a[aria-current="page"] { color: var(--brand); }
.tc-menu__foot { display: grid; gap: var(--space-1); font: 400 14px/22px var(--font-sans); color: var(--ink-muted); }
@media (max-width: 640px) { .tc-menu { padding: var(--space-4); } .tc-menu__list a { font-size: 30px; line-height: 38px; } }

/* ---------- Textfeld, Checkbox ---------- */
.tc-field { display: grid; gap: var(--space-1); text-align: left; }
.tc-field__label { font: 700 14px/20px var(--font-sans); }
.tc-field__input { width: 100%; min-height: 44px; padding: var(--space-2) 0; border: 0; border-bottom: var(--border-hairline) solid var(--line); border-radius: 0;
  background: transparent; color: inherit; font: 400 16px/26px var(--font-sans); transition: box-shadow .2s ease-out; }
.tc-field__input::placeholder { color: var(--ink-muted); opacity: 1; }
.tc-field__input:focus { outline: none; border-bottom-color: var(--focus); box-shadow: 0 1px 0 0 var(--focus); }
.tc-field__help { font: 600 12px/16px var(--font-sans); color: var(--ink-muted); }
.tc-field.is-invalid .tc-field__input { border-bottom-color: var(--danger); box-shadow: 0 1px 0 0 var(--danger); }
.tc-field.is-invalid .tc-field__help { color: var(--danger); }
.tc-field.is-valid .tc-field__help { color: var(--success); }
.tc-check { display: flex; align-items: flex-start; gap: var(--space-3); font: 400 14px/22px var(--font-sans); text-align: left; cursor: pointer; }
.tc-check input { appearance: none; -webkit-appearance: none; display: grid; place-items: center; flex: none; width: 20px; height: 20px; margin: 1px 0 0;
  border: var(--border-outline) solid currentColor; border-radius: 6px; background: transparent; color: inherit; cursor: pointer; }
.tc-check input:checked { background: currentColor; }
.tc-check input:checked::after { content: ""; width: 10px; height: 6px; border: 2px solid var(--tc-tick, var(--surface)); border-top: 0; border-right: 0; transform: translate(0, -1px) rotate(-45deg); }

/* ---------- Footer mit Newsletter ---------- */
.tc-footer { --focus: var(--ink-inverse); --line: var(--ink-inverse); --ink-muted: var(--crumble-cream); --tc-tick: var(--surface-inverse);
  padding: var(--space-16) var(--space-10) var(--space-8); background: var(--surface-inverse); color: var(--ink-inverse); }
.tc-footer__inner { display: grid; gap: var(--space-12); max-width: var(--container-max); margin: 0 auto; }
.tc-footer__newsletter { display: grid; gap: var(--space-6); width: 100%; max-width: var(--container-text); margin: 0 auto; }
.tc-footer__title { margin: 0; font: 700 28px/34px var(--font-sans); text-align: center; }
.tc-footer__form { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--space-4) var(--space-6); }
.tc-footer__form .tc-check { grid-column: 1 / -1; }
.tc-footer__social { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-3); }
.tc-footer__social .tc-chip { border-color: var(--ink-inverse); color: var(--ink-inverse); }
.tc-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-6); margin: 0; padding: 0; list-style: none; font: 600 14px/22px var(--font-sans); }
.tc-footer a { color: inherit; text-decoration: none; }
.tc-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.tc-footer__legal { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); font: 600 12px/16px var(--font-sans); text-align: center; }
.tc-footer__legal .tc-logo { width: 96px; color: var(--crumble-cream); }
@media (max-width: 560px) { .tc-footer { padding: var(--space-12) var(--space-4) var(--space-8); } .tc-footer__form { grid-template-columns: 1fr; } }