/* =====================================================
   R22 · Kundenänderungen 30.08. – Zusatzdatei
   (wird NACH styles.css geladen; neuer Dateiname, damit
   sie beim Upload sicher ankommt)
   ===================================================== */

/* 1) Logo-Schriftzug im Kopf 20 % größer */
.brand span {
  font-size: 1.2em;
}

.brand small {
  font-size: 0.56rem;
}

/* 2) psol: Hover-Robo 30 % größer + Hinweiszeile */
.psol-robo img {
  width: clamp(182px, 17.5vw, 234px);
}

.psol-what {
  margin: -0.6rem 0 1.2rem;
  color: var(--silver-mid);
  font-family: var(--font-light);
  font-size: 0.85rem;
  font-style: italic;
  letter-spacing: 0.01em;
}

/* 3) pagecharge: etwas heller + neue Marke (Glossy-P ohne Ring) */
.pcharge {
  background: #161616;
}

.pcharge-glow {
  background:
    radial-gradient(ellipse 60% 45% at 50% 62%, rgba(242, 199, 0, 0.20), transparent 65%),
    radial-gradient(ellipse 40% 30% at 15% 90%, rgba(242, 199, 0, 0.12), transparent 70%),
    radial-gradient(ellipse 40% 30% at 85% 15%, rgba(242, 199, 0, 0.10), transparent 70%);
}

.pcharge-beta {
  background: rgba(38, 36, 26, 0.75);
}

.pcharge-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin: 0 0 1.6rem;
}

.pcharge-brand img {
  width: clamp(46px, 4.5vw, 62px);
  height: auto;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
}

.pcharge-brand span {
  font-family: var(--font-light);
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #ffffff;
  line-height: 1;
}

/* 4) Betatester nur zum Ausklappen */
.pcharge-beta {
  display: block;
}

.pcharge-beta-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  min-height: 54px;
  padding: 0 1.5rem;
  border: 1px solid rgba(242, 229, 0, 0.55);
  border-radius: 999px;
  background: transparent;
  color: var(--yellow);
  font-family: var(--font-light);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}

.pcharge-beta-toggle:hover,
.pcharge-beta-toggle:focus-visible {
  background: var(--yellow);
  color: var(--black);
}

.pcharge-chev {
  transition: transform 350ms ease;
}

.pcharge-beta.is-open .pcharge-chev {
  transform: rotate(180deg);
}

.pcharge-beta-more {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 550ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pcharge-beta.is-open .pcharge-beta-more {
  grid-template-rows: 1fr;
}

.pcharge-beta-inner {
  overflow: hidden;
  min-height: 0;
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
}

.pcharge-beta-inner > .pcharge-beta-copy {
  padding-top: clamp(1.4rem, 2.5vw, 2.2rem);
}

@media (min-width: 960px) {
  .pcharge-beta-inner {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
    align-items: start;
  }

  .pcharge-beta-inner > .pcharge-form {
    padding-top: clamp(1.4rem, 2.5vw, 2.2rem);
  }
}

/* 6) vios homes – Schwesterfirma mit Buchungssystem */
.vios {
  padding: clamp(2.5rem, 4.5vw, 4.5rem) 7vw;
  background: var(--black);
}

.vios-card {
  max-width: 1480px;
  margin: 0 auto;
  padding: clamp(1.8rem, 3.2vw, 3.2rem);
  border-radius: 22px;
  background: #1c1a16;
  border: 1px solid rgba(226, 205, 165, 0.22);
  color: #f0ece3;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}

.vios-eyebrow {
  margin: 0 0 1rem;
  color: #cdb88c;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.vios-head h2 {
  margin: 0 0 1rem;
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 3.6vw, 3.2rem);
  font-weight: 400;
  letter-spacing: 0.005em;
  color: #f7f3ea;
}

.vios-head h2 em {
  font-style: italic;
  color: #cdb88c;
}

.vios-text {
  margin: 0 0 1.6rem;
  max-width: 70ch;
  font-family: var(--font-light);
  font-size: 0.95rem;
  line-height: 1.7;
  color: #c9c2b4;
}

.vios-band {
  display: block;
  border-radius: 14px;
  overflow: hidden;
}

.vios-band img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 700ms ease;
}

.vios-band:hover img,
.vios-band:focus-visible img {
  transform: scale(1.015);
}

.vios-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem 2rem;
  margin-top: clamp(1.4rem, 2.5vw, 2.2rem);
}

.vios-btn {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  min-height: 54px;
  padding: 0 1.8rem;
  border-radius: 12px;
  background: #8f9398;
  color: #14130f;
  font-family: var(--font-light);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  transition: background 180ms ease, transform 180ms ease;
}

.vios-btn:hover,
.vios-btn:focus-visible {
  background: #c9cdd1;
  transform: translateY(-2px);
}

.vios-key {
  display: block;
  max-width: clamp(220px, 26vw, 360px);
  transform: rotate(-3deg);
  transition: transform 300ms ease;
}

.vios-key:hover,
.vios-key:focus-visible {
  transform: rotate(0deg) scale(1.04);
}

.vios-key img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.5));
}

@media (max-width: 700px) {
  .vios-foot {
    justify-content: center;
  }
}

/* =====================================================
   R23 · Feinschliff 31.08.: stärkere Streifen, Safari-Screens,
   vios-Anpassungen, Werkzeugleiste dezenter
   ===================================================== */

/* psol: Visual = Robo + wechselnde Browser-Screens */
.psol-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.psol-visual .psol-robo {
  position: relative;
  z-index: 2;
  margin-right: clamp(-64px, -4vw, -36px);
  flex-shrink: 0;
}

.psol-shots {
  position: relative;
  width: clamp(300px, 30vw, 460px);
  aspect-ratio: 888 / 561;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
}

.psol-shots img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  opacity: 0;
  animation: pwl-psol-shot 24s linear infinite;
}

.psol-shots img:nth-child(1) { position: relative; animation-delay: 0s; }
.psol-shots img:nth-child(2) { animation-delay: 6s; }
.psol-shots img:nth-child(3) { animation-delay: 12s; }
.psol-shots img:nth-child(4) { animation-delay: 18s; }

@keyframes pwl-psol-shot {
  0% { opacity: 0; }
  3% { opacity: 1; }
  25% { opacity: 1; }
  29% { opacity: 0; }
  100% { opacity: 0; }
}

/* Lichtstreifen deutlich verstärkt + zweiter, feinerer Streifen */
.psol-robo::before {
  height: 14px;
  top: 32%;
  background: linear-gradient(90deg, transparent, rgba(242, 229, 0, 0.5) 40%, rgba(255, 248, 170, 1));
  box-shadow: 0 0 30px rgba(242, 229, 0, 0.85), 0 0 90px rgba(242, 199, 0, 0.5);
}

.psol-robo::after {
  content: "";
  position: absolute;
  top: 44%;
  right: 60%;
  z-index: 1;
  width: clamp(160px, 24vw, 380px);
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 245, 140, 0.8));
  box-shadow: 0 0 18px rgba(242, 229, 0, 0.6);
  transform: rotate(-9deg);
  transform-origin: right center;
  pointer-events: none;
  animation: pwl-psol-streak 5.5s ease-in-out infinite reverse;
}

@keyframes pwl-psol-shot-safe { to { opacity: 1; } }

@media (max-width: 899px) {
  .psol-visual {
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
  }

  .psol-visual .psol-robo {
    margin-right: 0;
  }

  .psol-shots {
    width: min(92%, 460px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .psol-shots img {
    animation: none;
  }

  .psol-shots img:nth-child(1) {
    opacity: 1;
  }
}

/* vios: Kundenauftrag – Schlüssel so breit wie zwei Bildfenster, Button in Messing */
.vios-key {
  max-width: none;
  width: min(62%, 780px);
}

.vios-btn {
  background: #b08d57;
  color: #171410;
}

.vios-btn:hover,
.vios-btn:focus-visible {
  background: #cdb88c;
}

@media (max-width: 700px) {
  .vios-key {
    width: 92%;
  }
}

/* Werkzeugleiste (A + − ↺): dezenter, mobil kleiner */
.a11y-bar {
  opacity: 0.45;
  transition: opacity 200ms ease;
}

.a11y-bar:hover,
.a11y-bar:focus-within {
  opacity: 1;
}

@media (max-width: 700px) {
  .a11y-bar {
    transform: scale(0.78);
    transform-origin: right center;
  }
}

/* R23b · vios: drei Bilder in voller Beitragsbreite; Screens in Robo-Höhe */
.vios-band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.6rem, 1.2vw, 1.1rem);
  overflow: visible;
  border-radius: 0;
}

.vios-band img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}

@media (max-width: 700px) {
  .vios-band {
    grid-template-columns: 1fr;
  }
}

.psol-shots {
  width: clamp(320px, 36vw, 540px);
}

/* R23c · psol: rechter Bereich breiter, Screens nicht mehr gequetscht */
@media (min-width: 900px) {
  .psol-card {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.psol-shots {
  flex-shrink: 0;
}

/* =====================================================
   R25 · Founder-Porträt: sauber, ohne Farbstich
   -----------------------------------------------------
   Ursache des Gelbstichs: .founder-img liegt im
   mix-blend-mode "lighten" über dem warmen Radialverlauf
   der Sektion (#43301c in der Mitte). "lighten" nimmt je
   Kanal den helleren Wert – dadurch schlug das Braun durch
   das gesamte Foto durch, am stärksten in der Verlaufsmitte
   (= der gelbe Fleck).
   Lösung: exakt hinter dem Porträt liegt jetzt eine fast
   schwarze Fläche in der Bildgeometrie, deren Rand über
   einen weichen Schatten in die warme Bühne ausläuft.
   Das Foto wird dadurch farbneutral wiedergegeben,
   der nahtlose Übergang bleibt erhalten.
   Die Bilddatei selbst bleibt unverändert.
   ===================================================== */

.founder-stage::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 0;
  height: min(88%, 760px);
  aspect-ratio: 1023 / 1537;
  transform: translateX(-50%);
  background: #060505;
  /* weicher schwarzer Auslauf in den warmen Bühnenverlauf */
  box-shadow: 0 0 96px 76px #060505;
  pointer-events: none;
}

/* Porträt farbneutral: keine Masken-Weichzeichnung mehr –
   der schwarze Studiogrund verschmilzt von selbst */
.founder-img {
  mix-blend-mode: lighten;
  -webkit-mask-image: none;
  mask-image: none;
}

/* =====================================================
   R26 · Hover · 3D-Kampagne für pagesolution
   (Film & Social – drei Hochformat-Spots 9:16)
   ===================================================== */
.hover3d {
  padding: clamp(3rem, 6vw, 6rem) 7vw clamp(2.4rem, 4vw, 4rem);
  background: linear-gradient(180deg, #0c0c0e 0%, #141210 52%, #0a0a0b 100%);
  color: #f2efe9;
}

.hover3d > * {
  max-width: 1180px;
  margin-inline: auto;
}

.hover3d-head {
  margin-bottom: clamp(2rem, 3.5vw, 3.2rem);
}

.hover3d-eyebrow {
  margin: 0 0 1rem;
  color: var(--yellow);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.hover3d h2 {
  margin: 0 0 1.2rem;
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 400;
  line-height: 1.05;
  color: #f8f5ee;
}

.hover3d h2 em {
  font-style: italic;
  color: var(--yellow);
}

.hover3d-lead {
  margin: 0;
  max-width: 62ch;
  font-family: var(--font-light);
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  line-height: 1.6;
  color: #e6e1d6;
}

/* Spot-Kacheln */
.hover3d-row .phone {
  max-width: 340px;
}

/* Fließtext zweispaltig unter den Spots */
.hover3d-body {
  display: grid;
  gap: 0 clamp(2rem, 4vw, 3.6rem);
  margin-top: clamp(2rem, 3.5vw, 3.2rem);
}

@media (min-width: 900px) {
  .hover3d-body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.hover3d-body p {
  margin: 0 0 1.1rem;
  font-family: var(--font-light);
  font-size: 0.93rem;
  line-height: 1.75;
  color: #b9b3a7;
}

.hover3d-body a {
  color: var(--yellow);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.hover3d-body a:hover,
.hover3d-body a:focus-visible {
  color: #fff;
}

.hover3d-facts {
  display: grid;
  gap: 0.9rem 1.8rem;
  margin: clamp(1.4rem, 2.5vw, 2.2rem) auto;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hover3d-facts li {
  display: grid;
  gap: 0.3rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.hover3d-facts strong {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--yellow);
}

.hover3d-facts span {
  font-family: var(--font-light);
  font-size: 0.85rem;
  line-height: 1.45;
  color: #cfc9bd;
}

.hover3d-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.8rem;
  margin-top: clamp(1.4rem, 2.5vw, 2rem);
}

.hover3d-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  min-height: 52px;
  padding: 0 1.7rem;
  border-radius: 999px;
  background: var(--yellow);
  color: #12100c;
  font-family: var(--font-light);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: transform 180ms ease, background 180ms ease;
}

.hover3d-btn:hover,
.hover3d-btn:focus-visible {
  background: #fff36b;
  transform: translateY(-2px);
}

.hover3d-link {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #cfc9bd;
  transition: color 180ms ease;
}

.hover3d-link:hover,
.hover3d-link:focus-visible {
  color: var(--yellow);
}

.hover3d-note {
  margin-top: clamp(1.8rem, 3vw, 2.8rem);
  color: rgba(255, 255, 255, 0.42);
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* KI-Kennzeichnung auf Bewegtbild – gleiche Anmutung wie
   die Kennzeichnung auf den Bildern (Kontur, 60 % transparent) */
.phone--ai::after {
  content: "KI";
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 2;
  padding: 0.2em 0.55em;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--font-mono);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.5;
  pointer-events: none;
}

@media (max-width: 860px) {
  .hover3d-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}