/*!
 * Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2024 Fonticons, Inc.
 */
/* v2: the design of the live page (diabetes-in-wuppertal.de), cleaned up, with the functions of v1.0 and without
   animations (briefings 04.11.2026 13:46, 14:20, 14:25). Throwaway prototype, not the TYPO3 build. */
@font-face { font-family: "Font Awesome 6 Free"; font-weight: 900; font-style: normal;
             src: url(fonts/fa-solid-900.woff2?v=aa75998623) format("woff2"); }
:root {
  --green: rgb(180 188 59);
  --pink: rgb(185 41 112);
  --grey: rgb(246 246 248);
  --ink: #1d1d1f;
  --ring: 64px;
  --ring-in: 9.6px;          /* the ring's outer edge lies 9.6 px inside its 64 px box: margin so it sits on the line */
  --wrap: 1280px;
  --g: 32px;                 /* one gap for everything: tiles, columns, white box to the band edge */
  --lh: 24px;                /* line grid of the white box */
  --shadow: 8px 10px 24px rgb(0 0 0 / .22);   /* soft drop shadow to the lower right (Dr. Beyenal's reference) */
  /* proportions of the live page (measured 04.11.2026 at 1440 px): picture band = green band, white box = one
     square tile, the box ends one gap above the band's lower edge, map = foot */
  --band: 304px;
  --tile: calc((min(100vw, var(--wrap)) - 48px - 2 * var(--g)) / 3);
  --fh: 330px;               /* map */
  --foot: 484px;             /* green foot as on the live page */
  --bt: 48px;                /* Diabetologie am Berg in the white box, as on the live page */
}
* { box-sizing: border-box; }
html { scroll-behavior: auto; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: clip; }
body { margin: 0; font-family: ui-sans-serif, system-ui, sans-serif; color: var(--ink); background: #fff;
       font-size: 17px; line-height: 1.5; }
img { display: block; max-width: 100%; }
a { color: var(--pink); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.fa { font-family: "Font Awesome 6 Free"; font-weight: 900; font-style: normal; line-height: 1; display: inline-block; }
.fa-phone::before { content: "\f095"; } .fa-user-doctor::before { content: "\f0f0"; }
.fa-map-pin::before { content: "\f276"; } .fa-fax::before { content: "\f1ac"; }
.fa-notes-medical::before { content: "\f481"; } .fa-person-dress::before { content: "\f182"; }
.fa-venus::before { content: "\f221"; } .fa-shoe-prints::before { content: "\f54b"; }
/* Fußambulanz: own footprints as an SVG, sized like a glyph of 1em (user 04.11.2026) */
.fa.fsvg { line-height: 0; display: flex; align-items: center; justify-content: center; }
/* the foot from the big toe to the heel exactly as high as the PCO symbol (briefing 06.11.2026 11:27: "der Fuß ist
   von allen Icons optisch ein bisschen zu groß"): measured at 96 px: foot 103 px high, venus 96 px; .93 em puts both
   on the same rows (317-412 px at 1440) */
.fa.fsvg svg { display: block; height: .93em; width: auto; fill: currentColor; overflow: visible; }
/* a chapter starts exactly at the lower edge of the fixed head (with or without ticker), so no text of the chapter
   before shows above it; its own top padding is the gap (user 04.11.2026 21:32). --hh is set by app.js. */
main section, .anchor { scroll-margin-top: var(--hh, 125px); }
.person { scroll-margin-top: calc(var(--hh, 125px) + 24px); }

/* running text: justified with hyphenation (soft hyphens from the build), lists and addresses left */
main p, main li { text-align: justify; hyphens: auto; -webkit-hyphens: auto; text-wrap: pretty; }
main .nojust, main .nojust p { text-align: left; hyphens: manual; }

/* ---------- head: ring + Diabetologie am Berg like a letterhead, stays on top ---------- */
.top { position: sticky; top: 0; z-index: 20; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .08); }
.head { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 10px;
        padding-bottom: 10px; }
.logo { display: flex; align-items: center; text-decoration: none; }
.logo svg { width: var(--ring); height: var(--ring); margin-left: calc(-1 * var(--ring-in)); flex: none; }
.logo span { font-size: 32px; font-weight: 600; color: var(--green); line-height: 1.1; }
.logo.page span { color: var(--pink); }   /* subpages: mixed case, the only exception (user 16:30) */
.mixed .logo.page span, .mixed .title { text-transform: none; }
.nav { display: flex; gap: 32px; }
.nav a { text-decoration: none; font-size: 20px; color: var(--pink); font-weight: 500; }
.nav a:hover { text-decoration: underline; }
.ticker { background: var(--grey); overflow: hidden; white-space: nowrap; font-size: 18px; }
.ticker .run { display: inline-block; padding: 7px 0 7px 100%; animation: run 40s linear infinite; }
.ticker b { color: var(--pink); }
@keyframes run { to { transform: translateX(-100%); } }
.still .ticker .run { animation: none; padding-left: 24px; }
/* app.js moves the text by whole screen pixels (user 05.11.2026: "ruckelt leicht"); starts at the right edge */
.ticker.js .run { animation: none; padding-left: 0; will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .ticker { white-space: normal; } .ticker .run { animation: none; padding-left: 24px; }
}

/* ---------- titles: green ring, red text; the ring's outer edge on the left line ---------- */
/* section titles in capitals, as large as "Diabetologie am Berg" in the head (user 16:30) */
.title { display: flex; align-items: center; margin: 0 0 12px; font-size: 32px; font-weight: 600;
         text-transform: uppercase; color: var(--pink); min-height: var(--ring); }
.title svg { width: var(--ring); height: var(--ring); margin-left: calc(-1 * var(--ring-in)); flex: none; }
.title.noring { padding-left: 0; }
.lead { margin: 0 0 20px; }
section.block { padding: 48px 0 0; }

/* ---------- hero: picture, green band over the full width, white box set off, tiles ---------- */
.hero { position: relative; }
.hero-img { height: var(--band); background: url(img/start_praxis.jpg?v=acaa8e2f8d) center 50% / cover no-repeat; }
.band { background: var(--green); height: var(--band); }
/* --bth: box padding 22 + title 96 + gap 12 = where the columns begin; the box is moved up so that the columns
   (and the red Termin field) start exactly on the edge of the green band (user 04.11.2026) */
.boxwrap { --bth: 130px; position: absolute; left: 0; right: 0; top: calc(var(--band) - var(--bth)); }
/* the three columns of the white box lie exactly on the three tiles below (user 04.11.2026: "Ausrichten") */
.box { background: #fff; height: var(--tile); padding: 22px 0 0; display: flex; flex-direction: column;
       justify-content: space-between; }
/* below 1280 px the text no longer fitted into the square box (1024 px: 69 px too low). From 641 px up the box is at
   least the tile height and grows with its text (40 px below the last line as everywhere); the green band grows
   with it, keeping 45 px under the box, only when needed: at 1280 px and wider nothing changes (user 05.11.2026) */
@media (min-width: 641px) {
  .hero { display: grid; grid-template-columns: minmax(0, 1fr); }
  .hero-img { grid-area: 1 / 1; }
  .band { grid-area: 2 / 1; height: auto; min-height: var(--band); }
  .boxwrap { grid-area: 2 / 1; position: relative; top: auto; align-self: start; margin-top: calc(-1 * var(--bth));
             padding-bottom: 45px; }
  .hero > .wrap { grid-area: 3 / 1; }
  .box { height: auto; min-height: var(--tile); }
}
.bt { display: flex; align-items: center; margin: 0; padding-left: 32px; }
.bt svg { width: 128px; height: 128px; margin: -16px 0 -16px -19.2px; flex: none; }
.bt span { font-size: var(--bt); font-weight: 600; color: var(--green); line-height: 1.1; }
.claim { margin: var(--g) 0 0; font-size: 40px; line-height: 1.2; font-weight: 400; text-align: left; }
.claim { max-width: 100%; overflow-wrap: break-word; }
.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--g); flex: 1; align-items: stretch; margin-top: 12px; }
/* icons and headings on the same height in all three columns; the row sits low, so the longer texts end on the
   lower line, 40 px above the edge of the box (user 04.11.2026) */
.col { margin: 0; padding: 45px 32px 40px; line-height: var(--lh); font-size: 16px; }
.col .ico { display: block; height: 56px; margin-bottom: 10px; color: var(--green); text-decoration: none;
            line-height: 56px; }
/* optically equal sizes, the phone is the reference (user 14:20) */
.col .ico .fa-phone { font-size: 44px; } .col .ico .fa-user-doctor { font-size: 48px; }
.col .ico .fa-map-pin { font-size: 52px; }
/* as on the live page: the heading larger, not bold; the smaller text below (user 15:20) */
.col h3 { margin: 0 0 6px; font-size: 24px; line-height: 30px; font-weight: 400; }
.col p { margin: 0; }
/* as big as the heading "Schwerpunktpraxis", still one line of the grid (user 04.11.2026 21:32) */
.col .name { --nfs: min(24px, calc((var(--tile) - 64px) / 10.4)); color: var(--pink); font-size: var(--nfs);
             font-weight: 600; line-height: var(--lh); white-space: nowrap;   /* narrower windows: smaller, one line */
             /* on the baseline of the first text line in the other columns; only the name moves, the heading and
                the lines below stay (user 04.11.2026 22:05): measured 4 px at 24 px, half the size difference */
             position: relative; top: calc((16px - var(--nfs)) / 2); }
/* "Termin": the field turns red, square, while the Online-Rezeption is called (user 14:20) */
/* Termin: the red field fills column 1 exactly: box edge on the left and at the bottom, tile edge on the right */
#termin { margin: 0; }
.col.flash { background: var(--pink); color: #fff; }
.col.flash .ico, .col.flash b { color: #fff; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--g); padding: var(--g) 0 0; }
.tile { display: flex; align-items: center; justify-content: center; text-align: center; aspect-ratio: 1 / 1;
        padding: 22px; background: var(--green); color: var(--pink); font-size: 32px; font-weight: 600;
        line-height: 1.15; text-decoration: none; }
.tile:hover, .tile:focus-visible { box-shadow: var(--shadow); outline: none; }

/* ---------- hours + news on the middle axis ---------- */
.pair { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--g); }
.pair .news { grid-column: span 2; }
.hours dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 0 24px; }
.hours dl .grp { grid-column: 1 / -1; font-size: 17px; margin: 0 0 2px; color: var(--pink); font-weight: 700; }
.hours dl .grp + dt, .hours dl .grp ~ dt { }
.hours dl .gap { grid-column: 1 / -1; height: 14px; }
.hours dt { font-weight: 600; } .hours dd { margin: 0; white-space: nowrap; }
.hours h3 { font-size: 17px; margin: 0 0 2px; color: var(--green); }
.hours .b2 { margin-top: 14px; }
.news p { margin: 0 0 10px; }

/* ---------- team: four across, square, names in the picture, no animation ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 0 0 20px; }
.filters button { font: inherit; font-size: 17px; color: var(--pink); background: none; border: 0; padding: 0;
                  cursor: pointer; }
.filters button[aria-pressed="true"] { font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
/* each filter keeps the width of its bold form, so choosing one never moves the others (user 04.11.2026 21:59):
   an invisible bold copy sets the width; the first one stands left, the others centred in their space */
.filters button { display: inline-flex; flex-direction: column; align-items: center; }
.filters button:first-child { align-items: flex-start; }
.filters button::after { content: attr(data-label); font-weight: 700; height: 0; overflow: hidden; visibility: hidden;
                         speak: never; }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--g); }
.person { position: relative; display: flex; flex-direction: column; padding: 0; border: 0; cursor: pointer;
          font: inherit; text-align: left; background: none; color: inherit; text-decoration: none; }
.person .ph { display: block; aspect-ratio: 1 / 1; background: var(--grey); }
.person:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.person:hover .ph, .person:focus-visible .ph, .person[aria-expanded="true"] .ph { box-shadow: var(--shadow); }
.person .ph img { width: 100%; height: 100%; object-fit: cover; }
.person { transition: opacity .2s; }
.person.ghost { opacity: .2; }                 /* only 20 % left, towards white (user 04.11.2026 21:32) */
@media (prefers-reduced-motion: reduce) { .person { transition: none; } }
.person .cap { display: block; padding: 10px 0 4px; background: none; }
.person .cap b { display: block; color: var(--green); font-size: 18px; font-weight: 600; line-height: 22px;
                 white-space: nowrap; overflow: hidden;
                 text-overflow: ellipsis; }
/* at least two lines, more when needed: Ayse Özgenel's four titles must stand in full (briefing 06.11.2026 09:45) */
.person .cap .role { display: block; font-size: 14px; color: #333; line-height: 18px; min-height: 36px; }
.info { grid-column: 1 / -1; display: none; padding: 4px 0 8px; scroll-margin-top: calc(var(--hh, 125px) + 24px);
        scroll-margin-bottom: 24px; }
.info.open { display: block; }
.info h3 { margin: -4px 0 0; font-size: 26px; color: var(--green); font-weight: 600; line-height: 1.25; }
.info .role { margin: 0 0 14px; color: #444; text-align: left; }
.info ul { margin: 0; padding-left: 20px; } .info li { margin: 0 0 5px; }
.info .close { font: inherit; font-size: 15px; color: var(--pink); background: none; border: 0; padding: 0;
               cursor: pointer; margin-top: 12px; }
.hidden { display: none !important; }

/* ---------- services: icons on one line, grey tab, grey band with text left and picture right ---------- */
.svcs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
.svc { font: inherit; cursor: pointer; border: 0; background: none; display: flex; flex-direction: column;
       align-items: center; gap: 10px; padding: 18px 8px 16px; color: var(--ink); }
.svc .fa { font-size: 96px; height: 104px; line-height: 104px; color: var(--green); }
.svc span { font-size: 18px; line-height: 23px; text-align: center; }
.svc[aria-selected="true"] { background: var(--grey); }
.svc[aria-selected="true"] span { color: var(--green); }
.sband { background: var(--grey); overflow: hidden; }
/* the band slides sideways as on the live page (user 15:20: "da läuft das Bild durch") */
.track { display: flex; transition: transform .5s ease; }
.still .track { transition: none; }
.slide { flex: 0 0 100%; display: grid; grid-template-columns: 1fr 1fr; min-height: 420px; }
.slide .txt { padding: 26px var(--g) 30px max(24px, calc((100vw - var(--wrap)) / 2 + 24px)); }
.slide h3 { margin: 0 0 12px; font-size: 30px; font-weight: 400; }
.slide p { margin: 0 0 12px; } .slide ul { margin: 0; padding-left: 20px; } .slide li { margin: 0 0 5px; }
.slide .pic img { width: 100%; height: 100%; object-fit: cover; }
/* DDG certificate under the Fußambulanz text: right edge on the text edge, the orange ring a little over the
   left edge as in the mockup (user 04.11.2026 23:20) */
.slide .cert { display: block; width: 100.87%; max-width: none; height: auto;
               margin: 13.5px 0 0 -0.87%; }   /* collapses with the 12px below the text: 20px baseline to logo */

/* ---------- türkçe: big photo on the left line, text and two tiles from the middle axis ---------- */
.tr { display: grid; grid-template-columns: 1fr 1fr; gap: var(--g); align-items: stretch; }
.tr .big { aspect-ratio: 1 / 1; }
.tr .big img { width: 100%; height: 100%; object-fit: contain; }
.tr .right { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }
.tr .right p { margin: 0 0 10px; }
.tr .two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--g); }

/* ---------- network (centred, as an exception), map, green foot ---------- */
.aiw .logo-aiw { display: block; width: 254px; margin: 8px auto 0; }
.map { margin-top: 48px; display: block; position: relative; }
.map img { width: 100%; height: auto; }   /* proportions from width/height of the file, set by build.py */
/* phones and tablets: the map is shown closer, cut around the practice logo, so that it can be read (user 05.11.2026);
   the logo (ring and name) sits at 53.6 % / 46.4 % of the picture; on the phone the name is then about 16 px high */
@media (max-width: 900px) { .map img { height: 360px; object-fit: cover; object-position: 53.6% 46.4%; } }
@media (max-width: 640px) { .map img { height: 400px; } }
/* the map is from OpenStreetMap (user 05.11.2026): the credit printed in the picture is covered by the same credit as a
   link to the OSM copyright page, as OSM asks for it */
.map .osm { position: absolute; left: 0; bottom: 0; padding: 2px 8px; font-size: 13px; line-height: 1.4; color: #333;
            background: rgb(255 255 255 / .85); text-decoration: none; }
.map .osm:hover { text-decoration: underline; }
@media (max-width: 640px) { .map .osm { font-size: 11px; padding: 1px 5px; } }   /* the map is low on the phone */
/* route choice on iPhone, iPad, Mac (maps.js, user 05.11.2026): a sheet from the bottom like the system's own; above
   everything while it is open, closed again with Abbrechen, a tap beside it or Esc */
.route { position: fixed; inset: 0; z-index: 2147483600; background: rgb(0 0 0 / .35); display: flex;
         align-items: flex-end; justify-content: center; }
.route .box { width: min(420px, calc(100% - 32px)); margin-bottom: max(24px, env(safe-area-inset-bottom)); padding: 14px;
              background: #fff; border-radius: 14px; display: grid; gap: 8px; box-shadow: 0 8px 32px rgb(0 0 0 / .25); }
.route p { margin: 0 0 2px; text-align: center; color: #666; font-size: 14px; }
.route .pick, .route .cancel { display: block; padding: 13px; border-radius: 10px; text-align: center; font: inherit;
                               font-size: 18px; text-decoration: none; }
.route .pick { background: var(--grey); color: var(--pink); font-weight: 600; }
.route .cancel { background: none; border: 0; color: #333; cursor: pointer; }
/* the focus ring in our green instead of the browser's blue (user 05.11.2026, Safari on the Mac) */
.route .pick:focus, .route .cancel:focus { outline: 4px solid var(--green); outline-offset: 2px; }   /* twice as thick (05.11.) */
/* foot as high as the map strip (user 16:03: green strip and map strip equally high), layout of the live foot */
.foot { background: var(--green); min-height: calc(100vw * 591 / 2560); padding: 44px 0 22px; font-size: 16px;
        display: flex; } .foot > .wrap { width: 100%; display: flex; flex-direction: column; }
.foot .fgrid { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--g); row-gap: 14px; }
.foot h4 { margin: 0 0 10px; font-size: 30px; font-weight: 600; line-height: 1.2; }
.foot .links h4 { font-size: 16px; }
.foot h4 a, .foot .line a { color: var(--ink); text-decoration: none; }
.foot h4 a:hover, .foot .line a:hover { text-decoration: underline; }
.foot p { margin: 0 0 8px; }
.foot .fgrid { row-gap: 0; }
.foot .contact { margin-top: 36px; }
/* "Schwerpunktpraxis" as wide as "Diabetologie" above it (user 04.11.2026 21:32): 16 px * 175.2 / 137.4 */
.foot .sub { font-weight: 600; font-size: 20.4px; line-height: 1.2; }
/* the name as wide as well (user 04.11.2026 21:40): 16 px * 175.2 / 158.6 */
.foot .doc { font-size: 17.68px; }
.foot .line { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.foot .line a, .foot .line span { line-height: 24px; }
/* icons in black circles; a real circle for all three (user 14:25: "ein Kreis statt dieses Oval") */
.foot .circ { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #000; color: var(--green);
              display: flex; align-items: center; justify-content: center; font-size: 14px; }
.foot .addr { align-items: flex-start; }
.foot .links { margin: auto 0 0; padding-top: 16px; font-size: 16px; }
.foot .links a { color: var(--ink); text-decoration: none; margin-right: 18px; }
.foot .links a:hover { text-decoration: underline; }

/* 321MED stands in for the draft only; on the test site the real widget sits there */
.mock321 { position: fixed; right: 20px; bottom: 20px; z-index: 30; display: flex; align-items: center; gap: 8px;
           background: #fff; border-radius: 999px; box-shadow: 0 2px 10px rgb(0 0 0 / .2); padding: 10px 18px;
           font-size: 16px; font-weight: 600; cursor: pointer; }
.mock321 i { color: var(--pink); font-style: normal; font-size: 22px; line-height: 1; }
.mockpane { display: none; position: fixed; right: 20px; bottom: 76px; z-index: 30; width: 300px; padding: 16px 18px;
            background: #fff; border-radius: 16px; box-shadow: 0 4px 20px rgb(0 0 0 / .25); font-size: 15px; }
.mockpane.open { display: block; }

/* ---------- subpages ---------- */
.legal { padding-top: 0; padding-bottom: 48px; }   /* title is in the head now; keeps the side padding of .wrap */
.legal .who { color: var(--pink); font-weight: 700; margin: 0 0 24px; text-align: left; }
/* the bold headings sit directly over their text, 8 px between the blocks, as in the Datenschutz (user 05.11. 18:22) */
.legal h4 { margin: 8px 0 0; font-size: 1em; line-height: inherit; }
.legal p { margin: 0 0 8px; }

/* ---------- smaller screens ---------- */
@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .info { grid-column: 1 / -1; }
  .slide { grid-template-columns: 1fr; } .slide .pic { order: -1; margin-right: 0; height: 240px; }
  .slide .txt { padding-right: 0; }
}
@media (max-width: 640px) {
  :root { --ring: 48px; --ring-in: 7.2px; --g: 16px; }
  /* smartphone too: justified with hyphenation like on the desktop (user 05.11.2026: "Blocksatz mit automatischer
     Trennung erzwingen"; until then ragged right without hyphenation, user 04.11. 17:20); long words may still break */
  main p, main li { overflow-wrap: break-word; }
  body { font-size: 16px; }
  .head { flex-direction: column; align-items: flex-start; gap: 2px; padding-top: 8px; padding-bottom: 8px; }
  .logo span { font-size: 24px; }
  .nav { gap: 20px; } .nav a { font-size: 16px; }
  .title { font-size: 22px; }
  .hero-img { height: 150px; } .band { height: auto; padding-bottom: var(--g); }
  .boxwrap { position: relative; top: auto; margin-top: -90px; }
  .box { height: auto; padding: 18px 0 0; gap: 0; } .bt { padding-left: 20px; } .col { padding: 14px 20px 16px; } .bt svg { width: 64px; height: 64px; margin-left: -9.6px; }
  .bt svg { width: 72px; height: 72px; margin: -8px 0 -8px -10.8px; } .bt span { font-size: 28px; }
  .col .name { --nfs: 24px; white-space: normal; }
  .filters button { align-items: flex-start; }   /* one below the other: all flush left */
  .claim { font-size: 26px; } #termin { margin: 0; } .pair .news { grid-column: auto; }
  .tr .two { gap: var(--g); }
  .cols { grid-template-columns: 1fr; gap: 22px; }
  .tiles { grid-template-columns: 1fr; }
  .tile { aspect-ratio: 3 / 1; font-size: 26px; }
  .pair, .tr, .foot .fgrid { grid-template-columns: 1fr; }
  .foot { min-height: 0; padding-top: 36px; }
  .person .cap { padding: 6px 0 4px; }   /* on the left line of the picture, as on the desktop */
  .person .cap .role br { display: none; }
  .person .cap b { font-size: 14px; line-height: 18px; white-space: normal; }
  .person .cap b .ttl { display: block; }
  .person .cap .role { font-size: 12px; line-height: 16px; height: auto; }
  .sub .nav { gap: 4px 14px; flex-wrap: wrap; } .sub .nav a { font-size: 15px; }
  .svcs { grid-template-columns: repeat(3, 1fr); }
  .svc .fa { font-size: 52px; height: 60px; line-height: 60px; } .svc span { font-size: 14px; line-height: 18px; }
  .fa.fsvg svg { height: .91em; }   /* 52 px: at .93 the heel stood 1 px lower than the PCO symbol */
}

/* phone held sideways (low screen): compact head */
@media (max-height: 500px) and (orientation: landscape) {
  :root { --ring: 40px; --ring-in: 6px; }
  .head { flex-direction: row; align-items: center; padding-top: 4px; padding-bottom: 4px; }
  .logo span { font-size: 20px; } .nav { gap: 16px; } .nav a { font-size: 15px; }
  .ticker { font-size: 14px; } .ticker .run { padding-top: 3px; padding-bottom: 3px; }
}