/* C1 «Tag & Gold», Runde 4b: B3 bei Tageslicht. Gleicher Körper und dieselben Module (src/b3.html, b3.css, b3.js),
   hier nur die Tagwerte der Tokens und die Stellen, an denen Licht auf hellem Grund anders wirken muss.
   Grund leichtes Beige (Olexii 01.10). Gold auf Hell: Linien und Text dunkler, Glühen schwächer, Knöpfe bleiben Metall.
   Kontraste auf #f4eee5: Tinte #1d1a16 15,9:1, Tinte-2 #5f574c 6,1:1, Goldtext #7f5b1d 5,4:1, Akzenttext #7d5a1c 5,3:1, Tinte-3 #6f675b 5,0:1 auf Karten. */

.vc1 {
  --s-bg: #f4eee5; --bg-rgb: 244 238 229; --bg-deep: #ebe2d4; --deep: 235 226 212; --bg-alt: #efe7db; --bg-rv: #f1eadf;
  --s-card: #fbf8f3; --s-card-2: #fffdf9; --card-hi: #ffffff; --card-lo: #f8f3ec; --field: #fffdf9;
  --s-ink: #1d1a16; --s-ink-2: #5f574c; --ink-3: #6f675b; --dot-off: #b9ae9c;
  --s-rule: #e2d8c8; --s-rule-strong: #c8b9a2; --hd-bg: rgb(244 238 229 / 0.86);
  --mq-card: rgb(255 253 249 / 0.94); --mq-ink: #4a4339; --sh: 92 70 38; --sh-k: 0.28;
  --stack-dim: 0.06; --focus-dim: 0.97;
  --aur-1: rgb(226 184 110 / 0.3); --aur-2: rgb(222 170 160 / 0.22); --aur-3: rgb(236 214 170 / 0.55);
  --s-acc: #b07f2c; --s-acc-t: #7d5a1c; --s-hi: #7f5b1d; --s-focus: #7d5a1c;
  --gold: #b07f2c; --gold-hi: #7f5b1d; --gold-glow: rgb(200 150 60 / 0.35); --lg: 176 128 46; --gg: 200 150 60;
  --s-ihb: #1d1a16; --s-ihb-ink: #f4eee5;
  color-scheme: light;
}

/* Hauptmenü C1 (Runde 5) «Blattgold-Pille»: eine helle Goldpille gleitet mit Federung hinter den Punkt unter dem Cursor.
   Mobil «Schublade»: das Menü fährt von rechts herein, die Worte folgen gestaffelt, eine Goldmarkierung füllt sich unter dem Wort. */
.vc1 .hd-nav ul { position: relative; z-index: 1; }
.vc1 .hd-nav a { transition: color 0.3s; }
.vc1 .hd-nav a:is(:hover, :focus-visible) { color: var(--s-ink); }
.vc1 .nav-ind { z-index: 0; top: 50%; height: 2.35rem; margin-top: -1.175rem; width: calc(var(--iw, 0px) + 1.7rem); border-radius: 999px;
  background: linear-gradient(176deg, #fcf6ec 0%, #f2e5cf 48%, #e8d5b6 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.85), inset 0 -1px 0 rgb(150 122 84 / 0.18), 0 0 0 1px rgb(190 162 120 / 0.38), 0 0.55rem 1.2rem -0.8rem rgb(140 112 74 / 0.45);
  transform: translateX(calc(var(--ix, 0px) - 0.85rem)) scale(0.82); transition: transform 0.6s var(--spring), width 0.6s var(--spring), opacity 0.3s; }
.vc1 .hd-nav.is-ind .nav-ind { opacity: 1; transform: translateX(calc(var(--ix, 0px) - 0.85rem)) scale(1); }
.vc1 .mnav li a { width: fit-content; background: linear-gradient(90deg, rgb(236 206 140 / 0.7), rgb(226 184 110 / 0.4)) 0 88% / 0% 0.4em no-repeat; transition: background-size 0.55s var(--ease); }
.vc1 .mnav li a:is(:hover, :focus-visible) { background-size: 100% 0.4em; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.fx-off) .vc1 .mnav:not([hidden]) { animation: c1-drawer 0.65s var(--ease) backwards; }
  html:not(.fx-off) .vc1 .mnav:not([hidden]) li a { animation: c1-slide 0.75s var(--ease) backwards, c1-mark 1.1s var(--ease) backwards; animation-delay: calc(0.18s + var(--i) * 65ms), calc(0.45s + var(--i) * 65ms); }
  html:not(.fx-off) .vc1 .mnav:not([hidden]) :is(address, .btn) { animation: c1-slide 0.7s var(--ease) 0.55s backwards; }
}
@keyframes c1-drawer { from { transform: translateX(100%); box-shadow: -2rem 0 4rem rgb(92 70 38 / 0.25); } to { transform: none; box-shadow: none; } }
@keyframes c1-slide { from { opacity: 0; transform: translateX(3rem); } to { opacity: 1; transform: none; } }
@keyframes c1-mark { 0% { background-size: 0% 0.4em; } 50% { background-size: 100% 0.4em; } 100% { background-size: 0% 0.4em; background-position: 100% 88%; } }

/* Auf Fotos bleibt es Nacht: Kino und Bildunterschriften der Räume behalten die hellen Werte */
.vc1 :is(.b3-kino, .b3-room figcaption) { --s-ink: #f2eee8; --s-ink-2: #cfc8bd; --gold: #d4a24c; --gold-hi: #f0cf8f; --s-acc-t: #e2b565; --lg: 240 207 143; --gg: 226 168 72; }

/* Knöpfe in Champagnergold (Runde 9, Olexii 03.10: «champagne gold, not yellow gold»): heller, weniger gesättigt, ohne dunkle Mittelbahn.
   Die Knopf-Tokens gelten nur auf Knöpfen, Karten und Linien behalten ihr Gold. Tinte #1f1608 auf der dunkelsten Stelle #d3b78e 9,3:1. */
.vc1 {
  --gold-fill: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.06) 0 1px, transparent 1px 3px),
    linear-gradient(176deg, #fbf4e8 0%, #f1e3c9 18%, #e2cba6 42%, #d3b78e 56%, #e4cfac 72%, #f6ebd6 88%, #e0c9a3 100%);
  --gold-bevel: inset 0 1px 0 rgb(255 253 247 / 0.95), inset 0 -1px 0 rgb(150 122 84 / 0.35), 0 0 0 1px rgb(190 162 120 / 0.55);
}
.vc1 :is(.btn, .bar-book, .b3-chip, .b3-tab-ind, .row-cta, .work-btn, .c1-q-b, .ig-follow, .b3-more) { --lg: 190 162 120; --gg: 222 198 160; --gold-glow: rgb(222 198 160 / 0.55); }
.vc1 :is(.b3-shine, .btn-main, .bar-book) { box-shadow: var(--gold-bevel), 0 0.8rem 1.6rem -0.9rem rgb(140 112 74 / 0.45); }
.vc1 :is(.b3-shine, .btn-main, .bar-book):hover { filter: brightness(1.03); box-shadow: var(--gold-bevel), 0 1rem 2rem -0.9rem rgb(140 112 74 / 0.6); }
.vc1 .btn-line:hover { border-color: rgb(var(--lg)); color: var(--s-ink); background: rgb(241 227 201 / 0.45); }
.vc1 .b3-kino .b3-shine { box-shadow: var(--gold-bevel), 0 0.9rem 2.2rem -1rem rgb(226 168 72 / 0.65); }

/* Große Zahl: Goldton als Metall statt Glühen (Glühen verschwindet auf Beige); helle Enden bleiben über 3:1 */
.vc1 .b3-big-n { text-shadow: none; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .vc1 .b3-big-n { background: linear-gradient(176deg, #a57a33 0%, #7d5818 40%, #5a3f10 55%, #8d6524 75%, #a57a33 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
}

/* 3D-Wand hinter der Zahl: helle Karten, etwas kräftiger, weil der Grund hell ist */
.vc1 .b3-mq-card { box-shadow: 0 0.6rem 1.4rem -1rem rgb(92 70 38 / 0.35); }

/* Karten und Tickets brauchen auf Hell eine sichtbare Kante */
.vc1 :is(.b3-card, .b3-an-card, .b3-form, .b3-rv, .b3-tm) { border-color: var(--s-rule); }
.vc1 .b3-ticket.is-active { border-color: rgb(var(--lg) / 0.6); }
.vc1 .b3-rv { border-color: rgb(var(--lg) / 0.22); }

/* Abschluss: Glut als warmes Licht, nicht als Fleck */
.vc1 .b3-ember { background: radial-gradient(ellipse 46% 62% at 50% 100%, rgb(236 196 120 / 0.6), rgb(226 170 90 / 0.26) 34%, rgb(200 150 80 / 0.08) 60%, transparent 78%); }
.vc1 .b3-ember::after { opacity: 0.18; }

/* Kino bei Tag: etwas heller, die Schrift unten links behält ihren dunklen Grund */
.vc1 .b3-kino-shade { background: radial-gradient(ellipse 55% 45% at 15% 100%, rgb(226 168 72 / 0.2), transparent 65%),
  linear-gradient(180deg, rgb(var(--scrim) / 0.3) 0%, rgb(var(--scrim) / 0.02) 30%, rgb(var(--scrim) / 0.22) 58%, rgb(var(--scrim) / 0.88) 100%),
  linear-gradient(90deg, rgb(var(--scrim) / 0.62), rgb(var(--scrim) / 0) 60%); }
.vc1 .b3-mq { opacity: 1; }
.vc1 .b3-proof::before { background: radial-gradient(ellipse 45% 70% at 25% 50%, rgb(var(--deep) / 0.95), rgb(var(--deep) / 0.7) 60%, rgb(var(--deep) / 0.25)), radial-gradient(ellipse 45% 70% at 78% 50%, rgb(var(--deep) / 0.94), rgb(var(--deep) / 0.3) 80%); }

/* ---------- Textlinks: Goldmarker füllt sich von links unter dem Wort (Board R3 «micro»: Animated Link, als Blattgold) ---------- */
.vc1 :is(.b3-link, .sv-all, .work-more, :is(p, .b3-card-more, .an-links, .b3-rv-foot, .b3-st-links li, .ft-legal) > a:not([class])) {
  --mark: rgb(236 206 140 / 0.6);
  width: fit-content; text-decoration: none; border-bottom: 0; padding-bottom: 0.15em;
  background-image: linear-gradient(rgb(var(--lg) / 0.75), rgb(var(--lg) / 0.75)), linear-gradient(90deg, var(--mark), rgb(226 184 110 / 0.45));
  background-size: 100% 1px, 0% 0.55em; background-position: 0 100%, 0 100%; background-repeat: no-repeat;
  transition: background-size 0.55s var(--ease), color 0.3s; }
.vc1 :is(.b3-link, .sv-all, .work-more, :is(p, .b3-card-more, .an-links, .b3-rv-foot, .b3-st-links li, .ft-legal) > a:not([class])):is(:hover, :focus-visible) { background-size: 100% 1px, 100% 0.55em; color: var(--s-ink); }
.vc1 .b3-kino .b3-link { --mark: rgb(226 168 72 / 0.32); }
@media (prefers-reduced-motion: reduce) { .vc1 :is(.b3-link, .sv-all, .work-more, :is(p, .b3-card-more, .an-links, .b3-rv-foot, .b3-st-links li, .ft-legal) > a:not([class])) { transition: none; } }
html.fx-off .vc1 :is(.b3-link, .sv-all, .work-more, :is(p, .b3-card-more, .an-links, .b3-rv-foot, .b3-st-links li, .ft-legal) > a:not([class])) { transition: none; }

/* ---------- C1 erster Bildschirm (Runde 4d): Name groß, Porträt rechts von oben bis unten, links Termin und Beleg, unten Direktbuchung ----------
   Idee aus der eigenen Skizze «Persönliche Signatur» (design-explorations): Name als Wortmarke über dem Porträt, ruhiger Grund.
   Ziel der Seite ist die Buchung über Treatwell: ein großer Knopf, darunter Status und Beleg, unten vier Behandlungen mit Preis. */
.c1-hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); grid-template-rows: auto auto auto auto;
  column-gap: clamp(2rem, 4.5vw, 4.5rem); padding: clamp(0.75rem, 2vh, 1.5rem) var(--gutter) 1.25rem; overflow: clip; }
.c1-hero::before { content: ""; position: absolute; z-index: -1; right: -10%; top: -20%; width: 70%; height: 120%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(236 206 140 / 0.35), transparent 70%); }
/* Runde 10: Name klein, weil das Logo direkt darüber im Kopf steht; der Akzent liegt auf dem dreizeiligen Titel */
.c1-h1 { grid-column: 1; grid-row: 1; align-self: end; display: flex; flex-direction: column; margin: clamp(1.25rem, 3vh, 2.25rem) 0 0; }
.c1-brand { order: -1; font-family: var(--f-disp); font-weight: var(--disp-w); font-size: clamp(1.9rem, 2.7vw, 2.75rem); line-height: 1.05; letter-spacing: 0.01em; color: var(--s-ink); }
.c1-sub { display: block; margin-top: 0.45rem; font: 700 0.76rem/1.4 var(--f-ui); letter-spacing: 0.22em; text-transform: uppercase; color: var(--s-acc-t); }
.c1-photo { grid-column: 2; grid-row: 1 / 4; position: relative; z-index: 1; display: flex; flex-direction: column; margin: clamp(1.25rem, 3vh, 2.25rem) 0 0; min-height: 0; }
.c1-ph { position: relative; isolation: isolate; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 24rem; max-height: 40rem; border-radius: 1.25rem; overflow: clip;
  box-shadow: 0 2.5rem 4.5rem -3rem rgb(92 70 38 / 0.6), 0 0 0 1px rgb(var(--lg) / 0.25); outline: 1px solid rgb(var(--lg) / 0); outline-offset: 0; }
.c1-photo img { display: block; flex: 1 1 auto; width: 100%; min-height: 0; object-fit: cover; object-position: 50% 24%; }
.c1-ph-fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; }
.c1-ph-q { position: absolute; inset: auto 0 0; z-index: 2; display: none; gap: 0.5rem; margin: 0; padding: 5rem clamp(1.25rem, 2.2vw, 2rem) clamp(1.25rem, 2.2vw, 1.75rem); pointer-events: none;
  background: linear-gradient(to top, rgb(38 27 14 / 0.82), rgb(38 27 14 / 0.42) 55%, transparent); color: #fbf6ee; }
.c1-ph-qt { font-family: var(--f-disp); font-weight: var(--disp-w); font-size: clamp(1.7rem, 2.4vw, 2.4rem); line-height: 1.08; text-wrap: balance; }
.c1-ph-qt::before { content: "\201E"; color: #f0cf8f; }
.c1-ph-qt::after { content: "\201C"; color: #f0cf8f; }
.c1-ph-by { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #ead7b0; }
.c1-photo figcaption { margin-top: 0.55rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--s-ink-2); text-align: right; }
.c1-photo .note.on-photo { top: 0.6rem; bottom: auto; z-index: 3; }
/* Runde 11: Hover auf dem Porträt, vier Vorschläge, umschaltbar im Panel («Foto-Hover», html[data-ph]); nur mit Maus, ohne «weniger Bewegung».
   1 Rahmen: eine Goldlinie löst sich vom Bild wie ein Passepartout. 2 Glanz: ein warmer Lichtstreif zieht einmal über das Bild.
   3 Licht: das Bild neigt sich leicht zum Cursor, ein Lichtkegel folgt (--px/--py aus b3.js). 4 Zitat: ihr Satz steigt von unten ins Bild. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html:not(.fx-off) .c1-ph { transition: outline-offset 0.7s var(--ease), outline-color 0.5s, transform 0.6s var(--ease), box-shadow 0.6s var(--ease); }
  html:not(.fx-off) .c1-photo img { transition: transform 1.2s var(--ease), filter 0.8s; }
  html:not(.fx-off)[data-ph="1"] .c1-photo:hover .c1-ph { outline-color: rgb(var(--lg) / 0.8); outline-offset: 0.7rem; }
  html:not(.fx-off)[data-ph="1"] .c1-photo:hover img { transform: scale(1.045); }
  html:not(.fx-off)[data-ph="2"] .c1-ph-fx { opacity: 1; mix-blend-mode: screen; background: linear-gradient(105deg, transparent 36%, rgb(240 196 120 / 0.35) 44%, rgb(255 244 220 / 0.9) 50%, rgb(240 196 120 / 0.35) 56%, transparent 64%) 100% 0 / 300% 100% no-repeat; }
  html:not(.fx-off)[data-ph="2"] .c1-photo:hover .c1-ph-fx { background-position: 0% 0; transition: background-position 1.4s cubic-bezier(0.45, 0, 0.2, 1); }
  html:not(.fx-off)[data-ph="2"] .c1-photo:hover img { transform: scale(1.03); filter: saturate(1.06) brightness(1.03); }
  html:not(.fx-off)[data-ph="3"] .c1-ph { transform: perspective(70rem) rotateY(calc(var(--px, 0) * 5deg)) rotateX(calc(var(--py, 0) * -4deg));
    box-shadow: calc(var(--px, 0) * -1.5rem) calc(2.5rem - var(--py, 0) * 1rem) 4.5rem -3rem rgb(92 70 38 / 0.6), 0 0 0 1px rgb(var(--lg) / 0.25); }
  html:not(.fx-off)[data-ph="3"] .c1-ph-fx { mix-blend-mode: overlay; transition: opacity 0.5s;
    background: radial-gradient(22rem circle at calc(50% + var(--px, 0) * 50%) calc(50% + var(--py, 0) * 50%), rgb(255 226 168 / 0.9), rgb(255 226 168 / 0.25) 45%, rgb(60 40 15 / 0.18) 100%); }
  html:not(.fx-off)[data-ph="3"] .c1-photo:hover .c1-ph-fx { opacity: 1; }
  html:not(.fx-off)[data-ph="3"] .c1-photo img { transition: transform 0.7s var(--ease); }
  html:not(.fx-off)[data-ph="3"] .c1-photo:hover img { transform: scale(1.06) translate(calc(var(--px, 0) * -0.7rem), calc(var(--py, 0) * -0.7rem)); }
  html:not(.fx-off)[data-ph="4"] .c1-ph-q { display: grid; opacity: 0; translate: 0 1.5rem; transition: opacity 0.45s, translate 0.7s var(--ease); }
  html:not(.fx-off)[data-ph="4"] .c1-photo:hover .c1-ph-q { opacity: 1; translate: none; }
  html:not(.fx-off)[data-ph="4"] .c1-photo:hover img { transform: scale(1.035); }
}
.c1-claim { grid-column: 1; grid-row: 2; padding-top: 1.1rem; }
.c1-main { grid-column: 1; grid-row: 3; align-self: start; display: grid; gap: 1rem; padding: 1.1rem 0 1.25rem; }
.c1-claim { margin: 0 0 0.35rem; font-family: var(--f-disp); font-weight: var(--disp-w); font-size: clamp(2.7rem, 4.9vw, 5.1rem); line-height: 1; letter-spacing: -0.015em; text-wrap: balance; }
.c1-claim span { display: block; }
.c1-claim-2 { color: #8a6420; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .c1-claim-2 { background: linear-gradient(176deg, #a57a33 0%, #7d5818 45%, #5a3f10 60%, #9a7029 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.c1-short { margin: 0; font-size: 1.05rem; line-height: 1.55; color: var(--s-ink-2); max-width: 34rem; }
.c1-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 0.2rem; }
.c1-book { min-height: 3.6rem; padding: 0 2rem; font-size: 0.86rem; }
.c1-book .ico { width: 1.1rem; height: 1.1rem; }
.c1-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.5rem; margin-top: 0.35rem; padding-top: 1rem; border-top: 1px solid var(--s-rule); }
.c1-score { width: auto; }
.c1-score .hp-score { display: grid; grid-template-columns: auto; row-gap: 0.15rem; }
.c1-score .hp-stars i { width: 1.35rem; height: 1.35rem; }
.c1-score .hp-total { margin: 0.1rem 0 0; }
.c1-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.c1-badges img { display: block; width: 4.4rem; height: 4.4rem; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.fx-off) .c1-badges li { animation: c1-badge-in 0.7s var(--ease) both; }
  html:not(.fx-off) .c1-badges li:nth-child(2) { animation-delay: 0.08s; }
  html:not(.fx-off) .c1-badges li:nth-child(3) { animation-delay: 0.16s; }
  html:not(.fx-off) .c1-badges li:nth-child(4) { animation-delay: 0.24s; }
  html:not(.fx-off) .c1-badges li:nth-child(5) { animation-delay: 0.32s; }
  .c1-badges img { transition: transform 0.45s var(--ease); }
  .c1-badges li:hover img { transform: translateY(-0.25rem) scale(1.06); }
}
@keyframes c1-badge-in { from { opacity: 0; transform: translateY(0.6rem) scale(0.9); } to { opacity: 1; transform: none; } }
.c1-badge-note { flex-basis: 100%; margin: 0; }
.c1-quick { grid-column: 1 / -1; grid-row: 4; margin-top: 1rem; }
.c1-quick-h { margin: 0 0 0.5rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--s-ink-2); }
.c1-quick ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.c1-quick a { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto; gap: 0.35rem 0.75rem; height: 100%; padding: 0.85rem 1rem 0.8rem;
  border: 1px solid var(--s-rule); border-radius: 1rem; background: var(--card-hi); color: var(--s-ink); text-decoration: none; transition: border-color 0.35s, box-shadow 0.4s, transform 0.4s var(--ease); }
.c1-q-n { grid-column: 1 / -1; font-weight: 600; font-size: 0.95rem; line-height: 1.3; }
.c1-q-m { align-self: end; font-size: 0.8rem; color: var(--s-ink-2); white-space: normal; font-variant-numeric: tabular-nums; }
.c1-q-p { align-self: end; justify-self: end; font-family: var(--f-num); font-size: 1.1rem; color: var(--gold-hi); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Runde 7: sichtbarer Buchen-Knopf in jeder Karte, damit die Karten nicht wie Infokästen wirken */
.c1-q-b { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 2.5rem; margin-top: 0.4rem; border: 1px solid rgb(var(--lg) / 0.55); border-radius: 0.65rem;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #6b5434; transition: background 0.35s, color 0.35s, border-color 0.35s, box-shadow 0.4s; }
.c1-q-b .ico { width: 1rem; height: 1rem; transition: transform 0.4s var(--ease); }
.c1-quick a:is(:hover, :focus-visible) { border-color: rgb(var(--lg) / 0.7); box-shadow: 0 1rem 2rem -1.5rem rgb(92 70 38 / 0.6), 0 0 1.8rem -1rem var(--gold-glow); transform: translateY(-0.15rem); }
.c1-quick a:is(:hover, :focus-visible) .c1-q-b { background: var(--gold-fill); border-color: transparent; color: var(--gold-ink); box-shadow: var(--gold-bevel); }
.c1-quick a:is(:hover, :focus-visible) .c1-q-b .ico { transform: translateX(0.25rem); }
@media (max-width: 61.99rem) {
  .c1-hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; padding-bottom: 2rem; }
  .c1-h1, .c1-claim, .c1-photo, .c1-main, .c1-quick { grid-column: 1; grid-row: auto; }
  .c1-brand { font-size: clamp(1.7rem, 6vw, 2.4rem); }
  .c1-claim { font-size: clamp(2.2rem, 9.2vw, 4.2rem); }
  .c1-photo { margin: 1.25rem 0 0; }
  .c1-ph { min-height: 0; max-height: none; }
  .c1-photo img { aspect-ratio: 4 / 4.4; }
  .c1-quick ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 47.99rem) {
  .c1-quick ul { grid-template-columns: minmax(0, 1fr); }
  .c1-badges img { width: 3.6rem; height: 3.6rem; }
}

/* Schaufenster-Schrift C1 (Runde 5): dunkles Gold für die Versalien, warmes Gold für die Schreibschrift (4:1 auf Beige, groß),
   heller Lichtrand wie bei Folie auf Glas. Auf den Kino-Fotos gelten die Nachtwerte. */
.vc1 { --pun-ink: var(--s-acc-t); --pun-script: #946a24; }
.vc1 .pun-b { text-shadow: 0 1px 0 rgb(255 248 230 / 0.9); }

/* ---------- Runde 7: Beauty-Oase als eine Fotoreihe, Keyword als zweite Titelzeile ---------- */
.c1-rg-h .pun-k { margin-top: 0.7rem; font: 500 clamp(1.25rem, 2.2vw, 1.9rem)/1.2 "Montserrat", "Avenir Next", system-ui, sans-serif; letter-spacing: 0.01em; text-transform: none; color: var(--s-ink); }
.c1-rooms { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.c1-rooms li { border-radius: 1rem; overflow: clip; background: var(--card-hi); box-shadow: 0 0 0 1px rgb(var(--lg) / 0.14); }
.c1-rooms img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.c1-rooms:focus-visible { outline: 2px solid var(--gold); outline-offset: 0.4rem; }
.c1-rg .note { margin-top: 0.9rem; }
@media (max-width: 47.99rem) {
  .c1-rooms { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 68%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .c1-rooms::-webkit-scrollbar { display: none; }
  .c1-rooms li { scroll-snap-align: start; }
}

/* ---------- Runde 8: Hauptmenü wie auf der Live-Seite, vier Punkte mit Untermenü (Desktop), aufklappbare Gruppen (Telefon) ---------- */
.vc1 .hd-nav .dd { display: flex; gap: clamp(0.85rem, 1.6vw, 1.8rem); }
.dd-item { position: relative; }
.dd-btn { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 0; border: 0; background: none; color: inherit;
  font: inherit; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; transition: color 0.3s; }
.dd-chev { flex: none; width: 0.4rem; height: 0.4rem; margin-top: -0.22rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); opacity: 0.75; transition: transform 0.35s var(--ease); }
.dd-item.is-open .dd-chev, .mn > li.is-open .dd-chev { transform: translateY(0.22rem) rotate(-135deg); }
.dd-panel { position: absolute; z-index: 5; left: -1rem; top: calc(100% + 0.45rem); min-width: 15.5rem; padding: 0.45rem;
  border: 1px solid rgb(var(--lg) / 0.3); border-radius: 1rem; background: var(--card-hi); box-shadow: 0 1.4rem 2.8rem -1.6rem rgb(92 70 38 / 0.55);
  opacity: 0; visibility: hidden; transform: translateY(0.4rem); transition: opacity 0.25s, transform 0.35s var(--ease), visibility 0s linear 0.35s; }
.dd-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -0.6rem; height: 0.6rem; }
.dd-item.is-open .dd-panel, html:not(.js) .dd-item:is(:hover, :focus-within) .dd-panel { opacity: 1; visibility: visible; transform: none; transition: opacity 0.25s, transform 0.35s var(--ease), visibility 0s; }
.hd-nav .dd-panel ul { display: grid; gap: 0.1rem; }
.hd-nav .dd-panel a { display: block; padding: 0.6rem 0.8rem; border-radius: 0.65rem; font-size: 0.95rem; letter-spacing: 0; text-transform: none; white-space: nowrap; color: var(--s-ink); transition: background 0.25s; }
.hd-nav .dd-panel a:is(:hover, :focus-visible) { background: rgb(var(--gg) / 0.14); }
.vc1 .mnav .mn { display: grid; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.mn-btn { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: 0.55rem 0; border: 0; background: none; color: inherit;
  font-family: var(--f-disp); font-weight: var(--disp-w, 400); font-size: 2.4rem; line-height: 1.1; text-align: left; cursor: pointer; }
.mn-btn .dd-chev { width: 0.7rem; height: 0.7rem; margin-right: 0.4rem; }
.mn-sub { display: grid; gap: 0.1rem; margin: 0 0 0.75rem; padding: 0; list-style: none; }
.js .mn > li:not(.is-open) > .mn-sub { display: none; }
.mnav .mn-sub li a { padding: 0.45rem 0 0.45rem 0.1rem; font-family: var(--f-ui); font-size: 1.1rem; line-height: 1.4; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.fx-off) .vc1 .mnav:not([hidden]) .mn-btn { animation: c1-slide 0.75s var(--ease) backwards; animation-delay: calc(0.18s + var(--i) * 65ms); }
}
/* Runde 9: unter der Bewertungswand nur noch der Link zu Treatwell, mittig unter «Mehr Bewertungen zeigen», ohne Trennlinie */
.vc1 .c1-rv-foot { justify-content: center; margin-top: 1.5rem; padding-top: 0; border-top: 0; }
.b3-about { margin-top: 0.75rem; min-height: 2.9rem; padding: 0 1.4rem; border-radius: 999px; }
/* Sechs Menüpunkte brauchen Platz: Telefonnummer erst ab 90rem in der Kopfzeile (bleibt in Leiste, Kontakt und Fuß), Menüknopf unter 75rem */
.vc1 .hd-nav :is(a, .dd-btn) { white-space: nowrap; }
@media (max-width: 89.99rem) { .vc1 .hd-tel { display: none; } }
@media (max-width: 74.99rem) { .vc1 .hd-nav { display: none; } .vc1 .hd-menu { display: inline-flex; align-items: center; } }
/* Unterpunkte im mobilen Menü: kurz und ohne Markierung einblenden; Logo kleiner, damit «Menü schließen» Platz hat */
@media (prefers-reduced-motion: no-preference) {
  html:not(.fx-off) .vc1 .mnav:not([hidden]) .mn-sub a { animation: c1-slide 0.4s var(--ease) backwards; animation-delay: calc(var(--i) * 35ms); }
}
.vc1 .mnav-top { gap: 1rem; }
.vc1 .mnav-logo { width: min(14rem, 62vw); aspect-ratio: 600 / 120; }

/* ---------- Meisterklasse als Teaser (Runde 10): Banner mit Foto, Beschreibung, «Kurs anfragen» ---------- */
.c1-ak { --sec-pad: clamp(4rem, 8vw, 6.5rem); }
.c1-ak-banner { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: stretch; overflow: clip; border-radius: 1.5rem; border: 1px solid var(--s-rule);
  background: var(--card-hi); box-shadow: 0 2rem 4rem -3rem rgb(92 70 38 / 0.45); }
.c1-ak-fig { position: relative; margin: 0; min-height: 22rem; }
.c1-ak-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 30%; }
.c1-ak-fig .note.on-photo { top: 0.6rem; bottom: auto; }
.c1-ak-body { display: grid; align-content: center; gap: 1rem; padding: clamp(1.75rem, 4.5vw, 3.75rem); }
.c1-ak-body .h2 { margin: 0; --pun-size: clamp(2rem, 3.6vw, 3.6rem); }
.c1-ak-body .lead { margin: 0; max-width: 36rem; }
.c1-ak-cta { margin-top: 0.4rem; }
@media (max-width: 61.99rem) { .c1-ak-banner { grid-template-columns: minmax(0, 1fr); } .c1-ak-fig { min-height: 0; aspect-ratio: 16 / 10; } }

/* ---------- Fuß in vier Spalten (Runde 10): Logo, Claim, Adresse und Zeiten; Wimpern und Körper; Gesicht und Hautprobleme; Seiten ---------- */
.c1-ft { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 2.75fr); gap: 2.5rem 3rem; padding: 0.5rem 0 2.5rem; font-size: 0.92rem; line-height: 1.65; color: var(--s-ink-2); }
.c1-ft-a { display: grid; align-content: start; gap: 0.9rem; }
.c1-ft-a .b3-ft-logo { width: clamp(15rem, 22vw, 20rem); aspect-ratio: 600 / 120; }
.c1-ft-claim { margin: 0; font-family: var(--f-disp); font-weight: var(--disp-w); font-size: 1.3rem; line-height: 1.25; color: var(--s-ink); max-width: 20rem; }
.c1-ft-a address { font-style: normal; }
.c1-ft-hours { margin: 0; padding: 0; list-style: none; }
.c1-ft-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.c1-ft-col { display: grid; align-content: start; gap: 0.35rem; }
.c1-ft-h { margin: 0.9rem 0 0.15rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; overflow-wrap: anywhere; hyphens: auto; text-transform: uppercase; color: var(--s-acc-t); }
.c1-ft-col > .c1-ft-h:first-child { margin-top: 0; }
.c1-ft ul { margin: 0; padding: 0; list-style: none; }
.c1-ft a { color: var(--s-ink-2); text-decoration: none; transition: color 0.3s; }
.c1-ft a:is(:hover, :focus-visible) { color: var(--s-ink); }
.c1-ft-more { display: grid; gap: 0.35rem; }
.c1-ft-ig { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; }
.c1-ft-ig .ico { width: 1.25rem; height: 1.25rem; color: var(--gold); }
@media (max-width: 61.99rem) { .c1-ft { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 47.99rem) { .c1-ft-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.25rem; } .c1-ft-col:last-child { grid-column: 1 / -1; } .c1-ft-h { letter-spacing: 0.08em; } }

/* ---------- Nach oben (Runde 10): runder Knopf unten rechts, erst nach dem ersten Bildschirm; auf dem Telefon über der Buchungsleiste ---------- */
.vc1 .totop { border-color: rgb(190 162 120 / 0.6); background: rgb(251 248 243 / 0.88); color: var(--s-ink); }
.vc1 .totop:is(:hover, :focus-visible) { background: var(--gold-fill); border-color: transparent; box-shadow: var(--gold-bevel), 0 0.8rem 1.6rem -0.9rem rgb(140 112 74 / 0.6); }
@media (max-width: 62rem) { .vc1 .b3-ft-in { padding-bottom: 4.5rem; } }

.vc1 :is(.b3-team-grid, .work-list, .c1-rooms, .ig-grid) > li:nth-child(2) { --ri: 1; }
.vc1 :is(.b3-team-grid, .work-list, .c1-rooms, .ig-grid) > li:nth-child(3) { --ri: 2; }
.vc1 :is(.b3-team-grid, .work-list, .c1-rooms, .ig-grid) > li:nth-child(4) { --ri: 3; }
.vc1 :is(.b3-team-grid, .work-list, .c1-rooms, .ig-grid) > li:nth-child(n+5) { --ri: 4; }

/* Runde 12: Fotos blenden weich ein (app.js setzt .img-wait bis zum Laden, dann .img-in); Rahmen mit Rundung zeigen bis dahin einen ruhigen Ton */
.vc1 :is(.c1-ph, .b3-card-fig, .c1-ak-fig) { background: var(--bg-deep); }
.vc1 img.img-wait { opacity: 0; }
@media (prefers-reduced-motion: no-preference) { html:not(.fx-off) .vc1 img.img-in { animation: img-in 0.9s var(--ease) backwards; } }
@keyframes img-in { from { opacity: 0; filter: blur(10px); scale: 1.025; } }

/* Runde 14: Überschriften in warmem Grau statt Tinte (Olexii: Schwarz zu hart); Wortspiel- und Goldteile behalten ihre Farbe.
   #4f4943 auf #f4eee5: 8,1:1, auf den hellen Karten 8,9:1. */
.vc1 { --s-head: #4f4943; }
.vc1 :is(.h2, .c1-brand, .c1-claim, .b3-card-h, .b3-an-h, .b3-form-h, .b3-tm-name, .c1-rg-h .pun-k, .work-t, .gzw-h) { color: var(--s-head); }
/* Runde 14: Team aus zwei Spezialistinnen: zwei breite Karten, auf dem Desktop Porträt links und Text rechts */
.vc1 .b3-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 62rem) {
  .vc1 .b3-tm { grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(1.5rem, 2.5vw, 2.5rem); }
  .vc1 .b3-tm > * { grid-column: 2; }
  .vc1 .b3-tm > .b3-tm-img { grid-column: 1; grid-row: 1 / span 5; width: 9.5rem; height: 9.5rem; margin: 0; }
}
@media (max-width: 47.99rem) { .vc1 .b3-team-grid { grid-template-columns: minmax(0, 1fr); } }

/* Runde 18: nur die Wortmarke «GVANTSA ROTT beauty» in Champagnergold, ohne G, so groß wie der Kopf es zulässt in Kopf, Menü und Fuß */
.vc1 .hd-logo img { width: 14.5rem; aspect-ratio: 600 / 120; }
@media (max-width: 62rem) { .vc1 .hd-logo img { width: 13.5rem; } }

/* Runde 19: Ersatz für Browser ohne animation-timeline (app.js setzt html.rv-js, .rv und .rv-in) */
@media (prefers-reduced-motion: no-preference) {
  html.rv-js:not(.fx-off) .vc1 .rv { opacity: 0; translate: 0 2.75rem; transition: opacity 0.7s var(--ease) var(--rd, 0ms), translate 0.8s var(--ease) var(--rd, 0ms); }
  html.rv-js:not(.fx-off) .vc1 .rv.rv-in { opacity: 1; translate: none; }
}

/* Runde 20 (Olexii, Chrome): Auftritte laufen jetzt immer zeitgesteuert (app.js, IntersectionObserver), nicht mehr an die Scrollstrecke gebunden:
   die 9 rem lange Scrollstrecke war so kurz, dass man den Effekt beim normalen Scrollen nicht sah. Hinein beim Herunterscrollen, am unteren Rand wieder hinaus beim Zurückscrollen.
   Der erste Bildschirm spielt beim Laden eine eigene Choreografie: Foto öffnet sich von unten, Titelzeilen steigen nacheinander auf. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.fx-off) .c1-photo { animation: c1-photo-in 1.25s cubic-bezier(0.22, 0.8, 0.2, 1) backwards; }
  html:not(.fx-off) .c1-photo .c1-ph img { animation: c1-photo-zoom 1.9s cubic-bezier(0.22, 0.8, 0.2, 1) backwards; }
  html:not(.fx-off) :is(.c1-brand, .c1-sub, .c1-claim > span, .c1-short, .c1-cta, .c1-proof, .c1-quick-h) { animation: c1-up 0.95s var(--ease) backwards; }
  html:not(.fx-off) .c1-sub { animation-delay: 0.08s; }
  html:not(.fx-off) .c1-claim > span:nth-child(1) { animation-delay: 0.2s; }
  html:not(.fx-off) .c1-claim > span:nth-child(2) { animation-delay: 0.34s; }
  html:not(.fx-off) .c1-claim > span:nth-child(3) { animation-delay: 0.48s; }
  html:not(.fx-off) .c1-short { animation-delay: 0.62s; }
  html:not(.fx-off) .c1-cta { animation-delay: 0.74s; }
  html:not(.fx-off) .c1-proof { animation-delay: 0.86s; }
  html:not(.fx-off) .c1-quick-h { animation-delay: 1s; }
  html:not(.fx-off) .c1-quick li { animation: c1-up 0.9s var(--ease) backwards; animation-delay: calc(1.05s + var(--qi, 0) * 0.09s); }
  html:not(.fx-off) .c1-quick li:nth-child(2) { --qi: 1; }
  html:not(.fx-off) .c1-quick li:nth-child(3) { --qi: 2; }
  html:not(.fx-off) .c1-quick li:nth-child(4) { --qi: 3; }
}
@keyframes c1-up { from { opacity: 0; translate: 0 1.6rem; } }
@keyframes c1-photo-in { from { clip-path: inset(100% 0 0 0 round 1.25rem); opacity: 0; translate: 0 2.5rem; } to { clip-path: inset(0 round 1.25rem); opacity: 1; translate: none; } }
@keyframes c1-photo-zoom { from { scale: 1.16; } }

/* ---------- Bilder «Gesicht mit Behandlung» (.tri) und Hautthemen-Icons (.ic-s): Hintergrundbild, Glanz beim Zeigen ----------
   Der Glanz läuft nur innerhalb der Linien: dieselbe Datei dient als Maske für einen hellen Streifen. */
.tri, .ic-s { position: relative; display: block; background: var(--m) center / contain no-repeat; transition: transform .7s var(--ease); }
.tri { aspect-ratio: 1; }
.ic-s { width: 3.8rem; aspect-ratio: 1; margin-bottom: .7rem; }
.tri::after, .ic-s::after { content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
  background: linear-gradient(110deg, transparent 28%, rgb(150 108 36 / 1) 50%, transparent 72%) 0 0 / 260% 100% no-repeat; }
.t3-svc-main.has-ill { display: grid; grid-template-columns: clamp(4.6rem, 7vw, 6.6rem) minmax(0, 1fr); gap: 1rem 1.3rem; align-items: center; }
.vc1 .row-ico { display: block; width: clamp(3.6rem, 6vw, 6rem); }
.vc1 .row-ico:empty { display: none; }
.vc1 .row:has(.row-ico:not(:empty)) { grid-template-columns: auto minmax(0, 1fr) auto auto; }
@media (max-width: 40rem) { .vc1 .row-ico { display: none; } }
@media (max-width: 47.99rem) { .t3-svc-main.has-ill { grid-template-columns: 3.8rem minmax(0, 1fr); } }
@media (prefers-reduced-motion: no-preference) {
  html:not(.fx-off) :is(.t3-svc, .row, .t1-card):is(:hover, :focus-within) :is(.tri, .ic-s) { transform: translateY(-.2rem) rotate(-1.2deg) scale(1.07); }
  html:not(.fx-off) :is(.t3-svc, .row, .t1-card):is(:hover, :focus-within) :is(.tri, .ic-s)::after, html:not(.fx-off) :is(.tri, .ic-s).is-glint::after { animation: tri-glint 1.25s var(--ease) both; }
}
@keyframes tri-glint { 0% { opacity: 0; background-position: 100% 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; background-position: 0 0; } }

/* Telefon: Preisspannen («60 bis 169 €») laufen nicht mehr aus der Karte. Name und Text stehen oben über die ganze Breite,
   darunter Dauer und Preis links und der Pfeil rechts (die ganze Zeile bleibt der Buchungslink). */
@media (max-width: 40rem) {
  .vc1 .row { grid-template-columns: minmax(0, 1fr) auto; row-gap: .45rem; }
  .vc1 .row-main { grid-column: 1 / -1; }
  .vc1 .row-meta { grid-column: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .8rem; text-align: left; }
  .vc1 .row-dur { display: inline; }
  .vc1 .row-cta { grid-column: 2; justify-self: end; }
}

/* ---------- Barrierefreiheit (Runde 19): Pause für Bewegung, Zielgröße 24 px, Vorlagen für Telefon ---------- */
.skip-motion { border: 0; font: inherit; cursor: pointer; }
.motion-toggle { display: inline-flex; align-items: center; min-height: 1.5rem; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.motion-toggle:is(:hover, :focus-visible) { color: var(--s-ink); }
.motion-toggle[aria-pressed="true"]::before { content: "\25B6\00a0"; text-decoration: none; }
.vc1 :is(.b3-link, .t3-svc-more, .sv-all, .work-more, .ft-legal a, .b3-card-more a, .an-links a, .b3-ft a[href^="tel:"]) { display: inline-flex; align-items: center; min-height: 1.5rem; }
@media (max-width: 47.99rem) { .vc1 .row-cta { min-width: 1.5rem; min-height: 1.5rem; justify-content: center; } }
.vc1 .hd-tel { min-height: 1.5rem; }
.vc1 .ft-legal { gap: 0.25rem 1.5rem; }

/* Themen-Tabs auf dem Telefon: zwei Spalten statt abgeschnittener Leiste */
@media (max-width: 47.99rem) {
  .vc1 .b3-tablist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; border-radius: 1.4rem; overflow: visible; }
  .vc1 .b3-tab-ind { display: none; }
  .vc1 .b3-tablist [role="tab"] { flex: none; min-width: 0; padding: 0 0.75rem; white-space: normal; text-align: center; line-height: 1.2; min-height: 2.9rem; }
  .vc1 .b3-tablist [role="tab"]:last-child { grid-column: 1 / -1; }
  .vc1 .b3-tabs .b3-tablist [role="tab"][aria-selected="true"] { background: var(--gold-fill); }
}

/* Leistungskarten der Startseite auf dem Telefon: nur die erste offen, die Überschrift ist der Knopf (Skript baut ihn) */
.b3-card-toggle { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.b3-card-toggle .cc-ico { position: relative; flex: none; width: 1.2rem; height: 1.2rem; }
.b3-card-toggle .cc-ico::before, .b3-card-toggle .cc-ico::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 2px; margin-top: -1px; background: currentColor; transition: transform 0.3s var(--ease); }
.b3-card-toggle .cc-ico::after { transform: rotate(90deg); }
.b3-card-toggle[aria-expanded="true"] .cc-ico::after { transform: rotate(0); }
.b3-card-toggle:focus-visible { outline: 2px solid var(--s-ink); outline-offset: 4px; border-radius: 0.4rem; }
.b3-card.is-collapsed .cc-part { display: none; }