/* ======================= BASELINE: FULL HD (1920×1080) ======================= */
:root {
  /* Farben / Theme */
  --bg: #20362c;
  --bg-2: #2e4e41;
  --surface: #264a3d;
  --surface-2: #2d5244;
  --ink: #f3f7f4;
  --muted: #cfe2d9;
  --link: #c6f0dc;
  --primary: #418566;
  --primary-2: #356855;
  --accent: #e6c37d;
  --ring: #456a59;
  --ring-strong: #558a73;

  /* Spacing / Layout */
  --space-0: 4px;
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 18px;
  --space-5: 22px;
  --radius-xl: 16px;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 20%);
  --shadow-lg: 0 12px 26px rgb(0 0 0 / 22%);

  /* BASELINE Breiten & Typo (für 1920×1080) */
  --container-w: 1080px;            /* schmal & ruhig auf FHD */
  --fs-base: clamp(15px, 1vw, 16px);/* auf FHD ≈ 16px */

  /* Header/Footer Größen (Baseline) */
  --hdr-min-h: 60px;
  /* --footer-h: nicht mehr nötig ohne fixed Footer */
}

* { box-sizing: border-box }
html, body { height: 100% }

/* Hintergrund */
html {
  background:
    radial-gradient(1100px 520px at 50% -140px, rgba(255, 236, 200, .06), transparent 65%),
    radial-gradient(900px 520px at 100% 100%, rgba(230, 195, 125, .07), transparent 60%),
    radial-gradient(900px 520px at 0% 100%, rgba(140, 205, 170, .05), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  background-attachment: fixed;
}

/* Basis-Typo */
body {
  margin: 0;
  color: var(--ink);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Inter, "Noto Sans", sans-serif;
  font-size: var(--fs-base);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  display: flex;
  flex-direction: column;
  min-height: 100vh;

  /* Kein reservierter Platz mehr für Footer, da nicht fixiert */
  padding-bottom: 0;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 160px rgba(0, 0, 0, .15);
}

main { flex: 1 0 auto; display: block }

::selection { background: color-mix(in oklab, var(--link) 35%, white); color: #102019; }
img { max-width: 100%; height: auto; display: block }

h1, h2, h3 { line-height: 1.22; letter-spacing: .2px; margin: 0 }
h1 { font-size: clamp(22px, 1.6vw, 26px); margin-bottom: 2px }
h2 { font-size: clamp(18px, 1.2vw, 20px); margin-bottom: 6px }
h3 { font-size: clamp(16px, 1.05vw, 18px); margin: var(--space-1) 0 var(--space-2) }

p { margin: 0 0 var(--space-2) }
a { color: var(--link); text-decoration: none }
a:hover { text-decoration: underline }

:focus-visible {
  outline: 3px solid color-mix(in oklab, var(--link) 45%, white);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Container */
.container {
  width: min(97vw, var(--container-w));
  margin-inline: auto;
  padding-inline: var(--space-2);
}

/* ===== Header (Baseline kompakt) ===== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: linear-gradient(180deg, color-mix(in oklab, var(--surface-2) 88%, white 12%), var(--surface-2));
  border-bottom: 1px solid color-mix(in oklab, var(--ring) 70%, black 30%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
  backdrop-filter: saturate(130%) blur(8px);
}

.header-inner {
  min-height: var(--hdr-min-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); padding-block: 8px;
}

.brand { display: inline-flex; align-items: center; gap: var(--space-3); color: inherit; text-decoration: none }
.brand img {
  width: 48px; height: 48px; border-radius: 12px; object-fit: cover;
  background: #21483b; border: 1px solid var(--ring);
  box-shadow: 0 6px 14px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06);
}
.brand-text { display: flex; flex-direction: column }
.sub { color: var(--muted); margin: -2px 0 0; font-size: .95rem; white-space: nowrap }

/* Nav-Pills kompakt */
.main-nav { display: flex; gap: 8px; align-items: center; flex-wrap: wrap }
.main-nav a {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; padding: 0 10px; color: var(--ink);
  border-radius: 10px; position: relative; opacity: .95;
  transition: background .15s, opacity .15s, transform .06s;
}
.main-nav a:hover { background: color-mix(in oklab, var(--primary-2) 80%, black 20%); text-decoration: none; opacity: 1 }
.main-nav a:active { transform: translateY(1px) }
.main-nav a[aria-current="page"]::after{
  content:""; position:absolute; left:10px; right:10px; bottom:6px; height:2px;
  background: color-mix(in oklab, var(--link) 70%, white 30%); border-radius:2px;
}

.pad-top { padding-top: 16px }

/* ===== Cards (Baseline kompakt) ===== */
.card {
  display: flex; flex-direction: column;
  min-height: 220px; padding: 14px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--surface) 92%, #fff7df 8%), color-mix(in oklab, var(--surface) 96%, #fff7df 4%));
  border: 1px solid var(--ring); border-radius: var(--radius-xl);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), var(--shadow-sm);
  transition: transform .16s, box-shadow .16s, border-color .16s, background .16s;
}
.card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
  border-color: var(--ring-strong);
  background: linear-gradient(180deg, color-mix(in oklab, var(--surface) 86%, #fff2cc 14%), color-mix(in oklab, var(--surface) 92%, #fff2cc 8%));
}

.pill {
  display:inline-block; background: color-mix(in oklab, var(--primary-2) 78%, #000 22%);
  color: var(--muted); padding: 3px 9px; border-radius: 999px; font-size: .88rem; border: 1px solid var(--ring);
}
.pill.soft { background: color-mix(in oklab, var(--primary-2) 65%, #000 35%) }

.list { list-style:none; margin: var(--space-1) 0 0; padding:0 }
.card .card-actions{ display:none !important } /* falls vorhanden */

/* Start-Layout */
.grid-two{
  display:grid;
  grid-template-columns: minmax(420px, 1.45fr) minmax(360px, 1fr);
  gap: var(--space-5);
  margin-block: var(--space-2) var(--space-4);
}
@media (max-width:980px){ .grid-two{ grid-template-columns: 1fr } }

/* ===== Footer (NICHT fixiert) ===== */
.footer{
  margin-top: var(--space-3);
  padding: var(--space-3) 0 var(--space-2);
  border-top: 1px solid var(--ring);
  background: linear-gradient(0deg, #1f3228 0%, var(--bg-2) 100%);
  color: var(--ink);
  flex-shrink: 0;
}

/* Falls die Klasse im HTML bleibt, entkoppeln wir sie hier explizit vom Fixing */
.footer-fixed{
  position: static;            /* <— war fixed; jetzt normaler Block */
  left: auto; right: auto; bottom: auto;
  z-index: auto;
  /* Der Rest (Border/Shadow) kann bleiben – sieht auch „nicht fixed“ gut aus */
}
.footer-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3);
}
.footer strong{ display:block; margin-bottom:6px; color:var(--ink) }
.footer a{ color:var(--link) } .footer a:hover{ text-decoration: underline }
.muted{ color:var(--muted) } .tiny{ font-size:.9rem }

/* ===== Responsive Kleinkram ===== */
@media (max-width:560px){
  .brand img{ width:44px; height:44px }
  .main-nav a{ height:34px; padding:0 9px }
}

/* ===== Takvım / Gebetszeiten (Baseline kompakt) ===== */
#pt-card{ position:relative; overflow:hidden }
#pt-card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(540px 160px at 14% -60px, rgba(230, 195, 125, .08), transparent 72%),
    radial-gradient(420px 120px at 100% 110%, rgba(140, 205, 170, .06), transparent 70%);
}
#pt-dates{ font-weight:600; letter-spacing:.2px }

/* Headerleiste */
.pt-next{
  display:flex; align-items:flex-end; justify-content:space-between; gap:10px;
  padding:8px 10px; border:1px solid var(--ring); border-radius:12px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--surface) 86%, #fff2cc 14%), color-mix(in oklab, var(--surface) 94%, #fff2cc 6%));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  margin-bottom:10px;
}
.pt-next-left{ text-align:center; flex:1 }
.pt-next-title{ color:var(--muted); font-weight:700; font-size:.9rem; margin-bottom:3px }
.pt-next-name { color:var(--ink); font-weight:800; font-size:1.14rem; line-height:1.1 }
.pt-next-time { color:var(--ink); font-weight:700; font-size:.98rem; opacity:.95 }

/* Countdown-Boxen rechts */
.pt-next-ct{ display:flex; gap:6px; align-items:flex-end }
.ct-box{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:9px;
  background: rgba(255,255,255,.12); color:#fff; font-weight:800; letter-spacing:1px;
}
.ct-box span{ font-size:16px; line-height:1 }
.ct-box small{ font-size:10px; opacity:.7; font-weight:700; letter-spacing:1.1px }

/* Zeitenliste */
#pt-list{
  margin-top: var(--space-2);
  display:grid; grid-template-columns: 1fr auto;
  column-gap:12px; row-gap:6px; align-items:center;
  list-style:none; padding:0; font-variant-numeric: tabular-nums;
}
#pt-list li{ display: contents }
#pt-list li strong{ color:var(--muted); font-weight:600 }
#pt-list li .t{
  justify-self:end; padding:2px 6px; border-radius:8px;
  background: color-mix(in oklab, var(--surface) 72%, white 28%);
  border:1px solid var(--ring); min-width:58px; text-align:center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
#pt-list li.is-now strong{ color:#fff; font-weight:800 }
#pt-list li.is-now .t{
  background: color-mix(in oklab, var(--accent) 88%, white 12%);
  color:#1b140b; border-color: color-mix(in oklab, var(--accent) 62%, black 38%);
}
#pt-list[aria-busy="true"]{ opacity:.7 }

/* Startseite: Wenn nur die Takvım-Card da ist → einspaltig & schmal */
.grid-two:has(> :only-child){ grid-template-columns: 1fr }
body:has(#pt-card) main > .container{ width: min(88vw, 1040px) }

/* ====================== UPSCALE: ≥ 2K (z. B. 2560×1440) ===================== */
@media (min-width: 2000px){
  :root{
    --container-w: 1280px;
    --fs-base: 17px;           /* Typo + Spacing leicht größer */
    --hdr-min-h: 64px;
  }

  .brand img{ width:56px; height:56px }
  .main-nav a{ height:40px; padding:0 12px }
  .card{ padding:16px; min-height:240px }

  .pt-next{ padding:10px 12px }
  .pt-next-name{ font-size:1.24rem }
  .pt-next-time{ font-size:1.04rem }
  .ct-box{ width:38px; height:38px }
  #pt-list li .t{ min-width:64px; padding:2px 8px }

  body:has(#pt-card) main > .container{ width: min(88vw, 1180px) }
}

/* ====================== UPSCALE: ≥ 4K (3840×2160 und mehr) =================== */
@media (min-width: 3200px){
  :root{
    --container-w: 1500px;
    --fs-base: 18px;           /* gut lesbar auf 4K */
    --hdr-min-h: 68px;
  }

  .brand img{ width:64px; height:64px }
  .main-nav a{ height:44px; padding:0 14px }
  .card{ padding:20px; min-height:260px }

  .pt-next{ padding:12px 14px }
  .pt-next-name{ font-size:1.35rem }
  .pt-next-time{ font-size:1.12rem }
  .ct-box{ width:42px; height:42px }
  #pt-list li .t{ min-width:70px; padding:3px 10px }

  body:has(#pt-card) main > .container{ width: min(86vw, 1320px) }
}

/* ===== Fallback ohne :has() (wenn nötig)
.page-start .grid-two { grid-template-columns: 1fr }
.page-start main > .container { width: min(88vw, 1040px) }
*/

/* Bewegung reduzieren */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

.grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: var(--space-4);           /* Abstand zwischen den Cards */
  align-items: start;
}
.card{ overflow: hidden; }       /* Rundungen schneiden nichts ab */

/* Kompakte Karten-Variante für kurze Inhalte */
.card.compact{
  min-height: unset;
  padding-top: 10px;
  padding-bottom: 10px;
}
.card.compact .list{ margin-top: 6px; }



/* ===== Gebetszeiten-Header: zentriert & prominenter ===== */
.pt-next{
  display: flex;
  flex-direction: column;        /* Countdown unter den Titelblock */
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--ring);
  border-radius: 12px;
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--surface) 86%, #fff2cc 14%),
    color-mix(in oklab, var(--surface) 94%, #fff2cc 6%)
  );
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.pt-next-left{
  text-align: center;
  flex: 0 0 auto;                /* keine Dehnung, wir zentrieren alles */
}

.pt-next-title{
  color: var(--muted);
  font-weight: 700;
  font-size: .95rem;
  margin-bottom: 2px;
}

.pt-next-name{
  color: var(--ink);
  font-weight: 800;
  font-size: 1.5rem;             /* größer als vorher */
  line-height: 1.1;
  letter-spacing: .2px;
}

.pt-next-time{
  color: var(--ink);
  font-weight: 700;
  font-size: 1.15rem;
  opacity: .95;
}

/* Countdown mittig, leicht größer */
.pt-next-ct{
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.ct-box{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 52px;
  border-radius: 12px;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-weight: 800;
  letter-spacing: 1px;
  border: 1px solid color-mix(in oklab, var(--ring) 70%, black 30%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.ct-box span{ font-size: 22px; line-height: 1; }
.ct-box small{ font-size: 10px; opacity: .75; font-weight: 700; letter-spacing: 1.1px }

/* Upscale für große Screens optional */
@media (min-width: 2000px){
  .pt-next-name{ font-size: 1.7rem; }
  .pt-next-time{ font-size: 1.2rem; }
  .ct-box{ width: 56px; height: 58px; }
  .ct-box span{ font-size: 24px; }
}



/* === Takvım-Karte: Gesamtbox schmaler & kompakter === */

/* Einfache Stellschraube: Breite der großen Box (Card) begrenzen */
:root { --pt-card-max: 820px; }           /* bei Bedarf auf 760–880 anpassen */

#pt-card{
  max-width: var(--pt-card-max);
  margin-inline: auto;                    /* zentrieren */
}

/* Die Inhalte (Header + Liste) folgen automatisch; Liste bleibt dicht beisammen */
#pt-list{
  grid-template-columns: auto max-content; /* Labels und Zeiten näher zusammen */
  column-gap: 10px;
}

/* Vertikal etwas enger, damit der Footer im ersten View bleibt */
#pt-card.card{
  padding-top: 10px;
  padding-bottom: 10px;
}

.pt-next{                                  /* Countdown-Block kompakter */
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
}
.ct-box{
  width: 44px;
  height: 46px;
}
.ct-box span{ font-size: 18px; }

/* Auf kleineren/engeren Laptops optional noch schmaler */
@media (max-width: 1400px){
  :root { --pt-card-max: 1000px; }
}

/* Utility: Container rechts ausrichten, ohne Layout zu sprengen */
.actions-right{
  display:flex;
  justify-content:flex-start;   /* oder flex-end, wenn du ihn rechts haben willst */
  margin-top: var(--space-2);
  padding-inline: 0;            /* kein doppeltes Padding in Cards */
  width: 100%;
}

/* Reusable Button – nutzt deine Theme-Variablen */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:36px; padding:0 12px; min-width:140px;
  border-radius:10px; border:1px solid var(--ring);
  background: color-mix(in oklab, var(--surface) 90%, #fff 10%);
  color: var(--ink); font-weight:600; text-decoration:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), var(--shadow-sm);
  transition: background .15s, border-color .15s, transform .06s, box-shadow .15s;
  white-space: nowrap;
}
.btn:hover{
  background: color-mix(in oklab, var(--primary-2) 78%, #000 22%);
  border-color: var(--ring-strong);
  text-decoration:none;
}
.btn:active{ transform: translateY(1px); }

/* Akzent-Variante nur für diesen Link */
.btn-accent{
  background: color-mix(in oklab, var(--accent) 86%, white 14%);
  color:#1b140b;
  border-color: color-mix(in oklab, var(--accent) 62%, black 38%);
}
.btn-accent:hover{
  background: color-mix(in oklab, var(--accent) 92%, white 8%);
}