/* PET13 V1.6.3 – gemeinsame Layoutregeln über alle Kundenseiten.
   Ein Raster, eine Kopfzeile, identische Karten und Schriftgrößen im Kaufprozess.
   Interaktionsfarben bleiben in interactions.css; originale Wortmarken unverändert. */
:root{--p163-content:1240px;--p163-card-line:#E5E5E5;--p163-radius:20px;--p163-pad:24px;--p163-gap:28px;--p163-anchor-gap:100px}
/* Zwei echte Links mit gleich hoher Schrift, größeren unsichtbaren Klickflächen. */
body .p161-brand .p161-logo{height:44px;display:block;text-decoration:none;border-radius:6px}
body .p161-brand .p161-pet img{top:calc(22px - var(--brand-cap)*.663)}
body .p161-brand .p161-luck img{top:calc(22px - var(--brand-cap)*1.228)}
/* V1.6.5: schwarzer Doppelpunkt zwischen den getrennt verlinkten Originalwortmarken. */
.p165-brand-colon{flex:none;display:flex;align-items:center;justify-content:center;width:calc(var(--brand-cap)*.55);height:44px;font-family:Arial,sans-serif;font-size:calc(var(--brand-cap)*1.2);font-weight:700;line-height:1;color:var(--pet13-schwarz)}
.p161-brand a:focus-visible{outline:2px solid #545454;outline-offset:5px}
body :is(.header-inner,.commerce-header-inner):has(.p161-brand){max-width:var(--p163-content);height:80px;min-height:80px;padding-block:0}
body .commerce-header{position:sticky;top:0;z-index:40;border-bottom:4px solid var(--pet13-gold);background:white}
body .header{border-bottom:4px solid var(--pet13-gold)}
body .commerce-header .brand.p161-brand{--brand-cap:26px}
body .commerce-back{min-height:44px}
/* Nur ein Scrollabstand: kein zusätzliches html-padding neben dem Zielabstand.
   funnel.js gleicht die tatsächlich gemessene Headerhöhe bei jedem Sprung ab. */
html{scroll-padding-top:0!important}
body :is(main [id],.co-step){scroll-margin-top:var(--p163-anchor-gap)!important}
body :is(.p15-hero,#main){scroll-margin-top:84px!important}
/* Warenkorb, Kasse und Bestellstatus verwenden dieselbe Achse und Kopfzone. */
body :is(.commerce-shell,.co-shell){max-width:var(--p163-content);padding-block:28px 24px}
.p163-purchase-steps{margin:0 0 24px}
.p163-purchase-steps ol{list-style:none;display:flex;align-items:center;gap:24px;padding:0;margin:0}
.p163-purchase-steps li{position:relative}
.p163-purchase-steps li+li:before{content:'›';position:absolute;left:-15px;top:10px;color:#8D8D8D;font-size:12px}
.p163-purchase-steps a{display:flex;align-items:center;gap:8px;font-size:12px;min-height:44px;color:#5E5E5E;text-decoration:none}
.p163-purchase-steps a>span{width:25px;height:25px;border:1px solid var(--p163-card-line);border-radius:50%;display:grid;place-items:center;font-size:11px}
.p163-purchase-steps a[aria-current]{font-weight:650;color:#000000}
.p163-purchase-steps a[aria-current]>span{background:var(--pet13-tuerkis);color:var(--pet13-weiss);border-color:var(--pet13-tuerkis)}
.p163-purchase-steps a:focus-visible{outline:2px solid #545454;outline-offset:3px}
body .commerce-title{margin:0 0 28px;min-height:118px;display:flex;flex-direction:column;justify-content:flex-start}
body .commerce-title .eyebrow{font-size:10px;letter-spacing:.1em;line-height:1.5;margin:0 0 12px}
body .commerce-title h1,body .co-title h1:has(.lucktag-inline){font-size:40px;line-height:1.2;letter-spacing:-.04em;margin:0 0 14px;padding:0}
body .co-title h1 br{display:none}
body .co-title .lucktag-inline{margin-right:.12em}
body .commerce-title p{font-size:15px;line-height:1.6;margin:0;color:#5E5E5E}
body :is(.commerce-grid,.co-layout){display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--p163-gap);align-items:start}
body :is(.cart-page-card,.summary-panel,.co-order,.co-form,.p163-status-card){border:1px solid var(--p163-card-line);border-radius:var(--p163-radius);padding:var(--p163-pad);background:var(--pet13-weiss);box-shadow:none}
body :is(.summary-panel,.co-order){position:sticky;top:var(--p163-anchor-gap)}
body .co-order{padding:0;order:initial;overflow:hidden}
body .co-order>details>summary{padding:24px;align-items:center;font-size:23px;line-height:1.3}
body .co-order>details>summary small,body .summary-panel>.eyebrow{font-size:9px;line-height:1.5;letter-spacing:.1em;font-weight:650;margin:0 0 8px;color:#5E5E5E}
body .co-order>details>summary>b{display:none}
body .co-order-inner{padding:0 24px 24px}
body .summary-panel>h2{font-size:23px;line-height:1.3;letter-spacing:-.025em;margin:0 0 18px}
body .card-heading h2,body .co-step-heading h2{font-size:21px;line-height:1.3}
body :is(.summary-panel,.co-order) .order-line{font-size:14px;padding:12px 0}
body :is(.summary-panel,.co-order) .order-line.total{padding:18px 0 12px;font-size:16px}
body :is(.summary-panel,.co-order) .order-line.total strong{font-size:28px}
body :is(.summary-footnote,.co-order .co-small){text-align:left;font-size:12px;line-height:1.6;color:#5E5E5E;margin:16px 0 0}
body :is(.summary-delivery,.co-order-delivery){font-size:12px;line-height:1.6;margin:16px 0 0;padding:16px 0;border-top:1px solid var(--p163-card-line);align-items:flex-start}
body :is(.summary-delivery,.co-order-delivery) .icon{width:20px;height:20px;color:var(--pet13-tuerkis);flex:none}
/* Der Formularbereich wird zur gleichen ruhigen Karte wie die Artikelliste. */
body .co-preview{background:#F7F7F7;border-color:var(--p163-card-line);font-size:11px;padding:12px;margin:0 0 22px;gap:12px;flex-wrap:wrap}
body .co-preview button{min-height:36px;padding:7px 10px}
body .co-progress{padding-bottom:20px;margin:0 0 24px;border-bottom:1px solid var(--p163-card-line)}
body .co-step{border:0;border-radius:0;padding:0 0 24px;margin:0 0 24px;border-bottom:1px solid var(--p163-card-line)}
body .co-step:last-of-type{border-bottom:0;margin-bottom:0;padding-bottom:0}
body .co-step.active{border-color:var(--p163-card-line)}
body .co-step-number{background:#F5F5F5;border:1px solid var(--p163-card-line);border-radius:50%}
body .co-step.active .co-step-number{background:var(--pet13-tuerkis);border-color:var(--pet13-tuerkis)}
body .co-field input{border-color:#D0D0D0;border-radius:10px}
body :is(.co-account-banner,.co-search,.co-payment){background:#F8F8F8;border:1px solid var(--p163-card-line);border-radius:14px}
body .co-account-banner{padding:22px;margin-top:22px}
body .co-account-banner h3{font-size:24px;line-height:1.25}
body .co-account-banner .co-choice{background:var(--pet13-weiss);border-color:var(--p163-card-line)}
body .co-banner-icon{border-color:var(--p163-card-line);background:var(--pet13-weiss)}
body :is(.co-text-link,.co-text-button,.commerce-back,.remove-item){text-decoration:none}
body :is(.co-text-link,.co-text-button,.commerce-back,.remove-item):hover{transform:none}
body .p163-status-card{max-width:760px;min-height:150px;margin-bottom:24px;font-size:15px;line-height:1.7}
body .p163-status-card h2{font-size:24px;line-height:1.3}
body:is([data-page="warenkorb"],[data-page="kasse"],[data-page="bestellstatus"]) .footer{margin-top:26px;padding-block:0 20px;background:var(--pet13-weiss)}
body:is([data-page="warenkorb"],[data-page="kasse"],[data-page="bestellstatus"]) .footer-main{display:none}
body:is([data-page="warenkorb"],[data-page="kasse"],[data-page="bestellstatus"]) .footer .wrap{max-width:var(--p163-content)}
@media(max-width:1050px){
 body :is(.commerce-grid,.co-layout){grid-template-columns:minmax(0,1fr) 320px;gap:22px}
 body .commerce-title h1,body .co-title h1:has(.lucktag-inline){font-size:36px}
 body .co-order>details>summary{font-size:21px}
}
@media(max-width:760px){
 :root{--p163-pad:20px;--p163-radius:18px;--p163-gap:20px;--p163-anchor-gap:84px}
 body :is(.header-inner,.commerce-header-inner):has(.p161-brand){height:68px;min-height:68px;gap:8px;padding-block:0}
 body .commerce-header .brand.p161-brand{--brand-cap:17px}
 body .commerce-header:has(.p161-brand) .commerce-back{font-size:12px;min-height:40px;padding:9px 10px;justify-content:center;white-space:nowrap}
 body .commerce-header .commerce-back .icon{display:none}
 body :is(.commerce-shell,.co-shell){padding-inline:var(--gutter);padding-block:20px 16px}
 .p163-purchase-steps{margin-bottom:16px}
 .p163-purchase-steps ol{gap:20px}
 .p163-purchase-steps a{font-size:11px;gap:6px}
 .p163-purchase-steps li+li:before{left:-13px}
 body .commerce-title{min-height:142px;margin-bottom:24px}
 body .commerce-title h1,body .co-title h1:has(.lucktag-inline){font-size:34px;line-height:1.16;margin-bottom:14px}
 body .commerce-title p{font-size:14px}
 body .co-title h1 br{display:block}
 body :is(.commerce-grid,.co-layout){grid-template-columns:1fr;gap:20px}
 body :is(.summary-panel,.co-order){position:static;order:initial}
 body .cart-page-grid:has(.empty-state) .cart-page-card{max-width:none}
 body .co-order>details>summary{padding:20px;font-size:22px}
 body .co-order-inner{padding:0 20px 20px}
 body .co-step-heading h2,body .card-heading h2{font-size:20px}
 body .co-account-banner{padding:18px}
 body .co-account-banner h3{font-size:23px}
 body .co-progress li{font-size:12px}
 body :is(.p15-hero,#main){scroll-margin-top:72px!important}
}
@media(max-width:380px){body .commerce-header .brand.p161-brand{--brand-cap:15px}body .commerce-title h1,body .co-title h1:has(.lucktag-inline){font-size:32px}}
/* Der Einstieg und das statische Appbild passen auch bei niedrigen Desktopfenstern.
   Mobil folgt der Inhalt dem normalen Lesefluss; keine künstliche Bildschirmhöhe. */
@media(min-width:761px){
 body .p15-hero{padding-block:40px 48px}
 body .p15-hero-visual .p15-dog{height:clamp(390px,calc(100svh - 200px),500px);aspect-ratio:auto;object-fit:cover}
 body .p16-app-figure{max-width:280px}
}

@media(max-width:340px){body .commerce-header .brand.p161-brand{--brand-cap:13px}}

/* V1.6.4: Das vollständige Originalemblem erklärt die vier Karten darunter.
   Desktop: Höhe wie die linke Titelgruppe. Mobil bleibt das Emblem sichtbar;
   kleine Displays erhalten Platz durch eine eigene Zeile statt gequetschter Typografie. */
body .p13-values .p164-values-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:32px}
.p164-values-logo{display:block;width:clamp(112px,12vw,148px);height:auto;justify-self:end;object-fit:contain}
body .p13-values .p164-values-head h2{margin-bottom:0}
@media(max-width:760px){body .p13-values .p164-values-head{gap:22px}.p164-values-logo{width:104px}}
@media(max-width:540px){body .p13-values .p164-values-head{grid-template-columns:1fr;gap:22px}.p164-values-logo{justify-self:start;width:104px}}