:root{
/* Design Tokens */
	--color-text: #373775; /* Navy text */
  	--wsu-navy:#0d2b5b;   /* navyblau */
	--color-blue: #1f1fed; /* Surface blue */
	--color-red: #ff0000;
	--color-white: #ffffff;
	--color-bg: #f8f9ff;
	--radius: 16px;
	--shadow: 0 6px 24px rgba(31,31,237,0.12);
	--space: 12px;
  	--bar-height:64px;
  	--content-max:1400px;
  	--font-brand: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  	--small-screen: 520px;
  	--normal-screen: 521px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0; font-family: system-ui, Segoe UI, Roboto, Arial, sans-serif;
color:var(--color-text); background:var(--color-bg);
}

body.layout-mobile {
  max-width: 100%;
  margin: 0;
  background: var(--color-bg); 
}

/* Für die zwei Ausnahmen: darf breit sein und z.B. ein Grid nutzen */
body.layout-wide {
  /* breite Flächen erlauben; z.B. bis 1400px */
  max-width: 1400px;
  margin: 0 auto;
  padding-inline: 12px;
  background: var(--color-bg); 
}

/* Generell: mobil-first, dann bei Platz mehr Luft geben */
@media (min-width: 640px) {
  body.layout-mobile {
    padding-inline: 8px;
  }
}

.viewport{
  /* „Geräte“-Breite: für hochkantige Mobile-Ansicht */
  width: 100%;
  max-width: 430px;                  /* typische Phone-Breite */
  margin: 0 auto;                    /* zentrieren */
  background: var(--color-white);
  min-height: 100dvh;                /* volle Höhe */
  box-shadow: var(--shadow);         /* dezenter Schatten */
  border-radius: 16px;               /* weiche Kanten */
  overflow: hidden; 
}

/* Layout für die zwei Ausnahmen: Rahmen entfällt, volle Arbeitsbreite */
.viewport.viewport-wide{
  max-width: 100%;
  border-radius: 0;
  box-shadow: none;
}

img{max-width:100%; height:auto;}


/* Layout */
.app{max-width:1100px; margin:20px auto; padding:0 16px}
.grid{display:grid; gap:16px}
.grid.two{grid-template-columns: repeat(2, minmax(0,1fr))}
.grid.three{grid-template-columns: repeat(3, minmax(0,1fr))}
@media (max-width: 900px){ .grid.two, .grid.three{grid-template-columns:1fr} }


.card{background:var(--color-white); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px}
.card-title{margin:0 0 8px 0}
.muted{color:#6b6ba6}
.row{display:flex; align-items:center}
.row.gap{gap:10px}
.chip{padding:4px 10px; background:rgba(31,31,237,.08); border-radius:999px; font-size:.9rem}


.btn{border:none; border-radius:12px; padding:8px 12px; cursor:pointer; font-weight:600}
.btn-white{background:var(--color-white); color:var(--color-text); box-shadow:var(--shadow)}
.btn-blue{background:var(--color-blue); color:var(--color-white)}
.btn-red{background:var(--color-red); color:var(--color-white)}
.btn:disabled{opacity:.6; cursor:not-allowed}


.table{width:100%; border-collapse:separate; border-spacing:0 8px}
.table th{ text-align:left; font-size:.9rem; color:#5a5aa0; cursor:pointer}
.table td,.table th{ padding:10px 12px}
.tr{ background:var(--color-white); box-shadow:var(--shadow)}


.field{display:flex; flex-direction:column; gap:8px; margin:8px 0}
.field input, .field select{padding:10px 12px; border:1px solid #d7d7ff; border-radius:12px}


.modal{border:none; padding:0}
.modal::backdrop{background:rgba(0,0,0,.35)}

@media (max-width:480px){
  :root{ --bar-height:56px; }
}

/* (Optional) Reset/Utility-Auszug */
* { box-sizing: border-box; }
img { max-width: 100%; height: auto; display:block; }
button { font: inherit; }