:root{
  --s: 1;
  --u: 8px;

  /* Typo */
  --fs-xs: calc(12px * var(--s));
  --fs-sm: calc(14px * var(--s));
  --fs-md: calc(16px * var(--s));
  --fs-nav: calc(18px * var(--s));
  --fs-lg: calc(20px * var(--s));
  --fs-xl: calc(28px * var(--s));

  /* Line-heights */
  --lh-xs: calc(var(--fs-xs) * 1.45);
  --lh-sm: calc(var(--fs-sm) * 1.45);
  --lh-md: calc(var(--fs-md) * 1.45);
  --lh-lg: calc(var(--fs-lg) * 1.25);
  --lh-xl: calc(var(--fs-xl) * 1.15);

  /* Border */
  --border: clamp(1px, calc(1px * var(--s)), 2px);

  /* Heights */
  --header-h: calc(64px * var(--s));
  --footer-h: calc(48px * var(--s));

  /* Spacing */
  --sp-1: calc(var(--u) * 1 * var(--s));
  --sp-2: calc(var(--u) * 2 * var(--s));
  --sp-3: calc(var(--u) * 3 * var(--s));
  --sp-4: calc(var(--u) * 4 * var(--s));

  --lang-col: 100px;
  --lang-gap: calc(10px * var(--s));

  /* === Colors (Light, friendly) === */
  --bg: #F6F8FC;
  --surface: #FFFFFF;
  --surface-2: #EEF2F9;

  --text: #0F172A;
  --text-2: #475569;

  --line: rgba(15,23,42,.12);
  --shadow: 0 18px 60px rgba(15,23,42,.10);

  --brand: #2563EB;
  --brand-2: #22C55E;

  --header-bg: rgba(255,255,255,.75);
  --header-text: var(--text);

  --footer-bg: #0B1220;
  --footer-text: rgba(255,255,255,.92);
  --footer-line: rgba(255,255,255,.14);

  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  --navResp0: flex;
  --navResp1: none;
}
/* 1) Default: Hinweis aus */
.rotate-warning { display: none; }
header, footer, main { display: block; }

/* 2) Handy quer: zu wenig Höhe -> blocken */
@media (orientation: landscape) and (max-height: 519px) {
  .rotate-warning {
    display: flex;
    position: fixed;
    inset: 0;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    font-size: var(--fs-lg);
    font-weight: 800;
    color:red;
  }
  header, footer, main { display: none; }
}

/* 3) Foldable/Tablet quer: genug Höhe -> wieder erlauben */
@media (orientation: landscape) and (min-height: 520px) {
  .rotate-warning { display: none; }
  header, footer, main { display: block; }
}
/* Responsive Scaling */
@media (max-width: 520px){
  :root{ --navResp0: none; --navResp1: flex;}
}
@media (max-width: 768px){
  :root{ --s: 0.92; --max: 1280px;}
}
@media (min-width: 769px){
  :root{ --s: 1; --max: 1280px; --navResp0: flex; --navResp1: none;}
}

@media (min-width: 1921px){
  :root{ --s: 1.15; --max: 1360px; }
}
@media (min-width: 2560px){
  :root{ --s: 1.25; --max: 1500px;}
}
@media (min-width: 3000px){
  :root{ --s: 1.35; --max: 1640px;}
}
@media (min-width: 3840px){
  :root{ --s: 1.5; --max: 1920px;}
}
@media (min-width: 5120px){
  :root{ --s: 1.7; }
}
@media (min-width: 6000px){
  :root{ --s: 2; }
}

/* Base */
a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: none; }
html, body { overflow: hidden;}
body{
  font-size: var(--fs-md);
  line-height: var(--lh-md);
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  height: 100dvh;
}

h1{ font-size: var(--fs-xl); line-height: var(--lh-xl); }


/* Header */
header{
  font-size: var(--fs-lg);
  line-height: var(--lh-lg);
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  z-index: 1000;
  border-bottom: var(--border) solid #4263bf;
  background: var(--header-bg);
  color: var(--header-text);
  backdrop-filter: blur(10px);

}

/* Footer */
footer{
  font-size: var(--fs-nav);
  line-height: var(--lh-md);
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--footer-h);
  z-index: 1000;
  background: #4263bf;
  color: var(--footer-text);
  text-decoration: none;
}

/* Layout */
main{
  height: calc(100dvh - (var(--header-h) + var(--footer-h)));
  margin-top: var(--header-h);
/*  padding-bottom: var(--footer-h);*/
  overflow-y: auto;
}

.header-inner{
  max-width: var(--max);
  margin: 0 auto;
  height: var(--header-h);
  display: var(--navResp0);
  align-items: center;
  justify-content: center;
}
.footer-inner{
  max-width: var(--max);
  margin: 0 auto;
  height: var(--footer-h);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.headerNav{display:flex;align-items: center;height:var(--header-h); padding: 0 calc(10px * var(--s));background: #fff;text-decoration: none;}
.headerNavAct{display:flex;align-items: center;height:var(--header-h); padding: 0 calc(10px * var(--s));background: #4263bf;text-decoration: none;color: var(--footer-text);}
.headerNav:hover{background: rgba(0,0,0,.05); color: var(--header-text);}
.footerNavI{display:flex;align-items: center;height:var(--footer-h); padding: 0 calc(10px * var(--s));background: #4263bf;text-decoration: none;}
.footerNavActI{display:flex;align-items: center;height:var(--footer-h); padding: 0 calc(10px * var(--s));background: #fff;text-decoration: none; color: var(--header-text);}
.footerNavI:hover{background: rgba(0,0,0,.05); color: var(--header-text);}
.footerNav{display:var(--navResp0);align-items: center;height:var(--footer-h); padding: 0 calc(10px * var(--s));background: #4263bf;text-decoration: none;}
.footerNavAct{display:var(--navResp0);align-items: center;height:var(--footer-h); padding: 0 calc(10px * var(--s));background: #fff;text-decoration: none; color: var(--header-text);}
.footerNav:hover{background: rgba(0,0,0,.05); color: var(--header-text);}
/* Floating Language Button */

.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.navBar{
  position: fixed;
  z-index: 1100;
  top: calc(16px * var(--s));
  right: calc(16px * var(--s));
  height: calc(var(--header-h) - (32px * var(--s)));
  width: calc(var(--header-h) - (32px * var(--s)));
  color:#4263bf;
  cursor:pointer;
  display:var(--navResp1);
  align-items: center;
}
.icon{

}
.brand{
  position: fixed;
  top: calc(2px * var(--s));
  left: calc(2px * var(--s));
  height: calc(var(--header-h) - (4px * var(--s)));
  min-width: calc(86px * var(--s));
  z-index: 1100;
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  background-image:url("/static/photaro_.svg");
  background-repeat: no-repeat;
  background-size: auto 80%;
  background-position: 10px center;
  padding-left: calc(60px * var(--s));
  font-size: var(--fs-xl);
  color: rgba(15,23,42,.80);
}
.brand:hover{
  position: fixed;
  top: calc(1px * var(--s));
  left: calc(1px * var(--s));
  height: calc(var(--header-h) - (2px * var(--s)));
  font-weight: 800;
  background-size: auto 100%;
  padding-left: calc(70px * var(--s));
}

.lang-fab{
  position: fixed;
  min-width: calc(5px * var(--s));
  z-index: 1100;
  display: inline-flex;
  align-items: center;
  gap: calc(6px * var(--s));
  padding: calc(10px * var(--s));
  border-radius: calc(14px * var(--s));
  border: var(--border) solid var(--line);
  background: rgb(255,255,255);
  color: var(--text);
  cursor: pointer;
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  line-height: 1;
}

.lang-fab:hover{
  background: rgba(0,0,0,.05);
  border-color: rgba(15,23,42,.16);
  transform: translateY(calc(-1px * var(--s)));
}

.lang-fab:focus-visible{
  outline: none;
  border-color: rgba(37,99,235,.45);
  box-shadow: 0 0 0 calc(2px * var(--s)) rgba(37,99,235,.18), var(--shadow);
}

.lang-fab .flag{
  width: calc(22px * var(--s));
  height: calc(15px * var(--s));
  display: block;
}
.lang-fab .flag img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.lang-fab .code{
  font-size: var(--fs-xs);
  font-weight: 900;
  letter-spacing: .10em;
  color: rgba(15,23,42,.80);
}
.lang-fab .chev{
  font-size: var(--fs-xs);
  color: rgba(15,23,42,.80);
}

.lang-overlay{
  position: fixed;
  inset: 0;
  z-index: 2000;

  display: none;
  justify-content: flex-end;
  align-items: flex-start; /* zentriert statt top */

  padding:
    calc(12px * var(--s))
    calc(12px * var(--s))
    calc(12px * var(--s) + var(--safe-b))
    calc(12px * var(--s));

  background: rgba(15,23,42,.28);
  backdrop-filter: blur(4px);
}

.lang-overlay.open{
  display:flex;
}
/* Sheet */
.lang-sheet{
  display: flex;
  flex-direction: column;
  width: min(92vw, 420px);
  border-radius: calc(18px * var(--s));
  border: var(--border) solid rgba(15,23,42,.12);
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.95),
    rgba(238,242,249,.95)
  );
  backdrop-filter: blur(12px);
  box-shadow: 0 22px 80px rgba(15,23,42,.18);
  overflow: hidden;
  max-height: calc(100svh - 24px - var(--safe-b));
}

.lang-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: calc(14px * var(--s));
  border-bottom: var(--border) solid rgba(15,23,42,.10);
}

.lang-title{
  font-weight: 900;
  font-size: var(--fs-sm);
  color: var(--text);
}

.lang-close{
  border: var(--border) solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.8);
  color: var(--text);
  border-radius: calc(12px * var(--s));
  padding: calc(8px * var(--s)) calc(10px * var(--s));
  cursor: pointer;
}

.lang-grid{
  display: grid;
  grid-template-columns: 1fr; /* 1 Spalte */
  gap: var(--lang-gap);
  padding: calc(12px * var(--s));
  /*max-height: calc(75vh - var(--safe-b));*/
  flex: 1 1 auto;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
}

/* 2 Spalten */
.lang-grid.cols-2{
  grid-template-columns: repeat(2, minmax(var(--lang-col), 1fr));
}

/* 3 Spalten */
.lang-grid.cols-3{
  grid-template-columns: repeat(3, minmax(var(--lang-col), 1fr));
}

/* ab 600px: 2 Spalten */
@media (min-width: 600px){
  .lang-sheet{ width: min(92vw, 560px); }
  .lang-grid{
    grid-template-columns: repeat(2, minmax(var(--lang-col), 1fr));
  }
}

/* ab 1200px: 3 Spalten */
@media (min-width: 1200px){
  .lang-sheet{ width: min(92vw, 900px); }
  .lang-grid{
    grid-template-columns: repeat(3, minmax(var(--lang-col), 1fr));
  }
}

/* Mobile: kompakter (optional wie vorher) */
@media (max-width: 520px){
  .lang-fab{ bottom: calc(6px * var(--s)); left: calc(12px * var(--s)); height: calc(36px * var(--s));}
  .lang-sheet{ width: min(70vw, 560px); transform: none;}
  .lang-grid{ grid-template-columns: repeat(1, minmax(var(--lang-col), 1fr)); }
  .lang-overlay{ align-items: center;  /* statt flex-start */  }
}
@media (min-width: 521px){
  .lang-fab{ top: calc(12px * var(--s)); right: calc(12px * var(--s)); height: calc(44px * var(--s));}
}

@media (min-width: 980px){
  .lang-sheet{ width: min(92vw, 900px); }
  .lang-grid{ grid-template-columns: repeat(3, minmax(var(--lang-col), 1fr)); }
}

.lang-item{
  display:flex;
  align-items:center;
  gap: calc(10px * var(--s));
  padding: calc(12px * var(--s));
  border-radius: calc(14px * var(--s));
  border: var(--border) solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.85);
  color: var(--text);
}

.lang-item:hover{
  background: rgba(0,0,0,.05);
  border-color: rgba(15,23,42,.14);
  text-decoration: none;
}
.lang-item .f{ flex: 0 0 auto; font-size: calc(18px * var(--s)); width: calc(22px * var(--s)); height: calc(15px * var(--s)); /* 3:2 */ display: block;}
.lang-item .t{
  flex: 1 1 auto;        /* Name bekommt den Platz */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 750;
  font-size: var(--fs-sm);
}
.lang-item .c{
  flex: 0 0 auto;        /* DE darf nicht wachsen/schrumpfen */
  white-space: nowrap;
  font-weight: 900;
  letter-spacing: .10em;
  font-size: var(--fs-xs);
  color: rgba(169,182,211,.95);
}
.lang-item .f img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: calc(3px * var(--s));
}
.lang-item.is-active{
  background: linear-gradient(
    135deg,
    rgba(37,99,235,.18),
    rgba(34,197,94,.14)
  );
  border-color: rgba(37,99,235,.28);
}

.lang-foot{
  flex: 0 0 auto;
  padding: calc(12px * var(--s));
  padding-bottom: calc(12px * var(--s) + var(--safe-b));
  border-top: var(--border) solid rgba(15,23,42,.10);
}

.lang-foot .hint{
  font-size: var(--fs-xs);
  color: var(--text-2);
}

.nav-overlay{
  position: fixed;
  inset: 0;
  z-index: 2000;

  display: none;
  justify-content: flex-end;
  align-items: flex-start; /* zentriert statt top */

  padding:
    calc(12px * var(--s))
    calc(12px * var(--s))
    calc(12px * var(--s) + var(--safe-b))
    calc(12px * var(--s));

  background: rgba(15,23,42,.28);
  backdrop-filter: blur(4px);
}

.nav-overlay.open{
  display:flex;
}
/* Sheet */
.nav-sheet{
  display: flex;
  flex-direction: column;
  border-radius: calc(18px * var(--s));
  border: var(--border) solid rgba(15,23,42,.12);
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.95),
    rgba(238,242,249,.95)
  );
  backdrop-filter: blur(12px);
  box-shadow: 0 22px 80px rgba(15,23,42,.18);
  overflow: hidden;
  max-height: calc(100svh - 24px - var(--safe-b));
}
.navItem{
  display:flex;
  align-items:center;
  gap: calc(10px * var(--s));
  padding: calc(12px * var(--s));
  border: var(--border) solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.85);
  color: var(--text);
  font-weight: 400;
  font-size: var(--lh-md);
}
.navItemAct{
  background: linear-gradient(
    135deg,
    rgba(37,99,235,.18),
    rgba(34,197,94,.14)
  );
  border-color: rgba(37,99,235,.28);
}
.nav-item:hover{
  background: rgba(0,0,0,.05);
  border-color: rgba(15,23,42,.14);
  text-decoration: none;
}