/* procasito.com · Länderwahl. Farben und Masse wie procasito.ch (site-procasito/assets/thema.css und die gemeinsamen Stile von solar-guide.ch). */
@font-face { font-family: "SG Inter"; src: url("inter-variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
:root {
  --ink: #171c17; --ink-2: #3d453d; --ink-3: #5c665c; --green: #2b7a00; --green-50: #eef6e8; --band: #f2f4f1;
  --line: #d9dde0; --radius: 5px; --ease-out: cubic-bezier(.16, 1, .3, 1); --gutter: clamp(16px, 4vw, 40px);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--band); color: var(--ink);
  font: 400 17px/1.55 "SG Inter", system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.kopf { padding: 18px var(--gutter); background: #fff; }
.kopf__logo { display: inline-block; }
.kopf__logo img { display: block; width: 190px; height: auto; }
.wahl { flex: 1; display: flex; align-items: center; padding: clamp(48px, 9vw, 112px) var(--gutter); }
.wahl__inhalt { width: 100%; max-width: 1000px; margin: 0 auto; }
.wahl h1 { max-width: 16em; margin: 0; font-size: clamp(2rem, 1.3rem + 2.2vw, 3rem); font-weight: 450; line-height: 1.1; letter-spacing: -.04em; text-wrap: balance; }
.wahl__lede { max-width: 36em; margin: 18px 0 0; font-size: clamp(17px, 16px + .3vw, 19px); color: var(--ink-2); text-wrap: pretty; }
.laender { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; list-style: none; }
.laender a { position: relative; display: grid; gap: 4px; min-height: 150px; align-content: end; padding: 24px 64px 24px 24px; border: 1px solid var(--line);
  border-radius: var(--radius); background: #fff; text-decoration: none; transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.laender a:hover { border-color: var(--green); box-shadow: 0 10px 28px -16px rgba(18, 30, 12, .45); }
.flagge { display: block; height: 26px; width: auto; margin-bottom: 14px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(23, 28, 23, .14); }
.land { font-size: 24px; font-weight: 550; line-height: 1.2; letter-spacing: -.02em; }
.domain { font-size: 15px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pfeil { position: absolute; right: 24px; bottom: 26px; width: 22px; height: 22px; color: var(--green); transition: transform .2s var(--ease-out); }
.laender a:hover .pfeil { transform: translateX(4px); }
.fuss { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 22px var(--gutter); background: #fff; font-size: 14px; color: var(--ink-3); }
.fuss p { margin: 0; }
.fuss nav { display: flex; gap: 20px; }
.fuss a { color: var(--ink-2); text-underline-offset: 3px; }
.fuss a:hover { color: var(--green); }
@media (max-width: 760px) {
  .laender { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .laender a { min-height: 0; padding: 20px 60px 20px 20px; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: center; }
  .flagge { grid-row: span 2; margin: 0; height: 24px; }
  .land { font-size: 21px; }
  .pfeil { top: 50%; bottom: auto; right: 20px; margin-top: -11px; }
  .kopf__logo img { width: 158px; }
}
.recht { flex: 1; padding: clamp(40px, 6vw, 80px) var(--gutter); background: #fff; }
.recht__inhalt { max-width: 46em; margin: 0 auto; }
.recht h1 { margin: 0 0 24px; font-size: clamp(1.9rem, 1.3rem + 1.4vw, 2.4rem); font-weight: 450; line-height: 1.12; letter-spacing: -.04em; }
.recht h2 { margin: 32px 0 0; font-size: 20px; font-weight: 550; line-height: 1.3; letter-spacing: -.01em; }
.recht p { margin: 12px 0 0; color: var(--ink-2); }
.recht a { color: var(--green); }
@media (prefers-reduced-motion: reduce) { .laender a, .pfeil { transition: none; } }