/* ==========================================================================
   Angleich der uebernommenen Seiten an die neue Startseite (09.10.2026)

   Leon: "schau das halt auch alle Unterseiten von Agencyg.de so perfekt
   aussehen wie die Hauptseite ... es sollen alle perfekt aussehen".

   Die alten Seiten (Produkte, Werkzeuge, Phone, Pad, Scripts, Watch,
   Changelog, Status, Rechtstexte, Companion) stecken in `.uebernommen` und
   bringen ihr eigenes Aussehen aus `seiten.css` mit: braune und dunkelblaue
   Baender (--bg-c1, --bg-c2), Glasflaechen, Ueberschriften in 900 und in
   Orbitron, Farbverlaufs-Text, tuerkise Companion-Seiten. `seiten.css`
   entsteht bei jedem Lauf von werkzeuge/stile.py neu, deshalb steht der
   Angleich hier, in einer eigenen Datei, die danach geladen wird.

   Regeln der Startseite (components/start/start.module.css): Karten auf
   --surface mit feiner Linie, Gold nur fuer Handlungen und Markennamen,
   Ueberschriften hoechstens 700, nur dunkel, keine Glas- oder Leuchteffekte.

   `seiten.css` arbeitet mit :where() und hat damit keine Spezifitaet; eine
   Klasse hier gewinnt. !important steht nur dort, wo die alten Seiten
   Inline-Stile setzen (Baender, Knoepfe) oder selbst !important nutzen.
   ========================================================================== */

/* --- Farben: alle alten Variablen auf die Werte der Startseite ----------- */
.uebernommen {
  --bg-c1: var(--surface);
  --bg-c2: transparent;
  --glass-bg: var(--surface);
  --glass-border: var(--line);
  --glass-shadow: none;
  --glass-glow: none;
  --glass-blur: 0px;
  --text-primary: var(--tx);
  --text-secondary: var(--tx-2);
  --text-tertiary: var(--tx-3);
  --highlight-start: var(--brand);
  --highlight-end: var(--brand);
  --highlight-purple: var(--brand);
  --highlight-pink: var(--brand);
  --highlight-blue: var(--brand);
  --interactive-glow: color-mix(in oklab, var(--brand) 35%, transparent);
  --interactive-glow-intense: color-mix(in oklab, var(--brand) 55%, transparent);
}

/* Der Rahmen selbst traegt keinen eigenen Grund: viele Gruppen setzten ihn auf
   --bg-c1, dann war der ganze Inhalt heller als die Seite und die Karten
   verschwammen mit ihm. Die Startseite hat dunklen Grund und hellere Karten. */
.uebernommen {
  background: none !important;
}

/* Companion- und App-Rechtstexte (g2, g27, g28) hatten eigene Namen und
   Tuerkis. Feste Werte, weil --bg, --line und --text dort die globalen
   Namen ueberdecken und sich nicht auf sich selbst beziehen koennen. */
.uebernommen:is([data-stilgruppe="g2"], [data-stilgruppe="g27"], [data-stilgruppe="g28"]) {
  --bg: #0a0a0b;
  --bg2: #0a0a0b;
  --card: #131316;
  --line: rgba(242, 243, 245, 0.12);
  --text: #f2f3f5;
  --muted: #a9b0ba;
  --accent: #e2b649;
  --accent2: #e2b649;
  font-family: inherit !important;
  background: radial-gradient(900px 420px at 50% -8%, rgba(226, 182, 73, 0.07), transparent) !important;
}

/* --- Flaechen: keine Baender mehr -------------------------------------------
   Die Abschnitte trugen Inline-Hintergruende (dunkelblau, braun, gruene und
   blaue Verlaeufe). Die Startseite trennt Abschnitte nur durch Abstand. */
.uebernommen section[style*="background"],
.uebernommen .mesh-bg,
.uebernommen .bg-\[var\(--bg-c1\)\] {
  background: none !important;
}

.uebernommen .section-divider {
  height: 1px !important;
  max-width: min(var(--wrap) - 2 * var(--gutter), 100% - 2 * var(--gutter));
  margin-inline: auto;
  background: var(--line) !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* --- Schrift: wie die Startseite, keine Orbitron, hoechstens 700 ---------- */
.uebernommen :is(h1, h2, h3, h4, .page-title, .title) {
  font-family: inherit !important;
  text-shadow: none !important;
}

.uebernommen :is(.font-black, .font-extrabold) {
  font-weight: 700 !important;
}

.uebernommen h1,
.uebernommen :is(.page-title, .title) {
  font-weight: 700 !important;
  line-height: 1.06;
  letter-spacing: -0.025em;
}

.uebernommen h2 {
  letter-spacing: -0.015em;
}

/* Farbverlaufs-Text wird schlichtes Gold wie "von Agency Scripts" auf der Startseite */
.uebernommen .gradient-text {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--brand) !important;
  text-shadow: none !important;
}

/* Preise und Kennzahlen in der Grundschrift, ohne Leuchten */
.uebernommen :is(.agency-price, .agency-price-tag, .agency-price-free, .price-tag, .product-price, .stat-number,
                 .font-orbitron) {
  font-family: inherit !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  text-shadow: none !important;
}

.uebernommen .agency-price {
  color: var(--tx) !important;
}

/* --- Ueberzeilen wie ".ueber" der Startseite: klein, grau, ohne Pille ---- */
.uebernommen :is(.agency-kicker, .rec-kicker, [data-such="eyebrow"]) {
  font-family: inherit !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--tx-3) !important;
  font-size: var(--fs-1) !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
}

/* --- Karten: --surface, feine Linie, kein Glas ---------------------------- */
.uebernommen :is(.glass-panel, .agency-feature, .agency-phone-feature, .related-card, .app-card, .rec-card,
                 .cl-card, .feat, .note) {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.uebernommen :is(.glass-panel, .related-card, .app-card, .rec-card, .cl-card, .feat, .note) {
  border-radius: var(--r-3) !important;
}

.uebernommen :is(.agency-feature, .agency-phone-feature) {
  border-radius: var(--r-2) !important;
}

.uebernommen :is(.related-card, .app-card, .rec-card, .glass-panel) {
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.uebernommen :is(.related-card, .app-card, .rec-card):hover,
.uebernommen a.glass-panel:hover {
  border-color: var(--line-2) !important;
  transform: translateY(-2px);
}

/* Text in Merkmalszeilen: die alten Seiten faerbten ihn mintgruen */
.uebernommen :is(.agency-feature, .agency-phone-feature) > span,
.uebernommen :is(.agency-feature, .agency-phone-feature) :is(span, p) {
  color: var(--tx) !important;
}

/* Der Preis steht frei, nicht in einem leuchtenden Kasten */
.uebernommen .agency-price-card {
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

/* Kleine Symbole in Karten: goldener Hauch statt Leuchten */
.uebernommen :is(.agency-feature-icon, .agency-phone-icon, .feat .ic) {
  border: 0 !important;
  background: color-mix(in oklab, var(--brand) 12%, transparent) !important;
  box-shadow: none !important;
  color: var(--brand) !important;
}

/* --- Knoepfe: genau wie .knopf-voll und .knopf-rand -------------------- */
/* #companion-app a[style*="linear-gradient"]: "Everything about the app" im Companion-Block von Phone und Pad,
   vorher eine goldene Verlaufspille mit Leuchtschatten, jetzt der Hauptknopf wie ueberall. */
.uebernommen :is(.agency-primary-button, .agency-outline-button, .agency-secondary-button,
                 #companion-app a[style*="linear-gradient"]) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-block-size: var(--btn-h-md);
  padding-inline: var(--btn-pad-md) !important;
  padding-block: 0 !important;
  border-radius: var(--r-2) !important;
  box-shadow: none !important;
  font-size: var(--fs-2) !important;
  font-weight: var(--fw-ui) !important;
  line-height: 1;
  text-decoration: none !important;
  transform: none !important;
  transition: filter 0.18s ease, border-color 0.18s ease;
}

.uebernommen :is(.agency-primary-button, #companion-app a[style*="linear-gradient"]) {
  border: 1px solid transparent !important;
  background: var(--brand) !important;
  color: var(--brand-ink) !important;
}

.uebernommen :is(.agency-primary-button, #companion-app a[style*="linear-gradient"]):hover {
  filter: brightness(1.08);
}

.uebernommen :is(.agency-outline-button, .agency-secondary-button) {
  border: 1px solid var(--rand, var(--line-2)) !important;
  background: transparent !important;
  color: var(--tx) !important;
}

.uebernommen :is(.agency-outline-button, .agency-secondary-button):hover {
  border-color: var(--brand) !important;
}

.uebernommen :is(.agency-primary-button, .agency-outline-button, .agency-secondary-button) :is(.mr-2, i) {
  margin-inline-end: 0 !important;
}

/* --- Werkzeuge: Eingaben und Ausgaben dunkler als die Karte ------------ */
.uebernommen :is(input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="submit"]):not([type="button"]),
                 select, textarea, .input-field, .coord-input, .cfg-input, .field-input) {
  border: 1px solid var(--line) !important;
  border-radius: var(--r-2);
  background: var(--bg) !important;
  color: var(--tx) !important;
  box-shadow: none !important;
}

.uebernommen :is(input, select, textarea, .input-field, .coord-input, .cfg-input, .field-input):focus {
  outline: none;
  border-color: color-mix(in oklab, var(--brand) 60%, transparent) !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 14%, transparent) !important;
}

.uebernommen :is(.code-block, .code-output, .preview-area, .config-block) {
  background: var(--bg) !important;
  border: 1px solid var(--line) !important;
}

/* --- Rechtstexte: Absaetze nur durch eine feine Linie getrennt, keine Karte in der Karte */
.uebernommen .legal-section {
  padding-block: 18px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

.uebernommen .legal-section:last-child {
  border-bottom: 0 !important;
}

/* --- Suchseite (g63): kein Mindestmass einer ganzen Bildschirmhoehe ----- */
.uebernommen[data-stilgruppe="g63"] {
  min-height: 0 !important;
  background: none !important;
  padding-block: 32px 72px;
}

/* --- Changelog: Karten ruhiger, Kopf wie eine Liste der Startseite ------ */
.uebernommen .cl-head {
  border-bottom: 1px solid var(--line);
}

/* --- Veraltetes: der "Companion jetzt auf Android"-Hinweis (09.10.2026) --
   Die App ist laengst in beiden Stores, und die Seiten haben ihren eigenen
   Companion-Abschnitt. */
#cmp-apk-note {
  display: none !important;
}

/* --- Bewegung: die alten Seiten haben keine Glow-Pulse mehr ------------- */
@media (prefers-reduced-motion: reduce) {
  .uebernommen :is(.related-card, .app-card, .rec-card, .glass-panel) {
    transition: none;
  }
}

/* --- Produktbilder (09.10.2026) --------------------------------------------
   Produktliste: Bild oben auf der Karte, randlos wie die Produktkarten der
   Startseite. Produktseite: das Shopbild gross ueber dem Inhalt. */
.karte-mit-bild {
  --karte-innen: var(--sp-5);
  overflow: hidden;
  padding-block-start: 0 !important;
}

.karte-foto {
  display: block;
  width: calc(100% + 2 * var(--karte-innen));
  max-width: none;
  margin: 0 calc(-1 * var(--karte-innen)) var(--sp-4);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-bottom: 1px solid var(--line);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.karte-mit-bild:hover .karte-foto {
  transform: scale(1.03);
}

@media (max-width: 767px) {
  .karte-mit-bild {
    --karte-innen: var(--sp-4);
  }
}

/* Das Bild folgt dem Kopfbereich darunter: steht der Titel links (6 der 13 Produkte), steht das Bild auf
   derselben Kante (der Seitenbahn); ist der Kopf mittig gesetzt (.text-center um den Titel), mittig. */
.produkt-foto-rahmen {
  max-width: 920px;
  margin-block: 8px 4px;
  margin-inline: max(0px, (100% - var(--wrap)) / 2) auto;
}

main:has(.uebernommen .text-center h1) .produkt-foto-rahmen {
  margin-inline: auto;
}

.produkt-foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 26px 60px -18px rgba(0, 0, 0, 0.8);
  animation: produktFotoRein 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

@keyframes produktFotoRein {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }
}

@media (prefers-reduced-motion: reduce) {
  .produkt-foto,
  .karte-foto {
    animation: none;
    transition: none;
  }
}

/* --- Feinschliff am Handy (09.10.2026) ------------------------------------ */
/* Werkzeuge und Suche: der alte Rumpf brachte seinen Seitenrand im body mit, der hier fehlt */
.uebernommen:is([data-seite^="tools/"], [data-stilgruppe="g63"]) {
  padding-inline: clamp(16px, 4vw, 24px);
}

.uebernommen #search-box {
  box-sizing: border-box;
  max-width: 100%;
}

/* Scripts-Seite: drei Kennzahl-Kaesten untereinander statt zusammengequetscht */
@media (max-width: 640px) {
  .uebernommen .agency-stats {
    grid-template-columns: 1fr !important;
    display: grid !important;
  }

  /* Status: Zusatzangaben unter den Namen statt rechts daneben */
  .uebernommen .site-row {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .uebernommen .site-detail {
    flex-basis: 100%;
    margin-left: 26px !important;
    text-align: left !important;
  }
}

.uebernommen .agency-stat {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
}

/* Doppelte Ueberzeile: unter der eigentlichen Ueberzeile stand noch "From the Agency Scripts project by
   Agency Scripts" in breit gesperrter Schrift (Phone, Pad, Watch, Scripts und sechs Produkte, alle Sprachen,
   geprueft 09.10.2026: jede Zeile mit tracking-[.35em] ist genau diese). Die Startseite hat genau eine. */
.uebernommen p.uppercase[class*="tracking-[.35em]"] {
  display: none !important;
}

/* Fest eingebaute Textfarben der Altseiten: Mint auf den Produktseiten, Creme auf Phone, Pad, Watch und
   Scripts. Die Werte stehen teils kaputt im HTML (rgba(167,243,208.78) statt ,.78) und wirken dadurch
   voll deckend. Fliesstext bekommt das Grau der Startseite, Rechtshinweise das leise Grau. */
.uebernommen p:is([style*="167,243,208"], [style*="241,230,201"], [style*="242,233,214"]) {
  color: var(--tx-2) !important;
}
.uebernommen p.companion-legal {
  color: var(--tx-3) !important;
}
.uebernommen a[style*="color:#f1e6c9"] {
  color: var(--tx) !important;
}

/* Breite: die alten Bereiche waren breiter als die Seite (max-w-7xl 80 bis 1360 px bei 1440 Breite, die
   Kopfzeile, Brotkrumen und neuen Abschnitte stehen bei 160 bis 1280). Jetzt dieselbe Bahn: --wrap minus
   Rand, und der Seitenrand der Abschnitte ist der Rand der Seite (--gutter). Gemessen 09.10.2026. */
.uebernommen :is(.max-w-7xl, .max-w-6xl) {
  max-width: calc(var(--wrap) - 2 * var(--gutter)) !important;
}
.uebernommen section:is(.px-4, .px-6) {
  padding-inline: var(--gutter) !important;
}

/* Titel und Ueberschriften: Startseite und HUD-Seite setzen "Agency" weiss und nur den Namen in Gold.
   Phone, Pad und Watch hatten Creme (#fff4cf, auf der Watch-Seite auch alle Zwischenueberschriften,
   Kartentitel und FAQ-Fragen), sechs Produkte Blassgold (#f0d79a). */
.uebernommen [style*="color:#fff4cf"],
.uebernommen h1 span[style*="color:#f0d79a"] {
  color: var(--tx) !important;
}

/* Plakette "Out now" im Companion-Block: Laufweite wie die anderen Ueberzeilen statt breit gesperrt */
.uebernommen .companion-beta-badge {
  letter-spacing: 0.08em !important;
}