/* =====================================================================
   DESIGN / AUSSEHEN  –  ÖTB Turnverein Drösing
   =====================================================================
   Diese Datei steuert das komplette Aussehen (Farben, Abstände, Schrift).
   Für Textänderungen brauchst du sie NICHT – dafür ist content.js da.

   >>> Ganze Website umfärben? <<<  Nur den Wert von  --accent  ändern.
   ===================================================================== */

:root{
  --accent:        #1877c9;   /* Vereins-Blau (aus dem Logo) – hier umfärben          */
  --accent-dark:   #115a9c;   /* dunkleres Blau für Hover/Verläufe                    */
  --accent-soft:   #e9f3fc;   /* sehr helles Blau für Flächen                         */
  --accent-2:      #e11f1a;   /* Rot-Akzent (Österreich-Streifen im Logo), sparsam    */
  --navy:          #0b2f52;   /* tiefes Dunkelblau für Hero/Overlays                  */

  --ink:      #16202b;        /* Textfarbe (leicht blaustichig)   */
  --muted:    #5a6675;        /* gedämpfter Text                  */
  --bg:       #ffffff;        /* Seitenhintergrund                */
  --bg-soft:  #eef4fa;        /* leichte Blau-Fläche              */
  --line:     #dce7f1;        /* Trennlinien/Ränder               */

  --radius:   18px;
  --radius-sm:12px;
  --shadow:   0 12px 34px rgba(20,24,31,.09);
  --shadow-sm:0 4px 14px rgba(20,24,31,.07);
  --maxw:     1160px;
  --nav-h:    72px;

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          Helvetica, Arial, "Apple Color Emoji", sans-serif;
}

/* --- Grundlagen ----------------------------------------------------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--font); color:var(--ink); background:var(--bg);
  line-height:1.6; -webkit-font-smoothing:antialiased; font-size:17px;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

h1,h2,h3{ line-height:1.12; margin:0 0 .4em; letter-spacing:-.02em; font-weight:800; }
h1{ font-size:clamp(2.2rem, 6vw, 4rem); }
h2{ font-size:clamp(1.7rem, 3.6vw, 2.6rem); }
h3{ font-size:1.22rem; }
p{ margin:0 0 1rem; }

.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 22px; }
.section{ padding:84px 0; scroll-margin-top:var(--nav-h); }
.section--soft{ background:var(--bg-soft); }
.center{ text-align:center; }

.eyebrow{
  display:inline-block; font-size:.8rem; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); margin-bottom:.6rem;
}
.lead{ font-size:1.15rem; color:var(--muted); max-width:60ch; }
.section > .container > .lead{ margin-bottom:2.4rem; }

/* --- Buttons -------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.55rem; cursor:pointer;
  font-weight:700; font-size:1rem; padding:.85rem 1.5rem; border-radius:999px;
  border:2px solid transparent; transition:transform .15s ease, background .2s ease,
  box-shadow .2s ease, color .2s; white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--accent); color:#fff; box-shadow:0 8px 20px rgba(17,90,156,.32); }
.btn-primary:hover{ background:var(--accent-dark); transform:translateY(-2px); }
.btn-ghost{ background:transparent; border-color:currentColor; color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:#fff; }
.btn-light{ background:#fff; color:var(--ink); }
.btn-light:hover{ transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.btn-outline-light{ border-color:rgba(255,255,255,.7); color:#fff; }
.btn-outline-light:hover{ background:#fff; color:var(--ink); }

/* --- Navigation ----------------------------------------------------- */
.nav{
  position:fixed; top:0; left:0; right:0; height:var(--nav-h); z-index:50;
  display:flex; align-items:center; transition:background .25s, box-shadow .25s;
}
.nav .container{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.nav.solid{ background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--line); }
.brand{ display:flex; align-items:center; gap:.6rem; }
.brand-logo{ height:46px; width:auto; display:block; transition:transform .18s; }
.brand:hover .brand-logo{ transform:scale(1.04); }
.nav.on-hero:not(.solid){ color:#fff; }
.footer .brand-logo{ height:52px; }

.nav-links{ display:flex; align-items:center; gap:.35rem; list-style:none; margin:0; padding:0; }
.nav-links a{
  padding:.5rem .8rem; border-radius:999px; font-weight:600; font-size:.97rem;
  color:inherit; opacity:.9; transition:background .18s, opacity .18s; white-space:nowrap;
}
.nav-links a:hover{ opacity:1; background:rgba(127,127,127,.12); }
.nav-links a.active{ color:var(--accent); opacity:1; }
.nav .btn{ padding:.6rem 1.1rem; }

.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:8px;
  color:inherit; }
.nav-toggle svg{ width:28px; height:28px; }

/* --- Hero ----------------------------------------------------------- */
.hero{
  position:relative; min-height:90vh; display:flex; align-items:center;
  color:#fff; overflow:hidden; padding:calc(var(--nav-h) + 44px) 0 64px;
  background:var(--navy);
}
.hero-collage{  /* 3-teilige Foto-Collage mit sanftem Zoom (Ken-Burns) */
  position:absolute; inset:-2%; z-index:0; display:grid; grid-template-columns:repeat(3,1fr);
  animation:heroZoom 30s ease-in-out infinite alternate;
}
.hero-collage span{ background-size:cover; background-position:center;
  border-right:2px solid rgba(255,255,255,.08); }
.hero-collage span:last-child{ border-right:0; }
@media (max-width:600px){ .hero-collage{ grid-template-columns:1fr; }
  .hero-collage span:nth-child(1), .hero-collage span:nth-child(2){ display:none; } }
.hero::after{  /* Blau-Overlay für lesbaren Text */
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(112deg,
    rgba(9,42,74,.95) 0%, rgba(17,90,156,.82) 44%, rgba(17,90,156,.36) 100%);
}
.hero .container{ position:relative; z-index:2; max-width:900px; }
.hero h1{ margin-bottom:.15em; }
.hero .slogan-accent{ color:#8ec8ff; }
.hero p{ font-size:1.25rem; max-width:52ch; color:rgba(255,255,255,.92); }
/* Rot-weißer Streifen als Marken-Nod zum Logo */
.brand-rule{ display:block; width:132px; height:7px; margin:20px 0 22px; border-radius:4px;
  background:repeating-linear-gradient(90deg, var(--accent-2) 0 15px, #fff 15px 30px);
  box-shadow:0 2px 10px rgba(0,0,0,.18); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.4rem; }
.hero-badges{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:2.4rem; }
/* Sanfte Einblend-Animation der Hero-Inhalte */
.hero .eyebrow{ animation:fadeUp .7s .00s both; }
.hero h1{ animation:fadeUp .7s .08s both; }
.hero .brand-rule{ animation:growLine .8s .28s both; }
.hero p{ animation:fadeUp .7s .34s both; }
.hero-actions{ animation:fadeUp .7s .46s both; }
.hero-badges{ animation:fadeUp .7s .58s both; }
@keyframes heroZoom{ from{ transform:scale(1); } to{ transform:scale(1.09); } }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
@keyframes growLine{ from{ opacity:0; width:0; } to{ opacity:1; width:132px; } }
.hero-badges span{
  font-size:.85rem; font-weight:600; padding:.4rem .85rem; border-radius:999px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22);
}

/* --- Slim-Header für Unterseiten (Prototyp B) ----------------------- */
.page-header{
  background:
    radial-gradient(900px 400px at 85% -20%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(135deg, var(--navy) 0%, #0f4a80 50%, var(--accent-dark) 100%);
  color:#fff; padding:calc(var(--nav-h) + 52px) 0 52px; position:relative; overflow:hidden;
}
.page-header::after{ content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background:repeating-linear-gradient(115deg, transparent 0 58px, rgba(255,255,255,.035) 58px 60px); }
.page-header .container{ position:relative; z-index:2; }
.page-header .eyebrow{ color:#fff; opacity:.85; }
.page-header h1{ font-size:clamp(1.9rem,4vw,2.9rem); margin-bottom:.25em; }
.page-header p{ color:rgba(255,255,255,.85); max-width:62ch; margin:0; font-size:1.1rem; }

/* --- Icon-Größen in kleinen Elementen ------------------------------- */
.chip svg{ width:15px; height:15px; flex:0 0 auto; opacity:.75; }

/* --- Karten & Raster ------------------------------------------------ */
.grid{ display:grid; gap:22px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:26px; box-shadow:var(--shadow-sm); transition:transform .18s, box-shadow .18s;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.card h3{ margin-bottom:.35rem; }
.card .muted{ color:var(--muted); }

.icon-badge{
  width:52px; height:52px; border-radius:14px; background:var(--accent-soft);
  color:var(--accent); display:grid; place-items:center; margin-bottom:14px;
}
.icon-badge svg{ width:28px; height:28px; }

/* Angebot-Karten */
.offer .meta{ display:flex; flex-wrap:wrap; gap:.5rem; margin:.5rem 0 .2rem; }
.chip{
  display:inline-flex; align-items:center; gap:.4rem; font-size:.83rem; font-weight:600;
  padding:.32rem .7rem; border-radius:999px; background:var(--bg-soft); color:var(--ink);
}
.chip.accent{ background:var(--accent-soft); color:var(--accent-dark); }
.chip.time{ background:var(--accent-soft); color:var(--accent-dark); }
.offer .leitung{ font-size:.92rem; color:var(--muted); margin-top:.7rem;
  border-top:1px solid var(--line); padding-top:.7rem; }
.leitung-label{ display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); margin-bottom:.35rem; }
.leiter{ display:flex; flex-direction:column; gap:.25rem; margin-bottom:.55rem; }
.leiter:last-child{ margin-bottom:0; }
.leiter-name{ font-weight:700; color:var(--ink); }
.leiter-rolle{ font-weight:400; color:var(--muted); }
.leiter-kontakt{ display:flex; flex-wrap:wrap; gap:.4rem; }
.kontakt-link{ display:inline-flex; align-items:center; gap:.32rem; font-size:.83rem;
  color:var(--accent); background:var(--accent-soft); padding:.22rem .6rem; border-radius:999px;
  transition:background .15s, color .15s; }
.kontakt-link svg{ width:14px; height:14px; flex:0 0 auto; }
.kontakt-link:hover{ background:var(--accent); color:#fff; }

/* Personen-Chips / Listen */
.tags{ display:flex; flex-wrap:wrap; gap:.45rem; }
.tag{ font-size:.9rem; padding:.35rem .75rem; border-radius:999px; background:var(--bg-soft);
  border:1px solid var(--line); }

.people{ display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; margin:.4rem 0 0; padding:0; }
.people li{ display:flex; align-items:center; gap:.5rem; font-weight:600; font-size:.95rem;
  background:var(--bg-soft); border-radius:999px; padding:.35rem .8rem .35rem .4rem; }
.avatar{ width:28px; height:28px; border-radius:50%; background:var(--accent);
  color:#fff; display:grid; place-items:center; font-size:.75rem; font-weight:800; flex:0 0 auto; }

/* Leitung-Karten */
.leader{ text-align:center; }
.leader .avatar-lg{ width:72px; height:72px; border-radius:50%; margin:0 auto 12px;
  background:linear-gradient(135deg,var(--accent),var(--accent-dark)); color:#fff;
  display:grid; place-items:center; font-size:1.5rem; font-weight:800; }
.leader .rolle{ color:var(--accent); font-weight:700; font-size:.92rem; }

/* --- Tabellen ------------------------------------------------------- */
.table-card{ overflow:hidden; padding:0; }
table.data{ width:100%; border-collapse:collapse; }
table.data th, table.data td{ text-align:left; padding:15px 22px; border-bottom:1px solid var(--line); }
table.data th{ background:var(--bg-soft); font-size:.82rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted); }
table.data tr:last-child td{ border-bottom:0; }
table.data td.price{ font-weight:800; color:var(--accent-dark); white-space:nowrap; }
.price-highlight td{ background:var(--accent-soft); }

/* Turnhallenbelegung */
.plan-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:20px; }
.plan-day h4{
  display:flex; align-items:center; gap:.55rem; margin:0 0 1rem; padding-bottom:.8rem;
  border-bottom:2px solid var(--accent-soft); font-size:1.05rem; font-weight:800; color:var(--ink);
}
.plan-day h4 svg{ width:19px; height:19px; color:var(--accent); flex:0 0 auto; }
.plan-row{
  display:flex; align-items:flex-start; flex-wrap:wrap; gap:.35rem .7rem; padding:.55rem 0;
  border-top:1px dashed var(--line);
}
.plan-row:first-of-type{ border-top:0; padding-top:0; }
.plan-time{
  display:inline-flex; align-items:center; gap:.32rem; flex:0 0 auto; font-size:.82rem; font-weight:700;
  color:var(--accent-dark); background:var(--accent-soft); padding:.28rem .6rem; border-radius:999px;
  white-space:nowrap;
}
.plan-time svg{ width:13px; height:13px; }
.plan-time--flex{ color:var(--muted); background:var(--bg-soft); font-style:italic; font-weight:600; }
.plan-group{
  flex:1 1 140px; min-width:0; font-size:.92rem; color:var(--ink); font-weight:600;
  overflow-wrap:anywhere; line-height:1.35; align-self:center;
}

/* --- Faustball ------------------------------------------------------ */
.team{ }
.team .liga{ display:inline-block; font-size:.8rem; font-weight:700; color:#fff;
  background:var(--accent); padding:.25rem .7rem; border-radius:999px; margin-bottom:.6rem; }
.team .liga.nachwuchs{ background:#5b9bd5; }
.team .coaches{ font-size:.9rem; color:var(--muted); margin:.2rem 0 .8rem; }

.match{ display:flex; align-items:center; gap:16px; padding:14px 0; border-bottom:1px solid var(--line); }
.match:last-child{ border-bottom:0; }
.match .date{ text-align:center; min-width:64px; }
.match .date b{ display:block; font-size:1.15rem; }
.match .date span{ font-size:.78rem; color:var(--muted); }
.match .who{ font-weight:700; }
.match .where{ font-size:.85rem; color:var(--muted); }
.match .badge-home{ margin-left:auto; font-size:.75rem; font-weight:700; padding:.3rem .7rem;
  border-radius:999px; background:var(--accent-soft); color:var(--accent-dark); }
.match .badge-away{ margin-left:auto; font-size:.75rem; font-weight:700; padding:.3rem .7rem;
  border-radius:999px; background:var(--bg-soft); color:var(--muted); }

.sponsors{ display:grid; grid-template-columns:repeat(auto-fill,minmax(165px,1fr)); gap:16px; }
.sponsor{
  display:flex; align-items:center; justify-content:center; min-height:130px; padding:22px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  transition:transform .18s, box-shadow .18s;
}
.sponsor img{ max-width:100%; max-height:86px; width:auto; height:auto; object-fit:contain; }
.sponsor .sponsor-name{ font-weight:700; color:var(--muted); text-align:center; }
.sponsor:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.sponsor-link{ display:block; }

/* --- Kontakt -------------------------------------------------------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:start; }
.contact-info .item{ display:flex; gap:14px; align-items:flex-start; margin-bottom:18px; }
.contact-info .icon-badge{ margin:0; flex:0 0 auto; }
.form-field{ margin-bottom:16px; }
.form-field label{ display:block; font-weight:600; font-size:.92rem; margin-bottom:.35rem; }
.form-field input, .form-field textarea, .form-field select{
  width:100%; padding:.8rem 1rem; border:1px solid var(--line); border-radius:var(--radius-sm);
  font:inherit; background:#fff; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{ outline:2px solid var(--accent); border-color:transparent; }
.form-note{ font-size:.85rem; color:var(--muted); margin-top:.5rem; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
@media (max-width:560px){ .form-row{ grid-template-columns:1fr; } }
.form-check{ display:flex; gap:12px; align-items:flex-start; font-size:.92rem; color:var(--muted); }
.form-check input{ width:20px; height:20px; margin-top:2px; flex:0 0 auto; accent-color:var(--accent); }

/* --- News ----------------------------------------------------------- */
.news .date{ font-size:.8rem; font-weight:700; color:var(--accent-2); text-transform:uppercase;
  letter-spacing:.05em; }

/* --- Callout / CTA -------------------------------------------------- */
.callout{
  border-radius:calc(var(--radius) + 6px); padding:48px; text-align:center; color:#fff;
  background:linear-gradient(135deg,var(--accent) 0%, var(--accent-dark) 100%);
  box-shadow:var(--shadow);
}
.callout h2{ color:#fff; }
.callout p{ color:rgba(255,255,255,.92); max-width:52ch; margin:0 auto 1.4rem; }

/* --- Footer --------------------------------------------------------- */
.footer{ background:#14171c; color:#cbd2dc; padding:56px 0 30px; }
.footer a{ color:#cbd2dc; }
.footer a:hover{ color:#fff; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px; margin-bottom:34px; }
.footer h4{ color:#fff; font-size:.95rem; text-transform:uppercase; letter-spacing:.06em; margin:0 0 1rem; }
.footer ul{ list-style:none; margin:0; padding:0; }
.footer li{ margin-bottom:.5rem; }
.footer .brand .logo{ background:var(--accent); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding-top:20px;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; font-size:.85rem;
  color:#8b93a1; }

/* --- Impressum ------------------------------------------------------ */
.legal{ max-width:760px; }
.legal .row{ display:grid; grid-template-columns:220px 1fr; gap:12px; padding:12px 0;
  border-bottom:1px solid var(--line); }
.legal .row b{ color:var(--ink); }
@media (max-width:560px){ .legal .row{ grid-template-columns:1fr; gap:2px; } }

/* --- Scroll-Einblenden ---------------------------------------------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero::before, .hero .eyebrow, .hero h1, .hero p,
  .hero-actions, .hero-badges, .brand-rule{ animation:none !important; }
  html{ scroll-behavior:auto; }
}

/* --- Chooser (Startseite index.html) -------------------------------- */
.chooser{ min-height:100vh; display:flex; align-items:center; padding:60px 0;
  background:linear-gradient(135deg,#1b1f27,var(--accent-dark)); color:#fff; }
.chooser .cards{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:36px; }
.choose-card{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius); padding:32px; transition:transform .18s, background .18s; }
.choose-card:hover{ transform:translateY(-4px); background:rgba(255,255,255,.1); }
.choose-card .tagnum{ font-size:.8rem; font-weight:800; letter-spacing:.12em; color:var(--accent);
  text-transform:uppercase; }
.choose-card h2{ color:#fff; margin:.3rem 0 .5rem; }
.choose-card p{ color:rgba(255,255,255,.82); }
.choose-preview{ height:150px; border-radius:12px; margin:16px 0; overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(135deg,#2a2016,var(--accent-dark)); position:relative; }
.choose-preview.multi{ background:var(--bg-soft); }

/* --- Foto-Karten (Anlagen) ------------------------------------------ */
.card--media{ padding:0; overflow:hidden; }
.card-photo{ aspect-ratio:16/10; overflow:hidden; }
.card-photo img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.card--media:hover .card-photo img{ transform:scale(1.05); }
.card-photo--ph{ display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-dark)); }
.card-photo--ph svg{ width:48px; height:48px; opacity:.92; }
.card--media .card-body{ padding:24px; }

/* --- Personen-Fotos (Leitung / Betreuer) ---------------------------- */
.leader .avatar-lg{ overflow:hidden; }
.leader .avatar-lg.has-photo{ background:none; }
.leader .avatar-lg img{ width:100%; height:100%; object-fit:cover; }

/* --- Faustball-Foto ------------------------------------------------- */
.faustball-photo{ margin:0; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:#fff; }
.faustball-photo img{ width:100%; object-fit:cover; display:block; aspect-ratio:3/2; }
.faustball-photo figcaption{ padding:12px 18px; font-size:.9rem; color:var(--muted); }

/* --- Social-Media-Icons --------------------------------------------- */
.social{ display:flex; gap:10px; flex-wrap:wrap; }
.social a{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent); transition:transform .15s, background .15s, color .15s; }
.social a:hover{ transform:translateY(-2px); background:var(--accent); color:#fff; }
.social svg{ width:20px; height:20px; }
.social-contact{ margin-top:22px; }
.social-footer{ margin-top:18px; }
.social-footer a{ background:rgba(255,255,255,.1); color:#fff; }
.social-footer a:hover{ background:var(--accent); color:#fff; }

/* --- Responsiv ------------------------------------------------------ */
@media (max-width:900px){
  .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); }
  .footer-top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  .nav-links{
    position:fixed; inset:var(--nav-h) 0 auto 0; flex-direction:column; align-items:stretch;
    background:#fff; color:var(--ink); padding:12px; gap:2px; box-shadow:var(--shadow);
    border-top:1px solid var(--line); display:none;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ padding:.85rem 1rem; border-radius:12px; }
  .nav-links .btn{ margin-top:6px; justify-content:center; }
  .nav-toggle{ display:inline-flex; }
  .nav .nav-cta-desktop{ display:none; }
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .chooser .cards{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr; }
  .section{ padding:60px 0; }
  .callout{ padding:34px 22px; }
}