/* Body wirklich randlos + Safe-Area beachten (iOS Notch) */
html, body { height: 100%; margin: 0; }
body { 
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Bootstrap-Gutters auf Mobil deaktivieren */
@media (min-width: 700px) {
  .container, .container-fluid { padding-left: 0 !important; padding-right: 0 !important; max-width: 95%;}
  .row { --bs-gutter-x: 0 !important; }
  /* Karten am Rand ohne abgerundete Ecken wirken „edge-to-edge“ sauberer */
  .event-card { border-radius: 0 !important; }
  /* Außenabstände für Hauptblöcke weglassen */
  .mx-mobile-0 { margin-left: 0 !important; margin-right: 0 !important; }
  .px-mobile-0 { padding-left: 0 !important; padding-right: 0 !important; }
}

/* Höhe deiner Navbar (ggf. anpassen: 56px Bootstrap, 64px eigene) */
:root {
  --nav-h: 56px;
  --ibring-link: #61505e;
  /* Links & Icons (accentcolor3) */
  --ibring-hover: #6e5454;
  /* Hover-Farbe (hovercolor)     */
  --ibring-text: #000000;
  /* Textfarbe (accentcolor2)      */

  --ibring-brand-light: #8F7D6F;
  --ibring-brand-dark: #584a45;
  --ibring-brand-logo: #ffffff;
  --ibring-brand-red: #970b0d;
  --ibring-brand-green: #455847;
  --ibring-brand-blue: #3e39c6;
}

/* in /partials/stylesheet.css oder globalem CSS */
@font-face {
  font-family: "MyLogoFont";
  src: url("/fonts/Bevellier-Black.woff2") format("woff2"),
    url("/fonts/Bevellier-Black.woff") format("woff");
  font-weight: 400;
  /* anpassen, wenn mehrere Schnitte vorhanden */
  font-style: normal;
  /* italic falls nötig */
  font-display: swap;
  /* für Logos evtl. 'block' nutzen, siehe Hinweis */
}

/* Logo-Text styling */
.logo-text {
    font-family: 'KG Blank Space', sans-serif;
  font-weight: 400;
  /* letter-spacing: .5px; */
  /* optional: feintunen */
}

.inav {
  background-color: var(--ibring-brand-light);
}

.inav .navbar-brand,
.inav .nav-link {
  color: #ffffff !important;
}

.inav .nav-link:hover,
.inav .nav-link:focus {
  color: #e2e6ea !important;
  text-decoration: underline;
}

.inav .nav-link.active {
  text-decoration: underline;
}

.navbar-toggler {
  border-color: #ffffff80;
}

.navbar-toggler-icon {
  filter: invert(1) grayscale(100%) contrast(200%);
}

.text-white-75 {
  color: rgba(255, 255, 255, .85) !important;
}

.smallcode {
  font-family: monospace;
  font-size: .9rem;
  padding: .2rem .4rem;
  background: #f8f9fa;
  border-radius: .25rem;
  word-break: break-all;
}

.navbar.sticky-top {
  box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
  z-index: 1030;
  /* über Content */
}

/* In stylesheet.css */
.modal .form-text code {
  background: #f8f9fa;
  padding: .1rem .25rem;
  border-radius: .25rem;
}

.card,
.speccolor .brandcolorlight {
  background: #8F7D6F;
}

.brandbadgered{
  background-color: var(--ibring-brand-red);
  color: #FFF;
}

.brandbadgegreen{
  background-color: var(--ibring-brand-green);
  color: #FFF;
}

.brandcolordark {
  color: var(--ibring-brand-dark);
}

.brandcolorlogo {
  background: #ffffff;
}

.brandcolorred {
  color: var(--ibring-brand-red);
}

.brandcolorgreen {
  color: var(--ibring-brand-green);
}

.brandcolorblue {
  color: var(--ibring-brand-blue);
}

.brandspacer {
  height: 6rem;
}

/* Alle Karten gleich hoch halten */
.color-card {
  display: flex;
  flex-direction: column;
}

/* Card-Body flexibel -> Inputs unten bündig */
.color-card .card-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Colorpicker etwas größer & mittig */
.form-control-color {
  width: 100%;
  height: 3rem;
  padding: 0;
  cursor: pointer;
}

/* Gilt nur für das Events-Akkordeon */
#eventsAcc,
#eventsAccordion,
#usersAccordion,
#profileAcc,
#assignAcc,
#createEventAcc {
  --bs-accordion-active-bg: var(--ibring-brand-dark);
  /* Banner offen */
  --bs-accordion-active-color: #FFF;
  /* Text offen   */
  --bs-accordion-btn-bg: #FFF;
  /* Banner zu (optional) */
  /* optional, für Ränder/Focus */
  --dbs-accordion-border-color: var(--ibring-brand-dark);
  --bs-accordion-btn-focus-border-color: var(--ibring-brand-dark);
  --bs-accordion-btn-focus-box-shadow: var(--ibring-brand-dark);
}

/* LOGIN */

#toastStack {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1080;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  width: min(680px, 92vw);
  pointer-events: none;
}

.floating-alert {
  pointer-events: auto;
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.15);
  border-radius: .5rem;
  transition: opacity .35s ease, transform .35s ease;
}

.floating-alert.fade-hide {
  opacity: 0;
  transform: translateY(-6px);
}

/* Eigene Primärfarbe */
.btn-primary {
  --bs-btn-bg: #584a45;
  --bs-btn-border-color: #FFFFFF;
  --bs-btn-hover-bg: #8F7D6F;
  --bs-btn-hover-border-color: #FFFFFF;
  --bs-btn-active-bg: #8F7D6F;
  --bs-btn-active-border-color: #FFFFFF;
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #000;
  --bs-btn-focus-shadow-rgb: 88, 74, 69;
  /* optional: Focus-Glow-Ton */
}

.btn-success {
  --bs-btn-bg: #455847;
  --bs-btn-border-color: #FFFFFF;
  --bs-btn-hover-bg: #607a62;
  --bs-btn-hover-border-color: #FFFFFF;
  --bs-btn-active-bg: #607a62;
  --bs-btn-active-border-color: #FFFFFF;
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #000;
  --bs-btn-focus-shadow-rgb: 88, 74, 69;
}

.btn-danger,
.text-danger,
.border-danger {
  --bs-btn-bg: #970b0d;
  --bs-btn-border-color: #FFFFFF;
  --bs-btn-hover-bg: #b20b0d;
  --bs-btn-hover-border-color: #FFFFFF;
  --bs-btn-active-bg: #b20b0d;
  --bs-btn-active-border-color: #FFFFFF;
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #000;
  --bs-btn-focus-shadow-rgb: 88, 74, 69;
}

/* Optional: Fokus-Schimmer komplett weg */
.btn:focus,
.btn:focus-visible {
  box-shadow: none;
}

.alert-info {
  background-color: var(--ibring-brand-green);
  color: #FFF;
  border-color: #FFF;
}

body {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

a,
a:visited {
  color: var(--ibring-brand-dark);
  text-decoration: underline;
}

a:hover {
  background-color: var(--ibring-brand-dark);
  color: var(--ibring-brand-light);
  text-decoration: underline;
  font-weight: bolder;
}

/* Platz oben schaffen, wenn Navbar fixed ist */

/* Navbar immer oben drüber */
.navbar.fixed-top,
.navbar.sticky-top {
  z-index: 1030;
  /* Bootstrap-Standard, > Content, > Sticky-Header */
}

/* Dein sticky Event-Header: unter Navbar kleben, niemals drüber */
.event-sticky {
  position: sticky;
  top: var(--nav-h);
  /* WICHTIG: nicht 0, sondern unterhalb der Navbar */
  z-index: 100;
  /* kleiner als Navbar */
  background: #fff;
  /* damit nix durchscheint */
  border-bottom: 1px solid rgba(0, 0, 0, .075);
}

/* Grundzustand */
.event-subnav .nav-pills .nav-link {
  color: var(--ibring-link);
  background: transparent;
  border: 1px solid white;
}

.event-subnav .nav-pills .nav-link i {
  color: inherit;
  /* Icons gleich einfärben */
}

/* Hover/Focus */
.event-subnav .nav-pills .nav-link:hover,
.event-subnav .nav-pills .nav-link:focus {
  color: var(--ibring-link);
  background: transparent;
  border-color: var(--ibring-link);
}

.event-subnav .nav-pills .nav-link.active {
  color: #fff;
  background-color: var(--ibring-link);
  border-color: white;
  border-radius: .375rem;
}

.event-subnav .nav-pills .nav-link.active i {
  color: #fff;
}

hr {
  color: white;
  border: 2px solid white;
  margin: 2rem 0;
}

.page-wrap {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.event-sticky {
  padding-left: calc(1rem + env(safe-area-inset-left));
  padding-right: calc(1rem + env(safe-area-inset-right));
}

.mitbringsel {
  background-color: #d3d3d3;
  border: solid #d3d3d3 !important;
}

.headerlogo a, headerlogo a:hover{
  background-color: transparent;
  text-decoration: none;
}

.mitbringsel-note {
  background: #fffef7;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 2px 4px 6px rgba(0,0,0,0.15);
  padding: 1rem;
  font-family: "Courier New", monospace;
  position: relative;
  overflow: hidden;
}

.mitbringsel-note-titel {
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 2px 4px 6px rgba(0,0,0,0.15);
  position: relative;
  overflow: hidden;
  font-size: 1.75rem !important;
}

/* Löcher wie ein Notizblock */
.mitbringsel-note::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12px;
  width: calc(100% - 24px);
  height: 16px;
  background: repeating-linear-gradient(
    to right,
    transparent,
    transparent 20px,
    radial-gradient(circle, #fff 6px, #ccc 7px) 20px
  );
  background-size: 40px 16px;
  background-repeat: repeat-x;
}

/* Gerissene untere Kante */
.mitbringsel-note::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100%;
  height: 16px;
  background: linear-gradient(135deg, #fffef7 75%, transparent 75%) 0 0,
              linear-gradient(225deg, #fffef7 75%, transparent 75%) 0 0;
  background-size: 16px 16px;
  background-repeat: repeat-x;
}
.cat-status {
  font-size: .9rem;
  white-space: nowrap;
}

@font-face {
  font-family: 'KG Blank Space';
  src: url('/fonts/KG Blank Space Sketch.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

h1{
  font-family: 'KG Blank Space', sans-serif;
}