/* V1.6.7: Tariftiere neu aus den Verpackungsvorlagen erzeugt.
   Die Originalvorlagen und V1.6.6 bleiben als Referenz erhalten.
   Das Gerät dient ausschließlich als Rahmen eines statischen App-Screenshots.
   Auf kleinen Bildschirmen haben Logo und Tarifgruppen eigene Platzregeln. */
.p166-brand-emblem{display:block!important;position:static!important;width:calc(var(--brand-cap)*2.25)!important;height:calc(var(--brand-cap)*2.25)!important;max-width:none;object-fit:contain;flex:none}
body .p161-brand{gap:10px}
body .co-chevron,body .p16-plus,body .p16-plus::after,body .co-order>details>summary::after,body .co-optional>summary::after{color:var(--pet13-tuerkis)}
body :is(.selection-total,.product-sticky>p) a{display:inline-flex;align-items:center;border:1px solid color-mix(in srgb, var(--pet13-tuerkis) 30%, var(--pet13-weiss));border-radius:6px;padding:3px 9px;margin:2px 0;text-decoration:none;color:inherit;line-height:1.5}
body :is(.selection-total,.product-sticky>p) a:hover{border-color:var(--pet13-tuerkis);text-decoration:none}
/* In der Kasse bleiben nur interne Formularschritte und die gezielte Korrektur
   der Artikelauswahl erreichbar. Die Marken sind hier keine Ausstiegslinks. */
.p163-purchase-steps .p166-step{display:flex;align-items:center;gap:8px;font-size:12px;min-height:44px;color:#5E5E5E}
.p163-purchase-steps .p166-step>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 .p166-step[aria-current]{font-weight:650;color:#000000}
.p163-purchase-steps .p166-step[aria-current]>span{background:var(--pet13-tuerkis);color:white;border-color:var(--pet13-tuerkis)}
/* Verpackungstiere: zwei gleich hohe Motivflächen; fünf Tiere sind Dekoration,
   keine Tierobergrenze. Jedes neu erzeugte Motiv behält sein Seitenverhältnis. */
.p166-tariff-animals{height:80px;display:inline-flex;align-items:flex-end;gap:4px;flex:none}
.p166-tariff-animals img{display:block;width:auto;max-width:none;object-fit:contain;flex:none}
.p166-tariff-animals .p166-animal-hund{height:78px}
.p166-tariff-animals .p166-animal-katze{height:60px}
.p166-tariff-animals .p166-animal-kaninchen{height:72px}
.p166-tariff-animals .p166-animal-papagei{height:48px;align-self:center}
.p166-tariff-animals .p166-animal-schildkroete{height:29px}
/* V1.6.16: gleiche sichtbare Abstände in der Fünfergruppe. Das Kaninchen
   enthält bei 72px Bildhöhe links ca. 11px und rechts ca. 7px Leerraum,
   die Schildkröte links ca. 1px. Nur diese transparenten Ränder ausgleichen;
   Zeichnungen, Seitenverhältnisse und goldene Tags bleiben unverändert.
   Die kleine Zweiergruppe behält ihren bisherigen Abstand. */
.p166-many-animals{gap:8px}
.p166-many-animals .p166-animal-kaninchen{margin-inline:-11px -7px}
.p166-many-animals .p166-animal-schildkroete{margin-inline-start:-1px}
.p161-tariff-title{gap:16px;min-height:80px}
/* Metallrand, schwarzer Displayrand, Insel und Seitentasten machen das Gerät
   erkennbar. Außenverhältnis 71,9:150 entsprechend der Gerätevorlage.
   Innen steht ein einziges Bild, ohne iframe, Aktionen oder Scrollbereich. */
body .p16-app-figure{width:min(100%,280px);max-width:280px;padding-inline:5px}
.p166-phone{position:relative;width:100%;aspect-ratio:719/1500;border-radius:15.5% / 7.43%;background:linear-gradient(110deg,#B9B9B9 0%,#F6F6F6 13%,#A7A7A7 44%,#E9E9E9 75%,#A4A4A4 100%);border:1px solid #868686;box-shadow:inset 0 0 0 2px #EDEDED,0 22px 48px #30303038}
.p166-phone::before{content:"";position:absolute;inset:.55% 1.5%;border-radius:14.3% / 6.9%;background:#000000;box-shadow:0 0 0 1px #666666}
.p166-phone-screen{position:absolute;inset:1.05% 3%;border-radius:13.6% / 6.5%;overflow:hidden;background:var(--pet13-weiss);display:grid;grid-template-rows:6.64% 90.16% 3.2%}
.p166-statusbar{position:relative;display:flex;align-items:center;justify-content:space-between;padding:0 7%;color:#000000;font-family:Arial,sans-serif;font-size:10px;font-weight:700;background:var(--pet13-weiss)}
.p166-statusbar>svg{display:block;width:43px;height:auto}
.p166-island{position:absolute;left:38%;width:24%;height:51%;top:23%;border-radius:30px;background:#000000;box-shadow:inset -1px -1px 1px #333333}
.p166-island::after{content:"";position:absolute;right:9%;top:32%;width:8%;aspect-ratio:1;border-radius:50%;background:#000000;box-shadow:inset 0 0 1px #4E4E4E}
.p166-app-image{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:0}
.p166-homebar{display:grid;place-items:center;background:var(--pet13-weiss)}
.p166-homebar>i{display:block;background:#000000;width:34%;height:3px;border-radius:9px}
.p166-side{position:absolute;width:3px;border-radius:2px;background:linear-gradient(90deg,#7D7D7D,#D6D6D6,#929292);box-shadow:0 0 0 .4px #666666}
.p166-action{left:-3px;top:17%;height:3.7%}
.p166-volume-up{left:-3px;top:25%;height:6.3%}
.p166-volume-down{left:-3px;top:33%;height:6.3%}
.p166-power{right:-3px;top:29%;height:10%}
@media(max-width:1050px){.p161-tariff-title{flex-wrap:wrap;align-items:flex-start}.p161-tariff-title h3{flex-basis:100%}.p166-tariff-animals{margin-top:2px}}
@media(max-width:760px){body .p161-brand{gap:6px}.p163-purchase-steps .p166-step{font-size:11px;gap:6px}.p166-brand-emblem{width:calc(var(--brand-cap)*2.25)!important;height:calc(var(--brand-cap)*2.25)!important}}
@media(max-width:380px){body .header .brand.p161-brand{--brand-cap:13px;gap:5px}body .header .header-actions{gap:5px}body .header .header-actions :is(.cart-toggle,.menu-toggle){width:38px;min-width:38px}}

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

/* Auch der optionale Adresszusatz verwendet den gemeinsamen blauen Akzent. */
.co-address-extra summary::marker{color:var(--pet13-tuerkis)}
.co-address-extra summary::-webkit-details-marker{color:var(--pet13-tuerkis)}

/* 320px: ausreichender Rand auch mit beiden Marken und dem Emblem. */
@media(max-width:380px){
 body .header-inner:has(.p161-brand){gap:4px}
 body .header:has(.p161-brand) .header-actions{gap:4px}
 body .header .header-actions>button{width:40px;min-width:40px}
 body .commerce-header:has(.p161-brand) .commerce-back{font-size:11px;padding-inline:8px;min-width:0}
}

/* V1.6.17 – Einheitliche Knopfhöhe. Nach den Design-Regeln (Fabian) gibt es nur
   die Stufen 44, 50 und 56 px. Die Hauptknöpfe der Startseite lagen bei 47, 48
   und 50 px (Hero, Produktkarten, Abschluss). Alle stehen jetzt auf 50 px;
   Polsterung, Schrift und Farben bleiben, wie sie sind. */
body :is(.p15-hero,.p15-offer,.p162-purchase-close,.shop-band--compact) .btn { min-height:50px; }

/* V1.7.0 – Konto-Symbol in der Kopfzeile. Auf Handybreiten bis 440 px wird es
   ausgeblendet (bei 402 px wäre die Kopfzeile sonst 32 px zu breit); dort führt der
   Eintrag „Mein Konto“ im Menü zum Konto. */
@media (max-width:440px){ body .header .header-actions .account-link{display:none} }