@charset "utf-8";
/*
  stanzflyer.de - theme.css (CLEAN)
  Basis: Bootstrap 3.3.4
  Ziel: unverändertes Design (Desktop/Übergang/Mobil),
		aufgeräumt, konsistent, kompatibel, responsiv.
*/

/* Fonts */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

/* =========================
   Design Tokens
   ========================= */
:root{
  --bg:#ffffff;
  --surface:#f6f7f9;
  --surface2:#eef2f7;
  --text:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;

  --brand:#006eb5;
  --brand2:#0b5fa0;

  --radius:14px;
  --radiusSm:10px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --shadowSm:0 2px 14px rgba(0,0,0,.06);

  --container:1200px;

  /* Navbar */
  --navH:64px;          /* Desktop + Übergang */
  --navPadY:10px;       /* Brand padding top/bottom */
  --logoH:42px;         /* Desktop + Übergang Logo */
  --mobileLogoH:36px;   /* Mobile Logo (kleiner, gleiche optische Lage) */

  /* Layout spacing */
  --contentTopGap:32px; /* Abstand unter fixed Navbar bis Content */
}

/* =========================
   Base
   ========================= */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  padding-top: var(--navH);
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size:15px;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  color:var(--text);
  background:var(--bg);
  line-height:1.55;
}
a{ color:var(--brand); text-decoration:none; }
a:hover, a:focus{ color:var(--brand2); text-decoration:underline; }

.container{ max-width:var(--container); }
hr{ border-top:1px solid var(--border); }

h1,h2,h3,h4{ color:var(--text); }
h4{
  font-size:1.25rem;
  font-weight:700;
  margin:0 0 10px 0;
}

/* Bootstrap basics */
.img-thumbnail{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow: var(--shadowSm);
}
div.thumbnail, .clearfix img{
  box-shadow: var(--shadowSm);
  border-radius: var(--radius);
}

/* =========================
   Header (alt ausblenden)
   ========================= */
.container-fluid.header{ display:none !important; }

/* =========================
   Fixed Frosted Navbar
   ========================= */
#custom-bootstrap-menu.navbar{
  margin:0;
  border:0;
}
#custom-bootstrap-menu.navbar-default{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;

  background: rgba(255,255,255,.62) !important;
  border-bottom: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.10);

  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  #custom-bootstrap-menu.navbar-default{
	background: rgba(255,255,255,.95) !important;
  }
}

/* Container paddings: Desktop/Tablet ohne seitliche Innenabstände (wie bisher) */
#custom-bootstrap-menu > .container-fluid{
  padding-left:0;
  padding-right:0;
}

/* Desktop/Tablet: Header links leicht eingerückt (wie original) */
#custom-bootstrap-menu .navbar-header{
  padding-left:20px;
}

/* Brand/Logo: Desktop + Übergang identisch */
#custom-bootstrap-menu .navbar-brand.sf-brand{
  height: var(--navH);
  padding: var(--navPadY) 14px;
  margin: 0;
}
#custom-bootstrap-menu .navbar-brand.sf-brand img{
  height: var(--logoH);
  width:auto;
  display:block;
}

/* Hauptmenü-Links (Desktop/Tablet) */
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a{
  color:#111827 !important;
  background:transparent !important;
  border-right: 1px solid rgba(0,0,0,.06) !important;

  /* zentriert in 64px (22/22 war ok, leicht kompakter für Stabilität) */
  padding-top: 22px !important;
  padding-bottom: 22px !important;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus{
  background: rgba(0,0,0,.06) !important;
  color:#111827 !important;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus{
  background: rgba(0,0,0,.08) !important;
}

/* Burger (default: Bootstrap verhält sich korrekt) */
#custom-bootstrap-menu.navbar-default .navbar-toggle{
  border-color: rgba(0,0,0,.18) !important;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar{
  background: #111827 !important;
}

/* Dropdowns: NICHT transparent (einheitlich, nur einmal definiert) */
#custom-bootstrap-menu .dropdown-menu{
  background: #ffffff !important;
  opacity: 1 !important;

  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 12px 30px rgba(0,0,0,.12);

  border-radius: 14px;
  padding: 8px;
}
#custom-bootstrap-menu .dropdown-menu>li>a{
  color:#111827;
  font-weight:600;
  padding:8px 12px;     /* enger -> Untermenüpunkte näher zusammen */
  border-radius:10px;
  white-space:nowrap;   /* keine Umbrüche */
}
#custom-bootstrap-menu .dropdown-menu>li>a:hover{
  background:#f3f6f9 !important;
}

/* Sehr lange Dropdowns scrollbar */
#custom-bootstrap-menu .dropdown-menu{
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: hidden;
}

/* =========================
   Mobile Navbar (nur <=767px)
   - Burger, seitliche Ränder wie Content
   - Logo kleiner, aber gleiche optische Lage
   ========================= */
@media (max-width: 767px){

  /* Mobile: Container-Rand wie Bootstrap-Content */
  #custom-bootstrap-menu > .container-fluid{
	padding-left:15px !important;
	padding-right:15px !important;
  }

  /* Mobile: Header darf keinen extra Versatz addieren */
  #custom-bootstrap-menu .navbar-header{
	padding-left:0 !important;
  }

  /* Bootstrap setzt gern margin-left:-15 auf .navbar-brand -> neutralisieren */
  #custom-bootstrap-menu .navbar-brand.sf-brand{
	margin-left:0 !important;
	padding-left:0 !important;         /* Container hat bereits 15px */
	padding-right:0 !important;

	height: var(--navH) !important;    /* Bezugshöhe bleibt gleich */
	padding-top: var(--navPadY) !important;
	padding-bottom: var(--navPadY) !important;

	max-width: calc(100% - 70px);      /* Platz für Burger */
	overflow: hidden;
  }

  /* Mobile: Logo kleiner, aber gleiche optische Position (Padding bleibt gleich) */
  #custom-bootstrap-menu .navbar-brand.sf-brand img{
	height: var(--mobileLogoH) !important;
  }

  /* Mobile: Burger sauber innerhalb der 15px */
  #custom-bootstrap-menu .navbar-toggle{
	margin-right:0 !important;
  }

  /* Mobile: Nav-Margins ohne negative Ränder (verhindert „Randlosigkeit“) */
  #custom-bootstrap-menu .navbar-nav{
	margin: 7.5px 0 !important;
  }
  #custom-bootstrap-menu .navbar-nav>li>a{
	border-right:0 !important;
  }
}

/* =========================
   Content Layout
   ========================= */
#content{
  padding-top:0 !important;
  margin-top: var(--contentTopGap) !important;
}

.content-left{
  text-align:left;
  padding: 0 0 0 18px;
}
@media (max-width:767px){
  .content-left{ padding-left:0; }
}

.content-left h1{
  font-size: clamp(24px, 2.6vw, 38px);
  color:var(--brand);
  font-weight:800;
  padding:0;
  margin:0 0 12px 0;
}

.content-right{
  padding-left:24px;
  margin:0;
}
@media (max-width:767px){
  .content-right{ padding-left:0; }
}

/* Detailseite */
.content-left.detailseite h1{
  font-size: clamp(26px, 3vw, 44px);
  line-height:1.15;
  color:var(--brand);
  font-weight:900;
}
.content-left.detailseite ul{ margin:0; padding:16px 0; }
.content-right.detailseite{
  padding-left:24px;
  margin:0 0 60px 0;
}
@media (min-width:992px){
  .content-right.detailseite{ padding-left:38px; margin-bottom:100px; }
}

/* Startseite */
.content-right.startseite{ padding-left:0; margin:0; }

/* =========================
   Bildernavigation
   ========================= */
.bildernavigation{ margin-top:12px; }
.bildernavigation.kalkulator{ margin-top:30px; padding-right:15px; }

.bilder{
  list-style-type:none;
  padding:0;
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}
.bilder li{
  display:block;
  transition: transform .12s ease, box-shadow .12s ease;
}
.bilder li:hover{ transform: translateY(-2px); }

.bilder li .img-thumbnail{
  width:147px;
  height:147px;
  object-fit:cover;
}
@media (max-width:767px){
  .bilder{ gap:10px; }
  .bilder li .img-thumbnail{
	width: 44vw;
	max-width:170px;
	height: 44vw;
	max-height:170px;
  }
}

.beschriftung{
  position:relative;
  top:6px;
  text-align:center;
  width:147px;
  height:auto;
  font-weight:700;
  color:var(--text);
}
@media (max-width:767px){
  .beschriftung{ width:auto; }
}

/* =========================
   Panels / Kalkulator
   ========================= */
.panel{
  border-radius:var(--radius);
  border:1px solid var(--border);
  box-shadow: var(--shadowSm);
  overflow:hidden;
}
.panel-default{ border-color:var(--border); }

.panel-heading{ border-bottom:1px solid var(--border); }
.panel-heading.kalkulator{
  background:#111827;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.panel-heading.kalkulator h3{
  color:#fff;
  font-weight:800;
  margin:0;
}
.panel-body{ background:#fff; }
.panel-body.kalkulator{
  background:var(--surface);
  padding:18px;
}
.panel-body.upload{
  background:var(--surface);
  padding-left:0;
}
.panel-default.upload{ margin:0 15px 0 25px; }
@media (max-width:767px){
  .panel-default.upload{ margin:0; }
}

.panel-body.panel-s{ padding: 15px 0 0 0; }
table tbody tr td.panel-s, table tr th.panel-s{ padding-left:15px; }

/* Preise rechts */
.content-right.preise{
  padding:0;
  margin:18px 0 0 0;
}
.panel-default.preise{ margin-left:0; }
@media (min-width:992px){
  .panel-default.preise{ margin-left:20px; }
  .content-right.preise{ position:sticky; top:16px; }
}

.gesamtpreis{
  font-size: clamp(24px, 2.2vw, 34px);
  color:var(--brand);
  font-weight:900;
}
.subtext{ font-size:12px; color:var(--muted); }
.mwst{ font-size:12px; color:var(--brand); font-weight:700; }
.versand{ padding:0; }

/* Zusammenfassung rechts */
.table-condensed{ font-size:13px; }
.table.table-condensed tr td{
  border:none;
  padding:6px 0 3px 0;
}
.table-condensed tr.head td,
.table-condensed tr.head-2 td{
  border-bottom:1px solid var(--border);
  font-size:13px;
  color:var(--brand);
  font-weight:800;
}
.table-condensed tr.head-2 td{ padding-top:12px; }

.row.bildernavigation.minheight{ min-height:580px; }

/* =========================
   Forms
   ========================= */
legend{
  font-size:1.1rem;
  color:var(--brand);
  border-bottom:1px solid var(--border);
  padding-bottom:8px;
  font-weight:800;
}
label{ font-weight:700; color:var(--text); }

.form-control{
  width:100%;
  height:38px;
  border-radius:var(--radiusSm);
  border:1px solid var(--border);
  box-shadow:none;
}
textarea.form-control{ height:auto; }
input, select, textarea{ font-size:14px; }
select{ height:38px; }

.form-control:focus{
  border-color: rgba(0,110,181,.55);
  box-shadow: 0 0 0 3px rgba(0,110,181,.15);
}

/* Buttons (Bootstrap override) */
.btn{
  border-radius:999px;
  font-weight:800;
  padding:9px 14px;
}
.btn-primary{
  background:var(--brand);
  border-color:var(--brand);
}
.btn-primary:hover,
.btn-primary:focus{
  background:var(--brand2);
  border-color:var(--brand2);
}

/* Entfernt alte Hover-Zooms auf Inputs */
.content-right form input{
  -webkit-transition:none;
  -moz-transition:none;
  transition:none;
  box-shadow:none;
}
.content-right form input:hover{
  -webkit-transform:none;
  -moz-transform:none;
  transform:none;
}

/* =========================
   Navpfeile
   ========================= */
#button_left, #button_right{ width:50%; float:left; }
#button_left{ text-align:right; padding-right:28px; }
#button_right{ text-align:left; }

.zurueck, .vor{
  width:42px;
  height:42px;
  display:block;
  cursor:pointer;
  border:none;
  background-repeat:no-repeat;
  background-size:cover;
}
.zurueck{ background-image:url(../img/button_zurueck.jpg); float:right; }
.zurueck:hover{ background-image:url(../img/button_zurueck_active.jpg); }
.vor{ background-image:url(../img/button_vor.jpg); float:left; }
.vor:hover{ background-image:url(../img/button_vor_active.jpg); }

.grossbild{ margin-right:5px; }
.row.navpfeile{ margin-right:5px; padding:28px 0 16px 0; }

/* =========================
   Footer (Mobile ohne Extra-Space)
   ========================= */
.container-fluid.footer{
  background:#0b1220;
  margin:40px 0 0 0;
  padding:34px 0 30px 0;
  color:rgba(255,255,255,.78);
}
.container.footer{ padding-left:18px; }
.container.footer a{ color:#fff; opacity:.9; }
.container.footer a:hover{ opacity:1; text-decoration:underline; }

/* Auf Mobile keinen zusätzlichen „Luftblock“ erzeugen */
@media (max-width:767px){
  .container-fluid.footer{ margin-top:20px; }
}

span.right{
  width:65px;
  display:inline-block;
  text-align:right;
  float:right;
  margin-right:120px;
}
@media (max-width:767px){
  span.right{ float:none; margin-right:0; }
}
.centernav{ margin-top:18px; text-align:center; }

/* Widgets spacing */
.widgets{ margin-left:0; margin-top:30px; }
.pull-right{ margin:0 0 15px 15px; }

/* =========================
   Backend Tabellen + Buttons (wie bisher)
   ========================= */
.tableheading{
  border:none;
  background:none;
  padding:0;
  margin:0;
}
.tableheading:hover{ text-decoration:underline; }

.inputfirma, .inputnr, .w-120{
  border:none;
  background:none;
  cursor:pointer;
}
.inputfirma{ width:250px; }
.inputnr{ width:50px; }
.w-120{ width:120px; }
.inputfirma:hover, .inputnr:hover{ text-decoration:underline; }

form.suche input, form.suche input:hover{
  width:120px;
  margin-bottom:5px;
  box-shadow:none;
  transform:none;
}
.content-right form.suche{
  margin:0;
  padding:10px 0 0 0;
}

/* Login */
.content-right.login{ margin:24px 0 0 0; }
@media (min-width:992px){ .content-right.login{ margin:51px 0 0 0; } }

.tdlabel{ min-width:130px; }
.width100{ width:70px; }
.width130{ width:120px; }

/* Einheitliche Button-Optik (Backend) */
#form input[type="submit"],
#form input[type="button"]{
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, transform .05s ease, box-shadow .15s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
#form input[type="submit"][value="suchen"],
#form input[type="submit"][value="anmelden"]{
  background: rgba(0,110,181,1);
  color: #fff;
  border-color: rgba(0,110,181,.9);
}
#form input[type="submit"][value="suchen"]:hover,
#form input[type="submit"][value="anmelden"]:hover{
  filter: brightness(0.95);
}
#form input[type="submit"][value="suchen"]:active,
#form input[type="submit"][value="anmelden"]:active{
  transform: translateY(1px);
}
#form input[type="submit"][value="logout"]{
  background: rgba(255,255,255,.85);
  color: #222;
}
#form input[type="submit"][value="logout"]:hover{
  background: rgba(255,255,255,1);
}
#form input[name="csearch"][value="X"]{
  background: rgba(255,255,255,.85);
  color: #222;
  padding: 8px 10px;
  border-radius: 10px;
  min-width: 36px;
  font-weight: 700;
}
#form input[name="csearch"][value="X"]:hover{
  background: rgba(255,255,255,1);
}
#form input[type="text"],
#form input[type="password"],
#form select{
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
#Suchbegriff{
  height: 34px;
  margin-right: 8px;
}
#form input[type="submit"][value="suchen"],
#form input[name="csearch"][value="X"]{
  vertical-align: middle;
  margin-right: 8px;
}
#form input[type="submit"][value="logout"]{
  margin-left: 10px;
}

/* Pagination ONLY */
#form a[href*="page="]:not(#pcalclink){
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  margin: 0 6px 6px 0;

  border-radius: 10px;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;

  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);

  transition: background .15s ease, transform .05s ease;
}
#form a[href*="page="]:hover{ background: rgba(255,255,255,1); }
#form a[href*="page="]:active{ transform: translateY(1px); }

/* Action-Links (nur wenn class="action-link" vorhanden) */
a.action-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 34px;
  padding: 0 12px;
  margin: 0 6px 6px 0;

  border-radius: 10px;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;

  text-decoration: none !important;

  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);

  color: #222;

  transition: background .15s ease, transform .05s ease;
}
a.action-link:hover{
  background: rgba(255,255,255,1);
  color: #000;
}
a.action-link:active{ transform: translateY(1px); }

a.action-link[href*="bestellungen.php?s="]{
  background: rgba(220,53,69,.08);
  border-color: rgba(220,53,69,.35);
  color: #b02a37;
}
a.action-link[href*="bestellungen.php?s="]:hover{
  background: rgba(220,53,69,.12);
}

/* =========================================================
   HOTFIX: Carousel wie vorher + Mobile Seitenränder für Content
   (GANZ UNTEN ANHÄNGEN)
   ========================================================= */

/* ---------- Carousel (aus deinem ursprünglichen CSS) ---------- */
.carousel-control{ display:none; }
.carousel-inner{ margin-bottom:20px; }
.carousel-indicators{ bottom:-34px; }
.carousel-indicators li{ border:1px solid #cfd4dc; }
.carousel-indicators .active{
  background-color:var(--brand);
  border:none;
  -moz-transform:scale(0.9);
}

.carousel-caption{
  text-align:left;
  background: rgba(255,255,255,.88);
  border:1px solid rgba(229,231,235,.9);
  border-radius: var(--radius);
  padding:14px 16px;
  text-shadow:none;
  color:var(--text);
}
.carousel-caption h3{
  font-size: clamp(22px, 2.6vw, 40px);
  color:var(--brand);
  font-weight:800;
  margin:0 0 10px 0;
}
.carousel-caption p{
  font-size: 14px;
  font-weight:400;
  color:var(--muted);
  line-height:1.5;
  margin:0 0 8px 0;
}
.carousel-caption a{
  text-shadow:none;
  text-decoration:underline;
  color:var(--text);
}
.carousel-caption a:hover{ color:var(--brand); }

@media (max-width:767px){
  .carousel-caption{
	position:relative;
	left:auto; right:auto;
	width:100%;
	margin:10px 0 0 0;
  }
}
@media (min-width:768px) and (max-width:991px){
  .carousel-caption{
	position:absolute;
	top:10px;
	left:10px;
	width:52%;
  }
}
@media (min-width:992px){
  .carousel-caption{
	position:absolute;
	top:14px;
	left:14px;
	width:460px;
  }
}

.carousel-link{
  background:transparent;
  border:none;
  font-size:14px;
  margin-left:0;
  padding-left:0;
  text-shadow:none;
  text-decoration:underline;
  color:var(--text);
}
.carousel-link:hover{ color:var(--brand); }

/* ---------- Mobile Seitenränder für Text & Panels ---------- */
@media (max-width: 767px){

  /* Text/Panels wieder mit Seitenabstand wie im restlichen Layout */
  .content-left,
  .content-right{
	padding-left: 15px !important;
	padding-right: 15px !important;
  }

  /* falls irgendwo harte 0-Paddings auf Wrappern liegen */
  #content,
  #content .row{
	padding-left: 0 !important;
	padding-right: 0 !important;
  }

  /* Panels sollen nicht am Rand kleben */
  .panel{
	margin-left: 0 !important;
	margin-right: 0 !important;
  }
}

/* =========================================================
   Mobile Navbar: gleiche Seitenränder wie Content (15px)
   ========================================================= */
@media (max-width: 767px){
  #custom-bootstrap-menu > .container-fluid{
	padding-left: 15px !important;
	padding-right: 15px !important;
  }

  /* Logo nicht an den Rand drücken */
  #custom-bootstrap-menu .navbar-brand.sf-brand{
	padding-left: 0 !important;   /* Container hat schon 15px */
  }

  /* Burger ebenfalls innerhalb der 15px */
  #custom-bootstrap-menu .navbar-toggle{
	margin-right: 0 !important;
  }
}

/* =========================================================
   Mobile: Logo links & Burger rechts gleicher Randabstand
   ========================================================= */
@media (max-width: 767px){

  /* Bootstrap-negativen Versatz entfernen */
  #custom-bootstrap-menu .navbar-brand{
	margin-left: 0 !important;
  }

  /* Logo links: gleicher Rand wie Content */
  #custom-bootstrap-menu .navbar-brand.sf-brand{
	padding-left: 15px !important;
  }

  /* Burger rechts: gleicher Rand wie Content */
  #custom-bootstrap-menu .navbar-toggle{
	margin-right: 15px !important;
  }
}

/* =========================================================
   Mobile FINAL: Logo unverändert, Burger vertikal zentriert
   ========================================================= */
@media (max-width: 767px){

  /* Logo: exakt wie Desktop – NICHT anfassen */
  #custom-bootstrap-menu .navbar-brand.sf-brand{
	height: 64px !important;
	padding-top: 10px !important;
	padding-bottom: 10px !important;
  }

  #custom-bootstrap-menu .navbar-brand.sf-brand img{
	height: 42px !important;   /* Desktop-Größe */
  }

  /* Burger: vertikal mittig in 64px Navbar */
  #custom-bootstrap-menu .navbar-toggle{
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	margin: 0 !important;
  }
}
/* =========================================================
   CAROUSEL RESET/FIX (nur Carousel) – stabil in allen Breakpoints
   GANZ UNTEN ANHÄNGEN
   ========================================================= */

/* Grund: nichts darf überlaufen (verhindert “rausrutschen”) */
.carousel{ overflow: hidden; }

/* ---------- DESKTOP (>=992): Caption overlay wie früher ---------- */
@media (min-width: 992px){
  .carousel .carousel-caption{
	position: absolute !important;
	top: 14px !important;
	left: 14px !important;
	right: auto !important;
	width: 460px !important;
	margin: 0 !important;
  }
  .carousel-indicators{
	position: absolute !important;
	left: 50% !important;
	bottom: -34px !important;   /* wie vorher */
	transform: translateX(-50%) !important;
	margin: 0 !important;
  }
}

/* ---------- MOBILE + ÜBERGANG (<=991): Bild, Caption, Indicators untereinander ---------- */
@media (max-width: 991px){

  /* Caption unter das Bild, keine absolute Position */
  .carousel .carousel-caption{
	position: static !important;
	left: auto !important;
	right: auto !important;
	top: auto !important;

	width: auto !important;
	margin: 12px 15px 0 15px !important;
  }

  /* Indicators unter die Caption, zentriert */
  .carousel .carousel-indicators{
	position: static !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	transform: none !important;

	width: 100% !important;
	margin: 12px 0 0 0 !important;
	padding: 0 !important;
	text-align: center !important;
  }

  .carousel .carousel-indicators li{
	display: inline-block !important;
	float: none !important;
	margin: 0 4px !important;
  }
}

/* =========================================================
   CAROUSEL INDICATORS FIX (nach deinem Reset) – GANZ UNTEN
   ========================================================= */

/* Nicht den ganzen Carousel clippen, sonst verschwinden Indicators */
.carousel{ overflow: visible !important; }
.carousel-inner{ overflow: hidden !important; }

/* ---------- DESKTOP (>=992): Indicators sichtbar unten im Carousel ---------- */
@media (min-width: 992px){
  .carousel .carousel-indicators{
	position: absolute !important;
	left: 50% !important;
	bottom: 10px !important;                 /* sichtbar! */
	transform: translateX(-50%) !important;
	margin: 0 !important;
	z-index: 5 !important;
  }
}

/* ---------- MOBILE + ÜBERGANG (<=991): Indicators unter Caption ---------- */
@media (max-width: 991px){

  .carousel .carousel-indicators{
	position: static !important;
	left: auto !important;
	right: auto !important;
	top: auto !important;
	bottom: auto !important;

	transform: none !important;
	width: 100% !important;

	margin: 12px 0 0 0 !important;
	padding: 0 !important;

	text-align: center !important;
	z-index: auto !important;
  }

  .carousel .carousel-indicators li{
	display: inline-block !important;
	float: none !important;
	margin: 0 4px !important;
  }
}

/* =========================================================
   FINAL: Carousel Indicators IMMER unter dem Carousel
   (alle Breakpoints gleich)
   ========================================================= */

/* Carousel darf Indicators nicht abschneiden */
.carousel{
  overflow: visible !important;
}
.carousel-inner{
  overflow: hidden !important;
}

/* Indicators grundsätzlich aus dem Bildfluss lösen */
.carousel .carousel-indicators{
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;

  transform: none !important;

  width: 100% !important;
  margin: 14px 0 0 0 !important;
  padding: 0 !important;

  text-align: center !important;
}

/* Punkte sauber zentriert */
.carousel .carousel-indicators li{
  display: inline-block !important;
  float: none !important;
  margin: 0 4px !important;
}

/* =========================================================
   Carousel: Indicators IMMER unterhalb (ohne HTML ändern)
   ========================================================= */
.carousel{
  position: relative;              /* wichtig für Overlay-Caption (Desktop) */
  display: flex !important;
  flex-direction: column !important;
}

/* Bild/Slides immer zuerst */
.carousel .carousel-inner{
  order: 1 !important;
  overflow: hidden !important;
}

/* Indicators immer danach */
.carousel .carousel-indicators{
  order: 2 !important;

  position: static !important;
  width: 100% !important;
  margin: 14px 0 0 0 !important;
  padding: 0 !important;

  text-align: center !important;
  transform: none !important;
}

.carousel .carousel-indicators li{
  display: inline-block !important;
  float: none !important;
  margin: 0 4px !important;
}

.carousel .carousel-indicators{
  margin-top: -20px !important;
}

/* =========================================================
   TABLET + MOBILE: Content-Seitenränder wirklich erzwingen
   (robust, egal ob container-fluid 0 hat)
   ========================================================= */
@media (max-width: 991px){

  :root{ --edge: 15px; }

  /* 1) Den inneren Bootstrap-Container im Content einfassen */
  body > .container,
  body > .container-fluid,
  #content > .container,
  #content > .container-fluid,
  .content-wrapper > .container,
  .content-wrapper > .container-fluid{
    padding-left: var(--edge) !important;
    padding-right: var(--edge) !important;
  }

  /* 2) Rows dürfen nicht wieder „negativ“ nach außen ziehen */
  .container > .row,
  .container-fluid > .row{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 3) Spalten sollen den Rand nicht wieder kaputt machen */
  .container > .row > [class*="col-"],
  .container-fluid > .row > [class*="col-"]{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* =========================================================
   TABLET + MOBILE: Preis/Zusammenfassung nicht clippen + Sticky korrekt
   + Panel/Form-Container wieder abgerundet
   ========================================================= */
@media (max-width: 991px){

  /* --- 1) Sticky rechts deaktivieren (wie zuletzt gelöst) --- */
  .content-right.preise{
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
  }

  /* --- 2) Nichts darf rechts „abgeschnitten“ werden --- */
  /* häufige Ursache: irgendein Wrapper hat overflow:hidden */
  #content,
  #content .row,
  #content .content-left,
  #content .content-right,
  .content-right.preise{
    overflow: visible !important;
  }

  /* Wenn Tabellen/Zeilen in der Zusammenfassung nicht umbrechen -> Abschneiden */
  .content-right.preise .table,
  .content-right.preise .table-condensed,
  .content-right.preise td,
  .content-right.preise th{
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  /* --- 3) Panel/Form-Container: Rundungen wieder erzwingen --- */
  .panel,
  .panel-default{
    border-radius: var(--radius) !important;
    overflow: hidden !important; /* sorgt dafür, dass die Rundung sichtbar bleibt */
  }

  /* Panel-Header/Body sollen innen sauber mitrunden */
  .panel-heading{
    border-top-left-radius: var(--radius) !important;
    border-top-right-radius: var(--radius) !important;
  }
  .panel-body{
    border-bottom-left-radius: var(--radius) !important;
    border-bottom-right-radius: var(--radius) !important;
  }

}

  /* optional: falls irgendwo Inputs/Selects eckig wurden */
.form-control{
  border-radius: var(--radiusSm) !important;
}

/* =========================================================
   MOBILE: Burger bleibt oben fix in der Navbar (wandert nicht mit)
   ========================================================= */
@media (max-width: 767px){

  /* Header als Position-Referenz */
  #custom-bootstrap-menu .navbar-header{
    position: relative !important;
    min-height: 64px; /* muss zu deiner Navbar-Höhe passen */
  }

  /* Toggle oben rechts fix im Header */
  #custom-bootstrap-menu .navbar-toggle{
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    z-index: 10001 !important;
  }

  /* aufgeklapptes Menü beginnt unterhalb der Header-Zeile */
  #custom-bootstrap-menu .navbar-collapse{
    margin-top: 0 !important;
    padding-top: 8px !important;
  }
}

/* Styles auch für die kopierte Form in #hform anwenden */
#hform input[type="submit"],
#hform input[type="button"]{
  appearance:none;
  -webkit-appearance:none;
  border:1px solid rgba(0,0,0,.12);
  border-radius:10px;
  padding:8px 12px;
  font-size:13px;
  line-height:1.2;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}

/* falls du viele #form-Selektoren hast: */
#hform input[type="text"],
#hform input[type="password"],
#hform select{
  border:1px solid rgba(0,0,0,.12);
  border-radius:10px;
  padding:8px 10px;
  font-size:13px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}

/* =========================================================
   TABLET + MOBILE: Sticky wirklich komplett AUS
   (kein Wieder-Sticky am Seitenende)
   ========================================================= */
@media (max-width: 991px){

  /* Äußerer Preisblock */
  .content-right.preise{
    position: static !important;
    top: auto !important;
    bottom: auto !important;
  }

  /* Alle Kindelemente dürfen NICHT sticky/fixed sein */
  .content-right.preise *,
  .content-right.preise .panel,
  .content-right.preise .panel-default{
    position: static !important;
    top: auto !important;
    bottom: auto !important;
  }

  /* Sticky-Kontext-Killer: nichts darf clippen oder transformieren */
  .content-right.preise,
  .content-right.preise .panel,
  .content-right.preise .panel-default,
  #content,
  #content .row,
  #content .container,
  #content .container-fluid{
    overflow: visible !important;
    transform: none !important;
  }
}

/* =========================================================
   DESKTOP: Sticky EIN (nur hier)
   ========================================================= */
@media (min-width: 992px){
  .content-right.preise{
    position: sticky !important;
    top: 16px !important;
    align-self: flex-start;
    z-index: 2;
  }
}

/* =========================================================
   MOBILE: Tabelle – Spalten 2, 4, 5 komplett ausblenden
   (Header-Zeile ist normale <tr>, kein <thead>)
   ========================================================= */
@media (max-width: 767px){

  table tr > th:nth-child(2),
  table tr > th:nth-child(3),
  table tr > th:nth-child(4),
  table tr > td:nth-child(2),
  table tr > td:nth-child(3),
  table tr > td:nth-child(4){
    display: none !important;
  }
}

/* =========================================================
   Erste Spalte: großer Pfeil (▸ / ▼), kein Umbruch, kein Unterstrich
   ========================================================= */

table tbody tr td:first-child{
  white-space: nowrap;                 /* kein Umbruch */
}

table tbody tr td:first-child a[data-toggle="collapse"]{
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  text-decoration: none !important;    /* keine Unterstreichung */
  color: inherit;                      /* Textfarbe wie Tabelle */
}

table tbody tr td:first-child a[data-toggle="collapse"]::before{
  content: "▶";                        /* zugeklappt */
  font-size: 16px;                     /* großer Pfeil */
  line-height: 1;
  margin-right: 8px;
  transform: translateY(1px);          /* optisch zentrieren */
  color: #444;
  flex-shrink: 0;
}

table tbody tr td:first-child{
  a[data-toggle="collapse"][aria-expanded="true"]::before{
    content: "▼";                        /* aufgeklappt (&#9660;) */
  }
  padding-right: 20px !important;          /* Padding bringt hier nichts */
}
table tr > th:first-child{
  padding-left: 20px !important;          /* Padding bringt hier nichts */
  padding-right: 28px !important;          /* Padding bringt hier nichts */
  border-right: 6px solid transparent; /* echter Abstand */
  background-clip: padding-box;
}

table th{
  white-space: nowrap !important;
}

a.action-link{
  white-space: nowrap;
  flex-wrap: nowrap;
}

/* =========================================================
   Nested Accordion Toggle-Links:
   - immer schwarz
   - nie unterstrichen (auch hover/visited)
   - Pfeil ▶ / ▼ über aria-expanded
   ========================================================= */

/* 1) Link-Optik erzwingen */
a[data-toggle="collapse"]{
  color: #111827 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
}

/* alle Zustände */
a[data-toggle="collapse"]:hover,
a[data-toggle="collapse"]:focus,
a[data-toggle="collapse"]:active,
a[data-toggle="collapse"]:visited{
  color: #111827 !important;
  text-decoration: none !important;
  outline: none !important;
}

/* 2) Pfeil immer anzeigen */
a[data-toggle="collapse"]::before{
  content: "▶" !important;           /* zu */
  display: inline-block !important;
  font-size: 16px !important;
  line-height: 1 !important;
  margin-right: 8px !important;
  transform: translateY(1px);
  color: #444 !important;
  flex-shrink: 0 !important;
}

/* 3) Aufgeklappt -> ▼  (Bootstrap pflegt aria-expanded) */
a[data-toggle="collapse"][aria-expanded="true"]::before{
  content: "▼" !important;
}

/* =========================================================
   Accordion-Toggle (auch initial offen!)
   ========================================================= */

/* Grundstil */
a[data-toggle="collapse"]{
  color:#111827 !important;
  text-decoration:none !important;
  display:inline-flex !important;
  align-items:center !important;
  white-space:nowrap !important;
}

a[data-toggle="collapse"]:hover,
a[data-toggle="collapse"]:focus,
a[data-toggle="collapse"]:visited{
  color:#111827 !important;
  text-decoration:none !important;
}

/* Standard: zu */
a[data-toggle="collapse"]::before{
  content:"▶";
  font-size:16px;
  margin-right:8px;
  line-height:1;
  transform:translateY(1px);
  color:#444;
}

/* OFFEN, wenn:
   - aria-expanded=true
   - ODER Link nicht .collapsed
   - ODER das Ziel-.collapse bereits .in hat (Bootstrap 3!) */
a[data-toggle="collapse"][aria-expanded="true"]::before,
a[data-toggle="collapse"]:not(.collapsed)::before,
a[data-toggle="collapse"][href*="#collapse"] + .collapse.in,
.collapse.in[id] ~ a[data-toggle="collapse"]::before{
  content:"▼";
}