/* pronta.ch: changes on top of Martin's template (css/site.css stays byte-identical).
   Rolf 28.09., 22:00: as close to the original as possible, motion, cards and background
   structure included; only obvious AI elements are replaced.
   Spec: docs/superpowers/specs/2026-09-28-pronta-ch-own-site.md */

/* B1 to B3: real template screenshots instead of the AI pictures of invented firms */
.showcase-slide--shot { display: block; }
.showcase-shot { position: absolute; inset: 0; display: block; }
.showcase-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.showcase-top .showcase-host { text-transform: none; letter-spacing: .01em; }
.preview-live { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in oklch, currentColor 35%, transparent); }
.preview-live:hover { color: var(--template-ink); }
/* the CTA takes the palette colour as in the original; dark text where the colour is light (yellow, turquoise) */
.style-cta { color: var(--template-on-accent, #fff); }

/* B4: the two real portraits 4:5 side by side, same eye line (crop in the spec);
   the person row keeps the original's hover movement */
.team-grid { grid-template-columns: 1fr 1fr; align-items: start; gap: clamp(14px, 2vw, 24px); }
.person, .design-original-autumn .person, .design-original-autumn.design-colorway .person { flex-direction: column; align-items: stretch; gap: 12px; padding: 12px; }
.person:hover { transform: translateY(-6px); }
.person img { width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 12px; }

/* F2 iPhone scroll jank (Martin 28./29.09., confirmed smooth with ?test=cardglass): the style
   cards are opaque, their backdrop blur is invisible but WebKit recomputed it for all 5
   stacked cards every frame (the template had 3). Spec section 3d. */
.style-card { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* F1 Template bug, fixed minimally: a glow pushed the page 29 px (390) and 103 px (1440)
   sideways; clip keeps sticky intact and changes nothing visible */
/* #73: the clip on the section cut the glow off in two hard vertical edges; it now sits on
   the page wrapper, so the glow fades out and nothing scrolls sideways */
.design-original-autumn { overflow-x: clip; }


/* C: colour and contrast (Rolf 28.09.: "zu wenig Kontrast", "zu braun"; first variant B, then
   variant A chosen). Martin's sandstone tones, lighter and less saturated; dark band stays
   brown, no second hue. Measured with tools/qa/contrast.py; spec section 3c. */
.design-colorway--sandstein {
  --palette-page:#f6f1ea; --palette-glass:#fdf9f3b8; --palette-card:#fefbf6e6; --palette-team:#ece2d5c4;
  --palette-footer:#ece3d7c4; --palette-outer:#efe5d8; --palette-inner:#fdfaf5; --palette-glow:#dbae7924;
  --palette-header:#f8f3ece6; --palette-muted:#675549; --palette-accent-text:#8a4529;
}
/* C1 withdrawn 30.09. (#83, Martin): frames keep the template's thin white rim with its light
   inner edge */
/* C2 small text below 4.5:1: kicker lines, price labels, stack tabs, step numbers, roles, card footers */
.design-original-autumn.design-colorway .eyebrow,
.design-original-autumn.design-colorway .pricing-label,
.design-original-autumn.design-colorway .style-stack-tab span { color: var(--palette-accent-text); }
.step-number, .benefit-number, .person span { color: var(--palette-muted); }
.legal-updated { color: var(--palette-muted, #675549) !important; }
.style-card--editorial .preview-footer { color: #595f67; }
/* C3 style CTA: palette colour darkened only where white text stays below 4.5:1 (terracotta) */
.style-cta { background: var(--template-cta, var(--template-accent)); border-color: var(--template-cta, var(--template-accent)); }
/* C4 legal pages carry their own fixed beige in the template: same lighter sandstone world */
.legal-page { background-color: #f6f1ea; }
.legal-content.glass-surface { background: #fdf9f3e0; border-color: color-mix(in oklab, #43372f 17%, transparent); }
.legal-content p, .legal-content address { color: #675549; }

/* T: iPhone test switches (?test=..., set as html.t-* by js/site.js); no effect without the
   parameter. Spec section 3d. */
/* Martin's issues 70 to 79 (30.09.), spec section 3e */
/* #70, #71: the diagonal lines hold still behind the scrolling page and read quieter. They
   leave the wrapper background for a fixed layer; 12000px is about the page height, so the
   slope stays as before */
.design-original-autumn.design-colorway {
  isolation: isolate;
  background-image: radial-gradient(ellipse 60% 24% at 84% 12%,var(--palette-glow),transparent 78%),
                    radial-gradient(ellipse 54% 23% at 13% 62%,var(--palette-glow),transparent 78%);
}
.design-original-autumn.design-colorway::before {
  content: ""; position: fixed; inset: 0 0 auto; height: 100lvh; z-index: -1; pointer-events: none;
  background: var(--palette-lines) top / 100% 12000px no-repeat; opacity: .55;
}
/* #72: the shadows of the hero panel (desktop) and the carousel (mobile) and the lower half
   of the waves (mobile) darkened the "Webdesign mit Wirkung" row; kept shorter and lighter.
   On desktop the waves keep the template mask (#82) */
@media (max-width: 899px) {
  .design-original-autumn.design-colorway--sandstein .hero-waves {
    -webkit-mask-image: linear-gradient(#000 0% 48%, #0000 74%); mask-image: linear-gradient(#000 0% 48%, #0000 74%);
  }
}
.design-original-autumn .showcase-carousel--hero.glass-surface { box-shadow: 0 16px 36px #5b412a17, inset 0 1px #ffffffad; }
.design-original-autumn .hero-panel.glass-surface { box-shadow: 0 16px 36px #382b1f1c; }
/* #75: the dot before the hero kicker breathes gently, still under reduced motion */
.hero-eyebrow .signal-dot, .eyebrow .signal-dot { animation: dot-pulse 2.8s ease-in-out infinite; }
@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in oklab, var(--palette-accent) 16%, transparent); }
  50% { box-shadow: 0 0 0 8px color-mix(in oklab, var(--palette-accent) 4%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .hero-eyebrow .signal-dot, .eyebrow .signal-dot { animation: none; } }
/* #76: a long press on a button no longer selects its label (the white box) or opens the
   callout */
.button, .style-cta, .showcase-arrow, .preview-arrow, .menu-toggle, .showcase-dots button, [data-swatch] {
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
/* #77, #87: no button lifts any more, on touch or with the mouse; hovering (mouse) and
   pressing (all) shrink it a little with a light white rim */
.button:hover, .style-cta:hover, .showcase-arrow:hover { transform: none; }
.button, .style-cta, .showcase-arrow { transition-property: transform, box-shadow, background-color, border-color, color; }
@media (hover: hover) {
  .button:hover, .style-cta:hover, .showcase-arrow:hover {
    transform: scale(.97); box-shadow: inset 0 0 0 1.5px #ffffff73, inset 0 0 14px #ffffff47;
  }
}
.button:active, .style-cta:active, .showcase-arrow:active {
  transform: scale(.96); transition-duration: .08s;
  box-shadow: inset 0 0 0 1.5px #ffffff73, inset 0 0 14px #ffffff47;
}
/* #78, #88: the tilted example card keeps one rim only, the white one, with a light 3D edge
   (no extra blur, Nr. 132) */
.design-original-autumn.design-colorway .showcase-carousel--story.glass-surface {
  border: 1px solid #ffffff73;
  box-shadow: 0 34px 70px #00000038, inset 0 1px 0 #ffffff59, inset 0 -2px 6px #00000029;
}
/* #79, #94: the gap above "Transparent von Anfang an" (from the last style card) equals the gap
   above "Was Pronta anders macht" (from the hero row): 108 px mobile, 144 px desktop */
.design-original-autumn .pricing-section { padding-top: 82px; }
@media (min-width: 900px) { .design-original-autumn .pricing-section { padding-top: 116px; } }

/* Martin's issues 82 to 91 (30.09. evening), spec section 3f */
/* #84, #89: the preview windows take the shape of the shots (1280 wide, bottom edge chosen so
   no text or box is cut, 2x resolution), so nothing is cropped at any width */
.design-original-autumn .showcase-carousel--hero .showcase-window,
.design-original-autumn .showcase-carousel--story .showcase-window { height: auto; aspect-ratio: 960 / 675; }
/* #85, #91, #95: benefit, step and pricing cards as in the template: warm translucent fill with the lines
   showing through, thin white rim, numbers back (K2 withdrawn); no blur (Nr. 132) */
.design-original-autumn.design-colorway .benefit-card,
.design-original-autumn.design-colorway .step-card,
.design-original-autumn.design-colorway .pricing-card.glass-surface { background: #f9eedcc7; }
/* #86: the team card a shade darker than the page, translucent, white rim (template tone) */
.design-original-autumn.design-colorway .team-card { background-color: #e3cdb2ba; }

/* #101: "Datenschutzerklärung" stays on one line on phones; the size follows the width below
   the template size (the word is about 9.1 em wide), "Impressum" shrinks the same way */
.legal-page .legal-main h1 { font-size: min(clamp(47px, 6vw, 75px), calc((100vw - 40px) / 9.4)); }

/* #102: what the price includes, one clear line right above the price cards */
.pricing-included { margin: -14px 0 18px; max-width: 940px; color: var(--palette-ink); font-size: clamp(17px, 1.5vw, 20px); font-weight: 600; letter-spacing: -.01em; line-height: 1.35; }

/* #93: while the style cards stack, the big heading fades out and the question stays in one
   compact line under the header (sticky, zero height, so nothing below moves); site.js puts the
   stack below it and toggles .is-compact on the section. Opacity and transform only */
.style-compact-head { position: sticky; top: var(--compact-top, 82px); height: 0; z-index: 40; pointer-events: none; text-align: center; }
.style-compact-head > div { padding: 12px 16px 0; opacity: 0; transform: translateY(-6px); transition: opacity .3s, transform .3s; }
.templates-section.is-compact .style-compact-head > div { opacity: 1; transform: none; }
.templates-intro { transition: opacity .3s; }
.templates-section.is-compact .templates-intro { opacity: 0; }
.style-compact-head .eyebrow { margin: 0 0 4px; }
.style-compact-q { margin: 0; color: var(--palette-ink); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; font-size: clamp(19px, 2.1vw, 30px); }
/* #99: the compact line keeps its height while hidden, so the stack is measured below it from the
   start (display:none measured 0 and let the tabs slide under it on the iPhone). Where the stack
   does not fit (most phones), the cards scroll and the question stays as a slim band (Rolf 01.10.):
   solid like the header, no blur (Nr. 132); on phones the band and the stack line show the
   question only */
.style-editorial[data-stack-disabled=true] .style-compact-head > div {
  margin-inline: calc(50% - 50vw); padding: 9px 16px 10px;
  background: #f8f3ec; box-shadow: 0 1px 0 color-mix(in oklab, var(--palette-ink) 12%, transparent);
}
@media (max-width: 599px) {
  .style-compact-head .eyebrow { display: none; }
  .style-compact-head > div { padding-top: 8px; }
  .style-compact-q { font-size: 15px; letter-spacing: -.02em; }
}
@media (prefers-reduced-motion: reduce) {
  .style-compact-head > div, .templates-intro { transition: none; }
}
/* #99: slimmer style cards on phones so the stack fits below the compact line; the preview keeps
   its shot (#84), only type, gaps and the button shrink */
@media (max-width: 599px) {
  .design-original-autumn .style-card--editorial .style-card-inner { padding: 12px 12px 8px; }
  .design-original-autumn .style-card--editorial .style-card-head { gap: 10px; padding-bottom: 8px; }
  .design-original-autumn .style-card--editorial .style-description h3 { font-size: 23px; margin-bottom: 4px; }
  .design-original-autumn .style-card--editorial .style-description p { font-size: 14.5px; line-height: 1.35; }
  .design-original-autumn .style-card--editorial .style-controls { gap: 8px; }
  .design-original-autumn .style-card--editorial .style-cta { min-height: 44px; padding: 10px 18px; font-size: 15px; }
  /* Nr. 142: the question stays on one line down to 360 px (the card column already has its margins) */
  .style-compact-head > div { padding-inline: 0; }
}
/* Nr. 142: on short screens site.js sets --preview-h so the whole stack fits; the preview shrinks
   as a whole shot, centered, never cropped (#84); without the variable nothing changes */
.design-original-autumn .style-card--editorial .style-preview-frame { width: min(100%, calc(var(--preview-h, 9999px) * 1280 / 907)); margin-inline: auto; }
/* Nr. 142, laptops (L1, Rolf 03.10.): while the preview shrinks the template's 480 px card height
   gives way; on short windows the question drops its kicker and gets smaller, and the style
   titles shrink so "Persönlich & nahbar" and "Kompetent & etabliert" stay on one line */
.style-editorial[data-fit=true] .style-card--editorial .style-card-inner { min-height: 0; }
@media (min-width: 600px) and (max-height: 800px) { .style-compact-head .eyebrow { display: none; } }
@media (min-width: 600px) and (max-height: 700px) { .style-compact-q { font-size: 22px; } }
@media (min-width: 1100px) and (max-height: 700px) {
  .design-original-autumn .style-card--editorial .style-description h3 { font-size: 2.85vw; }
}

/* noglass: no backdrop blur anywhere; surfaces a little more opaque so the look holds */
html.t-noglass *, html.t-noglass *::before, html.t-noglass *::after,
html.t-glassmove .site-header, html.t-glassmove .main-nav, html.t-glassmove .showcase-carousel,
html.t-glassmove .hero-panel, html.t-glassmove .style-card, html.t-glassmove .style-expand {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html.t-noglass .design-colorway--sandstein, html.t-glassmove .design-colorway--sandstein {
  --palette-glass:#fdf9f3ee; --palette-header:#f8f3ecf7;
}
html.t-noglass .design-colorway--sandstein { --palette-card:#fefbf6f5; --palette-team:#ece2d5f2; }
/* glassmove (part of fix): the static cards keep a lighter glass */
html.t-glassmove .glass-surface:not(.hero-panel):not(.showcase-carousel) {
  -webkit-backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important;
}
/* noblur: no filter blur (reveal and the glows) */
html.t-noblur [data-reveal], html.t-noblur .statement-glow,
html.t-noblur .benefits-section::before, html.t-noblur .hero-preview::before,
html.t-noblur .contact-band::before { filter: none !important; }
/* noreveal (part of fix): reveals fade and rise without the blur */
html.t-noreveal [data-reveal] { filter: none !important; }