/* Cartel Kingpin - Website (generiert von Tools/make_site.py, nicht von Hand aendern) */
@font-face{font-family:"Titan One";src:url("/fonts/TitanOne-Regular.ttf") format("truetype");font-display:swap}
:root{--ink:#3b2415;--soft:#6e4b31;--link:#9a3a09;--card:#fff8e8;--card2:#fbe8c4;--head:#7a3310;--rule:#e2c28c;
--page:#e7cf9e;--wood:#4a230b;--cream:#fff8e6;--gold:#ffd04d;color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{--ink:#f2e6d2;--soft:#cdb595;--link:#ffbf5f;--card:#2e1f14;--card2:#22170e;
--head:#ffcd55;--rule:#5a4029;--page:#100904}}
*,*::before,*::after{box-sizing:border-box}
html.l-en [data-l]:not([data-l="en"]),html.l-de [data-l]:not([data-l="de"]),html.l-es [data-l]:not([data-l="es"]),html.l-fr [data-l]:not([data-l="fr"]){display:none!important}
html{background:var(--page);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;color:var(--ink);overflow-wrap:break-word;
font:16.5px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:url("/img/beach.webp") 50% 62%/cover no-repeat}
@media (prefers-color-scheme:dark){body::before{background-image:linear-gradient(rgba(8,5,2,.62),rgba(8,5,2,.62)),
url("/img/beach.webp")}}
img{max-width:100%}
a{color:var(--link)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:6px}
.tt{font-family:"Titan One",system-ui,sans-serif;font-weight:400;letter-spacing:.01em;overflow-wrap:normal;hyphens:manual;color:var(--cream);--o:2px;
--d:calc(var(--o)*.72);text-shadow:0 var(--o) 0 var(--wood),var(--o) 0 0 var(--wood),calc(var(--o)*-1) 0 0 var(--wood),
0 calc(var(--o)*-1) 0 var(--wood),var(--d) var(--d) 0 var(--wood),calc(var(--d)*-1) var(--d) 0 var(--wood),
var(--d) calc(var(--d)*-1) 0 var(--wood),calc(var(--d)*-1) calc(var(--d)*-1) 0 var(--wood),
0 calc(var(--o)*2) 0 var(--wood),0 calc(var(--o)*3) 6px rgba(0,0,0,.35)}
/* Kopf: kleines Logo und Flaggen */
.top{display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:max(10px,env(safe-area-inset-top)) 12px 4px}
.mini-logo{display:block;flex:0 0 auto;border-radius:12px}
.mini-logo img{display:block;height:68px;width:auto;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
.langs{display:flex;gap:2px;margin-left:auto}
.langs button{appearance:none;-webkit-appearance:none;border:0;background:none;margin:0;padding:3px;cursor:pointer;
width:46px;height:54px;display:grid;place-items:center;border-radius:12px;opacity:.7;
transition:transform .15s,opacity .15s;-webkit-tap-highlight-color:transparent}
.langs button img{display:block;width:38px;height:auto;filter:drop-shadow(0 2px 2px rgba(0,0,0,.45))}
.langs button[aria-pressed="true"]{opacity:1;transform:scale(1.14)}
.langs button:hover{opacity:1}
/* Startseite */
.hero{position:relative;isolation:isolate;overflow:hidden;min-height:calc(100vh - 36px);min-height:calc(100svh - 36px);
display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 16px 34px;
background:url("/img/beach.webp") 50% 70%/cover no-repeat}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 70%;z-index:-1;
opacity:0;transition:opacity .8s}
.hero video.on{opacity:1}
@media (min-aspect-ratio:1/1){.hero{background-position:50% 64%}.hero video{object-position:50% 64%}}
.hero .top{align-self:stretch;padding-left:0;padding-right:0}
.hero h1{margin:0}
.hero-logo{display:block;width:min(74vw,40svh,430px);height:auto;margin:-6px auto 0;
filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.pitch{margin:2px auto 0;max-width:19em;font-size:clamp(21px,6vw,36px);line-height:1.18;--o:2.5px}
.hero-asila{display:block;height:clamp(170px,31svh,400px);width:auto;margin:auto auto 0;
filter:drop-shadow(10px 8px 6px rgba(70,40,10,.35))}
.soon{display:inline-block;margin:-6px auto 0;border:solid transparent;border-width:20px 28px;
border-image:url("/img/badge.webp") 62 92 fill/20px 30px round;padding:0 6px 1px;font-size:clamp(17px,4.8vw,24px);
line-height:1.2;max-width:100%}
.wrap{width:100%;max-width:820px;margin:0 auto;padding:0 12px}
.lead{font-size:1.06em;text-align:center;margin:4px 0 10px}
.strip{display:flex;justify-content:center;align-items:flex-end;margin:10px auto 0;max-width:500px;padding:0 4%}
.strip img{width:19%;height:auto;margin:0 -2.4%;filter:drop-shadow(0 4px 4px rgba(60,30,5,.3))}
.strip img:nth-child(odd){transform:translateY(-6px)}
.cap{text-align:center;color:var(--soft);font-size:.95em;margin:4px 0 6px}
.navgrid{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.navgrid li{text-align:center}
.navgrid p{margin:2px 0 0;color:var(--soft);font-size:.95em;line-height:1.4}
.plank{display:block;border:14px solid transparent;border-image:url("/img/plank.webp") 26 fill/14px round;
padding:0 8px 2px;text-decoration:none;font-size:clamp(19px,5.2vw,23px);line-height:1.25}
.plank:hover,.plank:active{filter:brightness(1.08)}
/* Karte: Pergament im Bambusrahmen */
.card{position:relative;margin:58px 0 30px;border:26px solid transparent;
border-image:url("/img/frame.webp") 120/26px round;
background:linear-gradient(180deg,var(--card),var(--card2)) 50% 50%/calc(100% - 20px) calc(100% - 20px) no-repeat border-box}
.card>.in{margin:-4px -8px -8px;padding:0 12px 6px}
.card .plate{margin-top:-60px}
.home-page .card{margin-top:44px}
.plate{display:block;width:fit-content;max-width:100%;margin:0 auto 14px;border:16px solid transparent;
border-image:url("/img/title.webp") 30 fill/16px round;padding:1px 10px 3px;text-align:center;
font-size:clamp(21px,6.2vw,32px);line-height:1.15}
.md h2{font-family:"Titan One",system-ui,sans-serif;font-weight:400;color:var(--head);font-size:1.2rem;line-height:1.25;
margin:1.5em 0 .35em}
.md p,.md ul{margin:0 0 .85em}
.md ul{padding-left:1.25em}
.md li{margin:.2em 0}
.md a{text-underline-offset:2px;overflow-wrap:anywhere}
.md .meta{color:var(--soft);font-size:.9em;text-align:center}
.lic h2{text-align:center}
.lic .text{font-size:14.5px;line-height:1.55;border-top:2px dashed var(--rule);margin-top:10px;padding-top:12px}
.lic .text .c{text-align:center;font-weight:600}
.nf{text-align:center}
.nf .plank{display:inline-block;margin:6px auto 4px}
/* Fuss */
.foot{margin-top:auto;position:relative;background:linear-gradient(#3b200e,#22120a);color:#f1dfc2;text-align:center;
padding:26px 16px calc(20px + env(safe-area-inset-bottom));font-size:15px}
.foot::before{content:"";position:absolute;left:0;right:0;top:-18px;height:22px;
background:url("/img/bamboo.webp") 0 0/auto 100% repeat-x}
.foot .studio img{display:block;height:26px;width:auto;margin:0 auto 12px}
.foot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;margin:0 auto 10px;max-width:640px}
.foot a{color:#ffd98a;text-decoration:none;padding:4px 0}
.foot a:hover,.foot a[aria-current="page"]{text-decoration:underline;text-underline-offset:3px}
.foot .copy{margin:6px 0 0;opacity:.8}
@media (min-width:600px){
.navgrid{grid-template-columns:1fr 1fr}
.card{border-width:34px;border-image-width:34px;
background-size:calc(100% - 26px) calc(100% - 26px)}
.card>.in{margin:-7px -11px -11px;padding:0 22px 10px}
.card .plate{margin-top:-69px}
.top{padding-left:20px;padding-right:20px}
.hero .top{padding-left:4px;padding-right:4px}
.mini-logo img{height:84px}
.langs button{width:52px;height:60px}
.langs button img{width:44px}
body{font-size:17px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.plate .w70{font-size:min(1em,calc((100vw - 140px) / 7.0))}.plank .w70{font-size:min(1em,calc((100vw - 132px) / 7.0))}.soon .w70{font-size:min(1em,calc((100vw - 108px) / 7.0))}
.plate .w75{font-size:min(1em,calc((100vw - 140px) / 7.5))}.plank .w75{font-size:min(1em,calc((100vw - 132px) / 7.5))}.soon .w75{font-size:min(1em,calc((100vw - 108px) / 7.5))}
.plate .w80{font-size:min(1em,calc((100vw - 140px) / 8.0))}.plank .w80{font-size:min(1em,calc((100vw - 132px) / 8.0))}.soon .w80{font-size:min(1em,calc((100vw - 108px) / 8.0))}
.plate .w85{font-size:min(1em,calc((100vw - 140px) / 8.5))}.plank .w85{font-size:min(1em,calc((100vw - 132px) / 8.5))}.soon .w85{font-size:min(1em,calc((100vw - 108px) / 8.5))}
.plate .w90{font-size:min(1em,calc((100vw - 140px) / 9.0))}.plank .w90{font-size:min(1em,calc((100vw - 132px) / 9.0))}.soon .w90{font-size:min(1em,calc((100vw - 108px) / 9.0))}
.plate .w125{font-size:min(1em,calc((100vw - 140px) / 12.5))}.plank .w125{font-size:min(1em,calc((100vw - 132px) / 12.5))}.soon .w125{font-size:min(1em,calc((100vw - 108px) / 12.5))}
.plate .w130{font-size:min(1em,calc((100vw - 140px) / 13.0))}.plank .w130{font-size:min(1em,calc((100vw - 132px) / 13.0))}.soon .w130{font-size:min(1em,calc((100vw - 108px) / 13.0))}
.plate .w135{font-size:min(1em,calc((100vw - 140px) / 13.5))}.plank .w135{font-size:min(1em,calc((100vw - 132px) / 13.5))}.soon .w135{font-size:min(1em,calc((100vw - 108px) / 13.5))}
@media (min-width:600px){.plate .w70{font-size:min(1em,calc((min(100vw, 820px) - 230px) / 7.0))}.plank .w70{font-size:min(1em,calc((min(50vw, 410px) - 112px) / 7.0))}.plate .w75{font-size:min(1em,calc((min(100vw, 820px) - 230px) / 7.5))}.plank .w75{font-size:min(1em,calc((min(50vw, 410px) - 112px) / 7.5))}.plate .w80{font-size:min(1em,calc((min(100vw, 820px) - 230px) / 8.0))}.plank .w80{font-size:min(1em,calc((min(50vw, 410px) - 112px) / 8.0))}.plate .w85{font-size:min(1em,calc((min(100vw, 820px) - 230px) / 8.5))}.plank .w85{font-size:min(1em,calc((min(50vw, 410px) - 112px) / 8.5))}.plate .w90{font-size:min(1em,calc((min(100vw, 820px) - 230px) / 9.0))}.plank .w90{font-size:min(1em,calc((min(50vw, 410px) - 112px) / 9.0))}.plate .w125{font-size:min(1em,calc((min(100vw, 820px) - 230px) / 12.5))}.plank .w125{font-size:min(1em,calc((min(50vw, 410px) - 112px) / 12.5))}.plate .w130{font-size:min(1em,calc((min(100vw, 820px) - 230px) / 13.0))}.plank .w130{font-size:min(1em,calc((min(50vw, 410px) - 112px) / 13.0))}.plate .w135{font-size:min(1em,calc((min(100vw, 820px) - 230px) / 13.5))}.plank .w135{font-size:min(1em,calc((min(50vw, 410px) - 112px) / 13.5))}}