/* Bildrahmen – in jedem Design wählbar, für Titelbild und alle Fotos.
   Wird nach vorlage.css geladen. Die dreifache Klasse .rahmen hebt die Spezifität über die Regeln der
   Vorlagen (z. B. .vorlage--x .variante--bogen .kopf__bild), damit der gewählte Rahmen immer gewinnt.
   „rahmen--form“: Rahmen mit eigenem Seitenverhältnis (Bogen, Kreis …); die übrigen füllen den Platz. */

.bild.rahmen.rahmen.rahmen {
  border-radius: 0; border: 0; outline: 0; padding: 0; box-shadow: none; filter: none;
  transform: none; rotate: none; clip-path: none;
  -webkit-mask: none; mask: none;
  overflow: hidden; background: var(--farbe-flaeche);
}
.bild.rahmen.rahmen.rahmen img { height: 100%; }
.bild.rahmen--form.rahmen--form { height: auto; }

/* Ausschnitt: Zoom um den gewählten Punkt */
.bild.gezoomt img { transform-origin: var(--fokus, 50% 50%); transform: scale(var(--zoom, 1)); }

/* ---- klassisch ---- */
.bild.rahmen.rahmen.rahmen.rahmen--bogen { aspect-ratio: 3 / 4; border-radius: 999px 999px 0 0; }
.bild.rahmen.rahmen.rahmen.rahmen--spitzbogen {
  aspect-ratio: 3 / 4;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V40Q0 13 50 0Q100 13 100 40V100Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V40Q0 13 50 0Q100 13 100 40V100Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.bild.rahmen.rahmen.rahmen.rahmen--medaillon {
  aspect-ratio: 4 / 5; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 7px var(--farbe-grund), 0 0 0 8px var(--linie-stark, rgba(0,0,0,.3));
  margin: 8px;
}
.bild.rahmen.rahmen.rahmen.rahmen--passepartout {
  aspect-ratio: 4 / 5;
  border: clamp(10px, 2.2vw, 22px) solid color-mix(in srgb, var(--farbe-grund) 30%, #fffdf9);
  box-shadow: 0 0 0 1px var(--linie-stark, rgba(0,0,0,.25)), 0 18px 40px -24px rgba(0,0,0,.45);
}
.bild.rahmen.rahmen.rahmen.rahmen--briefmarke {
  aspect-ratio: 4 / 5;
  border: 12px solid color-mix(in srgb, var(--farbe-grund) 30%, #fffdf9);
  -webkit-mask: radial-gradient(circle at center, #0000 5px, #000 5.5px) -10px -10px / 20px 20px round, linear-gradient(#000 0 0) padding-box;
  mask: radial-gradient(circle at center, #0000 5px, #000 5.5px) -10px -10px / 20px 20px round, linear-gradient(#000 0 0) padding-box;
  transform: rotate(-2deg);
}
.bild.rahmen.rahmen.rahmen.rahmen--kartusche {
  aspect-ratio: 4 / 5;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M12 0H88A12 10 0 0 0 100 10V90A12 10 0 0 0 88 100H12A12 10 0 0 0 0 90V10A12 10 0 0 0 12 0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M12 0H88A12 10 0 0 0 100 10V90A12 10 0 0 0 88 100H12A12 10 0 0 0 0 90V10A12 10 0 0 0 12 0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* ---- modern ---- */
.bild.rahmen.rahmen.rahmen.rahmen--rechteck { border-radius: 0; }
.bild.rahmen.rahmen.rahmen.rahmen--abgerundet { border-radius: clamp(14px, 3vw, 32px); }
.bild.rahmen.rahmen.rahmen.rahmen--kreis { aspect-ratio: 1; border-radius: 50%; }
.bild.rahmen.rahmen.rahmen.rahmen--ecke { clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%, 0 22%); }
.bild.rahmen.rahmen.rahmen.rahmen--welle {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V90C84 100 68 84 50 92C32 100 16 84 0 94Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V90C84 100 68 84 50 92C32 100 16 84 0 94Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.bild.rahmen.rahmen.rahmen.rahmen--polaroid {
  aspect-ratio: 4 / 5;
  border: clamp(8px, 1.6vw, 16px) solid #fffefb;
  border-bottom-width: clamp(34px, 6vw, 70px);
  box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 22px 44px -24px rgba(0,0,0,.5);
  transform: rotate(-2.5deg);
}

/* ---- Titelbild ---- */
/* Bildfüllend liegt das Foto hinter dem Text – dort gibt es keinen Rahmen */
.variante--vollbild .kopf__bild.rahmen.rahmen.rahmen.rahmen {
  position: absolute; inset: 0; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; transform: none;
  clip-path: none; -webkit-mask: none; mask: none; margin: 0;
}
/* Foto neben Text: Rahmen mit eigener Form stehen mittig in ihrer Spalte */
.variante--geteilt .kopf__bild.rahmen--form.rahmen--form {
  position: static; height: auto; width: min(26rem, 78%); align-self: center; justify-self: center; margin: clamp(2rem, 5vw, 4rem) auto;
}

/* Foto über die volle Breite: Band von Rand zu Rand, Namen und Datum darunter */
.variante--breit .kopf { display: block; min-height: 0; text-align: center; }
.variante--breit .kopf__bild { width: 100%; aspect-ratio: 21 / 9; max-height: 78svh; }
.variante--breit .kopf__bild.bild--leer { aspect-ratio: 21 / 9; }
.variante--breit .kopf__text { max-width: var(--breite); margin: 0 auto; padding-top: clamp(2rem, 1.5rem + 3vw, 4rem); }
@media (max-width: 700px) { .variante--breit .kopf__bild { aspect-ratio: 4 / 3; } }
/* im Band behalten auch Formrahmen die Bandform (Kreis & Co. passen dort nicht) */
.variante--breit .kopf__bild.rahmen--form.rahmen--form.rahmen--form.rahmen--form { aspect-ratio: 21 / 9; width: 100%; margin: 0; }
.bildband__bild.rahmen--form.rahmen--form.rahmen--form.rahmen--form { aspect-ratio: auto; width: 100%; margin: 0; }