/* Bewertung Killer – Frontend. Farben per CSS-Variablen anpassbar (z. B. in Bricks). */
@font-face{font-family:'Caveat';src:url('../fonts/Caveat.ttf') format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:'Dancing Script';src:url('../fonts/DancingScript.ttf') format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:'Homemade Apple';src:url('../fonts/HomemadeApple.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Reenie Beanie';src:url('../fonts/ReenieBeanie.ttf') format('truetype');font-display:swap}

.ro-app{--ro-brand:#0f2a4a;--ro-cta:#c2410c;--ro-cta-h:#a8370a;--ro-ink:#0e1a2b;--ro-muted:#4a5668;--ro-line:#dde2e9;--ro-bg:#fff;--ro-soft:#f5f7fa;--ro-star:#a66a00;--ro-err:#b42318;--ro-ok:#166a44;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ro-ink);font-size:16px;line-height:1.55;box-sizing:border-box}
.ro-app *,.ro-app *:before,.ro-app *:after{box-sizing:inherit}
.ro-app [hidden]{display:none!important}
.ro-h{font-size:26px;line-height:1.2;margin:0 0 18px;color:var(--ro-brand)}
.ro-sub{font-size:14px;text-transform:uppercase;letter-spacing:.04em;color:var(--ro-muted);margin:22px 0 8px}
.ro-lead{color:var(--ro-muted);margin:0 0 16px}
.ro-hint{font-size:13.5px;color:var(--ro-muted);margin:8px 0 0}
.ro-err{color:var(--ro-err);font-weight:600;margin:12px 0 0}
.ro-label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.ro-label em{font-weight:400;color:var(--ro-muted)}
.ro-input,.ro-app input.ro-input,.ro-app select.ro-input{width:100%;padding:12px 14px;border:1.5px solid #b9c2cf;border-radius:8px;background-color:#fff!important;font:inherit;color:#0e1a2b!important;min-height:48px;box-shadow:none}
.ro-input::placeholder{color:#6b7686;opacity:1}
.ro-input:focus{outline:none;border-color:#1d4ed8;box-shadow:0 0 0 1px #1d4ed8}
.ro-input:disabled{background:var(--ro-soft)}
.ro-field{margin-bottom:14px;position:relative}
.ro-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.ro-span2{grid-column:1/-1}
@media(max-width:640px){.ro-grid{grid-template-columns:1fr}}
.ro-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}

.ro-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:8px;border:2px solid transparent;font:inherit;font-weight:700;cursor:pointer;text-decoration:none;transition:background .15s}
.ro-btn--cta{background:var(--ro-cta);color:#fff}.ro-btn--cta:hover{background:var(--ro-cta-h)}
.ro-btn--ghost{background:#fff;color:var(--ro-brand);border-color:#b9c2cf}.ro-btn--ghost:hover{background:var(--ro-soft)}
.ro-btn--lg{min-height:54px;padding:0 32px;font-size:17px}
.ro-btn--sm{min-height:36px;padding:0 14px;font-size:14px;margin-top:8px}
.ro-btn:disabled{opacity:.6;cursor:wait}
.ro-btn:focus-visible{outline:3px solid #1d4ed8;outline-offset:2px}
.ro-acts{display:flex;gap:12px;justify-content:space-between;margin-top:22px}

/* Suche */
.ro-search__form{display:flex;gap:12px;flex-wrap:wrap}
.ro-search__field{position:relative;flex:1 1 320px}
.ro-app .ro-search__form .ro-input,.ro-app .ro-search__form input.ro-input{padding-left:44px;min-height:56px;font-size:17px}
.ro-search__form .ro-i{position:absolute;left:14px;top:18px;width:22px;height:22px;fill:var(--ro-muted);pointer-events:none}
.ro-search__form .ro-btn{min-height:56px}
.ro-suggest{position:absolute;z-index:30;left:0;right:0;top:100%;margin:4px 0 0;padding:6px;list-style:none;background:#fff;border:1px solid var(--ro-line);border-radius:10px;box-shadow:0 12px 32px -8px #0e1a2b40}
.ro-suggest li{padding:10px 12px;border-radius:6px;cursor:pointer;display:flex;flex-direction:column}
.ro-suggest li:hover{background:var(--ro-soft)}
.ro-suggest li span{font-size:13.5px;color:var(--ro-muted)}
.ro-suggest__empty{cursor:default!important;color:var(--ro-muted)}

/* Schritte */
.ro-steps{display:flex;gap:6px;list-style:none;margin:0 0 26px;padding:0;flex-wrap:wrap}
.ro-steps li{flex:1 1 120px;display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:3px solid var(--ro-line);font-size:14px;color:var(--ro-muted);font-weight:600}
.ro-steps li span{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ro-line);font-size:13px}
.ro-steps li.is-cur{border-color:var(--ro-cta);color:var(--ro-ink)}.ro-steps li.is-cur span{background:var(--ro-cta);color:#fff}
.ro-steps li.is-done{border-color:var(--ro-brand);color:var(--ro-brand)}.ro-steps li.is-done span{background:var(--ro-brand);color:#fff}

/* Status */
.ro-status{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--ro-soft);border-radius:8px;margin:12px 0;color:var(--ro-muted)}
.ro-spin{width:18px;height:18px;border-radius:50%;border:3px solid var(--ro-line);border-top-color:var(--ro-cta);animation:rospin .8s linear infinite}
@keyframes rospin{to{transform:rotate(360deg)}}

/* Firma + Bewertungen */
.ro-biz{padding:16px 18px;border:1px solid var(--ro-line);border-radius:10px;background:var(--ro-soft);display:flex;flex-direction:column;gap:2px;margin:12px 0}
.ro-biz span{color:var(--ro-muted);font-size:14.5px}.ro-rating{color:var(--ro-star)!important;font-weight:700}
.ro-chips{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.ro-chip{padding:8px 14px;border-radius:999px;border:1.5px solid #b9c2cf;background:#fff;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.ro-chip:hover{background:var(--ro-soft)}
.ro-review{display:flex;gap:12px;padding:14px;border:1.5px solid var(--ro-line);border-radius:10px;margin-bottom:8px;background:#fff;cursor:pointer}
.ro-review input{margin-top:5px;width:20px;height:20px;flex:none;accent-color:var(--ro-cta)}
.ro-review.is-sel{border-color:var(--ro-cta);background:#fff7f2}
.ro-review__body{flex:1;min-width:0}
.ro-review__top{display:flex;justify-content:space-between;gap:10px;font-size:14.5px}
.ro-review__author{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ro-review__date{color:var(--ro-muted);white-space:nowrap}
.ro-stars{color:var(--ro-star);letter-spacing:2px;font-size:16px}
.ro-review__text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;color:var(--ro-muted);margin:4px 0;font-size:15px}
.ro-review__meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px;font-size:14px}
.ro-badge{padding:2px 10px;border-radius:999px;background:var(--ro-soft);border:1px solid var(--ro-line);font-size:12.5px;font-weight:600;color:var(--ro-muted)}
.ro-owner{font-size:12.5px;color:var(--ro-ok)}
.ro-list--ro .ro-review{cursor:default}
.ro-empty{color:var(--ro-muted);padding:14px}
.ro-prices ul{list-style:none;margin:0;padding:0;border:1px solid var(--ro-line);border-radius:10px;overflow:hidden}
.ro-prices li{display:flex;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--ro-line);background:#fff}
.ro-prices li:last-child{border:0}
.ro-bar{position:sticky;bottom:0;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px;padding:14px 16px;background:#fff;border:1.5px solid var(--ro-brand);border-radius:10px;box-shadow:0 -6px 24px -10px #0e1a2b40}
.ro-bar__sum{font-weight:800;font-size:18px;color:var(--ro-brand)}
.ro-bar small{color:var(--ro-muted)}

/* Zusammenfassung */
.ro-sum{margin:0 0 16px;border:1px solid var(--ro-line);border-radius:10px;overflow:hidden}
.ro-sum>div{display:flex;gap:14px;padding:10px 14px;border-bottom:1px solid var(--ro-line);background:#fff}
.ro-sum>div:last-child{border:0}
.ro-sum dt{width:150px;flex:none;color:var(--ro-muted);font-size:14px}.ro-sum dd{margin:0;font-weight:600;min-width:0;overflow-wrap:anywhere}
@media(max-width:640px){.ro-sum>div{flex-direction:column;gap:2px}.ro-sum dt{width:auto}}
.ro-total{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:var(--ro-soft);border-radius:10px;margin:14px 0;font-weight:600}
.ro-total strong{font-size:22px;color:var(--ro-brand)}
.ro-cb{display:flex;gap:10px;align-items:flex-start;margin:12px 0;cursor:pointer;font-size:15px}
.ro-cb input{margin-top:4px;width:20px;height:20px;flex:none;accent-color:var(--ro-cta)}

/* Unterschrift */
.ro-sign{border:1px solid var(--ro-line);border-radius:10px;padding:16px;margin-top:14px;background:#fff}
.ro-tabs{display:inline-flex;border:1.5px solid #b9c2cf;border-radius:8px;overflow:hidden;margin-bottom:14px}
.ro-tabs button{padding:9px 20px;border:0;background:#fff;font:inherit;font-weight:600;cursor:pointer}
.ro-tabs button.is-on{background:var(--ro-brand);color:#fff}
.ro-fonts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:640px){.ro-fonts{grid-template-columns:1fr}}
.ro-font{border:1.5px solid var(--ro-line);border-radius:10px;background:#fff;padding:10px 14px;min-height:78px;cursor:pointer;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ro-font span{font-size:34px;line-height:1.2;color:#10243f;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.ro-font.is-on{border-color:var(--ro-cta);box-shadow:0 0 0 2px var(--ro-cta)}
.ro-pad{width:100%;height:auto;aspect-ratio:900/260;border:1.5px dashed #8a97a8;border-radius:10px;background:#fff;touch-action:none;cursor:crosshair;display:block}
.ro-poa-text pre{white-space:pre-wrap;font:inherit;font-size:14px;background:var(--ro-soft);padding:14px;border-radius:8px;max-height:260px;overflow:auto}
.ro-done{padding:28px;border:2px solid var(--ro-ok);border-radius:12px;background:#f2faf6}

/* ---- Bestellseite: Check-Ablauf ---- */
.ro-search--big{position:relative;margin-bottom:12px}
.ro-search--big .ro-i{position:absolute;left:16px;top:19px;width:22px;height:22px;fill:var(--ro-muted);pointer-events:none}
.ro-app .ro-search--big .ro-input,.ro-app .ro-search--big input.ro-input{padding-left:48px;min-height:60px;font-size:17px;border-radius:12px}
.ro-trust{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 22px}
.ro-trust span{padding:5px 12px;border:1px solid var(--ro-line);border-radius:999px;background:var(--ro-soft);font-size:13px;font-weight:600;color:var(--ro-ok)}
.ro-how{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ro-how li{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 8px;border:1px solid var(--ro-line);border-radius:12px;text-align:center;font-weight:600;font-size:14.5px}
.ro-how b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ro-brand);color:#fff;font-size:14px}
.ro-load{border:1px solid var(--ro-line);border-radius:14px;padding:24px;margin-top:8px;background:#fff;box-shadow:0 12px 32px -16px #0e1a2b30}
.ro-load__tag{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--ro-brand);color:#fff;font-size:12px;font-weight:700}
.ro-load__h{font-size:22px;margin:14px 0 6px;color:var(--ro-brand)}
.ro-load__h u{text-decoration-color:var(--ro-cta);text-underline-offset:4px}
.ro-load__p{color:var(--ro-muted);margin:0 0 16px}
.ro-prog{height:8px;border-radius:99px;background:var(--ro-line);overflow:hidden}
.ro-prog__bar{height:100%;width:4%;background:var(--ro-cta);border-radius:99px;transition:width .5s ease}
.ro-prog__lbl{display:flex;justify-content:space-between;font-size:13.5px;margin:8px 0 18px;font-weight:600}
.ro-prog__lbl span:last-child{color:var(--ro-muted);font-weight:400}
.ro-next{list-style:none;margin:0;padding:16px 0 0;border-top:1px solid var(--ro-line);display:flex;flex-direction:column;gap:10px;color:var(--ro-muted);font-size:14.5px}
.ro-next li:before{content:"✓";color:var(--ro-ok);font-weight:800;margin-right:10px}
.ro-stepline{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--ro-muted);margin-bottom:14px}

.ro-biz{padding:0;overflow:hidden;gap:0}
.ro-biz__img{height:150px;background-size:cover;background-position:center;position:relative}
.ro-biz__img span{position:absolute;left:12px;bottom:10px;padding:3px 10px;border-radius:999px;background:#0008;color:#fff;font-size:12px}
.ro-biz__in{padding:16px 18px;display:flex;flex-direction:column;gap:3px}
.ro-biz__in strong{font-size:20px;color:var(--ro-brand)}
.ro-biz__in em{font-style:normal;font-size:13.5px;color:var(--ro-muted)}
.ro-biz small{color:var(--ro-muted);font-weight:400}
.ro-alert{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:10px;background:#fdecea;border:1px solid #f3b9b3;color:#7a1d14;margin:12px 0}
.ro-alert span{font-size:14px}
.ro-pick{margin-left:auto;padding:6px 14px;border-radius:8px;border:1.5px solid var(--ro-cta);color:var(--ro-cta);font-weight:700;font-size:13.5px;white-space:nowrap}
.ro-review.is-sel .ro-pick{background:var(--ro-cta);color:#fff}
.ro-review input[type=checkbox]{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.ro-review{position:relative}
.ro-impact{border:1px solid var(--ro-line);border-radius:12px;padding:16px 18px;margin:16px 0;background:var(--ro-soft)}
.ro-impact h4{margin:0 0 10px;font-size:14px;text-transform:uppercase;letter-spacing:.04em;color:var(--ro-muted)}
.ro-impact__row{display:flex;align-items:center;justify-content:center;gap:28px}
.ro-impact__row div{display:flex;flex-direction:column;align-items:center}
.ro-impact__row small{font-size:12px;text-transform:uppercase;color:var(--ro-muted)}
.ro-impact__row b{font-size:34px;color:var(--ro-ink);line-height:1.1}.ro-impact__row b.is-up{color:var(--ro-ok)}
.ro-impact__row span{color:var(--ro-star);letter-spacing:2px}
.ro-impact__row i{font-style:normal;font-size:24px;color:var(--ro-muted)}
.ro-impact p{margin:10px 0 0;text-align:center;font-size:13.5px;color:var(--ro-muted)}
@media(max-width:560px){.ro-how{grid-template-columns:1fr}.ro-how li{flex-direction:row;justify-content:flex-start;padding:12px}}
.ro-app .ro-vathint{display:block;margin-top:6px;font-size:13.5px;font-weight:600;color:#c0392b;line-height:1.35}
.ro-app .ro-vatmsg{display:block;margin-top:6px;font-size:13.5px;font-weight:600;line-height:1.35}
.ro-app .ro-vatmsg.is-checking{color:var(--ro-muted,#5b6577);font-weight:500}
.ro-app .ro-vatmsg.is-valid{color:#0f7b4a}
.ro-app .ro-vatmsg.is-invalid{color:#c0392b}
.ro-app .ro-vatmsg.is-unknown{color:var(--ro-muted,#5b6577);font-weight:500}
.ro-app .ro-input.is-invalid{border-color:#c0392b !important}

.ro-ts{margin:12px 0}

/* keyboard focus must be visible (the native review checkbox is visually hidden) */
.ro-app .ro-review:has(input:focus-visible){outline:3px solid #2563eb;outline-offset:2px}
.ro-app .ro-btn:focus-visible,.ro-app .ro-font:focus-visible,.ro-app .ro-tabs button:focus-visible,.ro-app .ro-chip:focus-visible,.ro-app [data-ro-go]:focus-visible{outline:3px solid #2563eb;outline-offset:2px}
.ro-app .ro-suggest li.is-act{background:#eef4ff}
.ro-app .ro-err{font-weight:600}
@media (prefers-reduced-motion:reduce){.ro-app *,.ro-app *::before,.ro-app *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

.ro-nl__row{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.ro-nl__row .ro-input{flex:1 1 200px;min-width:0}
.ro-nl .ro-cb{margin-top:10px}
.ro-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}

.ro-pickhint{margin:0 0 10px;font-size:13.5px}

.ro-search--big .ro-clear{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:var(--ro-muted);font-size:26px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0}
.ro-search--big .ro-clear:hover{background:var(--ro-soft)}
.ro-search--big .ro-clear[hidden]{display:none}
.ro-app .ro-search--big input.ro-input{padding-right:48px}
.ro-pay{margin:2px 0 0;text-align:center;font-size:13.5px;color:var(--ro-muted)}

.ro-coupon{margin:14px 0}.ro-coupon label{display:block;font-weight:600;font-size:14px;margin-bottom:6px}
.ro-coupon__row{display:flex;gap:8px}.ro-coupon__row input{flex:1;min-width:0;padding:11px 13px;border:1px solid var(--ro-line,#d6dde3);border-radius:10px;font:inherit;text-transform:uppercase;letter-spacing:.04em}
.ro-coupon__msg{margin:8px 0 0;font-size:14px;font-weight:600}.ro-coupon__msg.is-ok{color:#1a7f4b}.ro-coupon__msg.is-bad{color:#b3261e}
.ro-total--sub{background:transparent;margin:4px 0;padding:6px 16px;font-weight:500;font-size:15px}
