/* ========= Frontend Styles (öffentlich) ========= */
/* freundlicher, heller Look – unabhängig vom Admin-Theme */

:root{
  --bg: #f7f8fb;
  --card: #ffffff;
  --text: #222222;
  --text-muted: #6b7280;
  --primary: #1a73e8;
  --primary-hover: #1669d2;
  --outline: #d1d5db;
  --success: #10b981;
  --danger: #c43030;
  --warning: #f59e0b;
  --radius: 14px;
  --shadow: 0 6px 18px rgba(16, 24, 40, 0.08);
  --focus: 0 0 0 3px rgba(26,115,232,.25);
}

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

html, body {
  height: 100%;
}

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family:
    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* ---------- Layout ---------- */
.container{
  max-width: 760px;
  margin: 32px auto;
  padding: 0 16px;
}

.card{
  background: var(--card);
  border: 1px solid #eef0f4;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
}

.card + .card{ margin-top: 16px; }

h1, h2, h3{
  line-height: 1.25;
  margin: 0 0 12px;
}

h1{ font-size: 1.75rem; }
h2{ font-size: 1.35rem; }
h3{ font-size: 1.1rem; color: var(--text-muted); font-weight: 600; }

/* ---------- Links ---------- */
a{
  color: var(--primary);
  text-decoration: none;
}
a:hover{ text-decoration: underline; }

/* ---------- Buttons ---------- */
.button{
  display: inline-block;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  line-height: 1;
  transition: background .15s ease, box-shadow .15s ease, transform .02s;
}
.button:hover{ background: var(--primary-hover); text-decoration: none; }
.button:active{ transform: translateY(1px); }
.button:focus-visible{ outline: none; box-shadow: var(--focus); }

.button.outline{
  background: #fff;
  color: var(--primary);
  border-color: var(--primary);
}
.button.outline:hover{ background: rgba(26,115,232,.06); }

.button.muted{
  background: #fff;
  color: var(--text);
  border-color: var(--outline);
}
.button.muted:hover{ background: #f3f4f6; }

.button.danger{
  background: var(--danger);
  border-color: #a22626;
}
.button.danger:hover{ background: #ab2a2a; }

/* ---------- Forms ---------- */
label{
  display:block;
  font-weight: 600;
  margin: 12px 0 6px;
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="datetime-local"],
input[type="search"],
textarea,
select{
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--outline);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

textarea{ min-height: 120px; resize: vertical; }

input:focus,
textarea:focus,
select:focus{
  border-color: var(--primary);
  box-shadow: var(--focus);
}

input[type="radio"],
input[type="checkbox"]{
  width: 18px;
  height: 18px;
  vertical-align: middle;
  accent-color: var(--primary);
}

.form-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 640px){
  .form-row{ grid-template-columns: 1fr; }
}

.form-card{
  background: var(--card);
  border: 1px solid #eef0f4;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
}

.mt-2{ margin-top: 8px; }
.mt-3{ margin-top: 12px; }
.mt-4{ margin-top: 16px; }

/* ---------- Messages ---------- */
.success,
.error,
.info,
.warning{
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  margin: 8px 0 12px;
  font-weight: 500;
}
.success{
  background: #ecfdf5;
  color: #065f46;
  border-color: #a7f3d0;
}
.error{
  background: #fef2f2;
  color: #7f1d1d;
  border-color: #fecaca;
}
.info{
  background: #eef6ff;
  color: #1e40af;
  border-color: #bfdbfe;
}
.warning{
  background: #fff7ed;
  color: #7c2d12;
  border-color: #fed7aa;
}

.muted{ color: var(--text-muted); }

/* ---------- Tables (falls benötigt) ---------- */
.table{
  width:100%;
  border-collapse: collapse;
}
.table th, .table td{
  padding: 10px 12px;
  border-bottom: 1px solid #eef0f4;
  text-align: left;
}
.table th{
  font-weight: 700;
  color: #111827;
}

/* ---------- Badges (z.B. Status) ---------- */
.badge{
  display:inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: .85rem;
  border: 1px solid var(--outline);
  background: #fff;
  color: var(--text);
}
.badge.status{
  background: #000;
  color: #fff;
  border: 2px solid #999;
}
.badge.status.confirmed{ border-color: #00f64a; }
.badge.status.pending{ border-color: #797979; }
.badge.status.cancelled{ border-color: #c43030; }

/* ---------- Helper ---------- */
hr{
  border: none;
  border-top: 1px solid #eef0f4;
  margin: 16px 0;
}

code, pre{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  background: #f3f4f6;
  padding: 2px 6px;
  border-radius: 6px;
}

/* ===== Site Header (Frontend) ===== */
.site-header {

}
.site-header .inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 10px 16px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
}
.site-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.site-logo {
  display: inline-flex;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
}
.site-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand {
    display: inline-block;
    width: 100%;
}

/* ---- Buttons ---- */
.button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.button.primary {
  background: #0077cc;
  color: #fff;
}

.button.primary:hover {
  background: #005fa3;
}

.button.primary:active {
  transform: scale(0.97);
}


.brand img {
  display: block;
  width: 100%;
  height: 100px;
  object-fit: contain;
}
.site-title {
	margin-top: 10px;
	    font-size: 1.5rem;
	    font-weight: 700;
	    color: #1f2937;
	    text-align: center;
}
@media (max-width: 640px){
  .site-header .inner{
    grid-template-columns: auto 1fr;
  }
  .site-title{ font-size: 1.1rem; }
}