/* Verkaufsseite Askı Rafı (C 451, 30.10.2026) nach der Seite der Vorlage „Product Rail Gallery“ (21st.dev): dunkle Seite, Pfad,
   links Name und Kaufknopf, rechts die Vorführung in einem hellen Kasten mit Knopf „Önizleme“ zur Vorschau (Betreiber 30.10.: „es
   soll so wie auf der seite sein so das man sieht wo das addon ist also im kasten oder so hervorgehoben“). Kein Logo oben
   (Betreiber 30.10.). Die Stange ist das unveränderte Bauteil aus dem Laden (marketing/aski-rafi); hier stehen nur die Werte, die
   ihr Stilblock liest, ihr Aussehen auf dieser Seite und der Knopf ihrer Infozeile (.ec-btn, im Laden aus styles.css). Dieselbe
   Datei trägt die Vorschau /aski-rafi/onizleme/ (body.ar-vorschau). */
@font-face {
  font-family: 'Inter';
  src: url('/showcase/fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
/* Schrift der hängenden Schilder, selbst abgelegt (Google Fonts, Fassung v9, Lizenz in fonts/bricolage-grotesque-OFL.txt),
   damit die Seite keine Anfrage an Google stellt; latin trägt ı, latin-ext ğ und ş. */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/aski-rafi/fonts/bricolage-grotesque-800-latin-ext.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/aski-rafi/fonts/bricolage-grotesque-800-latin.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;
  /* Seite, Farben der Startseite von emonse.com */
  --ar-grund: #080a12;
  --ar-flaeche: #0f1320;
  --ar-linie: rgb(255 255 255 / 10%);
  --ar-schrift: #eaecf6;
  --ar-leise: #9ba0b5;
  /* Kasten und Vorschau, Farben der Vorlage */
  --ar-fg: #0a0a0a;
  --ar-muted: #737373;
  --ar-zeile: #77735f;
  --ar-buehne: #f4f4f2;
  --ar-gutter: 16px;
  --ar-breite: 1240px;

  /* Werte, die der Stangenblock clothing-rail.css liest; die Stange steht immer auf hellem Grund. */
  --color-bg: #ffffff;
  --color-black: var(--ar-fg);
  --color-text: var(--ar-fg);
  --color-text-muted: var(--ar-muted);
  --color-border: #e5e5e5;
  --color-border-strong: #d4d4d4;
  --color-focus: var(--ar-fg);
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 28px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 24px;
  --radius-pill: 999px;
  --radius-control: 8px;
  --radius-card: 14px;
  --radius-surface: 16px;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-heading: var(--font-body);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-short: 220ms;
  --dur-long: 420ms;
  --color-media-scrim: rgb(0 0 0 / 50%);
  --ec-home-gutter-mobile: var(--ar-gutter);
  --ec-focus-ring-width: 2px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* hidden gilt vor jeder display-Regel; sonst blieben geschlossene Bereiche mit display: grid sichtbar und bedienbar
   (Codex 30.10. an der Upload-Seite). */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--ar-grund);
  color: var(--ar-schrift);
  font: 400 16px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* Knöpfe: rund; auf der dunklen Seite hell, in der Infozeile der Stange dunkel wie in der Vorlage */
.ar-knopf,
.ec-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 24px;
  border-radius: var(--radius-pill);
  font: 600 15px/1.2 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 160ms ease;
}
.ar-knopf {
  border: 1px solid #ffffff;
  background: #ffffff;
  color: var(--ar-fg);
}
.ec-btn {
  border: 1px solid var(--ar-fg);
  background: var(--ar-fg);
  color: #ffffff;
}
.ar-knopf:hover,
.ec-btn:hover,
.ar-onizleme:hover {
  transform: translateY(-1px);
}
.ar-knopf:focus-visible,
.ar-pfad a:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}
.ec-btn:focus-visible,
.ar-onizleme:focus-visible,
.ar-zurueck:focus-visible {
  outline: 2px solid var(--ar-fg);
  outline-offset: 3px;
}

/* Kopf: Pfad über beiden Spalten, links das Angebot, rechts der Kasten */
.ar-kopf {
  max-width: var(--ar-breite);
  margin: 0 auto;
  padding: 40px var(--ar-gutter) 72px;
}
.ar-pfad {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 56px;
  color: var(--ar-leise);
  font-size: 14px;
}
.ar-pfad a {
  display: inline-flex;
  border-radius: 4px;
}
.ar-pfad svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}
.ar-pfad [aria-current] {
  color: var(--ar-schrift);
}
.ar-kopf-raster {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.5fr);
  align-items: center;
  gap: 56px;
}
.ar-art {
  margin: 0 0 18px;
  color: var(--ar-leise);
  font-size: 14px;
}
.ar-angebot h1 {
  font-size: clamp(40px, 4.4vw, 58px);
  font-weight: 700;
  letter-spacing: -0.035em;
}
.ar-angebot h1 span {
  display: block;
  margin-top: 12px;
  color: var(--ar-leise);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.ar-satz {
  max-width: 440px;
  margin: 22px 0 30px;
  color: var(--ar-leise);
}
.ar-angebot .ar-not {
  margin: 16px 0 0;
  padding: 0;
  text-align: left;
}

/* Hängende Schilder über dem Angebot (31.10.2026) nach der Vorlage des Betreibers (hookline.shop, Kopf „Hang your
   catalogue.“): Stange mit Klemmen, an Schnüren drei Schilder in Gelb, Creme und Orange. Betreiber 31.10.: „auf turkisch …
   soll auch bei hoover komplett wackeln nach links rechts wie in echt usw selbe farben und style“. Der Grund ist unserer, eine
   Fläche wie die Karten der Seite; der beige Grund mit Ringmuster der Vorlage passte nicht (Betreiber 31.10.: „hintergrund
   sollte zu unserem thema passen“). Jedes Schild dreht um seinen Aufhängepunkt an der Stange; den Winkel setzt tabelalar.js in
   --sallanma, ohne Skript oder bei reduzierter Bewegung hängen sie still. Auf dem Telefon hängt jedes Schild an einer eigenen
   Stange. */
.ar-tabelalar {
  --ar-murekkep: #16193a;
  --ar-stange: linear-gradient(90deg, #b9bcc4, #ffffff 40%, #a9adb6);
  /* Schnur von der Stange bis zur Oberkante des Schilds */
  --ar-ip: 58px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(10px, 1.6vw, 22px);
  margin: 0 0 56px;
  /* Unten Platz für den Ausschlag: tabelalar.js lässt jedes Schild nur so weit pendeln, wie seine tiefste Ecke im Band bleibt. */
  padding: 26px clamp(16px, 3vw, 40px) 58px;
  border: 1px solid var(--ar-linie);
  border-radius: 18px;
  background: var(--ar-flaeche);
  color: var(--ar-murekkep);
}
.ar-tabelalar::before,
.ar-tabela::before {
  content: '';
  position: absolute;
  top: 26px;
  left: 18px;
  right: 18px;
  height: 5px;
  border-radius: 5px;
  background: var(--ar-stange);
  box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
}
.ar-tabela {
  position: relative;
  padding-top: calc(var(--ar-ip) + 2px);
  font: 800 clamp(34px, 6.2vw, 88px) / 0.95 'Bricolage Grotesque', var(--font-body);
  letter-spacing: -0.045em;
}
.ar-tabela::before {
  display: none;
}
.ar-tabela-yuz {
  --ar-egim: 0deg;
  position: relative;
  display: block;
  padding: 0.06em 0.2em 0.14em;
  border-radius: 0.16em;
  /* Loch, an dem die Schnur endet: man sieht den Grund hindurch */
  background:
    radial-gradient(
      circle at 50% 0.205em,
      var(--ar-flaeche) 0.065em,
      rgb(22 25 58 / 28%) 0.067em 0.078em,
      transparent 0.08em
    ),
    var(--ar-renk);
  box-shadow:
    0 22px 30px -18px rgb(0 0 0 / 80%),
    inset 0 2px 0 rgb(255 255 255 / 50%),
    inset 0 -3px 0 rgb(0 0 0 / 8%);
  transform: rotate(calc(var(--ar-egim) + var(--sallanma, 0deg)));
  transform-origin: 50% calc(-1 * var(--ar-ip));
  user-select: none;
}
/* Schnur bis in die Mitte des Lochs */
.ar-tabela-yuz::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(100% - 0.205em);
  width: 2px;
  height: calc(var(--ar-ip) + 0.205em);
  margin-left: -1px;
  border-radius: 2px;
  background: linear-gradient(#8e919a, #d9dbe0);
}
/* Klemme auf der Stange */
.ar-tabela-yuz::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(100% + var(--ar-ip) - 9px);
  width: 24px;
  height: 15px;
  margin-left: -12px;
  border-radius: 6px 6px 8px 8px;
  background:
    radial-gradient(circle at 50% 62%, #5d616b 0 2px, transparent 2.6px),
    linear-gradient(#f6f7f9, #b3b7bf 55%, #8d919b);
  box-shadow:
    0 3px 4px rgb(0 0 0 / 28%),
    inset 0 0 0 1px rgb(0 0 0 / 14%);
}
.ar-tabela-limon {
  --ar-renk: #ffe45c;
  --ar-egim: -1.4deg;
}
.ar-tabela-krem {
  --ar-renk: #f8f4ec;
}
.ar-tabela-turuncu {
  --ar-renk: #ff5a2c;
  --ar-egim: 1.2deg;
  color: #ffffff;
}

/* Fahnen im Kasten (01.11.2026, Kaufplan Entscheid 23): dieselben Schilder an einer kurzen Stange über der Vorführung, gelb
   für Dönen, rot für Fotoğraflı. Die gewählte hängt tiefer und in voller Größe, die andere höher und kleiner; die Farben
   bleiben voll, weil weiße Schrift auf gedämpftem Rot unter 3:1 Kontrast fiel (Codex zu F3b, P2). Ein Klick wählt
   (varyant.js), das Pendel kommt aus tabelalar.js. Das Loch im Schild zeigt den weißen Grund des Kastens. */
.ar-tabelalar.ar-fahnen {
  --ar-flaeche: #ffffff;
  --ar-ip: 22px;
  width: fit-content;
  margin: -8px auto 6px;
  padding: 14px 22px 26px;
  border: 0;
  background: none;
}
.ar-fahnen::before {
  top: 14px;
}
.ar-fahne {
  appearance: none;
  border: 0;
  background: none;
  color: inherit;
  font-size: clamp(24px, 4.4cqi, 40px);
  cursor: pointer;
  transform-origin: 50% 0;
  transition:
    padding-top 260ms cubic-bezier(0.3, 1.4, 0.5, 1),
    scale 260ms cubic-bezier(0.3, 1.4, 0.5, 1);
}
.ar-fahne[aria-pressed='true'] {
  --ar-ip: 36px;
}
.ar-fahne[aria-pressed='false'] {
  scale: 0.84;
}
.ar-fahne[aria-pressed='false']:hover {
  scale: 0.9;
}
.ar-fahne:focus-visible {
  outline: none;
}
.ar-fahne:focus-visible .ar-tabela-yuz {
  outline: 2px solid var(--ar-fg);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .ar-fahne {
    transition: none;
  }
}
/* Texte je Variante: die Seite trägt beide Fassungen, sichtbar ist die gewählte. */
body:not([data-varyant='foto']) [data-nur='foto'],
body[data-varyant='foto'] [data-nur='donen'] {
  display: none;
}

/* Der Kasten: die Vorführung hell und hervorgehoben auf der dunklen Seite */
.ar-kasten {
  container-type: inline-size;
  padding: 28px 0 16px;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, var(--ar-buehne) 100%);
  color: var(--ar-fg);
  text-align: center;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 8%),
    0 32px 80px rgb(0 0 0 / 45%);
  overflow: hidden;
}
.ar-marke {
  margin: 0 0 12px;
  padding: 0 var(--ar-gutter);
  color: var(--ar-zeile);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.ar-kasten-satz {
  margin: 0;
  padding: 0 var(--ar-gutter);
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.ar-kasten-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 20px;
}
.ar-kasten-fuss .ar-ipucu {
  margin: 0;
  padding: 0;
  text-align: left;
}
.ar-onizleme {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding: 11px 18px;
  border-radius: 10px;
  background: #1c1c1e;
  color: #ffffff;
  font: 600 15px/1.2 var(--font-body);
  text-decoration: none;
  transition: transform 160ms ease;
}
.ar-onizleme svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ar-ipucu {
  margin: 4px 0 20px;
  padding: 0 var(--ar-gutter);
  color: #8a8a8a;
  font-size: 13px;
}
.ar-not {
  max-width: 560px;
  margin: 14px auto 0;
  padding: 0 var(--ar-gutter);
  color: var(--ar-leise);
  font-size: 12px;
}

/* Die Stange in Kasten und Vorschau: dieselbe Stange wie im Laden (dunkles Chrom mit Riffelung, an beiden Enden ein Wandhalter
   mit zwei Schrauben), hier von Rand zu Rand der Bühne gespannt, als wäre sie am Kasten festgeschraubt (Betreiber 01.11.2026 mit
   einem Bild der Vorlage „Product Rail Gallery“: „die stange so designen wie hier auf dem bild so das es aussieht als ob es auf
   dem monitor festgemacht ist“). Die Spur ist dafür kein Bezug (`position: static`), die Stange misst sich an der Bühne. Bis
   01.11. trug die Seite eine eigene helle Chromstange mit Endkappen. Die Größe richtet sich nach der Breite des Kastens: 21 %
   der Breite füllen ihn wie die Vorlage (gemessen 30.10.). Dicht hängen und Ausweichen der Nachbarn kommen aus der Stange
   selbst (clothing-rail.css), für beide Varianten. */
.ec-rail.ar-raf {
  --ec-rail-t: clamp(84px, 21cqi, 190px);
  width: 100%;
  margin-top: 10px;
  overflow: visible;
}
/* Die Spur trägt links und rechts den Rand für die Bildflächen und das Ausweichen (--ec-rail-aussen); im Kasten ist sie damit
   breiter als die Bühne. Die Reihe reicht deshalb um diesen Rand über die Bühne hinaus, der Kasten schneidet ihn ab: die Teile
   hängen mittig, und eine zu breite Reihe beginnt am ersten Teil (Codex zu F3b, P2: `justify-content: center` machte es
   unerreichbar). */
.ar-raf .ec-rail-row {
  margin-inline: calc(-1 * var(--ec-rail-aussen));
}
.ar-raf .ec-rail-track {
  position: static;
}
.ar-raf .ec-rail-bar {
  inset-inline: 10px;
}
/* Kasten niedriger bei gleich großem Inhalt (Betreiber 30.10. 23:4x): Name, Preis und Knopf rücken näher an die Teile. */
.ar-raf .ec-rail-info {
  margin-top: 8px;
}
/* Fenster beim Anheben der Foto-Variante (raf-heben.tsx): Preis und die Schalter Ön und Arka wie im Laden (Theme ATLAS,
   styles.css `.ec-pdp-price` und `.ec-pill`), hier nur für dieses Fenster; es hängt im zentrierten Kasten und setzt links an. */
.ec-rail-heben {
  text-align: left;
}
.ec-rail-heben .ec-pdp-price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  font-size: 24px;
  font-weight: 700;
}
.ec-rail-heben .ec-pill {
  padding: 8px 18px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-text);
  font: 14px var(--font-body);
  cursor: pointer;
}
.ec-rail-heben .ec-pill.is-active {
  border-color: var(--color-black);
  background: var(--color-black);
  color: var(--color-bg);
}

/* Vorschau ohne Kauf: die Stange allein auf heller Bühne, wie die Vorlage beim Klick auf „Preview“ */
body.ar-vorschau {
  color-scheme: light;
  background: var(--ar-buehne);
  color: var(--ar-fg);
}
/* Die Spalte hat die Breite der Bühne, nicht die der Reihe: sonst ließe die beim Drehen wachsende Reihe Spalte und Stange
   mitwachsen (Codex 31.10.); was beim Drehen über den Rand ragt, wird abgeschnitten statt die Seite quer scrollen zu lassen. */
.ar-vorschau-buehne {
  container-type: inline-size;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow-x: clip;
  justify-items: center;
  align-content: center;
  min-height: 100svh;
  padding: 72px 0 40px;
  background:
    radial-gradient(120% 80% at 18% 0%, #ffffff 0%, rgb(255 255 255 / 0%) 60%),
    linear-gradient(180deg, #efefed 0%, var(--ar-buehne) 45%, #f8f8f7 100%);
  text-align: center;
}
.ar-vorschau-buehne h1 {
  padding: 0 var(--ar-gutter);
  font-size: clamp(28px, 3.4vw, 42px);
}
/* In der Vorschau so groß wie im Laden (dort bis 300px): die Stange füllt die Bühne. */
.ar-vorschau-buehne .ec-rail.ar-raf {
  --ec-rail-t: clamp(84px, 21cqi, 280px);
}
.ar-vorschau-buehne .ar-not {
  color: var(--ar-muted);
}
.ar-zurueck {
  position: absolute;
  top: 20px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: #ffffff;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

/* Upload-Seite /aski-rafi/yukle/ (yukle.js): immer ein Teil mit drei Feldern im Hochformat, darüber die Leiste aller Teile mit
   ihrem Stand, darunter eine am unteren Rand haftende Leiste mit Önceki und Sonraki. So bleibt die Seite auch bei 50 Teilen auf
   dem Telefon eine Bildschirmhöhe lang (Betreiber 30.10.: „wie sollen leute aus mobile oder mit kleinem monitor damit umgehen“). */
.ar-yukle {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px var(--ar-gutter) 64px;
}
.ar-yukle .ar-pfad {
  margin-bottom: 32px;
}
.ar-yukle-kopf h1 {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.ar-yukle-kopf .ar-satz {
  max-width: none;
  margin: 12px 0 16px;
}
.ar-fortschritt {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--ar-flaeche);
  overflow: hidden;
}
.ar-fortschritt span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #ffffff;
  transition: width 240ms ease;
}
.ar-yukle-regeln {
  margin: 20px 0 24px;
  border: 1px solid var(--ar-linie);
  border-radius: var(--radius-card);
  background: var(--ar-flaeche);
}
.ar-yukle-regeln summary {
  padding: 14px 18px;
  font-weight: 600;
  cursor: pointer;
}
.ar-yukle-regeln .ar-beispiel {
  margin: 0 16px 16px;
}
.ar-uebersicht {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.ar-chip {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1.5px dashed rgb(255 255 255 / 28%);
  border-radius: 10px;
  background: transparent;
  color: var(--ar-leise);
  font: 600 14px/1 var(--font-body);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.ar-chip[data-stand='yarim'] {
  border-style: solid;
  border-color: rgb(255 255 255 / 45%);
  color: var(--ar-schrift);
}
.ar-chip[data-stand='tam'] {
  border-style: solid;
  border-color: #4ade80;
  background: rgb(74 222 128 / 14%);
  color: #ffffff;
}
.ar-chip[aria-current='step'] {
  box-shadow:
    0 0 0 2px var(--ar-grund),
    0 0 0 4px #ffffff;
}
.ar-chip:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 5px;
}
.ar-teile {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ar-teil-karte {
  padding: 20px;
  border: 1px solid var(--ar-linie);
  border-radius: var(--radius-card);
  background: var(--ar-flaeche);
}
.ar-teil-karte h2 {
  font-size: 18px;
}
.ar-teil-karte p {
  margin: 4px 0 16px;
  color: var(--ar-leise);
  font-size: 14px;
}
.ar-plaetze {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.ar-platz {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  aspect-ratio: 3 / 4;
  padding: 8px;
  border: 1.5px dashed rgb(255 255 255 / 24%);
  border-radius: 12px;
  background: var(--ar-grund);
  color: var(--ar-schrift);
  font: 500 13px/1.3 var(--font-body);
  cursor: pointer;
  overflow: hidden;
  transition:
    border-color 180ms ease,
    transform 180ms ease;
}
.ar-platz.is-ziehen {
  border-color: #ffffff;
  transform: translateY(-2px);
}
@media (hover: hover) {
  .ar-platz:hover {
    border-color: #ffffff;
    transform: translateY(-2px);
  }
}
.ar-platz:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}
.ar-platz-bild {
  position: absolute;
  inset: 0;
  background: center / contain no-repeat var(--ar-buehne);
  opacity: 0;
  transition: opacity 240ms ease;
}
.ar-platz-zeichen {
  position: relative;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ar-platz-text,
.ar-platz-zustand {
  position: relative;
}
.ar-platz-zustand {
  color: var(--ar-leise);
  font-size: 12px;
}
.ar-platz.is-laedt {
  animation: ar-pulsieren 1.2s ease-in-out infinite;
}
.ar-platz.is-fertig {
  border-style: solid;
  border-color: rgb(255 255 255 / 40%);
}
.ar-platz.is-fertig .ar-platz-bild {
  opacity: 1;
}
.ar-platz.is-fertig .ar-platz-zeichen,
.ar-platz.is-fertig .ar-platz-text {
  display: none;
}
.ar-platz.is-fertig .ar-platz-zustand {
  align-self: end;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgb(10 10 10 / 72%);
  color: #ffffff;
  opacity: 0;
  transition: opacity 180ms ease;
}
.ar-platz.is-fertig:hover .ar-platz-zustand,
.ar-platz.is-fertig:focus-visible .ar-platz-zustand,
.ar-platz.is-fertig.is-fehler .ar-platz-zustand {
  opacity: 1;
}
/* Ohne Maus gibt es kein Überfahren: dort steht „Değiştir“ immer auf dem Foto. */
@media (hover: none) {
  .ar-platz.is-fertig .ar-platz-zustand {
    opacity: 1;
  }
}
.ar-platz.is-fehler {
  border-color: #fca5a5;
}
.ar-platz.is-fehler .ar-platz-zustand {
  color: #fca5a5;
}
@keyframes ar-pulsieren {
  50% {
    border-color: #ffffff;
  }
}
.ar-leiste {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--ar-linie);
  background: rgb(8 10 18 / 92%);
  backdrop-filter: blur(10px);
}
.ar-leiste .ar-knopf {
  padding-inline: 20px;
}
.ar-leiste .ar-knopf:first-child {
  justify-self: start;
}
.ar-leiste .ar-knopf:last-child {
  justify-self: end;
}
.ar-leiste-stand {
  margin: 0;
  color: var(--ar-leise);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ar-gonder {
  display: grid;
  gap: 14px;
  margin-top: 28px;
  padding: 24px;
  border: 1px solid var(--ar-linie);
  border-radius: 18px;
  background: var(--ar-flaeche);
}
.ar-gonder h2 {
  font-size: 22px;
}
.ar-gonder .ar-knopf {
  justify-self: start;
}
.ar-gonder .ar-knopf:disabled,
.ar-leiste .ar-knopf:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}
.ar-gonder .ar-hinweis {
  margin: 0;
  color: var(--ar-leise);
  font-size: 13px;
}
/* Einbauweg beim Abschicken (Welle 2b-2): zwei Kacheln wie die Paketwahl, darunter die Domain. */
.ar-kurulum {
  display: grid;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.ar-kurulum legend {
  margin-bottom: 4px;
  padding: 0;
  font-size: 15px;
  font-weight: 600;
}
.ar-wege {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 12px;
}
.ar-weg {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 18px;
  border: 1px solid var(--ar-linie);
  border-radius: var(--radius-card);
  background: var(--ar-grund);
  color: var(--ar-schrift);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease;
}
@media (hover: hover) {
  .ar-weg:hover {
    border-color: rgb(255 255 255 / 28%);
    transform: translateY(-2px);
  }
}
.ar-weg:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}
.ar-weg[aria-pressed='true'] {
  border-color: #ffffff;
  background: #161b2e;
}
.ar-weg-name {
  font-size: 16px;
  font-weight: 600;
}
.ar-weg-name::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 10px;
  border: 1.5px solid rgb(255 255 255 / 45%);
  border-radius: 50%;
  vertical-align: -1px;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}
.ar-weg[aria-pressed='true'] .ar-weg-name::before {
  border-color: #ffffff;
  box-shadow: inset 0 0 0 3.5px var(--ar-flaeche), inset 0 0 0 8px #ffffff;
}
.ar-weg-text {
  color: var(--ar-leise);
  font-size: 14px;
  line-height: 1.45;
}
/* Ab dem Beginn sind belegte Plätze fest (nur Ersatz für gelöschte Fotos). */
.ar-platz[aria-disabled='true'] {
  cursor: default;
}
/* Welle 2e: ein leerer Platz, der keinen Ersatz nimmt (die Korrektur läuft mit denselben Fotos, Vertrag §7). */
.ar-platz[aria-disabled='true']:not(.is-fertig) {
  border-style: solid;
  border-color: rgb(255 255 255 / 10%);
  color: var(--ar-leise);
}
.ar-platz[aria-disabled='true']:not(.is-fertig) .ar-platz-zeichen {
  display: none;
}
@media (hover: hover) {
  .ar-platz[aria-disabled='true']:hover {
    border-color: rgb(255 255 255 / 40%);
    transform: none;
  }
  .ar-platz[aria-disabled='true']:not(.is-fertig):hover {
    border-color: rgb(255 255 255 / 10%);
  }
}
@media (max-width: 640px) {
  .ar-yukle {
    padding-top: 24px;
  }
  .ar-yukle .ar-pfad {
    margin-bottom: 20px;
  }
  .ar-uebersicht {
    flex-wrap: nowrap;
    margin-inline: calc(-1 * var(--ar-gutter));
    padding: 6px var(--ar-gutter);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .ar-teil-karte {
    padding: 14px;
  }
  .ar-plaetze {
    gap: 8px;
  }
  .ar-leiste {
    margin-inline: calc(-1 * var(--ar-gutter));
    padding-inline: var(--ar-gutter);
  }
  .ar-gonder {
    padding: 18px;
  }
}
/* Nachkauf (Welle 2d): „Ürün ekle“ als aufklappbare Karte wie die Fotoregeln, Turnstile lädt erst beim Öffnen; die Stückzahl
   über Minus und Plus statt eines nativen Zahlenfelds, der Gesamtpreis daneben (feedback_design_wow_anspruch). */
.ar-ekle {
  margin-top: 28px;
  border: 1px solid var(--ar-linie);
  border-radius: 18px;
  background: var(--ar-flaeche);
}
.ar-ekle summary {
  padding: 18px 24px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
}
.ar-ekle-inhalt {
  display: grid;
  gap: 14px;
  padding: 0 24px 24px;
}
.ar-ekle-inhalt .ar-hinweis {
  margin: 0;
  color: var(--ar-leise);
  font-size: 14px;
}
.ar-ekle-inhalt .ar-hinweis strong {
  color: var(--ar-schrift);
  font-weight: 600;
}
.ar-ekle-inhalt a {
  color: var(--ar-schrift);
}
.ar-ekle-inhalt .ar-knopf {
  justify-self: start;
}
.ar-ekle-inhalt .ar-knopf:disabled {
  opacity: 0.6;
  cursor: wait;
}
.ar-zaehler {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}
.ar-zaehler-feld {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: var(--radius-pill);
  background: var(--ar-grund);
}
.ar-zaehler-knopf {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ar-schrift);
  font: 500 22px/1 var(--font-body);
  cursor: pointer;
  transition: background-color 180ms ease;
}
@media (hover: hover) {
  .ar-zaehler-knopf:not(:disabled):hover {
    background: rgb(255 255 255 / 8%);
  }
}
.ar-zaehler-knopf:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.ar-zaehler-knopf:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -4px;
}
.ar-zaehler output {
  min-width: 3ch;
  font: 600 18px/1 var(--font-body);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.ar-zaehler-summe {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ar-zaehler-summe small {
  margin-left: 4px;
  color: var(--ar-leise);
  font-size: 13px;
  font-weight: 400;
}
.ar-erfolg {
  margin: 0;
  color: #4ade80;
  font-size: 14px;
}
.ar-erfolg:empty {
  display: none;
}
@media (max-width: 640px) {
  .ar-ekle summary {
    padding: 16px 18px;
  }
  .ar-ekle-inhalt {
    padding: 0 18px 18px;
  }
}
.ar-cayma {
  display: grid;
  gap: 6px;
  margin-top: 24px;
  color: var(--ar-leise);
  font-size: 14px;
}
.ar-cayma p {
  margin: 0;
}
.ar-textknopf {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ar-schrift);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.ar-dialog {
  max-width: 440px;
  padding: 28px;
  border: 1px solid var(--ar-linie);
  border-radius: 18px;
  background: var(--ar-flaeche);
  color: var(--ar-schrift);
}
.ar-dialog::backdrop {
  background: rgb(0 0 0 / 60%);
}
.ar-dialog h2 {
  margin-bottom: 10px;
  font-size: 20px;
}
.ar-dialog p {
  margin: 0 0 20px;
  color: var(--ar-leise);
}
.ar-dialog-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ar-knopf--leise {
  border-color: rgb(255 255 255 / 30%);
  background: transparent;
  color: var(--ar-schrift);
}

/* Abschnitte darunter */
.ar-abschnitt {
  max-width: var(--ar-breite);
  margin: 0 auto;
  padding: 80px var(--ar-gutter);
  border-top: 1px solid var(--ar-linie);
}
.ar-abschnitt h2 {
  margin-bottom: 12px;
  font-size: clamp(26px, 3.2vw, 34px);
}
.ar-abschnitt h3 {
  margin-bottom: 6px;
  font-size: 17px;
}
.ar-abschnitt p {
  margin: 0;
  color: var(--ar-leise);
}
.ar-abschnitt .ar-text {
  max-width: 640px;
  margin-bottom: 32px;
}

/* Pakete: Kacheln aus dem Kassenkatalog (paketler.js), Auswahl hebt die Kachel hervor, darunter das Bestellformular */
.ar-paketler {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  min-height: 260px;
}
.ar-paket {
  display: grid;
  justify-items: start;
  gap: 6px;
  padding: 26px 24px 22px;
  border: 1px solid var(--ar-linie);
  border-radius: var(--radius-card);
  background: var(--ar-flaeche);
  color: var(--ar-schrift);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease;
}
.ar-paket:hover {
  border-color: rgb(255 255 255 / 28%);
  transform: translateY(-2px);
}
.ar-paket:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}
.ar-paket[aria-pressed='true'] {
  border-color: #ffffff;
  background: #161b2e;
  transform: translateY(-2px);
}
.ar-paket-name {
  color: var(--ar-leise);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.ar-paket-menge {
  font-size: 22px;
  font-weight: 600;
}
.ar-paket-preis {
  margin-top: 6px;
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.ar-paket-stueck,
.ar-paket-inkl {
  color: var(--ar-leise);
  font-size: 14px;
}
.ar-paket-wahl {
  margin-top: 16px;
  padding: 9px 18px;
  border: 1px solid rgb(255 255 255 / 40%);
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  transition:
    background-color 180ms ease,
    color 180ms ease;
}
.ar-paket[aria-pressed='true'] .ar-paket-wahl {
  border-color: #ffffff;
  background: #ffffff;
  color: var(--ar-fg);
}
.ar-dahil-titel {
  margin: 36px 0 14px;
  font-size: 18px;
}
.ar-dahil {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 10px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ar-leise);
  font-size: 15px;
}
.ar-dahil li {
  position: relative;
  padding-left: 28px;
}
.ar-dahil li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #4ade80;
  font-weight: 700;
}
.ar-dahil strong {
  color: var(--ar-schrift);
  font-weight: 600;
}
.ar-siparis {
  display: grid;
  gap: 14px;
  max-width: 560px;
  margin-top: 28px;
  padding: 28px;
  border: 1px solid var(--ar-linie);
  border-radius: 18px;
  background: var(--ar-flaeche);
}
.ar-siparis-paket {
  margin: 0;
  color: var(--ar-leise);
}
.ar-siparis-paket strong {
  color: var(--ar-schrift);
}
.ar-feld {
  display: grid;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
}
.ar-feld input {
  padding: 12px 14px;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 10px;
  background: var(--ar-grund);
  color: var(--ar-schrift);
  font: 400 16px/1.4 var(--font-body);
}
.ar-feld input:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}
.ar-feld-hinweis {
  min-height: 1.2em;
  color: #fcd34d;
  font-size: 13px;
  font-weight: 400;
}
.ar-feld-hinweis:empty {
  min-height: 0;
}
/* Nachkauf: die Domain kommt von der ersten Bestellung und ist fest (Welle 2d). */
.ar-feld input:read-only {
  color: var(--ar-leise);
}
.ar-feld-not {
  color: var(--ar-leise);
  font-size: 13px;
  font-weight: 400;
}
.ar-haken {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  cursor: pointer;
}
.ar-haken input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: #ffffff;
  flex: none;
}
.ar-siparis .ar-hinweis {
  margin: -6px 0 0;
  color: var(--ar-leise);
  font-size: 13px;
}
.ar-siparis a {
  color: var(--ar-schrift);
}
.ar-fehler {
  min-height: 1.2em;
  margin: 0;
  color: #fca5a5;
  font-size: 14px;
}
.ar-siparis .ar-knopf {
  justify-self: start;
}
.ar-siparis .ar-knopf:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* Aufnahme: drei Ansichten als Zeichnung, dann ein echtes Paar auf hellem Grund */
.ar-ansichten,
.ar-schritte,
.ar-karten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ar-schritte {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ar-ansichten li,
.ar-schritte li,
.ar-karten li {
  padding: 24px;
  border: 1px solid var(--ar-linie);
  border-radius: var(--radius-card);
  background: var(--ar-flaeche);
}
.ar-ansichten svg {
  display: block;
  width: 100%;
  height: 170px;
  margin-bottom: 16px;
  border-radius: 10px;
  background: var(--ar-buehne);
}
.ar-buegel {
  fill: none;
  stroke: #8a8a8a;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ar-teil {
  fill: #ffffff;
  stroke: var(--ar-fg);
  stroke-width: 2;
  stroke-linejoin: round;
}
.ar-naht {
  fill: none;
  stroke: #bdbdbd;
  stroke-width: 1.5;
  stroke-dasharray: 3 4;
}
.ar-beispiel {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  padding: 24px;
  border-radius: var(--radius-card);
  background: var(--ar-buehne);
  color: var(--ar-fg);
}
.ar-beispiel figure {
  margin: 0;
  text-align: center;
}
.ar-beispiel img {
  display: block;
  width: auto;
  height: 240px;
  margin-bottom: 8px;
}
.ar-beispiel figcaption {
  color: var(--ar-muted);
  font-size: 13px;
}
.ar-regeln {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0 0 0 16px;
  list-style: none;
}
.ar-regeln li {
  position: relative;
  padding-left: 26px;
}
.ar-regeln li::before {
  position: absolute;
  left: 0;
  font-weight: 700;
}
.ar-regeln .ja::before {
  content: '✓';
  color: #15803d;
}
.ar-regeln .nein::before {
  content: '✕';
  color: #b91c1c;
}
.ar-nr {
  display: block;
  margin-bottom: 20px;
  color: var(--ar-leise);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.ar-abschnitt > .ar-not {
  margin: 16px 0 0;
  padding: 0;
}

/* Fuß der Startseite von emonse.com auf der Verkaufsseite (02.11.2026, Betreiber: „sollte es nicht den original emonse footer
   haben da emonse es ja anbietet“; vorher ein verkürzter Fuß ohne Logo, Siegel und Spalten). Markup wie in landing.html, das
   scripts/build-aski-rafi.mjs gleich hält; Maße und Farben aus den Fußregeln der Startseite, auf diesen Fuß begrenzt. */
.ar-emonse-fuss {
  margin-top: 64px;
  padding: 52px 0 40px;
  border-top: 1px solid rgb(255 255 255 / 8%);
  line-height: 1.62;
}
.ar-emonse-fuss a {
  text-decoration: none;
}
.ar-emonse-fuss .wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}
.ar-emonse-fuss .brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.ar-emonse-fuss .brand-logo {
  display: block;
  width: auto;
  height: 34px;
}
.ar-emonse-fuss .foot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px 24px;
  margin-bottom: 36px;
}
.ar-emonse-fuss .foot-brand {
  grid-column: 1 / -1;
}
.ar-emonse-fuss .foot-brand .brand {
  margin-bottom: 14px;
}
.ar-emonse-fuss .foot-brand p {
  max-width: 320px;
  margin: 0;
  color: var(--ar-leise);
  font-size: 14px;
}
.ar-emonse-fuss .foot-certs {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 22px;
}
.ar-emonse-fuss .cert {
  display: block;
  line-height: 0;
  opacity: 0.9;
  transition:
    opacity 0.2s,
    transform 0.2s;
}
.ar-emonse-fuss .cert:hover {
  opacity: 1;
  transform: translateY(-2px);
}
.ar-emonse-fuss .cert img {
  display: block;
  width: auto;
  height: 42px;
}
.ar-emonse-fuss .foot-col h4 {
  margin: 0 0 14px;
  color: #6e7390;
  font-family: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ar-emonse-fuss .foot-col a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 0;
  color: var(--ar-leise);
  font-size: 14px;
  transition: color 0.2s;
}
.ar-emonse-fuss .foot-col a:hover {
  color: var(--ar-schrift);
}
.ar-emonse-fuss .foot-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  justify-content: space-between;
  align-items: center;
  padding-top: 22px;
  border-top: 1px solid rgb(255 255 255 / 8%);
  color: #6e7390;
  font-size: 12px;
}
@media (min-width: 600px) {
  .ar-emonse-fuss .foot-grid {
    grid-template-columns: 1.4fr 1fr;
  }
}
@media (min-width: 900px) {
  .ar-emonse-fuss .wrap {
    padding: 0 32px;
  }
  .ar-emonse-fuss .brand-logo {
    height: 48px;
  }
  .ar-emonse-fuss .foot-grid {
    grid-template-columns: 1.7fr 1fr 1fr 1fr;
  }
  .ar-emonse-fuss .foot-brand {
    grid-column: auto;
  }
}

/* Fuß der Rechtsseiten mit den Firmenangaben (Pflichtangaben) */
.ar-fuss {
  max-width: var(--ar-breite);
  margin: 0 auto;
  padding: 32px var(--ar-gutter) 48px;
  border-top: 1px solid var(--ar-linie);
  color: var(--ar-leise);
  font-size: 13px;
}
.ar-fuss p {
  margin: 4px 0 0;
}
.ar-recht {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-bottom: 16px;
}
.ar-recht a {
  text-decoration: none;
}
.ar-recht a:hover {
  color: var(--ar-schrift);
}

/* Rechtsseiten Askı Rafı (C 451, Codex, 30.10.2026): gemeinsame Artikel-, Blankofeld- und Druckstile nach dem EKSTRE-Vorbild.
   Auf die Rechtsseiten begrenzt, damit Verkaufsseite, Upload und Vorschau ihre bestehende Gestaltung behalten. */
.ar-yasal {
  max-width: 960px;
  margin: 0 auto;
  padding: 40px var(--ar-gutter) 72px;
}
.ar-yasal .ar-pfad {
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.ar-yasal .yasal {
  overflow-wrap: anywhere;
}
.ar-yasal .yasal__bas {
  margin-bottom: 40px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--ar-linie);
}
.ar-yasal .yasal__etiket {
  margin: 0 0 12px;
  color: var(--ar-leise);
  font-size: 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ar-yasal h1 {
  font-size: clamp(30px, 4.5vw, 48px);
  font-weight: 700;
}
.ar-yasal .yasal__tarih {
  margin: 18px 0 0;
  color: var(--ar-leise);
  font-size: 1rem;
}
.ar-yasal section {
  margin-top: 36px;
  scroll-margin-top: 24px;
}
.ar-yasal h2 {
  margin-bottom: 16px;
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1.3;
}
.ar-yasal h3 {
  margin: 24px 0 12px;
  font-size: 19px;
  line-height: 1.4;
}
.ar-yasal p {
  margin: 0 0 16px;
}
.ar-yasal .muted {
  color: var(--ar-leise);
}
.ar-yasal a {
  text-underline-offset: 0.18em;
}
.ar-yasal a:focus-visible,
.ar-yasal-seite .ar-fuss a:focus-visible {
  outline: 2px solid currentcolor;
  outline-offset: 4px;
}
.ar-yasal ul {
  margin: 0 0 16px;
  padding-left: 24px;
}
.ar-yasal li + li {
  margin-top: 8px;
}
.ar-yasal .yasal-tablo {
  width: 100%;
  margin: 16px 0 24px;
  border-collapse: collapse;
  font-size: 1rem;
  line-height: 1.6;
}
.ar-yasal .yasal-tablo th,
.ar-yasal .yasal-tablo td {
  padding: 12px 14px;
  border: 1px solid var(--ar-linie);
  text-align: left;
  vertical-align: top;
}
.ar-yasal .yasal-tablo th {
  background: var(--ar-flaeche);
  font-weight: 600;
}
.ar-yasal .yasal-tablo th:first-child,
.ar-yasal .yasal-tablo td:first-child {
  width: 30%;
}
.ar-yasal .yasal-tablo p:last-child {
  margin-bottom: 0;
}
.ar-yasal .ar-cayma-formu {
  margin-top: 24px;
  padding: 24px;
  border: 1px solid var(--ar-linie);
  border-radius: var(--radius-card);
  background: var(--ar-flaeche);
}
.ar-yasal .ar-cayma-formu h3 {
  margin-top: 0;
}
.ar-yasal .ar-cayma-formu dl {
  margin: 0;
}
.ar-yasal .ar-cayma-formu dt {
  margin-top: 16px;
  font-weight: 600;
}
.ar-yasal .ar-cayma-formu dd {
  margin: 4px 0 0;
}
.ar-yasal-seite .ar-fuss {
  max-width: 960px;
}
@media (max-width: 640px) {
  .ar-yasal {
    padding-top: 24px;
  }
  .ar-yasal .ar-pfad {
    margin-bottom: 32px;
  }
  .ar-yasal .yasal-tablo th,
  .ar-yasal .yasal-tablo td {
    padding: 10px 8px;
  }
  .ar-yasal .ar-cayma-formu {
    padding: 18px;
  }
}
@media print {
  .ar-yasal-seite {
    color-scheme: light;
    --ar-grund: #ffffff;
    --ar-flaeche: #f5f5f5;
    --ar-linie: #b0b0b0;
    --ar-schrift: #111111;
    --ar-leise: #333333;
    background: #ffffff;
    color: #111111;
    font-size: 12pt;
    line-height: 1.5;
  }
  .ar-yasal {
    max-width: none;
    padding: 0 14mm;
  }
  .ar-yasal .ar-pfad,
  .ar-yasal-seite .ar-recht {
    display: none;
  }
  .ar-yasal .yasal__bas {
    margin-bottom: 20pt;
    padding-bottom: 12pt;
  }
  .ar-yasal h1 {
    font-size: 24pt;
  }
  .ar-yasal h2 {
    font-size: 16pt;
  }
  .ar-yasal h3 {
    font-size: 13pt;
  }
  .ar-yasal .yasal__etiket,
  .ar-yasal .yasal__tarih,
  .ar-yasal .yasal-tablo,
  .ar-yasal-seite .ar-fuss {
    font-size: 12pt;
  }
  .ar-yasal section {
    margin-top: 20pt;
  }
  .ar-yasal h1,
  .ar-yasal h2,
  .ar-yasal h3,
  .ar-yasal dt {
    break-after: avoid;
  }
  .ar-yasal p,
  .ar-yasal li,
  .ar-yasal dd {
    orphans: 3;
    widows: 3;
  }
  .ar-yasal .yasal-tablo thead {
    display: table-header-group;
  }
  .ar-yasal .yasal-tablo tr {
    break-inside: avoid;
  }
  .ar-yasal .yasal-tablo th,
  .ar-yasal .yasal-tablo td {
    padding: 6pt 8pt;
  }
  .ar-yasal .ar-cayma-formu {
    padding: 12pt;
    border-radius: 0;
  }
  .ar-yasal-seite .ar-fuss {
    max-width: none;
    margin: 20pt 14mm 0;
    padding: 12pt 0 0;
  }
}

@media (max-width: 1023px) {
  .ar-kopf-raster {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .ar-pfad {
    margin-bottom: 36px;
  }
}
@media (max-width: 900px) {
  .ar-schritte {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .ar-tabelalar {
    --ar-ip: 40px;
    flex-direction: column;
    align-items: stretch;
    gap: 34px;
    padding: 20px 16px 36px;
  }
  .ar-tabelalar::before {
    display: none;
  }
  .ar-tabela {
    display: flex;
    justify-content: center;
    font-size: clamp(34px, 13vw, 64px);
  }
  .ar-tabela::before {
    display: block;
    top: 0;
    left: 0;
    right: 0;
  }
  /* Die zwei Fahnen bleiben auch am Telefon an einer Stange in einer Zeile. */
  .ar-tabelalar.ar-fahnen {
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
  }
  .ar-fahnen::before {
    display: block;
  }
  .ar-fahne {
    display: block;
    font-size: clamp(22px, 7vw, 32px);
  }
  .ar-fahne::before {
    display: none;
  }
  .ar-ansichten,
  .ar-schritte,
  .ar-karten {
    grid-template-columns: 1fr;
  }
  .ar-beispiel {
    grid-template-columns: 1fr 1fr;
  }
  .ar-regeln {
    grid-column: 1 / -1;
    padding-left: 0;
  }
  .ar-beispiel img {
    height: 180px;
    margin-inline: auto;
  }
  .ar-abschnitt {
    padding-block: 56px;
  }
  .ar-kasten-fuss {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .ar-kasten-fuss .ar-ipucu {
    text-align: center;
  }
  .ar-onizleme {
    justify-content: center;
  }
  .ar-vorschau-buehne {
    min-height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ar-knopf,
  .ec-btn,
  .ar-onizleme,
  .ar-paket,
  .ar-paket-wahl,
  .ar-platz,
  .ar-platz-bild,
  .ar-fortschritt span {
    transition: none;
  }
  .ar-platz.is-laedt {
    animation: none;
  }
  .ar-knopf:hover,
  .ec-btn:hover,
  .ar-onizleme:hover,
  .ar-paket:hover,
  .ar-paket[aria-pressed='true'],
  .ar-platz:hover,
  .ar-platz.is-ziehen {
    transform: none;
  }
}