/* Polygrafie-Bereich – nachgebaut nach dem Original (/neu/, 2013) */

@font-face { font-family: 'Yanone Kaffeesatz'; src: url('/fonts/yanone-kaffeesatz-300.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Yanone Kaffeesatz'; src: url('/fonts/yanone-kaffeesatz-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
    --pink: #fdecf8;
    --grey: #666;
    --sans: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Geneva, sans-serif;
    --text: Tahoma, Geneva, Verdana, sans-serif;
    --label: 'Yanone Kaffeesatz', 'Arial Narrow', sans-serif;
    --dots: 1px dotted #000;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: #000; font: 12px/1.3 var(--sans); }
body.poly-overview, body.poly-intro { background: var(--pink); }
a { color: #000; }
a:hover { color: var(--grey); text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
ul { list-style: none; margin: 0; padding: 0; }
p { margin: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.page { position: relative; width: 838px; max-width: calc(100% - 24px); margin: 0 0 40px 60px; }

/* ------------------------------------------------------------ Kopf */
.poly-header { position: relative; height: 139px; border-bottom: var(--dots); margin-bottom: 22px; }
.poly-logo { position: absolute; left: 10px; top: 22px; width: 110px; }
.poly-logo .hover, .poly-tile .hover, .intro-link .hover { position: absolute; inset: 0; opacity: 0; }
.poly-logo:hover .hover, .poly-tile:hover .hover, .poly-tile:focus-visible .hover,
.intro-link:hover .hover, .intro-link:focus-visible .hover { opacity: 1; }
.poly-switch, .poly-nav { font: 400 30px/1 var(--label); }
.poly-nav { font-size: 26px; }
.poly-switch { position: absolute; left: 130px; top: 26px; display: flex; gap: 9px; }
.poly-nav { position: absolute; right: 0; bottom: 12px; display: flex; gap: 9px; }
.poly-switch a, .poly-nav a { text-decoration: none; }

/* ------------------------------------------------------------ Übersicht */
.poly-grid { display: grid; grid-template-columns: repeat(4, 201px); gap: 12px 7px; padding-left: 5px; margin-top: -10px; }
.poly-tile { position: relative; display: block; }

/* ------------------------------------------------------------ Detail */
.poly-work { position: relative; }
.poly-arrow { position: absolute; top: 54px; width: 40px; height: 40px; background: center / 51px 51px no-repeat; }
.poly-arrow.prev { left: -60px; background-image: url(/images/polygrafie/pfeil-links.gif); }
.poly-arrow.next { right: -62px; background-image: url(/images/polygrafie/pfeil-rechts.gif); }
.poly-arrow.prev:hover { background-image: url(/images/polygrafie/pfeil-links-grau.gif); }
.poly-arrow.next:hover { background-image: url(/images/polygrafie/pfeil-rechts-grau.gif); }

.poly-images { display: flex; flex-wrap: wrap; justify-content: space-between; row-gap: 20px; }
.poly-images img.voll { width: 100%; }
.poly-images img.halb { width: calc(50% - 15px); }

.poly-text { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; margin-top: 16px; }
.poly-text h1 { grid-column: 1 / -1; margin: 0 0 18px; font: 24px/1.2 var(--sans); font-weight: normal; }
.poly-body { grid-column: 1 / -1; columns: 2; column-gap: 40px; font: 16px/22px var(--text); }
.poly-body p { margin: 0 0 22px; }
.poly-label { grid-column: 1; align-self: end; font: 400 32px/1 var(--label); padding: 0 0 4px 3px; }
.credits { grid-column: 2; margin-top: 10px; font: 12px/14px var(--text); }
.credits li { padding: 6px 0; border-bottom: var(--dots); }
.credits li:first-child { border-top: var(--dots); }

/* ------------------------------------------------------------ Biografie / Kontakt */
.poly-bio, .poly-contact { display: grid; column-gap: 40px; align-items: start; }
.poly-bio { grid-template-columns: 244px 275px 1fr; padding-top: 15px; }
.poly-contact { grid-template-columns: 286px 275px 1fr; }
.poly-copy { font: 16px/22px var(--text); }
.poly-copy p { margin: 0 0 22px; }
.poly-skills { text-align: right; font: 26px/28px var(--sans); }
.poly-links { padding-top: 2px; }
.poly-links p { margin-bottom: 18px; }
.poly-links li { display: grid; grid-template-columns: 84px 1fr; align-items: center; height: 18px; }
.poly-links a { text-decoration: none; }

/* ------------------------------------------------------------ Fuss */
.poly-footer { margin-top: 40px; }
.poly-social { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-bottom: 4px; }
.poly-social a:hover img, .poly-links a:hover img { opacity: .55; }
.poly-footer-line { display: flex; justify-content: space-between; border-top: var(--dots); padding-top: 8px; font: 13px/1 var(--sans); }
.poly-footer-line a { text-decoration: none; }

/* ------------------------------------------------------------ Einstieg (/start) */
.intro { padding-top: 22px; }
.intro-logo { margin-left: 10px; width: 112px; }
.intro-links { margin: 40px 0 0 172px; display: grid; gap: 24px; }
.intro-link { position: relative; display: block; width: 594px; max-width: 100%; }

/* ------------------------------------------------------------ Mobile */
@media (max-width: 960px) {
    .page { margin: 0 12px 30px; width: auto; max-width: none; }
    .poly-arrow.prev { left: 0; }
    .poly-arrow.next { right: 0; }
    .poly-arrow { top: 8px; opacity: .85; }
}
@media (max-width: 700px) {
    .poly-header { height: auto; padding: 12px 0 10px; display: grid; grid-template-columns: 80px 1fr; row-gap: 10px; }
    .poly-logo, .poly-switch, .poly-nav { position: static; }
    .poly-logo { width: 70px; grid-row: span 2; }
    .poly-switch, .poly-nav { font-size: 24px; }
    .poly-nav { justify-content: flex-end; }
    .poly-grid { grid-template-columns: repeat(2, 1fr); padding-left: 0; }
    .poly-images img.halb { width: 100%; }
    .poly-text, .poly-bio, .poly-contact { display: block; }
    .poly-body { columns: 1; }
    .poly-label { margin: 10px 0; }
    .poly-photo { margin: 20px 0; max-width: 275px; }
    .poly-skills { text-align: left; font-size: 20px; line-height: 24px; }
    .poly-footer-line { flex-wrap: wrap; gap: 8px; font-size: 12px; }
    .intro-links { margin: 30px 0 0; }
}