/* Angiomedicum — shared theme */
:root{
  --bg: #FFFFFF;
  --bg-soft: #F4F6F7;
  --bg-card: #FFFFFF;
  --ink: #0F1A1D;
  --ink-2: #2F3D40;
  --muted: #6B7479;
  --line: #E2E6E8;
  --line-2: #ECEFF0;
  --navy: #2E5C66;
  --navy-2: #3D7480;
  --accent: #2E5C66;
  --white: #FFFFFF;
  --logo: #1F2933;          /* Logofarbe — hier zentral änderbar */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;
}
html,body{ background: var(--bg); color: var(--ink); }
body{ font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; font-feature-settings:"ss01","cv11"; -webkit-font-smoothing: antialiased; }
.font-display{ font-family: 'Inter Tight', 'Inter', sans-serif; letter-spacing:-0.02em; }
.font-mono-ui{ font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.hairline{ border-color: var(--line); }
.hairline-2{ border-color: var(--line-2); }
.text-ink{ color: var(--ink); }
.text-ink-2{ color: var(--ink-2); }
.text-muted{ color: var(--muted); }
.bg-navy{ background: var(--navy); }
.bg-soft{ background: var(--bg-soft); }
.text-accent{ color: var(--accent); }
.ph-stripes{ background-image: repeating-linear-gradient(135deg, rgba(46,92,102,0.07) 0 1px, transparent 1px 9px); background-color:#EEF2F3; }
.ph-stripes-dark{ background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 9px); background-color:#2E5C66; }
/* Wortmarke: PNG dient als Maske, die Farbe kommt aus --logo */
.logo-mark{
  /* Feste Masse statt aspect-ratio: haelt auch auf schmalen Geraeten und in
     aelteren Browsern die Breite korrekt (Seitenverhaeltnis 974:198). */
  height: 40px; width: 197px;
  background-color: var(--logo);
  -webkit-mask-image: url("uploads/logo-angiomedicum.png?v=12");
          mask-image: url("uploads/logo-angiomedicum.png?v=12");
  -webkit-mask-size: contain;      mask-size: contain;
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-position: center;   mask-position: center;
}
@media (min-width: 1024px){
  .logo-mark{ height: 56px; width: 276px; }
}
.logo-mark--light{ background-color: #FFFFFF; }

.ul-link{ position:relative; }
.ul-link::after{ content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition: transform .35s ease; }
.ul-link:hover::after{ transform: scaleX(1); }
:focus-visible{ outline:1px solid var(--navy); outline-offset:2px; border-radius:4px; }
.r-sm{ border-radius: var(--r-sm); }
.r-md{ border-radius: var(--r-md); }
.r-lg{ border-radius: var(--r-lg); }
.r-xl{ border-radius: var(--r-xl); }
.r-pill{ border-radius: var(--r-pill); }
.card-soft{ background: var(--bg-card); border:1px solid var(--line-2); border-radius: var(--r-lg); }
.shadow-soft{ box-shadow: 0 1px 0 rgba(15,26,29,0.04), 0 18px 40px -28px rgba(15,26,29,0.18); }
.eyebrow{ font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color: var(--muted); }
.num{ font-family:'Inter Tight','Inter',sans-serif; font-feature-settings:"tnum","ss01"; letter-spacing:-0.03em; }
html{ scroll-behavior:smooth; }

/* Form elements (used on Kontakt page) */
.fld{
  width:100%; height:52px; padding: 0 16px;
  border:1px solid var(--line); background:#fff; border-radius: var(--r-md);
  font-family: inherit; font-size:15px; color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.fld:focus{ outline:none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(46,92,102,0.12); }
textarea.fld{ height:auto; padding:14px 16px; min-height:160px; resize: vertical; line-height: 1.5; }
.fld::placeholder{ color:#98a0a3; }
.lbl{ display:block; font-size:12.5px; color: var(--ink-2); margin-bottom: 8px; font-weight:500; }
.check{ display: inline-flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.check input[type="checkbox"]{ margin-top:3px; accent-color: var(--navy); }