/**
 * Yatovi — shared site styles
 *
 * The page markup is inline-styled (converted from the design prototype).
 * Because inline styles beat stylesheet rules, anything that has to change
 * responsively is owned by a class HERE and removed from the inline style
 * attribute. Layout containers therefore carry .wrap / .g-* classes and no
 * competing inline grid-template-columns / max-width / padding.
 */

/* ── Base ───────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: #fff;
  font-family: var(--font-sans);
  color: var(--color-black);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

/* German compounds get long — "Anlagendokumentation", "Verbraucher-
   streitbeilegung". Hyphenate at real syllable boundaries using the
   browser's German dictionary (which is why every page declares
   lang="de") instead of snapping mid-syllable.
   Limits: only words of 10+ characters, never leaving fewer than 4 on
   either line, so short words are left alone.
   overflow-wrap stays as the last resort for tokens with no syllables
   to break on — the spec only applies it when nothing else fits. */
body {
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 10 4 4;
  -webkit-hyphenate-limit-before: 4;
  -webkit-hyphenate-limit-after: 4;
  overflow-wrap: break-word;
}

/* Display type reads badly with a hyphen in it, and the headlines are
   short and author-controlled — they use <br> where they need a break. */
h1 { hyphens: manual; -webkit-hyphens: manual; }

/* Nothing with syllables to find: mono/technical strings, addresses, URLs. */
[style*="var(--font-mono)"],
a[href^="mailto:"],
a[href^="http"] {
  hyphens: none;
  -webkit-hyphens: none;
}
.legal-wrap a[href^="http"] { overflow-wrap: anywhere; }

/* Flex and grid children default to min-width:auto, which refuses to shrink
   below their content and is the usual cause of a row overflowing instead of
   wrapping its text. Only relaxed on small screens, where it is what we want. */
@media (max-width: 760px) {
  [style*="display:flex"] > *,
  [style*="display:grid"] > * { min-width: 0; }
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--color-black);
  outline-offset: 2px;
}

input::placeholder,
textarea::placeholder { color: var(--color-gray-750); }

/* ── Layout container ───────────────────────────────── */

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
}

/* ── Responsive grids ───────────────────────────────── */
/* Desktop values live here too — the inline style must not set them. */

.g2     { display: grid; grid-template-columns: 1fr 1fr; }
.g3     { display: grid; grid-template-columns: repeat(3, 1fr); }
.g4     { display: grid; grid-template-columns: repeat(4, 1fr); }
.g-calc { display: grid; grid-template-columns: 1fr 380px; }
.g-feat { display: grid; grid-template-columns: 1.4fr 1fr 1fr; }
.g-side { display: grid; grid-template-columns: 1.5fr 1fr; }
.g-foot { display: grid; grid-template-columns: 1.2fr auto auto; }

/* Device mockup beside copy. The phone column is sized by its content
   (a 260px .iph frame), so on a phone it must stack, not sit alongside.
   Three children — phone, copy, CTA — placed explicitly so the running
   order can differ between layouts. */
.g-phone {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 72px;
  row-gap: 20px;
}
.g-phone > .gp-phone { grid-column: 1; grid-row: 1 / span 2; }
.g-phone > .gp-copy  { grid-column: 2; grid-row: 1; }
.g-phone > .gp-cta   { grid-column: 2; grid-row: 2; }

/* autowire hero: copy, device, claims. Its own class rather than the
   footer's, which it used to borrow — the two need different breakpoints. */
.g-hero { display: grid; grid-template-columns: 1.2fr auto auto; }

/* ── Header ─────────────────────────────────────────── */

.site-head-inner {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

/* ── Contact form state ─────────────────────────────── */

/* Flex items shrink by default, so the checkbox next to the long consent
   text was being squeezed below its 20px while the shorter copy-to-sender
   label kept its full size. Pin both. */
#contact-form input[type="checkbox"] { flex: none; }

.is-invalid { border-color: #c0392b !important; }

.form-status {
  font-size: 15px;
  line-height: 1.55;
  padding: 14px 18px;
  border-radius: 12px;
  display: none;
}
.form-status.is-visible { display: block; }
.form-status.is-error   { background: #fdecea; color: #8c2016; }
.form-status.is-success { background: #eef8dd; color: #33500a; }

button[disabled] { opacity: .6; cursor: progress; }

/* ── Founders section (Startseite) ──────────────────── */

/* Heading left, founders stacked down the right. The founder list is the
   taller column and sets the row height, so centring balances the heading
   against it instead of stranding it at the top. */
.founders-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

.founder-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.founder-card {
  border: 1px solid var(--color-gray-400);
  border-radius: 16px;
  padding: 18px;
  display: flex;
  flex-direction: row;
  align-items: center;   /* photo sits centred against the taller text column */
  gap: 18px;
}

.founder-photo {
  width: 92px;
  height: 92px;
  object-fit: cover;
  object-position: top center;
  display: block;
  border-radius: 12px;
  background: var(--color-gray-200);
}

@media (max-width: 980px) {
  .founders-split { grid-template-columns: 1fr; }
}

/* The card stays a row at every width — the photo sits beside the text,
   never above it — and grows on mobile, where each card has the full
   page width to itself and the desktop 92px reads as small. */
@media (max-width: 760px) {
  .founder-photo { width: 140px; height: 140px; }
}

/* Narrow phones: trade card padding and gap for photo size rather than
   shrinking the photo, so it keeps its weight against the text. */
@media (max-width: 420px) {
  .founder-card { gap: 14px; padding: 14px; }
  .founder-photo { width: 120px; height: 120px; }
}

/* Below ~360px a 120px photo squeezes the bio to roughly 14 characters
   per line, which is unreadable. Give a little back. */
@media (max-width: 360px) {
  .founder-photo { width: 104px; height: 104px; }
}

/* ── Legal pages (Impressum, Datenschutz) ───────────── */

/* Left-aligned measure that lines up with .wrap on wide screens and
   collapses to plain page padding on small ones. */
.legal-wrap {
  max-width: 780px;
  margin-left: max(32px, calc((100vw - 1180px) / 2 + 32px));
  padding: 64px 32px 88px;
}
.legal-wrap h2 { scroll-margin-top: 92px; }
.legal-wrap li { margin: 0; }

@media (max-width: 760px) {
  .legal-wrap {
    margin-left: 0;
    padding: 40px 20px 64px;
  }
}

/* ── Laufzeit toggle (Preise) ───────────────────────── */

.term-btn {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 22px;
  border-radius: 500px;
  font-family: var(--font-sans);
  font-size: 15px;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--color-black);
}
.term-btn.is-active {
  background: var(--color-dark);
  color: #fff;
}

/* ── iPhone device frame (Startseite, autowire) ─────── */

.iph {
  --w: 240px;
  position: relative;
  flex: none;
  width: var(--w);
  padding: calc(var(--w) * 0.014);
  box-sizing: border-box;
  border-radius: calc(var(--w) * 0.158);
  background: linear-gradient(148deg, #F5F6F8 0%, #C7CBD0 10%, #8E9399 26%, #E3E5E8 47%, #969BA1 70%, #CACDD1 86%, #F1F2F4 100%);
  box-shadow: 0 calc(var(--w) * 0.085) calc(var(--w) * 0.17) rgba(0, 0, 0, 0.28),
              0 calc(var(--w) * 0.014) calc(var(--w) * 0.035) rgba(0, 0, 0, 0.16),
              inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}
.iph-bezel {
  background: #08080A;
  border-radius: calc(var(--w) * 0.144);
  padding: calc(var(--w) * 0.017);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.iph-screen {
  position: relative;
  border-radius: calc(var(--w) * 0.127);
  overflow: hidden;
  background: #000;
  line-height: 0;
}
.iph-screen > img { display: block; width: 100%; height: auto; }
.iph-island {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(var(--w) * 0.029);
  width: calc(var(--w) * 0.311);
  height: calc(var(--w) * 0.088);
  border-radius: 500px;
  background: #000;
}
.iph-gloss {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(118deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.05) 20%, rgba(255,255,255,0) 40%);
}
.iph-b {
  position: absolute;
  width: calc(var(--w) * 0.013);
  background: linear-gradient(90deg, #9AA0A6, #DADDE0 45%, #8C9197);
}
.iph-l  { left: calc(var(--w) * -0.008);  border-radius: calc(var(--w) * 0.005) 0 0 calc(var(--w) * 0.005); }
.iph-r  { right: calc(var(--w) * -0.008); border-radius: 0 calc(var(--w) * 0.005) calc(var(--w) * 0.005) 0; }
.iph-act { top: 22%;   height: 5.4%; }
.iph-vu  { top: 30.7%; height: 6.7%; }
.iph-vd  { top: 39.4%; height: 6.7%; }
.iph-pw  { top: 30.7%; height: 10.7%; }
.iph-cc  { top: 48%;   height: 6.8%; }

/* ── Range slider (Preise) ──────────────────────────── */

input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 500px;
  background: #4a4a4c;
  outline: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-brand);
  border: 2px solid #111;
  cursor: pointer;
}
input[type=range]::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-brand);
  border: 2px solid #111;
  cursor: pointer;
}

/* ── Breakpoints ────────────────────────────────────── */

@media (max-width: 980px) {
  .g3, .g4, .g-feat { grid-template-columns: repeat(2, 1fr); }
  /* Spar-Rechner: Regler und Ergebnis untereinander, Regler bleiben lang */
  .g-calc { grid-template-columns: 1fr; }
  .g-side { grid-template-columns: 1fr; }
  .g-foot { grid-template-columns: 1fr 1fr; }
  /* stacked running order: copy, then the screenshot, then the CTA */
  .g-phone { grid-template-columns: 1fr; justify-items: center; row-gap: 32px; }
  .g-phone > * { max-width: 640px; }
  .g-phone > .gp-copy  { grid-column: 1; grid-row: 1; justify-self: stretch; }
  .g-phone > .gp-phone { grid-column: 1; grid-row: 2; }
  .g-phone > .gp-cta   { grid-column: 1; grid-row: 3; justify-self: stretch; }

  /* centre the device and the claim boxes; the copy stays left-aligned */
  .g-hero { grid-template-columns: 1fr; }
  .g-hero > *:nth-child(2),
  .g-hero > *:nth-child(3) { justify-self: center; }
}

@media (max-width: 760px) {
  .wrap { padding-left: 20px; padding-right: 20px; }

  .site-head-inner {
    height: auto;
    flex-wrap: wrap;
    padding-top: 14px;
    padding-bottom: 14px;
    gap: 14px;
  }
  /* All four nav items stay on one row — the Kontakt pill must not drop
     below the text links. Sizes shrink instead of wrapping; !important
     because the font-size and padding are inline on each link. */
  .site-nav {
    width: 100%;
    gap: 12px;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .site-nav > a {
    font-size: 15px !important;
    white-space: nowrap;
  }
  .site-nav > a:last-child { padding: 0 16px !important; }

  .meta-row { flex-wrap: wrap; }
  .pill-early {
    font-size: 11px !important;
    padding: 3px 9px !important;
  }
}

/* Paired CTAs: once they stop fitting side by side, stack them at equal
   width rather than leaving two differently-sized pills. */
@media (max-width: 560px) {
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row > a { width: 100%; justify-content: center; }
}

@media (max-width: 380px) {
  .site-nav { gap: 8px; }
  .site-nav > a { font-size: 13.5px !important; }
  .site-nav > a:last-child { padding: 0 12px !important; }
}

@media (max-width: 680px) {
  .g2, .g3, .g4, .g-calc, .g-feat, .g-foot { grid-template-columns: 1fr; }
  /* the design's 72px column gap reads as dead space once stacked */
  .g-phone { gap: 32px; }
}

@media (max-width: 460px) {
  /* three pills plus their container padding just exceed a 320px viewport */
  .term-btn { padding: 0 14px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}