#fisch-konfigurator .fisch-vorschau{position:relative;display:flex;align-items:center;justify-content:center;min-height:260px;height:clamp(260px,38vw,420px);border:1px solid var(--orchid-border);border-radius:.75rem;overflow:hidden;background:repeating-conic-gradient(#f5f5f5 0% 25%,#fff 0% 50%) 0 0/16px 16px;color:#343a40}
[data-start-beispiel] img{max-width:100%;max-height:15rem;object-fit:contain}
[data-start-beispiel]+i{display:none!important}
#fisch-vorschaubild{max-width:100%;max-height:100%;object-fit:contain}
.fisch-laden{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;background:rgba(255,255,255,.9)}
#fisch-konfigurator [hidden]{display:none!important}
.fisch-reiter small{font-weight:400;font-size:.75rem;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.fisch-auswahl,.fisch-verwaltung{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.75rem}
.fisch-kachel{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.75rem;background:var(--orchid-surface);border:1px solid var(--orchid-border);border-radius:.75rem;color:var(--orchid-text);text-align:center;overflow-wrap:anywhere}
.fisch-kachel img,.fisch-bild-fehlt{width:100%;height:110px;object-fit:contain;border-radius:.4rem;background:#fff;color:#5d6370;display:flex;align-items:center;justify-content:center;font-size:.8rem}
.fisch-kachel[aria-pressed=true]{border:3px solid #ffc107;padding:calc(.75rem - 2px)}
.fisch-kachel:focus-visible{outline:3px solid var(--orchid-primary);outline-offset:2px}
.fisch-kachel small{color:var(--orchid-text-muted)}
#fisch-konfigurator summary{cursor:pointer}
[data-bs-theme=dark] #fisch-konfigurator :is(.form-control,.form-select){background-color:color-mix(in srgb,var(--orchid-surface) 92%,white);color:var(--orchid-field-text);border-color:var(--orchid-bg)}
[data-bs-theme=dark] #fisch-konfigurator :is(.form-control,.form-select):focus{border-color:var(--orchid-primary);box-shadow:0 0 0 .2rem color-mix(in srgb,var(--orchid-primary) 25%,transparent)}
@media(max-width:575px){.fisch-auswahl,.fisch-verwaltung{grid-template-columns:repeat(2,minmax(0,1fr))}.fisch-reiter .nav-link{padding:.6rem .4rem}}
/* Customer design area reuses the PDF configurator container and tabs. */
#fisch-konfigurator .fisch-gestaltung{color:#212529;background:#fff}
#fisch-konfigurator .fisch-gestaltung .fisch-vorschau{border-color:#dee2e6;border-radius:.5rem;height:clamp(240px,32vw,380px);min-height:240px}
#fisch-konfigurator .fisch-reiter{flex-wrap:nowrap;border-bottom:0;gap:6px}
#fisch-konfigurator .fisch-reiter .nav-link{flex:1 1 0;min-width:0;min-height:48px}
#fisch-konfigurator .fisch-gestaltung .fisch-kachel{background:#fff;color:#343a40;border-color:#dee2e6;border-radius:9px;padding:10px;font-size:.875rem;transition:border-color .15s,background-color .15s}
#fisch-konfigurator .fisch-kachel[data-group="pose"] > span:last-child{line-height:1.25}
#fisch-konfigurator .fisch-gestaltung .fisch-kachel:hover{background:#fff8db;border-color:#ffc107}
#fisch-konfigurator .fisch-gestaltung .fisch-kachel[aria-pressed=true]{border:2px solid #ffc107;background:#fff8db;padding:9px}
#fisch-konfigurator .fisch-gestaltung .fisch-kachel:focus-visible{outline:2px solid #ffc107;outline-offset:3px}
#fisch-konfigurator .fisch-gestaltung .fisch-auswahl{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
#fisch-konfigurator .fisch-gestaltung .fisch-kachel img{height:130px}
.fisch-schritte{display:flex;gap:6px;align-items:stretch}
#fisch-konfigurator .fisch-schritte .fisch-reiter{flex:3 1 0;min-width:0}
#fisch-konfigurator .fisch-schritte #fisch-generieren{flex:1 1 0;min-width:0;min-height:48px;padding:.6rem .4rem;font-size:.875rem;font-weight:600;border-radius:7px;white-space:normal}
@media(max-width:575px){#fisch-konfigurator .fisch-gestaltung .fisch-auswahl{grid-template-columns:repeat(2,minmax(0,1fr))}#fisch-konfigurator .fisch-gestaltung .fisch-kachel img{height:100px}}

#fisch-konfigurator .fisch-laden{padding:1.25rem;text-align:center;gap:.8rem;background:#fff}
#fisch-fortschritt{appearance:none;width:min(360px,90%);height:18px;border:0;border-radius:9px;overflow:hidden;background:#e9ecef}
#fisch-fortschritt::-webkit-progress-bar{background:#e9ecef}
#fisch-fortschritt::-webkit-progress-value{background:#ffc107;border-radius:9px}
#fisch-fortschritt::-moz-progress-bar{background:#ffc107;border-radius:9px}
#fisch-fortschritt:indeterminate{appearance:none;border:0;border-radius:8px;background:linear-gradient(#ffc107,#ffc107) left center/32% 100% no-repeat #e9ecef;animation:fisch-pendeln 1.3s ease-in-out infinite alternate}
#fisch-fortschritt:indeterminate::-webkit-progress-bar{background:transparent}
#fisch-fortschritt:indeterminate::-moz-progress-bar{background:transparent}
@keyframes fisch-pendeln{from{background-position:left center}to{background-position:right center}}
@media(prefers-reduced-motion:reduce){#fisch-fortschritt:indeterminate{animation:none;background-position:center}}

@media(max-width:575px){#fisch-konfigurator .fisch-schritte .nav-link{padding:.6rem .15rem;font-size:.75rem;white-space:nowrap}#fisch-konfigurator .fisch-schritte #fisch-generieren{font-size:.75rem;padding:.6rem .15rem}}

.fisch-kunden-leiste{display:flex;flex:1;min-width:0;gap:.4rem;overflow-x:auto;padding:.25rem}
.fisch-kunden-leiste button{flex:0 0 auto;padding:.2rem;background:white}
.fisch-kunden-leiste img{width:80px;height:52px;object-fit:contain}
#fisch-kunden-optionen button[aria-pressed=true]{outline:2px solid var(--bs-primary);outline-offset:-2px}
#fisch-kunden-dialog{box-sizing:border-box;inset:0;margin:0;width:100%;max-width:none;height:100dvh;max-height:none;border:0;padding:0;background:var(--fisch-flaeche,#fff);color:var(--fisch-text,#222);overflow:hidden}
#fisch-kunden-dialog[open]{display:flex;flex-direction:column}
.fisch-uebersicht-kopf{flex:none;display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;background:var(--fisch-flaeche,#fff)}
#fisch-kunden-dialog .fisch-kunden-leiste{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(145px,100%),1fr));gap:.75rem;min-height:0;align-content:start;overflow-y:auto;overscroll-behavior:contain;padding:.5rem 1rem 1rem}
#fisch-kunden-dialog:has(#fisch-uebersicht-dunkel:checked){--fisch-flaeche:#000;--fisch-text:#fff}
.fisch-uebersicht-schliessen{display:grid;place-items:center;width:44px;height:44px;border:1px solid currentColor;border-radius:.5rem;background:transparent;color:inherit;font-size:1.2rem}
#fisch-kunden-optionen #fisch-kunden-dialog [data-kunden-motiv]{min-width:0;background:transparent;border:0;outline:0;box-shadow:none}
#fisch-kunden-optionen #fisch-kunden-dialog [data-kunden-motiv]:focus-visible{outline:2px solid #1479ff;outline-offset:1px}
#fisch-kunden-dialog [data-kunden-motiv] img{width:100%;height:90px}
.fisch-links{transform:scaleX(-1)}
.fisch-kundenansicht #fisch-downloads,.fisch-kundenansicht .fisch-admin-aktion{display:none!important}

.fisch-richtungsschalter{display:none;position:absolute;bottom:.5rem;left:50%;transform:translateX(-50%);gap:.3rem}
.fisch-kundenansicht .fisch-richtungsschalter{display:flex}
.fisch-richtungsschalter:has(button:disabled){visibility:hidden}
.fisch-richtungsschalter .btn{min-width:44px;min-height:36px;border:1px solid #adb5bd}
.fisch-richtungsschalter img{object-fit:contain;filter:url(#fisch-silhouette-alpha)}
.fisch-richtungsschalter [data-blickrichtung=links] img{transform:scaleX(-1)}
#fisch-konfigurator .fisch-richtungsschalter [aria-pressed=true]{background:#ffc107;border-color:#805900;outline:0}
#fisch-kunden-lupe{min-width:44px}
#fisch-kunden-lupe .bi-images{font-size:1.75rem;color:#000;line-height:1}

.fisch-kundenansicht .fisch-vorschau{padding-bottom:48px}


#fisch-bestellen .logo-option-card{background:#fff;border:1px solid #e5e7ef;border-radius:12px;padding:14px;margin-bottom:16px;box-shadow:0 1px 2px #23283c06}
#fisch-bestellen .logo-option-card>p.text-dark,#fisch-bestellen .logo-option-card>.form-label{font-size:11px;font-weight:700;color:#727c91!important;text-transform:uppercase;letter-spacing:.025em;margin:0 0 12px!important}

/* The customer configurator uses a light surface in both backend themes. */
#fisch-konfigurator #fisch-bestellen .form-select{
    --bs-form-select-bg-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-color:#fff;color:#212529;border-color:#adb5bd;
}
#fisch-konfigurator #fisch-bestellen .input-group{flex-wrap:nowrap}
#fisch-konfigurator #fisch-bestellen .input-group>:is(.input-group-text,.btn,.form-control){border-color:#adb5bd}
#fisch-konfigurator #fisch-bestellen .input-group .form-control{background-color:#fff;color:#212529}
#fisch-konfigurator #fisch-bestellen :is(.form-select,.form-control,.btn):focus-visible{outline:2px solid #0d6efd;outline-offset:1px;z-index:4}
@media(max-width:575px){

    #fisch-konfigurator.fisch-kundenansicht .fisch-reiter #fisch-tab-bestellen{flex:0 0 44px}
    #fisch-konfigurator #fisch-bestellen>p.mt-5{margin-top:1.25rem!important}
}

.fisch-tab-bild{display:none}
#fisch-konfigurator.fisch-kundenansicht .fisch-tab-text small{display:none!important}
.fisch-kundenansicht .fisch-platzhalter-text{display:none}
.fisch-kundenansicht .fisch-tab-text{display:block;margin-bottom:.2rem}
#fisch-konfigurator [data-group="pose"] img,#fisch-tab-pose .fisch-tab-bild img{background:transparent;filter:url(#fisch-silhouette-alpha)}
.fisch-kundenansicht .fisch-tab-bild{display:flex;align-items:center;justify-content:center;height:40px}
.fisch-tab-bild img{display:block;max-width:100%;width:90px;height:100%;object-fit:contain}
.fisch-tab-bild:has(img) i{display:none}

/* Only the public shop pins the preview below its header. */
#fisch-konfigurator.fisch-kundenansicht .fisch-gestaltung{overflow:clip}
#fisch-konfigurator.fisch-kundenansicht .fisch-vorschau{

    padding:clamp(12px,2vw,24px) clamp(16px,3vw,32px) 50px;
}
#fisch-konfigurator.fisch-kundenansicht:where([data-shop="1"]) .fisch-vorschau{position:sticky;top:var(--fisch-header-hoehe,0px);z-index:10}
@media(max-width:767.98px){
    #fisch-konfigurator.fisch-kundenansicht .fisch-vorschau{min-height:0;max-height:40dvh}
}

.fisch-motivspalte,.fisch-optionsspalte{display:contents}
@media(min-width:768px){
    .fisch-bestell-symbol{height:40px}
    .fisch-kundenansicht .fisch-gestaltung > .card-body{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:1.5rem;
    }
    .fisch-kundenansicht .fisch-motivspalte,.fisch-kundenansicht .fisch-optionsspalte{display:block;min-width:0}
    .fisch-kundenansicht .fisch-optionsspalte .fisch-schritte{margin-top:.5rem!important}
    #fisch-konfigurator.fisch-kundenansicht .fisch-gestaltung .fisch-auswahl{grid-template-columns:repeat(auto-fit,minmax(min(135px,100%),1fr))}
}

#fisch-konfigurator .fisch-laden.fisch-laden-kompakt{
    inset:.5rem auto auto .5rem;max-width:calc(100% - 4rem);align-items:flex-start;
    padding:.2rem .35rem;gap:.12rem;border:1px solid #dee2e6;border-radius:.5rem;
    font-size:.7rem;line-height:1.15;text-align:start;pointer-events:none;
}
#fisch-konfigurator .fisch-laden-kompakt small{font-size:inherit}
#fisch-konfigurator .fisch-laden-kompakt progress{width:5rem;max-width:100%;height:3px}

@media(min-width:768px){
    #fisch-kunden-dialog .fisch-kunden-leiste{grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:1rem}
    #fisch-kunden-dialog [data-kunden-motiv] img{height:clamp(190px,17vw,280px)}
}

@media(max-width:767.98px){
    #fisch-konfigurator.fisch-kundenansicht .fisch-reiter{flex-wrap:wrap}
    #fisch-konfigurator.fisch-kundenansicht .fisch-reiter #fisch-tab-bestellen{
        display:flex;flex:0 0 100%;align-items:center;justify-content:center;gap:.5rem;
        min-height:44px;padding:.5rem 1rem;font-size:1rem;
    }
}

#fisch-konfigurator :is(.fisch-schritte,.fisch-vorschau-anker){scroll-margin-top:calc(var(--fisch-header-hoehe,0px) + .5rem)}
@media(max-width:767.98px){
    #fisch-konfigurator.fisch-kundenansicht.fisch-auswahl-im-fokus .fisch-vorschau{position:relative;top:auto;z-index:auto}
}

#fisch-konfigurator .fisch-gewaesserfilter{
    display:flex;width:min(100%,16rem);margin:1.5rem auto 1rem;
}
#fisch-konfigurator .fisch-gewaesserfilter .btn{
    min-height:2.25rem;padding:.25rem .65rem;font-size:.875rem;line-height:1.25;
}
#fisch-konfigurator .fisch-gewaesserfilter .btn:first-child{border-radius:2rem 0 0 2rem}
#fisch-konfigurator .fisch-gewaesserfilter .btn:last-child{border-radius:0 2rem 2rem 0}
#fisch-konfigurator [data-fisch-gewaesser][aria-pressed="true"]{background-color:#ffc107;border-color:#ffc107;color:#212529}

#fisch-konfigurator .fisch-vorschau [data-motiv-schritt]{z-index:1}