/* InstaWerk – erbt Schrift & Textfarbe vom Theme, nur Layout hier. */
.instawerk { --instawerk-radius: 4px; margin: 0 auto; }
.instawerk *, .instawerk *::before, .instawerk *::after { box-sizing: border-box; }
.instawerk-icon { width: 1em; height: 1em; fill: currentColor; vertical-align: -0.125em; }

/* Kopfzeile. Selektoren bewusst mit .instawerk davor: Elementor (.elementor img { border-radius:0;
   height:auto }) und Theme-Linkfarben sind sonst gleich spezifisch und gewinnen, weil sie später laden.
   Maße angelehnt an Smash Balloon „medium“ (Bild 64 px, Name 20 px, Bio 14 px), das die Seiten vorher hatten. */
.instawerk .instawerk-header { display: flex; align-items: center; gap: 20px; margin: 0 0 24px; }
.instawerk .instawerk-avatar { flex: 0 0 auto; display: block; line-height: 0; }
.instawerk .instawerk-avatar img { width: 64px; height: 64px; max-width: none; border-radius: 50%; display: block; object-fit: cover; }
.instawerk--avatar-rounded .instawerk-avatar img { border-radius: 12px; }
.instawerk--avatar-square .instawerk-avatar img { border-radius: 0; }
.instawerk .instawerk-header-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.instawerk a.instawerk-username, .instawerk a.instawerk-username:hover, .instawerk a.instawerk-username:focus {
	font-size: 20px; line-height: 1.4; font-weight: 600; text-decoration: none; color: inherit; }
.instawerk .instawerk-count { font-size: 14px; opacity: 0.75; display: inline-flex; gap: 4px; align-items: center; }
.instawerk .instawerk-bio { margin: 2px 0 0; padding: 0; opacity: 0.8; font-size: 14px; line-height: 1.4; }

/* Kopfzeile zentriert: Bild über dem Namen, Zahlen darunter */
.instawerk--header-center .instawerk-header { flex-direction: column; text-align: center; gap: 14px; margin-bottom: 32px; }
.instawerk--header-center .instawerk-header-top { flex-direction: column; align-items: center; gap: 4px; }
.instawerk--header-center .instawerk-avatar img { width: 96px; height: 96px; }
.instawerk-counts { display: inline-flex; gap: 14px; }

/* Farbschema: „theme“ erbt alles, hell/dunkel setzen eine eigene Fläche */
.instawerk--scheme-light, .instawerk--scheme-dark { padding: clamp(20px, 4vw, 48px); border-radius: var(--instawerk-radius); }
.instawerk--scheme-light { background: #fff; color: #333; }
.instawerk--scheme-dark { background: #1b1b1b; color: #f2f2f2; }
.instawerk--scheme-dark .instawerk-avatar img { box-shadow: 0 0 0 3px #1b1b1b, 0 0 0 5px #f2f2f2; }
.instawerk--scheme-dark.instawerk--card .instawerk-item { background: #262626; box-shadow: none; }
.instawerk--scheme-dark.instawerk--card .instawerk-body { color: #cfcfcf; }

/* Liste */
.instawerk-items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--instawerk-gap);
	grid-template-columns: repeat(var(--instawerk-cols), minmax(0, 1fr)); }
.instawerk-item { margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; }
.instawerk-item--hidden { display: none !important; }
.instawerk-media { position: relative; display: block; overflow: hidden; border-radius: var(--instawerk-radius); color: #fff; }
.instawerk-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.instawerk-media:hover img, .instawerk-media:focus-visible img { transform: scale(1.03); }
.instawerk-media:focus-visible { outline: 2px solid var(--instawerk-accent); outline-offset: 2px; }

.instawerk--ratio-1-1 .instawerk-media { aspect-ratio: 1 / 1; }
.instawerk--ratio-4-5 .instawerk-media { aspect-ratio: 4 / 5; }
.instawerk--ratio-9-16 .instawerk-media { aspect-ratio: 9 / 16; }
.instawerk--ratio-original .instawerk-media img { height: auto; }
/* Festes Format: Bild füllt den Rahmen. height:100% allein greift in einem aspect-ratio-Rahmen nicht
   (Höhe nicht definit) – Hochformat-Bilder liefen sonst über den Rahmen und wurden oben angeschnitten. */
/* width/height hier nochmal: Elementor (.elementor img { height:auto }) ist gleich spezifisch wie .instawerk-media img und lädt später. */
.instawerk--ratio-1-1 .instawerk-media img, .instawerk--ratio-4-5 .instawerk-media img, .instawerk--ratio-9-16 .instawerk-media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }

/* Badges (Video / Album) */
.instawerk-badge { position: absolute; pointer-events: none; display: flex; align-items: center; justify-content: center; }
.instawerk-badge--album { top: 8px; right: 8px; font-size: 20px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.instawerk-badge--play { inset: 0; margin: auto; width: 64px; height: 64px; font-size: 64px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.45)); }

/* Hover-Caption */
.instawerk-hover { position: absolute; inset: 0; background: rgba(0,0,0,.55); opacity: 0; transition: opacity .25s;
	display: flex; align-items: center; justify-content: center; padding: 16px; text-align: center; font-size: .9em; }
.instawerk-media:hover .instawerk-hover, .instawerk-media:focus-visible .instawerk-hover { opacity: 1; }

/* Caption unter dem Bild */
.instawerk-body { padding: 14px 4px 4px; font-size: .9em; line-height: 1.6; }
.instawerk-caption { margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--instawerk-lines); overflow: hidden; }
.instawerk-stats { display: flex; gap: 14px; margin-top: 10px; color: var(--instawerk-accent); font-size: .85em; }
.instawerk-stats span { display: inline-flex; gap: 5px; align-items: center; }

/* Karten-Stil */
.instawerk--card .instawerk-item { background: #fff; border-radius: var(--instawerk-radius); box-shadow: 0 2px 14px rgba(0,0,0,.07); overflow: hidden; }
.instawerk--card .instawerk-media { border-radius: 0; }
.instawerk--card .instawerk-body { padding: 16px 18px 18px; color: #555; }

/* Masonry */
.instawerk--masonry .instawerk-items { display: block; columns: var(--instawerk-cols); column-gap: var(--instawerk-gap); }
.instawerk--masonry .instawerk-item { break-inside: avoid; margin-bottom: var(--instawerk-gap); }
.instawerk--masonry .instawerk-media { aspect-ratio: auto; }
.instawerk--masonry .instawerk-media img { position: static; height: auto; }

/* Highlight */
.instawerk--highlight .instawerk-items { grid-auto-flow: dense; }
.instawerk--highlight .instawerk-item--highlight, .instawerk--grid .instawerk-item--highlight { grid-column: span 2; grid-row: span 2; }
/* Große Kacheln: mindestens quadratisch, wachsen mit den Reihen mit; ihr Bild darf die Reihen nicht strecken. */
.instawerk-item--highlight .instawerk-media { aspect-ratio: 1 / 1; flex: 1 1 auto; }
.instawerk-item--highlight .instawerk-media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }

/* Karussell */
.instawerk-carousel { position: relative; }
.instawerk--carousel .instawerk-items { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
	scroll-behavior: smooth; }
.instawerk--carousel .instawerk-items::-webkit-scrollbar { display: none; }
.instawerk--carousel .instawerk-item { flex: 0 0 calc((100% - (var(--instawerk-cols) - 1) * var(--instawerk-gap)) / var(--instawerk-cols)); scroll-snap-align: start; }
/* Pfeile: Themes stylen jedes <button> (Hello Elementor: pinker Rahmen/Hintergrund, Innenabstand) –
   deshalb doppelte Klasse und Hover/Fokus ausdrücklich (schlägt [type=button]:hover und .elementor-kit-N button:hover). */
.instawerk .instawerk-nav { position: absolute; top: 40%; z-index: 2; width: 40px; height: 40px; margin: 0; padding: 0; border-radius: 50%; border: 0; cursor: pointer;
	background: rgba(255,255,255,.92); color: #222; font-size: 26px; font-weight: 400; line-height: 1; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.instawerk .instawerk-nav:hover, .instawerk .instawerk-nav:focus, .instawerk .instawerk-nav:focus-visible { background: #fff; color: #000; border: 0; }
.instawerk-nav--prev { left: -12px; } .instawerk-nav--next { right: -12px; }
.instawerk .instawerk-nav[disabled] { opacity: 0; pointer-events: none; }

/* Footer / Buttons */
.instawerk-footer { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; }
/* .instawerk davor: Themes stylen button/a (Hello Elementor: pinker Button, unterstrichene Links). */
.instawerk-btn, .instawerk .instawerk-btn { display: inline-block; margin: 0; padding: 14px 36px; border: 1px solid var(--instawerk-accent); border-radius: 2px; cursor: pointer;
	background: transparent; color: var(--instawerk-accent); text-decoration: none; text-transform: uppercase; letter-spacing: 3px; box-shadow: none;
	font: inherit; font-size: 13px; font-weight: 600; line-height: 1.4; transition: transform .2s, background .2s, color .2s; }
.instawerk-btn:hover, .instawerk-btn:focus-visible, .instawerk .instawerk-btn:hover, .instawerk .instawerk-btn:focus, .instawerk .instawerk-btn:focus-visible {
	background: var(--instawerk-accent); border-color: var(--instawerk-accent); color: #fff; text-decoration: none; transform: scale(1.04); }

/* Lightbox */
.instawerk-lb { position: fixed; inset: 0; z-index: 99999; background: rgba(15,17,20,.94); display: flex; align-items: center; justify-content: center; padding: 24px; }
.instawerk-lb[hidden], .instawerk-lb [hidden], .instawerk [hidden] { display: none; }
.instawerk-lb-inner { display: flex; max-width: 1100px; width: 100%; max-height: 100%; background: #fff; color: #333; border-radius: 4px; overflow: hidden; }
.instawerk-lb-media { position: relative; flex: 1 1 62%; background: #000; display: flex; align-items: center; justify-content: center; min-height: 300px; }
.instawerk-lb-media img { max-width: 100%; max-height: 86vh; display: block; }
.instawerk-lb-side { flex: 1 1 38%; padding: 28px; overflow-y: auto; max-height: 86vh; font-size: 15px; line-height: 1.7; }
.instawerk-lb-date { font-size: 12px; text-transform: uppercase; letter-spacing: 2px; opacity: .6; margin-bottom: 12px; }
.instawerk-lb-caption { white-space: pre-line; margin: 0 0 20px; }
/* Die Lightbox hängt direkt am <body>, außerhalb von .instawerk – Theme-Styles für button/a greifen hier
   genauso. Alle Bedienelemente daher mit .instawerk-lb davor und Hover/Fokus ausdrücklich. */
.instawerk-lb .instawerk-lb-close { position: absolute; top: 12px; right: 16px; margin: 0; padding: 0 6px; background: none; border: 0; box-shadow: none;
	color: #fff; font-size: 36px; font-weight: 300; cursor: pointer; line-height: 1; }
.instawerk-lb .instawerk-lb-close:hover, .instawerk-lb .instawerk-lb-close:focus, .instawerk-lb .instawerk-lb-close:focus-visible { background: none; border: 0; color: #fff; opacity: .75; }
.instawerk-lb .instawerk-lb-arrow { position: absolute; top: 50%; transform: translateY(-50%); margin: 0; padding: 0; background: rgba(255,255,255,.85); border: 0;
	box-shadow: none; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; color: #222; font-size: 22px; font-weight: 400; line-height: 1; }
.instawerk-lb .instawerk-lb-arrow:hover, .instawerk-lb .instawerk-lb-arrow:focus, .instawerk-lb .instawerk-lb-arrow:focus-visible { background: #fff; border: 0; color: #000; }
.instawerk-lb-arrow--prev { left: 10px; } .instawerk-lb-arrow--next { right: 10px; }
.instawerk-lb a.instawerk-lb-video, .instawerk-lb a.instawerk-lb-video:hover, .instawerk-lb a.instawerk-lb-video:focus { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	text-decoration: none; background: rgba(0,0,0,.35); color: #fff; flex-direction: column; gap: 8px; font-size: 14px; letter-spacing: 1px; }
.instawerk-lb a.instawerk-lb-video:hover { background: rgba(0,0,0,.2); }
.instawerk-lb-video .instawerk-icon { font-size: 72px; }
.instawerk-lb-dots { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; color: #fff; font-size: 12px; }
.instawerk-lb a.instawerk-btn { color: var(--instawerk-accent); text-decoration: none; }
.instawerk-lb a.instawerk-btn:hover, .instawerk-lb a.instawerk-btn:focus, .instawerk-lb a.instawerk-btn:focus-visible { color: #fff; text-decoration: none; }

.instawerk-admin-hint { padding: 12px 16px; border: 1px dashed #c00; color: #a00; font-size: 14px; }

@media (max-width: 1024px) {
	.instawerk-items { grid-template-columns: repeat(var(--instawerk-cols-t), minmax(0, 1fr)); }
	.instawerk--masonry .instawerk-items { columns: var(--instawerk-cols-t); }
	.instawerk--carousel .instawerk-item { flex-basis: calc((100% - (var(--instawerk-cols-t) - 1) * var(--instawerk-gap)) / var(--instawerk-cols-t)); }
}
@media (max-width: 640px) {
	.instawerk-items { grid-template-columns: repeat(var(--instawerk-cols-m), minmax(0, 1fr)); }
	.instawerk--masonry .instawerk-items { columns: var(--instawerk-cols-m); }
	.instawerk--carousel .instawerk-item { flex-basis: calc((100% - (var(--instawerk-cols-m) - 1) * var(--instawerk-gap)) / var(--instawerk-cols-m) - 24px); }
	.instawerk-header { gap: 14px; }
	.instawerk-avatar img { width: 56px; height: 56px; }
	.instawerk .instawerk-nav { display: none; }
	.instawerk-lb { padding: 0; }
	.instawerk-lb-inner { flex-direction: column; max-height: 100vh; height: 100%; border-radius: 0; }
	.instawerk-lb-media { flex: 0 0 auto; }
	.instawerk-lb-media img { max-height: 60vh; }
	.instawerk-lb-side { max-height: none; flex: 1 1 auto; padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
	.instawerk-media img, .instawerk-btn { transition: none; }
	.instawerk--carousel .instawerk-items { scroll-behavior: auto; }
}