/* Motiv: Foto-Hintergrund mit Pinselrand und weisser Karte (Vorlage: design_mockup.png).
   Nur fuer Seiten mit <body class="motiv">. Benoetigt das Filter-SVG #pinsel / #pinsel-fein im Body. */

body.motiv {
  --motiv-dunkel: #3b4048;
  --motiv-schiefer: #5d6672;
  --motiv-tisch: #c9ccd2;
  --motiv-holz: #b98a63;
  --motiv-gruen: #6f7d4f;
  --motiv-rand: 24px;

  padding: calc(var(--motiv-rand) + var(--safe-top)) var(--motiv-rand) calc(var(--motiv-rand) + var(--safe-bottom));
  background: var(--motiv-dunkel);
  overflow-x: clip;
}

/* unscharfes "Foto": dunkler Raum oben, heller Tisch unten, Holzhaus links, Pflanze rechts */
body.motiv::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 22% at 6% 84%, var(--motiv-holz) 0%, transparent 70%),
    radial-gradient(34% 30% at 100% 78%, var(--motiv-gruen) 0%, transparent 72%),
    radial-gradient(70% 40% at 0% 100%, #e9eaee 0%, transparent 70%),
    linear-gradient(180deg, var(--motiv-dunkel) 0%, var(--motiv-schiefer) 45%, var(--motiv-tisch) 78%, #e4e5e9 100%);
}

/* weisse Karte */
body.motiv .seite,
body.motiv .karte {
  position: relative;
  isolation: isolate;
  border-radius: 28px;
  background: var(--papier);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
}

body.motiv .seite {
  min-height: calc(100dvh - 2 * var(--motiv-rand) - var(--safe-top) - var(--safe-bottom));
  padding: 20px var(--rand-x);
}

/* rauer Pinselrand: weisse Flaeche hinter der Karte, mit Rauschen verzerrt */
body.motiv .seite::before,
body.motiv .seite::after,
body.motiv .karte::before,
body.motiv .karte::after {
  content: "";
  position: absolute;
  z-index: -1;
  background: var(--papier);
  pointer-events: none;
  /* eigene Ebene: Filter wird einmal gerastert statt bei jedem Tastendruck in der Karte neu berechnet (iOS) */
  will-change: transform;
}
body.motiv .seite::before,
body.motiv .karte::before {
  inset: -14px;
  border-radius: 40px;
  filter: url(#pinsel);
}
body.motiv .seite::after,
body.motiv .karte::after {
  inset: -20px;
  border-radius: 48px;
  opacity: .8;
  filter: url(#pinsel-fein);
}

/* Eingaben ebenfalls isolieren, damit Tippen die Karte darunter nicht neu malt */
body.motiv textarea { will-change: transform; }

/* Querformat (Mockup): Karte etwas luftiger */
@media (min-width: 700px) {
  body.motiv { --motiv-rand: 48px; }
}

/* QR-Anzeige: Karte fuellt den Bildschirm, Layout bleibt wie bisher */
body.motiv .karte {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Vollbild: nur QR auf weiss, ohne Motiv */
body.motiv.vollbild { --motiv-rand: 0px; background: var(--papier); }
body.motiv.vollbild::before,
body.motiv.vollbild .karte::before,
body.motiv.vollbild .karte::after { display: none; }
body.motiv.vollbild .karte { border-radius: 0; box-shadow: none; }