/* =========
   Lerncoaching – Britta Schöttler
   Elegant, modern, logo-basiertes Corporate Design
   ========= */

:root{
  --bg: #FAF6F1;
  --panel: rgba(255,255,255,.84);
  --card: #ffffff;
  --text: #14213D;
  --muted: rgba(20,33,61,.72);
  --line: rgba(20,33,61,.12);

  --blue: #2C3E91;
  --blue2: #384FB0;
  --orange: #F7A600;
  --orange2: #FFB62A;

  --shadow: 0 18px 60px rgba(20,33,61,.12);
  --shadow2: 0 10px 30px rgba(20,33,61,.10);

  --radius: 18px;
  --radius2: 26px;

  --container: 1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: radial-gradient(1200px 700px at 20% -10%, rgba(44,62,145,.12), transparent 55%),
              radial-gradient(900px 600px at 90% 20%, rgba(247,166,0,.16), transparent 55%),
              var(--bg);
}

img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
.container{width:min(var(--container), calc(100% - 40px)); margin-inline:auto}

.skip{
  position:absolute; left:-999px; top:12px;
  background:#fff; padding:10px 14px; border-radius:12px; box-shadow: var(--shadow2);
}
.skip:focus{left:12px; z-index:9999}

/* ===== Header ===== */
.header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(250,246,241,.62);
  border-bottom: 1px solid rgba(20,33,61,.08);
}
.header.is-elevated{box-shadow: 0 10px 30px rgba(20,33,61,.08)}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding: 12px 0;
}
.brand{display:flex; align-items:center; gap:12px}
.brand__logo{height:44px; width:auto}

.nav__toggle{
  display:none;
  width:44px; height:44px; border-radius:14px;
  border:1px solid rgba(20,33,61,.12);
  background: rgba(255,255,255,.7);
  cursor:pointer;
}
.nav__toggle span{
  display:block; height:2px; width:20px; margin:5px auto;
  background: var(--blue);
  border-radius:99px;
}

.nav__list{
  list-style:none; padding:0; margin:0;
  display:flex; align-items:center; gap:18px;
}
.nav__list a{
  font-family:"Montserrat", sans-serif;
  font-weight:600;
  color: rgba(20,33,61,.86);
  padding:10px 10px;
  border-radius: 12px;
  transition: background .2s ease, transform .2s ease;
}
.nav__list a:hover{background: rgba(44,62,145,.08)}
.nav__list a:active{transform: translateY(1px)}

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  font-family:"Montserrat", sans-serif;
  font-weight:700;
  letter-spacing: .2px;
  padding: 12px 18px;
  min-height: 44px;
  border-radius: 16px;
  border: 1px solid rgba(20,33,61,.12);
  background: linear-gradient(180deg, var(--orange2), var(--orange));
  color:#1d1d1d;
  box-shadow: 0 14px 30px rgba(247,166,0,.20);
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  white-space:nowrap;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, opacity .18s ease;
}
.btn:hover{transform: translateY(-1px); filter: brightness(1.02)}
.btn:active{transform: translateY(0px); box-shadow: 0 10px 20px rgba(247,166,0,.18)}
.btn:focus-visible{
  outline: 3px solid rgba(44,62,145,.28);
  outline-offset: 3px;
}

.btn:disabled{
  opacity: .62;
  cursor: not-allowed;
  filter: none;
  transform: none;
  box-shadow: none;
}

.btn.is-loading{
  pointer-events: none;
}

.btn.is-loading::after{
  content:"";
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(20,33,61,.35);
  border-top-color: rgba(20,33,61,0);
  animation: spin .7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.btn--ghost{
  background: rgba(255,255,255,.72);
  box-shadow: none;
}
.btn--wide{width:100%}
.btn--sm{padding: 10px 12px; border-radius: 12px}

/* ===== Typography ===== */
h1,h2,h3{
  font-family:"Montserrat", sans-serif;
  letter-spacing: -0.02em;
  margin:0 0 12px 0;
}
h1{font-size: clamp(30px, 4.2vw, 48px); line-height:1.08; margin:0 0 14px 0}
h2{font-size: clamp(22px, 3vw, 34px); line-height:1.15; margin:0 0 12px 0}
h3{font-size: 18px; line-height:1.25; margin:0 0 10px 0}
p{margin:0 0 14px 0; color: rgba(20,33,61,.88)}
.lead{font-size: 16px; line-height:1.65}
.lead2{font-size: 16px; color: var(--muted); line-height:1.7}
.muted{color: var(--muted); font-size: 13px}

/* ===== Hero ===== */
.hero{
  position:relative;
  padding: 84px 0 40px 0;
  overflow:hidden;
}
.hero__bg{
  position:absolute; inset:0;
  background-size: cover;
  background-position: center;
  filter: saturate(1.05) contrast(1.05);
  transform: scale(1.02);
}
.hero__overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(250,246,241,.92), rgba(250,246,241,.72) 55%, rgba(250,246,241,.88)),
    radial-gradient(900px 500px at 15% 25%, rgba(44,62,145,.20), transparent 60%),
    radial-gradient(700px 420px at 70% 10%, rgba(247,166,0,.24), transparent 60%);
}
.hero__shape{
  position:absolute;
  width: 900px; height: 900px;
  right:-500px; top:-420px;
  background: radial-gradient(circle at 30% 30%, rgba(44,62,145,.22), transparent 55%);
  border-radius: 999px;
  filter: blur(10px);
  opacity: .9;
}
.hero__inner{
  position:relative;
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 28px;
  align-items: start;
}
.badge{
  display:inline-flex;
  font-family:"Montserrat", sans-serif;
  font-weight: 700;
  letter-spacing:.08em;
  font-size: 12px;
  color: rgba(44,62,145,.92);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(44,62,145,.14);
  border-radius: 999px;
  padding: 8px 12px;
  margin-bottom: 14px;
}
.hero__actions{display:flex; gap:12px; flex-wrap:wrap; margin-top: 18px}

.hero__stats{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.stat{
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(20,33,61,.10);
  border-radius: 16px;
  padding: 12px 12px;
  box-shadow: 0 12px 26px rgba(20,33,61,.08);
}
.stat__k{
  font-family:"Montserrat", sans-serif;
  font-weight: 800;
  color: var(--blue);
  font-size: 18px;
}
.stat__v{font-size: 12px; color: rgba(20,33,61,.76); margin-top: 4px}

.panel{
  background: var(--panel);
  border: 1px solid rgba(20,33,61,.12);
  border-radius: var(--radius2);
  padding: 20px 18px;
  box-shadow: var(--shadow);
}
.panel__title{margin-bottom: 10px}
.panel__cta{margin-top: 14px}
.checklist{list-style:none; padding:0; margin: 12px 0 0 0}
.checklist li{
  position:relative; padding-left: 26px; margin: 10px 0;
  color: rgba(20,33,61,.85);
}
.checklist li::before{
  content:"";
  position:absolute; left:0; top: 6px;
  width: 14px; height: 14px; border-radius: 4px;
  background: linear-gradient(180deg, rgba(44,62,145,.16), rgba(44,62,145,.06));
  border: 1px solid rgba(44,62,145,.25);
  box-shadow: 0 6px 14px rgba(44,62,145,.12);
}
.checklist li::after{
  content:"";
  position:absolute; left:4px; top: 10px;
  width: 6px; height: 3px;
  border-left: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: rotate(-45deg);
}
.checklist--compact li{margin: 8px 0}

/* ===== Sections ===== */
.section{padding: 74px 0}
.section--soft{
  background: linear-gradient(180deg, rgba(255,255,255,.50), rgba(255,255,255,.24));
  border-top: 1px solid rgba(20,33,61,.06);
  border-bottom: 1px solid rgba(20,33,61,.06);
}
.section__head{max-width: 760px; margin-bottom: 22px}
.section__head p{margin:0}

.strip{padding: 28px 0}
.strip__inner{
  display:grid; grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items:center;
}
.strip__text{
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(20,33,61,.10);
  border-radius: var(--radius2);
  padding: 18px 18px;
  box-shadow: 0 10px 24px rgba(20,33,61,.07);
}
.strip__cards{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px}
.mini{
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(20,33,61,.10);
  border-radius: 18px;
  padding: 14px 14px;
  box-shadow: 0 10px 22px rgba(20,33,61,.06);
}
.mini__title{
  font-family:"Montserrat", sans-serif;
  font-weight:800;
  color: var(--blue);
  margin-bottom: 6px;
}
.mini__desc{color: rgba(20,33,61,.78); font-size: 13px; line-height:1.55}

/* ===== Cards ===== */
.cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}
.card{
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(20,33,61,.10);
  border-radius: var(--radius2);
  overflow:hidden;
  box-shadow: var(--shadow2);
  display:flex;
  flex-direction: column;
  min-height: 520px;
}
.card__media{
  height: 180px;
  background-size: cover;
  background-position: center;
}
.card__body{padding: 16px 16px 18px 16px; display:flex; flex-direction:column; gap: 10px}
.card__body p{color: rgba(20,33,61,.82)}
.bullets{margin:0; padding-left: 18px; color: rgba(20,33,61,.84)}
.bullets li{margin: 7px 0}
.link{
  margin-top: auto;
  font-family:"Montserrat", sans-serif;
  font-weight: 800;
  color: var(--blue);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.link::after{
  content:"→";
  transition: transform .18s ease;
}
.link:hover::after{transform: translateX(2px)}

/* ===== Split / figure ===== */
.split{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 22px;
  align-items:center;
}
.grid2{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-top: 16px}
.iconcard{
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(20,33,61,.10);
  border-radius: 18px;
  padding: 14px 14px;
  box-shadow: 0 10px 22px rgba(20,33,61,.06);
}
.iconcard__t{
  font-family:"Montserrat", sans-serif;
  font-weight: 800;
  color: rgba(20,33,61,.92);
  margin-bottom: 6px;
}
.iconcard__d{color: rgba(20,33,61,.74); font-size: 13px; line-height:1.55}

.figure{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(20,33,61,.10);
  border-radius: var(--radius2);
  padding: 12px;
  box-shadow: var(--shadow);
}
.figure img{border-radius: 18px}
.figure figcaption{margin-top: 10px; color: rgba(20,33,61,.72); font-size: 13px}

/* ===== Timeline ===== */
.timeline{display:grid; gap: 14px; margin-top: 14px}
.step{
  display:grid;
  grid-template-columns: 54px 1fr;
  gap: 12px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(20,33,61,.10);
  border-radius: var(--radius2);
  padding: 14px 14px;
  box-shadow: 0 10px 22px rgba(20,33,61,.06);
}
.step__n{
  width: 42px; height: 42px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  font-family:"Montserrat", sans-serif;
  font-weight: 900;
  color: #1d1d1d;
  background: linear-gradient(180deg, var(--orange2), var(--orange));
  box-shadow: 0 12px 24px rgba(247,166,0,.18);
}
.step__c p{color: rgba(20,33,61,.78)}

.cta{
  margin-top: 22px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px;
  border-radius: var(--radius2);
  border: 1px solid rgba(44,62,145,.14);
  background: linear-gradient(180deg, rgba(44,62,145,.10), rgba(44,62,145,.04));
}
.cta__text p{margin:0; color: rgba(20,33,61,.78)}

/* ===== About ===== */
.about{
  display:grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 20px;
  align-items:center;
}
.about__img img{
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
}
.quote{
  margin-top: 16px;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(247,166,0,.22);
  background: rgba(255,255,255,.74);
}
.quote p{margin:0; color: rgba(20,33,61,.84)}

/* ===== FAQ ===== */
.faq{
  display:grid;
  gap: 12px;
  max-width: 860px;
}
details{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(20,33,61,.10);
  border-radius: 18px;
  padding: 12px 14px;
  box-shadow: 0 10px 22px rgba(20,33,61,.06);
}
summary{
  cursor:pointer;
  font-family:"Montserrat", sans-serif;
  font-weight: 800;
  color: rgba(20,33,61,.92);
  list-style:none;
}
summary::-webkit-details-marker{display:none}
details p{margin: 10px 0 0 0; color: rgba(20,33,61,.78); line-height:1.65}

/* ===== Contact ===== */
.section--contact{
  background: radial-gradient(900px 520px at 10% 10%, rgba(247,166,0,.18), transparent 60%),
              radial-gradient(900px 520px at 90% 0%, rgba(44,62,145,.16), transparent 60%),
              rgba(255,255,255,.38);
  border-top: 1px solid rgba(20,33,61,.06);
}
.contact{
  display:grid;
  gap: 18px;
}
.contact__grid{
  display:grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 18px;
  align-items:center; /* Form rechts mittig zum Bild */
}
.contact__right{margin-top: 0}

.contact__meta{display:grid; gap: 10px; margin-top: 14px}
.meta{
  display:flex; flex-direction:column; gap: 4px;
  padding: 12px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(20,33,61,.10);
  box-shadow: 0 10px 22px rgba(20,33,61,.06);
}
.meta__k{font-family:"Montserrat", sans-serif; font-weight: 800; color: var(--blue); font-size: 12px; letter-spacing:.04em; text-transform:uppercase}
.meta__v{color: rgba(20,33,61,.82)}
.contact__photo{
  margin-top: 0;
  border-radius: var(--radius2);
  overflow:hidden;
  border: 1px solid rgba(20,33,61,.10);
  box-shadow: var(--shadow);
}
.form{
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(20,33,61,.10);
  border-radius: var(--radius2);
  padding: 16px;
  box-shadow: var(--shadow);
}
.form__row{display:grid; grid-template-columns: 1fr 1fr; gap: 10px}
.field{display:grid; gap: 6px; margin-bottom: 10px}
.field span{font-family:"Montserrat", sans-serif; font-weight: 800; color: rgba(20,33,61,.90); font-size: 13px}
input, textarea{
  width:100%;
  font: inherit;
  color: rgba(20,33,61,.92);
  background: rgba(250,246,241,.72);
  border: 1px solid rgba(20,33,61,.14);
  border-radius: 14px;
  padding: 12px 12px;
  outline:none;
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
textarea{resize: vertical; min-height: 140px}
input:focus, textarea:focus{
  border-color: rgba(44,62,145,.35);
  box-shadow: 0 0 0 4px rgba(44,62,145,.12);
}
input:invalid:focus, textarea:invalid:focus{
  border-color: rgba(204, 57, 57, .5);
  box-shadow: 0 0 0 4px rgba(204, 57, 57, .10);
}
.consent{
  display:flex; gap: 10px; align-items:flex-start;
  margin: 10px 0 12px 0;
  color: rgba(20,33,61,.76);
  font-size: 13px;
}
.consent input{width:18px; height:18px; margin-top: 2px}
.form__actions{display:grid; gap: 10px}
.form__hint{
  margin: 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(44,62,145,.05);
  border: 1px solid rgba(44,62,145,.10);
  color: rgba(20,33,61,.78);
  font-size: 13px;
}

.form__status{
  margin-top: 10px;
  border-radius: 16px;
  padding: 10px 12px;
  display:none;
}
.form__status.is-ok{
  display:block;
  background: rgba(46, 160, 67, .10);
  border: 1px solid rgba(46, 160, 67, .20);
  color: rgba(20,33,61,.90);
}
.form__status.is-err{
  display:block;
  background: rgba(204, 57, 57, .08);
  border: 1px solid rgba(204, 57, 57, .18);
  color: rgba(20,33,61,.90);
}

/* ===== Footer ===== */
.footer{padding: 26px 0 34px 0}
.footer__inner{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items:center;
}
.footer__brand{
  display:flex; align-items:center; gap: 12px;
}
.footer__brand img{height: 34px; width:auto}
.footer__brand p{margin:0; color: rgba(20,33,61,.74)}
.footer__links{
  display:flex; gap: 16px; justify-content:flex-end; flex-wrap:wrap;
  font-family:"Montserrat", sans-serif;
  font-weight: 700;
  color: rgba(20,33,61,.78);
}
.footer__fine{
  grid-column: 1 / -1;
  display:flex; gap: 10px; flex-wrap:wrap;
  color: rgba(20,33,61,.66);
  font-size: 13px;
  align-items:center;
}
.dot{opacity:.6}

/* ===== Reveal animation ===== */
.reveal{
  opacity:0;
  transform: translateY(10px);
  transition: opacity .55s ease, transform .55s ease;
}
.reveal.is-in{
  opacity:1;
  transform: translateY(0);
}

/* ===== Responsive ===== */
@media (max-width: 980px){
  .hero__inner{grid-template-columns: 1fr; gap: 16px}
  .hero{padding-top: 74px}
  .strip__inner{grid-template-columns: 1fr}
  .strip__cards{grid-template-columns: 1fr}
  .cards{grid-template-columns: 1fr}
  .card{min-height: unset}
  .split{grid-template-columns: 1fr}
  .about{grid-template-columns: 1fr}
  .contact__grid{grid-template-columns: 1fr}
  .footer__inner{grid-template-columns: 1fr}
  .footer__links{justify-content:flex-start}
}

@media (max-width: 860px){
  .nav__toggle{display:inline-flex; align-items:center; justify-content:center}
  .nav__list{
    position: absolute;
    right: 20px;
    top: 70px;
    width: min(320px, calc(100vw - 40px));
    padding: 12px;
    border-radius: 18px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(20,33,61,.12);
    box-shadow: var(--shadow);
    display:none;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .nav__list.is-open{display:flex}
  .nav__list a{padding: 12px 12px}
  .hero__stats{grid-template-columns: 1fr}
  .form__row{grid-template-columns: 1fr}
}


/* ===== Polishing / Eleganz ===== */
::selection{background: rgba(247,166,0,.28)}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible{
  outline: 3px solid rgba(44,62,145,.28);
  outline-offset: 3px;
  border-radius: 14px;
}
.header__inner{padding: 10px 0}
.brand__logo{height: 46px}
.nav__list a{position:relative}
.nav__list a:not(.btn)::after{
  content:"";
  position:absolute;
  left: 10px; right: 10px; bottom: 6px;
  height: 2px;
  background: linear-gradient(90deg, rgba(247,166,0,.0), rgba(247,166,0,.75), rgba(247,166,0,.0));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .22s ease;
  border-radius: 99px;
  opacity: .9;
}
.nav__list a:not(.btn):hover::after{transform: scaleX(1)}

.card{transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.card:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 70px rgba(20,33,61,.14);
  border-color: rgba(44,62,145,.18);
}
.card__body{gap: 10px}
.card__actions{
  display:flex;
  flex-direction: column;
  align-items:flex-start;
  justify-content:flex-start;
  gap: 8px;
  margin-top: auto;
}
.card__actions .link{margin-top: 0}
.card__actions .btn{box-shadow:none}
.card__actions .btn:hover{transform: translateY(-1px)}
.card__actions .btn:active{transform: translateY(0px)}

/* Subpages */
.page-hero{
  padding: 68px 0 18px 0;
}
.page-hero__wrap{
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(20,33,61,.10);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  overflow:hidden;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 0;
}
.page-hero__content{
  padding: 22px 22px;
}
.breadcrumb{
  display:flex; gap: 8px; flex-wrap:wrap;
  font-family:"Montserrat", sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: rgba(20,33,61,.70);
  margin-bottom: 10px;
}
.breadcrumb a{color: rgba(44,62,145,.92)}
.pill{
  display:inline-flex;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(44,62,145,.14);
  background: rgba(44,62,145,.06);
  color: rgba(44,62,145,.92);
  font-family:"Montserrat", sans-serif;
  font-weight: 800;
  font-size: 12px;
  margin-top: 10px;
}
.page-hero__media{
  min-height: 260px;
  background-size: cover;
  background-position: center;
}
.page-grid{
  display:grid;
  grid-template-columns: 1fr .95fr;
  gap: 18px;
  align-items:start;
}
.panel-soft{
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(20,33,61,.10);
  border-radius: var(--radius2);
  padding: 16px;
  box-shadow: 0 10px 22px rgba(20,33,61,.06);
}
.kv{
  display:grid;
  gap: 10px;
  margin-top: 12px;
}
.kv__row{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(250,246,241,.70);
  border: 1px solid rgba(20,33,61,.10);
}
.kv__k{font-family:"Montserrat", sans-serif; font-weight: 800; color: rgba(20,33,61,.88)}
.kv__v{color: rgba(20,33,61,.74)}
.divider{
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(20,33,61,.18), transparent);
  margin: 18px 0;
}

/* Footer polish */
.footer__links a{
  padding: 8px 10px;
  border-radius: 12px;
  transition: background .18s ease;
}
.footer__links a:hover{background: rgba(44,62,145,.06)}

@media (max-width: 980px){
  .page-hero__wrap{grid-template-columns: 1fr}
  .page-grid{grid-template-columns: 1fr}
}