/* Ergänzungen zur Astro-Gestaltung: Hero-Zeile, zusätzliche Buttons, Branchen-Links,
   Footer-Spalte «Branchen» und der Demo-Entwurf für Handwerksbetriebe. */

/* Hero: kleine Zeile über dem H1 */
.hero-kicker {
  color: var(--grey-light);
  font-size: clamp(.9375rem, .9rem + .2vw, 1.0625rem);
  font-weight: 500;
  letter-spacing: -.005em;
  margin-bottom: clamp(.75rem, .5rem + .6vw, 1.125rem);
}
.nowrap { white-space: nowrap; }
/* Wörter in der Klammer behalten ihre Reihenfolge beim Einblenden */
.nowrap > .rise:nth-child(1) { --i: 7; }
.nowrap > .rise:nth-child(2) { --i: 8; }
.hero-copy[data-astro-cid-lcdefpme] h1[data-astro-cid-lcdefpme] { max-width: 22ch; }
@media (width <= 30rem) {
  .hero-br { display: none; }
}

/* Button mit kurzem Satz am Ende eines Abschnitts */
.section-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.5rem;
  margin-top: 2.5rem;
}
.section-cta p {
  color: var(--ink-soft);
  font-weight: 500;
}
.prices-cta { margin-top: 2rem; }
.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}

/* Startseite: Links zu den Branchenseiten unter den Demo-Entwürfen */
.for-whom {
  margin-top: clamp(3rem, 2rem + 3vw, 4.5rem);
  padding-top: 2rem;
  border-top: 1px solid var(--paper-line);
}
.for-whom-title {
  font-size: 1.125rem;
  margin-bottom: 1rem;
}
.for-whom-links {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  list-style: none;
}
.for-whom-links .chip {
  min-height: 44px;
  padding-inline: 1.1rem;
  color: var(--ink);
  font-size: .9375rem;
  text-decoration: none;
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.for-whom-links .chip:hover {
  background: #ffffff1c;
  border-color: #ffffff42;
}

/* Branchenseiten */
.branch-demo { display: grid; justify-items: center; }
.branch-prices { margin-top: 1.25rem; }

/* Footer: vierte Spalte «Branchen» */
@media (width >= 48rem) {
  .site-footer .top { grid-template-columns: 1fr 1fr; }
}
@media (width >= 64rem) {
  .site-footer .top { grid-template-columns: 1.3fr 1.2fr 1fr .8fr; }
}

/* ------------------------------------------------------------------
   Layout 2026-10: ruhiger Rhythmus, durchgehend dunkel
   ------------------------------------------------------------------ */

/* Ein Abstand für alle Abschnitte, auf dem Handy deutlich kleiner */
:root { --section: clamp(4rem, 2.75rem + 4.5vw, 7.5rem); }
@media (width <= 40rem) { :root { --section: 3.25rem; } }
main > section { min-height: 0; }
.hero[data-astro-cid-lcdefpme] { padding-bottom: var(--section); }

/* Abwechslung über Navy-Töne statt Weiss */
main > section.tone-alt { --tone: #16233d73; }

/* Mindestens 44 px Klickfläche und sichtbarer Fokus auf dunklem Grund */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* Links im Fliesstext sind nach WCAG 2.5.8 ausgenommen; einzelne Links bekommen 44 px */
.mf-more, .text-link, .cta-line { min-height: 44px; display: inline-flex; align-items: center; }

/* Hero: Text links, Demo-Handy rechts; auf dem Handy unter den Buttons */
.hero-grid[data-astro-cid-lcdefpme] { gap: 2.5rem; }
.hero-copy[data-astro-cid-lcdefpme] h1[data-astro-cid-lcdefpme] { max-width: 20ch; }
.hero-sub {
  margin-top: clamp(.75rem, .5rem + .8vw, 1.25rem);
  color: var(--ink);
  font-size: clamp(1.25rem, 1.05rem + .8vw, 1.625rem);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.3;
}
.hero-copy > .hero-sub.rise { animation-delay: .6s; }
.hero-note { line-height: 1.5; }
@media (width >= 60rem) {
  .hero-grid[data-astro-cid-lcdefpme] { grid-template-columns: 1.25fr 1fr; gap: 4rem; }
}

/* Preise: gleiche Grundlinie in allen Karten */
.price-row[data-astro-cid-lcdefpme] { row-gap: 1.5rem; padding-top: 1.25rem; }
.price-label {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: .3rem .85rem;
  border-radius: var(--pill);
  background: var(--accent);
  color: var(--navy);
  font-size: .8125rem;
  font-weight: 600;
  white-space: nowrap;
}
.price[data-astro-cid-lcdefpme] { position: relative; }
.price-hl[data-astro-cid-lcdefpme] {
  box-shadow: inset 0 1px 0 #fff3, 0 0 0 var(--bezel) #9cc2ff12, 0 0 0 calc(var(--bezel) + 1.5px) #9cc2ffb3, 0 40px 90px -40px #4876cc8c;
}
@supports (grid-template-rows: subgrid) {
  @media (width >= 52rem) {
    .price-row[data-astro-cid-lcdefpme] { grid-template-rows: repeat(4, auto); column-gap: 1.5rem; row-gap: 0; }
    .price[data-astro-cid-lcdefpme] { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: .5rem; }
    .price[data-astro-cid-lcdefpme] .price-sum,
    .price[data-astro-cid-lcdefpme] .price-unit { margin-top: 0; }
    .price[data-astro-cid-lcdefpme] .price-amount { margin-top: 0; padding-top: 1.25rem; align-self: end; }
  }
}

/* «Die Website gehört Ihnen» als kleiner Block unter den Preisen */
.own-note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
  max-width: 46rem;
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-l);
  background: var(--paper);
  color: var(--ink-soft);
}
.own-note strong { display: block; margin-bottom: .2rem; color: var(--ink); font-weight: 600; }
.own-note svg { width: 1.5rem; height: 1.5rem; margin-top: .1rem; color: var(--accent); }

/* FAQ: Überschrift über die volle Breite, Akkordeon schmal und zentriert */
.faq-grid[data-astro-cid-lcdefpme] { grid-template-columns: 1fr; gap: 2rem; }
.faq-grid[data-astro-cid-lcdefpme] > h2 { text-align: center; }
.faq-list[data-astro-cid-lcdefpme] { width: calc(100% - 14px); max-width: 760px; margin-inline: auto; }

/* Über uns: Porträts links, Text rechts */
.about-grid[data-astro-cid-lcdefpme] { align-items: center; }
@media (width >= 56rem) {
  .about-grid[data-astro-cid-lcdefpme] { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
}
.about-body h2 { margin-bottom: 1.25rem; }
.about-body > p { color: var(--ink-soft); max-width: var(--measure); }
.about-people { display: grid; gap: .9rem; margin-block: 1.5rem; list-style: none; }
.about-people li { display: grid; gap: .15rem; padding-left: 1rem; border-left: 2px solid var(--accent); }
.about-people strong { font-weight: 600; }
.about-people span { color: var(--ink-soft); }
.about-body .btn { margin-top: 1.5rem; }

/* Kurzes Formular im Abschluss-Block */
.cta-panel[data-astro-cid-lcdefpme] { align-items: start; }
.cta-direct { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin-top: 1.5rem; }
.mini-form { display: grid; gap: 1rem; }
.mf-field { display: grid; gap: .4rem; }
.mf-field label { font-size: .9375rem; font-weight: 500; }
.mf-field input {
  width: 100%;
  min-height: 3rem;
  padding: .7rem .9rem;
  border: 1px solid #ffffff3d;
  border-radius: var(--radius);
  background: #ffffff0d;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}
.mf-field input:hover { border-color: var(--ink-soft); }
.mf-field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.mf-field input[aria-invalid="true"] { border-color: #ff9f94; box-shadow: inset 0 0 0 1px #ff9f94; }
.mf-error { color: #ffb3aa; font-size: .875rem; font-weight: 500; }
.mf-error:empty { display: none; }
.mf-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.mini-form .btn { justify-self: start; }
.mini-form .btn[aria-busy="true"] { opacity: .7; cursor: progress; }
.mf-status { padding: 1rem 1.25rem; border: 1px solid #ff9f94; border-radius: var(--radius); background: #ff786414; }
.mf-note { color: var(--ink-soft); font-size: .875rem; line-height: 1.5; }
.mf-more { font-weight: 600; }
@media (width <= 30rem) { .mini-form .btn { justify-self: stretch; } }

/* Versteckte Elemente bleiben versteckt, auch wenn eine Komponente display setzt */
[hidden] { display: none !important; }

/* Handy: kompakter, damit die Startseite kurz bleibt */
@media (width <= 40rem) {
  :root { --section: 2.25rem; }
  main > section:first-child { padding-top: 6rem; }
  .feature-list[data-astro-cid-lcdefpme] li[data-astro-cid-lcdefpme] { padding-block: .8rem; }
  .feature-list[data-astro-cid-lcdefpme] h3[data-astro-cid-lcdefpme] { font-size: 1.0625rem; }
  .step-list[data-astro-cid-lcdefpme] li[data-astro-cid-lcdefpme] { padding-block: .9rem; }
  .step-list[data-astro-cid-lcdefpme] p[data-astro-cid-lcdefpme] { font-size: .9375rem; }
  .for-whom-links { display: grid; grid-template-columns: 1fr 1fr; }
  .for-whom-links .chip { width: 100%; justify-content: center; text-align: center; line-height: 1.2; }
  .for-whom .section-cta { margin-top: 1.25rem; }
  .about-grid[data-astro-cid-lcdefpme] { gap: 1.25rem; }
  .ba[data-astro-cid-67ggu7zt] { gap: .75rem; }
  .lead { font-size: 1.0625rem; }
  .hero-demo .demo .ph { width: min(19rem, 50vw); }
  .searches[data-astro-cid-lcdefpme] { gap: .5rem; }
  .searches[data-astro-cid-lcdefpme] li[data-astro-cid-lcdefpme] { padding: .7rem 1.1rem .7rem .9rem; font-size: 1.0625rem; }
  .problem-grid[data-astro-cid-lcdefpme] { gap: 1.5rem; }
  .problem-grid[data-astro-cid-lcdefpme] h2[data-astro-cid-lcdefpme] { margin-bottom: 1rem; }
  .hero-note[data-astro-cid-lcdefpme] { font-size: .8125rem; margin-top: 1rem; }
  .hero-grid[data-astro-cid-lcdefpme] { gap: 1.75rem; }
  .demo-switch .demo .ph { width: min(21rem, 60vw); }
  .for-whom-links { gap: .5rem; }
  .feature-icon[data-astro-cid-lcdefpme] { display: none; }
  .feature-list[data-astro-cid-lcdefpme] li[data-astro-cid-lcdefpme] { grid-template-columns: 1fr; }
  .step-list[data-astro-cid-lcdefpme] li[data-astro-cid-lcdefpme] { grid-template-columns: 2.75rem 1fr; }
  .step-num[data-astro-cid-lcdefpme] { width: 2.25rem; height: 2.25rem; font-size: 1rem; }
  .faq-item[data-astro-cid-lcdefpme] summary[data-astro-cid-lcdefpme] { padding-block: .85rem; font-size: 1.0625rem; }
  .price[data-astro-cid-lcdefpme] { display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; padding: 1.25rem 1.35rem; }
  .price[data-astro-cid-lcdefpme] h3 { grid-column: 1; grid-row: 1; align-self: center; }
  .price[data-astro-cid-lcdefpme] .price-amount { grid-column: 2; grid-row: 1; align-self: center; margin: 0; padding: 0; justify-content: flex-end; flex-wrap: nowrap; }
  .price[data-astro-cid-lcdefpme] .price-sum { grid-column: 1 / -1; grid-row: 2; }
  .price[data-astro-cid-lcdefpme] .price-unit { grid-column: 1 / -1; grid-row: 3; margin-top: .2rem; }
  .price[data-astro-cid-lcdefpme] .amount { font-size: 1.75rem; }
  .price-row[data-astro-cid-lcdefpme] { gap: 1.25rem; }
  .own-note { padding: 1rem 1.1rem; font-size: .9375rem; }
  .cta-panel[data-astro-cid-lcdefpme] { padding: 1.5rem 1.25rem; gap: 1.75rem; }
  .for-whom-links .chip { font-size: .875rem; padding-inline: .9rem; }
  .ba .phone { width: min(19rem, 64vw); }
  .feature-list[data-astro-cid-lcdefpme] li[data-astro-cid-lcdefpme] { padding-block: 1rem; gap: .75rem; }
  .feature-list[data-astro-cid-lcdefpme] p[data-astro-cid-lcdefpme] { font-size: .9375rem; }
  .features-head[data-astro-cid-lcdefpme], .demos-head[data-astro-cid-lcdefpme], .prices-head[data-astro-cid-lcdefpme] { margin-bottom: 1.75rem; }
  .step-list[data-astro-cid-lcdefpme] li[data-astro-cid-lcdefpme] { padding-block: 1.1rem; }
  .change-points[data-astro-cid-lcdefpme] { margin-top: 1.25rem; }
  .for-whom { margin-top: 2rem; padding-top: 1.5rem; }
  .site-footer .top { grid-template-columns: 1fr 1fr; gap: 1.75rem 1rem; }
  .site-footer .top > .intro, .site-footer .top > .contact { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------
   Startseite 2026-10-22: ruhiger Hero, Hover-Leuchten, Branchenkarten
   ------------------------------------------------------------------ */

/* Hero: Text links, animiertes Logo rechts, passt ganz auf einen Bildschirm */
.hero[data-astro-cid-lcdefpme] { display: grid; align-content: center; }
@media (width >= 60rem) {
  main > .hero[data-astro-cid-lcdefpme]:first-child { min-height: 100svh; padding-top: 6.5rem; padding-bottom: 3rem; }
  .hero-grid[data-astro-cid-lcdefpme] { grid-template-columns: 1.35fr 1fr; gap: 3.5rem; }
  .hero-plate[data-astro-cid-lcdefpme] { padding: clamp(1.5rem, 4svh, 3.5rem) clamp(1.5rem, .5rem + 3vw, 3rem); }
  .hero-logo[data-astro-cid-lcdefpme] { max-width: min(26rem, 52svh); }
}
.hero-copy[data-astro-cid-lcdefpme] h1[data-astro-cid-lcdefpme] {
  max-width: 16ch;
  font-size: min(clamp(2.375rem, 1.4rem + 3.6vw, 4.5rem), 9.5svh);
}
.hero-copy[data-astro-cid-lcdefpme] .lead[data-astro-cid-lcdefpme] { margin-top: clamp(.875rem, 2.2svh, 1.5rem); }
.hero-tagline {
  margin-top: .75rem;
  color: var(--grey-light);
  font-size: .9375rem;
  font-weight: 500;
}
.hero-copy > .hero-tagline.rise { animation-delay: .76s; }
.hero-actions[data-astro-cid-lcdefpme] { margin-top: clamp(1.25rem, 3svh, 2rem); }
.hero-note[data-astro-cid-lcdefpme] { margin-top: 1rem; font-size: .875rem; }
@media (width <= 59.99rem) {
  .hero-logo[data-astro-cid-lcdefpme] { width: 6.5rem; }
}

/* Hover: Buttons und klickbare Elemente leuchten auf */
.btn, .demo-tab, .branch-card, .for-whom-links .chip, .searches[data-astro-cid-lcdefpme] li[data-astro-cid-lcdefpme] {
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out),
    border-color var(--dur-micro) var(--ease-out), transform .25s var(--ease-out), filter .3s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { filter: drop-shadow(0 0 14px #ffffff66) drop-shadow(0 0 30px #9cc2ff59); }
  .btn-ghost:hover, .demo-tab:hover {
    background: #ffffff26;
    border-color: #ffffff66;
    filter: brightness(1.15) drop-shadow(0 0 14px #9cc2ff66);
  }
  .demo-tab[aria-pressed="true"]:hover { background: var(--white); filter: drop-shadow(0 0 14px #ffffff66); }
  .searches[data-astro-cid-lcdefpme] li[data-astro-cid-lcdefpme]:hover {
    border-color: #9cc2ff80;
    transform: translateY(-2px);
    filter: brightness(1.2) drop-shadow(0 0 18px #9cc2ff59);
  }
  .branch-card:hover {
    border-color: #9cc2ff99;
    transform: translateY(-3px);
    filter: brightness(1.12) drop-shadow(0 0 22px #9cc2ff4d);
  }
}
.btn:focus-visible, .demo-tab:focus-visible, .branch-card:focus-visible { filter: drop-shadow(0 0 14px #9cc2ff66); }

/* Demos: kleineres Label */
.demo .tag[data-astro-cid-rp4n3z66] {
  width: auto;
  max-width: none;
  padding: .3rem .8rem;
  font-size: .8125rem;
}

/* Branchenkarten: gross und klickbar */
.for-whom { margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); }
.for-whom-title { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); margin-bottom: .5rem; }
.for-whom-lead { color: var(--ink-soft); margin-bottom: 1.5rem; max-width: var(--measure); }
.branch-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: 1rem; list-style: none; }
.branch-card {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: .5rem;
  height: 100%;
  min-height: 11rem;
  padding: 1.5rem;
  border: 1px solid #ffffff2b;
  border-radius: var(--radius-l);
  background: linear-gradient(160deg, #9cc2ff1f, #ffffff08 60%), var(--paper);
  box-shadow: var(--glass-light);
  color: var(--ink);
  text-decoration: none;
}
.branch-icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: .25rem;
  border-radius: 50%;
  background: #9cc2ff26;
  color: var(--accent);
}
.branch-icon svg { width: 1.35rem; height: 1.35rem; }
.branch-name { font-size: 1.1875rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.branch-text { color: var(--ink-soft); font-size: .9375rem; line-height: 1.45; }
.branch-go { display: inline-flex; align-items: center; gap: .4rem; margin-top: .5rem; color: var(--accent); font-weight: 600; font-size: .9375rem; }
.branch-go svg { width: 1.05rem; height: 1.05rem; transition: transform .25s var(--ease-out); }
.branch-card:hover .branch-go svg { transform: translateX(3px); }

/* Vorher/Nachher: Beschriftung leuchtet während des Wechsels (Umbau siehe «Werkstatt» weiter unten) */
.ba-state[data-astro-cid-67ggu7zt] {
  padding: .3rem .9rem;
  border: 1px solid transparent;
  border-radius: var(--pill);
  transition: color .4s var(--ease-out), border-color .4s var(--ease-out), filter .4s var(--ease-out);
}
.ba.is-switching .ba-state[data-astro-cid-67ggu7zt] {
  color: var(--accent);
  border-color: #9cc2ff80;
  filter: drop-shadow(0 0 12px #9cc2ffb3);
  animation: ba-glow 1.3s ease-in-out infinite alternate;
}
@keyframes ba-glow { from { filter: drop-shadow(0 0 6px #9cc2ff80); } to { filter: drop-shadow(0 0 16px #9cc2ffe6); } }

/* Hinweis auf erfundene Betriebe ganz unten */
.demo-hint[data-astro-cid-jo6i4kqk] { margin-top: .4rem; }

@media (prefers-reduced-motion: reduce) {
  .ba.is-switching .ba-state[data-astro-cid-67ggu7zt] { animation: none; }
  .branch-card:hover, .searches[data-astro-cid-lcdefpme] li[data-astro-cid-lcdefpme]:hover { transform: none; }
}
/* Niedrige Bildschirme (Laptops): Hero enger, damit nichts abgeschnitten wird */
@media (width >= 60rem) and (height <= 760px) {
  main > .hero[data-astro-cid-lcdefpme]:first-child { padding-top: 5.75rem; padding-bottom: 1.5rem; }
  .hero-copy[data-astro-cid-lcdefpme] h1[data-astro-cid-lcdefpme] { font-size: min(4.25rem, 8.6svh); }
  .hero-copy[data-astro-cid-lcdefpme] .lead[data-astro-cid-lcdefpme] { font-size: 1.125rem; line-height: 1.5; }
  .hero-tagline { margin-top: .5rem; font-size: .875rem; }
  .hero-actions[data-astro-cid-lcdefpme] { margin-top: 1.25rem; }
  .hero-note[data-astro-cid-lcdefpme] { margin-top: .75rem; font-size: .8125rem; }
}

/* ------------------------------------------------------------------
   Startseite 2026-10-22 b: Logo zentral mit Gummiball-Animation
   ------------------------------------------------------------------ */

/* Hero: Logo oben in der Mitte, Text zentriert darunter */
.hero-grid[data-astro-cid-lcdefpme] { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: clamp(.5rem, 2svh, 1.5rem); text-align: center; }
.hero-logo[data-astro-cid-lcdefpme] { order: 0; justify-self: center; width: min(13rem, 62vw); }
.hero-plate[data-astro-cid-lcdefpme] { padding: 0; border-radius: 0; background: none; box-shadow: none; }
.hero-plate[data-astro-cid-lcdefpme]::before { inset: -35% -45%; background: radial-gradient(closest-side, #9cc2ff47, #9cc2ff14 55%, #0000); }
.hero-copy[data-astro-cid-lcdefpme] { display: grid; justify-items: center; }
.hero-copy[data-astro-cid-lcdefpme] h1[data-astro-cid-lcdefpme] { max-width: none; }
.hero-copy[data-astro-cid-lcdefpme] .lead[data-astro-cid-lcdefpme] { max-width: 44rem; }
.hero-actions[data-astro-cid-lcdefpme] { justify-content: center; }
.hero-note[data-astro-cid-lcdefpme] { max-width: 52rem; }
@media (width >= 60rem) {
  .hero-grid[data-astro-cid-lcdefpme] { grid-template-columns: minmax(0, 1fr); gap: clamp(.5rem, 2svh, 1.5rem); }
  .hero-logo[data-astro-cid-lcdefpme] { width: clamp(12rem, 36svh, 24rem); max-width: none; }
  .hero-copy[data-astro-cid-lcdefpme] h1[data-astro-cid-lcdefpme] { font-size: min(clamp(2.375rem, 1.4rem + 3.6vw, 4.25rem), 7.6svh); }
}
@media (width <= 59.99rem) {
  .hero-logo[data-astro-cid-lcdefpme] { width: min(10.5rem, 50vw); }
}
@media (width >= 60rem) and (height <= 760px) {
  .hero-logo[data-astro-cid-lcdefpme] { width: clamp(11rem, 33svh, 24rem); }
  .hero-copy[data-astro-cid-lcdefpme] h1[data-astro-cid-lcdefpme] { font-size: min(4.25rem, 7.6svh); }
}

/* Logo-Animation: Das Z zeichnet sich und springt auf, der Punkt fällt von oben,
   hüpft wie ein Gummiball und findet seinen Platz. Danach glänzt das Z, der Name erscheint. */
.logo-intro[data-astro-cid-ylsaoder] .z[data-astro-cid-ylsaoder] {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: zw-draw 1s cubic-bezier(.65, 0, .35, 1) .1s both, zw-z 2.6s linear both;
}
.logo-intro[data-astro-cid-ylsaoder] .dot[data-astro-cid-ylsaoder] { animation: zw-drop 1.6s .9s both, zw-drift 1.6s .9s both; }
.logo-intro[data-astro-cid-ylsaoder] .dot-shape[data-astro-cid-ylsaoder] {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: zw-squash 1.6s .9s both;
}
.logo-intro[data-astro-cid-ylsaoder] .sheen[data-astro-cid-ylsaoder] { animation: zw-sheen .9s 2.45s both; }
.logo-intro[data-astro-cid-ylsaoder] .name[data-astro-cid-ylsaoder] {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: zw-name .8s cubic-bezier(.2, .8, .2, 1) 1.55s both;
}
.hero-plate[data-astro-cid-lcdefpme]::before { animation: zw-halo 2.6s linear both; }

@keyframes zw-draw {
  from { stroke-dashoffset: 1px; opacity: 0; }
  8% { opacity: 1; }
  to { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes zw-z {
  0% { transform: scale(.6) rotate(-14deg); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
  32%, 57% { transform: none; }
  59% { transform: scale(1.04, .9); }
  64% { transform: scale(.99, 1.03); }
  69%, 79% { transform: none; }
  81% { transform: scale(1.015, .965); }
  85%, 100% { transform: none; }
}
@keyframes zw-drop {
  0% { transform: translateY(-230px); animation-timing-function: cubic-bezier(.5, 0, 1, .6); }
  38% { transform: translateY(-5px); animation-timing-function: cubic-bezier(0, .4, .5, 1); }
  60% { transform: translateY(-50px); animation-timing-function: cubic-bezier(.5, 0, 1, .6); }
  74% { transform: translateY(0); animation-timing-function: cubic-bezier(0, .4, .5, 1); }
  85% { transform: translateY(-16px); animation-timing-function: cubic-bezier(.5, 0, 1, .6); }
  93% { transform: translateY(0); animation-timing-function: cubic-bezier(0, .4, .5, 1); }
  97% { transform: translateY(-4px); animation-timing-function: cubic-bezier(.5, 0, 1, .6); }
  100% { transform: translateY(0); }
}
@keyframes zw-drift {
  from { translate: -36px 0; animation-timing-function: cubic-bezier(.3, .6, .5, 1); }
  74%, to { translate: 0 0; }
}
@keyframes zw-squash {
  0% { transform: scale(.85, 1.15); opacity: 0; }
  6% { opacity: 1; }
  35% { transform: scale(.85, 1.18); }
  38% { transform: scale(1.35, .65); }
  43% { transform: scale(.9, 1.12); }
  50%, 71% { transform: none; }
  74% { transform: scale(1.18, .82); }
  79%, 92% { transform: none; }
  93% { transform: scale(1.07, .93); }
  96%, 100% { transform: none; }
}
@keyframes zw-sheen { from { transform: translate(-70px); } to { transform: translate(150px); } }
@keyframes zw-name {
  from { opacity: 0; transform: translateY(16px) scale(.94); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes zw-halo {
  0% { opacity: 0; transform: scale(.8); }
  55% { opacity: .55; transform: scale(.92); }
  60% { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-plate[data-astro-cid-lcdefpme]::before,
  .logo-intro[data-astro-cid-ylsaoder] .z[data-astro-cid-ylsaoder],
  .logo-intro[data-astro-cid-ylsaoder] .dot[data-astro-cid-ylsaoder],
  .logo-intro[data-astro-cid-ylsaoder] .dot-shape[data-astro-cid-ylsaoder],
  .logo-intro[data-astro-cid-ylsaoder] .sheen[data-astro-cid-ylsaoder],
  .logo-intro[data-astro-cid-ylsaoder] .name[data-astro-cid-ylsaoder] { animation: none !important; }
}

/* Vorher/Nachher als Werkstatt: alte Teile fallen weg, ein Bauplan erscheint,
   neue Teile werden eingesetzt, Werkzeuge arbeiten mit. Dauer des Umbaus: 4,2 s (js/before-after.js). */
.ba .phone { transition: filter .4s var(--ease-out); }
.ba.is-building .phone { animation: ba-phone-glow 1.1s ease-in-out infinite alternate; }
@keyframes ba-phone-glow {
  from { filter: drop-shadow(0 0 14px #9cc2ff4d); }
  to { filter: drop-shadow(0 0 38px #9cc2ffa6) brightness(1.04); }
}
.ba-caption[data-astro-cid-67ggu7zt] { flex-direction: column; gap: .9rem; }
.ba-btn[data-astro-cid-67ggu7zt] { transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), visibility .5s, background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), filter .3s var(--ease-out); }
.ba-btn.is-waiting { opacity: 0; visibility: hidden; transform: translateY(8px); }

/* Alte Seite: Teile kippen und fallen weg */
.ba .o { transition: opacity .55s cubic-bezier(.55, 0, 1, .45), transform .7s cubic-bezier(.55, 0, 1, .45); }
.ba .screen[data-astro-cid-67ggu7zt].is-after .old-banner[data-astro-cid-67ggu7zt] { transform: translate(-14px, 70px) rotate(-14deg); transition-delay: .15s; }
.ba .screen[data-astro-cid-67ggu7zt].is-after .old-nav[data-astro-cid-67ggu7zt] { transform: translate(20px, 60px) rotate(9deg); transition-delay: .3s; }
.ba .screen[data-astro-cid-67ggu7zt].is-after .old-img[data-astro-cid-67ggu7zt] { transform: translateY(70px) rotate(-8deg) scale(.9); transition-delay: .45s; }
.ba .screen[data-astro-cid-67ggu7zt].is-after .old-text[data-astro-cid-67ggu7zt] { transform: translate(-16px, 60px) rotate(6deg); transition-delay: .6s; }
.ba .screen[data-astro-cid-67ggu7zt].is-after .old-table[data-astro-cid-67ggu7zt] { transform: translate(14px, 60px) rotate(-10deg); transition-delay: .75s; }
.ba .screen[data-astro-cid-67ggu7zt].is-after .old-foot[data-astro-cid-67ggu7zt] { transform: translateY(40px); transition-delay: .95s; }

/* Neue Seite: Teile werden von oben eingesetzt und federn nach */
.ba .n { transition: opacity .45s var(--ease-out), transform .75s cubic-bezier(.34, 1.56, .64, 1); }
.ba .screen[data-astro-cid-67ggu7zt]:not(.is-after) .n[data-astro-cid-67ggu7zt] { opacity: 0; transform: translateY(-34px) rotate(-2deg) scale(.96); }
.ba .new { transition: background-color .8s var(--ease) 1s; }
.ba .screen[data-astro-cid-67ggu7zt].is-after .new-bar[data-astro-cid-67ggu7zt] { transition-delay: 1.25s; }
.ba .screen[data-astro-cid-67ggu7zt].is-after .new-hero[data-astro-cid-67ggu7zt] { transition-delay: 1.5s; }
.ba .screen[data-astro-cid-67ggu7zt].is-after .new-cta[data-astro-cid-67ggu7zt] { transition-delay: 2.3s; }
.ba .screen[data-astro-cid-67ggu7zt].is-after .new-actions[data-astro-cid-67ggu7zt] { transition-delay: 2.55s; }
.ba .screen[data-astro-cid-67ggu7zt].is-after .new-list[data-astro-cid-67ggu7zt] { transition-delay: 2.8s; }
.ba .screen[data-astro-cid-67ggu7zt].is-after .new-hours[data-astro-cid-67ggu7zt] { transition-delay: 3.05s; }
.ba .screen[data-astro-cid-67ggu7zt].is-after .new-foot[data-astro-cid-67ggu7zt] { transition-delay: 3.3s; }
.ba .screen.ba-reset *, .ba .screen.ba-reset .new { transition: none !important; }

/* Werkstatt-Ebene */
.ws { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; opacity: 0; }
.ws > * { position: absolute; }
.ws svg { display: block; width: 100%; height: 100%; }
.ws-grid {
  inset: 0;
  background-color: #0b12201f;
  background-image: linear-gradient(#9cc2ff33 1px, #0000 1px), linear-gradient(90deg, #9cc2ff33 1px, #0000 1px);
  background-size: 14px 14px;
  opacity: 0;
}
.ws-beam { inset: 0; opacity: 0; }
.ws-beam::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: #9cc2ff;
  box-shadow: 0 0 10px 2px #9cc2ffb3, 0 0 28px 6px #9cc2ff59;
}
.ws-roller, .ws-wrench {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  padding: .4rem;
  border-radius: 50%;
  background: #0b1220e6;
  color: var(--accent);
  box-shadow: 0 0 0 1px #9cc2ff59, 0 0 16px #9cc2ff66;
  opacity: 0;
}
.ws-roller { top: 4.6rem; left: 0; }
.ws-wrench { top: 16.2rem; right: .7rem; }
.ws-spark { top: 15.4rem; width: .45rem; height: .45rem; border-radius: 50%; background: #fff; box-shadow: 0 0 8px 2px #9cc2ffcc; opacity: 0; }
.ws-spark-1 { left: 12%; }
.ws-spark-2 { left: 50%; }
.ws-spark-3 { right: 12%; }
.ws-status {
  left: 50%;
  bottom: 1.4rem;
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .7rem .4rem .5rem;
  border-radius: var(--pill);
  background: #0b1220eb;
  color: #fff;
  font-family: var(--font);
  font-size: .62rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 0 0 1px #9cc2ff4d, 0 8px 20px -8px #000;
  transform: translateX(-50%);
}
.ws-hammer { position: static; width: .95rem; height: .95rem; color: var(--accent); transform-origin: 25% 80%; }
.ws-bar { position: relative; width: 2.8rem; height: .3rem; overflow: hidden; border-radius: var(--pill); background: #ffffff26; }
.ws-bar i { position: absolute; inset: 0; border-radius: inherit; background: var(--accent); transform: scaleX(0); transform-origin: left; }

.ba.is-building .ws { animation: ws-show 4.2s linear both; }
.ba.is-building .ws-grid { animation: ws-grid 4.2s linear both; }
.ba.is-building .ws-beam { animation: ws-beam 4.2s linear both; }
.ba.is-building .ws-roller { animation: ws-roller 4.2s linear both; }
.ba.is-building .ws-wrench { animation: ws-wrench 4.2s linear both; }
.ba.is-building .ws-spark { animation: ws-spark 4.2s linear both; }
.ba.is-building .ws-spark-2 { animation-delay: .08s; }
.ba.is-building .ws-spark-3 { animation-delay: .16s; }
.ba.is-building .ws-hammer { animation: ws-hammer .32s ease-in-out infinite alternate; }
.ba.is-building .ws-bar i { animation: ws-progress 3.6s cubic-bezier(.4, 0, .6, 1) .25s both; }
.ba.is-building .new-photo { animation: ws-paint 4.2s linear both; }
.ba.is-building .new-cta[data-astro-cid-67ggu7zt] { animation: ws-flash 4.2s linear both; }

@keyframes ws-show { 0% { opacity: 0; } 5%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ws-grid { 0% { opacity: 0; } 18% { opacity: 1; } 70% { opacity: .55; } 92%, 100% { opacity: 0; } }
@keyframes ws-beam {
  0% { opacity: 0; transform: translateY(0); }
  5% { opacity: 1; }
  30% { opacity: 1; transform: translateY(100%); }
  31%, 58% { opacity: 0; transform: translateY(0); }
  61% { opacity: 1; }
  88% { opacity: 1; transform: translateY(100%); }
  89%, 100% { opacity: 0; transform: translateY(100%); }
}
@keyframes ws-roller {
  0%, 37% { opacity: 0; transform: translate(-2.5rem, 0) rotate(0); }
  40% { opacity: 1; transform: translate(-1rem, 0) rotate(0); }
  48% { transform: translate(5rem, .5rem) rotate(-6deg); }
  56% { transform: translate(11rem, -.2rem) rotate(4deg); }
  62% { opacity: 1; transform: translate(17rem, .3rem) rotate(0); }
  65%, 100% { opacity: 0; transform: translate(17rem, .3rem) rotate(0); }
}
@keyframes ws-wrench {
  0%, 56% { opacity: 0; transform: scale(.6) rotate(0); }
  60% { opacity: 1; transform: scale(1) rotate(-30deg); }
  65% { transform: scale(1) rotate(25deg); }
  70% { transform: scale(1) rotate(-25deg); }
  75% { transform: scale(1) rotate(25deg); }
  80% { opacity: 1; transform: scale(1) rotate(0); }
  85%, 100% { opacity: 0; transform: scale(.6) rotate(0); }
}
@keyframes ws-spark {
  0%, 68% { opacity: 0; transform: scale(0); }
  70% { opacity: 1; transform: scale(1.4); }
  77%, 100% { opacity: 0; transform: translateY(-12px) scale(.2); }
}
@keyframes ws-hammer { from { transform: rotate(-35deg); } to { transform: rotate(15deg); } }
@keyframes ws-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ws-paint {
  0%, 40% { opacity: 0; filter: blur(6px) saturate(0); }
  62% { opacity: 1; filter: blur(0) saturate(1.2); }
  100% { opacity: 1; filter: none; }
}
@keyframes ws-flash {
  0%, 66% { filter: none; }
  70% { filter: brightness(1.5) drop-shadow(0 0 10px #9cc2ffcc); }
  80%, 100% { filter: none; }
}

/* Alle Handys leuchten beim Überfahren */
.ph { transition: filter .4s var(--ease-out), transform .4s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .ph:hover, .ba .phone:hover { filter: drop-shadow(0 0 30px #9cc2ff66) brightness(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .ws { display: none; }
  .ba.is-building .phone, .ba.is-building .new-photo, .ba.is-building .new-cta[data-astro-cid-67ggu7zt] { animation: none; }
  .ba .o, .ba .n { transition: opacity .3s linear !important; transform: none !important; }
}

/* FAQ: zwei Spalten, damit alle Fragen auf einen Bildschirm passen; geöffnete Frage leuchtet */
.faq-list--cols[data-astro-cid-lcdefpme] { display: grid; gap: 0 2.5rem; max-width: 1180px; }
.faq-col .faq-item[data-astro-cid-lcdefpme] + .faq-item[data-astro-cid-lcdefpme] { border-top: 1px solid var(--paper-line); }
@media (width >= 60rem) {
  .faq-list--cols[data-astro-cid-lcdefpme] { grid-template-columns: 1fr 1fr; align-items: start; }
  .faq-list--cols .faq-item[data-astro-cid-lcdefpme] summary[data-astro-cid-lcdefpme] { min-height: 0; padding-block: .95rem; font-size: 1.0625rem; }
  .faq-list--cols .faq-a[data-astro-cid-lcdefpme] { padding-bottom: 1.1rem; font-size: .9375rem; }
}
@media (width <= 59.99rem) {
  .faq-col + .faq-col { border-top: 1px solid var(--paper-line); }
}
.faq-item[data-astro-cid-lcdefpme] summary[data-astro-cid-lcdefpme] { transition: color .3s var(--ease-out), filter .3s var(--ease-out); }
.faq-chev[data-astro-cid-lcdefpme] { transition: transform .4s var(--ease), background-color .3s var(--ease-out), box-shadow .3s var(--ease-out), filter .3s var(--ease-out); }
.faq-item[data-astro-cid-lcdefpme][open] > summary[data-astro-cid-lcdefpme] { color: var(--white); filter: drop-shadow(0 0 10px #9cc2ff80); }
.faq-item[data-astro-cid-lcdefpme][open] .faq-chev[data-astro-cid-lcdefpme] { background: #9cc2ff59; box-shadow: 0 0 16px #9cc2ffb3; }
@media (hover: hover) and (pointer: fine) {
  .faq-item[data-astro-cid-lcdefpme] summary[data-astro-cid-lcdefpme]:hover { color: var(--white); filter: drop-shadow(0 0 8px #9cc2ff59); }
  .faq-item[data-astro-cid-lcdefpme] summary[data-astro-cid-lcdefpme]:hover .faq-chev[data-astro-cid-lcdefpme] { background: #9cc2ff40; box-shadow: 0 0 12px #9cc2ff99; }
}

/* Preise: Karten leuchten beim Überfahren und bleiben nach einem Klick hervorgehoben (js/price-pick.js).
   Selektoren mit .price-row/.packages, damit sie die Einblend-Regel von [data-stagger] übertreffen. */
.price-row > .price[data-astro-cid-lcdefpme], .packages > .pkg { transition: transform .35s var(--ease-out), filter .35s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .prices .price-row > .price[data-astro-cid-lcdefpme]:hover, .section .packages > .pkg:hover {
    transform: translateY(-4px);
    filter: brightness(1.08) drop-shadow(0 0 22px #9cc2ff4d);
  }
}
.prices .price-row > .price[data-astro-cid-lcdefpme].is-picked, .section .packages > .pkg.pkg.is-picked {
  transform: translateY(-6px);
  filter: brightness(1.18) drop-shadow(0 0 16px #9cc2ffb3) drop-shadow(0 0 40px #9cc2ff73);
}
.prices .price-row > .price[data-astro-cid-lcdefpme]:active, .section .packages > .pkg.pkg:active { filter: brightness(1.15) drop-shadow(0 0 34px #9cc2ffa6); }

/* Ablauf: Feld hebt sich ab, die Nummer leuchtet */
.step-list[data-astro-cid-lcdefpme] li[data-astro-cid-lcdefpme] {
  margin-inline: -1rem;
  padding-inline: 1rem;
  border-radius: 1.25rem;
  transition: transform .3s var(--ease-out), background-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.step-num[data-astro-cid-lcdefpme] { transition: transform .3s var(--ease-out), filter .3s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .step-list[data-astro-cid-lcdefpme] li[data-astro-cid-lcdefpme]:hover {
    position: relative;
    z-index: 1;
    background: #9cc2ff14;
    box-shadow: inset 0 0 0 1px #9cc2ff47, 0 18px 40px -18px #000000cc;
    transform: translateY(-3px);
  }
  .step-list[data-astro-cid-lcdefpme] li[data-astro-cid-lcdefpme]:hover .step-num[data-astro-cid-lcdefpme] {
    transform: scale(1.1);
    filter: brightness(1.15) drop-shadow(0 0 12px #9cc2ffd9) drop-shadow(0 0 28px #9cc2ff80);
  }
}
@media (prefers-reduced-motion: reduce) {
  .step-list[data-astro-cid-lcdefpme] li[data-astro-cid-lcdefpme]:hover, .prices .price-row > .price[data-astro-cid-lcdefpme]:hover, .prices .price-row > .price[data-astro-cid-lcdefpme].is-picked, .section .packages > .pkg.pkg.is-picked, .section .packages > .pkg:hover { transform: none; }
  .step-list[data-astro-cid-lcdefpme] li[data-astro-cid-lcdefpme]:hover .step-num[data-astro-cid-lcdefpme] { transform: none; }
}

/* «Das steckt in jeder Website»: jeder Punkt führt auf eine eigene Seite */
.feature-list--links[data-astro-cid-lcdefpme] li[data-astro-cid-lcdefpme] {
  position: relative;
  margin-inline: -1rem;
  padding-inline: 1rem;
  border-radius: 1.25rem;
  transition: transform .3s var(--ease-out), background-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.feature-link { color: inherit; text-decoration: none; }
.feature-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.feature-go { display: inline-flex; align-items: center; gap: .35rem; margin-top: .5rem; color: var(--accent); font-size: .875rem; font-weight: 600; }
.feature-go svg { width: 1rem; height: 1rem; transition: transform .25s var(--ease-out); }
.feature-icon[data-astro-cid-lcdefpme] { transition: filter .3s var(--ease-out), transform .3s var(--ease-out); }
.feature-list--links[data-astro-cid-lcdefpme] li[data-astro-cid-lcdefpme]:has(.feature-link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.feature-link:focus-visible { outline: none; }
@media (hover: hover) and (pointer: fine) {
  .feature-list--links[data-astro-cid-lcdefpme] li[data-astro-cid-lcdefpme]:hover {
    z-index: 1;
    background: #9cc2ff14;
    box-shadow: inset 0 0 0 1px #9cc2ff47, 0 18px 40px -18px #000000cc;
    transform: translateY(-3px);
  }
  .feature-list--links[data-astro-cid-lcdefpme] li[data-astro-cid-lcdefpme]:hover .feature-icon[data-astro-cid-lcdefpme] {
    transform: scale(1.1);
    filter: brightness(1.2) drop-shadow(0 0 10px #9cc2ffcc);
  }
  .feature-list--links[data-astro-cid-lcdefpme] li[data-astro-cid-lcdefpme]:hover .feature-go svg { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .feature-list--links[data-astro-cid-lcdefpme] li[data-astro-cid-lcdefpme]:hover { transform: none; }
}

/* Footer: fünfte Spalte «Leistungen» */
@media (width >= 64rem) {
  .site-footer .top { grid-template-columns: 1.25fr 1.3fr 1fr 1.15fr .75fr; gap: 2.25rem; }
}

/* Über uns: Porträts von Boi und Julian */
.about-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; width: 100%; max-width: 30rem; }
.about-person { margin: 0; }
.about-person img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-l);
  box-shadow: 0 0 0 1px #ffffff2b, 0 30px 60px -30px #000000d9;
  transition: transform .35s var(--ease-out), filter .35s var(--ease-out);
}
.about-person figcaption { margin-top: .6rem; color: var(--ink-soft); font-size: .9375rem; font-weight: 500; text-align: center; }
@media (hover: hover) and (pointer: fine) {
  .about-person img:hover { transform: translateY(-3px); filter: brightness(1.05) drop-shadow(0 0 22px #9cc2ff4d); }
}
@media (width <= 47.99rem) {
  .about-photos { max-width: 22rem; gap: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .about-person img:hover { transform: none; }
}