/* ============================================================
   dg-nette FrontModule — modern CSS
   ============================================================ */

/* ── Custom Properties ──────────────────────────────────── */
@font-face {
    font-family: 'Puritan';
    src: url('fonts/Puritan-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Puritan';
    src: url('fonts/Puritan-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


:root {
	
  --bg:           #002855;
  --surface:      #ffffff;
  --primary:      #ffffff;
  --accent:       #c8963a;
  --accent-hover: #a67b2e;
  --muted:        #888882;
  --border:       #e0dbd4;
  --subbutton:	  #ffcb00;
  --subbuttho:	  #e8ad00;
  --font-serif:   'Puritan', Georgia, serif;
  --font-sans:    'Puritan', system-ui, -apple-system, sans-serif;
  --radius:       6px;
  --shadow-sm:    0 1px 4px rgba(0,0,0,.07);
  --shadow:       0 4px 16px rgba(0,0,0,.11);
  --max-w:        1200px;
  --transition:   0.2s ease;
}

/* ── Reset / Base ───────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { font-size: 16px; scroll-behavior: smooth; overflow-x: hidden; }

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  background-color: var(--bg);
  color: var(--primary);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page-main {
  flex: 1;
}

ul {
  /* Passt den Abstand zwischen dem Listenrand und den Listenpunkten an */
  padding-left: 20px; 
    /* Entfernt den Standard-Außenabstand (oft voreingestellt) */
  margin-left: 0; 
    /* Optional: Ändert den Listentyp */
  list-style-type: disc; 
  margin-bottom: 16px;
}

ol {
  /* Passt den Abstand zwischen dem Listenrand und den Listenpunkten an */
  padding-left: 20px; 
    /* Entfernt den Standard-Außenabstand (oft voreingestellt) */
  margin-left: 0; 
    /* Optional: Ändert den Listentyp */
  margin-bottom: 16px;
}

img { max-width: 100%; height: auto; display: block; }
embed { width: 100%; }
p { margin-bottom: 0.75rem; }

a             { color: inherit; text-decoration: none; transition: color var(--transition); }
a:hover       { color: var(--accent); }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.3;
}

/* ── Site Header ────────────────────────────────────────── */
#site-header {
  background: var(--primary);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

#site-header .header-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
}

#site-header .logo img {
  height: 110px;
  width: auto;
}

/* ── Translate bar (below header) ───────────────────────── */
.translate-bar {
  /*background: #f4f0eb;*/
  border-bottom: 1px solid var(--border);
  /*padding: 6px 24px;*/
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  font-size: 0.82rem;
}

.translate-label {
  /*color: var(--muted);*/
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Google Translate — native select, branding hidden */
.goog-te-gadget {
  font-size: 0 !important;
}

.goog-te-gadget .goog-te-combo {
  font-family: var(--font-sans) !important;
  font-size: 0.88rem !important;
  padding: 5px 10px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background: var(--surface) !important;
  color: var(--bg) !important;
  box-shadow: var(--shadow-sm) !important;
  cursor: pointer !important;
  min-width: 160px !important;
  max-width: 100% !important;
}

.goog-te-gadget .goog-te-combo:focus {
  outline: none !important;
  border-color: var(--accent) !important;
}

/* Hide Google logo and "Powered by" text */
.goog-te-gadget > span,
.goog-logo-link,
.goog-te-gadget img {
  display: none !important;
}

/* Keep google banner suppressed */
.goog-te-banner-frame.skiptranslate { display: none !important; }
body { top: 0px !important; }

/* Responsive translate bar on mobile */
@media (max-width: 480px) {
  .translate-bar { justify-content: center; padding: 6px 14px; }
  .translate-label { display: none; }
}

/* ── Mini Cart (header) ─────────────────────────────────── */
#cart a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: #fff !important;
  padding: 8px 18px;
  border-radius: var(--radius);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: background var(--transition);
}

#cart a:hover {
  background: var(--accent-hover);
  color: #fff;
}

#cart a::before {
  content: "🛒";
  font-size: 1rem;
}

/* ── News Banner ────────────────────────────────────────── */
#news { font-size: 1rem; }

#newsRahmen {
  background-color: var(--bg);
  border-left: 4px solid var(--ffcb00);
  margin: 12px 24px;
  padding: 14px 18px;
  border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: var(--shadow-sm);
}

#newsTitle {
  font-weight: 700;
  display: block;
  margin-bottom: 6px;
  font-size: 1rem;
}

.hideNews {
  cursor: pointer;
  display: inline-block;
  margin-top: 10px;
  padding: 5px 14px;
  background: var(--primary);
  color: #f1f1f1;
  border-radius: var(--radius);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: background var(--transition);
  display:none;
}

.hideNews:hover { background: #444; }

/* ── Flash Messages ─────────────────────────────────────── */
.flash {
  padding: 12px 20px;
  margin: 12px 24px;
  border-radius: var(--radius);
  font-size: 0.95rem;
  border: 1px solid transparent;
}

.flash.success { background: #d4edda; color: #155724; border-color: #c3e6cb; }
.flash.error   { background: #f8d7da; color: #721c24; border-color: #f5c6cb; }
.flash.info    { background: #d1ecf1; color: #0c5460; border-color: #bee5eb; }
.flash.warning { background: #fff3cd; color: #856404; border-color: #ffeaa7; }

/* ── Page wrapper ───────────────────────────────────────── */
#front #content {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 28px 24px;
  font-size: 1rem;
}

/* ── Homepage ───────────────────────────────────────────── */
#homepage {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 28px 24px;
}

/* Headline buttons (text-only sections) */
.section-headlines {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}

.section-headline-item a {
  display: inline-block;
  padding: 10px 30px;
  background: var(--subbutton);
  /* border: 1px solid var(--border);*/
  border-radius: var(--radius);
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  transition: all var(--transition);
}

.section-headline-item a:hover,
.section-headline-item a.active {
  background: var(--subbuttho);
  color: #fff;
  /*border-color: var(--primary);*/
}

/* Section image grid */
.section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}

.section-card {
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}

.section-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}

.section-card a { display: block; }

.section-card img {
  width: 100%;
  height: 190px;
  object-fit: cover;
}

.section-card .card-title {
  padding: 14px 16px;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--primary);
  background: var(--surface);
  margin-top: -60px;
}

/* ── Subsection Navigation ──────────────────────────────── */
.subsection-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 28px;
}

.subsection-nav a {
  padding: 8px 18px;
  background: var(--subbutton);
  color: #fff;
  /* border: 1px solid var(--border);*/
  border-radius: var(--radius);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: all var(--transition);
}

.subsection-nav a:hover,
.subsection-nav a.active {
  background: var(--subbuttho);
  color: #fff;
  /* border-color: var(--primary);*/
}

/* ── Article Content ────────────────────────────────────── */
#article-content {
  max-width: 100%;
  font-size: 1rem;
  line-height: 1.8;
}

/* ── Order Items Grid ───────────────────────────────────── */
#order { margin-top: 36px; }

#order > h2 {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.order-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.order-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition), transform var(--transition);
}

.order-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.order-card .card-img {
  height: 160px;
  overflow: hidden;
  background: #f4f0eb;
  display: flex;
  align-items: center;
  justify-content: center;
}

.order-card .card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.order-card .card-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 6px;
}

.order-card .card-name {
  font-weight: 600;
  font-size: 0.95rem;
}

.order-card .card-desc {
  font-size: 0.8rem;
  color: var(--muted);
  flex: 1;
  line-height: 1.5;
}

.order-card .card-price {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accent);
}

.order-card .card-add {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.order-card .card-add input[type=text] {
  width: 54px;
  padding: 7px 8px;
  text-align: center;
  font-size: 0.95rem;
}

/* ── Buttons ────────────────────────────────────────────── */
.button,
input[type=submit],
button[type=submit] {
  display: inline-block;
  padding: 10px 22px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: background var(--transition), transform var(--transition);
}

.button:hover,
input[type=submit]:hover,
button[type=submit]:hover {
  background: var(--accent);
  color: #fff;
  transform: translateY(-1px);
}

/* ── Form Inputs ────────────────────────────────────────── */
input[type=text],
input[type=email],
input[type=tel],
input[type=number],
input[type=password],
select,
textarea {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  background: var(--surface);
  color: var(--bg);
  transition: border-color var(--transition), box-shadow var(--transition);
}

input[type=text]:focus,
input[type=email]:focus,
input[type=tel]:focus,
input[type=number]:focus,
input[type=password]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(200,150,58,.18);
}

label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 5px;
  color: var(--muted);
}

/* ── Shopping Cart Page ─────────────────────────────────── */
#shoppingCart {
  max-width: 660px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 36px;
  margin: 24px 0;
}

#shoppingCart h1 {
  font-family: var(--font-serif);
  font-size: 1.9rem;
  margin-bottom: 28px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-bottom: 1px solid var(--border);
  padding-bottom: 14px;
}

#shoppingCart h3 {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  margin: 28px 0 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}

.cart-field {
  margin-bottom: 18px;
}

#shoppingCart table.items {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  margin-top: 8px;
}

#shoppingCart table.items th {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 2px solid var(--border);
  background: #f8f5f1;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}

#shoppingCart table.items td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

#shoppingCart table.items input[type=text] {
  width: 64px;
  padding: 7px 8px;
  text-align: center;
}

#shoppingCart .cart-actions {
  display: flex;
  gap: 12px;
  margin-top: 28px;
  flex-wrap: wrap;
}

/* ── Search ─────────────────────────────────────────────── */
#searchForm { padding: 16px 0; }

#search th { display: none; }
#search td { border: 0; padding: 4px 0; }

#search input[type=text] { max-width: 360px; }

.search-results h2 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.search-results h3 {
  font-size: 1.1rem;
  font-family: var(--font-serif);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.search-results p { margin-bottom: 10px; font-size: 0.95rem; }
.search-results hr { border: none; border-top: 1px solid var(--border); margin: 12px 0; }

/* ── Generic Tables ─────────────────────────────────────── */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
  word-break: normal;
}

td { padding: .5em; vertical-align: top; }

th {
  padding: .5em;
  text-align: left;
  border-bottom: 2px solid var(--border);
  background: #e6a754;
}

.table-scrollable {
  width: 100%;
  overflow-x: auto;
  margin: 0 0 1em;
}

.table-scrollable::-webkit-scrollbar { height: 8px; width: 8px; }
.table-scrollable::-webkit-scrollbar-track { background: var(--bg); }
.table-scrollable::-webkit-scrollbar-thumb { background: rgba(0,0,0,.2); border-radius: 4px; }

/* ── Bootstrap-style panels (used in article content) ───── */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}

.panel-default > .panel-heading {
  background-color: var(--subbutton);
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 12px 16px;
  color: var(--primary);
}

.panel-heading { padding: 12px 16px; }
.panel-title { font-size: 1.3rem; font-weight: 600; }
.panel-title > a { color: inherit; }
.panel-body { padding: 16px; color: var(--bg) !important; }
.collapse { display: none; }
.collapse.in { display: block; }
.pull-right { float: right; }
.accordion-list { margin: 0 16px; }

/* Glyphicons (kept for accordion usage in article content) */
.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

.glyphicon-chevron-down::before { content: "\e114"; }
.glyphicon-chevron-up::before   { content: "\e113"; }

/* ── PDF viewer ─────────────────────────────────────────── */
.pdf-viewer,
.filosof,
iframe[src$=".pdf"] {
  display: block;
  width: 100%;
  height: 80vh;
  min-height: 500px;
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* ── Impressum Footer ───────────────────────────────────── */
#impressum {
  /*background: var(--primary);*/
  color: rgba(255,255,255,.55);
  text-align: center;
  padding: 18px 24px;
  font-size: 0.82rem;
  margin-top: auto;
}

#impressum a { color: rgba(255,255,255,.75); }
#impressum a:hover { color: #fff; }

/* ── Login Form ─────────────────────────────────────────── */
.loginForm       { width: 100%; max-width: 360px; }
.loginFormFields { width: 100%; height: 44px; border-radius: var(--radius); }
.loginFormLabel  { width: 100%; font-size: 0.85rem; margin-bottom: 4px; }

/* ── Time Recording (DmappX4Staff) ──────────────────────── */
.timeRecordingForm   { width: 280px; }
.timeRecordingFormFields {
  width: 100%;
  height: 65px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.timeRecordingClock {
  width: 280px;
  margin: 5px;
  padding: 8px;
  border: 1px solid var(--border);
  color: var(--primary);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

#timeRecordingDate {
  font-family: var(--font-sans);
  font-size: 20px;
  text-align: center;
}

ul.time {
  width: 280px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  text-align: center;
}

li.time {
  display: inline;
  font-size: 1em;
  text-align: center;
}

#timeRecordingPoint {
  position: relative;
  animation: ticktack 1s ease infinite;
  padding: 0 1px;
}

@keyframes ticktack {
  0%   { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}

.timeRecordingText {
  font-family: var(--font-sans);
  font-size: 20px;
  text-align: center;
}

.vacationRequestFormFields {
  width: 200px;
  height: 40px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.color-weekend    { background: #fdf3e7; }
.color-workingday { background: #f0f0f0; }

/* ── Loading spinner ────────────────────────────────────── */
.loader {
  border: 5px solid #f3f3f3;
  border-top: 5px solid var(--accent);
  border-bottom: 5px solid var(--accent);
  border-radius: 50%;
  width: 52px;
  height: 52px;
  animation: spin 1.2s linear infinite;
  margin: 0 auto;
}

@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ── Time Recording Terminal ────────────────────────────── */
.timeRecordingTerminalClock {
  width: 360px;
  margin: 5px auto;
  padding: 8px;
  border: 1px solid var(--border);
  color: var(--primary);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.timeRecordingTerminalFormFields {
  width: 100%;
  height: 100px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.timeRecordingTerminalForm {
  width: 360px;
  margin: 0 auto;
}

.timeRecordingTerminalRow       { display: flex; }
.timeRecordingTerminalPauseRow  { display: flex; }

.breakRecordingManagerFormFields {
  height: 40px;
  border-radius: var(--radius);
}

.breakRecordingManagerLoginform {
  width: 345px;
  height: 195px;
  margin-top: 25px;
  background-color: #2396C4;
  border-radius: 3px;
  box-shadow: 0 0 10px 0 #424242;
  padding: 10px;
  box-sizing: border-box;
  display: none;
}

/* ── Plantabelle (schedule table) ──────────────────────── */
#Plantabelle {
  font-size: 0.75rem;
  line-height: 1;
  color: var(--bg);
}

/* ── Tracy debug bar (do not change) ───────────────────── */
#tracy-debug-bar ul    { display: block; }
#tracy-debug-bar ul li { width: auto; }