/* * Theorie-Merkhilfe – Stile. * Am 25.07.2026 aus theorie-merkhilfe.php ausgelagert (rules.md § 3), * dabei um Simulation, Erklaer-Layer und Pruefungssimulation erweitert. * Geladen ueber $css_seiten in tpl/header.php. */ #merkhilfe { --mh-accent: #28a745; --mh-dark: #1f2937; --mh-grey: #6b7280; } #merkhilfe .mh_intro { max-width: 820px; margin: 0 auto 10px auto; text-align: center; color: var(--mh-grey); font-size: 1.05em; line-height: 1.6; } #merkhilfe h1, #merkhilfe h2 { text-align: center; font-size: 1.5em; } #merkhilfe .mh_section_title { display: flex; align-items: center; gap: 12px; max-width: 900px; margin: 0 auto 18px auto; font-size: 1.35em; font-weight: 800; color: var(--mh-dark); } #merkhilfe .mh_section_title .mh_ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; background: rgba(40,167,69,0.12); display: inline-flex; align-items: center; justify-content: center; color: var(--mh-accent); } #merkhilfe .mh_grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 900px; margin: 0 auto; } #merkhilfe .mh_card { background: #fff; border: 1px solid rgba(0,0,0,0.07); border-radius: 16px; padding: 22px; box-shadow: 0 6px 18px rgba(0,0,0,0.04); } #merkhilfe .mh_card h4 { margin: 0 0 12px 0; font-size: 1.05em; color: var(--mh-dark); } #merkhilfe .mh_row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px dotted #eee; } #merkhilfe .mh_row:last-child { border-bottom: none; } #merkhilfe .mh_row .mh_label { color: var(--mh-grey); font-size: 0.95em; } #merkhilfe .mh_row .mh_val { font-weight: 800; color: var(--mh-dark); white-space: nowrap; } #merkhilfe .mh_val.accent { color: var(--mh-accent); } #merkhilfe .mh_note { font-size: 0.82em; color: var(--mh-grey); margin-top: 10px; line-height: 1.5; } #merkhilfe .mh_formula { background: #f4f5f7; color: #1f2937; border: 1px solid #e5e7eb; border-radius: 12px; padding: 13px 16px; font-size: 0.92em; margin: 9px 0; font-family: 'Courier New', monospace; min-width: 0; white-space: normal; overflow-wrap: normal; } #merkhilfe .mh_formula b { color: var(--mh-dark); font-weight: 800; } #merkhilfe .mh_example { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 10px; padding: 14px 16px; font-size: 0.95em; line-height: 1.6; } #merkhilfe .mh_calc_num { width: 92px; padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 1.2em; font-weight: 800; color: var(--mh-dark); box-sizing: border-box; } #merkhilfe .mh_calc_unit { color: var(--mh-grey); font-weight: 600; } #merkhilfe .mh_calc input[type=range] { width: 100%; accent-color: var(--mh-accent); margin: 2px 0 4px; } #merkhilfe .mh_calc_out { margin-top: 14px; } #merkhilfe .mh_pill { display: inline-block; background: rgba(40,167,69,0.12); color: var(--mh-accent); border-radius: 999px; padding: 2px 10px; font-size: 0.8em; font-weight: 700; } #merkhilfe .mh_disclaimer { max-width: 900px; margin: 0 auto; text-align: center; color: var(--mh-grey); font-size: 0.82em; line-height: 1.5; } /* Fahrzeug-Umschalter (Höchstgeschwindigkeiten) */ #merkhilfe .mh_section_title--switch { flex-wrap: wrap; row-gap: 12px; } #merkhilfe .mh_section_title--switch .mh_section_title_text { margin-right: 8px; } #merkhilfe .mh_vehicle_switch { display: flex; gap: 8px; margin-left: auto; } #merkhilfe .mh_veh_btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 12px 8px; border: 2px solid #e5e7eb; border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; -webkit-tap-highlight-color: transparent; } #merkhilfe .mh_veh_btn img { width: 62px; height: auto; display: block; opacity: .55; filter: grayscale(60%); transition: opacity .15s ease, filter .15s ease; pointer-events: none; } #merkhilfe .mh_veh_btn .mh_veh_lbl { font-size: 0.82em; font-weight: 700; color: var(--mh-grey); line-height: 1; } #merkhilfe .mh_veh_btn:hover { border-color: #cbd5e1; } #merkhilfe .mh_veh_btn:focus-visible { outline: 2px solid var(--mh-accent); outline-offset: 2px; } #merkhilfe .mh_veh_btn.is-active { border-color: var(--mh-accent); background: rgba(40,167,69,0.08); } #merkhilfe .mh_veh_btn.is-active img { opacity: 1; filter: none; } #merkhilfe .mh_veh_btn.is-active .mh_veh_lbl { color: var(--mh-accent); } #merkhilfe .mh_veh_group[hidden] { display: none; } /* Abstands-Tabelle (Halten & Parken) */ #merkhilfe .mh_table_wrap { max-width: 900px; margin: 0 auto 14px auto; overflow-x: auto; -webkit-overflow-scrolling: touch; background: #fff; border: 1px solid rgba(0,0,0,0.07); border-radius: 16px; box-shadow: 0 6px 18px rgba(0,0,0,0.04); } #merkhilfe .mh_table { width: 100%; min-width: 660px; border-collapse: collapse; font-size: 0.95em; } #merkhilfe .mh_table thead th { text-align: left; background: rgba(40,167,69,0.10); color: var(--mh-dark); font-weight: 800; font-size: 0.9em; padding: 12px 16px; border-bottom: 2px solid rgba(40,167,69,0.25); white-space: nowrap; } #merkhilfe .mh_table td { padding: 12px 16px; border-bottom: 1px dotted #e5e7eb; vertical-align: top; color: var(--mh-dark); line-height: 1.45; } #merkhilfe .mh_table tbody tr:last-child td { border-bottom: none; } #merkhilfe .mh_table tbody tr:hover { background: #f9fafb; } #merkhilfe .mh_table .mh_dist { font-weight: 800; color: var(--mh-accent); white-space: nowrap; font-size: 1.05em; } #merkhilfe .mh_table .mh_hp_halt { font-weight: 700; color: #d0342c; } #merkhilfe .mh_table .mh_hp_park { font-weight: 700; color: var(--mh-dark); } #merkhilfe .mh_table .mh_law { color: var(--mh-grey); font-size: 0.86em; } #merkhilfe .mh_table_note { max-width: 900px; margin: 0 auto 18px auto; color: var(--mh-grey); font-size: 0.85em; line-height: 1.55; } /* Nerd-Modus */ #merkhilfe .mh_nerd_bar { display: flex; justify-content: center; margin-top: 16px; } #merkhilfe .mh_nerd_switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 999px; padding: 7px 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); } #merkhilfe .mh_nerd_switch input { position: absolute; opacity: 0; width: 1px; height: 1px; } #merkhilfe .mh_nerd_track { position: relative; width: 42px; height: 24px; border-radius: 999px; background: #cbd5e1; transition: background .18s ease; flex: 0 0 auto; } #merkhilfe .mh_nerd_track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform .18s ease; } #merkhilfe .mh_nerd_switch input:checked ~ .mh_nerd_track { background: var(--mh-accent); } #merkhilfe .mh_nerd_switch input:checked ~ .mh_nerd_track::after { transform: translateX(18px); } #merkhilfe .mh_nerd_switch input:focus-visible ~ .mh_nerd_track { outline: 2px solid var(--mh-accent); outline-offset: 2px; } #merkhilfe .mh_nerd_label { font-weight: 800; color: var(--mh-dark); font-size: 0.95em; } #merkhilfe .mh_nerd_hint { color: var(--mh-grey); font-size: 0.82em; font-weight: 600; } #merkhilfe .mh_lawtag { display: none; margin: 2px 0 12px 0; font-size: 0.78em; font-weight: 700; color: var(--mh-accent); background: rgba(40,167,69,0.10); border-radius: 6px; padding: 3px 9px; font-family: 'Courier New', monospace; } #merkhilfe.mh-nerd-on .mh_lawtag { display: inline-block; } #merkhilfe .mh_nerd_col { display: none; } #merkhilfe.mh-nerd-on .mh_nerd_col { display: table-cell; } @media (max-width: 760px) { #merkhilfe .mh_grid { grid-template-columns: 1fr; max-width: 460px; } #merkhilfe .mh_section_title { max-width: 460px; font-size: 1.2em; } #merkhilfe .mh_section_title--switch { justify-content: center; } #merkhilfe .mh_vehicle_switch { margin-left: 0; width: 100%; justify-content: center; } #merkhilfe .mh_veh_btn img { width: 52px; } #merkhilfe .mh_table thead th, #merkhilfe .mh_table td { padding: 10px 12px; } #merkhilfe .mh_formula { font-size: 0.86em; } #merkhilfe .mh_row { gap: 10px; } #merkhilfe .mh_row .mh_label { flex: 1 1 auto; } } /* ========================================================================= NEU 25.07.2026 – Simulation, Erklaer-Layer und Pruefungssimulation zum Abschnitt "Bremsweg & Anhalteweg". Der Layer liegt im Markup AUSSERHALB von #merkhilfe (er muss ueber der ganzen Seite liegen). Deshalb bekommen alle Bausteine, die in beiden Bereichen vorkommen, doppelte Selektoren: "#merkhilfe .x, .mh_lay_box .x". ========================================================================= */ /* Nerd-Modus zusaetzlich ueber die Klasse am , damit auch der Layer davon erfaehrt */ body.mh-nerd-on #merkhilfe .mh_lawtag, body.mh-nerd-on .mh_lay_box .mh_lawtag { display: inline-block; } .mh_lay_box .mh_lawtag { display: none; margin: 2px 0 12px 0; font-size: 0.78em; font-weight: 700; color: #28a745; background: rgba(40,167,69,0.10); border-radius: 6px; padding: 3px 9px; font-family: 'Courier New', monospace; } /* Gesetzeszitat: ganzer Kasten nur im Nerd-Modus */ #merkhilfe .mh_lawbox, .mh_lay_box .mh_lawbox { display: none; background: #f0f7f2; border: 1px solid rgba(40,167,69,0.35); border-radius: 10px; padding: 12px 14px; margin: 0 0 12px 0; font-size: 0.88em; line-height: 1.7; color: #14532d; } body.mh-nerd-on #merkhilfe .mh_lawbox, body.mh-nerd-on .mh_lay_box .mh_lawbox { display: block; } .mh_lawbox .mh_lawbox_t { display: block; font-weight: 800; font-size: 0.85em; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; } /* Formel der Gefahrbremsung hervorheben */ #merkhilfe .mh_formula.is-gefahr { background: #fff7ed; border-color: #fed7aa; } /* Schnellwahl der Pruefungstempi */ #merkhilfe .mh_quick { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; } #merkhilfe .mh_quick button { border: 1px solid #d1d5db; background: #fff; color: var(--mh-dark); border-radius: 999px; padding: 6px 12px; font-size: 0.85em; font-weight: 700; cursor: pointer; font-family: inherit; } #merkhilfe .mh_quick button:hover { border-color: var(--mh-accent); color: var(--mh-accent); } #merkhilfe .mh_quick button.is-active { background: rgba(40,167,69,0.10); border-color: var(--mh-accent); color: var(--mh-accent); } /* Knoepfe */ #merkhilfe .mh_btn, .mh_lay_box .mh_btn { border: 0; border-radius: 999px; padding: 11px 20px; font-size: 0.95em; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; font-family: inherit; } #merkhilfe .mh_btn_go, .mh_lay_box .mh_btn_go { background: #28a745; color: #fff; } #merkhilfe .mh_btn_go:hover, .mh_lay_box .mh_btn_go:hover { background: #22913d; } #merkhilfe .mh_btn_ghost, .mh_lay_box .mh_btn_ghost { background: #fff; color: #1f2937; border: 1px solid #d1d5db; } #merkhilfe .mh_btn_ghost:hover, .mh_lay_box .mh_btn_ghost:hover { border-color: #9ca3af; } #merkhilfe .mh_btn:disabled, .mh_lay_box .mh_btn:disabled { opacity: .45; cursor: default; } #merkhilfe .mh_btn[hidden], .mh_lay_box .mh_btn[hidden] { display: none; } #merkhilfe .mh_card { display: flex; flex-direction: column; } /* Knopfzeile am Fuss der Formel-Karte: nebeneinander, sobald beide Knoepfe je 190 px bekommen, sonst (Handy) automatisch untereinander in voller Breite. */ #merkhilfe .mh_card_btns { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px; } #merkhilfe .mh_card_btns .mh_btn { flex: 1 1 190px; } #merkhilfe .mh_btn_expl { background: #1f2937; color: #fff; } #merkhilfe .mh_btn_expl:hover { background: #111827; } #merkhilfe .mh_btn_test { font-weight: 800; } #merkhilfe .mh_btn_test:hover { border-color: var(--mh-accent); color: var(--mh-accent); } /* Rechenweg- und Warnkaesten */ #merkhilfe .mh_calcbox, .mh_lay_box .mh_calcbox { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px 14px; margin: 0 0 12px 0; font-size: 0.9em; line-height: 1.75; color: #374151; } #merkhilfe .mh_calcbox .mh_calcbox_t, .mh_lay_box .mh_calcbox .mh_calcbox_t { display: block; font-weight: 800; color: #1f2937; font-size: 0.85em; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; } #merkhilfe .mh_calcbox code, .mh_lay_box .mh_calcbox code { font-family: 'Courier New', monospace; background: #fff; border: 1px solid #e5e7eb; border-radius: 5px; padding: 1px 5px; } #merkhilfe .mh_warn, .mh_lay_box .mh_warn { background: #fff7ed; border: 1px solid #fed7aa; border-radius: 10px; padding: 11px 14px; font-size: 0.9em; line-height: 1.65; color: #7c2d12; } .mh_lay_box p code { font-family: 'Courier New', monospace; background: #f4f5f7; border: 1px solid #e5e7eb; border-radius: 5px; padding: 1px 5px; font-size: 0.92em; } /* ---------------- Simulation ---------------- */ #merkhilfe .mh_sim { max-width: 900px; margin: 18px auto 0 auto; background: #fff; border: 1px solid rgba(0,0,0,0.07); border-radius: 16px; padding: 20px 22px 24px; box-shadow: 0 6px 18px rgba(0,0,0,0.04); } #merkhilfe .mh_sim h4 { margin: 0 0 4px 0; font-size: 1.05em; color: var(--mh-dark); } #merkhilfe .mh_sim_sub { color: var(--mh-grey); font-size: 0.86em; margin: 0 0 16px 0; line-height: 1.5; } #merkhilfe .mh_sim_bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; } #merkhilfe .mh_sim_bar .mh_sim_speed { font-weight: 800; color: var(--mh-dark); } #merkhilfe .mh_track { position: relative; margin-top: 14px; height: 132px; background: linear-gradient(180deg,#f8fafc 0%,#f1f5f9 100%); border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; } #merkhilfe .mh_road { position: absolute; left: 0; right: 0; bottom: 34px; height: 34px; background: linear-gradient(180deg,#b9c0ca 0%,#a7aeb9 100%); border-top: 1px solid #cfd5dd; border-bottom: 1px solid #8d95a1; } #merkhilfe .mh_road::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; transform: translateY(-50%); background: repeating-linear-gradient(90deg,#ffffff 0 16px, transparent 16px 34px); } #merkhilfe .mh_car { position: absolute; bottom: 36px; width: 56px; height: auto; transform: scaleX(-1); transform-origin: center; will-change: left; } #merkhilfe .mh_car svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); } #merkhilfe .mh_mark { position: absolute; top: 8px; bottom: 34px; width: 0; border-left: 2px solid #9ca3af; } #merkhilfe .mh_mark.is-danger { border-left: 3px solid #dc2626; } #merkhilfe .mh_mark.is-reakt { border-left: 2px dashed #b45309; } #merkhilfe .mh_mark.is-gefahr { border-left: 2px dashed #ea580c; } #merkhilfe .mh_mark.is-stop { border-left: 3px solid #177f34; } #merkhilfe .mh_mark_lbl { position: absolute; top: -2px; left: 5px; font-size: 0.7em; font-weight: 800; white-space: nowrap; color: #374151; background: rgba(255,255,255,0.92); border-radius: 4px; padding: 1px 5px; } #merkhilfe .mh_mark.is-flip .mh_mark_lbl { left: auto; right: 5px; } #merkhilfe .mh_mark.is-danger .mh_mark_lbl { color: #b91c1c; } #merkhilfe .mh_mark.is-reakt .mh_mark_lbl { color: #92400e; top: 14px; } #merkhilfe .mh_mark.is-gefahr .mh_mark_lbl { color: #c2410c; top: 26px; } #merkhilfe .mh_mark.is-stop .mh_mark_lbl { color: #177f34; } #merkhilfe .mh_seg { position: absolute; bottom: 14px; height: 8px; border-radius: 4px; } #merkhilfe .mh_seg.is-reakt { background: #f59e0b; } #merkhilfe .mh_seg.is-brems { background: var(--mh-accent); } #merkhilfe .mh_scale { position: relative; height: 26px; margin-top: 2px; } #merkhilfe .mh_tick { position: absolute; top: 0; font-size: 0.72em; color: var(--mh-grey); transform: translateX(-50%); white-space: nowrap; } #merkhilfe .mh_tick::before { content: ""; display: block; width: 1px; height: 5px; background: #cbd5e1; margin: 0 auto 2px; } #merkhilfe .mh_tick_unit { right: 0; left: auto; transform: none; top: 7px; font-weight: 700; } #merkhilfe .mh_tick_unit::before { display: none; } #merkhilfe .mh_sim_legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 8px; font-size: 0.82em; color: var(--mh-grey); } #merkhilfe .mh_sim_legend span { display: inline-flex; align-items: center; gap: 7px; } #merkhilfe .mh_sim_legend i { width: 14px; height: 8px; border-radius: 3px; display: inline-block; } #merkhilfe .mh_sim_legend i.is-line { height: 2px; width: 16px; border-radius: 0; } #merkhilfe .mh_sim_live { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px; font-size: 0.9em; } #merkhilfe .mh_sim_live div { color: var(--mh-grey); } #merkhilfe .mh_sim_live b { color: var(--mh-dark); font-size: 1.15em; } #merkhilfe .mh_sim_phase { font-weight: 800; color: var(--mh-dark); } /* ---------------- Layer: Erklaerung Schritt fuer Schritt + Test ---------------- */ .mh_lay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(15,23,42,0.55); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); } .mh_lay[hidden] { display: none; } .mh_lay_box { background: #fff; border-radius: 18px; width: min(720px,100%); max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,0.35); text-align: left; } .mh_lay_head { display: flex; align-items: flex-start; gap: 14px; padding: 18px 22px 14px; border-bottom: 1px solid #eef0f3; } .mh_lay_head_txt { flex: 1 1 auto; min-width: 0; } .mh_lay_step { font-size: 0.75em; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: #28a745; } .mh_lay_title { margin: 4px 0 0 0; font-size: 1.15em; color: #1f2937; line-height: 1.35; } .mh_lay_x { flex: 0 0 auto; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #f3f4f6; color: #374151; font-size: 1.4em; line-height: 1; cursor: pointer; font-family: inherit; } .mh_lay_x:hover { background: #e5e7eb; } .mh_lay_body { padding: 18px 22px 6px; overflow-y: auto; -webkit-overflow-scrolling: touch; } .mh_lay_body p { margin: 0 0 12px 0; font-size: 0.95em; line-height: 1.7; color: #4b5563; } .mh_lay_body b { color: #1f2937; } .mh_lay_foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px 18px; border-top: 1px solid #eef0f3; background: #fff; } .mh_dots { display: flex; gap: 6px; } .mh_dots[hidden] { display: none; } .mh_dot { width: 8px; height: 8px; border-radius: 50%; background: #d1d5db; } .mh_dot.is-on { background: #28a745; } .mh_step[hidden] { display: none; } /* Test */ .mh_q { font-weight: 800; font-size: 1.03em; color: #1f2937; margin: 0 0 14px; line-height: 1.5; } .mh_opts { display: grid; gap: 10px; } .mh_opt { text-align: left; background: #fff; border: 2px solid #e5e7eb; border-radius: 12px; padding: 13px 15px; font-size: 0.97em; color: #1f2937; cursor: pointer; min-height: 44px; font-family: inherit; } .mh_opt:hover { border-color: #cbd5e1; } .mh_opt:disabled { cursor: default; } .mh_opt.is-right { border-color: #28a745; background: rgba(40,167,69,0.08); font-weight: 700; } .mh_opt.is-wrong { border-color: #dc2626; background: rgba(220,38,38,0.06); } .mh_fb { margin-top: 14px; border-radius: 10px; padding: 12px 14px; font-size: 0.92em; line-height: 1.7; } .mh_fb.is-right { background: rgba(40,167,69,0.08); border: 1px solid rgba(40,167,69,0.35); color: #14532d; } .mh_fb.is-wrong { background: #fff7ed; border: 1px solid #fed7aa; color: #7c2d12; } .mh_fb code { font-family: 'Courier New', monospace; background: rgba(255,255,255,0.75); border-radius: 5px; padding: 1px 5px; } .mh_offer { text-align: center; padding: 8px 0 4px; } .mh_offer_ic { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 20px; background: rgba(40,167,69,0.12); color: #28a745; display: flex; align-items: center; justify-content: center; } .mh_offer h5 { margin: 0 0 8px; font-size: 1.2em; color: #1f2937; } .mh_offer p { margin: 0 auto 18px; max-width: 440px; } .mh_offer_btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .mh_res_num { font-size: 2.4em; font-weight: 800; color: #28a745; line-height: 1.1; } .mh_res_bar { height: 10px; border-radius: 999px; background: #e5e7eb; overflow: hidden; max-width: 320px; margin: 14px auto 6px; } .mh_res_bar i { display: block; height: 100%; background: #28a745; } @media (max-width: 760px) { /* Handy: Formelkaesten schlanker, damit die Formel nicht mitten im Klammerausdruck umbricht. Der fette Teil (die eigentliche Formel) kommt auf eine eigene Zeile - so nutzt der Kasten seine Breite aus und bleibt lesbar (rules.md § 9). */ /* Rand zum Bildschirm klein halten - die Karten sollen die Breite ausnutzen */ #merkhilfe .article_wrapper_1_row { padding-left: 10px; padding-right: 10px; } #merkhilfe .mh_table_wrap, #merkhilfe .mh_table_note, #merkhilfe .mh_disclaimer { margin-left: 0; margin-right: 0; } #merkhilfe .mh_card { padding: 15px 11px; } #merkhilfe .mh_formula { font-size: 0.8em; padding: 9px 9px; margin: 7px 0; line-height: 1.45; } #merkhilfe .mh_formula b { display: block; margin-top: 2px; } #merkhilfe .mh_lawtag { font-size: 0.72em; padding: 3px 7px; } #merkhilfe .mh_calc_num { font-size: 1.05em; width: 82px; } #merkhilfe .mh_sim { max-width: 460px; padding: 16px 14px 20px; } #merkhilfe .mh_track { height: 118px; } #merkhilfe .mh_car { width: 38px; } .mh_lay { padding: 0; } .mh_lay_box { width: 100%; max-height: 100vh; height: 100%; border-radius: 0; } .mh_lay_head, .mh_lay_body, .mh_lay_foot { padding-left: 16px; padding-right: 16px; } .mh_lay_foot .mh_btn { padding: 11px 14px; } } @media (max-width: 380px) { /* Sehr schmale Handys: die laengste Formel (Gefahrbremsung, 31 Zeichen) muss in eine Zeile passen, sonst haengt ein "÷ 2" allein darunter. */ #merkhilfe .mh_formula { font-size: 0.75em; padding: 8px 8px; } #merkhilfe .mh_card { padding: 14px 9px; } } @media (prefers-reduced-motion: reduce) { #merkhilfe .mh_car { transition: none; } } /* ========================================================================= NEU 28.07.2026 - "?" an jeder Formelzeile + Fenster mit der Kurzerklaerung. Das Fenster benutzt die vorhandenen Layer-Klassen (mh_lay*), damit es genauso aussieht wie "Erklaer's mir genau". Neu sind nur der runde Knopf und die drei Bausteine im Fensterinhalt. ========================================================================= */ #merkhilfe .mh_formula { display: flex; align-items: center; gap: 10px; } #merkhilfe .mh_formula_txt { flex: 1 1 auto; min-width: 0; } /* Der Knopf bleibt optisch klein, hat aber ueber ::after eine Tippflaeche von rund 46 px - Daumen auf dem Handy treffen sonst zu schlecht. */ #merkhilfe .mh_help_btn { position: relative; flex: 0 0 auto; width: 28px; height: 28px; padding: 0; display: flex; align-items: center; justify-content: center; border: 1.5px solid #d1d5db; border-radius: 50%; background: #fff; color: #4b5563; font-family: inherit; font-size: 0.95rem; font-weight: 800; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color .15s ease, color .15s ease, background-color .15s ease; } #merkhilfe .mh_help_btn::after { content: ''; position: absolute; inset: -9px; } #merkhilfe .mh_help_btn:hover, #merkhilfe .mh_help_btn:focus-visible { border-color: var(--mh-accent); color: var(--mh-accent); background: rgba(40,167,69,0.09); } /* Inhalt des Fensters. Nicht auf #merkhilfe eingeschraenkt - diese drei Bausteine kommen ausschliesslich im Layer vor. */ .mh_help_f { background: #f4f5f7; border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px 14px; margin: 0 0 16px; font-family: 'Courier New', monospace; font-size: 0.92em; color: #1f2937; } .mh_help_f b { font-weight: 800; } .mh_help_ex { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 10px; padding: 14px 16px; margin: 0 0 14px; font-size: 0.95em; line-height: 1.8; color: #4b5563; } .mh_help_ex b { color: #1f2937; } .mh_help_note { border-left: 3px solid var(--mh-accent); padding-left: 13px; } .mh_help_sec[hidden] { display: none; } @media (max-width: 380px) { /* Gemessen: die laengste Formel (Gefahrbremsung, fetter Teil) braucht bei 0,75em rund 224 px. Bei 320 px Fensterbreite bleiben neben dem Knopf nur 202 px - die Formel wuerde also ein drittes Mal umbrechen und das "÷ 2" haenge wieder allein darunter (genau der Umbruch, der am 25.07. behoben wurde). Unterhalb von 380 px rutscht der Knopf deshalb unter die Formel und rechts an den Rand; die Formelzeile behaelt ihre volle Breite. Das gilt bewusst fuer alle Sprachen - franzoesisch und russisch haben die laengsten Bezeichnungen. */ #merkhilfe .mh_formula { flex-wrap: wrap; gap: 0; } #merkhilfe .mh_formula_txt { flex: 1 1 100%; } #merkhilfe .mh_help_btn { width: 24px; height: 24px; font-size: 0.85rem; margin: 5px 0 0 auto; } .mh_help_f { font-size: 0.8em; padding: 10px 11px; } }