/* Jeton-Museum – neues Design (hell, frisch, modern). Wird NACH app.css geladen. */
@font-face{font-family:'Inter';font-weight:400;font-style:normal;font-display:swap;src:url('/fonts/inter-Regular.woff2') format('woff2')}
@font-face{font-family:'Inter';font-weight:500;font-style:normal;font-display:swap;src:url('/fonts/inter-Medium.woff2') format('woff2')}
@font-face{font-family:'Inter';font-weight:600;font-style:normal;font-display:swap;src:url('/fonts/inter-SemiBold.woff2') format('woff2')}
@font-face{font-family:'Inter';font-weight:700;font-style:normal;font-display:swap;src:url('/fonts/inter-Bold.woff2') format('woff2')}

:root{
  --ink:#10263A; --slate:#4A6275; --teal:#0E9AA7; --teal-dark:#0B7E89;
  --bg:#D6E2E9; --card:#FFFFFF; --line:#BFD0DB;
}
html{background:var(--bg)}
body{
  font-family:'Inter',-apple-system,'Segoe UI',Roboto,Arial,sans-serif !important;
  background:var(--bg) !important; color:var(--ink) !important;
  padding-top:72px !important; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Inter',-apple-system,'Segoe UI',Roboto,Arial,sans-serif; color:var(--ink); font-weight:700; letter-spacing:-.01em}
h1{font-size:34px; margin:24px 0 18px}
a{color:var(--teal-dark)} a:hover,a:focus{color:var(--teal); text-decoration:none}
.container.content{padding-top:8px; padding-bottom:40px}

/* ---------- Menü ---------- */
.navbar-default{
  background:#fff !important; border:0 !important; border-bottom:1px solid var(--line) !important;
  box-shadow:0 2px 14px rgba(16,38,58,.06); min-height:64px;
}
.navbar-default .navbar-brand{
  font-weight:700; font-size:20px; letter-spacing:-.01em; color:var(--ink) !important;
  height:64px; line-height:34px; padding:15px 15px; display:flex; align-items:center;
}
.navbar-default .navbar-brand:before{
  content:''; width:12px; height:12px; border-radius:50%; background:var(--teal);
  box-shadow:0 0 0 4px rgba(14,154,167,.18); margin-right:10px; display:inline-block;
}
.navbar-default .navbar-nav>li>a{
  color:var(--ink) !important; font-weight:500; font-size:15px; padding-top:22px; padding-bottom:22px;
  border-bottom:3px solid transparent; transition:color .15s,border-color .15s;
}
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>.open>a{
  color:var(--teal-dark) !important; background:transparent !important; border-bottom-color:var(--teal);
}
.navbar-default .navbar-toggle{border-color:var(--line); margin-top:15px}
.navbar-default .navbar-toggle .icon-bar{background:var(--ink)}
.navbar-default .navbar-toggle:hover,.navbar-default .navbar-toggle:focus{background:#eef4f7}
.navbar-default .navbar-collapse{border-color:var(--line)}
@media (max-width:767px){
  .navbar-default .navbar-nav>li>a{padding:12px 15px; border-bottom:0; border-left:3px solid transparent}
  .navbar-default .navbar-nav>li>a:hover{border-left-color:var(--teal)}
}

/* ---------- Startseite ---------- */
.page-home .container.content>.row>.col-sm-10{width:100%}
.page-home .container.content>.row>.col-sm-2{display:none}
.hero{margin:6px 0 30px; border-radius:20px; overflow:hidden; box-shadow:0 10px 34px rgba(16,38,58,.14); background:#fff}
.hero img{display:block; width:100%; height:auto}
.intro{max-width:760px; margin:0 auto 34px; text-align:center; color:#2F4659; font-size:18px}
.intro strong{color:var(--ink)}
.tiles{display:flex; flex-wrap:wrap; margin:0 -12px}
.tiles>.tile-col{padding:0 12px; margin-bottom:24px; width:33.3333%}
@media (max-width:991px){.tiles>.tile-col{width:50%}}
@media (max-width:540px){.tiles>.tile-col{width:100%}}
.tile{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:360px; height:100%;
  background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden;
  color:var(--ink) !important; text-decoration:none !important;
  box-shadow:0 6px 20px rgba(16,38,58,.14); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
a.tile:hover,a.tile:focus{transform:translateY(-5px); box-shadow:0 16px 34px rgba(16,38,58,.14); border-color:var(--teal)}
.tile-img{position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; opacity:.62; filter:saturate(1); z-index:0}
.tile-body{position:relative; z-index:1; display:block; padding:44px 22px 22px; background:linear-gradient(to top,rgba(255,255,255,.94) 66%,rgba(255,255,255,0))}
.tile-body h2{font-size:21px; margin:0 0 6px}
.tile-body p{margin:0 0 14px; color:var(--slate); font-size:15px; line-height:1.5}
.tile-go{display:inline-block; font-weight:600; font-size:15px; color:var(--teal-dark)}
.tile-go:after{content:' →'}
a.tile:hover .tile-go{color:var(--teal)}
.tile.is-soon{opacity:.92}
.tile.is-soon .tile-img{filter:saturate(.85)}
.badge-soon{display:inline-block; font-size:13px; font-weight:600; color:var(--slate); background:#EAF1F5; border:1px solid var(--line); border-radius:999px; padding:3px 12px}

/* ---------- Fuß (hell, ruhig, kleine Schrift) ---------- */
.site-footer{margin-top:20px; background:#fff; border-top:1px solid var(--line); padding:34px 0 22px; font-size:14px; line-height:1.55; color:var(--slate)}
.sf-grid{display:flex; flex-wrap:wrap; margin:0 -15px}
.sf-col{width:25%; padding:0 15px; margin-bottom:22px}
@media (max-width:991px){.sf-col{width:50%}}
@media (max-width:540px){.sf-col{width:100%; margin-bottom:18px}}
.sf-title{font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--teal-dark); margin-bottom:10px}
.sf-list{list-style:none; margin:0; padding:0}
.sf-list li{margin-bottom:7px; color:var(--slate)}
.site-footer a{color:var(--ink); text-decoration:none}
.site-footer a:hover{color:var(--teal-dark); text-decoration:underline}
.sf-list .fa{color:var(--teal-dark); font-size:17px; vertical-align:-1px; margin-right:4px}
.sf-bottom{border-top:1px solid var(--line); padding-top:16px; font-size:13px; color:#7B8FA0}

/* ---------- Allgemeine Kleinigkeiten ---------- */
.btn-primary{background:var(--teal); border-color:var(--teal-dark)} .btn-primary:hover{background:var(--teal-dark)}
.jetons-nav a{color:var(--teal-dark)}
.table>thead>tr>th{border-bottom:2px solid var(--line); color:var(--ink)}
.alert-danger{border-radius:12px}

/* Fuß: verschachtelte Zeile nicht über den Rand hinausragen lassen */
footer.footer .row .row{clear:both; float:none; width:100%; margin:0; padding:10px 15px 0; text-align:left}
footer.footer .row .row p{margin:0}
html,body{overflow-x:hidden}