/* Theme Name: MVR Child Template: industro Version: 1.0.0 Description: Schlankes Child-Theme für MVR. Author: MVR Text Domain: mvr-child */ /* ------------------------------------------------- 0) Fallbacks (werden von den Customizer-Variablen im übersteuert) ------------------------------------------------- */ :root{ /* Badges – Fallbacks */ --badge-active-bg:#2734e3; --badge-active-font:#ffffff; --badge-active-border:transparent; --badge-active-bg-hover:#3a46ec; --badge-active-font-hover:#ffffff; --badge-active-border-hover:transparent; --badge-standard-bg:#e6e8ee; --badge-standard-font:#0b1220; --badge-standard-border:#e6e8ee; --badge-standard-bg-hover:#d7dbe3; --badge-standard-font-hover:#0b1220; --badge-standard-border-hover:#d7dbe3; --badge-bright-bg:#f7f8fb; --badge-bright-font:#0b1220; --badge-bright-border:#f7f8fb; --badge-bright-bg-hover:#eef1f6; --badge-bright-font-hover:#0b1220; --badge-bright-border-hover:#eef1f6; /* Pills – an Badges gekoppelt (kannst du im Customizer abkoppeln) */ --pill-active-bg:var(--badge-active-bg); --pill-active-font:var(--badge-active-font); --pill-active-border:var(--badge-active-border); --pill-active-bg-hover:var(--badge-active-bg-hover); --pill-active-font-hover:var(--badge-active-font-hover); --pill-active-border-hover:var(--badge-active-border-hover); --pill-standard-bg:var(--badge-standard-bg); --pill-standard-font:var(--badge-standard-font); --pill-standard-border:var(--badge-standard-border); --pill-standard-bg-hover:var(--badge-standard-bg-hover); --pill-standard-font-hover:var(--badge-standard-font-hover); --pill-standard-border-hover:var(--badge-standard-border-hover); --pill-bright-bg:var(--badge-bright-bg); --pill-bright-font:var(--badge-bright-font); --pill-bright-border:var(--badge-bright-border); --pill-bright-bg-hover:var(--badge-bright-bg-hover); --pill-bright-font-hover:var(--badge-bright-font-hover); --pill-bright-border-hover:var(--badge-bright-border-hover); /* Typo/Border Fallbacks */ --mvr-primary:#2734e3; --mvr-text-strong:#0b1220; --mvr-text-body:#3b3f46; --mvr-border-muted:#e6e8ee; } /* ------------------------------------------------- 1) Prozess-Steps (Nummer + Inhalt) ------------------------------------------------- */ .mvr-steps{ counter-reset: step; list-style: none; margin: 0; padding: 0; } .mvr-steps > li{ display: grid; grid-template-columns: 2.75rem 1fr; align-items: start; column-gap: 1rem; row-gap: .25rem; padding: .35rem 0; margin: 1rem 0; position: relative; } .mvr-steps > li::before{ counter-increment: step; content: counter(step, decimal-leading-zero); display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 9999px; background: var(--mvr-primary); color: #fff; font-weight: 700; font-size: .95rem; line-height: 1; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 3px color-mix(in oklab, var(--mvr-primary) 20%, #ffffff); } .mvr-steps .step-title{ margin: 0 0 .25rem 0; font-size: 1.05rem; line-height: 1.25; font-weight: 700; color: var(--mvr-text-strong); } .mvr-steps .step-content p{ margin: 0 0 .5rem 0; color: var(--mvr-text-body); } .mvr-steps--compact > li{ margin: .5rem 0; grid-template-columns: 2.5rem 1fr; } .mvr-steps--compact > li::before{ width: 2rem; height: 2rem; font-size: .9rem; } /* optional: Timeline-Linie */ .mvr-steps--timeline > li::after{ content: ""; position: absolute; left: 1.125rem; top: calc(2.25rem + .15rem); bottom: -1rem; width: 2px; background: var(--mvr-border-muted); } .mvr-steps--timeline > li:last-child::after{ display:none; } /* Links im Content */ .mvr-steps .step-content a{ color: var(--mvr-primary); text-decoration: none; border-bottom: 1px solid color-mix(in oklab, var(--mvr-primary) 40%, transparent); } .mvr-steps .step-content a:hover{ border-bottom-color: var(--mvr-primary); } /* ------------------------------------------------- 2) Badges & Pills (Reset, Varianten, Hover) ------------------------------------------------- */ .mvr-badge, .mvr-pill{ width:auto !important; height:auto !important; padding:.35rem .55rem !important; border:1px solid transparent; font-size:.85rem !important; line-height:1 !important; white-space:nowrap; display:inline-flex; align-items:center; gap:.35rem; text-indent:0 !important; overflow:visible !important; } .mvr-pill{ border-radius:9999px; } .mvr-badge{ border-radius:.375rem; } /* keine Pseudo-Icons erzwingen */ .mvr-badge::before, .mvr-pill::before{ content:none !important; } /* Badge – Varianten + Hover */ .mvr-badge--active{ background:var(--badge-active-bg); color:var(--badge-active-font); border-color:var(--badge-active-border); } .mvr-badge--active:hover{ background:var(--badge-active-bg-hover); color:var(--badge-active-font-hover); border-color:var(--badge-active-border-hover); } .mvr-badge--standard{ background:var(--badge-standard-bg); color:var(--badge-standard-font); border-color:var(--badge-standard-border); } .mvr-badge--standard:hover{ background:var(--badge-standard-bg-hover); color:var(--badge-standard-font-hover); border-color:var(--badge-standard-border-hover); } .mvr-badge--bright{ background:var(--badge-bright-bg); color:var(--badge-bright-font); border-color:var(--badge-bright-border); } .mvr-badge--bright:hover{ background:var(--badge-bright-bg-hover); color:var(--badge-bright-font-hover); border-color:var(--badge-bright-border-hover); } /* Pill – Varianten + Hover */ .mvr-pill--active{ background:var(--pill-active-bg); color:var(--pill-active-font); border-color:var(--pill-active-border); } .mvr-pill--active:hover{ background:var(--pill-active-bg-hover); color:var(--pill-active-font-hover); border-color:var(--pill-active-border-hover); } .mvr-pill--standard{ background:var(--pill-standard-bg); color:var(--pill-standard-font); border-color:var(--pill-standard-border); } .mvr-pill--standard:hover{ background:var(--pill-standard-bg-hover); color:var(--pill-standard-font-hover); border-color:var(--pill-standard-border-hover); } .mvr-pill--bright{ background:var(--pill-bright-bg); color:var(--pill-bright-font); border-color:var(--pill-bright-border); } .mvr-pill--bright:hover{ background:var(--pill-bright-bg-hover); color:var(--pill-bright-font-hover); border-color:var(--pill-bright-border-hover); } /* Helfer zum schnellen Stapeln in Beispielen */ .mvr-stack{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; } /* ------------------------------------------------- 3) Bullet-Listen (Kreis, Check, Dash, Pfeil) ------------------------------------------------- */ .mvr-list{ margin:0 0 1.25rem 0; padding:0; list-style:none; } .mvr-list li{ position:relative; padding-left:1.75rem; margin:.45rem 0; line-height:1.45; color:#333; } /* Standard-Marker (Square) */ .mvr-list li::before{ content:""; position:absolute; left:0; top:.35rem; width:.75rem; height:.75rem; border-radius:.25rem; background:var(--badge-active-bg); } /* Kreis */ .mvr-list--circle li::before{ border-radius:50%; } /* Check */ .mvr-list--check li{ padding-left:1.9rem; } .mvr-list--check li::before{ width:.85rem; height:.85rem; border-radius:.2rem; background:none; border:2px solid var(--badge-active-bg); } .mvr-list--check li::after{ content:""; position:absolute; left:.21rem; top:.55rem; width:.35rem; height:.20rem; border-left:2px solid var(--badge-active-bg); border-bottom:2px solid var(--badge-active-bg); transform:rotate(-45deg); } /* Dash */ .mvr-list--dash li::before{ width:.8rem; height:.14rem; border-radius:.1rem; top:.65rem; } /* Pfeil */ .mvr-list--arrow li::before{ width:.55rem; height:.55rem; border-radius:2px; transform:rotate(45deg); } .mvr-list--arrow li::after{ content:""; position:absolute; left:.36rem; top:.36rem; width:.65rem; height:.12rem; background:var(--badge-active-bg); } /* ------------------------------------------------- 4) Abschnitt-Heading + Badge nebeneinander ------------------------------------------------- */ .mvr-section{ margin:2rem 0 1.25rem; display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; } .mvr-section h2,.mvr-section h3{ margin:0; line-height:1.1; }