/** * @file section/publisher/publisher.css * @location /section/publisher/publisher.css * @description Kontakt & Herausgeber — 3×2 Grid, Navy-Karten auf Navy-Sektion. * Isolierung durch C10-Rahmen + Navy-getönten Schatten. * Prefix: pub__ (alle Selektoren). * * GRID-PLACEMENT (Desktop ≥993px): * [Herausgeber r1c1] [Verlag r1c2] [Anzeigenltg r1c3] * [Abonnenten r2c1] [Layout/Web r2c2] [Anzeigenvkf r2c3] * Mobile (≤992px): flex column, order via --pub-mob. * * FARBEN — COLOR-GUIDE.md (alle ≥ 7:1): * Sektion BG: --color-navy C1 #07003D * Karte BG: --color-navy C1 #07003D * Karte border: --color-ice C10 #ddeaf5 10.31:1 ✓ (dekorativ) * H2: --color-white C2 12.61:1 ✓ * Subtitle: --color-on-dark 8.57:1 ✓ * H5 Titel: --color-white C2 12.61:1 ✓ * H5 Icon: --color-ice C10 10.31:1 ✓ * Company: --color-white C2 12.61:1 ✓ * Body text: --color-on-dark 8.57:1 ✓ * Links: --color-ice C10 10.31:1 ✓ * Link hover: --color-white C2 12.61:1 ✓ * Sub-label: --color-on-dark 8.57:1 ✓ * Sub-name: --color-on-dark 8.57:1 ✓ * * @version 6.0.0 * @changelog * 5.0.0 2026-03-18 Grid-placement. Dunkles Karten-BG #0a2540. * 6.0.0 2026-03-18 COLOR-GUIDE konform: C1 BG + C2/C10/on-dark Texte. * 11/11 Farbpaare ≥ 7:1. */ /* ── Section ─────────────────────────────────────────────────────── */ .pub__section { padding: 60px 0; background: var(--color-navy); /* C1 #07003D */ margin-top: 0; } .pub__inner { max-width: var(--max-content); margin: 0 auto; padding: 0 var(--page-padding-x); } /* ── Header ──────────────────────────────────────────────────────── */ .pub__header { text-align: center; margin-bottom: var(--space-10); } /* C2/C1 12.61:1 ✓ */ .pub__title { font-size: clamp(1.6rem, 3.5vw, 2rem); font-weight: var(--weight-black); color: var(--color-white); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); margin: 0 0 var(--space-3); position: relative; padding-bottom: var(--space-5); } .pub__title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 80px; height: 3px; background: var(--color-ice); /* C10 — dekorativ */ } /* --color-on-dark / C1 8.57:1 ✓ */ .pub__subtitle { font-size: 1.1rem; color: var(--color-on-dark); margin: 0; line-height: var(--leading-normal); } /* ── Grid ────────────────────────────────────────────────────────── */ .pub__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; } /* ── Karte ───────────────────────────────────────────────────────── */ /* * Karte = C1 Navy BG — identisch mit Sektion. * Isolation durch: * border: 2px solid C10 #ddeaf5 (10.31:1 auf C1 — sehr sichtbar) * box-shadow: Navy-getönter Schatten (tiefer als Sektion) * * "Karte (navy): C1 Navy → C2 Weiß / #c0d8ec Text / C10 Meta" * — COLOR-GUIDE Schnellreferenz */ .pub__card { grid-row: var(--pub-row); grid-column: var(--pub-col); background: var(--color-navy); /* C1 */ border: 2px solid var(--color-ice); /* C10 — Hauptisolation 10.31:1 */ border-radius: 6px; padding: 30px; height: 100%; display: flex; flex-direction: column; box-shadow: 0 4px 12px rgba(0, 0, 0, .28), 0 12px 32px rgba(0, 0, 0, .22), 0 24px 56px rgba(0, 0, 0, .16); transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-fast); } .pub__card:hover { transform: translateY(-5px); border-color: var(--color-white); /* C2 — stärker beim Hover */ box-shadow: 0 6px 18px rgba(0, 0, 0, .32), 0 16px 40px rgba(0, 0, 0, .26), 0 32px 64px rgba(0, 0, 0, .20); } .pub__card:focus-within { outline: 3px solid var(--color-ice); outline-offset: 3px; } /* ── H5 Kartentitel ──────────────────────────────────────────────── */ /* C2/C1 12.61:1 ✓ */ .pub__card-title { color: var(--color-white); font-size: 1.1rem; font-weight: var(--weight-bold); margin: 0 0 var(--space-5); padding-bottom: var(--space-4); border-bottom: 2px solid rgba(221, 234, 245, .25); /* C10 gedimmt — dekorativ */ display: flex; align-items: flex-start; gap: 12px; line-height: 1.5; min-height: 85px; } /* C10/C1 10.31:1 ✓ */ .pub__card-title i { font-size: 1.4rem; flex-shrink: 0; margin-top: 3px; color: var(--color-ice); } /* ── Details-Block ───────────────────────────────────────────────── */ /* C2/C1 12.61:1 ✓ */ .pub__company { color: var(--color-white); font-weight: var(--weight-bold); display: block; margin-bottom: var(--space-2); font-size: var(--text-base); line-height: var(--leading-snug); } /* --color-on-dark / C1 8.57:1 ✓ */ .pub__details, .pub__address, .pub__line { color: var(--color-on-dark); line-height: 1.9; font-size: 0.95rem; margin: 0; } .pub__details { flex: 1; } /* C10/C1 10.31:1 ✓ */ .pub__details a, .pub__line a { color: var(--color-ice); text-decoration: none; font-weight: var(--weight-bold); transition: color var(--transition-fast); word-break: break-all; } /* C2/C1 12.61:1 ✓ */ .pub__details a:hover, .pub__line a:hover { color: var(--color-white); text-decoration: underline; text-underline-offset: 2px; } .pub__details a:focus-visible, .pub__line a:focus-visible { outline: 2px solid var(--color-ice); outline-offset: 2px; border-radius: 2px; } /* ── Sub-Details (Verantwortlich, Redaktion…) ────────────────────── */ .pub__sub { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid rgba(221, 234, 245, .2); /* C10 gedimmt — dekorativ */ } /* --color-on-dark / C1 8.57:1 ✓ */ .pub__sub-label { color: var(--color-on-dark); font-size: 0.8rem; font-weight: var(--weight-black); text-transform: uppercase; letter-spacing: var(--tracking-wide); margin: 0 0 var(--space-1); } /* --color-on-dark / C1 8.57:1 ✓ */ .pub__sub-name { color: var(--color-on-dark); margin: 0; font-size: 0.95rem; font-weight: var(--weight-bold); line-height: var(--leading-snug); } /* ════════════════════════════════════════════════════════════════════ RESPONSIVE (wie Original) ════════════════════════════════════════════════════════════════════ */ @media (max-width: 992px) { .pub__grid { display: flex; flex-direction: column; gap: 20px; } .pub__card { order: var(--pub-mob); grid-row: auto; grid-column: auto; padding: 25px; height: auto; } .pub__card-title { font-size: 1rem; min-height: auto; margin-bottom: var(--space-4); padding-bottom: var(--space-3); } } @media (max-width: 767.98px) { .pub__section { padding: 40px 0; } .pub__inner { padding: 0 var(--page-padding-x-sm); } .pub__card { padding: 20px; } .pub__card-title { font-size: 0.95rem; gap: 10px; } .pub__card-title i { font-size: 1.2rem; } .pub__details, .pub__address, .pub__line, .pub__sub-label, .pub__sub-name { font-size: 0.9rem; line-height: 1.7; } .pub__card:hover { transform: none; } } /* ── Print ───────────────────────────────────────────────────────── */ @media print { .pub__section { background: var(--color-white); padding: 20px 0; } .pub__title { color: var(--color-navy); } .pub__title::after { background: var(--color-navy); } .pub__subtitle { color: var(--color-ink); } .pub__card { background: var(--color-white); border: 2px solid var(--color-navy); box-shadow: none; break-inside: avoid; margin-bottom: 16px; border-radius: 0; } .pub__card:hover { transform: none; } .pub__card-title, .pub__card-title i { color: var(--color-navy); } .pub__card-title { border-color: var(--color-navy); } .pub__company { color: var(--color-ink); } .pub__details, .pub__address, .pub__line { color: var(--color-ink-soft); } .pub__sub { border-color: var(--color-border); } .pub__sub-label, .pub__sub-name { color: var(--color-ink-soft); } .pub__details a, .pub__line a { color: var(--color-navy); } .pub__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; } .pub__card { grid-row: var(--pub-row); grid-column: var(--pub-col); order: unset; } } /* ── High Contrast ───────────────────────────────────────────────── */ @media (prefers-contrast: high) { .pub__card { border: 3px solid var(--color-white); } .pub__card-title { border-color: var(--color-white); } .pub__sub { border-color: var(--color-white); } } /* ── Reduced Motion ──────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .pub__card, .pub__details a, .pub__line a { transition: none; } .pub__card:hover { transform: none; } }