/* ==========================================================================
   MeinMusiklehrer24.de -- modern theme (v2: clean SaaS-marketplace look)
   Scoped entirely to body.landing-page so the logged-in dashboard (Inspinia
   admin theme) is never touched. Loaded after style.css in frontendbase.
   ========================================================================== */

/* Dark theme -- Raycast-style (deep navy canvas + violet glow), built from
   our own palette instead of neutral black. --ink and --bg swapped roles
   from the light theme (ink is now the light text color, bg is now the dark
   canvas) -- the two hardcoded light-background exceptions this broke
   (.btn-white, .btn-w-m.btn-default) are fixed further down. */
:root {
  --ink: #f5f4ff;
  --muted: #9b98c2;
  --bg: #071726;
  --bg-soft: #192b49;
  --primary: #d54ad0;
  --primary-dark: #a625a2;
  --primary-tint: rgba(139, 92, 246, 0.16);
  --primary-gradient: linear-gradient(180deg, #d54ad0 0%, #d54ad0 100%);
  --primary-gradient-hover: linear-gradient(180deg, #d54ad0 0%, #d54ad0 100%);
  --hero-gradient: linear-gradient(135deg, #d54ad0 0%, #120526 100%);
  --glow: rgba(139, 92, 246, 0.4);
  --accent: #ff7a59;
  --accent-tint: rgba(255, 122, 89, 0.15);
  --border: rgba(255, 255, 255, 0.1);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 16px 32px rgba(0, 0, 0, 0.45);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --font-display: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* reusable "plastic" gloss treatment: gradient fill + a subtle top sheen + soft tinted shadow.
   Kept deliberately restrained (small highlight, low-opacity shadow) -- a loud rainbow
   gradient with a bright highlight reads as clip-art, not a premium glossy surface. */
.landing-page .btn-glossy {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 60%), var(--primary-gradient);
  border: none;
  color: #fff;
  box-shadow: 0 6px 16px var(--glow);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-image 0.15s ease;
}

.landing-page .btn-glossy:hover,
.landing-page .btn-glossy:focus {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 60%), var(--primary-gradient-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px var(--glow);
}

/* neutralize the legacy Inspinia "dim" skeuomorphic 3D shelf-shadow (the source of the
   stray green edge under buttons) -- .landing-page ancestor lifts specificity above the
   original button.btn-primary.dim rule in style.css without needing !important. */
.landing-page button.dim,
.landing-page button.btn-primary.dim,
.landing-page button.btn-default.dim {
  box-shadow: none;
}

.landing-page button.dim:active {
  top: 0;
}

@media (prefers-reduced-motion: reduce) {
  .landing-page .wow { animation: none !important; opacity: 1 !important; }
}

/* -------------------------------------------------------------- base ---- */

body.landing-page {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.landing-page a { color: var(--primary); text-decoration: none; }
.landing-page a:hover,
.landing-page a:focus { color: var(--primary-dark); }

.landing-page :focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.landing-page h1,
.landing-page h2,
.landing-page h3,
.landing-page .logo-name {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.landing-page h1 {
  font-size: 3.5rem;
  line-height: 1.1;
    margin-top: 35px;
  margin-bottom: 1rem;
}

.landing-page #teacherlist {
    padding-top: 40px;
}

/* On the search-results page (Frontend/teacherlistMain.html.twig), #teacherlist
   isn't a sibling of .quiz like it is on the homepage -- it's nested INSIDE
   .container-fluid.quiz (the closing </div> for .quiz comes after </section>,
   not before it), so the "section + section" sibling divider never reaches
   it and the plain padding-top above reads as empty space within the same
   background rather than a real break. Descendant selector reaches it
   regardless of nesting depth, plus the same glossy hairline used between
   other sections for a visible seam. */
.landing-page .quiz #teacherlist {
  position: relative;
  padding-top: 64px !important;
  /* #teacherlist has no background of its own here (unlike the homepage's
     #teacherlist.team.gray-section), so it was showing body.landing-page's
     dark background straight through -- identical to .quiz above it. The
     padding-top and divider below were both already correct, but with zero
     color contrast between the two blocks the seam was invisible. */
  background: var(--bg-soft) !important;
  padding-bottom: 40px;
}

.landing-page .quiz #teacherlist::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1080px, 90%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4) 50%, transparent);
  box-shadow: 0 1px 16px rgba(255, 255, 255, 0.18);
  pointer-events: none;
}

.landing-page p { font-size: 1.9rem; line-height: 1.65; color: var(--muted); }

/* style.css (the original Inspinia theme) has a leftover ".landing-page
   section p { color: #000000; }" rule from the pre-redesign light theme --
   more specific than the rule above, so it silently wins and forces black
   text inside every <section> (nearly all content on these pages). */
.landing-page section p {
  color: var(--muted);
}

/* generic form-control dark styling -- covers plain, non-Symfony-form-theme
   markup like the login page, which sits outside every other scoped form
   rule (.quiz .jumbotron > form) elsewhere in this file. */
.landing-page .form-control {
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  box-shadow: none;
}

.landing-page .form-control::placeholder {
  color: var(--muted);
}

.landing-page .form-control:focus {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-tint);
  color: var(--ink);
}

.landing-page .navy,
.landing-page .text-navy { color: var(--ink) !important; }

.landing-page .navy-line { display: none; }

.landing-page section { padding-bottom: 76px; }
.landing-page .gray-section { background: var(--bg-soft); margin-top: 0; }

/* Section boundaries only differ by a flat background swap (--bg vs
   --bg-soft vs the footer's #0d1738), which reads as a hard, un-designed
   seam. A thin centered gradient hairline with a soft white glow bridges
   the seam instead -- glossy without being a loud full-bleed rule.
   #contact is targeted directly rather than via "section + footer.contact":
   each template's trailing <script>/<form> tags render inline right after
   its visible content (e.g. the slick-carousel <script> after .comments'
   closing </section>), so the footer is never actually an adjacent sibling
   of the section before it in the real DOM. */
.landing-page .quiz + section,
.landing-page section + section,
.landing-page #contact {
  position: relative;
}

.landing-page .quiz + section::before,
.landing-page section + section::before,
.landing-page #contact::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1080px, 90%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4) 50%, transparent);
  box-shadow: 0 1px 16px rgba(255, 255, 255, 0.18);
  pointer-events: none;
}

.landing-page .kicker {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  color: var(--primary);
  margin-bottom: 10px;
}
/* Trust badge above the quiz hero heading. Originally a near-transparent
   white wash (6% opacity) with a var(--primary) icon -- but the hero
   background is --hero-gradient (magenta fading to near-black), the same
   color family as --primary, so the badge's fill barely showed and its
   icon nearly vanished against the gradient's magenta half. Switched to a
   dark frosted-glass pill (same recipe as the navbar's blurred background)
   so it reads as a solid surface against either half of the gradient, plus
   a warm gold icon color instead of --primary to stay visible on magenta. */
.landing-page .trust-banner {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  margin-bottom: 65px;
  border-radius: 999px;
  background: rgba(7, 23, 38, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.landing-page .trust-banner .fa {
  color: #ffd166;
  font-size: 13px;
}

/* Same glossy hairline recipe used between page sections, scaled down as a
   small decorative separator between the trust badge and the quiz heading
   below it, instead of the two just sitting flush against each other. */
.landing-page .trust-banner::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -39px;
  transform: translateX(-50%);
  width: 90px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5) 50%, transparent);
  box-shadow: 0 1px 12px rgba(255, 255, 255, 0.25);
  pointer-events: none;
}

.landing-page .subhead {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 2.45rem;
  margin-top: 6px;
}

/* ------------------------------------------------------------- navbar --- */

.landing-page .nav-helper { height: 80px; }

.landing-page .navbar-default,
.landing-page .navbar-default.navbar-scroll {
  background: rgba(10, 19, 48, 0.75);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}

/* the brand row and the nav-links row have different intrinsic heights (icon
   mark vs. plain text) -- flexing the shared .container aligns them on a
   common vertical center instead of each sitting at its own top edge.
   max-width/width are reset because Bootstrap's .container is a centered,
   fixed-width box -- on a wide screen that leaves a large empty margin
   before the logo even starts, so it never actually sits at the true left
   edge of the page. */
.landing-page .navbar-default > .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: none;
  width: 100%;
  padding-left: 32px;
  padding-right: 32px;
}

.landing-page .navbar-default .navbar-header,
.landing-page .navbar-default .navbar-collapse {
  float: none;
}

.landing-page .navbar-default .navbar-nav {
  display: flex;
  align-items: center;
  margin-top: 0;
  margin-bottom: 0;
}

.landing-page .navbar-default .navbar-nav > li {
  float: none;
  display: flex;
  align-items: center;
}

.landing-page .navbar-default .navbar-nav > li > a {
  padding-top: 12px;
  padding-bottom: 12px;
  border-top: none;
  border-radius: 999px;
  margin: 0 2px;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.landing-page .navbar-default .nav li a,
.landing-page .navbar-scroll.navbar-default .nav li a {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  font-size: 16px;
  color: var(--ink);
  position: relative;
}

.landing-page .navbar-default .navbar-nav > li > a:hover,
.landing-page .navbar-default .navbar-nav > li > a:focus {
  color: var(--primary);
  background: var(--primary-tint);
}

.landing-page .navbar-default .navbar-nav > .active > a,
.landing-page .navbar-default .navbar-nav > .active > a:hover,
.landing-page .navbar-scroll.navbar-default .nav li a:hover,
.landing-page .navbar-default .navbar-nav > .active > a:focus {
  background: transparent;
  color: var(--primary);
  border-top: none;
  font-weight: 700;
}



.landing-page .navbar-default .navbar-nav > li > a[data-route-name="login"] {
  border: 1.5px solid var(--border);
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 18px;
  padding-right: 18px;
}

.landing-page .navbar-default .navbar-nav > li > a[data-route-name="login"]:hover {
  border-color: var(--primary);
  background: var(--primary-tint);
}

.landing-page .navbar-default .navbar-brand,
.landing-page .navbar-default .navbar-brand:hover,
.landing-page .navbar-default .navbar-brand:focus {
  background-image: none;
  background-color: #0d1738;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  padding: 9px 16px 9px 9px;
  margin: 12px 0;
  border-radius: 999px;
  display: flex;
  align-items: center;
  height: auto;
}

.landing-page .navbar-default .navbar-brand {
  position: relative;
}

.landing-page .navbar-default .navbar-brand::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 32px;
  margin-right: 10px;
  border-radius: 10px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 17.5V5.4L19 3.4v11.7' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='7' cy='18' r='2.6' fill='white'/%3E%3Ccircle cx='17' cy='16' r='2.6' fill='white'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 60%),
    var(--primary-gradient);
  background-repeat: no-repeat;
  background-position: center, center, center;
  background-size: 16px 16px, cover, cover;
  flex: 0 0 auto;
  vertical-align: middle;
}

.landing-page .navbar-toggle {
  border-color: var(--border);
  border-radius: 8px;
  margin-top: 18px;
}

.landing-page .navbar-toggle .icon-bar {
  background-color: var(--ink);
}

.landing-page .navbar-toggle:hover,
.landing-page .navbar-toggle:focus {
  background-color: var(--primary-tint);
  border-color: var(--primary);
}

/* --------------------------------------------------------- teacher-profile-frontend -- */

#teacher-profile-frontend .teacher-quickfacts {
    margin-bottom: 25px;
}
#teacher-profile-frontend p {
    font-size: 20px;
    color: #fff;
}
#teacher-profile-frontend h4 {
    font-size: 25px;

}


/* --------------------------------------------------------- quiz / hero -- */

.quiz {
  padding-left: 0;
  padding-right: 0;
  background: var(--bg);
}

.quiz .progress {
  height: 4px;
  border-radius: 0;
  background: var(--border);
  box-shadow: none;
  position: relative;
  z-index: 1;
}

.quiz .progress-bar {
  background-image: var(--primary-gradient);
  box-shadow: none;
}

.quiz .jumbotron {
  background: var(--hero-gradient);
  color: var(--ink);
  border-radius: 0;
  box-shadow: 0px 17px 8px -14px rgba(255, 255, 255, 0.25);
  margin-bottom: 0;
  position: relative;
  z-index: 1;
}

/* Deliberately NOT flexbox. The step markup is a bare <h1> followed by plain sibling
   <button> elements (no wrapper div around the options) -- Bootstrap's .btn is
   inline-block by default, so normal block flow + text-align:center (inherited from
   the .text-center class already on this element) is all that's needed for the
   heading to take its own full line and the buttons to wrap into a centered row/grid
   below it. Flexbox here caused more bugs than it solved (buttons stacking one-per-row
   when flex-direction was column, then a mystery h1-not-wrapping issue after switching
   to row-wrap) for no benefit once the hero no longer needs viewport-height centering. */
.quiz .activeStepInfo.jumbotron {
  display: block !important;
  padding: 100px 24px !important;
}

.quiz .activeStepInfo.jumbotron .btn {
  margin: 5px;
}

.quiz .jumbotron h1 {
  color: #fff;
  font-size: 35px;
  width: 100%;
  max-width: 620px;
  margin: 0 auto 32px;
  box-sizing: border-box;
  overflow-wrap: break-word;
}

.quiz #step-1 h1 { max-width: 700px; }

/* .landing-page prefix (on top of .quiz) is deliberate: the generic sitewide
   .landing-page .btn-primary rule below is an equal-specificity, later-declared
   rule that would otherwise silently win and fill every option chip solid violet
   all the time, with no distinction between "available choice" and "selected". */
/* :not(.btn-block) is deliberate: it separates the wizard's multiple-choice
   answer chips (never full-width) from real primary CTAs like the search
   page's "Suchen" submit button (always .btn-block), which should keep the
   normal solid gradient .btn-primary treatment instead of the chip look. */
.landing-page .quiz .btn-large-dim,
.landing-page .quiz .btn-primary:not(.btn-block) {
  background-color: rgba(255, 255, 255, 0.09);
  background-image: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  text-transform: none;
  min-width: 0;
  height: auto;
  padding: 12px 22px;
  box-shadow: none;
  transition: color 0.15s ease, background-image 0.15s ease, background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.landing-page .quiz .btn-large-dim:hover,
.landing-page .quiz .btn-large-dim:focus,
.landing-page .quiz .btn-primary:not(.btn-block):hover,
.landing-page .quiz .btn-primary:not(.btn-block):focus {
  background-color: transparent;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 60%), var(--primary-gradient);
  color: #fff;
  transform: translateY(-2px);
}

.landing-page .quiz .instrumentcategory .caret {
  display: none;
}

.landing-page .quiz .ladda-button-obj.btn-primary {
  background-color: transparent;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 60%), var(--primary-gradient);
  color: #fff;
  box-shadow: 0 10px 22px var(--glow);
}

.quiz #quiz-navi {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 1;
}

.quiz #quiz-navi .table { background: transparent; }

.quiz #quiz-navi td {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--muted);
  text-align: center;
  padding: 14px 4px !important;
}

.quiz #quiz-navi td.activestep {
  color: var(--primary);
  font-weight: 700;
}

.quiz #quiz-navi td.activestep {
  border-bottom: 2px solid var(--primary);
}

/* step 7 / registration card sitting inside the hero */
.quiz .loginscreen {
    background-color: #071726;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 40px 36px;
  max-width: 420px;
  margin: 0 auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.quiz .loginscreen h3 {
  color: #fff;
  font-size: 1.6rem;
}

.quiz .loginscreen p { color: rgba(255, 255, 255, 0.7); }

/* Registration/login forms inside a .loginscreen card (quiz step 7,
   userRegister, login, password-reset) render through Symfony's
   form-horizontal theme (Form/fields.html.twig): it floats a col-sm-2
   label but never wraps the widget in a matching col-sm-10, so the
   full-width .form-control underlaps the floated label instead of
   stacking below it. .form-horizontal also gives .form-group a
   -15px/-15px margin to offset column gutters that no longer exist here,
   which shoves the field past the card's own padding. Both together make
   the inputs look shoved off to one side instead of centered in the card. */
.loginscreen form.form-horizontal .form-group {
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 18px;
}

.loginscreen form.form-horizontal .control-label {
  float: none;
  display: block;
  width: 100%;
  text-align: left;
  padding-top: 0;
}

/* The 3 credential inputs + submit button in this card were still plain
   Bootstrap defaults (4px radius, ~34px tall, 6px/12px padding) while every
   other form on the site (.quiz .jumbotron > form) already got the
   polished dark treatment -- 46px tall, var(--radius-sm), 10px/14px
   padding -- making this card look unfinished next to the rest of the
   site. Brought it up to the same treatment for consistency. */
.loginscreen form.form-horizontal .form-control {
  height: 46px;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}

/* The terms checkbox and its "AGB" label rendered as two stacked
   full-width blocks (a side effect of unfloating .control-label above) --
   readable, but reading like two disconnected rows rather than one
   checkbox line. Turn just that form-group into a single checkbox row:
   box first, label text after, vertically centered. */
.loginscreen form.form-horizontal .form-group:has(.i-checks) {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.loginscreen form.form-horizontal .form-group:has(.i-checks) .control-label {
  width: auto;
  margin: 0;
  order: 2;
  font-weight: 500;
}

.loginscreen form.form-horizontal .i-checks {
  order: 1;
}

.loginscreen form.form-horizontal button[type="submit"] {
  margin-top: 10px;
}

.loginscreen {
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 40px 36px;
    max-width: 420px;
    margin: 0 auto;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

/* ---------------------------------------------------------- features --- */

.landing-page .features {
  text-align: center;
  padding-top: 30px;
}

.landing-page .features h1 { margin-bottom: 15px; }
.landing-page .features > .row > p,
.landing-page .features .col-lg-12 > p {
  max-width: 560px;
  margin: 0 auto 10px;
  font-size: 1.9rem;
}

.landing-page .features-icon {
  color: #fff;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 55%), var(--primary-gradient);
  flex: 0 0 auto;
}

.landing-page .features h2 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  min-height: 0;
  margin-top: 0;
  margin-bottom: 0;
}

/* grid, 3 real columns, so every column is forced to the same width --
   flex-wrap left short/long captions visibly out of sync. Each column is
   one .col-md-3 wrapper (not flattened via display:contents): flattening
   its 2 feature blocks into 6 direct grid items reliably mis-wrapped them
   into uneven rows (2/3/1 instead of 3/3) in real browsers, so each column
   keeps its own pair stacked internally via flexbox instead. */
.landing-page .features > .row + .row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  gap: 18px;
  margin-top: 20px;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}

/* Bootstrap's .row clearfix (content:" "; display:table) still generates
   these pseudo-elements once the row becomes a grid container, and a
   generated box with content is a real grid item -- so without this, the
   3 columns actually laid out are [::before, box1, box2] / [box3, ::after],
   dropping box1's column onto its own row below columns 2 and 3. */
.landing-page .features > .row + .row:before,
.landing-page .features > .row + .row:after {
  content: none;
  display: none;
}

.landing-page .features > .row + .row > .col-md-2 {
  display: none;
}

/* width:100% overrides Bootstrap's own ".col-md-3 { width: 25% }" -- as a
   grid item that percentage resolves against this item's own track (not the
   whole row), so without the override each column renders at 25% of ~1/3 of
   the grid width instead of filling its track. */
.landing-page .features > .row + .row > div[class*="col-md-3"] {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.landing-page .features > .row + .row > div[class*="col-md-3"] > div {
  flex: 1;
  min-width: 0;
  text-align: left;
  padding: 26px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 0 !important;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

@media (max-width: 900px) {
  .landing-page .features > .row + .row {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 901px) and (max-width: 1140px) {
  .landing-page .features > .row + .row {
    grid-template-columns: repeat(2, 1fr);
  }
}

.landing-page .features > .row + .row > div[class*="col-md-3"] > div:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* --------------------------------------------------- team / carousel --- */

.landing-page .team { padding-bottom: 70px; }

/* Teacher photos are the actual reason people visit the site, so they get a
   real showcase treatment: a large rectangular photo instead of a small
   circular avatar, with a glossy top-sheen and a soft violet glow. The photo
   itself is set via an inline background-image style in the templates, which
   would clobber any background-image set here -- so the sheen is added as a
   ::before overlay instead, and requires no markup changes. */
/* blur radius kept tight (not the wider --shadow-md/--glow used elsewhere) --
   slides sit only ~20px apart in the carousel, and a wider blur bleeds from
   both neighboring cards into that gap, visibly darkening it against the
   muted section behind the slider. */
.landing-page .team-member {
  text-align: center;
  overflow: visible;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35), 0 8px 18px -8px var(--glow);
  border-radius: var(--radius-lg);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.landing-page a:hover .team-member,
.landing-page .team-member:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.4), 0 10px 22px -6px var(--glow);
}

.landing-page .img-circle-div {
  width: 100%;
  height: 280px;
  max-width: none;
  margin: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: none;
  position: relative;
  overflow: hidden;
}

.landing-page .img-circle-div::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.08) 100%);
  pointer-events: none;
}

/* the name/instrument/city caption sits in its own glossy panel flush
   against the bottom edge of the photo (not layered on top of it). */
.landing-page .team-member-overlay {
  margin: 0 0 4px;
  padding: 10px 14px 12px;
  background: rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.landing-page .team-member-overlay h4 {
  font-family: var(--font-display);
  font-size: 2.0rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 4px;
}

.landing-page .team-member-overlay p {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--primary);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
  margin: 0;
  line-height: 1.4;
}

.landing-page .slick_teacher .slick-slide { padding: 0 10px; }

/* slick promotes .slick-track/.slick-list to their own GPU compositing layer
   (transform: translate3d in the plugin's own CSS), which without an explicit
   background can paint a few RGB units darker than the surrounding
   .gray-section -- forcing transparent keeps the slider visually flush with
   the section behind it. */
.landing-page .slick_teacher,
.landing-page .slick_teacher .slick-list,
.landing-page .slick_teacher .slick-track {
  background: transparent;
}

.landing-page .slick-prev,
.landing-page .slick-next {
  width: 44px;
  height: 44px;
  margin-top: -22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.15s ease, border-color 0.15s ease;
  z-index: 2;
}

.landing-page .slick-prev:hover,
.landing-page .slick-next:hover,
.landing-page .slick-prev:focus,
.landing-page .slick-next:focus {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.3);
}

.landing-page .slick-prev { left: -54px; }
.landing-page .slick-next { right: -54px; }

.landing-page .slick-prev:before,
.landing-page .slick-next:before,
.landing-page .slick-prev i,
.landing-page .slick-next i {
  font-size: 18px;
  opacity: 1;
  color: #FFFFFF !important;
}

/* --------------------------------------------------- testimonials ----- */

.landing-page section.comments { padding-bottom: 76px; background: var(--bg-soft); }

.landing-page .bubble {
  position: relative;
  height: auto;
  min-height: 160px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-top: 3px solid var(--primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 26px 24px;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 1.5rem;
  line-height: 1.6;
  color: #fff;
}

.landing-page .bubble:before,
.landing-page .bubble:after { display: none; }

.landing-page .comments-avatar {
  margin-left: 4px;
}

.landing-page .comments-avatar .commens-name {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  text-transform: none;
}

/* --------------------------------------------------- search / list ---- */

.landing-page .search-links {
  background: var(--bg-soft);
  border-color: var(--bg-soft);
}

.landing-page .search-links a {
  color: var(--ink);
}

.landing-page .hovereffect {
  border-radius: var(--radius-md);
}

.landing-page .hovereffect .overlay {
  background-color: rgba(60, 30, 110, 0.72);
}

.landing-page .hovereffect h2 {
  background: transparent;
  font-family: var(--font-display);
  font-style: normal;
  text-transform: none;
  font-size: 18px;
}

.landing-page .hovereffect span.info {
  border-color: #fff;
  color: #fff;
}

.landing-page .product-box {
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.landing-page .product-box:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.landing-page .product-desc { padding: 16px; }

.landing-page .product-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--ink);
}

.landing-page .product-name {
  font-family: var(--font-body);
  font-weight: 700;
}

.landing-page .btn-w-m.btn-default {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  color: var(--ink);
  background: transparent;
  font-weight: 600;
}

.landing-page .btn-w-m.btn-default:hover {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 55%), var(--primary-gradient);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 18px var(--glow);
}

/* plain Bootstrap .btn-default (e.g. the "Alle Musiklehrer aus X" links on
   the teacher profile page) is a different, lower-specificity selector than
   .btn-w-m.btn-default above and was still falling through to Bootstrap's
   hardcoded white background from style.css. */
.landing-page .btn-default {
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
}

.landing-page .btn-default:hover,
.landing-page .btn-default:focus {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* ----------------------------------------------------- profile page --- */

.landing-page .product-detail.ibox {
  border: none;
  box-shadow: none;
}

.landing-page .product-detail .ibox-content {
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  border-radius: var(--radius-md);
  padding: 30px;
  box-shadow: var(--shadow-sm);
}

.landing-page .product-main-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.8rem;
  color: var(--primary);
}

.landing-page .product-detail dl.teacher-quickfacts {
  display: flex;
  flex-wrap: wrap;
  margin: 10px 0 0;
  padding: 0;
}

.landing-page .product-detail dl.teacher-quickfacts dt,
.landing-page .product-detail dl.teacher-quickfacts dd {
  box-sizing: border-box;
  background: var(--bg-soft);
  padding: 12px 8px;
  margin: 0 0 6px;
}

.landing-page .product-detail dl.teacher-quickfacts dt {
  flex: 0 0 45%;
  border-radius: 4px 0 0 4px;
  color: var(--primary);
  font-weight: 600;
}

.landing-page .product-detail dl.teacher-quickfacts dd {
  flex: 0 0 55%;
  border-radius: 0 4px 4px 0;
}

.landing-page .product-detail dl.teacher-quickfacts dt i {
  color: var(--primary);
  width: 18px;
  display: inline-block;
  text-align: center;
  margin-right: 4px;
}

.landing-page .ibox-footer {
  background: transparent;
  border: none;
  color: var(--muted);
  padding: 14px 0 0;
}

/* -------------------------------------------------------- login/reg --- */

.landing-page .middle-box.loginscreen {
  width: 420px;
  margin: 20px auto 0;
}

.landing-page .middle-box .logo-name {
  font-family: var(--font-display);
}

.landing-page #registerDataCont,
.landing-page #musicprofileDataCont {
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  border-radius: var(--radius-md);
  padding: 40px 36px;
  box-shadow: var(--shadow-md);
}

/* .row3 (a typo for .row -- no clearfix, so its floated .col-lg-12 child
   never got cleared) used to wrap this card's heading, stacking Bootstrap's
   15px column padding on top of the card's own 40px/36px padding and
   indenting the heading further than the form fields below it. Markup is
   now flat, but the page-wide h1 (3.5rem, meant for hero copy) is still far
   too large for this 420px-wide card, so it's scoped back down here. */
.landing-page .loginscreen h1 {
  font-size: 1.7rem;
  margin-top: 0;
  margin-bottom: 6px;
  color: #fff;
}

.landing-page .loginscreen h1 + small {
  display: block;
  color: rgba(255, 255, 255, 0.65);
  font-size: 1rem;
  margin-bottom: 24px;
}

.landing-page .btn-white {
  background: transparent;
  border: 2px solid var(--border);
  color: var(--ink);
}

.landing-page .btn-white:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* -------------------------------------------------------- buttons ----- */

.landing-page .btn {
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 600;
}

.landing-page .btn-primary {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 55%), var(--primary-gradient);
  background-color: transparent;
  border: none;
  border-radius: 999px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.landing-page .btn-primary:hover,
.landing-page .btn-primary:focus,
.landing-page .btn-primary:active {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 55%), var(--primary-gradient-hover);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 2px 19px var(--glow), inset 0 1px 0 rgba(255, 255, 255, 0);
}

/* -------------------------------------------------------- footer ------ */

.landing-page .contact {
  background: var(--bg);
  padding-top: 64px;
  padding-bottom: 0;
}

.landing-page .contact .footer-top {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  padding-bottom: 48px;
}

/* Same glossy hairline used between page sections, reused here for the
   footer's own internal seam instead of a flat border-bottom. ::after is
   position:absolute, so it's pulled out of footer-top's flex flow rather
   than becoming an (invisible but layout-affecting) extra flex item. */
.landing-page .contact .footer-top::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1080px, 90%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4) 50%, transparent);
  box-shadow: 0 1px 16px rgba(255, 255, 255, 0.18);
  pointer-events: none;
}

.landing-page .contact .footer-brand {
  flex: 1 1 280px;
  max-width: 380px;
}

.landing-page .contact .footer-logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  margin-bottom: 12px;
}

.landing-page .contact .footer-logo .navy { color: #fff !important; }

.landing-page .contact .footer-brand p {
  color: rgba(255, 255, 255, 0.65);
  font-size: 1.1rem;
  margin-bottom: 20px;
}

.landing-page .contact .footer-col {
  flex: 0 1 170px;
}

.landing-page .contact .footer-col h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 16px;
}

.landing-page .contact .footer-col a {
  display: block;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.05rem;
  margin-bottom: 13px;
}

.landing-page .contact .footer-col a:hover { color: #fff; }

.landing-page .contact .social-icon {
  margin: 0;
  padding: 0;
}

.landing-page .contact .social-icon a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.landing-page .contact .social-icon a:hover {
  background-image: var(--primary-gradient);
}

.landing-page .contact .footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  padding: 24px 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
}

.landing-page .contact .footer-bottom p { margin: 0; color: inherit; font-size: inherit; }

/* ----------------------------------------------------- search form ---- */

/* the ">" direct-child combinator is deliberate: it targets only the teacher-
   search form (a direct child of the gradient jumbotron) and not the
   registration form buried inside the .loginscreen card on quiz step 7,
   whose labels already inherit the right color from .loginscreen itself. */
.quiz .jumbotron > form label {
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
}

.quiz .jumbotron > form .form-control {
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.09);
  box-shadow: none;
  padding: 10px 14px;
  font-family: var(--font-body);
  color: #fff;
}

.quiz .jumbotron > form .form-control:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
}

.quiz .jumbotron > form .checkbox label,
.quiz .jumbotron > form .i-checks {
  color: #fff;
  font-weight: 500;
}

/* puts the "Besitzt du das Instrument?" label and its checkbox on one line,
   checkbox on the right, instead of the default label-block-then-checkbox
   stacked layout. */
.quiz .jumbotron > form div:has(> input[type="checkbox"]) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.quiz .jumbotron > form div:has(> input[type="checkbox"]) label {
  display: inline;
  margin: 0;
}

.quiz .jumbotron > form div:has(> input[type="checkbox"]) br {
  display: none;
}

.quiz .jumbotron > form input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  margin: 0;
  border-radius: 7px;
  border: 2px solid rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.15);
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.quiz .jumbotron > form input[type="checkbox"]:hover {
  border-color: #fff;
}

.quiz .jumbotron > form input[type="checkbox"]:checked {
  background-image: var(--primary-gradient);
  background-color: transparent;
  border-color: transparent;
  box-shadow: 0 4px 10px rgba(13, 23, 56, 0.25);
}

.quiz .jumbotron > form input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.quiz .jumbotron > form input[type="checkbox"]:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.quiz .jumbotron > form .selectize-control.single .selectize-input {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.08);
  min-height: 46px;
  padding: 10px 14px;
  box-shadow: none;
  color: #fff;
}

.quiz .jumbotron > form .selectize-control.single .selectize-input input {
  color: #fff;
}

.quiz .jumbotron > form .selectize-dropdown {
  background: #16204a;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--ink);
}

.quiz .jumbotron > form .btn-primary.btn-lg {
  height: 46px;
  padding-top: 0;
  padding-bottom: 0;
}

/* ------------------------------------------------------------ blog ---- */

.landing-page .blog-hero {
  background: var(--bg-soft);
  padding-top: 64px;
  padding-bottom: 48px;
  text-align: center;
}

.landing-page .blog-hero p {
  max-width: 560px;
  margin: 0 auto;
}

.landing-page .blog-index { padding-top: 56px; }

.landing-page .blog-section-title {
  font-size: 1.5rem;
  margin: 0 0 24px;
}

.landing-page .blog-section-title:not(:first-child) {
  margin-top: 56px;
}

.landing-page .blog-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.landing-page .blog-card {
  flex: 1 1 300px;
  max-width: 380px;
  display: block;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 26px;
  color: #fff;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.landing-page .blog-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--primary);
  color: #fff;
}

.landing-page .blog-card-category {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--primary);
  background: var(--primary-tint);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.landing-page .blog-card h2 {
  font-size: 1.2rem;
  margin: 0 0 8px;
}

.landing-page .blog-card p {
  font-size: 0.95rem;
  margin-bottom: 14px;
}

.landing-page .blog-card-link {
  font-weight: 700;
  color: var(--primary);
  font-size: 0.9rem;
}

.landing-page .blog-article-hero {
  background: var(--bg-soft);
  padding-top: 48px;
  padding-bottom: 32px;
}

.landing-page .blog-breadcrumb {
  margin-bottom: 16px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
}

.landing-page .blog-breadcrumb span { margin: 0 6px; }

.landing-page .blog-breadcrumb a { color: var(--muted); }

.landing-page .blog-breadcrumb a:hover { color: var(--primary); }

.landing-page .blog-breadcrumb [aria-current="page"] { color: var(--ink); }

.landing-page .blog-article-hero h1 {
  margin-top: 10px;
  margin-bottom: 6px;
}

.landing-page .blog-meta {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0;
}

.landing-page .blog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 32px;
}

.landing-page .blog-tag {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  padding: 5px 12px;
  border-radius: 999px;
}

.landing-page .blog-article { padding-top: 56px; }

.landing-page .blog-article-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: flex-start;
}

.landing-page .blog-article-content {
  flex: 3 1 480px;
  min-width: 0;
  max-width: 720px;
}

.landing-page .blog-lead {
  font-size: 1.2rem;
  color: var(--ink);
  font-weight: 500;
}

.landing-page .blog-article-content h2 {
  font-size: 1.4rem;
  margin-top: 36px;
}

.landing-page .blog-cta {
  margin-top: 48px;
  padding: 32px;
  background: var(--bg-soft);
  border-radius: var(--radius-md);
}

.landing-page .blog-cta h3 { margin-top: 0; }

.landing-page .blog-cta-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.landing-page .blog-cta-links .btn { margin: 0; }

.landing-page .blog-sidebar {
  flex: 1 1 260px;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 100px;
  align-self: flex-start;
}

.landing-page .blog-sidebar-box {
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  border-radius: var(--radius-md);
  padding: 20px;
}

.landing-page .blog-sidebar-box h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  margin: 0 0 12px;
}

.landing-page .blog-sidebar-box h4 .fa {
  color: var(--primary);
  font-size: 13px;
}

.landing-page .blog-sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.landing-page .blog-sidebar-list li + li {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.landing-page .blog-sidebar-list a {
  display: block;
  padding: 9px 4px;
  margin: 0 -4px;
  border-radius: 6px;
  font-size: 0.92rem;
  font-weight: 500;
  color: #fff;
}

.landing-page .blog-sidebar-list a:hover {
  color: var(--primary);
  background: var(--primary-tint);
}

/* the top box is the primary conversion point (find a teacher) -- a light
   tint and a real button give it clear priority without drowning the rest
   of the sidebar in a heavy full-bleed treatment. */
.landing-page .blog-sidebar-primary {
  background: var(--primary-tint);
  border-color: transparent;
}

.landing-page .blog-sidebar-primary p {
  font-size: 0.88rem;
  margin: 0 0 16px;
}

.landing-page .blog-sidebar-btn {
  display: block;
  text-align: center;
  background-color: var(--primary);
  color: #fff;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 11px 16px;
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease;
}

.landing-page .blog-sidebar-btn:hover {
  background-color: var(--primary-dark);
  color: #fff;
}

@media (max-width: 991px) {
  .landing-page .blog-sidebar {
    position: static;
    max-width: none;
  }
}

/* ---------------------------------------------------------- mobile ---- */

@media (max-width: 767px) {
  .landing-page h1 { font-size: 2.1rem; }
  .quiz .activeStepInfo.jumbotron { padding: 44px 18px !important; }
  .landing-page .navbar-nav a[data-route-name="teacher_quiz"] { margin-top: 4px; display: inline-block; }
}