/* ============================================================
   Schiffahoi Design-Paket 1  (Stand 08.10.2026, v8)
   Wird als LETZTE CSS-Datei im <head> von main.htpl geladen
   (css/design-2026.css?v=10) und ueberschreibt gezielt
   Regeln aus my_layout.css.
   Header-Konzept: bis 1199px EINE kompakte Zeile
   (Logo | Telefon | Anfrage | Burger-Menue), ab 1200px
   erscheint die ausgeschriebene Navigation (navbar-expand-xl).
   Rueckbau: Link-Zeile in main.htpl entfernen + diese Datei
   vom Server loeschen.
   ============================================================ */

/* ----------------------------------------------------------
   1) Fixer Header: deckend statt halbtransparent
   ---------------------------------------------------------- */
#top-nav.navbar.fixed-top {
	background: #0b1f33 !important;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}

/* ----------------------------------------------------------
   2) Hero-Ueberschrift: moderne Schrift statt
      Serifen-Versalien mit hartem Schatten
   ---------------------------------------------------------- */
.main-message-topic,
.main-message-topic.text-uppercase {
	font-family: "Source Sans Pro", Arial, sans-serif !important;
	text-transform: none !important;
	font-weight: 700 !important;
	letter-spacing: .2px;
	text-shadow: 0 2px 16px rgba(0, 0, 0, .55) !important;
}
.main-message .description-image {
	font-family: "Source Sans Pro", Arial, sans-serif !important;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}

/* ----------------------------------------------------------
   3) Eine Button-Sprache: Blau (#005aa5 wie Preis-Buttons)
   ---------------------------------------------------------- */
.btn.background-gradient-light,
a.btn.background-gradient-light,
button.btn.background-gradient-light {
	background: linear-gradient(180deg, #0d6ebd 0%, #005aa5 100%) !important;
	border: 1px solid rgba(255, 255, 255, .6) !important;
	color: #ffffff !important;
}
.btn.background-gradient-light:hover,
.btn.background-gradient-light:focus,
a.btn.background-gradient-light:hover,
button.btn.background-gradient-light:hover {
	background: linear-gradient(180deg, #1a7ccb 0%, #0a66b4 100%) !important;
	color: #ffffff !important;
}

/* ----------------------------------------------------------
   4) Kachel-Titel lesbar: dunkler Verlauf hinter dem Titel
   ---------------------------------------------------------- */
.image-wrapper { position: relative; }
.image-wrapper .image-wrapper-text {
	background: linear-gradient(to top,
		rgba(7, 19, 33, .88) 0%,
		rgba(7, 19, 33, .55) 55%,
		rgba(7, 19, 33, 0) 100%) !important;
}
.image-wrapper .image-wrapper-text .angebot-name {
	text-shadow: 0 1px 3px rgba(0, 0, 0, .65);
}

/* ----------------------------------------------------------
   5) Header-Grundelemente
   ---------------------------------------------------------- */
#top-nav .container { align-items: center; }

/* Telefon-Button (Haupt-Conversion: Anrufe) */
.btn-tel-header {
	display: inline-flex;
	align-items: center;
	background: linear-gradient(180deg, #0d6ebd 0%, #005aa5 100%);
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 4px;
	color: #ffffff !important;
	font-weight: 600;
	padding: 7px 14px;
	text-decoration: none !important;
	white-space: nowrap;
	line-height: 1;
}
.btn-tel-header:hover,
.btn-tel-header:focus {
	background: linear-gradient(180deg, #1a7ccb 0%, #0a66b4 100%);
	color: #ffffff !important;
}
.tel-text-mobil { display: none; }
.btn-tel-header img {
	width: 15px;
	height: 15px;
	margin-right: 8px;
}

/* "Anfrage senden"-Button (viele Kunden schreiben lieber) */
.btn-mail-header {
	display: inline-flex;
	align-items: center;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .75);
	border-radius: 4px;
	color: #ffffff !important;
	font-weight: 600;
	padding: 7px 14px;
	text-decoration: none !important;
	white-space: nowrap;
	line-height: 1;
}
.btn-mail-header:hover,
.btn-mail-header:focus {
	background: rgba(255, 255, 255, .14);
	color: #ffffff !important;
}
.btn-mail-header img { width: 15px; height: 15px; margin-right: 8px; }

/* Burger-Menue: ohne "MENUE"-Schriftzug, kompakt (sichtbar bis 1199px) */
#top-nav .navbar-toggler .menuName { display: none; }

/* ----------------------------------------------------------
   6) Eine kompakte Header-Zeile bis 1199px
      (Handys UND Tablets: Logo | Telefon | Anfrage | Burger)
   ---------------------------------------------------------- */
@media (max-width: 1199.98px) {
	#top-nav .responsive-logo-default {
		display: block !important;
		flex: 0 0 auto;
		width: auto;
		max-width: 45%;
	}
	.btn-tel-header { margin-left: auto; }
	.btn-mail-header { margin-left: 8px; }
	/* aufgeklapptes Menue: volle Breite unter der Kopfzeile */
	#top-nav .container > .head-navi {
		order: 10;
		flex: 0 0 100%;
		width: 100%;
		max-width: 100%;
	}
	#top-nav { padding-top: 5px !important; padding-bottom: 5px !important; }
	#top-nav .container {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		padding-left: 12px !important;
		padding-right: 12px !important;
	}
}

/* Handys (bis 767px): kleineres Logo, "Anrufen" statt Nummer, nur Icons */
@media (max-width: 767.98px) {
	#top-nav .responsive-logo-default { max-width: 40%; }
	#top-nav #logo { max-height: 36px; width: auto; }
	.btn-tel-header .tel-text { display: none; }
	.btn-tel-header .tel-text-mobil { display: inline; font-weight: 600; }
	.btn-tel-header { padding: 8px 10px; }
	.btn-tel-header img { margin-right: 7px; }
	.btn-mail-header { padding: 8px 10px; margin-left: 6px; }
	.btn-mail-header .mail-text { display: none; }
	.btn-mail-header img { margin-right: 0; }
}

/* Sehr schmale Handys (unter 400px, z.B. Galaxy 360px): engere
   Abstaende, damit Logo | Anrufen | Mail | Burger in EINER Zeile
   bleiben (gefixt 08.10.2026, v9; getestet bis 320px runter) */
@media (max-width: 399.98px) {
	#top-nav .container { padding-left: 10px !important; padding-right: 10px !important; }
	#top-nav .responsive-logo-default { max-width: 36%; }
	.btn-tel-header { padding: 8px 8px; }
	.btn-tel-header img { margin-right: 5px; }
	.btn-mail-header { padding: 8px 8px; margin-left: 4px; }
	#top-nav .container > .d-xl-none { margin-left: 4px !important; }
}

/* Tablets (768-1199px): volle Nummer + "Anfrage senden", Logo 44px */
@media (min-width: 768px) and (max-width: 1199.98px) {
	#top-nav #logo { max-height: 44px; width: auto; }

	/* Menue-Button: eigener, sauber gezeichneter Burger
	   (Theme stylt ihn nur unter 768px) */
	#top-nav .container > .d-xl-none { order: 6; flex: 0 0 auto; width: auto; }
	#top-nav .navbar-toggler {
		display: inline-flex !important;
		flex-direction: column;
		justify-content: center;
		gap: 4px;
		margin: 0 !important;
		width: 42px;
		height: 34px;
		padding: 7px 10px !important;
		border: 1px solid rgba(255, 255, 255, .55);
		border-radius: 4px;
		background: transparent;
		float: none !important;
	}
	#top-nav .navbar-toggler .icon-bar {
		display: block !important;
		width: 20px;
		height: 2px;
		background: #ffffff;
		border-radius: 1px;
		float: none !important;
		margin: 0 !important;
	}
	#top-nav .navbar-toggler > span { float: none !important; display: contents; }
	/* aufgeklapptes Menue: kompakte Liste, Unterpunkte zu */
	#top-nav .head-navi ul { display: block; padding: 6px 0 10px 0; width: 100%; }
	#top-nav .head-navi ul li {
		float: none !important;
		display: block;
		margin: 0 !important;
		padding: 0 !important;
		border-top: 1px solid rgba(255, 255, 255, .08);
	}
	#top-nav .head-navi ul li a { display: block; padding: 11px 4px !important; line-height: 1.3; }
	#top-nav .head-navi ul li ul,
	#top-nav .head-navi ul li .navi_right_level_2 { display: none !important; }
}

/* ----------------------------------------------------------
   7) Ab 1200px: ausgeschriebene Navigation in einer Zeile
      Logo | Navigation | Telefon | Anfrage
   ---------------------------------------------------------- */
@media (min-width: 1200px) {
	#top-nav .responsive-logo-default {
		order: 1;
		flex: 0 0 auto;
		width: auto;
		max-width: 240px;
	}
	#top-nav .container > .head-navi {
		order: 2;
		flex: 1 1 auto;
		width: auto;
		max-width: none;
	}
	#top-nav .head-navi ul,
	#top-nav #navbar ul { justify-content: flex-end; }
	.btn-tel-header { order: 3; margin-left: 14px; padding: 7px 12px; }
	.btn-mail-header { order: 4; margin-left: 10px; }
	/* Logo groesser (Wunsch Enes 08.10.) */
	#top-nav #logo { max-height: 52px; width: auto; }
	#top-nav .container { padding-top: 6px !important; padding-bottom: 6px !important; }
}

/* Laptop (1200-1399px): Anfrage-Button nur als Icon und Navigation
   kompakter (v10, 08.10.2026: Platz fuer den neuen Hauptnavi-Punkt
   "Ueber uns" aus der CMS-Navigation), damit die Zeile nicht umbricht */
@media (min-width: 1200px) and (max-width: 1399.98px) {
	.btn-mail-header { padding: 8px 10px; }
	.btn-mail-header .mail-text { display: none; }
	.btn-mail-header img { margin-right: 0; }
	#top-nav #logo { max-height: 44px; }
	#top-nav .head-navi ul li a { font-size: .88em !important; padding-left: 8px !important; padding-right: 8px !important; }
	.btn-tel-header { margin-left: 10px; padding: 7px 10px; }
}

/* ----------------------------------------------------------
   8) Zeitgemaesse Inhaltsbreite: ab 1400px laufen ALLE
      Container gemeinsam auf 1320px (Bootstrap-5-Standard)
   ---------------------------------------------------------- */
@media (min-width: 1400px) {
	.container { max-width: 1320px; }
}