/* Startseite: kompakte Darstellung (04.11.2026, Marcel: „ordentlich und intuitiv … die main page auf dem
   Handy ist jetzt schon sehr lang“). Nur auf der Startseite geladen (nho-premium-design.php).
   Alle Inhalte bleiben im HTML und sind per Wischen, Aufklappen oder auf ihrer eigenen Seite erreichbar.
   Reihenfolge der Abschnitte steht im HTML (nho-home-public.php), damit Vorlesen und Tab-Reihenfolge passen. */

/* Vorteile: Wrapper ist für das Raster am Desktop unsichtbar (Kacheln bleiben Rasterelemente). */
.pm-bento-row{display:contents}

/* Kostenlose Helfer: eine Zeile mit Chips, auf dem Handy seitlich wischbar */
.pm-helpers{display:grid;gap:12px;margin-top:clamp(28px,4vw,44px);padding-top:clamp(22px,3vw,30px);border-top:1px solid var(--pm-line)}
.pm-helper-links{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.pm-helper-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--pm-line);border-radius:999px;background:var(--pm-surface);color:var(--pm-ink);font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap;transition:border-color .2s var(--pm-ease),transform .2s var(--pm-ease)}
.pm-helper-links a:hover{border-color:var(--pm-orange);transform:translateY(-1px)}
.pm-helper-links a::after{content:"→";margin-left:8px;color:var(--pm-orange-ink)}

.pm-home-faq .pm-faq{margin-top:0}

/* Wischleisten (nur Handy): gemeinsame Grundlage */
@media(max-width:699px){
 .pm-home .pm-stats .pm-wrap,
 .pm-home .pm-bento-row,
 .pm-home .pm-subjects,
 .pm-home .pm-quotes,
 .pm-home .pm-books,
 .pm-home .pm-helper-links{
  display:flex;flex-wrap:nowrap;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:18px;-webkit-overflow-scrolling:touch;
  margin-inline:-18px;padding-inline:18px;scrollbar-width:none
 }
 .pm-home .pm-stats .pm-wrap::-webkit-scrollbar,.pm-home .pm-bento-row::-webkit-scrollbar,.pm-home .pm-subjects::-webkit-scrollbar,
 .pm-home .pm-quotes::-webkit-scrollbar,.pm-home .pm-books::-webkit-scrollbar,.pm-home .pm-helper-links::-webkit-scrollbar{display:none}
 .pm-home .pm-stats .pm-wrap>*,.pm-home .pm-bento-row>*,.pm-home .pm-quotes>*,.pm-home .pm-books>*,.pm-home .pm-helper-links>*{scroll-snap-align:start;flex:none}

 /* Abschnitte enger */
 .pm-home .pm-sec{padding-block:40px}
 .pm-home .pm-sec+.pm-sec{padding-top:0}
 /* Farbwechsel (dunkel/abgesetzt) braucht oben wieder Luft, sonst klebt der Inhalt an der Kante */
 .pm-home .pm-sec+.pm-sec.pm-on-night,.pm-home .pm-sec.pm-on-night+.pm-sec,.pm-home .pm-sec.pm-alt+.pm-sec{padding-top:40px}
 .pm-home .pm-head{gap:8px;margin-bottom:18px}
 .pm-home .pm-head .pm-kicker{font-size:12px;letter-spacing:.1em}
 .pm-home .pm-head h2{font-size:clamp(1.6rem,7vw,1.95rem)}
 .pm-home .pm-head p{font-size:16.5px}

 /* Held: Überschrift, Nutzen, Probestunde, Bewertung. Das Beispiel-Fenster ist reine Illustration
    und entfällt auf dem Handy; Hinweiszeile und Gesichter-Zeile doppeln Bewertung und Zahlenleiste. */
 .pm-hero{padding-block:22px 30px}
 .pm-hero-grid{gap:0}
 .pm-hero .pm-pill,.pm-hero .pm-trust,.pm-hero .pm-lesson{display:none}
 /* Marcel 05.11.: Beispiel-Fenster mobil per Knopf aufklappbar (B). */
 .pm-hero .pm-lesson-toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:14px;padding:10px 18px;border:1px solid var(--pm-line);border-radius:999px;background:var(--pm-surface,transparent);color:inherit;font:600 15px var(--pm-sans);cursor:pointer}
 .pm-hero .pm-lesson-toggle span{color:var(--pm-orange-ink,#b04b08);font-size:18px;line-height:1}
 .pm-hero .pm-lesson.pm-open{display:block;margin-top:14px}
 .pm-hero .pm-rating{margin-bottom:6px}
 .pm-hero .pm-rating b{font-size:2.2rem}
 .pm-hero h1{margin-top:10px;font-size:clamp(2.5rem,11.5vw,3rem)}
 .pm-hero .pm-lead{margin-top:14px;font-size:16.5px;line-height:1.5}
 .pm-hero .pm-cta{margin-top:20px;gap:10px}

 /* Zahlenleiste: eine wischbare Zeile statt fünf Kästen */
 .pm-stats .pm-wrap{gap:0}
 .pm-stats .pm-stat{min-width:132px;padding:14px 16px;border-right:1px solid var(--pm-line);border-bottom:0}
 .pm-stats .pm-stat:last-child{border-right:0}
 .pm-stats .pm-stat b{font-size:1.6rem}
 .pm-stats .pm-stat span{font-size:12.5px;white-space:nowrap}

 /* So startet ihr + Preis */
 .pm-home #angebot .pm-split{gap:18px}
 .pm-home #angebot .pm-note{margin-top:10px}
 .pm-home #angebot .pm-price-links{margin-top:4px;gap:0 18px}
 .pm-home #angebot .pm-price-links a{font-size:14px}
 .pm-home .pm-finder-body{margin-top:12px;padding:0;border:0;background:none}
 .pm-home .pm-compact .pm-steps li{padding:10px 0}

 /* Vorteile: Wischleiste, darunter Fächer kompakt, dann Lehrkräfte */
 .pm-home #vorteile .pm-head>p:not(.pm-kicker){display:none}
 .pm-home .pm-bento{gap:14px}
 .pm-home .pm-bento-row{order:1;gap:12px}
 .pm-home .pm-t-wide{order:2}
 .pm-home .pm-t-big{order:3}
 .pm-home .pm-bento-row>.pm-tile{width:min(78%,300px);padding:20px}
 .pm-home .pm-tile{padding:20px;gap:8px}
 .pm-home .pm-tile:hover{transform:none}
 .pm-home .pm-tile h3{font-size:1.25rem}
 .pm-home .pm-tile p{font-size:15px}
 .pm-home .pm-big-n{font-size:56px}
 .pm-home .pm-money{font-size:34px}
 .pm-home .pm-t-big h3{font-size:1.55rem}
 .pm-home .pm-faces li:nth-child(n+7){display:none}
 .pm-home .pm-faces{margin-top:4px}
 .pm-home .pm-subjects{gap:8px;margin-block:4px 2px}
 .pm-home .pm-subjects li{flex:none;font-size:1.3rem;padding:4px 14px;border:1px solid var(--pm-line);border-radius:999px;background:var(--pm-paper);scroll-snap-align:start}
 /* Erklärsatz doppelt den Link „Fächer & Klassenstufen ansehen“ direkt darunter. */
 .pm-home .pm-t-wide>p:not(.pm-kicker){display:none}

 /* Bewertungen: wischbar, Marcel-Karte kompakt */
 .pm-home .pm-quotes{gap:12px;align-items:start}
 .pm-home .pm-quote{width:min(86%,340px);padding:20px;gap:12px}
 .pm-home .pm-quote .pm-q{font-size:1.15rem}
 .pm-home .pm-review-actions{margin-top:12px;gap:0 22px}
 .pm-home .pm-refer-line{margin-top:4px;font-size:15px}
 .pm-home .pm-founder{grid-template-columns:64px minmax(0,1fr);gap:14px;margin-top:16px;padding:18px}
 .pm-home .pm-portrait{width:64px;height:64px;border-radius:16px}
 .pm-home .pm-founder q{font-size:1.1rem}
 .pm-home .pm-founder p,.pm-home .pm-founder .pm-sig-name{font-size:13.5px}
 .pm-home .pm-founder .pm-btn{display:none}

 /* Häufige Fragen */
 .pm-home .pm-faq summary{padding:15px 40px 15px 0;font-size:16px}
 .pm-home .pm-faq summary::after{top:8px}
 .pm-home .pm-faq-more{margin-top:8px}

 /* Bücher und Helfer am Ende: kompakte Leisten */
 .pm-home #buecher .pm-head>p:not(.pm-kicker){display:none}
 .pm-home .pm-books{gap:12px}
 .pm-home .pm-book{width:min(82%,320px);grid-template-columns:64px minmax(0,1fr);gap:12px;padding:16px}
 .pm-home .pm-book h3{font-size:15.5px}
 .pm-home .pm-book-meta{font-size:13px}
 .pm-home .pm-book-actions{margin-top:4px;gap:0}
 .pm-home #buecher .pm-price-links{margin-top:8px}
 .pm-home .pm-helpers{margin-top:16px;padding-top:16px;gap:8px}
 .pm-home .pm-helper-links{gap:8px}
 .pm-home .pm-helper-links a{padding:0 14px;font-size:14.5px}

 /* Abschluss */
 .pm-home .pm-ask-grid{gap:22px}
 .pm-home .pm-ask h2{font-size:clamp(2rem,9vw,2.4rem)}
 .pm-home .pm-ask-sub{font-size:16.5px;margin-top:12px}
 .pm-home .pm-glass{padding:20px;gap:10px}
 .pm-home .pm-glass>.pm-btn-ghost{display:none}
}
/* Knopf nur auf dem Handy */
@media(min-width:700px){.pm-home .pm-hero .pm-lesson-toggle{display:none!important}}