/* ============================================================
   Aufsperrdienst Linz — reviews.css
   Bewertungen index + submission form. Loads after main.css.
   Prefix: alr-  (the form keeps its shared jqr_ / rev-form hooks)
   ============================================================ */

/* ---------- hero ---------- */
.alr-hero{background:var(--ink);padding:54px 0 64px}
.alr-hero__in{width:min(var(--wrap),100% - var(--gut) * 2);margin-inline:auto;max-width:900px}
.alr-crumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:30px;
  font-family:var(--fm);font-size:var(--t-label);color:var(--on-dark-2);
}
.alr-crumb a{color:var(--on-dark-2)}
.alr-crumb a:hover{text-decoration:underline;color:var(--on-dark)}
.alr-hero .al-label{margin-bottom:14px}
.alr-hero__title{
  color:var(--on-dark);font-size:var(--t-h1);line-height:1;
  letter-spacing:-.02em;margin-bottom:20px;
}
.alr-hero__lead{color:var(--on-dark-2);font-size:var(--t-lead2);max-width:66ch;margin-bottom:30px}
.alr-hero__score{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;
  color:var(--on-dark-2);font-size:var(--t-body);
}
.alr-hero__score b{font-weight:400;color:var(--on-dark);font-family:var(--fm)}
.alr-hero__stars{font-size:16px;letter-spacing:.14em;color:var(--on-dark)}
.alr-hero__stats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:35px;
}
.alr-stat{border-top:1px solid var(--line-d);padding-top:15px;min-width:0}
.alr-stat b{
  display:block;font-family:var(--fm);font-size:var(--t-lead);font-weight:400;
  color:var(--on-dark);margin-bottom:6px;
}
.alr-stat span{display:block;font-size:var(--t-body);color:var(--on-dark-2)}

/* ---------- list ---------- */
.alr-main{padding:var(--pad) 0}
.alr-main__in{width:min(var(--wrap),100% - var(--gut) * 2);margin-inline:auto}
.alr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.alr-card{
  min-width:0;background:var(--tile);padding:30px 27px;
  display:flex;flex-direction:column;
}
.alr-card__stars{font-size:15px;letter-spacing:.14em;color:var(--ink);margin-bottom:18px}
.alr-card__text{color:var(--ink-2);font-size:var(--t-body);line-height:1.6;margin-bottom:24px}
.alr-card__foot{margin-top:auto;padding-top:17px;border-top:1px solid var(--line)}
.alr-card__name{
  display:block;font-size:var(--t-body);color:var(--ink);
  text-transform:uppercase;letter-spacing:.04em;
}
.alr-card__meta{
  display:block;margin-top:5px;font-family:var(--fm);
  font-size:var(--t-label);color:var(--ink-3);
}

/* ---------- pagination ---------- */
.alr-pag{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:var(--gap);margin-top:52px;
}
.alr-pag__btn{
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid var(--line);padding:11px 20px;
  font-size:var(--t-body);color:var(--ink);
}
.alr-pag__btn:hover{border-color:var(--ink)}
.alr-pag__btn--prev img{transform:rotate(180deg)}
.alr-pag__nums{display:flex;flex-wrap:wrap;gap:var(--gap)}
.alr-pag__num{
  display:grid;place-items:center;min-width:44px;height:44px;padding:0 12px;
  border:1px solid var(--line);font-family:var(--fm);font-size:var(--t-body);color:var(--ink);
}
.alr-pag__num:hover{border-color:var(--ink)}
.alr-pag__num--on{background:var(--ink);border-color:var(--ink);color:var(--on-dark)}
.alr-pag__dots{
  display:grid;place-items:center;min-width:32px;height:44px;
  font-family:var(--fm);color:var(--ink-3);
}

/* ---------- submission form ---------- */
.alr-form{background:var(--tile);padding:var(--pad) 0}
.alr-form__in{
  width:min(var(--wrap),100% - var(--gut) * 2);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:52px;align-items:start;
}
.alr-form__side .al-label{margin-bottom:14px}
.alr-form__side h2{font-size:var(--t-h2);margin-bottom:15px;color:var(--ink)}
.alr-form__side p{color:var(--ink-3);font-size:var(--t-lead2);max-width:46ch}
.alr-form__panel{background:var(--paper);padding:35px 32px;min-width:0;color:var(--ink-2)}

/* the form markup is shared across the network — style it, never rename it */
.rev-form__form input[type="text"],
.rev-form__form textarea{
  width:100%;min-width:0;display:block;margin-bottom:var(--gap);
  padding:13px 14px;border:1px solid var(--line);border-radius:0;
  background:#fff;color:var(--ink-2);font-size:var(--t-body);line-height:1.45;
  font-family:var(--f);
}
.rev-form__form textarea{resize:vertical;min-height:130px}
.rev-form__form input::placeholder,
.rev-form__form textarea::placeholder{color:#8a8a8a}
.rev-form__form input:focus,
.rev-form__form textarea:focus{outline:none;border-color:var(--ink)}
.rev-form__form label > span{
  font-family:var(--fm);font-size:var(--t-label);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);
}
.jqr_star-rating{display:flex;gap:7px;color:var(--ink)}
.jqr_star-rating i{color:var(--ink-3)}
.jqr_star-rating i.fas,
.jqr_star-rating i.active{color:var(--ink)}
.jqr_error-message{
  font-family:var(--fm);font-size:11px;color:#b00020;margin-top:5px;margin-bottom:8px;
}
.rev-form__form button,
#jqr_submit{
  width:100%;display:inline-flex;align-items:center;justify-content:center;
  padding:16px 25px;margin-top:12px;border:0;cursor:pointer;
  background:var(--ink);color:var(--paper);border-radius:var(--pill);
  font-family:var(--f);font-size:var(--t-lead2);
}
#jqr_submit:hover{text-decoration:underline}

/* ---------- cta ---------- */
.alr-cta{background:var(--ink);padding:var(--pad) 0}
.alr-cta__in{
  width:min(var(--wrap),100% - var(--gut) * 2);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:35px;align-items:center;
}
.alr-cta__in h2{color:var(--on-dark);font-size:var(--t-h2);margin-bottom:14px}
.alr-cta__in p{color:var(--on-dark-2);max-width:60ch}
.alr-cta__actions{display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-width:0}
.alr-cta__link{
  color:var(--on-dark-2);font-size:var(--t-body);
  border-bottom:1px solid var(--line-d);padding-bottom:2px;
}
.alr-cta__link:hover{color:var(--on-dark);border-bottom-color:var(--on-dark)}

/* ---------- responsive ---------- */
@media (max-width:1200px){
  .alr-hero{padding:48px 0 56px}
}
@media (max-width:1024px){
  .alr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .alr-form__in{grid-template-columns:minmax(0,1fr);gap:30px}
  /* the CTA stacks as grid rows — no flex-basis, so no phantom gap */
  .alr-cta__in{grid-template-columns:minmax(0,1fr);gap:27px}
}
@media (max-width:768px){
  .alr-hero{padding:40px 0 44px}
  .alr-hero__stats{grid-template-columns:minmax(0,1fr);gap:0}
  .alr-stat{padding:14px 0;border-top:1px solid var(--line-d)}
  .alr-form__panel{padding:28px 22px}
}
@media (max-width:480px){
  .alr-grid{grid-template-columns:minmax(0,1fr)}
  .alr-card{padding:26px 22px}
  .alr-pag__btn span{display:none}
  .alr-pag__btn{padding:11px 14px}
}