/* =================================
   FOTOKLUB REGENSTAUF – STYLE.CSS
   ================================= */

:root{
  --color-primary:#368d49;
  --color-primary-hover:#368d48;
  --color-primary-light:#65be78;

  --color-border:#d9d9d9;
  --color-text:#1a1a1a;
  --color-text-soft:#666;

  --color-bg:#fdffff;
  --color-card:#ffffff;
  --color-white:#fffffd;
}


/* =========================
   RESET
   ========================= */

*,
*::before,
*::after{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family:"Titillium Web", Arial, sans-serif;
  color:var(--color-text);
  background:var(--color-bg);
  line-height:1.45;
}

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


/* =========================
   LAYOUT
   ========================= */

.container{
  width:min(1100px, calc(100% - 32px));
  margin:auto;
}

main.container{
  padding:30px 0 40px;
}


/* =========================
   TOPBAR
   ========================= */

.topbar{
  background:white;
  border-bottom:1px solid #ececec;
}

.topbar .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 0;
}

.brand-title{
  font-size:1.35rem;
  font-weight:700;
}

.brand-sub{
  font-size:.95rem;
  color:var(--color-text-soft);
}

.topnav{
  display:flex;
  gap:10px;
}


/* =========================
   CARDS
   ========================= */

.card{
  background:var(--color-card);
  border:1px solid #ebebeb;
  border-radius:18px;
  padding:24px;
  margin-bottom:24px;

  box-shadow:0 4px 8px rgba(0,0,0,0.05),
             0 8px 16px rgba(0,0,0,0.05);

  transition:box-shadow .15s ease;
}

.card:hover{
  box-shadow:0 8px 20px rgba(0,0,0,0.12);
}


/* =========================
   BUTTONS
   ========================= */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;

  padding:10px 16px;
  border-radius:18px;

  border:1px solid #368d49;
  color:#368d49;
  background:white;

  text-decoration:none;
  cursor:pointer;

  transition:all .15s ease;
}

.btn:hover{
  background:#368d48;
  color:#fffffd;
  border-color:#368d48;
}

.btn-primary{
  background:#368d49;
  color:#fffffd;
}

.btn-primary:hover{
  background:#368d48;
}

.btn-ghost{
  background:white;
}


/* =========================
   ALERTS
   ========================= */

.alert{
  padding:14px;
  border-radius:12px;
  margin-bottom:18px;
}

.alert-success{
  background:#edf8f0;
  border:1px solid #b9dfc2;
}

.alert-error{
  background:#fff1f1;
  border:1px solid #efb7b7;
}


/* =========================
   FORM
   ========================= */

.form{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.field{
  min-width:0;
}

label{
  font-weight:600;
}

.hint{
  font-size:.85rem;
  color:var(--color-text-soft);
}

.error-text{
  font-size:.85rem;
  color:#c92b2b;
}


/* =========================
   INPUT FELDER
   ========================= */

input:not([type="radio"]):not([type="checkbox"]),
select,
textarea{
  width:100%;
  padding:11px 13px;
  border:1px solid #368d49;
  border-radius:12px;
  background:white;
  font:inherit;

  transition:border .15s ease, box-shadow .15s ease;
}

input:focus,
select:focus,
textarea:focus{
  outline:none;
  border-color:#368d49;
  box-shadow:0 0 0 3px #65be78;
}

.is-invalid{
  border-color:#d04a4a;
}


/* =========================
   PERIODEN
   ========================= */

.period-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.period{
  padding:16px;
  border:1px solid #ebebeb;
  border-radius:16px;
}

.period-current{
  border-color:#b6dcbc;
  background:#f7fcf8;
}

.period-kicker{
  font-size:.85rem;
  color:#777;
}

.period-title{
  font-weight:700;
}

.period-dates{
  color:#666;
  font-size:.95rem;
}


/* =========================
   PILLS
   ========================= */

.pill{
  padding:5px 10px;
  border-radius:999px;
  border:1px solid #e4e4e4;
  font-size:.8rem;
}

.pill-ok{
  background:#eaf6ee;
  color:#2f7b40;
}

.pill-warn{
  background:#fff4da;
  color:#8a6500;
}

.pill-neutral{
  background:#f5f5f5;
  color:#666;
}


/* =========================
   FORMAT GRID
   ========================= */

.format-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.format{
  border:1px solid #ececec;
  border-radius:16px;
  padding:16px;
}

.format-title{
  font-weight:700;
}

.format-meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:8px;
}


/* =========================
   SLIDER
   ========================= */

.dpi-slider-scale{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  font-size:.82rem;
  color:#666;
}

.dpi-slider-scale span{
  display:block;
  min-width:max-content;
}



/* =========================
   RADIO FORMAT CARDS
   ========================= */

.radio-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

.radio-card{
  display:flex;
  gap:12px;
  padding:14px;
  border:1px solid #e6e6e6;
  border-radius:16px;
  background:white;
  cursor:pointer;

  transition:border .15s ease, box-shadow .15s ease;
}

.radio-card:hover{
  border-color:#368d49;
  box-shadow:0 10px 20px rgba(0,0,0,0.05);
}

/* RADIO BUTTON FIX */
.radio-card input[type="radio"]{
  width:18px;
  height:18px;
  margin-top:3px;
  accent-color:#368d49;
}

/* aktives Radio hervorheben */
.radio-card:has(input[type="radio"]:checked){
  border-color:#368d49;
  background:#f2faf4;
}

.radio-title{
  font-weight:700;
}

.radio-sub{
  color:#666;
  font-size:.9rem;
}


/* =========================
   TOGGLE BOXEN
   ========================= */

.price-details,
.dpi-details{
  margin-top:12px;
}

.price-details summary,
.dpi-details summary{
  cursor:pointer;
  display:flex;
  gap:12px;
  padding:12px;
  border:1px dashed #d9d9d9;
  border-radius:14px;
  background:#fafafa;
}

.price-details[open] summary,
.dpi-details[open] summary{
  background:white;
}

.toggle-icon{
  width:30px;
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.toggle-title{
  font-weight:700;
}

.toggle-subtitle{
  font-size:.85rem;
  color:#666;
}

.toggle-chip{
  display:inline-flex;
  align-items:center;      /* vertikal zentriert */
  justify-content:center;  /* horizontal zentriert */

  font-size:.8rem;
  padding:6px 12px;

  border-radius:12px;
  background:#eef6f0;
  color:#2f7b40;
  border:1px solid #cfe3d3;

  line-height:1;
}

.price-box,
.dpi-calc-wrap{
  margin-top:12px;
  border:1px solid #e6e6e6;
  border-radius:12px;
  padding:12px;
  background:white;
}


/* =========================
   PREISTABELLE
   ========================= */

.price-table{
  width:100%;
  border-collapse:collapse;
}

.price-table th,
.price-table td{
  padding:11px 10px;
  border-bottom:1px solid #ededed;
}

.price-table thead th{
  background:#f7f7f7;
}

.price-table td.num{
  text-align:right;
}

.price-muted{
  margin-top:10px;
  font-size:.85rem;
  color:#666;
}


/* =========================
   FOOTER
   ========================= */

.footer{
  text-align:center;
  font-size:.95rem;
}

.muted{
  color:#777;
}


/* =========================
   RESPONSIVE
   ========================= */

@media (max-width:900px){

  .row{
    grid-template-columns:1fr;
  }

  .format-grid,
  .radio-grid,
  .period-grid{
    grid-template-columns:1fr;
  }

  .topbar .container{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }

}


.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:16px;
  background:#fff;
}
.table th, .table td{
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  text-align:left;
  font-size:13px;
  vertical-align:top;
}
.table th{background:#f8fafc; font-weight:800}
.table tr:last-child td{border-bottom:none}

.grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:12px;
}
.gallery-card{
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  display:flex;
  flex-direction:column;
}
.gallery-card .thumb{
  aspect-ratio: 4 / 3;
  background:#f3f4f6;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.gallery-card img{width:100%; height:100%; object-fit:cover; display:block}
.gallery-card .gc-body{
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.gc-title{font-weight:900}
.gc-meta{font-size:12px; color:var(--muted); margin-top:2px}
.gc-actions{margin-top:6px; display:flex; gap:8px; flex-wrap:wrap}

.placeholder{
  border:1px dashed rgba(107,114,128,.45);
  background: rgba(243,244,246,.7);
  color: var(--muted);
  display:grid;
  place-items:center;
  font-weight:800;
  height:100%;
  min-height:140px;
}

.upload-progress-wrap{
  display:none;
  margin-top:10px;
}

hr{
  display:block;
  width:100%;
  height:0;
  margin:50px 0;
  border:none;
  border-top:1px solid #d8d8d8;
}


/* =========================
   INFO-BANNER (Ausstellungsinfo)
   ========================= */

.info-banner{
  padding:16px 24px;
  background:#f2faf4;
  border-color:#b6dcbc;
}

.info-banner-inner{
  display:flex;
  align-items:center;
  gap:12px;
}

/* =========================
   DANGER BUTTON
   ========================= */

.btn-danger{
  background:#fff1f1;
  color:#c0392b;
  border-color:#e8b4b4;
}

.btn-danger:hover{
  background:#c0392b;
  color:#fffffd;
  border-color:#c0392b;
}

/* =========================
   HINT PILL (neben Label)
   ========================= */

.label-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:4px;
}

.label-inline{
  margin-bottom:0;
}

.hint-pill{
  font-size:.78rem;
  color:#666;
  background:#f5f5f5;
  border:1px solid #e4e4e4;
  border-radius:999px;
  padding:2px 10px;
}

/* =========================
   PREIS-TOGGLE
   ========================= */

.price-toggle-label{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
  font-weight:normal;
  cursor:pointer;
}

/* =========================
   PASSEPARTOUT WRAP
   ========================= */

.passepartout-wrap{
  margin-top:12px;
}

.passepartout-image-wrap{
  margin:0;
}

/* =========================
   DPI CALC
   ========================= */

.dpi-calc-wrap{
  margin-top:12px;
  border:1px solid #e6e6e6;
  border-radius:12px;
  padding:12px;
  background:white;
}

.dpi-calc-head{
  margin-bottom:8px;
}

.dpi-calc-title{
  font-weight:700;
}

.dpi-calc-sub{
  font-size:.85rem;
  color:#666;
}

.dpi-slider-grid{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.dpi-box{}

.dpi-slider-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:4px;
}

.dpi-slider-value{
  font-weight:700;
  font-size:.95rem;
}

.dpi-range{
  width:100%;
  accent-color:var(--color-primary);
}

.dpi-chart-wrap{
  margin-top:12px;
  overflow-x:auto;
}

.upload-progress-wrap{
  margin-top:10px;
}

.upload-progress-wrap progress{
  width:100%;
  height:18px;
  accent-color:var(--color-primary);
}