/* ==============================================================
   DESIGN v4 · Inspired by Dentalux (AncoraThemes)
   но на брендовых токенах Dr. Alpers (warm beige + red, Cormorant + Inter).
   Что взято у dentalux:
   • декоративные круглые "spinning"-бейджи в hero
   • soft-карточки услуг с большой круглой иконкой + thin divider + "Mehr →"
   • плавающий appointment / quick-book виджет, заходящий на 2 секции
   • волнистые SVG-разделители между секциями
   • большие кавычки в reviews + score-карта
   • full-width red CTA-band с pill-кнопками
   • тёмный/красный footer с newsletter-форм-полем
   ============================================================== */

:root{
  /* CORE TOKENS (из CLAUDE.md) */
  /* Text — чуть тёпле, ближе к красному (по комментарию клиента) */
  --ink:#231b1a; --ink-2:#5a4f4d; --ink-3:#635a52; /* Lachen 2: --ink-3 darkened from #9a9189 to hit 4.5:1 contrast on --bg/--paper */
  --line:#efebe1; --line-2:#dcd5c5;
  /* Paper / bg — заметно светлее, меньше "altes Beige" */
  --paper:#fdfbf6; --bg:#f8f4ea;
  /* Beige — мягче и светлее, не "vintage" */
  --beige:#f0e8d8; --beige-2:#f5efde; --beige-deep:#dccfb6;
  /* Red — основной бренд, использовать чаще */
  --red:#C8302C; --red-2:#a82622; --red-soft:#fadcd9; --red-deep:#7a1a17;
  /* Yellow — новый акцент: надежда, доверие, "strahlt" (по комментарию клиента) */
  --yellow:#F5C842; --yellow-2:#E2B12C; --yellow-soft:#FFF1C9; --yellow-deep:#8a6a14;
  --gold:#c89a3a; --note:#7a5a1a; --note-bg:#fff5d6; /* Lachen 2: --note darkened from #b6822a for 4.5:1 contrast on --note-bg */

  /* TYPE SCALE */
  --fs-12: clamp(11px, .72vw + 9px, 12px);
  --fs-13: clamp(12px, .8vw + 10px, 13px);
  --fs-14: clamp(13px, .9vw + 11px, 14px);
  --fs-15: clamp(14px, 1vw + 12px, 15px);
  --fs-16: clamp(15px, 1.1vw + 13px, 17px);
  --fs-18: clamp(16px, 1.4vw + 13px, 19px);
  --fs-22: clamp(19px, 1.8vw + 15px, 24px);
  --fs-28: clamp(22px, 2.4vw + 16px, 32px);
  --fs-h3: clamp(26px, 3.4vw + 14px, 40px);
  --fs-h2: clamp(34px, 5.2vw + 14px, 64px);
  --fs-h1: clamp(48px, 8vw + 14px, 104px);

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;

  --pad-y: clamp(48px, 6vw, 88px);
  --pad-y-sm: clamp(32px, 4vw, 60px);

  --c-w: 1280px; --c-pad: clamp(20px, 4vw, 56px);

  --r-sm:8px; --r-md:14px; --r-lg:24px; --r-xl:36px; --r-pill:999px;
  --shadow-1: 0 1px 2px rgba(31,31,29,.04), 0 2px 8px rgba(31,31,29,.04);
  --shadow-2: 0 2px 6px rgba(31,31,29,.05), 0 18px 40px -16px rgba(31,31,29,.18);
  --shadow-3: 0 4px 14px -4px rgba(31,31,29,.18), 0 30px 60px -20px rgba(31,31,29,.28);
  --shadow-red: 0 14px 40px -14px rgba(200,48,44,.45);

  --ease: cubic-bezier(.2,.7,.2,1);
  --t-fast:.18s var(--ease); --t-med:.28s var(--ease); --t-slow:.5s var(--ease);

  --nav-h:68px;
}
@media (min-width:1024px){ :root{ --nav-h:84px; } }
@media (min-width:1600px){ :root{ --c-w:1360px; } }

/* ============== RESET ============== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px); }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size:var(--fs-16); line-height:1.6; overflow-x:clip;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg,video{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:3px solid var(--red); outline-offset:3px; border-radius:4px; }
/* High-contrast forced-colors (Windows High Contrast) */
@media (forced-colors: active){
  :focus-visible{ outline:3px solid CanvasText; outline-offset:3px; }
}

/* ============== TYPE ============== */
h1,h2,h3,h4,h5{
  font-family:"Cormorant Garamond", "Times New Roman", serif;
  font-weight:500; letter-spacing:-.012em; color:var(--ink); margin:0;
  text-wrap:balance;
}
h1{ font-size:var(--fs-h1); line-height:.96; letter-spacing:-.025em; }
h2{ font-size:var(--fs-h2); line-height:1.04; letter-spacing:-.018em; }
h3{ font-size:var(--fs-h3); line-height:1.12; }
h4{ font-size:var(--fs-22); line-height:1.2; font-weight:600; }
h5{ font-size:var(--fs-18); font-weight:600; }
p{ margin:0; }
.eyebrow{
  font-family:"Inter",sans-serif; font-size:var(--fs-12); font-weight:600;
  text-transform:uppercase; letter-spacing:.22em; color:var(--red); margin:0;
  display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:""; width:28px; height:1.5px; background:var(--red); display:inline-block; }
.script{ font-family:"Caveat",cursive; font-weight:600; color:var(--red); }
.italic{ font-style:italic; }
.serif{ font-family:"Cormorant Garamond", serif; }
.accent{ color:var(--red); font-style:italic; font-weight:500; }
.handwritten{ font-family:"Caveat",cursive; font-weight:500; color:var(--ink); }

/* ============== LAYOUT ============== */
.container{ max-width:var(--c-w); margin-inline:auto; padding-inline:var(--c-pad); position:relative; }
.section{ padding-block:var(--pad-y); position:relative; }
@media (max-width:767px){
  .section{ padding-block: 56px; }
}
.section--sm{ padding-block:var(--pad-y-sm); }
.section--paper{ background:var(--paper); }
.section--beige{ background:var(--beige); }
.section--bg{ background:var(--bg); }
.section--red{ background:var(--red); color:#fff; }
.section--ink{ background:#1a1a18; color:#f3efe6; }

.sec-head{
  text-align:center; max-width:760px; margin:0 auto var(--s-7);
  display:flex; flex-direction:column; align-items:center; gap:var(--s-3);
}
.sec-head h2{ margin:var(--s-2) 0 0; }
.sec-head p{ color:var(--ink-2); font-size:var(--fs-16); line-height:1.6; max-width:58ch; }

/* ============== BUTTONS ============== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:"Inter",sans-serif; font-weight:500; font-size:var(--fs-15);
  padding:15px 26px; border-radius:var(--r-pill); border:1.5px solid transparent;
  line-height:1; letter-spacing:.005em; white-space:nowrap;
  transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast),
              box-shadow var(--t-med), border-color var(--t-fast);
  min-height:48px; cursor:pointer; user-select:none;
}
.btn:active{ transform:translateY(1px); }
.btn.lg{ padding:19px 32px; font-size:var(--fs-16); min-height:56px; }
.btn.sm{ padding:11px 18px; font-size:var(--fs-13); min-height:38px; }
/* PRIMARY (red filled) — главный CTA с floating red-shadow */
.btn-primary{
  background:var(--red); color:#fff; border-color:var(--red);
  box-shadow: 0 14px 32px -10px rgba(200,48,44,.34);
}
.btn-primary:hover{
  background:var(--red-2); border-color:var(--red-2); color:#fff;
  transform: translateY(-2px);
  box-shadow: 0 20px 44px -12px rgba(200,48,44,.5);
}
.btn-primary:active{ transform: translateY(0); box-shadow: 0 8px 18px -8px rgba(200,48,44,.45); }

/* OUTLINE (ink) — нейтральная outline-кнопка */
.btn-outline{
  background:#fff; color:var(--ink); border-color:var(--line-2);
  box-shadow: 0 4px 12px -6px rgba(31,31,29,.08);
}
.btn-outline:hover{
  background:var(--ink); color:#fff; border-color:var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -10px rgba(31,31,29,.32);
}
.btn-outline:active{ transform: translateY(0); }

/* OUTLINE-RED (light с red-soft бордером) — soft alternative для красного CTA */
.btn-outline-red{
  background:#fff; color:var(--red); border-color:rgba(200,48,44,.24);
  box-shadow: 0 4px 14px -6px rgba(200,48,44,.12);
}
.btn-outline-red:hover{
  background:var(--red); color:#fff; border-color:var(--red);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -10px rgba(200,48,44,.4);
}
.btn-outline-red:active{ transform: translateY(0); }

/* WHITE (на красном фоне — invert при hover) */
.btn-white{
  background:#fff; color:var(--red); border-color:#fff;
  box-shadow: 0 10px 28px -10px rgba(0,0,0,.18);
}
.btn-white:hover{
  background:transparent; color:#fff; border-color:#fff;
  transform: translateY(-2px);
}
.btn-white:active{ transform: translateY(0); }

/* GHOST-WHITE (прозрачный на тёмном фоне) */
.btn-ghost-w{
  background:transparent; color:#fff; border-color:rgba(255,255,255,.5);
}
.btn-ghost-w:hover{
  background:#fff; color:var(--red); border-color:#fff;
  transform: translateY(-2px);
}
.btn-ghost-w:active{ transform: translateY(0); }
.btn .arr{ display:inline-block; transition: transform var(--t-fast); }
.btn:hover .arr{ transform:translateX(4px); }
.btn .ico{ width:18px; height:18px; }

.badge{
  display:inline-flex; align-items:center; gap:8px;
  font-size:var(--fs-12); letter-spacing:.04em; color:var(--ink-2);
  padding:6px 14px; border-radius:var(--r-pill); background:#fff; border:1px solid var(--line-2); font-weight:500;
}
.badge .dot{ width:6px; height:6px; border-radius:50%; background:var(--red); display:inline-block; }
.badge-yellow{ background: var(--yellow-soft); color: var(--yellow-deep); border-color: var(--yellow); font-weight:600; }
.badge-red{ background: var(--red-soft); color: var(--red-2); border-color: rgba(200,48,44,.3); font-weight:600; }
.tag{
  display:inline-flex; align-items:center;
  font-size:11px; font-weight:600; letter-spacing:.08em;
  padding:4px 10px; border-radius:var(--r-pill); background:var(--beige-2); color:var(--ink-2);
  text-transform:uppercase;
}
.tag--red{ background:var(--red-soft); color:var(--red-2); }
.tag--gold{ background:#fff7e1; color:var(--note); }

/* ============== ICONS (sprite-style helpers) ============== */
.ico{ width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.icon-circle{
  width:72px; height:72px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--beige-2); color:var(--red);
  position:relative; transition: background var(--t-med), color var(--t-med), transform var(--t-med);
  flex-shrink:0;
}
.icon-circle::before{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:1.5px dashed var(--line-2); opacity:.7; transition:opacity var(--t-med), transform var(--t-slow);
}
.icon-circle .ico{ width:32px; height:32px; }
*:hover > .icon-circle, .has-hover:hover .icon-circle{ background:var(--red); color:#fff; transform:scale(1.05); }
*:hover > .icon-circle::before, .has-hover:hover .icon-circle::before{ transform:rotate(45deg); }

/* ============== DECORATIVE PIECES ============== */
.spinner-badge{
  position:absolute; width:160px; height:160px; pointer-events:none;
  animation: spin 22s linear infinite;
}
.spinner-badge .ring-text{ font-family:"Inter",sans-serif; font-size:11px; font-weight:600; letter-spacing:.18em; fill:var(--ink-2); text-transform:uppercase; }
.spinner-badge .core{
  position:absolute; inset:38px; border-radius:50%; background:var(--red); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:"Cormorant Garamond",serif;
  font-style:italic; font-weight:600; font-size:30px;
  animation: spin 22s linear infinite reverse;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.wave-divider{
  display:block; width:100%; height:64px;
}
.wave-divider svg{ width:100%; height:100%; display:block; }

/* === SMILE DIVIDER === верхняя секция опускается дугой вниз (форма улыбки),
   фон div'а = цвет следующего блока (плавно встык),
   красная толстая улыбка-полумесяц лежит ровно по центру стыка */
.smile{
  position:relative; width:100%; line-height:0; pointer-events:none;
  margin-top:-1px; margin-bottom:-1px;
  display:block;
  height: clamp(90px, 13.5vw, 200px);
  overflow:hidden;
}
.smile svg{ display:block; width:100%; height:100%; filter: drop-shadow(0 4px 14px rgba(200,48,44,.16)); }
/* Übergang in dunkles Footer / Booking — Roter Drop-Shadow auf Dunkel wirkt wie ein "verlorener" Klecks */
.smile--to-ink svg, .smile--to-red svg{ filter: none; }
.smile-shape{ fill:var(--red); }

/* upper-fill — path заливается цветом ВЕРХНЕЙ секции (опускается дугой вниз) */
.smile--from-paper .upper-fill{ fill:var(--paper); }
.smile--from-bg    .upper-fill{ fill:var(--bg); }
.smile--from-beige .upper-fill{ fill:var(--beige); }
.smile--from-red   .upper-fill{ fill:var(--red); }
.smile--from-ink   .upper-fill{ fill:#15140f; }

/* lower-fill path заливается цветом НИЖНЕЙ (следующей) секции —
   так оба цвета (upper и lower) заданы внутри SVG, без CSS-фона div'а:
   стык path↔path идеально гладкий, без тонкой линии-артефакта */
.smile--to-paper .lower-fill{ fill:var(--paper); }
.smile--to-bg    .lower-fill{ fill:var(--bg);    }
.smile--to-beige .lower-fill{ fill:var(--beige); }
.smile--to-red   .lower-fill{ fill:var(--red);   }
.smile--to-ink   .lower-fill{ fill:#15140f;      }

/* invert — белая улыбка на красном фоне */
.smile--invert .smile-shape{ fill:#fff; }

.dot-pattern{
  position:absolute; width:120px; height:120px; pointer-events:none; opacity:.55;
  background-image: radial-gradient(var(--line-2) 1.4px, transparent 1.4px);
  background-size: 14px 14px;
}

/* ============== UTILITY BAR ============== */
.utility-bar{
  display:none;
  background: #1a1a18; color:#cfc8b7;
  font-size:12px; position:relative; z-index:51;
}
.utility-inner{
  display:flex; align-items:center; justify-content:space-between;
  min-height:40px; gap:var(--s-4);
}
.utility-left{ display:flex; align-items:center; gap:var(--s-4); letter-spacing:.02em; }
.utility-left a{ color:#fff; transition:color var(--t-fast); }
.utility-left a:hover{ color:var(--red-soft); }
.utility-left .sep{ width:1px; height:14px; background:rgba(255,255,255,.2); display:inline-block; }
.utility-right{ display:flex; align-items:center; gap:var(--s-4); }
.utility-right .lang{ display:flex; gap:6px; }
.utility-right .lang span{ padding:2px 8px; border-radius:var(--r-pill); font-size:11px; font-weight:600; color:#cfc8b7; }
.utility-right .lang span.active{ background:var(--red); color:#fff; }
@media (min-width:768px){ .utility-bar{ display:block; } }

/* ============== NAV ============== */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(250,250,246,.94);
  backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap: clamp(20px, 2.6vw, 40px);
  height:var(--nav-h);
  min-width:0;
}

/* BRAND — клиентский логотип (две красные улыбки + "Lachen ist Leben") */
.brand{ display:flex; align-items:center; min-width:0; flex-shrink:0; color: var(--red); }
.brand-logo{
  height:48px; width:auto; flex-shrink:0; display:block;
  color: inherit;
}
@media (min-width:1024px){ .brand-logo{ height:54px; } }
@media (min-width:1600px){ .brand-logo{ height:62px; } }
.footer-brand .brand{ color:#fff; }

/* NAV MENU */
.nav-menu{
  display:none; align-items:center;
  gap: clamp(14px, 1.6vw, 28px);
  min-width:0; flex:0 1 auto;
}
.nav-menu a{
  font-size:14px; font-weight:500; color:var(--ink-2);
  transition:color var(--t-fast);
  position:relative; padding:6px 2px;
  white-space:nowrap;
}
.nav-menu a::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform var(--t-fast); }
.nav-menu a:hover{ color:var(--ink); }
.nav-menu a:hover::after{ transform:scaleX(1); }

/* MEGA-MENU dropdown */
.has-dropdown{ position:relative; }
.has-dropdown > .dd-trigger{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius: var(--r-pill);
  background:transparent; border:1px solid transparent;
  font-size:14px; font-weight:500; color:var(--ink-2);
  cursor:pointer;
  white-space:nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.has-dropdown > .dd-trigger .chev{
  width:14px; height:14px; transition: transform var(--t-fast);
}
.has-dropdown:hover > .dd-trigger,
.has-dropdown:focus-within > .dd-trigger{
  background:#fff; border-color:var(--line); color:var(--ink);
  box-shadow: 0 1px 2px rgba(31,31,29,.05);
}
.has-dropdown:hover > .dd-trigger .chev,
.has-dropdown:focus-within > .dd-trigger .chev{ transform: rotate(180deg); }
.has-dropdown > .dd-trigger::after,
.nav-dropdown a::after,
.nav-dropdown a:hover::after{ display:none !important; }

.nav-dropdown{
  position:absolute; top:calc(100% + 14px); left:50%; transform: translateX(-50%) translateY(8px);
  width: min(820px, calc(100vw - 48px));
  background: rgba(255,253,248,.96);
  border:1px solid rgba(31,31,29,.08);
  border-radius: 28px;
  box-shadow: 0 28px 78px -18px rgba(31,31,29,.22), 0 4px 14px -4px rgba(31,31,29,.06);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  padding: 22px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  z-index: 60;
  display:grid; gap: 20px;
  grid-template-columns: 1.1fr .9fr;
  white-space: normal;
}
.nav-dropdown *, .nav-dropdown a{ white-space: normal; }
/* RESET: внутри dropdown ссылки не должны наследовать стили .nav-menu a */
.nav-menu .nav-dropdown a{
  padding: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}
/* btn внутри dropdown сохраняет свои родные стили */
.nav-menu .nav-dropdown a.btn{
  padding: 15px 26px;
  color: #fff;
  font-size: var(--fs-15);
  font-weight: 500;
  letter-spacing: .005em;
}
.nav-dropdown .dd-item-tag,
.nav-dropdown .dd-aside-eyebrow,
.nav-dropdown .dd-all,
.nav-dropdown .btn{ white-space: nowrap; }
.has-dropdown:hover .nav-dropdown,
.has-dropdown:focus-within .nav-dropdown{
  opacity:1; visibility:visible; pointer-events:auto;
  transform: translateX(-50%) translateY(0);
}
/* невидимый "мост" чтобы курсор не терял hover пока движется к dropdown */
.has-dropdown::before{
  content:""; position:absolute; top:100%; left:0; right:0; height:14px;
  pointer-events:none;
}
.has-dropdown:hover::before{ pointer-events:auto; }

.dd-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:16px;
  align-items:stretch;
}
.dd-item{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line); border-radius: var(--r-lg);
  text-decoration:none; overflow:hidden;
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
  position:relative;
  padding:0; /* контент карточки разнесён по элементам */
}
.dd-item:hover{ transform: translateY(-3px); border-color:var(--red); box-shadow: 0 10px 24px -12px rgba(31,31,29,.18); }
.dd-item-img{
  position:relative; aspect-ratio: 16/10; overflow:hidden; background:var(--beige);
  margin:0;
}
.dd-item-img img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .6s var(--ease);
}
.dd-item:hover .dd-item-img img{ transform: scale(1.06); }
.dd-item-tag{
  position:absolute; left:12px; top:12px; z-index:2;
  font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  padding:5px 11px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.94); color:var(--red);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 6px rgba(31,31,29,.08);
}
.dd-item-body{
  padding:16px 18px 18px;
  display:flex; flex-direction:column; gap:6px; flex:1;
}
.dd-item-body h5{
  margin:0; font-family:"Cormorant Garamond",serif; font-weight:600;
  font-size:20px; line-height:1.2; color:var(--ink);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.dd-item-body h5 .arr{
  font-size:14px; color:var(--red); transition: transform var(--t-fast); flex-shrink:0;
}
.dd-item:hover .dd-item-body h5 .arr{ transform: translateX(4px); }
.dd-item-body p{
  margin:0; font-size:13px; line-height:1.5; color:var(--ink-2);
}

/* «Все услуги» — нижняя ссылка под карточками */
.dd-all{
  grid-column: 1 / -1;
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 16px; border-radius:var(--r-md);
  font-size:13px; font-weight:600; color:var(--ink-2);
  background:var(--paper); border:1px solid var(--line);
  text-decoration:none;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.dd-all:hover{ color:#fff; border-color:var(--red); background:var(--red); transform: translateX(0); }
.dd-all svg{ transition: transform var(--t-fast); }
.dd-all:hover svg{ transform: translateX(3px); }

/* ASIDE справа — premium feature-блок с лёгким gradient */
.dd-aside{
  min-height: 100%;
  padding: 22px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--beige-2) 0%, #fff 100%);
  display:flex; flex-direction:column; justify-content:space-between;
  position:relative; overflow:hidden;
  gap:14px;
}
.dd-aside::after{
  /* декоративная улыбочка в нижнем углу (фоновая, под контентом) */
  content:""; position:absolute; right:-24px; bottom:-20px;
  width:130px; height:44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 120' preserveAspectRatio='none'%3E%3Cpath d='M0,18 C36,107 144,107 180,18 C144,82 36,82 0,18 Z' fill='%23C8302C'/%3E%3C/svg%3E");
  background-size:100% 100%; background-repeat:no-repeat;
  opacity:.07; z-index:0; pointer-events:none;
}
.dd-aside > *{ position:relative; z-index:1; }
/* явные стили для CTA в dropdown — гарантированно поверх декора */
.dd-aside .btn{
  position:relative; z-index:3; isolation:isolate;
  background:var(--red); color:#fff; border-color:var(--red);
  box-shadow: 0 14px 32px -10px rgba(200,48,44,.36);
}
.dd-aside .btn:hover{
  background:var(--red-2); border-color:var(--red-2); color:#fff;
  transform: translateY(-2px);
  box-shadow: 0 20px 44px -12px rgba(200,48,44,.5);
}
.dd-aside-eyebrow{
  font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--red);
  display:inline-flex; align-items:center; gap:8px;
}
.dd-aside-eyebrow::before{ content:""; width:20px; height:1.5px; background:var(--red); }
.dd-aside h4{
  margin:0; font-family:"Cormorant Garamond",serif; font-weight:500;
  font-size: 30px; line-height:.98; color:var(--ink);
  letter-spacing:-.015em;
}
.dd-aside p{
  font-size:13.5px; line-height:1.55; color:var(--ink-2); margin:0;
  max-width: 30ch;
}
.dd-aside .btn{ align-self:flex-start; margin-top:auto; position:relative; z-index:1; }
.dd-aside .btn .arr{ display:inline-block; }

@media (max-width:1023px){
  /* Mobile: показываем Behandlungen как обычную текст-ссылку, скрываем mega-dropdown */
  .has-dropdown{ display:block; }
  .has-dropdown > .dd-trigger{ display:block; }
  .nav-dropdown{ display:none !important; }
}

/* NAV CTA */
.nav-cta{
  display:none; align-items:center; gap:10px;
  flex-shrink:0;
}
.nav-cta .btn{
  padding:11px 18px; min-height:42px; font-size:13.5px;
  white-space:nowrap;
}
.nav-cta .btn .arr{ display:none; }

/* явные стили navbar-кнопок (важнее .btn-* благодаря большей специфичности) */
.nav-cta .btn-primary{
  background:var(--red); color:#fff; border-color:var(--red);
  box-shadow: 0 10px 24px -10px rgba(200,48,44,.36);
}
.nav-cta .btn-primary:hover{
  background:var(--red-2); border-color:var(--red-2); color:#fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -12px rgba(200,48,44,.5);
}
.nav-cta .btn-outline-red{
  background:#fff; color:var(--red); border-color: rgba(200,48,44,.24);
  box-shadow: 0 4px 12px -6px rgba(200,48,44,.14);
}
.nav-cta .btn-outline-red:hover{
  background:var(--red); color:#fff; border-color:var(--red);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -10px rgba(200,48,44,.42);
}
.nav-cta .btn-outline-red:hover .pulse{ background:#fff; box-shadow: 0 0 0 0 rgba(255,255,255,.6); }

/* Phone: icon + number — скрыта до 1024px (там бургер) */
.nav-phone{
  display:none; align-items:center; gap:8px;
  font-size:14px; font-weight:600; color:var(--ink);
  white-space:nowrap;
  padding:8px 6px; border-radius:8px;
  transition: color var(--t-fast);
}
.nav-phone svg{ width:16px; height:16px; flex-shrink:0; color:var(--red); }
.nav-phone:hover{ color:var(--red); }
.nav-phone .np-text{ display:none; }

/* Notfall btn в шапке — скрыта до 1200px (на 1024-1199 только phone+Termin) */
.nav-notfall{ display:none; align-items:center; gap:8px; position:relative; }
.nav-notfall .pulse{
  width:7px; height:7px; border-radius:50%; background:var(--red);
  box-shadow: 0 0 0 0 rgba(200,48,44,.6); animation: pulse 1.6s infinite;
  flex-shrink:0;
}

/* BURGER (mobile / tablet) */
.burger{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%; background:#fff; border:1px solid var(--line-2);
  flex-shrink:0;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.burger svg{ width:20px; height:20px; transition: transform var(--t-med); }
.burger .ico-close{ display:none; }

/* MOBILE DRAWER · открывается при body.nav-open */
@media (max-width:1023px){
  body.nav-open{ overflow:hidden; }
  /* На мобиле .nav-menu и .nav-cta всегда скрыты — используется новый overlay (.mobile-menu) */
  body.nav-open .burger{ background:var(--red); color:#fff; border-color:var(--red); }
  body.nav-open .burger .ico-open{ display:none; }
  body.nav-open .burger .ico-close{ display:block; }
  /* Mobile: hide Behandlungen mega-dropdown — desktop-only feature */
  .nav-dropdown{ display:none !important; }
  .has-dropdown > .dd-trigger .chev{ display:none !important; }
}

/* ===========================================================
   MOBILE MENU — Apple-style overlay (≤1023px)
   slide-down panel + blurred backdrop + staggered item reveal
   =========================================================== */
.mobile-menu{
  position: fixed; inset: 0; z-index: 60;
  visibility: hidden; pointer-events: none;
  transition: visibility 0s linear .5s;
}
.mobile-menu[data-open="true"]{
  visibility: visible; pointer-events: auto;
  transition: visibility 0s linear 0s;
}
.mm-backdrop{
  position: absolute; inset: 0;
  background: rgba(20, 18, 14, .35);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  opacity: 0;
  transition: opacity .42s cubic-bezier(0.32, 0.72, 0, 1);
}
.mobile-menu[data-open="true"] .mm-backdrop{ opacity: 1; }
.mm-panel{
  position: absolute; top: var(--nav-h); left: 0; right: 0;
  max-height: calc(100vh - var(--nav-h));
  max-height: calc(100svh - var(--nav-h));
  background: rgba(250, 250, 246, .96);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  padding: 62px 24px calc(36px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 32px;
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  border-bottom: 1px solid rgba(31,31,29,.06);
  box-shadow: 0 24px 60px -16px rgba(20, 18, 14, .25);
  transform: translateY(-100%);
  transition: transform .55s cubic-bezier(0.32, 0.72, 0, 1);
}
.mobile-menu[data-open="true"] .mm-panel{ transform: translateY(0); }

/* dedicated close (X) button — clearly visible inside the panel
   (the nav burger gets covered by the blurred backdrop when open) */
.mm-close{
  position: absolute; top: 12px; right: 16px; z-index: 3;
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--ink); border: 1px solid var(--line-2);
  cursor: pointer; box-shadow: 0 4px 12px -6px rgba(31,31,29,.14);
  transition: background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), transform var(--t-fast);
}
.mm-close:hover{ background: var(--red); color:#fff; border-color: var(--red); }
.mm-close:active{ transform: scale(.94); }
/* icon must not swallow taps — whole button stays tappable on iOS */
.mm-close svg{ pointer-events: none; }

.mm-nav{ display: flex; flex-direction: column; }
.mm-nav a{
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(28px, 7vw, 36px);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  padding: 14px 0;
  border-bottom: 1px solid rgba(31,31,29,.08);
  display: flex; align-items: center; justify-content: space-between;
  text-decoration: none;
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s cubic-bezier(0.32, 0.72, 0, 1),
              transform .5s cubic-bezier(0.16, 1, 0.3, 1),
              color .2s ease;
}
.mm-nav a:last-child{ border-bottom: 0; }
.mm-nav a .mm-arr{
  font-family: "Inter", sans-serif;
  font-size: 22px; font-weight: 300;
  color: rgba(31,31,29,.3);
  transition: transform .25s var(--ease), color .2s ease;
}
.mm-nav a:hover, .mm-nav a:active{ color: var(--red); }
.mm-nav a:hover .mm-arr, .mm-nav a:active .mm-arr{
  color: var(--red); transform: translateX(6px);
}
.mobile-menu[data-open="true"] .mm-nav a{ opacity: 1; transform: translateY(0); }
.mobile-menu[data-open="true"] .mm-nav a:nth-child(1){ transition-delay: .12s; }
.mobile-menu[data-open="true"] .mm-nav a:nth-child(2){ transition-delay: .17s; }
.mobile-menu[data-open="true"] .mm-nav a:nth-child(3){ transition-delay: .22s; }
.mobile-menu[data-open="true"] .mm-nav a:nth-child(4){ transition-delay: .27s; }
.mobile-menu[data-open="true"] .mm-nav a:nth-child(5){ transition-delay: .32s; }
.mobile-menu[data-open="true"] .mm-nav a:nth-child(6){ transition-delay: .37s; }

.mm-actions{
  display: flex; flex-direction: column; gap: 10px;
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s cubic-bezier(0.32, 0.72, 0, 1),
              transform .5s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0s;
}
.mobile-menu[data-open="true"] .mm-actions{
  opacity: 1; transform: translateY(0); transition-delay: .42s;
}
.mm-phone{
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  text-decoration: none; color: var(--ink);
  transition: transform .2s var(--ease), border-color .2s ease;
}
.mm-phone:active{ transform: scale(0.98); border-color: var(--red); }
.mm-phone-ic{
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--red-soft); color: var(--red);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mm-phone-ic svg{ width: 18px; height: 18px; }
.mm-phone-tx{ display: flex; flex-direction: column; gap: 1px; }
.mm-phone-tx span{
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
}
.mm-phone-tx b{ font-size: 17px; font-weight: 600; color: var(--ink); }
.mm-cta{
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--red); color: #fff;
  padding: 18px; border-radius: 14px;
  font-family: "Inter", sans-serif; font-size: 16px; font-weight: 500;
  text-decoration: none; letter-spacing: 0.01em;
  transition: transform .2s var(--ease), background .2s ease;
}
.mm-cta:active{ transform: scale(0.98); background: var(--red-2); }
.mm-pain{
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 16px;
  background: transparent;
  color: var(--red);
  font-family: "Inter", sans-serif; font-size: 14px; font-weight: 500;
  text-decoration: none; border-radius: 12px;
  border: 1px solid rgba(200,48,44,.25);
  transition: background .2s ease;
}
.mm-pain:active{ background: var(--red-soft); }
.mm-pain svg{ width: 14px; height: 14px; }

.mm-meta{
  padding-top: 20px;
  border-top: 1px solid rgba(31,31,29,.08);
  display: flex; flex-direction: column; gap: 6px;
  font-family: "Inter", sans-serif;
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s cubic-bezier(0.32, 0.72, 0, 1),
              transform .5s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0s;
}
.mobile-menu[data-open="true"] .mm-meta{
  opacity: 1; transform: translateY(0); transition-delay: .52s;
}
.mm-langs{
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  color: var(--ink-2); text-transform: uppercase;
  display: flex; gap: 8px; flex-wrap: wrap;
}
.mm-langs span{
  padding: 4px 8px; border-radius: 4px;
  background: rgba(31,31,29,.05);
}
.mm-langs span.active{ background: var(--ink); color: #fff; }
.mm-hours{
  font-size: 12px; color: var(--ink-3); letter-spacing: 0.02em;
}

/* Lock body scroll when menu open */
body.nav-open{ overflow: hidden; }

@media (min-width: 1024px){
  .mobile-menu{ display: none; }
}

/* RESPONSIVE
   <1024: только бургер
   1024-1199: меню + Termin (phone иконка, notfall скрыт)
   1200-1399: + phone-номер видимый, notfall как иконка-точка
   ≥1400: всё максимально + arrow на CTA */
@media (min-width:768px){
  .brand-text{ display:flex; }
}
@media (min-width:1024px){
  .nav-menu{ display:flex; }
  .nav-cta{ display:flex; }
  .burger{ display:none; }
  .nav-phone{ display:inline-flex; }
}
@media (min-width:1280px){
  .nav-notfall{ display:inline-flex; }
}
@media (min-width:1600px){
  .nav-phone .np-text{ display:inline; }
  .brand-claim-top{ font-size:21px; }
  .brand-subline{ font-size:10.5px; }
  .brand-mark{ height:34px; }
  .nav-cta .btn{ padding:12px 20px; min-height:44px; font-size:14px; }
  .nav-cta .btn .arr{ display:inline-block; }
}

/* ===========================================================
   HERO (02) — full-screen photo background
   =========================================================== */
.hero{
  position:relative; overflow:hidden;
  /* subtract the sticky nav height so hero + nav = exactly one viewport */
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
  display:flex; align-items:flex-start;
  color:#fff;
  isolation:isolate;
  /* small top padding — the 84px sticky nav already provides clearance above */
  padding-top: clamp(24px, 3vw, 40px);
}
.hero-bg{
  position:absolute; inset:0; z-index:0;
}
.hero-bg img{
  width:100%; height:100%; object-fit:cover;
  filter: saturate(.95) contrast(1.04);
}
.hero-bg::after{
  /* warm overlay для читаемости текста + brand-tint */
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(20,18,14,.30) 0%, rgba(20,18,14,.10) 35%, rgba(20,18,14,.55) 100%),
    linear-gradient(90deg, rgba(20,18,14,.55) 0%, rgba(20,18,14,.18) 50%, rgba(20,18,14,0) 100%);
}
.hero-content{
  position:relative; z-index:1;
  width:100%;
  /* bottom padding must exceed the appointment-widget's negative margin
     (--pad-y-sm, up to 60px) so the trust-bar isn't hidden behind it */
  padding-block: 0 clamp(64px, 6vw, 72px);
  display:flex; flex-direction:column; gap: clamp(48px, 5.6vw, 80px);
  min-height: calc(100vh - var(--nav-h) - clamp(24px, 3vw, 40px));
  min-height: calc(100svh - var(--nav-h) - clamp(24px, 3vw, 40px));
}
/* trust-bar position is controlled by the detailed .hero-trust rule below */
.hero-inner{
  display:grid; gap: clamp(14px, 1.8vw, 22px);
  max-width: 720px;
}
.hero-greet{
  font-family: "Caveat", "Cormorant Garamond", cursive;
  font-size: clamp(34px, 4.4vw, 48px);
  font-weight: 600; line-height: 1;
  color: #fff; display: inline-block;
  transform: rotate(-3deg) translateX(-4px);
  margin-bottom: 4px;
  text-shadow: 0 2px 14px rgba(200,48,44,.45), 0 1px 2px rgba(0,0,0,.2);
}
.hero-eyebrow{
  font-family:"Inter",sans-serif; font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:.22em; color:#fff;
  display:inline-flex; align-items:center; gap:12px;
}
.hero-eyebrow::before{ content:""; width:32px; height:1.5px; background:var(--red); }
.hero h1{
  margin:0; color:#fff;
  font-family:"Cormorant Garamond", serif; font-weight:500;
  font-size: clamp(54px, 9vw, 120px); line-height:1.05; letter-spacing:-.022em;
  text-wrap: balance;
  font-variant-ligatures: none; /* отключаем декоративные лигатуры italic */
}
.hero h1 .accent{
  color:#fff; font-style:italic; font-weight:500;
  position:relative;
  padding-bottom: .008em;       /* underline hugs the word (~1px) */
  background-image: linear-gradient(var(--red), var(--red));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 4px;
  text-decoration: none;
}
.hero-subline{
  font-size: clamp(16px, 1.4vw, 19px); color: rgba(255,255,255,.92);
  line-height:1.55; max-width: 56ch; margin:0;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.hero-ctas{ display:flex; flex-wrap:wrap; gap:12px; }

/* trust-row внизу hero */
.hero-trust{
  position:relative; z-index:1;
  margin-top: 0;                 /* sit right below the CTAs, not glued to bottom */
  width:100%;
  padding-top: 0;
}
.hero-trust-inner{
  display:flex; align-items:center; flex-wrap:wrap;
  gap: clamp(14px, 2vw, 28px);
  padding-top: var(--s-2); padding-bottom: 0;
  border-top: 1px solid rgba(255,255,255,.16);
}
.hero-trust .stars-block{
  display:inline-flex; align-items:center; gap:10px;
  color:#fff; font-size:13px; line-height:1.2;
}
.hero-trust .stars-block .stars{ color: var(--gold); font-size:15px; letter-spacing:.04em; }
.hero-trust .stars-block b{ font-weight:600; }
.hero-trust .stars-block small{ color: rgba(255,255,255,.7); font-weight:400; }
.hero-trust-sep{
  width:1px; height:18px; background: rgba(255,255,255,.22); display:none;
}
@media (min-width:600px){ .hero-trust-sep{ display:inline-block; } }
.hero-trust-badges{ display:flex; gap:6px; flex-wrap:wrap; }
.hero-trust-badges .badge{
  background: rgba(255,255,255,.12); color:#fff;
  border:1px solid rgba(255,255,255,.22);
  padding: 5px 11px; border-radius: var(--r-pill);
  font-size:12px; font-weight:500; letter-spacing:.02em;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.hero-trust-badges .badge-yellow{
  background: var(--yellow); color: var(--ink);
  border-color: var(--yellow-2); font-weight: 700; letter-spacing: .03em;
  padding: 6px 14px;
  box-shadow: 0 4px 14px rgba(245, 200, 66, .55);
}

/* scroll-indicator — hidden: the peeking appointment widget already serves
   as the scroll cue (kept in markup so it can be re-enabled from the admin) */
.hero-scroll{ display:none; }
.hero-scroll::after{
  content:""; width:1px; height:26px;
  background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0));
  animation: scrollHint 1.8s ease-in-out infinite;
}
@keyframes scrollHint{
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* live-tag над фото в углу */
.hero-live{
  position:absolute; right: clamp(16px, 3vw, 36px); top: clamp(96px, 13vw, 140px);
  z-index:2;
  display:inline-flex; align-items:center; gap:8px;
  background: rgba(255,255,255,.94); backdrop-filter: blur(8px);
  padding:7px 12px; border-radius:var(--r-pill);
  font-size:12px; font-weight:600; color: var(--ink);
}
.hero-live::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--ink-3);
  animation: pulse 2s infinite;
  flex-shrink:0;
}
/* OPEN — зелёная пульсирующая точка */
.hero-live.is-open::before{
  background:#1ea65a;
  box-shadow: 0 0 0 0 rgba(30,166,90,.6);
  animation: pulse-ring-green 1.8s infinite;
}
.hero-live.is-open{ color:#0a4a2a; }
/* CLOSED — красная пульсирующая точка */
.hero-live.is-closed::before{
  background:var(--red);
  box-shadow: 0 0 0 0 rgba(200,48,44,.6);
  animation: pulse-ring-red 1.8s infinite;
}
.hero-live.is-closed{ color:var(--red-2); }

@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }
@keyframes pulse-ring-green{
  0%   { box-shadow: 0 0 0 0   rgba(30,166,90,.6); }
  70%  { box-shadow: 0 0 0 12px rgba(30,166,90,0); }
  100% { box-shadow: 0 0 0 0   rgba(30,166,90,0); }
}
@keyframes pulse-ring-red{
  0%   { box-shadow: 0 0 0 0   rgba(200,48,44,.6); }
  70%  { box-shadow: 0 0 0 12px rgba(200,48,44,0); }
  100% { box-shadow: 0 0 0 0   rgba(200,48,44,0); }
}
@media (max-width: 768px){
  /* lift the status badge into the top-right corner, above the eyebrow line,
     so it no longer overlaps the headline text */
  .hero-live{
    top: clamp(8px, 2.4vw, 14px);
    right: clamp(12px, 3vw, 16px);
    padding: 6px 11px; font-size: 11px;
  }
}

/* hero h1 на мобилке чуть короче */
@media (max-width: 640px){
  .hero h1{ font-size: clamp(44px, 13vw, 64px); }
}

/* ===========================================================
   HERO → WELCOME smile transition (single unified arc)
   One SVG containing both shapes. The red brush is drawn so its tips
   sit EXACTLY on the beige curve at x=300 and x=900 (viewBox 0–1200),
   so the beige arc visually extends outward from the brush as one line.
   =========================================================== */
.hero-bottom-smile{ display:none; /* ровный переход hero → welcome */ }
.hero-bottom-smile.is-hidden{
  position:absolute; left:0; bottom:-1px; width:100%;
  height: clamp(90px, 13.5vw, 200px);
  z-index:4; pointer-events:none; display:block;
}
.hero-bottom-smile svg{ width:100%; height:100%; display:block; filter: drop-shadow(0 4px 14px rgba(200,48,44,.16)); }


/* ============== FLOATING APPOINTMENT WIDGET ============== */
.appointment-widget{
  position:relative; margin-top:calc(-1 * var(--pad-y-sm));
  z-index:5;
}
.appointment-widget-inner{
  background:#fff; border-radius:var(--r-xl); box-shadow:var(--shadow-3);
  padding: clamp(20px, 3vw, 32px);
  display:grid; gap:var(--s-4);
  grid-template-columns: 1fr;
  border:1px solid var(--line);
}
@media (min-width:768px){
  .appointment-widget-inner{ grid-template-columns: 1.4fr 1fr 1fr auto; align-items:center; }
}
.aw-block{ display:flex; flex-direction:column; gap:6px; }
.aw-block + .aw-block{ padding-top:var(--s-4); border-top:1px solid var(--line); }
@media (min-width:768px){
  .aw-block + .aw-block{ padding-top:0; border-top:0; padding-left:var(--s-5); border-left:1px solid var(--line); }
}
.aw-label{ font-size:var(--fs-12); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); font-weight:600; }
.aw-value{ font-family:"Cormorant Garamond",serif; font-size:var(--fs-22); font-weight:600; color:var(--ink); }
.aw-value a{ color:var(--ink); }
.aw-value a:hover{ color:var(--red); }
.aw-value small{ font-family:"Inter",sans-serif; font-size:var(--fs-13); font-weight:400; color:var(--ink-3); display:block; margin-top:2px; }
.aw-cta{ margin-top:var(--s-2); }

/* ============== WELCOME ============== */
.welcome{
  background: var(--bg);
  position:relative; overflow:hidden;
  padding-block: var(--pad-y);
}
.welcome::before{
  /* декоративная улыбка справа сверху, beige-2 — зеркальная к hero */
  content:""; position:absolute; right:-180px; top:-20px;
  width:620px; height:160px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 250' preserveAspectRatio='none'%3E%3Cpath d='M0,80 C360,258 1080,258 1440,80 C1080,200 360,200 0,80 Z' fill='%23efe7d8'/%3E%3C/svg%3E");
  background-size:100% 100%; background-repeat:no-repeat;
  transform:rotate(8deg); opacity:.6;
  pointer-events:none;
}
.welcome::after{
  /* вторая улыбка слева снизу, red-soft tint, для симметрии с hero */
  content:""; position:absolute; left:-200px; bottom:60px;
  width:520px; height:130px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 250' preserveAspectRatio='none'%3E%3Cpath d='M0,80 C360,258 1080,258 1440,80 C1080,200 360,200 0,80 Z' fill='%23f4d9d8'/%3E%3C/svg%3E");
  background-size:100% 100%; background-repeat:no-repeat;
  transform:rotate(-10deg); opacity:.5;
  pointer-events:none;
}
.welcome-grid{
  display:grid; gap:var(--s-8); align-items:center; position:relative;
  grid-template-columns: 1fr;
}
@media (min-width:1024px){ .welcome-grid{ grid-template-columns: 1fr 1fr; gap:var(--s-9); } }
.welcome-text{ display:flex; flex-direction:column; gap:var(--s-4); }
.welcome-text h2 .script{ display:block; font-size:.5em; margin-bottom:var(--s-2); transform:rotate(-2deg); }
.welcome-intro{ font-size:var(--fs-16); color:var(--ink-2); line-height:1.7; }
.welcome-points{ display:grid; gap:var(--s-4); margin-top:var(--s-4); grid-template-columns:repeat(2,1fr); }
.welcome-point{ display:flex; gap:var(--s-3); align-items:flex-start; }
.welcome-point .icon-circle{ width:52px; height:52px; background:#fff; }
.welcome-point .icon-circle .ico{ width:22px; height:22px; }
.welcome-point .icon-circle::before{ inset:-4px; }
/* отменяем глобальный hover-эффект на welcome-points (фон должен оставаться белым, иконка красной) */
.welcome-point:hover > .icon-circle{ background:#fff; color:var(--red); transform:none; }
.welcome-point:hover > .icon-circle::before{ transform:none; }
.welcome-point .pt-title{ font-family:"Cormorant Garamond",serif; font-weight:600; font-size:var(--fs-18); line-height:1.2; }
.welcome-point .pt-sub{ font-size:var(--fs-13); color:var(--ink-3); }

/* Mobile: welcome-points в 1 колонку, компактные горизонтальные карточки */
@media (max-width:559px){
  .welcome-points{ grid-template-columns: 1fr; gap: 12px; margin-top: 20px; }
  .welcome-point{ gap: 12px; align-items: center; }
  .welcome-point .icon-circle{ width: 42px; height: 42px; }
  .welcome-point .icon-circle::before{ inset: -3px; }
  .welcome-point .icon-circle .ico{ width: 18px; height: 18px; }
  .welcome-point .pt-title{ font-size: 16px; }
  .welcome-point .pt-sub{ font-size: 12.5px; }
}

.welcome-image{
  position:relative; aspect-ratio: 4/5; border-radius:var(--r-xl);
  overflow:hidden; box-shadow:var(--shadow-2);
}
.welcome-image img{ width:100%; height:100%; object-fit:cover; }
.welcome-image .lang-badge{
  position:absolute; left:24px; top:24px;
  background:#fff; padding:10px 18px; border-radius:var(--r-pill);
  font-size:var(--fs-13); font-weight:600; box-shadow:var(--shadow-1);
  display:flex; gap:6px; align-items:center;
}
.welcome-image .lang-badge::before{ content:"💬"; font-size:14px; }

/* ============== TREATMENTS ============== */
.treatments{ background:var(--paper); position:relative; }

.treatments-grid{
  display:grid; gap:var(--s-3);
  grid-template-columns: repeat(2, 1fr);  /* mobile default: 2 col compact */
}
@media (min-width:560px){ .treatments-grid{ gap:var(--s-4); } }
@media (min-width:768px){ .treatments-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width:1280px){ .treatments-grid{ grid-template-columns: repeat(4, 1fr); } }

/* Mobile (≤559px): максимально компактные tile-карточки.
   Только иконка + название. Описание в modal. */
@media (max-width:559px){
  .treatments-grid{
    gap: 8px;
    align-items: start;   /* плитки сжимаются по контенту, без пустого места */
    grid-auto-rows: min-content;
  }
  .treatment-card{
    padding: 10px 10px 12px !important;
    border-radius: 12px;
    text-align: center;
    align-items: center;
    gap: 6px !important;
    position: relative;
    cursor: pointer;
    min-height: 0;
    height: fit-content;
  }
  .treatment-card .tr-head{
    flex-direction: column; align-items: center;
    width: 100%; justify-content: center;
  }
  .treatment-card .tr-head .tag{ display: none; }
  /* Без пунктирного круга на мобиле — экономим место и визуальный шум */
  .treatment-card .icon-circle{
    width: 36px; height: 36px;
    background: var(--red-soft); color: var(--red);
  }
  .treatment-card .icon-circle::before{ display: none; }
  .treatment-card .icon-circle .ico{ width: 18px; height: 18px; }
  .treatment-card .tr-title{
    font-size: 13px; line-height: 1.2; margin: 0; font-weight: 600;
    text-align: center;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    letter-spacing: -.01em;
  }
  /* Скрыть teaser и "Mehr erfahren" на мобиле */
  .treatment-card .tr-teaser{ display: none !important; }
  .treatment-card .tr-link{ display: none !important; }
  .treatment-card::after{ display: none; }
  /* Микро-chevron в углу */
  .treatment-card::before{
    content: ""; position: absolute; right: 8px; top: 8px;
    width: 11px; height: 11px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8302c' stroke-width='2.6' stroke-linecap='round'><path d='M7 17 17 7M9 7h8v8'/></svg>") center/contain no-repeat;
    opacity: .3;
  }
}

.treatment-card{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); padding: clamp(20px, 2.4vw, 32px);
  display:flex; flex-direction:column; gap:var(--s-4);
  transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
  position:relative; overflow:hidden;
}
.treatment-card::after{
  content:""; position:absolute; right:-20px; bottom:-20px;
  width:126px; height:84px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 120' preserveAspectRatio='none'%3E%3Cpath d='M0,18 C36,107 144,107 180,18 C144,82 36,82 0,18 Z' fill='%23efe7d8'/%3E%3C/svg%3E");
  background-size:100% 100%; background-repeat:no-repeat;
  opacity:0; transition:opacity var(--t-med), transform var(--t-med);
  pointer-events:none;
}
.treatment-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-2); border-color:transparent; }
.treatment-card:hover::after{ opacity:1; transform: scale(1.15) translate(-8px,-8px); }
.treatment-card > *{ position:relative; z-index:1; }
.tr-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); }
.tr-title{ font-family:"Cormorant Garamond",serif; font-weight:600; font-size:var(--fs-22); line-height:1.2; }
.tr-teaser{ font-size:var(--fs-14); color:var(--ink-2); line-height:1.55; }
.tr-link{ margin-top:auto; padding-top:var(--s-3);
  display:inline-flex; align-items:center; gap:8px;
  font-size:var(--fs-13); font-weight:600; color:var(--red); letter-spacing:.04em;
  text-transform:uppercase;
}
.tr-link .arr{ transition:transform var(--t-fast); }
.treatment-card:hover .tr-link .arr{ transform:translateX(4px); }

.treatments-hint{
  margin-top:var(--s-7); padding:var(--s-5); border-radius:var(--r-md);
  background: var(--note-bg); border:1px dashed var(--note); color:var(--note);
  font-size:var(--fs-14); display:flex; align-items:flex-start; gap:var(--s-3);
}
.treatments-hint svg{ flex-shrink:0; color:var(--note); }

.smile-cloud{
  margin-top:var(--s-8); display:grid; gap:var(--s-7); align-items:center;
  grid-template-columns: 1fr;
  background: var(--beige-2); border-radius:var(--r-xl);
  padding: clamp(24px, 3vw, 48px);
}
@media (min-width:1024px){ .smile-cloud{ grid-template-columns: 1.2fr 1fr; } }
.smile-cloud-text h3{ margin-bottom:var(--s-3); }
.smile-cloud-text p{ color:var(--ink-2); font-size:var(--fs-15); line-height:1.6; max-width:54ch; }
.smile-cloud-media{
  aspect-ratio:4/3; border-radius:var(--r-lg); overflow:hidden;
  background:var(--beige-deep); position:relative;
}
.smile-cloud-media img{ width:100%; height:100%; object-fit:cover; }
.smile-cloud-media .play{
  position:absolute; inset:0; display:grid; place-items:center;
}
.smile-cloud-media .play span{
  width:72px; height:72px; border-radius:50%; background:rgba(255,255,255,.95);
  display:grid; place-items:center; color:var(--red); box-shadow:var(--shadow-2);
}

/* ============== TEAM ============== */
.team{ background:var(--bg); position:relative; }
.team-grid{
  display:grid; gap:var(--s-5);
  grid-template-columns: 1fr;
}
@media (min-width:640px){ .team-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width:1024px){ .team-grid{ grid-template-columns: repeat(3, 1fr); } }

.doctor-card{
  background:#fff; border-radius:var(--r-xl); overflow:hidden;
  box-shadow:var(--shadow-1); transition: transform var(--t-med), box-shadow var(--t-med);
  display:flex; flex-direction:column;
}
.doctor-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-2); }
.doctor-portrait{
  position:relative; aspect-ratio: 4/5; overflow:hidden; background:var(--beige);
}
.doctor-portrait img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.doctor-card:hover .doctor-portrait img{ transform:scale(1.05); }
.doctor-portrait .langs{
  position:absolute; left:14px; bottom:14px; display:flex; gap:4px;
}
.doctor-portrait .langs span{
  background:rgba(255,255,255,.92); color:var(--ink); font-size:11px; font-weight:600;
  padding:4px 8px; border-radius:var(--r-pill); letter-spacing:.04em;
}
.doctor-info{ padding: var(--s-5) var(--s-5) var(--s-6); display:flex; flex-direction:column; gap:var(--s-3); }
.doctor-name{ font-family:"Cormorant Garamond",serif; font-size:var(--fs-28); font-weight:600; line-height:1.05; }
.doctor-role{ font-size:var(--fs-13); color:var(--red); font-weight:500; letter-spacing:.05em; text-transform:uppercase; }
.doctor-fokus{ display:flex; flex-direction:column; gap:6px; margin-top:var(--s-2); border-top:1px solid var(--line); padding-top:var(--s-3); }
.doctor-fokus li{
  list-style:none; font-size:var(--fs-14); color:var(--ink-2); line-height:1.4;
  display:flex; align-items:flex-start; gap:8px;
}
.doctor-fokus li::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--red); margin-top:8px; flex-shrink:0; }

.team-strip-wrap{
  position:relative; margin-top:var(--s-8);
}
.team-strip{
  display:flex; gap:var(--s-3);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding-bottom:var(--s-2);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.team-strip::-webkit-scrollbar{ display:none; }
.team-strip .ts-img{
  flex-shrink:0; scroll-snap-align:start;
  aspect-ratio: 4/5;
  width: calc((100% - var(--s-3)) / 2);
  border-radius:var(--r-md); overflow:hidden; background:var(--beige);
  transition: transform var(--t-med);
}
@media (min-width:640px){ .team-strip .ts-img{ width: calc((100% - var(--s-3) * 2) / 3); } }
@media (min-width:1024px){ .team-strip .ts-img{ width: calc((100% - var(--s-3) * 5) / 6); } }
.team-strip .ts-img:hover{ transform:scale(1.04); }
.team-strip img{ width:100%; height:100%; object-fit:cover; object-position:center top; }

/* arrow-buttons по бокам слайдера */
.team-strip-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  background:#fff; border:1px solid var(--line); color:var(--ink);
  display:grid; place-items:center;
  box-shadow:var(--shadow-2);
  cursor:pointer; z-index:5;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.team-strip-arrow:hover{ background:var(--red); color:#fff; border-color:var(--red); }
.team-strip-arrow:active{ transform: translateY(-50%) scale(.95); }
.team-strip-arrow svg{ width:18px; height:18px; }
.team-strip-arrow.prev{ left:-22px; }
.team-strip-arrow.next{ right:-22px; }
@media (max-width:768px){ .team-strip-arrow{ display:none; } }

.team-strip-caption{ text-align:center; margin-top:var(--s-4); color:var(--ink-2); font-style:italic; font-family:"Cormorant Garamond",serif; font-size:var(--fs-18); }

/* Name label over each team-strip photo (Praxisteam) */
.team-strip .ts-img{ position:relative; }
.team-strip .ts-name{
  position:absolute; left:0; right:0; bottom:0;
  padding: 20px 12px 10px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 100%);
  color:#fff; font-family:"Inter",sans-serif;
  display:flex; flex-direction:column; gap:1px;
  letter-spacing: .005em;
  pointer-events:none;
}
.team-strip .ts-name b{ font-weight:600; font-size:13px; line-height:1.25; }
.team-strip .ts-name span{ font-size:11px; opacity:.82; font-weight:400; }

/* ============== DENTOSOPHIE ============== */
.dento{ background:var(--beige); position:relative; overflow:hidden; }
.dento::before{
  content:""; position:absolute; left:-200px; top:-100px; width:520px; height:520px; border-radius:50%;
  background: radial-gradient(circle, rgba(200,48,44,.06), transparent 70%);
}
.dento-grid{
  display:grid; gap:var(--s-8); align-items:center; position:relative;
  grid-template-columns: 1fr;
}
@media (min-width:1024px){ .dento-grid{ grid-template-columns: 1fr 1.1fr; } }
.dento-image{
  position:relative; aspect-ratio:4/5; border-radius:var(--r-xl); overflow:hidden;
  box-shadow:var(--shadow-2); order:-1;
}
.dento-image img{ width:100%; height:100%; object-fit:cover; }
@media (min-width:1024px){ .dento-image{ order:0; } }
.dento-text{ display:flex; flex-direction:column; gap:var(--s-4); }
.dento-symptoms{
  list-style:none; padding:0; margin:var(--s-3) 0 0;
  display:grid; gap:var(--s-2); grid-template-columns:repeat(2, 1fr);
}
.dento-symptoms li{
  padding:12px 16px; background:rgba(255,255,255,.6);
  border-radius:var(--r-pill); font-size:var(--fs-14); color:var(--ink); border:1px solid var(--beige-deep);
  display:flex; gap:8px; align-items:center;
}
.dento-symptoms li::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--red); flex-shrink:0; }

.dento-audience{
  display:grid; grid-template-columns: repeat(2, 1fr);
  gap:var(--s-3);
  margin-top:var(--s-4); padding-top:var(--s-4); border-top:1px solid var(--beige-deep);
}
@media (min-width:768px){
  .dento-audience{ grid-template-columns: repeat(4, 1fr); gap:var(--s-4); }
}
.audience-chip{ display:flex; align-items:center; gap:10px; }
.audience-chip .icon-circle{ width:48px; height:48px; background:#fff; }
.audience-chip .icon-circle::before{ inset:-4px; }
.audience-chip .icon-circle .ico{ width:22px; height:22px; }
.audience-chip span{ font-size:var(--fs-14); font-weight:500; }

/* ============== REVIEWS · Google-Premium-Stil ============== */
.reviews{ background:var(--paper); position:relative; }
.reviews-grid{
  display:grid; gap:var(--s-5);
  grid-template-columns: 1fr;
  align-items:start;
}
@media (min-width:1024px){ .reviews-grid{ grid-template-columns: .85fr 2fr; gap:var(--s-7); } }

/* Google-Score-Card — близко к настоящему Google Reviews tile */
.gscore{
  background:#fff; border:1px solid #e5e7eb; border-radius:16px;
  padding: clamp(24px, 2.6vw, 32px);
  display:flex; flex-direction:column; gap:var(--s-3);
  box-shadow: 0 1px 2px rgba(60,64,67,.08), 0 1px 3px 1px rgba(60,64,67,.06);
  font-family:"Inter","Roboto","Arial",sans-serif;
}
.gscore-head{ display:flex; align-items:center; gap:10px; }
.gscore-logo{ width:24px; height:24px; flex-shrink:0; }
.gscore-title{
  font-size:14px; font-weight:500; color:#5f6368; letter-spacing:.005em;
  display:flex; align-items:center; gap:6px;
}
.gscore-title strong{ color:#202124; font-weight:500; }
.gscore-verified{
  margin-left:auto; display:inline-flex; align-items:center; gap:4px;
  font-size:11px; color:#1a73e8; font-weight:500;
}
.gscore-verified svg{ width:14px; height:14px; }
.gscore-main{ display:flex; align-items:flex-end; gap:16px; padding:8px 0; }
.gscore-num{
  font-family:"Inter","Arial",sans-serif;
  font-size:64px; font-weight:400; color:#202124; line-height:1;
  letter-spacing:-.02em;
}
.gscore-side{ display:flex; flex-direction:column; gap:4px; padding-bottom:6px; }
.gstars{ display:inline-flex; gap:2px; }
.gstars svg{ width:18px; height:18px; }
.gstars .star{ fill:#fbbc04; }
.gstars .star-empty{ fill:#dadce0; }
.gscore-count{ font-size:13px; color:#5f6368; }
.gscore-bars{ display:flex; flex-direction:column; gap:6px; padding-top:8px; }
.gbar-row{ display:grid; grid-template-columns: 12px 1fr 32px; gap:8px; align-items:center; font-size:12px; color:#5f6368; }
.gbar-num{ font-weight:500; color:#202124; }
.gbar-track{ display:block; height:8px; background:#f1f3f4; border-radius:4px; overflow:hidden; }
.gbar-fill{ display:block; height:100%; background:#fbbc04; border-radius:4px; transition: width .6s var(--ease); }
.gbar-pct{ text-align:right; font-variant-numeric: tabular-nums; }
.gscore-link{
  margin-top:var(--s-3); padding-top:var(--s-3); border-top:1px solid #e8eaed;
  display:inline-flex; align-items:center; gap:6px;
  font-size:14px; color:#1a73e8; font-weight:500;
}
.gscore-link:hover{ text-decoration:underline; }
.gscore-link svg{ width:16px; height:16px; }

/* Review-Cards · в стиле Google Maps reviews */
.review-cards{ display:grid; gap:var(--s-4); grid-template-columns:1fr; }
@media (min-width:768px){ .review-cards{ grid-template-columns:repeat(3, 1fr); } }
.greview{
  background:#fff; border:1px solid #e8eaed; border-radius:16px;
  padding: 22px 22px 20px; display:flex; flex-direction:column; gap:12px;
  position:relative; transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
  font-family:"Inter","Roboto","Arial",sans-serif;
  box-shadow: 0 1px 2px rgba(60,64,67,.04);
}
.greview:hover{
  transform:translateY(-4px);
  box-shadow: 0 6px 16px -4px rgba(60,64,67,.18), 0 2px 6px rgba(60,64,67,.08);
  border-color:#dadce0;
}
.greview-head{ display:flex; align-items:center; gap:12px; }
.greview-ava{
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; color:#fff; font-weight:500; font-size:16px;
  flex-shrink:0; font-family:"Roboto","Inter","Arial",sans-serif;
}
.greview-ava--blue{ background:linear-gradient(135deg, #1a73e8, #4285F4); }
.greview-ava--red{ background:linear-gradient(135deg, #ea4335, #d33b2c); }
.greview-ava--green{ background:linear-gradient(135deg, #34a853, #1e8e3e); }
.greview-ava--yellow{ background:linear-gradient(135deg, #fbbc04, #f9ab00); }
.greview-ava--purple{ background:linear-gradient(135deg, #9334e8, #7b2cbf); }
.greview-who{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.greview-name{ font-size:14px; font-weight:500; color:#202124; line-height:1.2; }
.greview-meta{ font-size:12px; color:#5f6368; }
.greview-meta a{ color:#5f6368; }
.greview-meta a:hover{ color:#1a73e8; }
.greview-google{
  margin-left:auto; display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; flex-shrink:0;
}
.greview-google svg{ width:18px; height:18px; }
.greview-rating{ display:flex; align-items:center; gap:8px; }
.greview-rating .gstars svg{ width:14px; height:14px; }
.greview-time{ font-size:12px; color:#5f6368; }
.greview-text{
  font-size:14px; color:#3c4043; line-height:1.55;
  font-family:"Inter","Roboto","Arial",sans-serif; font-weight:400;
}
.greview-foot{
  display:flex; gap:16px; padding-top:8px; border-top:1px solid #f1f3f4;
  font-size:12px; color:#5f6368;
}
.greview-foot span{ display:inline-flex; align-items:center; gap:4px; }
.greview-foot svg{ width:14px; height:14px; }

/* Logo-Strip — премиум-партнёры с реальными SVG */
.logo-strip{
  margin-top:var(--s-9); padding:var(--s-7) 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  display:flex; flex-direction:column; gap:var(--s-5); align-items:center;
}
.logo-strip-caption{
  text-align:center; font-size:var(--fs-12); color:var(--ink-3);
  letter-spacing:.22em; text-transform:uppercase; font-weight:600;
  display:inline-flex; align-items:center; gap:14px;
}
.logo-strip-caption::before, .logo-strip-caption::after{
  content:""; width:32px; height:1px; background:var(--line-2); display:inline-block;
}
.logo-row{
  display:flex; flex-wrap:wrap; gap: clamp(28px, 4vw, 56px);
  justify-content:center; align-items:center;
}
.partner-logo{
  display:inline-flex; align-items:center; justify-content:center;
  height:36px; min-width:80px;
  filter: grayscale(.3); opacity:.78;
  transition: filter var(--t-med), opacity var(--t-med), transform var(--t-med);
}
.partner-logo:hover{ filter:grayscale(0); opacity:1; transform:translateY(-2px); }
.partner-logo svg, .partner-logo img{ height:100%; width:auto; max-width:100%; }
.partner-logo-text{
  font-weight:700; font-size:22px; letter-spacing:-.02em;
  font-family:"Inter","Helvetica",sans-serif;
}

/* ============== PROZESS ============== */
.prozess{ background:var(--bg); position:relative; }
.steps-grid{
  display:grid; gap:var(--s-5);
  grid-template-columns: 1fr;
  position:relative;
}
@media (min-width:768px){ .steps-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width:1024px){ .steps-grid{ grid-template-columns: repeat(4, 1fr); } }
.step-card{
  background:#fff; border-radius:var(--r-lg); padding: var(--s-5);
  display:flex; flex-direction:column; gap:var(--s-3);
  border:1px solid var(--line); position:relative; transition: transform var(--t-med), box-shadow var(--t-med);
}
.step-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-2); }
.step-num{
  width:64px; height:64px; border-radius:50%; background:var(--beige-2);
  color:var(--red); font-family:"Cormorant Garamond",serif; font-weight:600; font-size:32px;
  display:flex; align-items:center; justify-content:center;
  text-align:center; line-height:1; flex-shrink:0;
  position:relative;
  /* Cormorant numerals haben ungleiche side-bearings (besonders "1") —
     mit lining + tabular numerals gleichen wir auf Quadrat-Breite aus,
     und ein winziger padding-bottom hebt die Baseline optisch in die Kreismitte */
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum", "tnum";
  padding-bottom: 3px;
}
.step-num::before{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:1.5px dashed var(--line-2); opacity:.6;
}
.step-card:hover .step-num{ background:var(--red); color:#fff; }
.step-title{ font-family:"Cormorant Garamond",serif; font-weight:600; font-size:var(--fs-22); line-height:1.2; }
.step-text{ font-size:var(--fs-14); color:var(--ink-2); line-height:1.55; }
@media (min-width:1024px){
  .step-card:not(:last-child)::after{
    content:""; position:absolute; right:-26px; top:48px; width:32px; height:1.5px;
    background: repeating-linear-gradient(90deg, var(--line-2) 0, var(--line-2) 4px, transparent 4px, transparent 8px);
  }
}
.pain-hint{
  margin-top: var(--s-7); padding: 20px 24px; border-radius: var(--r-md);
  background: var(--red-soft); color: var(--red-2);
  display: flex; align-items: center; gap: var(--s-4); justify-content: space-between;
  font-weight: 500;
  border: 1px solid rgba(200,48,44,.18);
}
.pain-hint-body{
  display: flex; align-items: center; gap: 14px;
  flex: 1; min-width: 0;
}
.pain-hint-ic{
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; color: var(--red);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pain-hint-ic svg{ width: 22px; height: 22px; }
.pain-hint-tx{ font-size: var(--fs-15); line-height: 1.4; min-width: 0; }
.pain-hint-tx b{ color: var(--red-deep); font-weight: 700; }
.pain-hint-cta{
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--red); color: #fff; padding: 12px 18px; border-radius: var(--r-pill);
  font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: var(--t-fast); flex-shrink: 0;
}
.pain-hint-cta:hover{ background: var(--red-2); transform: translateY(-1px); }
.pain-hint-cta svg{ width: 16px; height: 16px; }

@media (max-width: 599px){
  .pain-hint{
    flex-direction: column; align-items: stretch; gap: 14px;
    padding: 18px;
    text-align: left;
  }
  .pain-hint-body{ gap: 12px; align-items: flex-start; }
  .pain-hint-ic{ width: 38px; height: 38px; }
  .pain-hint-ic svg{ width: 18px; height: 18px; }
  .pain-hint-tx{ font-size: 14px; }
  .pain-hint-cta{ width: 100%; justify-content: center; min-height: 48px; }
}

/* ============== BOOKING (full red) ============== */
.booking{
  background: linear-gradient(180deg, var(--paper) 0%, var(--bg) 100%);
  color: var(--ink); position:relative; overflow:hidden;
}
.booking::before{
  /* декоративная улыбка справа сверху */
  content:""; position:absolute; right:-160px; top:60px;
  width:600px; height:140px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 250' preserveAspectRatio='none'%3E%3Cpath d='M0,80 C360,258 1080,258 1440,80 C1080,200 360,200 0,80 Z' fill='%23f4d9d8'/%3E%3C/svg%3E");
  background-size:100% 100%; background-repeat:no-repeat;
  transform:rotate(-8deg); opacity:.55; pointer-events:none;
}
.booking::after{
  content:""; position:absolute; left:-180px; bottom:60px;
  width:520px; height:130px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 250' preserveAspectRatio='none'%3E%3Cpath d='M0,80 C360,258 1080,258 1440,80 C1080,200 360,200 0,80 Z' fill='%23efe7d8'/%3E%3C/svg%3E");
  background-size:100% 100%; background-repeat:no-repeat;
  transform:rotate(10deg); opacity:.6; pointer-events:none;
}
.booking-inner{
  display:flex; flex-direction:column; gap:var(--s-8); position:relative;
}
.booking-text{ max-width:760px; }
.booking-text h2{ color:var(--ink); }
.booking-text p{ color:var(--ink-2); font-size:var(--fs-18); margin-top:var(--s-3); max-width:60ch; }
.booking-text .eyebrow{ color:var(--red); }
.booking-text .eyebrow::before{ background:var(--red); }

/* две одинаковые карточки рядом — Quick-Box и Medondo-Placeholder */
.booking-cards{
  display:grid; gap:var(--s-5);
  grid-template-columns: 1fr;
  align-items:stretch;
}
@media (min-width:900px){ .booking-cards{ grid-template-columns: 1fr 1fr; gap:var(--s-6); } }

/* общие стили обеих карточек booking */
.booking-card{
  background:#fff; color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-xl);
  padding: clamp(28px, 3vw, 40px);
  box-shadow: 0 4px 14px -4px rgba(31,31,29,.06), 0 28px 56px -24px rgba(31,31,29,.16);
  display:flex; flex-direction:column; gap:var(--s-4);
  min-height: 460px;
  transition: transform var(--t-med), box-shadow var(--t-med);
}
.booking-card:hover{ transform: translateY(-3px); box-shadow: 0 6px 18px -4px rgba(31,31,29,.08), 0 36px 70px -28px rgba(31,31,29,.22); }
.booking-card-head{
  display:flex; align-items:center; gap:14px;
  padding-bottom: var(--s-3); border-bottom:1px solid var(--line);
}
.booking-card-head .ico-wrap{
  width:48px; height:48px; border-radius:50%;
  background:var(--red-soft); color:var(--red);
  display:grid; place-items:center; flex-shrink:0;
  box-shadow: 0 6px 14px -6px rgba(200,48,44,.4);
}
.booking-card-head .ico-wrap svg{ width:22px; height:22px; }
.booking-card-head h3, .booking-card-head h4{
  margin:0; font-family:"Cormorant Garamond",serif; font-weight:600;
  font-size:var(--fs-22); line-height:1.15;
}
.booking-card-head .sub{ font-size:var(--fs-13); color:var(--ink-3); margin-top:2px; }

/* Medondo-карточка */
.medondo-placeholder{
  flex:1; display:flex; flex-direction:column; gap:var(--s-3);
  align-items:center; text-align:center; justify-content:center;
  padding-block: var(--s-4);
}
.medondo-placeholder p{ font-size:var(--fs-14); color:var(--ink-2); max-width:42ch; line-height:1.6; }
.medondo-placeholder .calendar-mock{
  width:100%; max-width:280px; aspect-ratio: 5/3.6;
  background: linear-gradient(180deg, var(--paper) 0%, #fff 100%);
  border:1px solid var(--line); border-radius:var(--r-md);
  display:grid; grid-template-rows: auto 1fr; overflow:hidden;
  margin-bottom: var(--s-3);
}
.calendar-mock .cm-head{
  background:var(--red-soft); color:var(--red);
  font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  padding: 8px 12px; display:flex; justify-content:space-between; align-items:center;
}
.calendar-mock .cm-grid{
  padding: 8px; display:grid; grid-template-columns: repeat(7, 1fr); gap:4px;
}
.calendar-mock .cm-grid span{
  aspect-ratio:1; border-radius:4px; background:var(--paper);
  font-size:10px; font-weight:500; color:var(--ink-3);
  display:grid; place-items:center;
}
.calendar-mock .cm-grid span.dot{ background:var(--red); color:#fff; }
.calendar-mock .cm-grid span.has{ background:var(--red-soft); color:var(--red); }

/* Quick-Box — список контактов внутри booking-card */
.quick-box-grid{ display:flex; flex-direction:column; gap:var(--s-3); flex:1; }
.qb-item{
  display:flex; align-items:center; gap:var(--s-3); padding:14px 18px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
  text-decoration:none;
  color:var(--ink);
}
.qb-item:hover{ background:#fff; border-color:var(--red); transform:translateX(2px); }
.qb-item .ic{ width:42px; height:42px; border-radius:50%; background:var(--red-soft); color:var(--red); display:grid; place-items:center; flex-shrink:0; transition: background var(--t-fast), color var(--t-fast); }
.qb-item:hover .ic{ background:var(--red); color:#fff; }
.qb-item > div{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.qb-item .qi-label{
  display:block;
  font-size:11px; color:var(--ink-3); letter-spacing:.16em;
  text-transform:uppercase; font-weight:600;
  line-height:1.2;
}
/* Wert (Telefon / E-Mail / etc.) — gleicher Stil wie .std-contact a:
   Inter regular weight, NICHT bold — Lesefluss wie in Kontakt-Karte */
.qb-item b{
  display:block;
  font-family:"Inter",sans-serif; font-size:var(--fs-16); font-weight:500;
  color:var(--ink); line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ============== FINANZIERUNG ============== */
.finanz{ background:var(--beige); position:relative; }
.finanz::before{
  content:""; position:absolute; right:0; bottom:0; width:240px; height:240px;
  background-image: radial-gradient(var(--beige-deep) 1.6px, transparent 1.6px);
  background-size: 16px 16px; opacity:.5;
}
.finanz-inner{ display:grid; gap:var(--s-7); align-items:center; grid-template-columns:1fr; }
@media (min-width:1024px){ .finanz-inner{ grid-template-columns: .9fr 1.5fr; } }
.finanz-text h2{ margin-bottom:var(--s-3); }
.finanz-text p{ color:var(--ink-2); font-size:var(--fs-15); line-height:1.6; max-width:42ch; }
.finanz-points{ display:grid; gap:var(--s-4); grid-template-columns:1fr; }
@media (min-width:768px){ .finanz-points{ grid-template-columns:repeat(3, 1fr); } }
.finanz-card{
  background:#fff; border-radius:var(--r-lg); padding: var(--s-5);
  display:flex; flex-direction:column; gap:var(--s-3); border:1px solid var(--line);
  transition: transform var(--t-med), box-shadow var(--t-med);
}
.finanz-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); }
.finanz-card .icon-circle{ width:56px; height:56px; }
.finanz-card .icon-circle .ico{ width:24px; height:24px; }
.finanz-card .icon-circle::before{ inset:-4px; }
.fc-title{ font-family:"Cormorant Garamond",serif; font-weight:600; font-size:var(--fs-22); line-height:1.2; }
.fc-sub{ font-size:var(--fs-14); color:var(--ink-2); }

/* Mobile: компактные финанс-карточки в 1 колонку, иконка слева */
@media (max-width:559px){
  .finanz-card{
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 14px;
    padding: 16px 18px; border-radius: 14px;
    align-items: start;
  }
  .finanz-card .icon-circle{
    grid-row: 1 / span 2; align-self: center;
    width: 44px; height: 44px;
  }
  .finanz-card .icon-circle::before{ inset: -3px; }
  .finanz-card .icon-circle .ico{ width: 20px; height: 20px; }
  .finanz-card .fc-title{ grid-column: 2; grid-row: 1; font-size: 17px; margin: 0; }
  .finanz-card .fc-sub{ grid-column: 2; grid-row: 2; font-size: 13px; margin-top: 2px; }
}

/* ============== KARRIERE ============== */
.karriere{ background:var(--paper); }
.karr-grid{
  display:grid; gap:var(--s-7); align-items:start;
  grid-template-columns: 1fr;
}
.karr-grid > *{ min-width: 0; }                    /* allow children to shrink below their content width */
.karr-form, .karr-form--plugin{ max-width: 100%; }
@media (min-width:1024px){ .karr-grid{ grid-template-columns: 1fr 1fr; gap:var(--s-9); } }
.karr-quote{
  font-family:"Cormorant Garamond",serif; font-style:italic; font-size:var(--fs-28);
  line-height:1.3; color:var(--ink); border-left:3px solid var(--red); padding-left:var(--s-4); margin-block:var(--s-5);
}
.jobs-list{ display:flex; flex-direction:column; gap:var(--s-3); }
.job-row{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-3);
  padding: var(--s-4) var(--s-5); background:#fff; border:1px solid var(--line);
  border-radius:var(--r-pill); transition: transform var(--t-fast), border-color var(--t-fast); cursor:pointer;
}
.job-row:hover{ transform:translateX(4px); border-color:var(--red); }
.job-title{ font-family:"Cormorant Garamond",serif; font-weight:600; font-size:var(--fs-22); }
.job-row .arr{ color:var(--red); transition: transform var(--t-fast); }
.job-row:hover .arr{ transform:translateX(4px); }
.karr-promise{
  margin-top:var(--s-5); padding:var(--s-4); border-radius:var(--r-md);
  background:var(--note-bg); color:var(--note); font-size:var(--fs-14); display:flex; gap:10px; align-items:center;
}

.karr-form{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  padding: clamp(20px, 3vw, 36px); display:flex; flex-direction:column; gap:var(--s-4);
}
/* .karr-form > h3 - margin handled by unified rule below (.karr-form > h3, .karr-form--plugin > h3) */
.karr-form-row{ display:grid; gap:var(--s-3); grid-template-columns: 1fr; }
@media (min-width:640px){ .karr-form-row{ grid-template-columns: 1fr 1fr; } }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:var(--fs-12); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); font-weight:600; }
.field input, .field select, .field textarea{
  font: inherit; padding:13px 16px; border-radius:var(--r-md);
  border:1.5px solid var(--line); background:var(--paper);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--red); background:#fff;
}
.skills-row{ display:flex; flex-wrap:wrap; gap:8px; }
.skills-row label{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:var(--r-pill);
  background:var(--paper); border:1.5px solid var(--line);
  font-size:var(--fs-13); cursor:pointer; transition: all var(--t-fast);
}
.skills-row label:has(input:checked){ background:var(--red); color:#fff; border-color:var(--red); }
.skills-row input{ display:none; }
.privacy-note{ font-size:var(--fs-12); color:var(--ink-3); line-height:1.5; }

/* ============== Karriere: Fluent Forms — re-skin als „karr-form"-Karte ============== */
/* Wir lassen das FF-Markup intakt, schreiben aber alle Styles über, damit das
   Plugin-Formular optisch identisch zum eingebauten Fallback aussieht. */

/* Kompaktere Karte: weniger Padding + kleinere Lücken */
.karr-form.karr-form--plugin{
  padding: clamp(16px, 1.8vw, 22px) !important;
  gap: var(--s-2) !important;
}

/* Form-Überschrift — gleicher Stil wie alle anderen "Card-Titles" (.tr-title, .fc-title, .job-title)
   = Cormorant Garamond Serif 600, --fs-22 (19-24px). NICHT Display-H3 (26-40px), das wäre zu groß
   für einen Block innerhalb einer Section. */
.karr-form > h3,
.karr-form--plugin > h3{
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: var(--fs-22);
  line-height: 1.2;
  letter-spacing: -.008em;
  text-transform: none;
  color: var(--ink);
  margin: 0 0 var(--s-3);
  padding-bottom: 0;
}
.karr-form--plugin > h3::after{ display: none; }

.karr-form--plugin .fluentform{ width: 100%; }
.karr-form--plugin .fluentform form{ display: flex; flex-direction: column; gap: var(--s-2); }
.karr-form--plugin .fluentform fieldset{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-2);
}

/* Field row */
.karr-form--plugin .fluentform .ff-el-group{
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 0 !important;       /* FF default has margin-bottom */
  grid-column: 1 / -1;              /* default: full row */
}

/* Desktop: Vorname/Nachname und E-Mail/Telefon in 2-Spalten-Grid (wie im Fallback) */
@media (min-width: 640px){
  .karr-form--plugin .fluentform fieldset{
    grid-template-columns: 1fr 1fr;
  }
  .karr-form--plugin .fluentform .ff-el-group:has(input[name="first_name"]),
  .karr-form--plugin .fluentform .ff-el-group:has(input[name="last_name"]),
  .karr-form--plugin .fluentform .ff-el-group:has(input[name="email"]),
  .karr-form--plugin .fluentform .ff-el-group:has(input[name="phone"]){
    grid-column: span 1;
  }
}

/* Label */
.karr-form--plugin .fluentform .ff-el-input--label{ padding: 0 !important; }
.karr-form--plugin .fluentform .ff-el-input--label label{
  font-size: var(--fs-12); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600; margin: 0;
}
.karr-form--plugin .fluentform .ff-el-input--label.asterisk-right label::after,
.karr-form--plugin .fluentform .ff-el-is-required label::after{
  color: var(--red); margin-left: 4px;
}
/* Tooltip-icon discreter machen */
.karr-form--plugin .fluentform .ff-el-tooltip{
  width: 14px; height: 14px; opacity: .5; vertical-align: middle;
}
.karr-form--plugin .fluentform .ff-el-tooltip svg{ width: 14px; height: 14px; }

/* Inputs / Select / Textarea — kompakte 38px Höhe */
.karr-form--plugin .fluentform .ff-el-form-control{
  font: inherit !important;
  font-size: var(--fs-14) !important;
  width: 100%;
  padding: 8px 12px !important;
  border-radius: var(--r-md) !important;
  border: 1.5px solid var(--line) !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
  box-shadow: none !important;
  line-height: 1.35;
}
.karr-form--plugin .fluentform textarea.ff-el-form-control{ min-height: 70px; }
.karr-form--plugin .fluentform .ff-el-form-control:focus{
  outline: 3px solid var(--red) !important;
  outline-offset: 2px !important;
  border-color: var(--red) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(200,65,44,.18) !important;
}
.karr-form--plugin .fluentform select.ff-el-form-control{
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235a4f4d' stroke-width='2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 40px !important;
}

/* Skills + DSGVO: pill-Checkboxes wie im Fallback (kompakt) */
.karr-form--plugin .fluentform .ff_list_inline .ff-el-input--content{
  display: flex; flex-wrap: wrap; gap: 6px;
}
.karr-form--plugin .fluentform .ff-el-form-check{
  margin: 0 !important; padding: 0 !important;
}
.karr-form--plugin .fluentform .ff-el-form-check-label{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: var(--r-pill);
  background: var(--paper); border: 1.5px solid var(--line);
  font-size: var(--fs-12); cursor: pointer;
  transition: all var(--t-fast); font-weight: 500;
  color: var(--ink); line-height: 1.2;
}
.karr-form--plugin .fluentform .ff-el-form-check-label:hover{
  border-color: var(--ink-3);
}
.karr-form--plugin .fluentform .ff-el-form-check-input{
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none;
  width: 1px !important; height: 1px !important;
  margin: 0 !important; padding: 0 !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}
.karr-form--plugin .fluentform .ff-el-form-check-label > span{
  display: inline-block; line-height: 1; vertical-align: middle;
}
.karr-form--plugin .fluentform .ff-el-form-check-label:has(input:checked){
  background: var(--red); color: #fff; border-color: var(--red);
}
/* DSGVO-Block: kompakt — kleine sichtbare Checkbox + dezenter Text (wie privacy-note im Fallback) */
.karr-form--plugin .fluentform .ff-el-group:has(input[name="dsgvo[]"]){
  margin-top: 4px;
  padding: 0;
  background: none;
  border: 0;
}
.karr-form--plugin .fluentform .ff-el-group:has(input[name="dsgvo[]"]) .ff-el-input--label{ display: none; }
.karr-form--plugin .fluentform .ff-el-group:has(input[name="dsgvo[]"]) .ff-el-input--content{ display: block; }
.karr-form--plugin .fluentform .ff-el-group:has(input[name="dsgvo[]"]) .ff-el-form-check{
  margin: 0 !important; padding: 0 !important;
}
.karr-form--plugin .fluentform .ff-el-group:has(input[name="dsgvo[]"]) .ff-el-form-check-label{
  background: transparent !important; border: 0 !important; padding: 0 !important;
  font-size: var(--fs-12); color: var(--ink-3) !important;
  line-height: 1.5; cursor: pointer; font-weight: 400;
  display: inline-flex !important; align-items: flex-start; gap: 8px;
}
.karr-form--plugin .fluentform .ff-el-group:has(input[name="dsgvo[]"]) .ff-el-form-check-label:hover,
.karr-form--plugin .fluentform .ff-el-group:has(input[name="dsgvo[]"]) .ff-el-form-check-label:has(input:checked){
  background: transparent !important; border: 0 !important; color: var(--ink-3) !important;
}
/* Sichtbare Box — den globalen "unsichtbar machen"-Reset überschreiben */
.karr-form--plugin .fluentform .ff-el-group:has(input[name="dsgvo[]"]) .ff-el-form-check-input{
  position: relative !important;
  opacity: 1 !important;
  pointer-events: auto;
  width: 16px !important; height: 16px !important;
  margin: 1px 0 0 !important; padding: 0 !important;
  border: 1.5px solid var(--ink-3) !important;
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
  flex-shrink: 0;
  clip: auto;
  appearance: auto;
  -webkit-appearance: auto;
  accent-color: var(--red);
}
.karr-form--plugin .fluentform .ff-el-group:has(input[name="dsgvo[]"]) .ff-el-form-check-input:focus{
  outline: 2px solid rgba(200,65,44,.3);
  outline-offset: 1px;
}
.karr-form--plugin .fluentform .ff-el-group:has(input[name="dsgvo[]"]) .ff-el-form-check-label > span{
  display: inline; line-height: 1.5; vertical-align: baseline;
}

/* File-Upload-Button (kompakt) */
.karr-form--plugin .fluentform .ff-uploader-wrapper,
.karr-form--plugin .fluentform .ff_upload_btn{
  background: var(--paper); border: 1.5px dashed var(--line);
  border-radius: var(--r-md); padding: 10px 14px;
  color: var(--ink-2); cursor: pointer; transition: all var(--t-fast);
  font-size: var(--fs-13);
}
.karr-form--plugin .fluentform .ff-uploader-wrapper:hover,
.karr-form--plugin .fluentform .ff_upload_btn:hover{
  border-color: var(--red); color: var(--red);
}

/* Help / tooltip text */
.karr-form--plugin .fluentform .ff-el-help-message{
  font-size: var(--fs-12); color: var(--ink-3); margin-top: 4px;
}

/* Submit button — kompakt, aber präsent */
.karr-form--plugin .fluentform .ff-el-group:last-child,
.karr-form--plugin .fluentform .ff-el-submit{ margin-top: var(--s-1); }
.karr-form--plugin .fluentform .ff-btn-submit,
.karr-form--plugin .fluentform button[type="submit"]{
  background: var(--red) !important;
  color: #fff !important;
  border: 0 !important;
  padding: 10px 24px !important;
  border-radius: var(--r-pill) !important;
  font-weight: 600 !important; font-size: var(--fs-14) !important;
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  box-shadow: 0 3px 10px rgba(200,65,44,.22) !important;
  text-shadow: none !important;
  letter-spacing: normal;
}
.karr-form--plugin .fluentform .ff-btn-submit:hover,
.karr-form--plugin .fluentform button[type="submit"]:hover{
  transform: translateY(-1px);
  background: #b03825 !important;
  box-shadow: 0 6px 16px rgba(200,65,44,.35) !important;
}

/* Validation-Fehler */
.karr-form--plugin .fluentform .error,
.karr-form--plugin .fluentform .text-danger{
  color: var(--red) !important; font-size: var(--fs-12); margin-top: 4px;
}
.karr-form--plugin .fluentform .ff-el-form-control.error{
  border-color: var(--red) !important; background: #fef5f3 !important;
}

/* Success message */
.karr-form--plugin .fluentform .ff-message-success{
  background: #e7f6e7; color: #1d6b1d; border: 1px solid #c6ebc6;
  padding: 16px 20px; border-radius: var(--r-md); font-size: var(--fs-15);
}

/* ============== FAQ ============== */
.faq{ background:var(--bg); position:relative; }
.faq-list{ max-width:840px; margin:0 auto; display:flex; flex-direction:column; gap:var(--s-3); }
.faq-item{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.faq-item[open]{ border-color:var(--red); box-shadow:var(--shadow-2); }
.faq-q{
  list-style:none; cursor:pointer; padding: var(--s-5);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
  font-family:"Cormorant Garamond",serif; font-weight:600; font-size:var(--fs-22); line-height:1.3;
}
.faq-q::-webkit-details-marker{ display:none; }
.faq-q .toggle{
  width:36px; height:36px; border-radius:50%; background:var(--beige-2); color:var(--red);
  display:grid; place-items:center; flex-shrink:0; transition: transform var(--t-med), background var(--t-med);
}
.faq-item[open] .toggle{ background:var(--red); color:#fff; transform:rotate(45deg); }
.faq-a{ padding: 0 var(--s-5) var(--s-5); color:var(--ink-2); font-size:var(--fs-15); line-height:1.7; }
.faq-a p + p{ margin-top:8px; }

/* ============== STANDORT ============== */
.standort{ background:var(--paper); }
.std-grid{
  display:grid; gap:var(--s-7);
  grid-template-columns: 1fr;
}
@media (min-width:1024px){ .std-grid{ grid-template-columns: 1.3fr 1fr; gap:var(--s-8); } }

.std-map{
  position:relative; aspect-ratio: 4/3; border-radius:var(--r-xl);
  overflow:hidden; background:var(--beige); box-shadow:var(--shadow-1);
}
@media (min-width:1024px){
  .std-grid{ align-items:stretch; }
  .std-map{ aspect-ratio:auto; height:100%; min-height:520px; }
}
.std-map .map-bg{
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: .55;
}
.map-placeholder{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--s-3); padding:var(--s-5); text-align:center;
  background: radial-gradient(ellipse at center, rgba(250,250,246,.85) 0%, rgba(232,223,210,.4) 70%);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.map-placeholder .pin{ width:56px; height:56px; border-radius:50% 50% 50% 0; background:var(--red); transform:rotate(-45deg); display:grid; place-items:center; box-shadow: var(--shadow-2); }
.map-placeholder .pin svg{ transform:rotate(45deg); color:#fff; }
.map-placeholder p{ font-size:var(--fs-14); color:var(--ink-2); max-width:38ch; }

.std-info{
  display:flex; flex-direction:column; gap:var(--s-5);
}
.std-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding: var(--s-5); display:flex; flex-direction:column; gap:var(--s-3);
  position: relative;
}

/* Kontakt-Karte: großes Logo oben rechts (SVG → transparent + scharf bei jeder Größe) */
.std-card-logo{
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  width: 140px; height: 80px;
  object-fit: contain;
  object-position: top right;
  z-index: 1;
}
.std-card--kontakt h3, .std-card--kontakt h4{ padding-right: 160px; }   /* damit "Kontakt" nicht unters Logo läuft */
@media (max-width: 640px){
  .std-card-logo{ width: 100px; height: 58px; top: var(--s-3); right: var(--s-3); }
  .std-card--kontakt h3, .std-card--kontakt h4{ padding-right: 110px; }
}
.std-card h3, .std-card h4{ display:flex; align-items:center; gap:10px; }
.std-card h3 .ic, .std-card h4 .ic{ width:32px; height:32px; border-radius:50%; background:var(--red-soft); color:var(--red); display:grid; place-items:center; flex-shrink:0; }
.std-card h3 .ic svg, .std-card h4 .ic svg{ width:16px; height:16px; }
.address-line{ font-family:"Cormorant Garamond",serif; font-size:var(--fs-22); font-weight:600; line-height:1.3; }
.address-line + .address-line{ font-size:var(--fs-15); font-weight:500; color:var(--ink-2); font-family:"Inter",sans-serif; }
.std-row{ display:flex; gap:var(--s-3); flex-wrap:wrap; }

/* Kontakt-Karte: einheitliche Liste mit SVG-Icons (Telefon + E-Mail) */
.std-contact{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:10px;
}
.std-contact li{
  display:flex; align-items:center; gap:12px;
  font-size:var(--fs-16); line-height:1.4;
}
.std-contact-ic{
  width:32px; height:32px; flex-shrink:0;
  border-radius:50%; background:var(--paper);
  display:grid; place-items:center;
  color:var(--ink-2);
  transition: background var(--t-fast), color var(--t-fast);
}
.std-contact li:hover .std-contact-ic{
  background:var(--red-soft); color:var(--red);
}
.std-contact a{
  color:var(--ink); text-decoration:none;
  font-weight:500;
  transition: color var(--t-fast);
  word-break:break-word;
}
.std-contact a:hover{ color:var(--red); }
.std-row .badge{ background:var(--paper); }

.sprechzeiten{ display:flex; flex-direction:column; gap:6px; }
.spr-row{
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 12px; border-radius:var(--r-sm); font-size:var(--fs-14);
}
.spr-row.highlight{ background:var(--red-soft); color:var(--red-2); font-weight:600; position:relative; }
.spr-row.highlight::after{ content:"auch Mittwoch!"; font-family:"Caveat",cursive; font-size:14px; position:absolute; right:-2px; top:-12px; transform:rotate(-4deg); color:var(--red); }
.spr-tag{ font-weight:600; }
.spr-time{ font-variant-numeric: tabular-nums; color:var(--ink-2); }
.spr-row.highlight .spr-time{ color:var(--red-2); }

.notdienst-card{
  background:#1a1a18; color:#fff; border-radius:var(--r-lg);
  padding: var(--s-5); display:flex; flex-direction:column; gap:var(--s-3);
  position:relative; overflow:hidden;
}
.notdienst-card::before{
  content:""; position:absolute; right:-60px; top:-60px; width:180px; height:180px; border-radius:50%;
  background: radial-gradient(circle, rgba(200,48,44,.4), transparent 65%);
}
.notdienst-card h3, .notdienst-card h4{ color:#fff; position:relative; }
.notdienst-card p{ color:rgba(255,255,255,.7); font-size:var(--fs-14); position:relative; }
.notdienst-card .notfall-pill{
  background: var(--red);
  color: #fff !important;
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 22px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: var(--fs-14);
  text-decoration: none;
  position: relative; z-index: 1;
  box-shadow: 0 4px 14px rgba(200,65,44,.45), 0 0 0 1px rgba(255,255,255,.08) inset;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  letter-spacing: .01em;
}
.notdienst-card .notfall-pill:hover{
  background: #d94f3a;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(200,65,44,.6), 0 0 0 1px rgba(255,255,255,.12) inset;
}
.notdienst-card .notfall-pill .pulse{
  width: 8px; height: 8px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255,255,255,.65);
  animation: dra-pulse-white 2s infinite;
}
@keyframes dra-pulse-white{
  0%   { box-shadow: 0 0 0 0   rgba(255,255,255,.6); }
  70%  { box-shadow: 0 0 0 10px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0   rgba(255,255,255,0); }
}

/* ============== MOBILE: unify all section CTAs ==============
   On phones every primary call-to-action (Hero, Dentosophie, Booking,
   Karriere submit, Notdienst) becomes full-width and identical in size,
   so buttons no longer differ block-to-block. */
@media (max-width: 640px){
  .btn.lg,
  .notdienst-card .notfall-pill,
  .karr-form--plugin .fluentform .ff-btn-submit,
  .karr-form--plugin .fluentform button[type="submit"]{
    width: 100% !important;
    align-self: stretch;
    justify-content: center;
    padding: 16px 24px !important;
    min-height: 54px !important;
    font-size: var(--fs-15) !important;
    box-sizing: border-box;
  }
}

/* ============== FOOTER ============== */
.footer{
  background:#15140f; color:#cfc8b7; padding-block: var(--pad-y) var(--s-7);
  position:relative; overflow:hidden;
}
/* removed: doppelter roter Glow am Footer-Top — der smile-divider darüber
   bringt schon einen drop-shadow, der zweite radial-gradient sah "abgesetzt" aus */
.footer-grid{
  display:grid; gap:var(--s-7);
  grid-template-columns: 1fr;
  position:relative;
}
@media (min-width:768px){ .footer-grid{ grid-template-columns: 1.3fr repeat(3, 1fr); } }
.footer-col h4, .footer-col h5{ color:#fff; margin-bottom:var(--s-3); font-family:"Cormorant Garamond",serif; font-weight:600; font-size:var(--fs-18); } /* Lachen 2: footer titles promoted h5→h4 for heading-order; size kept compact */
.footer-col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.footer-col a{ color:#cfc8b7; font-size:var(--fs-14); transition:color var(--t-fast); text-decoration:none; }
.footer-col a:hover{ color:#fff; }

/* Footer Kontakt: einheitliche Liste mit SVG-Icons (statt Emojis) */
.footer-contact{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:10px;
}
.footer-contact li{
  display:flex; align-items:center; gap:10px;
  color:#cfc8b7; font-size:var(--fs-14); line-height:1.4;
}
.footer-contact-ic{
  width:26px; height:26px; flex-shrink:0;
  border-radius:50%;
  background:rgba(255,255,255,.06);
  display:grid; place-items:center;
  color:#cfc8b7;
  transition: background var(--t-fast), color var(--t-fast);
}
.footer-contact li:hover .footer-contact-ic{
  background:var(--red); color:#fff;
}
.footer-contact a{
  color:#cfc8b7; text-decoration:none;
  transition: color var(--t-fast);
  word-break:break-word;
}
.footer-contact a:hover{ color:#fff; }
.footer-brand .brand-mark{ background:var(--red); }
.footer-brand .brand-name{ color:#fff; }
.footer-brand p{ font-size:var(--fs-14); color:#9a9282; line-height:1.6; margin-top:var(--s-3); max-width:34ch; }
.footer-newsletter{
  margin-top:var(--s-4); display:flex; gap:8px; padding:6px;
  background: rgba(255,255,255,.06); border-radius:var(--r-pill); border:1px solid rgba(255,255,255,.12);
}
.footer-newsletter input{
  flex:1; background:transparent; border:0; padding: 10px 16px; color:#fff; font: inherit; font-size:var(--fs-14);
}
.footer-newsletter input::placeholder{ color:#a89e8a; } /* Lachen 2: lightened from #7a7363 for 4.5:1 on dark footer */
.footer-newsletter input:focus-visible{ outline:3px solid #fff; outline-offset:2px; border-radius:4px; }
.footer-newsletter button{
  padding: 10px 18px; border-radius:var(--r-pill); background:var(--red); color:#fff; font-weight:500; font-size:var(--fs-13);
  transition: background var(--t-fast);
}
.footer-newsletter button:hover{ background:var(--red-2); }

.footer-social{ display:flex; gap:10px; margin-top:var(--s-4); }
.footer-social a{
  width:40px; height:40px; border-radius:50%;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  display:grid; place-items:center; transition: background var(--t-fast), color var(--t-fast);
}
.footer-social a:hover{ background:var(--red); color:#fff; border-color:var(--red); }

.footer-bottom{
  margin-top:var(--s-8); padding-top:var(--s-5); border-top:1px solid rgba(255,255,255,.1);
  display:flex; justify-content:space-between; align-items:center; gap:var(--s-4); flex-wrap:wrap;
  font-size:var(--fs-13); color:#a89e8a; position:relative; /* Lachen 2: lightened from #7a7363 for 4.5:1 on dark footer */
}
.footer-bottom .legal{ display:flex; gap:var(--s-4); flex-wrap:wrap; }
.footer-bottom .legal a:hover{ color:#fff; }

/* ============== COOKIE BANNER (preview) ============== */
.cookie-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:80;
  background:#fff; border-radius:var(--r-lg); padding: var(--s-4) var(--s-5);
  box-shadow:var(--shadow-3); border:1px solid var(--line);
  display:flex; gap:var(--s-4); align-items:center; flex-wrap:wrap; max-width:760px; margin:0 auto;
}
.cookie-banner p{ flex:1; min-width:240px; font-size:var(--fs-13); color:var(--ink-2); line-height:1.5; }
.cookie-banner .cb-actions{ display:flex; gap:8px; flex-wrap:wrap; }

/* ============== DEMO HELPERS ============== */
.demo-note{
  position:fixed; left:16px; top:16px; z-index:90;
  background: var(--note-bg); color:var(--note); padding:8px 14px; border-radius:var(--r-pill);
  font-size:var(--fs-12); font-weight:600; border:1px dashed var(--note);
  box-shadow: var(--shadow-1);
}

/* ============== MODAL (treatment popup) ============== */
.modal{
  width: min(960px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  border:0; padding:0; border-radius:var(--r-xl);
  background:#fff;
  box-shadow:var(--shadow-3);
  overflow:hidden;
  position:fixed; inset:0; margin:auto;
}
.modal::backdrop{
  background: rgba(20,20,18,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.modal[open]{ animation: modal-in .25s var(--ease); }
@keyframes modal-in{
  from{ opacity:0; transform: translateY(20px) scale(.98); }
  to  { opacity:1; transform: translateY(0)    scale(1); }
}
.modal-inner{
  display:grid; grid-template-columns:1fr;
  max-height: calc(100vh - 64px);
}
@media (min-width:768px){
  .modal-inner{ grid-template-columns: 5fr 6fr; }
}
.modal-image{
  position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--beige);
}
@media (min-width:768px){
  .modal-image{ aspect-ratio:auto; height:100%; min-height:420px; }
}
.modal-image img{ width:100%; height:100%; object-fit:cover; }
.modal-image::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 60%, rgba(31,31,29,.35));
  pointer-events:none;
}
.modal-tag{
  position:absolute; left:18px; top:18px;
  padding:6px 12px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.95); color:var(--ink);
  font-size:11.5px; font-weight:600; letter-spacing:.04em;
  box-shadow: 0 4px 12px -4px rgba(31,31,29,.18);
  z-index:2;
}
.modal-content{
  padding: clamp(24px, 3vw, 40px);
  display:flex; flex-direction:column; gap:var(--s-3);
  overflow-y:auto;
}
.modal-eyebrow{
  font-size:11px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--red);
  display:flex; align-items:center; gap:10px;
}
.modal-eyebrow::before{ content:""; width:24px; height:1.5px; background:var(--red); display:inline-block; }
.modal-title{
  font-family:"Cormorant Garamond",serif; font-weight:600;
  font-size: clamp(28px, 3.4vw, 38px); line-height:1.1;
  color:var(--ink); margin:0;
}
.modal-text{ color:var(--ink-2); font-size:15px; line-height:1.7; margin:0; }
.modal-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.modal-list li{
  display:flex; gap:12px; align-items:flex-start;
  font-size:14px; color:var(--ink); line-height:1.5;
}
.modal-list li::before{
  content:""; flex-shrink:0;
  width:18px; height:18px; border-radius:50%;
  background:var(--red-soft); color:var(--red);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8302C' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E");
  background-size: 70%; background-position: center; background-repeat: no-repeat;
  margin-top:2px;
}
.modal-cta{
  display:flex; gap:10px; flex-wrap:wrap;
  margin-top:auto; padding-top:var(--s-4); border-top:1px solid var(--line);
}
.modal-close{
  position:absolute; right:14px; top:14px; z-index:5;
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.95); color:var(--ink);
  display:grid; place-items:center;
  box-shadow:var(--shadow-1);
  cursor:pointer; border:0;
  transition: background var(--t-fast), transform var(--t-fast);
}
.modal-close:hover{ background:#fff; transform:scale(1.05); color:var(--red); }
.modal-close svg{ width:18px; height:18px; }

/* ============== LEGAL PAGES (Impressum / Datenschutz / AGB / Cookies) ============== */
.legal-page{
  background: var(--bg);
  padding-block: clamp(60px, 8vw, 96px);
  min-height: 60vh;
}
.legal-page__inner{
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 56px) clamp(20px, 4vw, 48px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-1);
}
.legal-page__head{
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--s-4);
  margin-bottom: var(--s-6);
}
.legal-page__title{
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  margin: 0;
  color: var(--ink);
}
.legal-page__meta{
  font-size: var(--fs-13);
  color: var(--ink-3);
  margin: 8px 0 0;
}
.legal-page__body{
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-2);
}
.legal-page__body h2{
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: clamp(20px, 2.2vw, 24px);
  line-height: 1.3;
  color: var(--ink);
  margin: var(--s-6) 0 var(--s-2);
  letter-spacing: 0;
}
.legal-page__body h2:first-child{ margin-top: 0; }
.legal-page__body h3{
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  margin: var(--s-5) 0 8px;
}
.legal-page__body p{ margin: 0 0 var(--s-3); }
.legal-page__body ul,
.legal-page__body ol{
  margin: 0 0 var(--s-4);
  padding-left: 24px;
}
.legal-page__body li{ margin-bottom: 6px; }
.legal-page__body a{
  color: var(--red);
  text-decoration: underline;
  text-decoration-color: rgba(200,65,44,.35);
  text-underline-offset: 2px;
  transition: text-decoration-color var(--t-fast);
}
.legal-page__body a:hover{ text-decoration-color: var(--red); }
.legal-page__body strong{ color: var(--ink); font-weight: 600; }
.legal-page__body .btn{ display: inline-flex; }

/* ============== PRINT ============== */
@media print{
  .nav, .utility-bar, .cookie-banner, .demo-note, .hero-spinner, .footer-newsletter{ display:none !important; }
  body{ background:#fff; }
  .section, .hero, .booking, .footer{ break-inside:avoid; page-break-inside:avoid; padding-block: 24px !important; }
  .booking, .footer{ background:#fff !important; color:var(--ink) !important; }
}

/* ============== 404 (Lachen 2 / BFSG) ============== */
.error-404{ padding: clamp(56px, 12vw, 120px) 0; }
.err-inner{ max-width: 720px; }
.err-eyebrow{ color: var(--red); margin-bottom: 12px; }
.err-title{
  font-size: var(--fs-h2); line-height: 1.04; letter-spacing: -.018em;
  color: var(--ink); margin: 0 0 16px;
}
.err-title em{ font-style: italic; color: var(--red); }
.err-lead{
  font-size: var(--fs-18); color: var(--ink-2); margin: 0 0 28px;
  max-width: 56ch;
}
.err-actions{ display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 36px; }
.err-search{ border-top: 1px solid var(--line); padding-top: 24px; }
.err-search-label{ display:block; font-size: var(--fs-14); color: var(--ink-2); margin-bottom: 10px; }
.err-search form{ display: flex; gap: 8px; max-width: 480px; }
.err-search input[type="search"]{
  flex: 1; padding: 12px 14px; border-radius: var(--r-pill);
  border: 1.5px solid var(--line); background: var(--paper); font: inherit;
}
.err-search button{
  padding: 12px 20px; border-radius: var(--r-pill);
  background: var(--red); color: #fff; font: inherit; font-weight: 500;
}
.err-search button:hover{ background: var(--red-2); }