/* Adriono shared "Produkte" dropdown + website offer components (Doodle style) */
.adr-prod { position: relative; }
.adr-prod-btn { display:inline-flex; align-items:center; gap:.35rem; font-weight:600; font-size:.875rem; color:rgba(27,42,58,.85); background:none; border:0; cursor:pointer; padding:.5rem .25rem; white-space:nowrap; }
.adr-prod-btn:hover, .adr-prod-btn[aria-expanded="true"] { color:#0EA5E9; }
.adr-prod-btn:focus-visible, .adr-prod-panel a:focus-visible { outline:3px solid #0EA5E9; outline-offset:3px; border-radius:8px; }
.adr-prod-btn svg { width:14px; height:14px; transition:transform .15s ease; }
.adr-prod-btn[aria-expanded="true"] svg { transform:rotate(180deg); }
.adr-prod-panel { position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%); width:22rem; background:#FBF8F1; border:2.5px solid #1B2A3A; border-radius:22px 10px 20px 12px; box-shadow:6px 6px 0 0 #1B2A3A; padding:.6rem; z-index:70; }
.adr-prod-panel[hidden] { display:none; }
.adr-prod-panel a { display:block; padding:.7rem .85rem; border-radius:14px; color:#1B2A3A; text-decoration:none; }
.adr-prod-panel a:hover { background:#EAF4FB; }
.adr-prod-panel a strong { display:flex; align-items:center; gap:.5rem; font-family:Poppins,sans-serif; font-size:.95rem; }
.adr-prod-panel a span { display:block; font-size:.8rem; color:rgba(27,42,58,.65); margin-top:.15rem; line-height:1.35; }
.adr-prod-dot { width:10px; height:10px; border-radius:50%; border:2px solid #1B2A3A; flex:none; }
.adr-prod-sep { border-top:2px dashed rgba(27,42,58,.2); margin:.35rem .5rem; }
.adr-prod-panel a.adr-prod-minor { font-size:.85rem; font-weight:600; color:rgba(27,42,58,.7); padding:.5rem .85rem; }
/* inline (mobile) variant */
.adr-prod--inline .adr-prod-btn { font-size:1.125rem; padding:.5rem 1rem; width:100%; justify-content:space-between; color:#1B2A3A; }
.adr-prod--inline .adr-prod-btn svg { width:18px; height:18px; }
.adr-prod--inline .adr-prod-panel { position:static; transform:none; width:auto; box-shadow:3px 3px 0 0 #0EA5E9; margin:.25rem .5rem .5rem; }
.adr-prod--inline .adr-prod-panel a { padding:.85rem; }

/* Website examples / offer */
.adr-browser { background:#fff; border:2.5px solid #1B2A3A; border-radius:18px 8px 16px 10px; box-shadow:6px 6px 0 0 #1B2A3A; overflow:hidden; }
.adr-browser-bar { display:flex; align-items:center; gap:6px; padding:8px 12px; border-bottom:2.5px solid #1B2A3A; background:#FBF8F1; font-size:11px; color:rgba(27,42,58,.6); }
.adr-browser-bar i { width:9px; height:9px; border-radius:50%; border:2px solid #1B2A3A; display:inline-block; }
.adr-browser-bar span { margin-left:8px; font-family: ui-monospace, monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.adr-browser img { display:block; width:100%; height:auto; }
.adr-label { display:inline-flex; align-items:center; gap:.4rem; font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:.3rem .7rem; border:2px solid #1B2A3A; border-radius:999px; background:#F4B740; color:#1B2A3A; }
.adr-label--sky { background:#EAF4FB; }
.adr-style { position:relative; text-align:left; background:#FBF8F1; border:2.5px solid #1B2A3A; border-radius:20px 10px 18px 12px; padding:1rem; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease; box-shadow:4px 4px 0 0 #1B2A3A; width:100%; }
.adr-style:hover { transform:translate(-1px,-1px); box-shadow:6px 6px 0 0 #1B2A3A; }
.adr-style[aria-pressed="true"] { background:#fff; box-shadow:6px 6px 0 0 #0EA5E9; }
.adr-style:focus-visible { outline:3px solid #0EA5E9; outline-offset:3px; }
.adr-mock { height:150px; border:2px solid #1B2A3A; border-radius:12px; overflow:hidden; position:relative; margin-bottom:.85rem; }
.adr-mock b { position:absolute; display:block; }
/* Style A: Adria (light, sea blue, big photo) */
.adr-mock--adria { background:#EAF4FB; }
.adr-mock--adria .h { inset:0 0 45% 0; background:linear-gradient(160deg,#7CC7EC,#0EA5E9); }
.adr-mock--adria .t { left:12px; top:22px; width:55%; height:10px; background:#fff; border-radius:4px; }
.adr-mock--adria .t2 { left:12px; top:38px; width:35%; height:7px; background:rgba(255,255,255,.7); border-radius:4px; }
.adr-mock--adria .c1,.adr-mock--adria .c2,.adr-mock--adria .c3 { bottom:12px; width:27%; height:44px; background:#fff; border:2px solid #1B2A3A; border-radius:8px; }
.adr-mock--adria .c1{left:8px}.adr-mock--adria .c2{left:36.5%}.adr-mock--adria .c3{right:8px}
/* Style B: Kamen (stone, serif, editorial) */
.adr-mock--kamen { background:#EFE7DA; }
.adr-mock--kamen .h { left:50%; top:0; right:0; bottom:0; background:linear-gradient(200deg,#C9B8A0,#8E7B62); }
.adr-mock--kamen .t { left:12px; top:26px; width:38%; height:14px; background:#1B2A3A; border-radius:2px; }
.adr-mock--kamen .t2 { left:12px; top:48px; width:30%; height:6px; background:rgba(27,42,58,.4); border-radius:2px; }
.adr-mock--kamen .c1 { left:12px; top:64px; width:32%; height:6px; background:rgba(27,42,58,.4); border-radius:2px; }
.adr-mock--kamen .c2 { left:12px; bottom:16px; width:26%; height:20px; border:2px solid #1B2A3A; border-radius:2px; }
.adr-mock--kamen .c3 { display:none; }
/* Style C: Minimal (light, reduced) */
.adr-mock--bor { background:#FBF8F1; }
.adr-mock--bor .h { left:22%; right:22%; top:16px; height:58px; background:#D9E6EE; border-radius:4px; }
.adr-mock--bor .t { left:30%; top:86px; width:40%; height:8px; background:#1B2A3A; border-radius:2px; }
.adr-mock--bor .t2 { left:36%; top:100px; width:28%; height:5px; background:rgba(27,42,58,.35); border-radius:2px; }
.adr-mock--bor .c1 { left:40%; top:114px; width:20%; height:12px; border:2px solid #1B2A3A; border-radius:2px; }
.adr-mock--bor .c2, .adr-mock--bor .c3 { display:none; }
.adr-table { width:100%; border-collapse:separate; border-spacing:0; background:#fff; border:2.5px solid #1B2A3A; border-radius:18px; overflow:hidden; }
.adr-table th, .adr-table td { text-align:left; padding:.85rem 1rem; border-bottom:2px dashed rgba(27,42,58,.15); vertical-align:top; font-size:.95rem; }
.adr-table thead th { background:#EAF4FB; font-family:Poppins,sans-serif; border-bottom:2.5px solid #1B2A3A; }
.adr-table tr:last-child td { border-bottom:0; }
.adr-yes { color:#0E8A5F; font-weight:800; }
.adr-no { color:rgba(27,42,58,.5); font-weight:700; }
@media (max-width: 640px) { .adr-table th, .adr-table td { padding:.65rem .6rem; font-size:.85rem; } }
@media (prefers-reduced-motion: reduce) { .adr-style, .adr-prod-btn svg { transition:none; } }