/* Hallmark · checked: 2026-11-11 · genre: editorial (inferred)
 * floor: 0 FAIL · fixed: 17 (7a, 19, 26a, 26b, 30a, 34, 40, 48, 54, 63, 67, 75, F1, F3, F23, F24, F26) · structural: 8 printed (44b, 44c, 44d, 58, 59, 77, 78, 79)
 * finish-review: subagent · 5 findings · 5 resolved · gap: none
 * surface: absolute · built: the project · redesign: polish · v2.0.0 */
/* Hallmark · waive 7b · stamp says surface: absolute, 40 and 41 pass on every home-screen label · the home screen is the black of the iPhone the page imitates, by the owner's choice */
/* Hallmark · dismissed 3 · the side stripe is the back chevron, two borders of a rotated square, not a card edge */
/* Hallmark · dismissed 29 · the blurred glass is the iPhone dock the page imitates; its labels sit at 6:1 over it */
/* Hallmark · dismissed F20 · thirteen apps on a home screen of four columns; the thirteenth opens the last row as a phone would */
/* Hallmark · waive 49b · a real URL that cannot shorten, two lines at 320 · the Quelle line of the Impressum is legal attribution kept verbatim */
/* Hallmark · answered F24 · the dock's hairline is the glass edge of the iPhone dock it imitates and the shadow lifts it off the wallpaper */
/* Hallmark · dropped 9:25 · the status-bar clock is live and shows the minute of each render */
/* Hallmark · reworded "About." to "Thom Ritterfeld." · 54 names the label that stood above it */
/* Hallmark · dropped "Ritterfeld — Freelance Mobile App Developer · 2016–present" · 54, 63 and 19 name it; its facts moved into the lede below the head */
/* Hallmark · reworded "Mobile apps and platforms I’ve worked on, from business mobility to connected devices." to "Mobile apps and platforms I’ve worked on since going freelance as Ritterfeld in 2016, from business mobility to connected devices." · 54 names the line it absorbs */
/* Hallmark · dropped AIQ, Freddi, Reisbalans App, X-Center, Education platform, WebWeaver, ServiceApp, TankApp, EasyControl / OASE Control, SharePoint-integrated app, Consultation app, Banking app, Care documentation app, Jinn & Jinn Delivery, BeatClip · the product names moved from each card head to its role line; the client is the head, as 54 names a tag over a card */
/* Hallmark · dropped the flag emoji on the language switch and the globe on its Auto row · 30a names them; a two-letter code stands in */
/* Hallmark · reworded "iOS & Android · React Native · Flutter · Ionic · .NET MAUI" to "Native iOS and Android, React Native, Flutter, Ionic and .NET MAUI." · 63 names the dots */
/* Hallmark · reworded "CV ↗" to "CV (PDF)" · 63 names the glued arrow */
/* Hallmark · reworded page titles "… — Thom Ritterfeld" to "… | Thom Ritterfeld" · 19 names the dash */
/* Hallmark · reworded "German–Dutch border" to "German-Dutch border" · 19 names the dash */
:root {
  color-scheme: light;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ink: #1e251f;
  --ink-2: #4f5c53;
  --accent: #31634c;
  --accent-ink: #264e3b;
  --focus: #264e3b;
  --paper: #f8fbf5;
  --wallpaper: #dbe6dc;
  --bezel: #252b27;
  --indicator: #27322b;
  --line: rgba(44, 60, 48, .12);
  --surround: #e6e9e3;
  --app-paper: #e9eee6;
  --screen: #000;
  --paper-2: #c9cfca;
  --glass-dark: rgba(255, 255, 255, .14);
  --glass-dark-line: rgba(255, 255, 255, .18);
  --glass-soft: rgba(255, 255, 255, .62);
  --glass: rgba(255, 255, 255, .68);
  --glass-strong: rgba(255, 255, 255, .78);
  --glass-solid: rgba(255, 255, 255, .95);
  --glass-line: rgba(255, 255, 255, .6);
  --accent-wash: rgba(49, 99, 76, .09);
  --accent-wash-strong: rgba(49, 99, 76, .17);
  --shadow-phone: rgba(29, 39, 32, .2);
  --shadow-soft: rgba(43, 68, 48, .05);
  --shadow-dock: rgba(25, 43, 32, .08);
  --shadow-icon: rgba(24, 40, 28, .15);
  --shadow-menu: rgba(25, 43, 32, .13);
}
* { box-sizing: border-box; }
html { min-height: 100%; overflow-x: clip; }
body {
  min-height: 100vh;
  margin: 0;
  padding: 22px;
  display: flex;
  justify-content: center;
  overflow-x: clip;
  background: var(--surround);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.phone {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 430px);
  height: min(850px, calc(100dvh - 44px));
  min-height: 590px;
  overflow: hidden;
  border: 8px solid var(--bezel);
  border-radius: 52px;
  background: var(--app-paper);
  box-shadow: 0 28px 70px var(--shadow-phone);
}
.phone > * { position: relative; z-index: 1; }
.home-screen { background: var(--screen); color: var(--paper); }
.home-screen .language-switch summary:hover, .home-screen .language-switch[open] summary { color: var(--ink); }
.home-screen a:focus-visible, .home-screen summary:focus-visible, .home-screen .phone-content:focus-visible { outline-color: var(--paper); }
.home-screen .profile-widget, .home-screen .dock, .home-screen .legal-link { border-color: var(--glass-dark-line); background: var(--glass-dark); color: var(--paper); box-shadow: none; }
.home-screen .profile-widget p:last-child { color: var(--paper-2); }
.phone::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 9px;
  left: 50%;
  width: 93px;
  height: 25px;
  border-radius: 16px;
  background: var(--bezel);
  transform: translateX(-50%);
}
.status-bar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 8px 62px 0 25px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -.025em;
}
.status-icons { display: flex; align-items: center; gap: 5px; }
.signal { width: 17px; height: 11px; background: linear-gradient(currentColor, currentColor) 0 100% / 3px 4px no-repeat, linear-gradient(currentColor, currentColor) 4.5px 100% / 3px 6px no-repeat, linear-gradient(currentColor, currentColor) 9px 100% / 3px 8.5px no-repeat, linear-gradient(currentColor, currentColor) 13.5px 100% / 3px 11px no-repeat; }
.wifi { display: block; width: 16px; height: 12px; }
.battery { width: 19px; height: 10px; border: 1.5px solid currentColor; border-radius: 3px; padding: 1px; }
.battery::before { content: ""; display: block; width: 12px; height: 5px; border-radius: 1px; background: currentColor; }
.language-switch { position: absolute; z-index: 6; top: 12px; right: 20px; }
.language-switch summary { display: grid; place-items: center; width: 30px; height: 27px; border-radius: 8px; font-size: 12px; font-weight: 700; letter-spacing: -.025em; line-height: 1; cursor: pointer; list-style: none; }
.language-switch summary::-webkit-details-marker { display: none; }
.language-switch summary:hover, .language-switch summary:active, .language-switch[open] summary { background: var(--glass-strong); }
.language-menu { position: absolute; top: 32px; right: 0; display: grid; min-width: 138px; padding: 5px; border-radius: 13px; background: var(--glass-solid); box-shadow: 0 8px 24px var(--shadow-menu); backdrop-filter: blur(18px); }
.language-menu button { padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.language-menu button:hover, .language-menu button[aria-current="true"] { background: var(--accent-wash); }
.language-menu button:active { background: var(--accent-wash-strong); }
.phone-content { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.phone-content::-webkit-scrollbar { display: none; }
.home-content { display: flex; flex-direction: column; padding: 20px 23px 10px; }
.profile-widget {
  padding: 16px 20px 15px;
  border: 1px solid var(--glass-line);
  border-radius: 24px;
  background: var(--glass-soft);
  box-shadow: 0 6px 20px var(--shadow-soft);
}
.profile-widget h1 { margin: 0; min-width: 0; overflow-wrap: break-word; text-wrap: balance; font-size: 27px; font-weight: 700; letter-spacing: -.055em; line-height: 1.06; }
.widget-byline { margin: 8px 0 0; font-size: 14px; font-weight: 600; }
.profile-widget p:last-child { margin: 6px 0 0; color: var(--ink-2); font-size: 12px; line-height: 1.4; }
.app-heading, .experience-heading { margin: 20px 1px 12px; color: var(--ink-2); font-size: 13px; font-weight: 600; }
.app-heading, .app { color: var(--paper); }
.app-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px 4px; }
.app { min-width: 0; text-align: center; text-decoration: none; font-size: 11px; font-weight: 500; }
.app img {
  display: block;
  width: clamp(52px, 14vw, 62px);
  height: clamp(52px, 14vw, 62px);
  margin: 0 auto 6px;
  object-fit: cover;
  border-radius: 21%;
  box-shadow: 0 5px 12px var(--shadow-icon);
  transition: filter .18s ease, transform .12s ease;
}
.app:hover img, .app:focus-visible img { filter: brightness(.88); }
.app:active img { transform: scale(.94); }
.app span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legal-link { align-self: center; margin: 24px 0 4px; padding: 6px 14px; border: 1px solid var(--glass-line); border-radius: 999px; background: var(--glass); color: var(--ink); font-size: 11px; font-weight: 500; text-decoration: none; backdrop-filter: blur(18px); }
.legal-link:hover { text-decoration: underline; }
.legal-link:active, .app-card a:active, .app-toolbar .toolbar-action:active, .print-button:active { opacity: .7; }
.dock {
  display: grid;
  flex: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0 12px 5px;
  padding: 11px 4px 9px;
  border: 1px solid var(--glass-line);
  border-radius: 22px;
  background: var(--glass);
  box-shadow: 0 8px 24px var(--shadow-dock);
  backdrop-filter: blur(18px);
}
.dock a { min-width: 0; text-align: center; text-decoration: none; font-size: 11px; }
.dock-icon {
  display: block;
  width: clamp(52px, 14vw, 62px);
  height: clamp(52px, 14vw, 62px);
  margin: 0 auto 5px;
  border-radius: 21%;
  transition: filter .18s ease, transform .12s ease;
}
.dock a:hover .dock-icon, .dock a:focus-visible .dock-icon { filter: brightness(.88); }
.dock a:active .dock-icon { transform: scale(.94); }
.home-indicator { flex: none; width: 112px; height: 4px; margin: 8px auto 8px; border-radius: 4px; background: var(--indicator); pointer-events: none; }
.app-toolbar { display: flex; flex: none; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 22px; }
.app-toolbar a { color: var(--accent-ink); font-size: 14px; font-weight: 600; text-decoration: none; }
.app-toolbar .back-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 0 10px 0 0;
  border-radius: 12px;
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
}
.back-button::before {
  content: "";
  width: 15px;
  height: 15px;
  margin-left: 5px;
  border-left: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  border-radius: 2px;
  transform: rotate(45deg);
}
.app-toolbar .back-button:hover, .app-toolbar .back-button:focus-visible { background: var(--accent-wash); }
.app-toolbar .back-button:active { background: var(--accent-wash-strong); }
.app-toolbar span { font-size: 14px; font-weight: 700; }
.app-toolbar .toolbar-action { font-size: 13px; white-space: nowrap; }
.app-content { padding: 20px 22px 32px; }
.app-content h1 { margin: 0 0 23px; min-width: 0; overflow-wrap: break-word; text-wrap: balance; font-size: 38px; font-weight: 700; letter-spacing: -.06em; line-height: 1; }
.about-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 23px; }
.about-header h1 { margin: 0; font-size: clamp(30px, 9vw, 38px); }
.about-portrait { display: block; flex: none; width: 76px; height: 76px; border-radius: 18px; object-fit: cover; }
.app-card {
  margin-bottom: 12px;
  padding: 19px 18px;
  border: 1px solid var(--glass-line);
  border-radius: 20px;
  background: var(--glass-strong);
}
.app-card h2 { margin: 0 0 8px; text-wrap: balance; font-size: 17px; letter-spacing: -.025em; }
.app-card p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.app-card p + p { margin-top: 10px; }
.app-card .meta { color: var(--ink-2); font-size: 12px; font-weight: 600; }
.app-card a { color: var(--accent); text-underline-offset: 3px; }
.screen-note { margin: -10px 0 20px; color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.experience-heading { margin-top: 23px; }
.experience-list { display: grid; gap: 9px; }
.experience-list .app-card { margin: 0; }
.app-card.engagement { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 13px; padding: 12px; }
.engagement h3 { margin: 0 0 3px; font-size: 16px; letter-spacing: -.03em; line-height: 1.15; }
.engagement .meta { margin: 0; font-size: 12px; }
.engagement .engagement-description { margin-top: 7px; font-size: 12px; line-height: 1.4; }
.engagement-art { display: grid; place-items: center; width: 56px; height: 56px; padding: 7px; border-radius: 14px; background: var(--paper); box-shadow: 0 4px 10px var(--shadow-icon); }
.engagement-art img { display: block; width: 100%; height: 100%; border-radius: 7px; object-fit: contain; }
.engagement-art.edge-art { padding: 0; }
.engagement-art.edge-art img { border-radius: inherit; object-fit: cover; }
.engagement-art.doerner-art { padding: 2px; }
.engagement-art.trumpf-art { padding: 3px; }
.cv-list .app-card h2 { font-size: 15px; }
.cv-list .app-card p { font-size: 12px; }
.print-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.legal-content h1 { margin: 0 0 22px; font-size: 34px; letter-spacing: -.05em; line-height: 1.1; }
.legal-content h2 { margin: 23px 0 7px; text-wrap: balance; font-size: 16px; }
.legal-content p { margin: 0 0 12px; color: var(--ink-2); font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
@media (max-width: 600px), (max-height: 500px) and (pointer: coarse) {
  body { display: block; width: 100%; height: 100dvh; min-height: 0; overflow: clip; padding: 0; background: var(--wallpaper); }
  .phone { position: fixed; inset: 0; width: 100%; height: 100dvh; min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
  .phone::before, .status-bar, .home-indicator { display: none; }
  .language-switch { top: max(9px, env(safe-area-inset-top)); right: 18px; }
  .home-content { padding: max(48px, calc(env(safe-area-inset-top) + 38px)) 22px 10px; }
  .app-toolbar { min-height: 52px; margin-top: max(38px, calc(env(safe-area-inset-top) + 30px)); }
  .dock { margin-bottom: max(10px, env(safe-area-inset-bottom)); }
  .app img, .dock-icon { width: clamp(50px, 15vw, 62px); height: clamp(50px, 15vw, 62px); }
}
@media (max-width: 360px) {
  .home-content { padding-inline: 15px; }
  .dock { margin-inline: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .app img, .dock-icon { transition: filter .18s ease; }
  .app:active img, .dock a:active .dock-icon { transform: none; }
}
@media print {
  body { display: block; padding: 0; background: var(--paper); }
  .phone { position: static; width: 100%; height: auto; min-height: 0; overflow: visible; border: 0; border-radius: 0; background: var(--paper); box-shadow: none; }
  .phone::before, .phone::after, .status-bar, .language-switch, .app-toolbar, .home-indicator, .print-button { display: none; }
  .phone-content { overflow: visible; }
  .app-content { padding: 0; }
  .app-content h1 { font-size: 30px; }
  .app-card { break-inside: avoid; padding: 8px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: var(--paper); }
  .app-card h2 { margin-bottom: 3px; }
  .app-card p { font-size: 11px; }
  .cv-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 18px; }
}