/* Brand logo „Feriendialyse Berger“ — markup from 33a-brand-logo.php, loaded only while
 * DUESEWEB_BRAND_LOGO is on. Lockup B: starfish · „Feriendialyse“ (Fraunces 600) over the copper
 * signature „Berger“ (Dancing Script 700 subset), ≈166 × 38 px; ≈133 × 30 px in the scrolled header;
 * short form C below 360 px. The box is sized in em before any font loads (no layout shift).
 * Spec: docs/superpowers/specs/2026-11-08-logo-berger-design.md */

@font-face {
  font-family: 'DW Brand Signature'; /* Dancing Script 700 (OFL), subset to „Berger“ — fonts/dancing-script-OFL.txt */
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/dancing-script-700-berger.woff2') format('woff2');
}
@font-face {
  font-family: 'DW Brand Serif'; /* Fraunces (OFL, variable), subset to „Feriendialyse Dr.“ */
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/fraunces-brand.woff2') format('woff2');
}

/* ---- lockup B (header 20 px, phone 19 px) ---- */
a.dw-brand {
  --dw-brand-ink: #173a40;
  --dw-brand-star: #b4461b;
  --dw-brand-sig: #b4461b;
  --dw-brand-dot: #fff3e6;
  position: relative;
  display: inline-grid !important;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: end;
  justify-items: start;
  box-sizing: content-box;
  font-size: 20px;
  width: 8.3em !important;
  height: 1.9em !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0;
  flex: none;
  vertical-align: middle;
  line-height: 1;
  letter-spacing: normal;
  white-space: nowrap;
  text-align: left;
  text-decoration: none !important;
  color: var(--dw-brand-ink) !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* 48 px tall hit area without growing the box */
a.dw-brand::after {
  content: '';
  position: absolute;
  left: -4px;
  right: -4px;
  top: 50%;
  height: max(100%, 48px);
  transform: translateY(-50%);
}
a.dw-brand .dw-brand__mark {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
  display: block;
  width: 1.7em;
  height: 1.7em;
  margin: 0 .28em 0 0;
  overflow: visible;
}
a.dw-brand .dw-brand__star { fill: var(--dw-brand-star); }
a.dw-brand .dw-brand__dot { fill: var(--dw-brand-dot); opacity: .85; }
a.dw-brand :is(.dw-brand__fd, .dw-brand__dr) {
  font: 600 1em/1 'DW Brand Serif', Fraunces, Georgia, serif;
  font-optical-sizing: auto;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--dw-brand-ink) !important;
  -webkit-text-fill-color: currentColor;
}
a.dw-brand .dw-brand__fd { grid-column: 2; grid-row: 1; }
/* „Dr.“ sits right after „Feriendialyse“ (the box is as wide as that line) — out of the grid, so
   the fold never resizes the box. */
a.dw-brand .dw-brand__dr {
  position: absolute;
  top: 0;
  left: 100%;
  display: inline-block;
  overflow: hidden;
  max-width: 1.6em;
  margin-left: .25em;
}
a.dw-brand .dw-brand__dr[hidden],
a.dw-brand--short .dw-brand__dr { display: none !important; }
a.dw-brand .dw-brand__sig {
  grid-column: 2;
  grid-row: 2;
  display: inline-block;
  font: 700 1.15em/.8 'DW Brand Signature', 'Dancing Script', 'Brush Script MT', 'Segoe Script', cursive;
  letter-spacing: 0;
  color: var(--dw-brand-sig) !important;
  -webkit-text-fill-color: currentColor;
  margin: -.12em 0 0 1.6em;
  padding: 0 .08em .1em;
  clip-path: inset(-.3em -.2em -.3em -.2em);
}
a.dw-brand--phone { font-size: 19px; }
/* scrolled (compact) desktop header — 10-modernize.php toggles body.has-scrolled */
body.has-scrolled a.dw-brand--header { font-size: 16px; }

/* ---- short form C: starfish + signature, FERIENDIALYSE in spaced capitals above ---- */
a.dw-brand--short { font-size: 24px; width: 6.1em !important; height: 1.55em !important; }
a.dw-brand--short .dw-brand__mark { width: 1.25em; height: 1.25em; }
a.dw-brand--short .dw-brand__fd {
  font: 700 .42em/1 'Atkinson Hyperlegible', 'Goldene Atkinson', Verdana, sans-serif;
  letter-spacing: .24em;
  text-transform: uppercase;
}
a.dw-brand--short .dw-brand__sig { font-size: 1.25em; margin: 0; }
/* the same form C for the header and phone lockups on very narrow screens */
@media (max-width: 359px) {
  a.dw-brand--header { font-size: 24px; }
  a.dw-brand--phone { font-size: 22px; }
  a:is(.dw-brand--header, .dw-brand--phone) { width: 6.1em !important; height: 1.55em !important; }
  a:is(.dw-brand--header, .dw-brand--phone) .dw-brand__mark { width: 1.25em; height: 1.25em; }
  a:is(.dw-brand--header, .dw-brand--phone) .dw-brand__fd {
    font: 700 .42em/1 'Atkinson Hyperlegible', 'Goldene Atkinson', Verdana, sans-serif;
    letter-spacing: .24em;
    text-transform: uppercase;
  }
  a:is(.dw-brand--header, .dw-brand--phone) .dw-brand__sig { font-size: 1.25em; margin: 0; }
  a:is(.dw-brand--header, .dw-brand--phone) .dw-brand__dr { display: none !important; }
}

/* ---- grounds ---- */
.dw-brand-dark a.dw-brand { --dw-brand-ink: #fdf6ec; --dw-brand-star: #e2703d; --dw-brand-sig: #f19060; }
html.dw-contrast a.dw-brand { --dw-brand-ink: #000; --dw-brand-sig: #8f3510; --dw-brand-star: #8f3510; }
/* Kontrast underlines every link (klarheit.css, specificity ≈ 0,9,4 !important); a logo is no
   running-text link. :not(#id) adds ID weight without matching anything else. */
html.dw-contrast a.dw-brand:not(#dw-brand-no-underline) { text-decoration: none !important; }
@media (forced-colors: active) {
  a.dw-brand .dw-brand__star { fill: CanvasText; }
  a.dw-brand .dw-brand__dot { fill: Canvas; }
}

/* ---- motion: once per browser session (Ruling 8 — „auf jeder weiteren Seite steht das Logo
   still“). brand-logo.js sets html.dw-brand-anim before paint on the first page of a session
   (sessionStorage dw-brand-anim-seen); the „Dr.“ fold (.dw-brand--fold, once per browser) carries
   its own entrance. Nothing moves under reduced motion, Kontrast or forced colours. ---- */
@media (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  html:not(.dw-contrast):is(.dw-brand-anim) a.dw-brand .dw-brand__mark,
  html:not(.dw-contrast) a.dw-brand--fold .dw-brand__mark {
    animation: dw-brand-turn 1.3s cubic-bezier(.2, .8, .2, 1) both;
  }
  html:not(.dw-contrast):is(.dw-brand-anim) a.dw-brand .dw-brand__sig,
  html:not(.dw-contrast) a.dw-brand--fold .dw-brand__sig {
    animation: dw-brand-write 1.5s .45s cubic-bezier(.45, .05, .4, 1) both;
  }
  html:not(.dw-contrast) a.dw-brand--fold .dw-brand__dr { animation: dw-brand-fold .7s .2s ease forwards; }
  html:not(.dw-contrast) a.dw-brand.dw-brand--fold .dw-brand__sig { animation-delay: .95s; }
  html:not(.dw-contrast) a.dw-brand--header { transition: font-size .3s ease; }
}
@keyframes dw-brand-turn {
  from { transform: rotate(-50deg) scale(.5); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes dw-brand-write {
  from { clip-path: inset(-.3em 100% -.3em -.2em); }
  to { clip-path: inset(-.3em -.2em -.3em -.2em); }
}
@keyframes dw-brand-fold {
  to { max-width: 0; margin-left: 0; opacity: 0; }
}

/* ---- phone sub-pages: the fixed body::before logo of modernize.css / phone-autumn.css / riviera.css
   keeps its box; only the picture changes (text as outlines, no web font needed) ---- */
@media (max-width: 959px) {
  body.dueseweb-modern:not(.home)::before { background-image: url('brand-logo-phone.svg') !important; }
}
@media (max-width: 359px) {
  body.dueseweb-modern:not(.home)::before { background-image: url('brand-logo-short.svg') !important; }
}

/* The desktop banner keeps the full-size box while the lockup shrinks, so the nav never moves. */
@media (min-width: 960px) {
  .dw-desktop-banner-logo:has(> a.dw-brand--header) {
    display: flex;
    align-items: center;
    width: 166px;
    height: 38px;
  }
}