/* Fuchsbau Termin – Website im Auftritt des Flyers (Entwurf 7) */

@font-face { font-family: 'Inter'; src: url('assets/font/inter-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('assets/font/inter-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('assets/font/inter-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('assets/font/inter-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('assets/font/Barlow-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('assets/font/Barlow-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('assets/font/Barlow-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('assets/font/BarlowCondensed-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('assets/font/BarlowCondensed-800i.woff2') format('woff2'); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('assets/font/lato-light.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('assets/font/lato-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('assets/font/lato-bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Playfair'; src: url('assets/font/playfair.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }

:root {
  /* Fuchsbau */
  --fb-grund: #0b0d0c; --fb-orange: #ea641e; --fb-orange-h: #f0782d; --fb-text: #fbf3ea; --fb-text-2: #e6d8ca; --fb-leise: #b9a796;
  /* Salon */
  --papier: #f4eee2; --papier-2: #eae0cd; --papier-hell: #faf6ee; --tusche: #221d18; --zinnober: #a8322a; --messing: #a8853e; --messing-h: #c9a55c; --grau: #6a5c50;
  /* Studio */
  --ground: #1e2125; --rail: #15171a; --card: #2a2e34; --line: #353a41; --ink-2: #c9ced5; --mute: #9aa1ab; --red: #d7263d; --red-text: #ff6b7a;
  --breite: 1160px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { font-family: 'Inter', system-ui, sans-serif; font-size: 17px; line-height: 1.55; background: var(--fb-grund); color: var(--fb-text); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--fb-orange-h); outline-offset: 3px; border-radius: 2px; }
.thai :focus-visible { outline-color: var(--zinnober); }
.thai-auftakt :focus-visible, .thai-band :focus-visible { outline-color: var(--messing-h); }
.fit :focus-visible { outline-color: var(--red-text); }

.sprung { position: absolute; left: 12px; top: -60px; background: var(--fb-orange); color: #1b1412; padding: 10px 16px; font-weight: 700; z-index: 100; text-decoration: none; }
.sprung:focus { top: 12px; }
.rahmen, .fb-in { width: min(100% - 40px, var(--breite)); margin-inline: auto; }
.or { color: var(--fb-orange-h); }

/* ── Kopfleiste ── */
.leiste { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 28px; padding: 12px max(20px, calc((100% - var(--breite)) / 2)); background: rgba(11,13,12,.92); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(251,243,234,.08); }
.leiste-marke { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.leiste-marke img { width: 26px; height: auto; }
.leiste-marke b { color: var(--fb-orange-h); }
.leiste nav { display: flex; gap: 24px; margin-left: auto; }
.leiste nav a { text-decoration: none; font-size: 15px; color: var(--fb-text-2); }
.leiste nav a:hover { color: var(--fb-text); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--fb-orange-h); }

/* ── Knöpfe ── */
.knopf-fb, .knopf-thai, .knopf-fit { display: inline-block; text-decoration: none; font-weight: 700; font-size: 16px; padding: 13px 22px; border-radius: 4px; border: 2px solid transparent; }
.knopf-fb { background: var(--fb-orange-h); color: #1b1412; }
.knopf-fb:hover { background: #ff8a40; }
.knopf-fb.hohl { background: transparent; color: var(--fb-text); border-color: rgba(251,243,234,.45); }
.knopf-fb.hohl:hover { border-color: var(--fb-text); }
.knopf-fb.klein { padding: 8px 14px; font-size: 14px; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ═══ Fuchsbau-Flächen mit Hügeln ═══ */
.fb { position: relative; background: var(--fb-grund) url('assets/bild/huegel-2400.jpg') center bottom / max(100%, 1500px) auto no-repeat; }
.fb-auge { font-size: 13px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--fb-orange-h); }

.titel { min-height: calc(100svh - 56px); padding: clamp(56px, 9vh, 110px) 0 0; display: flex; flex-direction: column; }
.titel h1 { font-size: clamp(56px, 9vw, 112px); line-height: .95; font-weight: 700; letter-spacing: -.035em; margin-top: 18px; }
.titel h1 span { display: block; }
.strich { width: 72px; height: 3px; background: var(--fb-orange-h); margin: 32px 0 26px; }
.fb-lead { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: #f3e7da; max-width: 36em; }
.titelpreis { margin-top: 22px; font-size: 19px; font-weight: 600; }
.titelpreis strong { font-size: 30px; color: var(--fb-orange-h); letter-spacing: -.02em; }
.titelpreis span { display: block; font-size: 16px; font-weight: 500; color: var(--fb-text-2); margin-top: 2px; }
.titel-fuss { list-style: none; margin-top: auto; padding: 0 0 36px; width: min(100% - 40px, var(--breite)); margin-inline: auto; display: flex; gap: 28px; font-size: 14px; color: #f3fbe9; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.titel-fuss { padding-top: max(34vw, 300px); }

/* ═══ Salon ═══ */
.thai { background: var(--papier); color: var(--tusche); font-family: 'Lato', sans-serif; font-size: 18px; line-height: 1.6; }
.pf { font-family: 'Playfair', Georgia, serif; font-weight: 500; letter-spacing: -.005em; }
.thai-auge { font-size: 12px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--zinnober); }
.thai-auge.hell { color: var(--messing-h); display: flex; align-items: center; gap: 9px; margin-top: 44px; }
.thai-auge.hell::before { content: ''; width: 8px; height: 8px; background: var(--zinnober); }

.thai-auftakt { position: relative; background: var(--tusche); color: rgba(244,238,226,.9); overflow: hidden; padding: 96px 0 104px; }
.thai-auftakt img.grund, .thai-band img.grund { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .34; }
.auftakt-raster { position: relative; display: grid; grid-template-columns: 1fr 320px; gap: 64px; align-items: center; }
.salon-marke { display: flex; align-items: center; gap: 12px; }
.salon-marke img { width: 44px; height: 44px; border-radius: 4px; }
.salon-marke b { display: block; font-family: 'Playfair', serif; font-weight: 500; font-size: 17px; letter-spacing: .16em; text-transform: uppercase; color: var(--papier); line-height: 1.1; }
.salon-marke span { display: block; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgba(244,238,226,.7); margin-top: 3px; }
.thai-auftakt h2 { font-size: clamp(36px, 4.6vw, 58px); line-height: 1.08; color: var(--papier); margin-top: 14px; max-width: 13em; }
.thai-lead { font-weight: 300; font-size: 20px; line-height: 1.55; margin-top: 20px; max-width: 32em; }
.thai-lead.dunkel { color: #3a322a; }
.drei { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.drei div { border-top: 1px solid rgba(201,165,92,.55); padding-top: 10px; font-size: 16px; line-height: 1.45; color: var(--papier); }
.drei dt { font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--messing-h); margin-bottom: 4px; }

.handy { border-radius: 30px; overflow: hidden; border: 8px solid #0d0b09; box-shadow: 0 30px 60px rgba(0,0,0,.45); background: #0d0b09; }
.handy img { border-radius: 22px; aspect-ratio: 390 / 700; object-fit: cover; object-position: top; }
.handy.hell { border-color: #2a241e; box-shadow: 0 24px 50px rgba(34,29,24,.22); }

.thai-papier { padding: 96px 0; }
.thai-papier.zwei { padding-top: 24px; }
.thai h3.pf { font-size: clamp(28px, 3vw, 38px); line-height: 1.15; margin-top: 8px; }
.thai h3.pf.gross { font-size: clamp(32px, 4vw, 50px); max-width: 16em; }
.boegen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin-top: 36px; }
.bogen { border-radius: 999px 999px 6px 6px; overflow: hidden; position: relative; background: #000; box-shadow: 0 10px 30px rgba(34,29,24,.16); }
.bogen img { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; }
.bogen::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgba(168,133,62,.6); }
.beh > b { display: block; font-family: 'Playfair', serif; font-weight: 500; font-size: 21px; line-height: 1.25; margin-top: 16px; }
.chips { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.chips span { font-size: 14px; background: var(--papier-hell); border: 1px solid var(--papier-2); border-radius: 3px; padding: 2px 8px; }
.chips b { color: var(--zinnober); }
.schritte { list-style: none; display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--papier-2); }
.schritte li { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--grau); }
.schritte i { font-style: normal; display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border: 1px solid #d8ccb6; border-radius: 3px; background: var(--papier-hell); letter-spacing: 0; font-size: 14px; color: var(--tusche); }
.schritte li.an { color: var(--zinnober); }
.schritte li.an i { background: var(--zinnober); border-color: var(--zinnober); color: #fff; }
.nach { margin-top: 14px; color: var(--grau); max-width: 40em; }

.wunsch { display: grid; grid-template-columns: 300px 1fr; gap: 64px; align-items: center; margin-top: 96px; padding-top: 72px; border-top: 1px solid var(--papier-2); }
.wunsch h3.pf { margin-top: 0; max-width: 14em; }
.wunsch p { margin-top: 16px; max-width: 34em; color: #3a322a; }

.tablet { margin-top: 40px; }
.tablet img { border-radius: 10px; border: 10px solid #1a1612; box-shadow: 0 24px 60px rgba(34,29,24,.22); }
.tablet figcaption { font-size: 14px; color: var(--grau); margin-top: 12px; }
.karten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 32px; margin-top: 52px; }
.karte { border-top: 2px solid var(--zinnober); padding-top: 12px; }
.karte b { display: block; font-size: 18px; }
.karte p { font-size: 16px; line-height: 1.5; color: var(--grau); margin-top: 4px; }
.stufen-salon { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 56px; }
.ss { background: var(--papier-hell); border: 1px solid var(--papier-2); border-top: 3px solid var(--messing); border-radius: 4px; padding: 20px 24px 22px; }
.ss-nr { display: block; font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--zinnober); }
.ss b { display: block; font-family: 'Playfair', serif; font-weight: 500; font-size: 28px; line-height: 1.1; margin-top: 4px; }
.ss-preis { display: block; font-weight: 700; color: var(--zinnober); margin-top: 4px; }
.ss p { font-size: 16px; color: var(--grau); margin-top: 8px; }

.thai-band { position: relative; background: var(--tusche); color: var(--papier); padding: 88px 0 96px; overflow: hidden; }
.thai-band .rahmen { position: relative; }
.thai-band h3.pf { color: var(--papier); font-size: clamp(30px, 3.4vw, 42px); }
.thai-band p { font-weight: 300; font-size: 19px; margin-top: 12px; max-width: 34em; color: rgba(244,238,226,.88); }
.knopf-thai { margin-top: 28px; background: var(--zinnober); color: #fff; }
.knopf-thai:hover { background: #8f2821; }

/* ═══ Studio ═══ */
.fit { background: var(--ground); color: #fff; font-family: 'Barlow', sans-serif; font-size: 18px; line-height: 1.5; padding: 104px 0 112px; }
.disp { font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 800; text-transform: uppercase; letter-spacing: .005em; line-height: .96; }
.fit-marke { display: flex; align-items: center; gap: 12px; }
.fit-marke i { display: inline-flex; width: 36px; height: 32px; background: var(--red); transform: skewX(-12deg); border-radius: 3px; align-items: center; justify-content: center; font-family: 'Barlow Condensed'; font-style: italic; font-weight: 800; font-size: 22px; color: #fff; }
.fit-marke b { display: block; font-family: 'Barlow Condensed'; font-style: italic; font-weight: 800; font-size: 20px; letter-spacing: .04em; line-height: 1; text-transform: uppercase; }
.fit-marke span { display: block; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); margin-top: 3px; }
.fit-auge { font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--red-text); margin-top: 44px; }
.disp.riesig { font-size: clamp(52px, 8vw, 104px); margin-top: 8px; max-width: 9em; }
.fit-lead { font-size: 20px; color: var(--ink-2); margin-top: 22px; max-width: 34em; }
.fit-raster { display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; margin-top: 56px; align-items: start; }
.kacheln { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kachel { background: var(--card); border-top: 3px solid var(--red); border-radius: 4px; padding: 14px 14px 16px; }
.kachel small { display: block; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.kachel strong { display: block; font-family: 'Barlow Condensed'; font-weight: 700; font-size: 38px; line-height: 1.1; margin-top: 2px; }
.kachel span { display: block; font-size: 13px; color: var(--mute); }
.kurse { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.kurs { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 16px 18px 18px; }
.kurs.voll { border-color: var(--red-text); }
.kurs .kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.kurs .kopf b { font-family: 'Barlow Condensed'; font-weight: 700; font-size: 23px; text-transform: uppercase; line-height: 1.05; }
.tag { font-size: 12px; font-weight: 600; padding: 2px 7px; border-radius: 3px; white-space: nowrap; background: var(--red); color: #fff; }
.tag.rand { background: transparent; border: 1px solid var(--red-text); color: var(--red-text); }
.kurs p { font-size: 15px; color: var(--ink-2); margin-top: 6px; }
.teil { display: flex; justify-content: space-between; font-size: 14px; color: var(--mute); margin-top: 14px; }
.teil b { color: #fff; }
.balken { height: 5px; background: var(--rail); border-radius: 4px; margin-top: 6px; overflow: hidden; }
.balken i { display: block; height: 100%; background: var(--red); }
.balken i.grau { background: var(--ink-2); }
.unterzeile { font-size: 14px; color: var(--mute); margin-top: 12px; }
.fit-text h3.disp { font-size: clamp(36px, 3.6vw, 48px); }
.liste { margin-top: 20px; }
.liste div { padding: 14px 0 16px; border-top: 1px solid var(--line); }
.liste div:last-child { border-bottom: 1px solid var(--line); }
.liste dt { font-family: 'Barlow Condensed'; font-weight: 700; font-size: 22px; text-transform: uppercase; letter-spacing: .01em; line-height: 1.1; }
.liste dd { font-size: 17px; color: var(--ink-2); margin-top: 3px; }
.stufen-fit { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 16px; margin-top: 56px; }
.sf { position: relative; background: var(--card); border-top: 3px solid var(--red); border-radius: 4px; padding: 20px 22px 22px; }
.sf-nr { display: block; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--red-text); }
.sf > b { display: block; font-family: 'Barlow Condensed'; font-style: italic; font-weight: 800; font-size: 30px; text-transform: uppercase; line-height: 1; margin-top: 4px; }
.sf p { font-size: 16px; color: var(--ink-2); margin-top: 8px; }
.sf em { display: block; font-style: normal; font-size: 14px; color: var(--mute); margin-top: 10px; }
.sf u { position: absolute; top: 18px; right: 18px; text-decoration: none; font-size: 12px; font-weight: 600; padding: 2px 7px; border: 1px solid var(--red-text); color: var(--red-text); border-radius: 3px; }
.sf.woche { border-top-color: #fff; }
.sf.woche h3 { font-size: 32px; }
.knopf-fit { margin-top: 18px; background: var(--red); color: #fff; }
.knopf-fit:hover { background: #b81f33; }

/* ═══ Kern, Stufen, Kontakt ═══ */
.kern-block { padding: 112px 0 max(30vw, 260px); }
.fb-in.breit { max-width: var(--breite); }
.kern { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.2; font-weight: 600; letter-spacing: -.02em; max-width: 22em; }
.basis { margin-top: 48px; border-top: 2px solid rgba(240,120,45,.75); padding-top: 16px; display: grid; grid-template-columns: 220px 1fr; gap: 8px 40px; }
.basis h3 { font-size: 18px; font-weight: 700; }
.basis-liste { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.basis-liste li { font-size: 15px; color: var(--fb-text); border: 1px solid rgba(251,243,234,.22); border-radius: 3px; padding: 4px 10px; }
.basis-plus { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px 40px; margin-top: 14px; }
.basis-plus p { color: var(--fb-text-2); }
.basis-plus strong { font-size: 26px; color: var(--fb-orange-h); margin-right: 6px; }
.treppe-kopf { margin-top: 64px; font-size: 18px; color: var(--fb-text-2); max-width: 44em; }
.treppe-kopf b { color: var(--fb-text); }
.treppe { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; align-items: end; margin-top: 20px; }
.st { position: relative; background: rgba(251,243,234,.07); border-top: 3px solid var(--fb-orange-h); border-radius: 3px; padding: 14px 14px 16px; }
.st.s1 { min-height: 190px; } .st.s2 { min-height: 220px; } .st.s3 { min-height: 250px; } .st.s4 { min-height: 280px; } .st.s5 { min-height: 310px; }
.st i { font-style: normal; display: block; font-size: 34px; font-weight: 700; line-height: 1; color: var(--fb-orange-h); }
.st b { display: block; font-size: 19px; margin-top: 8px; }
.st em { display: block; font-style: normal; font-size: 14px; line-height: 1.35; margin-top: 4px; }
.st p { font-size: 14px; line-height: 1.4; color: var(--fb-leise); margin-top: 8px; }
.st u { position: absolute; top: 14px; right: 12px; text-decoration: none; font-size: 11px; font-weight: 700; letter-spacing: .06em; border: 1px solid rgba(251,243,234,.5); border-radius: 3px; padding: 1px 6px; }
.preiszeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 24px; margin-top: 22px; }
.preiszeile .ab { font-size: 20px; font-weight: 600; white-space: nowrap; }
.preiszeile .ab strong { font-size: 36px; color: var(--fb-orange-h); letter-spacing: -.02em; }
.preiszeile .pz { font-size: 14px; color: var(--fb-leise); max-width: 44em; }
.kontakt { display: grid; grid-template-columns: 1fr 340px; gap: 48px; margin-top: 88px; padding: 36px 40px; background: rgba(11,13,12,.72); border: 1px solid rgba(251,243,234,.12); border-radius: 6px; }
.kontakt h3 { font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -.02em; line-height: 1.15; }
.kontakt p { color: var(--fb-text-2); margin-top: 10px; max-width: 32em; }
.kontakt .knoepfe { margin-top: 24px; }
.kontakt address { font-style: normal; font-size: 16px; line-height: 1.7; color: var(--fb-text-2); align-self: center; }
.kontakt address b { display: block; color: var(--fb-text); font-size: 17px; }
.kontakt address a { color: var(--fb-orange-h); }

.fuss { background: #0e1a0f; color: #c9d6c2; font-size: 14px; padding: 28px max(20px, calc((100% - var(--breite)) / 2)); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; }
.fuss p { max-width: 60em; }
.fuss nav { display: flex; gap: 22px; }
.fuss nav a { color: #f3fbe9; }

/* ── Tablet ── */
@media (max-width: 980px) {
  .leiste nav { display: none; }
  .leiste .knopf-fb.klein { margin-left: auto; }
  .auftakt-raster, .wunsch { grid-template-columns: 1fr; gap: 48px; }
  .handy { max-width: 300px; }
  .wunsch .handy { order: 2; }
  .karten { grid-template-columns: 1fr 1fr; }
  .fit-raster { grid-template-columns: 1fr; }
  .stufen-fit { grid-template-columns: 1fr 1fr; }
  .sf.woche { grid-column: 1 / -1; }
  .treppe { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .st.s1, .st.s2, .st.s3, .st.s4, .st.s5 { min-height: 0; }
  .st.s5 { grid-column: 1 / -1; }
  .basis { grid-template-columns: 1fr; }
  .basis-plus { grid-column: 1; }
  .kontakt { grid-template-columns: 1fr; }
}

/* ── Handy ── */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .leiste { gap: 12px; }
  .titel { min-height: 0; padding-top: 48px; }
  .titel-fuss { flex-direction: column; gap: 4px; padding-top: 400px; }
  .knoepfe a { flex: 1 1 100%; text-align: center; }
  .drei { grid-template-columns: 1fr; gap: 14px; }
  .thai-auftakt, .thai-papier, .fit { padding: 72px 0; }
  .boegen { grid-template-columns: 1fr; gap: 40px; max-width: 360px; }
  .karten { grid-template-columns: 1fr; gap: 20px; }
  .stufen-salon, .stufen-fit { grid-template-columns: 1fr; }
  .kacheln { grid-template-columns: 1fr 1fr; }
  .kurse { grid-template-columns: 1fr; }
  .treppe { grid-template-columns: 1fr; }
  .st.s5 { grid-column: auto; }
  .tablet img { border-width: 6px; aspect-ratio: 4 / 3; object-fit: cover; object-position: left top; }
  .kontakt { padding: 24px 20px; }
  .kern-block { padding-top: 80px; padding-bottom: 400px; }
}

/* ═══ Rechtsseiten ═══ */
.recht { background: var(--fb-grund); }
.recht main { width: min(100% - 40px, 760px); margin: 0 auto; padding: 72px 0 96px; }
.recht h1 { font-size: clamp(34px, 5vw, 48px); letter-spacing: -.03em; line-height: 1.1; }
.recht h2 { font-size: 20px; margin-top: 40px; }
.recht p, .recht li { color: var(--fb-text-2); margin-top: 10px; }
.recht ul { padding-left: 20px; }
.recht a { color: var(--fb-orange-h); }
.recht .zurueck { display: inline-block; margin-bottom: 32px; font-size: 15px; }