/* ============================================================
   SEITEN & TEASER — Referenz-Bereiche

   Kommt mit dem Ausbau von einem Kanal (Social) auf drei
   (Webdesign, Social Media, Fotografie). Die Startseite zeigt
   die Bereiche nur noch an; die Cases selbst liegen auf
   eigenen Seiten unter /referenzen/.

   Haelt sich an die Regeln aus bento.css: gleich grosse
   Kacheln, Hervorhebung ueber Farbe statt Groesse, beim Hover
   Farbwechsel statt huepfender Karten.
   ============================================================ */

/* ============================================================
   1. TEASER-KACHELN (Startseite)
   ============================================================ */

.ref-teaser {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}
@media (min-width: 720px)  { .ref-teaser { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .ref-teaser { grid-template-columns: repeat(3, 1fr); } }

.ref-tile {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border-radius: var(--radius);
	background: rgba(255, 255, 255, 0.72);
	border: 1px solid rgba(0, 0, 0, 0.09);
	text-decoration: none;
	color: inherit;
	transition: background-color 200ms ease, border-color 200ms ease;
}
.ref-tile:hover,
.ref-tile:focus-visible {
	background: #fff;
	border-color: rgba(0, 0, 0, 0.2);
}
.ref-tile:focus-visible {
	outline: 2px solid var(--accent-deep);
	outline-offset: 3px;
}

/* ---------- Medienflaeche ---------- */
/* Dunkel, damit die drei Kacheln gleich schwer wirken — auch die
   beiden, die (noch) kein Foto tragen, sondern eine gezeichnete
   Andeutung. Eine leere helle Flaeche sieht sonst nach Luecke aus. */
.ref-tile__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--ink);
	overflow: hidden;
	flex: none;
}
.ref-tile__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 600ms var(--ease-out);
}
.ref-tile:hover .ref-tile__media img { transform: scale(1.04); }

.ref-tile__play {
	position: absolute;
	right: 14px;
	bottom: 14px;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--accent);
	color: #000;
	box-shadow: 0 0 24px var(--accent-glow);
}

/* ---------- Textteil ---------- */
.ref-tile__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px 24px 26px;
	flex: 1;
}
.ref-tile__tag {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.62);
}
.ref-tile__tag .dot {
	width: 5px; height: 5px;
	border-radius: 50%;
	background: var(--accent-deep);
	flex: none;
}
.ref-tile__title {
	margin: 2px 0 0;
	font-size: clamp(22px, 1.7vw, 28px);
	line-height: 1.12;
	letter-spacing: -0.02em;
}
.ref-tile__text {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: rgba(0, 0, 0, 0.68);
}
/* Der Link-Hinweis sitzt immer unten, damit die drei Kacheln trotz
   unterschiedlich langer Texte auf einer Linie abschliessen. */
.ref-tile__link {
	margin-top: auto;
	padding-top: 14px;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	font-weight: 700;
}
.ref-tile__link .arrow {
	display: inline-grid;
	place-items: center;
	width: 26px; height: 26px;
	border-radius: 50%;
	background: var(--ink);
	color: #fff;
	transition: transform 220ms var(--ease-out), background-color 220ms ease;
}
.ref-tile:hover .ref-tile__link .arrow {
	transform: translateX(3px);
	background: var(--accent-deep);
	color: #000;
}

/* ============================================================
   2. GEZEICHNETE PLATZHALTER
   Stehen dort, wo noch kein Bildmaterial existiert. Bewusst als
   Zeichnung erkennbar — ein hochskaliertes Platzhalterfoto waere
   die schlechtere Luege.
   ============================================================ */

.ref-tile__media--mock {
	display: grid;
	place-items: center;
	padding: 26px;
	background:
		radial-gradient(120% 90% at 50% 0%, rgba(0, 255, 0, 0.16), transparent 62%),
		var(--ink);
}

/* ---------- Browserfenster (Webdesign) ---------- */
.mock-browser {
	width: 100%;
	border-radius: 10px;
	background: #151513;
	border: 1px solid rgba(255, 255, 255, 0.12);
	overflow: hidden;
}
.mock-browser__bar {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 9px 11px;
	background: rgba(255, 255, 255, 0.06);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mock-browser__bar i {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.22);
}
.mock-browser__bar i:first-child { background: var(--accent); }
.mock-browser__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px 14px 18px;
}
.mock-line {
	height: 7px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.16);
	width: 62%;
}
.mock-line--xl { height: 13px; width: 84%; background: rgba(255, 255, 255, 0.34); }
.mock-line--lg { width: 72%; }
.mock-blocks {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 7px;
	margin-top: 6px;
}
.mock-blocks span {
	aspect-ratio: 1 / 1;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.1);
}
.mock-blocks span:first-child {
	background: rgba(0, 255, 0, 0.5);
}

/* ---------- Kontaktbogen (Fotografie) ---------- */
.mock-contact {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 7px;
	width: 100%;
}
.mock-contact > span {
	aspect-ratio: 3 / 4;
	border-radius: 5px;
	background: rgba(255, 255, 255, 0.11);
}
.mock-contact > span:nth-child(2) { background: rgba(255, 255, 255, 0.2); }
.mock-contact > span:nth-child(6) { background: rgba(255, 255, 255, 0.16); }

.mock-aperture {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 46px; height: 46px;
	border-radius: 50%;
	border: 3px solid var(--accent);
	box-shadow: 0 0 26px var(--accent-glow);
	background: rgba(10, 10, 10, 0.72);
}
.mock-aperture::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 16px; height: 16px;
	border-radius: 50%;
	background: var(--accent);
}

/* ============================================================
   3. SEITENKOPF (Referenz-Unterseiten)
   Kein zweiter Hero mit Scroll-Pin — die Unterseiten sollen
   sofort zum Inhalt kommen, nicht die Startseite imitieren.
   ============================================================ */

.page-hero {
	padding-top: clamp(130px, 16vh, 190px);
	padding-bottom: clamp(40px, 6vw, 70px);
}
.page-hero__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink-mute);
	text-decoration: none;
	margin-bottom: 22px;
	transition: color 180ms ease;
}
.page-hero__back:hover { color: var(--ink); }
.page-hero__back svg { transform: rotate(180deg); }

.page-hero h1 {
	margin: 22px 0 0;
	font-size: clamp(40px, 6.4vw, 86px);
	line-height: 0.98;
	letter-spacing: -0.035em;
}
.page-hero .lead { margin-top: 26px; }

.page-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	margin-top: 30px;
	padding-top: 24px;
	border-top: 1px solid var(--line);
	font-size: 14px;
	color: var(--ink-soft);
}
.page-hero__meta b {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-mute);
	margin-bottom: 3px;
}

/* ---------- Bereichs-Umschalter ---------- */
/* Liegt auf jeder Referenzseite. Wer auf einem Bereich landet,
   soll die anderen beiden sehen, ohne zurueck zur Startseite zu
   muessen. */
.ref-switch {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 34px;
}
.ref-switch a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border-radius: 999px;
	border: 1px solid var(--line-strong);
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	color: var(--ink);
	background: rgba(255, 255, 255, 0.6);
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.ref-switch a:hover { background: #fff; border-color: var(--ink); }
.ref-switch a[aria-current="page"] {
	background: var(--ink);
	border-color: var(--ink);
	color: #fff;
}
.ref-switch a[aria-current="page"] .dot { background: var(--accent); }
.ref-switch .dot {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--accent-deep);
	flex: none;
}

/* ============================================================
   4. CASE-LISTE (Webdesign & Fotografie)
   Abwechselnd Bild links / rechts. Auf schmalen Viewports
   stapelt es; das Bild bleibt dabei immer ueber dem Text.
   ============================================================ */

.case-list {
	display: flex;
	flex-direction: column;
	gap: clamp(44px, 6vw, 86px);
}
.case-item {
	display: grid;
	grid-template-columns: 1fr;
	gap: 26px;
	align-items: center;
}
@media (min-width: 900px) {
	.case-item { grid-template-columns: 1.05fr 1fr; gap: clamp(36px, 4vw, 68px); }
	.case-item:nth-child(even) .case-item__media { order: 2; }
}

.case-item__media {
	position: relative;
	aspect-ratio: 16 / 11;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--ink);
	display: grid;
	place-items: center;
	padding: 30px;
}
.case-item__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}
.case-item__body { min-width: 0; }
.case-item__title {
	margin: 14px 0 0;
	font-size: clamp(26px, 2.6vw, 40px);
	line-height: 1.08;
	letter-spacing: -0.025em;
}
.case-item__text {
	margin: 16px 0 0;
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--ink-soft);
	max-width: 52ch;
}
.case-item__metrics {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid var(--line);
}
.case-item__metrics .v {
	font-size: clamp(22px, 2vw, 30px);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
}
.case-item__metrics .l {
	margin-top: 5px;
	font-size: 12.5px;
	color: var(--ink-mute);
}

/* Platzhalter-Zustand, solange noch kein Projekt eingetragen ist */
.case-item.is-placeholder .case-item__title,
.case-item.is-placeholder .case-item__text { color: var(--ink-mute); }

/* ============================================================
   5. FOTO-RASTER + GALERIE-HINWEIS
   ============================================================ */

.photo-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}
@media (min-width: 760px)  { .photo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .photo-grid { grid-template-columns: repeat(4, 1fr); } }

.photo-grid figure {
	margin: 0;
	position: relative;
	aspect-ratio: 3 / 4;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--ink);
	display: grid;
	place-items: center;
}
/* Jede dritte Kachel quer — bricht das starre Raster auf, ohne dass
   dafuer Bildmasse bekannt sein muessen. */
.photo-grid figure:nth-child(3n) { aspect-ratio: 4 / 3; }
.photo-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }

.photo-grid .mock-aperture { position: static; margin: 0; width: 34px; height: 34px; }

.gallery-note {
	display: grid;
	grid-template-columns: 1fr;
	gap: 22px;
	align-items: center;
	margin-top: clamp(40px, 5vw, 70px);
	padding: clamp(26px, 3.4vw, 44px);
	border-radius: var(--radius-lg);
	background: var(--ink);
	color: #fff;
}
@media (min-width: 860px) { .gallery-note { grid-template-columns: 1.4fr auto; } }

.gallery-note h3 {
	margin: 12px 0 0;
	font-size: clamp(24px, 2.4vw, 36px);
	line-height: 1.1;
	letter-spacing: -0.02em;
}
.gallery-note p {
	margin: 12px 0 0;
	color: rgba(255, 255, 255, 0.72);
	font-size: 15px;
	line-height: 1.6;
	max-width: 54ch;
}
.gallery-note .lst-card__tag { color: rgba(255, 255, 255, 0.6); }
.gallery-note .lst-card__tag .dot { background: var(--accent); }

/* ============================================================
   6. BEREICHS-UEBERSICHT (/referenzen/)
   Nutzt dieselben Kacheln wie die Startseite, nur grosszuegiger.
   ============================================================ */

@media (min-width: 1040px) {
	.ref-teaser--index .ref-tile__media { aspect-ratio: 16 / 11; }
	.ref-teaser--index .ref-tile__body { padding: 28px 28px 30px; }
}

/* ============================================================
   7. ABLAUF-SCHRITTE
   Steht auf der Fotografie-Seite anstelle eines Bildrasters:
   solange keine freigegebenen Shooting-Bilder existieren, traegt
   der Ablauf die Seite inhaltlich. Das Raster (.photo-grid)
   bleibt vorbereitet und zieht darueber ein, sobald Bilder da sind.
   ============================================================ */

.steps {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	counter-reset: step;
}
@media (min-width: 680px)  { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .steps { grid-template-columns: repeat(4, 1fr); } }

.step {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 9px;
	min-width: 0;
	padding: 26px 24px 28px;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.72);
	border: 1px solid rgba(0, 0, 0, 0.09);
	transition: background-color 200ms ease, border-color 200ms ease;
}
.step:hover { background: #fff; border-color: rgba(0, 0, 0, 0.2); }

.step__n {
	display: inline-grid;
	place-items: center;
	width: 30px; height: 30px;
	border-radius: 50%;
	background: var(--ink);
	color: var(--accent);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0;
}
.step__title {
	margin: 4px 0 0;
	font-size: clamp(18px, 1.3vw, 21px);
	line-height: 1.2;
	letter-spacing: -0.01em;
}
.step__text {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: rgba(0, 0, 0, 0.68);
}

/* ---------- Kontrast im gezeichneten Kontaktbogen ---------- */
/* Die Flaechen lagen bei 11 % Weiss auf fast schwarzem Grund und waren
   auf normalen Displays praktisch unsichtbar — die Kachel las sich als
   schwarzes Loch statt als Andeutung eines Kontaktbogens. */
.mock-contact > span { background: rgba(255, 255, 255, 0.2); }
.mock-contact > span:nth-child(2) { background: rgba(255, 255, 255, 0.34); }
.mock-contact > span:nth-child(4) { background: rgba(255, 255, 255, 0.14); }
.mock-contact > span:nth-child(6) { background: rgba(255, 255, 255, 0.28); }

/* Blende skaliert mit der Kachel, statt als 46px-Punkt zu verschwinden */
.mock-aperture { width: clamp(38px, 26%, 64px); height: clamp(38px, 26%, 64px); aspect-ratio: 1; }
.photo-grid .mock-aperture { position: static; margin: 0; width: clamp(30px, 22%, 48px); height: auto; }
.photo-grid figure {
	background:
		radial-gradient(120% 90% at 50% 0%, rgba(0, 255, 0, 0.14), transparent 62%),
		var(--ink);
}

/* ============================================================
   8. VORSTELLUNGS-SEKTION VERTIKAL AUSRICHTEN

   styles.css setzt fuer .about-agency `align-items: start`.
   Solange links ein langer Text stand, waren beide Spalten
   aehnlich hoch. Seit die Ueberschrift kurz und der Text
   knapp ist, klebten beide oben und standen unterschiedlich
   hoch im Raster. Zentriert stehen sie auf einer Mittelachse.

   Als Override hier, damit styles.css unveraendert aus dem
   CMS uebernommen bleibt.
   ============================================================ */

.about-agency { align-items: center; }

/* ============================================================
   9. LEISTUNGS-UEBERSICHT (Bento)

   Loest das Karten-Raster auf der Startseite ab: drei Flaechen
   statt dreizehn Karten. Links Webdesign ueber die volle Hoehe,
   rechts Fotografie und Social Media gestapelt.

   Die Einzelleistungen erscheinen beim Hover. Wichtig: Auf
   Touch-Geraeten gibt es kein Hover — dort stehen sie deshalb
   dauerhaft sichtbar (siehe @media (hover: hover) unten).
   Andernfalls waeren sie am Telefon gar nicht erreichbar.
   ============================================================ */

.svc-bento {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}
@media (min-width: 900px) {
	.svc-bento {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: repeat(2, minmax(250px, 1fr));
		min-height: 580px;
	}
	/* Webdesign steht ueber beide Zeilen — es ist das Hauptgeschaeft. */
	.svc-tile--web { grid-row: 1 / span 2; }
}

.svc-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	/* Inhalt sitzt unten: die Kachel traegt ihren Namen wie ein Sockel,
	   darueber bleibt Luft. */
	justify-content: flex-end;
	gap: 24px;
	min-width: 0;
	padding: 28px 28px 30px;
	border-radius: var(--radius);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	background: rgba(255, 255, 255, 0.72);
	border: 1px solid rgba(0, 0, 0, 0.09);
	transition: background-color 220ms ease, border-color 220ms ease;
}
.svc-tile:hover { background: #fff; border-color: rgba(0, 0, 0, 0.2); }
.svc-tile:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; }

/* Webdesign dunkel — dieselbe Logik wie .lst-card.is-highlight:
   Hervorhebung ueber Farbe, nicht ueber Schriftgroesse. */
.svc-tile--web {
	background: var(--ink);
	border-color: transparent;
	color: #fff;
	padding: 34px 34px 36px;
	background-image: radial-gradient(120% 80% at 0% 100%, rgba(0, 255, 0, 0.18), transparent 60%);
}
.svc-tile--web:hover { background-color: #1b1b19; border-color: transparent; }


.svc-tile__foot { display: flex; flex-direction: column; gap: 14px; }

.svc-tile__title {
	margin: 0;
	font-size: clamp(30px, 3.4vw, 46px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.035em;
}
.svc-tile--web .svc-tile__title { font-size: clamp(36px, 4.6vw, 64px); }

/* ---------- Einzelleistungen ---------- */
.svc-tile__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.svc-tile__list li {
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	background: rgba(0, 0, 0, 0.06);
	color: var(--ink-soft);
}
.svc-tile--web .svc-tile__list li {
	background: rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.86);
}

.svc-tile__link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	font-weight: 700;
}
.svc-tile__link .arrow {
	display: inline-grid;
	place-items: center;
	width: 26px; height: 26px;
	border-radius: 50%;
	background: var(--ink);
	color: #fff;
	transition: transform 220ms var(--ease-out), background-color 220ms ease;
}
.svc-tile--web .svc-tile__link .arrow { background: var(--accent); color: #000; }
.svc-tile:hover .svc-tile__link .arrow { transform: translateX(3px); }
.svc-tile:not(.svc-tile--web):hover .svc-tile__link .arrow { background: var(--accent-deep); color: #000; }

/* ---------- Nur wo es echtes Hover gibt: erst beim Ueberfahren ---------- */
/* Der reservierte Platz bleibt erhalten (kein Layoutsprung), es wird
   lediglich ein- und ausgeblendet. */
@media (hover: hover) and (pointer: fine) {
	.svc-tile__list,
	.svc-tile__link {
		opacity: 0;
		transform: translateY(8px);
		transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out);
	}
	.svc-tile__link { transition-delay: 60ms; }
	.svc-tile:hover .svc-tile__list,
	.svc-tile:hover .svc-tile__link,
	.svc-tile:focus-visible .svc-tile__list,
	.svc-tile:focus-visible .svc-tile__link {
		opacity: 1;
		transform: none;
	}
}

/* Wer Bewegung reduziert haben will, bekommt alles ohne Einblenden. */
@media (prefers-reduced-motion: reduce) {
	.svc-tile__list,
	.svc-tile__link { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   10. MOTIVE IN DEN LEISTUNGS-KACHELN

   Die drei Flaechen waren reine Farbe. Jede bekommt jetzt eine
   gezeichnete Andeutung ihres Bereichs: ein Browserfenster, eine
   Blende, ein Stapel Reels. Angeschnitten am Rand, im Ruhezustand
   sehr zurueckhaltend — beim Ueberfahren ruecken sie naeher und
   werden kraeftiger.

   Alles aus CSS-Formen, ohne zusaetzliche Bilddateien: Die
   Startseite laedt ohnehin schon drei Videos.
   ============================================================ */

.svc-art {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}
/* Inhalt der Kachel liegt darueber */
.svc-tile > *:not(.svc-art) { position: relative; z-index: 1; }

/* ---------- Webdesign: Browserfenster ---------- */
.art-win {
	position: absolute;
	right: -60px;
	top: 46px;
	width: 300px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.14);
	overflow: hidden;
	transform: rotate(-7deg);
	transition: transform 520ms var(--ease-out), opacity 420ms ease;
	opacity: 0.85;
}
.art-win__bar {
	display: flex;
	gap: 5px;
	padding: 9px 11px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.art-win__bar i {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.28);
}
.art-win__bar i:first-child { background: var(--accent); }
.art-win__body { padding: 16px 14px 20px; display: flex; flex-direction: column; gap: 9px; }
.art-row {
	height: 8px;
	width: 58%;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.16);
}
.art-row--wide { width: 82%; height: 12px; background: rgba(255, 255, 255, 0.26); }
.art-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
.art-cols b { height: 54px; border-radius: 7px; background: rgba(255, 255, 255, 0.1); }
.art-cols b:first-child { background: rgba(0, 255, 0, 0.42); }

.svc-tile--web:hover .art-win { transform: rotate(-4deg) translate(-16px, -6px); opacity: 1; }


/* ---------- Social Media: Stapel aus Reels ---------- */
.svc-art--social { right: 0; }
.art-reel {
	position: absolute;
	top: 50%;
	width: 108px;
	height: 192px;
	border-radius: 14px;
	background: rgba(10, 10, 10, 0.05);
	border: 1px solid rgba(10, 10, 10, 0.08);
	transform-origin: bottom center;
	transition: transform 520ms var(--ease-out), background-color 420ms ease;
	display: grid;
	place-items: center;
	color: rgba(10, 10, 10, 0.25);
}
.art-reel:nth-child(1) { right: 96px; margin-top: -110px; transform: rotate(-11deg); }
.art-reel:nth-child(2) { right: 34px; margin-top: -102px; transform: rotate(-3deg); }
.art-reel--front      { right: -28px; margin-top: -96px; transform: rotate(6deg); }

.svc-tile--social:hover .art-reel:nth-child(1) { transform: rotate(-17deg) translate(-14px, -6px); }
.svc-tile--social:hover .art-reel:nth-child(2) { transform: rotate(-6deg) translateY(-4px); }
.svc-tile--social:hover .art-reel--front {
	transform: rotate(10deg) translate(10px, -8px);
	background: rgba(0, 209, 0, 0.16);
	color: var(--accent-deep);
}

/* Auf schmalen Kacheln wuerden die Motive den Text ueberlagern. */
@media (max-width: 620px) {
	.art-win  { right: -120px; width: 240px; }
	.art-cam { right: 6px; width: 132px; height: 132px; margin-top: -66px; }
	.art-reel:nth-child(1) { right: 40px; }
	.art-reel:nth-child(2) { right: -10px; }
	.art-reel--front       { right: -60px; }
}

/* Ohne Bewegungswunsch: Motive bleiben, aber ruhig. */
@media (prefers-reduced-motion: reduce) {
	.art-win, .art-cam, .art-reel { transition: none; }
	.svc-tile:hover .art-win,
	.svc-tile:hover .art-cam,
	.svc-tile:hover .art-reel { transform: none; }
}

/* ============================================================
   11. LEBEN IN DEN KACHELN
   Lichtkegel am Zeiger, Tiefe durch Parallax, ein echtes Reel
   und Motive, die auch ohne Maus leise in Bewegung sind.
   Die Positionen --mx/--my liefert tiles.js.
   ============================================================ */

/* ---------- Lichtkegel, der dem Zeiger folgt ---------- */
.svc-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity 300ms ease;
	background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
		rgba(0, 209, 0, 0.16), transparent 62%);
}
.svc-tile--web::after {
	background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%),
		rgba(0, 255, 0, 0.22), transparent 64%);
}
.svc-tile:hover::after { opacity: 1; }

/* Das Motiv folgt der Maus verzoegert (Transform kommt aus dem Skript). */
.svc-art { transition: transform 420ms var(--ease-out); will-change: transform; }

/* ---------- Ruhezustand: leise Bewegung ---------- */
@keyframes tile-float {
	0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
	50%      { transform: translateY(-9px) rotate(var(--rot, 0deg)); }
}
@keyframes tile-breathe {
	0%, 100% { transform: rotate(0deg) scale(1); }
	50%      { transform: rotate(9deg) scale(1.03); }
}
@keyframes caret-blink {
	0%, 45%   { opacity: 1; }
	50%, 95%  { opacity: 0; }
	100%      { opacity: 1; }
}
@keyframes row-type {
	0%   { width: 12%; }
	60%  { width: 58%; }
	100% { width: 58%; }
}

/* Browserfenster schwebt, eine Zeile tippt sich, der Cursor blinkt */
.art-win { --rot: -7deg; animation: tile-float 7s ease-in-out infinite; }
.svc-tile--web:hover .art-win { animation-play-state: paused; }
.art-caret {
	width: 9px;
	height: 14px;
	border-radius: 2px;
	background: var(--accent);
	animation: caret-blink 1.15s steps(1, end) infinite;
}
.art-win__body .art-row:nth-of-type(2) { animation: row-type 4.5s ease-in-out infinite; }


/* Reel-Karten schweben leicht versetzt */
.art-reel:nth-child(1) { --rot: -11deg; animation: tile-float 6.5s ease-in-out infinite; }
.art-reel:nth-child(2) { --rot: -3deg;  animation: tile-float 6.5s ease-in-out -2.2s infinite; }
.art-reel--front       { --rot: 6deg;   animation: tile-float 6.5s ease-in-out -4.4s infinite; }
.svc-tile--social:hover .art-reel { animation-play-state: paused; }

/* ---------- Das echte Reel in der vordersten Karte ---------- */
.art-reel--front {
	overflow: hidden;
	background: #0d0d0c;
	border-color: rgba(10, 10, 10, 0.16);
	box-shadow: 0 18px 40px rgba(10, 10, 10, 0.16);
}
.art-reel__vid {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.55;
	transition: opacity 420ms ease;
}
.svc-tile--social:hover .art-reel__vid { opacity: 1; }

.art-reel__play {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 34px; height: 34px;
	border-radius: 50%;
	background: var(--accent);
	color: #000;
	padding-left: 2px;
	box-shadow: 0 0 22px var(--accent-glow);
	transition: transform 300ms var(--ease-spring), opacity 300ms ease;
}
.svc-tile--social:hover .art-reel__play { transform: scale(1.12); }

/* Die hinteren Karten werden beim Hover dunkler, damit das Video vorn traegt */
.svc-tile--social:hover .art-reel:nth-child(1),
.svc-tile--social:hover .art-reel:nth-child(2) { background: rgba(10, 10, 10, 0.1); }

/* ---------- Ohne Bewegungswunsch: alles steht ---------- */
@media (prefers-reduced-motion: reduce) {
	.art-win, .art-cam, .art-reel, .art-caret,
	.art-win__body .art-row:nth-of-type(2) { animation: none; }
	.svc-tile::after { transition: none; }
}

/* ---------- Motiv und Text kommen sich nicht ins Gehege ----------
   Beim Ueberfahren klappen Chips und Link auf und liefen vorher in
   das Motiv hinein. Der Text bekommt in den schmalen Kacheln
   deshalb eine Obergrenze. */
@media (min-width: 900px) {
	.svc-tile--foto .svc-tile__list,
	.svc-tile--social .svc-tile__list { max-width: 64%; }
	.svc-tile--foto .svc-tile__title,
	.svc-tile--social .svc-tile__title { max-width: 70%; }
}

/* ============================================================
   12. FOTOGRAFIE: DIE IRISBLENDE

   Gleiche Tonlage wie die beiden anderen Motive. Die Blende war
   mit 86 % Schwarz gefuellt, waehrend Browserfenster und Reel-
   Stapel bei 5–20 % liegen — sie sprang aus der Reihe, wanderte
   als einziges Motiv beim Ueberfahren und liess die ganze Kachel
   aufblitzen. Jetzt liegt sie ruhig rechts, in derselben Dichte
   wie die Nachbarn, und bewegt nur das, was sie ausmacht: die
   Lamellen.

   Form und Fugen rechnet tiles.js pro Bild neu.
   ============================================================ */

.art-cam {
	position: absolute;
	right: 34px;
	top: 50%;
	margin-top: -84px;      /* halbe Hoehe — mittig ohne transform */
	width: 168px;
	height: 168px;
	overflow: visible;
}

/* Jede Lamelle eine eigene Flaeche, dieselbe Dichte wie .art-win
   und .art-reel. Der Rand in Kachelfarbe erzeugt die Fuge zum
   Nachbarn — zwei Lamellen stossen also nie aneinander. */
.iris-blade {
	fill: rgba(10, 10, 10, 0.16);
	stroke: #fbfaf8;
	stroke-width: 3;
	stroke-linejoin: round;
	stroke-linecap: round;
	transition: fill 420ms ease;
}
.svc-tile--foto:hover .iris-blade { fill: rgba(10, 10, 10, 0.24); }