/* Ratisbona: Visitenkarte "Goldschnitt"
   Das R im Logo ist unten rechts schräg angeschnitten. Dieser Schnitt ist das einzige Formelement:
   vergoldet am Porträt, Gold sonst nur an Kanten, Icons und den Punkten der Überschrift.
   Schriften: Saira Condensed (Überschriften, Labels), Archivo (Text), Cormorant Garamond (nur Kontakt und Fuß).
   Layout reagiert per Container Query auf die Breite von .rm-site. */

.rm-site {
	--ink: #F0EDE8;
	--muted: #9C948A;
	--soft: #C9C2B8;
	--acc: #C9A96E;
	--acc-hi: #DCC291;
	--bg: #0C0B0A;
	--bg2: #141210;
	--line: rgba(240, 232, 218, .11);
	--cut: 56px;
	--cut-y: 52px;
	--head: var(--wp--preset--font-family--head);
	--body: var(--wp--preset--font-family--body);
	--serif: var(--wp--preset--font-family--serif);
	container: site / inline-size;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--body);
	-webkit-font-smoothing: antialiased;
}
.rm-site > main { flex: 1 0 auto; }
.rm-site :where(p, h1, h2, h3, ul, ol, figure) { margin: 0; }
.rm-site a:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.rm-site ::selection { background: var(--acc); color: var(--bg); }

.rm-wrap {
	width: 100%;
	max-width: 1160px;
	margin-inline: auto;
	padding-left: max(clamp(20px, 4.6cqi, 60px), env(safe-area-inset-left, 0px));
	padding-right: max(clamp(20px, 4.6cqi, 60px), env(safe-area-inset-right, 0px));
}

/* Kopf: Zeichen, Name, Ort */
.rm-head { display: flex; align-items: center; gap: 16px; padding-top: 24px; }
.rm-brand { display: inline-flex; align-items: center; gap: 16px; color: var(--ink); text-decoration: none; }
.rm-mark { display: block; width: 22px; height: 31px; }
.rm-brand span { font-family: var(--head); font-size: 15px; font-weight: 500; letter-spacing: .36em; text-transform: uppercase; }
.rm-head .rm-where { margin-left: auto; font-family: var(--head); font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; }

.rm-label { font-family: var(--head); font-size: 13px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); }

/* Hauptbereich */
.rm-main {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 280px);
	gap: clamp(28px, 5cqi, 64px);
	align-items: end;
	padding-block: clamp(22px, 2.6cqi, 32px) clamp(22px, 2.2cqi, 28px);
}
.rm-text { display: grid; gap: 16px; align-content: start; }
.rm-site .rm-h1 { font-family: var(--head); font-weight: 600; text-transform: uppercase; letter-spacing: .01em; line-height: .9; font-size: clamp(46px, 6.3cqi, 78px); text-wrap: balance; }
.rm-h1 em { font-style: normal; color: var(--acc); }
.rm-lead { font-size: 16.5px; line-height: 1.6; max-width: 46ch; color: var(--soft); }

/* Leistungen mit Linien-Icons in Gold */
.rm-site .rm-svc {
	list-style: none;
	margin-top: 6px;
	padding: 18px 0 0;
	display: grid;
	grid-template-columns: repeat(3, max-content);
	justify-content: space-between;
	gap: 14px 22px;
	border-top: 1px solid var(--line);
}
.rm-svc li { position: relative; padding-left: 32px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.rm-svc li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1px;
	width: 21px;
	height: 21px;
	background: var(--acc);
	-webkit-mask: center / contain no-repeat;
	mask: center / contain no-repeat;
}
.rm-svc li strong { display: inline-block; font-family: var(--head); font-weight: 600; font-size: 17px; letter-spacing: .045em; text-transform: uppercase; line-height: 1.25; color: var(--ink); }
.rm-svc li.rm-i-website::before { -webkit-mask-image: url(../icons/website.svg); mask-image: url(../icons/website.svg); }
.rm-svc li.rm-i-social::before { -webkit-mask-image: url(../icons/social.svg); mask-image: url(../icons/social.svg); }
.rm-svc li.rm-i-google-ads::before { -webkit-mask-image: url(../icons/google-ads.svg); mask-image: url(../icons/google-ads.svg); }
.rm-svc li.rm-i-video-foto::before { -webkit-mask-image: url(../icons/video-foto.svg); mask-image: url(../icons/video-foto.svg); }
.rm-svc li.rm-i-automation::before { -webkit-mask-image: url(../icons/automation.svg); mask-image: url(../icons/automation.svg); }
.rm-svc li.rm-i-strategie::before { -webkit-mask-image: url(../icons/strategie.svg); mask-image: url(../icons/strategie.svg); }

/* Porträt mit vergoldeter Schnittkante: Gold liegt hinter dem Bild, das Bild ist ein paar Pixel tiefer angeschnitten */
.rm-figure { display: grid; gap: 12px; }
.rm-portrait {
	position: relative;
	aspect-ratio: 4 / 5;
	background: var(--acc);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-y)), calc(100% - var(--cut)) 100%, 0 100%);
}
.rm-portrait .wp-block-image { position: absolute; inset: 0; }
.rm-portrait img {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	object-position: 50% 22%;
	background: #3A3A3A;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-y) - 3px), calc(100% - var(--cut) - 3px) 100%, 0 100%);
}
.rm-caption { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--head); font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.rm-caption strong { color: var(--ink); font-weight: 500; font-size: 14px; }
.rm-caption em { font-style: normal; }

/* Referenzen: Logos einheitlich hell, verlinkt auf die Kunden-Websites */
.rm-refs {
	display: grid;
	grid-template-columns: 104px repeat(5, minmax(0, 1fr));
	gap: 12px 24px;
	align-items: start;
	padding-block: 18px 22px;
	border-top: 1px solid var(--line);
}
.rm-refs > .rm-label { padding-top: 19px; }
.rm-ref { display: grid; gap: 1px; align-content: start; }
.rm-site .rm-ref-logo { height: 54px; margin-bottom: 10px; display: flex; align-items: center; }
.rm-ref-logo a { display: inline-flex; align-items: center; height: 100%; opacity: .86; transition: opacity .2s ease; }
.rm-ref-logo a:hover, .rm-ref-logo a:focus-visible { opacity: 1; }
.rm-ref-logo img { display: block; height: 54px !important; width: auto; max-width: 120px; object-fit: contain; object-position: left center; }
.rm-ref-logo-wide img { height: 24px !important; max-width: 128px; }
.rm-ref-meta { font-family: var(--head); font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; }
.rm-ref-name { font-family: var(--head); font-size: 18px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; line-height: 1.25; }
.rm-ref-text { font-size: 13px; line-height: 1.45; color: var(--muted); }
.rm-ref-text strong { font-weight: 500; color: var(--ink); }

/* Kontakt: hier spricht die Serife */
.rm-cta { background: var(--bg2); border-top: 1px solid var(--line); }
.rm-cta-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 40px; align-items: end; padding-block: 22px 26px; }
.rm-cta-say { grid-column: 1; font-family: var(--serif); font-size: 20px; color: var(--muted); }
.rm-mail { grid-column: 1; }
.rm-mail a {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(26px, 4.4cqi, 54px);
	line-height: 1.05;
	color: var(--acc);
	text-decoration: none;
	overflow-wrap: anywhere;
	background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
	padding-bottom: 4px;
}
.rm-mail a:hover { color: var(--acc-hi); }
.rm-cta-note { grid-column: 2; grid-row: 2; font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--muted); text-align: right; padding-bottom: 8px; }

/* Fuß */
.rm-site > footer { border-top: 1px solid var(--line); }
.rm-foot { font-family: var(--serif); font-size: 16.5px; color: var(--muted); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 26px; padding-block: 14px 18px; }
.rm-foot-nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.rm-foot-nav a { color: var(--soft); text-decoration: none; }
.rm-foot-nav a:hover { color: var(--acc); }
.rm-foot .rm-latin { margin-left: auto; font-style: italic; }

/* Rechtstexte */
.rm-legal { max-width: 1160px; padding-block: clamp(32px, 6cqi, 72px) 72px; }
.rm-legal h1 { font-family: var(--head); font-weight: 600; text-transform: uppercase; letter-spacing: .01em; line-height: .95; font-size: clamp(36px, 5cqi, 56px); margin-bottom: 28px; }
.rm-legal h2 { font-family: var(--head); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: 17px; color: var(--ink); margin: 30px 0 8px; }
.rm-legal p { color: var(--soft); max-width: 68ch; margin: 0 0 12px; line-height: 1.65; }
.rm-legal a { color: var(--acc); }

@container site (max-width: 1060px) {
	.rm-site .rm-svc { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; }
	.rm-refs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 24px; }
	.rm-refs > .rm-label { grid-column: 1 / -1; padding-top: 0; }
}
@container site (max-width: 800px) {
	.rm-main { grid-template-columns: minmax(0, 1fr); gap: 26px; }
	.rm-figure { order: -1; }
	.rm-portrait { aspect-ratio: 16 / 10; }
	.rm-refs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rm-cta-in { grid-template-columns: minmax(0, 1fr); }
	.rm-cta-note { grid-column: 1; grid-row: auto; text-align: left; padding-bottom: 0; margin-top: 6px; }
	.rm-foot .rm-latin { margin-left: 0; }
}
@container site (max-width: 480px) {
	.rm-site { --cut: 40px; --cut-y: 37px; }
	.rm-head { padding-top: 20px; }
	.rm-head .rm-where { display: none; }
	.rm-brand span { font-size: 13.5px; letter-spacing: .3em; }
	.rm-main { padding-block: 20px 22px; gap: 22px; }
	.rm-portrait { aspect-ratio: 3 / 2; }
	.rm-text { gap: 14px; }
	.rm-site .rm-h1 { font-size: 40px; }
	.rm-label { letter-spacing: .2em; font-size: 12px; }
	.rm-lead { font-size: 15px; line-height: 1.55; }
	.rm-site .rm-svc { grid-template-columns: minmax(0, 1fr); gap: 10px; padding-top: 14px; }
	.rm-svc li { padding-left: 30px; font-size: 0; }
	.rm-svc li br { display: none; }
	.rm-svc li strong { font-size: 16px; }
	.rm-refs { gap: 16px 18px; padding-block: 16px 18px; }
	.rm-site .rm-ref-logo { height: 38px; margin-bottom: 8px; }
	.rm-ref-logo img { height: 38px !important; max-width: 96px; }
	.rm-ref-logo-wide img { height: 18px !important; }
	.rm-ref-text { font-size: 12.5px; }
	.rm-cta-in { padding-block: 20px 22px; }
	.rm-cta-say { font-size: 18px; }
	.rm-foot { gap: 4px 20px; }
}
@media (prefers-reduced-motion: reduce) {
	.rm-ref-logo a { transition: none; }
}