/**
 * Datei: style.css
 * Theme: MietPortalo Theme
 * Autor: MARKS MEDIA
 *
 * Zweck:
 *   Enthält alle globalen Design- und Typografie-Definitionen für das MietPortalo Theme.
 *   Alle modulbezogenen Layouts liegen im Plugin (modules.css).
 *
 * ============================================================
 * VARIABLEN-ÜBERSICHT
 * ============================================================
 *
 * Globale Farben
 *       --color-1           		Primärfarbe (Buttons, Links)
 *       --color-2           		Sekundärfarbe (Hover, Akzent)
 *       --color-3           		Akzentfarbe (z. B. Gelb für Icons, Marker)
 *       --color-4           		Haupttextfarbe
 *       --color-5           		Sekundärtextfarbe (grau)
 *       --color-6           		Rahmenfarbe (Tabellen, Boxen)
 *       --color-7           		Hellgrauer Hintergrund (Pills, Module)
 *       --color-8           		Weiß (Seitenhintergrund)
 *
 * Buttons
 *       --btn-primary-bg           Hintergrundfarbe primärer Button
 *       --btn-primary-color        Textfarbe primärer Button
 *       --btn-primary-hover        Hoverfarbe primärer Button
 *       --btn-secondary-bg         Hintergrund sekundärer Button
 *       --btn-secondary-color      Textfarbe sekundärer Button
 *       --btn-font-size            Schriftgröße Buttontext
 *       --btn-padding              Innenabstand Button
 *       --btn-radius               Eckenradius Button
 *       --btn-border               Rahmenfarbe Button (optional)
 *
 * Pills (Filter-Buttons, Status)
 *       --pill-bg                  Standardhintergrund
 *       --pill-bg-active           Hintergrund aktiv
 *       --pill-color               Textfarbe
 *       --pill-radius              Eckenradius
 *       --pill-border              Rahmenfarbe
 *		 --pill-padding				Innenabstand
 *
 * Typografie
 *       --font-body                Fließtext-Schriftart
 *       --font-heading             Überschrift-Schriftart
 *       --font-body-weight         Schriftstärke Fließtext
 *       --font-heading-weight      Schriftstärke Überschriften
 *       --font-size-base           Grundschriftgröße
 *
 * Struktur
 *       --container-width          Breite des Gesamt-Containers
 *       --content-width            Maximale Breite des Inhalts
 * ============================================================
 */

/* ============================================================
   1. Farb- und Schriftvariablen
============================================================ */
:root {
	--color-1: var(--mietp-primary, #006699);
	--color-2: var(--mietp-secondary, #cc3333);
	--color-3: var(--mietp-accent, #f7b91a);
	--color-4: var(--mietp-text, #333333);
	--color-5: var(--mietp-text-muted, #555555);
	--color-6: var(--mietp-border, #cccccc);
	--color-7: var(--mietp-surface, #f7f7f7);
	--color-8: var(--mietp-background, #ffffff);

	--header-bg: var(--mietp-header-bg, var(--color-8));
	--header-text: var(--mietp-header-text, var(--color-4));
	--block-bg: var(--mietp-block-bg, var(--color-8));
	--block-border: var(--mietp-block-border, var(--color-6));

	--btn-primary-bg: var(--color-1);
	--btn-primary-color: #ffffff;
	--btn-primary-hover: var(--color-2);
	--btn-secondary-bg: var(--mietp-btn-secondary-bg, #e5e5e5);
	--btn-secondary-color: var(--color-4);
	--btn-font-size: 15px;
	--btn-padding: 10px 18px;
	--btn-radius: 4px;
	--btn-border: transparent;

	--pill-bg: var(--color-7);
	--pill-bg-active: var(--color-1);
	--pill-color: var(--color-4);
	--pill-radius: 6px;
	--pill-border: var(--color-6);
	--btn-padding: 6px 14px;

	--font-body: "Roboto", Arial, sans-serif;
	--font-heading: "Roboto Condensed", Arial, sans-serif;
	--font-body-weight: 400;
	--font-heading-weight: 600;
	--font-size-base: 16px;

	--container-width: var(--container-width, 1600px);
	--content-width: var(--content-width, 1200px);
}

/* ============================================================
   1. Kopfzeile: Filter + Suche + Sortierung
============================================================ */
.mp-listing-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 15px;
}

.mp-listing-filter-left { display: flex; gap: 8px; }

.mp-filter-btn {
	padding: 6px 14px;
	border-radius: var(--pill-radius);
	font-size: 15px;
	cursor: pointer;
	transition: all 0.2s;
}

.mp-filter-btn.active {
	color: var(--color-8);
}

/* ============================================================
   2. Basis & Reset
============================================================ */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html, body {
	font-family: var(--font-body);
	font-size: var(--font-size-base);
	color: var(--color-4);
	background: var(--color-8);
	line-height: 1.6;
	overflow-x: hidden;
}
img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* ============================================================
   3. Typografie
============================================================ */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	color: var(--color-4);
	margin-bottom: 10px;
	line-height: 1.3;
}
h1 { font-size: 36px; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }
h4 { font-size: 20px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }

p { margin-bottom: 14px; }

/* ============================================================
   3b. Erweiterte Typografie
============================================================ */
ul, ol { margin: 0 0 16px 20px; padding-left: 20px; }
ul li, ol li { margin-bottom: 6px; line-height: 1.6; }
ul ul, ol ol { margin-top: 4px; margin-bottom: 6px; }

strong, b { font-weight: 600; color: var(--color-4); }
em, i { font-style: italic; color: var(--color-5); }

blockquote {
	border-left: 3px solid var(--color-6);
	margin: 10px 0 16px 0;
	padding: 8px 14px;
	color: var(--color-5);
	background: var(--color-7);
	font-style: italic;
}

code, pre {
	font-family: monospace;
	background: var(--color-7);
	padding: 2px 6px;
	border-radius: 3px;
	font-size: 14px;
	color: var(--color-4);
}
pre { overflow-x: auto; padding: 10px; white-space: pre-wrap; }

/* ============================================================
   4. Links
============================================================ */
a { color: var(--color-1); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--color-2); text-decoration: underline; }

/* ============================================================
   5. Buttons
============================================================ */
button.mp-button,
.mp-button {



	display: block;
	padding: var(--btn-padding);
	margin: 5px auto;

	max-width: 250px;
	width: 100%;
	text-align: center;
	
	border-radius: var(--btn-radius);
	border: 1px solid var(--btn-border);
	font-size: var(--btn-font-size);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.mp-button-primary { background: var(--btn-primary-bg); color: var(--btn-primary-color); }
.mp-button-primary:hover { background: var(--btn-primary-hover); }
.mp-button-secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-color); }
.mp-button-secondary:hover { background: var(--btn-primary-hover); color: #fff; }

.mp-btn-edit-listing { background: var(--color-3); color: var(--btn-primary-color); }
.mp-btn-edit-listing:hover { background: var(--btn-primary-hover); color: #fff; }
.mp-btn-edit-user { background: var(--color-2); color: var(--btn-primary-color); }
.mp-btn-edit-user:hover { background: var(--btn-primary-hover); color: #fff; }


/* ============================================================
   6. Pills / Filter Buttons
============================================================ */
.mp-pill,
.mp-filter-btn {
	display: inline-block;
	padding: var(--pill-padding);
	border-radius: var(--pill-radius);
	background: var(--pill-bg);
	color: var(--pill-color);
	border: 1px solid var(--pill-border);
	font-size: 14px;
	cursor: pointer;
}

.mp-pill:hover,
.mp-filter-btn:hover {
	background: var(--pill-bg-active);
}

.mp-pill.active,
.mp-filter-btn.active {
	background: var(--pill-bg-active);
	color: var(--pill-color);
	border: 1px solid var(--pill-border);
}

/* ============================================================
   6a. Standort-Dropdown
============================================================ */
#mp-location-list {
	position: absolute;
	z-index: 100;
	background: var(--color-7);
	border: 1px solid var(--color-6);
	border-radius: 6px;
	margin-top: 6px;
	width: 100%;
	box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
#mp-location-list .mp-location-option {
	padding: 8px 10px;
	cursor: pointer;
	color: var(--color-4);
	transition: background 0.2s ease, color 0.2s ease;
}
#mp-location-list .mp-location-option:hover {
	background: var(--color-6);
	color: var(--color-4);
}

/* ============================================================
   6b. Galerie-Navigation (hell, global)
============================================================ */
/* ============================================================
   Einheitliches Pfeil-Design für alle Galerie-Ebenen
============================================================ */
/* Universelle Galerie-Pfeile */
.mp-gallery-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	background: rgba(0,0,0,0.4);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 20;
	transition: background .2s ease;
}
.mp-gallery-arrow:hover { background: rgba(0,0,0,0.6); }
.mp-gallery-arrow i { color:#fff; font-size:18px; line-height:1; }

/* Position im Hauptbild */
.mp-gallery-main .mp-gallery-arrow.prev { left: 10px; }
.mp-gallery-main .mp-gallery-arrow.next { right: 10px; }

/* Position im Overlay um das Bild herum */
.mp-gallery-overlay-inner { position: relative; max-width: 900px; width: 100%; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; }
.mp-gallery-overlay-image { max-width: 100%; max-height: 75vh; object-fit: contain; border-radius: 8px; box-shadow: 0 0 12px rgba(0,0,0,0.6); }
.mp-gallery-overlay-inner .mp-gallery-arrow.prev { left: -60px; }
.mp-gallery-overlay-inner .mp-gallery-arrow.next { right: -60px; }

/* Close-Button wie Pfeile, außen an der Ecke */
.mp-gallery-overlay-close {
	position: absolute;
	top: -20px; right: -20px;
	width: 44px; height: 44px;
	display:flex; align-items:center; justify-content:center;
	border:none; border-radius:50%;
	background: rgba(0,0,0,0.4); color:#fff;
	z-index:30; cursor:pointer; transition:background .2s ease;
}
.mp-gallery-overlay-close:hover { background: rgba(0,0,0,0.6); }
.mp-gallery-overlay-close i { font-size:20px; color:#fff; }

.mp-gallery-thumbs-wrap { position: relative; } /* falls noch nicht gesetzt */
.mp-gallery-overlay-thumbs { position: relative; }

.mp-gallery-thumbs-wrap .mp-gallery-arrow.prev,
.mp-gallery-overlay-thumbs .mp-gallery-arrow.prev { left: 4px; }

.mp-gallery-thumbs-wrap .mp-gallery-arrow.next,
.mp-gallery-overlay-thumbs .mp-gallery-arrow.next { right: 4px; }

/* Globale Infoleiste */
.mp-gallery-info {
	position: absolute;
	bottom: 10px;
	left: 0;
	right: 0;
	text-align: center;
	background: rgba(0,0,0,0.55);
	color: #fff;
	font-size: 14px;
	padding: 6px 10px;
	border-radius: 0 0 4px 4px;
}

/* ============================================================
   7. Eingabefelder
============================================================ */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="url"],
input[type="tel"],
textarea,
select {
	width: 100%;
	padding: 8px 4px;
	font-size: 15px;
	border: none;
	border-bottom: 1px solid var(--color-6);
	background: transparent;
	outline: none;
	transition: border-color 0.2s ease;
}
input:focus,
textarea:focus,
select:focus {
	border-bottom: 2px solid var(--color-2);
}

/* ============================================================
   7b. Globale Buttons & Formular-Aktionen
============================================================ */
button.mp-button,
input[type="submit"],
input[type="button"],
.mp-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--btn-font-size);
	font-weight: 500;
	padding: var(--btn-padding);
	border-radius: var(--btn-radius);
	border: 1px solid transparent;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	max-width: 250px;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
}
button.mp-button,
.mp-button-primary,
input[type="submit"] {
	background: var(--btn-primary-bg);
	color: var(--btn-primary-color);
	border-color: var(--btn-primary-bg);
}
button.mp-button:hover,
.mp-button-primary:hover,
input[type="submit"]:hover {
	background: var(--btn-primary-hover);
	border-color: var(--btn-primary-hover);
	color: #fff;
}
.mp-button-secondary {
	background: var(--btn-secondary-bg);
	color: var(--btn-secondary-color);
	border-color: var(--btn-border, var(--btn-secondary-bg));
}
.mp-button-secondary:hover { background: var(--btn-primary-hover); color: #fff; }
.mp-button-light {
	background: var(--color-7);
	color: var(--color-4);
	border: 1px solid var(--color-6);
}
.mp-button-light:hover { background: var(--color-8); border-color: var(--color-5); }
button.mp-button:disabled,
input[type="submit"]:disabled,
.mp-button:disabled { opacity: 0.6; cursor: not-allowed; }


/* ============================================================
   7c. Checkboxen, Radiobuttons, Kalender
============================================================ */
input[type="checkbox"],
input[type="radio"] {
	width: auto;
	height: auto;
	accent-color: var(--color-1);
	cursor: pointer;
	transform: scale(1.05);
}
.flatpickr, input[type="date"] { cursor: pointer; }
textarea { resize: vertical; min-height: 100px; }

/* ============================================================
   8. Globale Elemente
============================================================ */
hr { border: 0; border-top: 1px solid var(--color-6); margin: 20px 0; }
.hinweistext { font-size: 14px; color: #777; line-height: 1.5; }

/* ============================================================
   9. White-Blocks & Layout
============================================================ */
.mp-white-block {
	background: var(--color-8);
	border: 1px solid var(--block-border);
	border-radius: 10px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
	padding: 20px;
	margin-bottom: 0px;		/* original: margin-bottom: 20px; */
}
.mp-white-block-title {
	font-size: var(--font-size-h3-desktop, 24px);
	font-weight: 600;
	color: var(--color-4);
	border-bottom: 1px solid var(--color-6);
	margin-bottom: 10px;
	padding-bottom: 6px;
	line-height: 1.3;
}

/* ============================================================
   10. Container, Row & Col
============================================================ */
.mp-container { max-width: var(--container-width); margin: 0 auto; padding: 0px; }

.mp-content,
.mp-container .mp-inner {
	max-width: var(--content-width);
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.mp-row { display: flex; flex-wrap: wrap; gap: 20px; padding: 20px;}
.mp-col { flex: 1 1 0; min-width: 0; }

.mp-col-12 { flex: 0 0 100%; }
.mp-col-8  { flex: 0 0 calc(66.6667% - 10px); }
.mp-col-7  { flex: 0 0 calc(58.3333% - 10px); }
.mp-col-6  { flex: 0 0 calc(50% - 10px); }
.mp-col-5  { flex: 0 0 calc(41.6667% - 10px); }
.mp-col-4  { flex: 0 0 calc(33.3333% - 10px); }

@media (max-width: 900px) {
	.mp-col-12, .mp-col-8, .mp-col-7, .mp-col-6, .mp-col-5, .mp-col-4 { flex: 0 0 100%; }
}
/* ============================================================
   PROFILBEREICH: 1-Spalten-Layout (Tabs: Benutzerdaten, Standorte,
   Öffnungszeiten, Social Media, Passwort)
   ============================================================ */
.mp-profile-area .mp-col-5,
.mp-profile-area .mp-col-6,
.mp-profile-area .mp-col-7 {
    flex: 0 0 100% !important;
}

/* ============================================================
   11. Responsive Schriftgrößen
============================================================ */
@media (max-width: 1024px) {
	h1 { font-size: 32px; } h2 { font-size: 28px; } h3 { font-size: 22px; }
	h4 { font-size: 18px; } h5 { font-size: 16px; } h6 { font-size: 15px; }
}
@media (max-width: 768px) {
	h1 { font-size: 28px; } h2 { font-size: 24px; } h3 { font-size: 20px; }
	h4 { font-size: 17px; } h5 { font-size: 15px; } h6 { font-size: 14px; }
}
/* ============================================================
   Beschreibung mit Weiterlesen (wie mobile.de)
============================================================ */
.mp-description-wrap {
	position: relative;
	max-height: 320px; /* Desktop-Höhe */
	overflow: hidden;
	transition: max-height 0.4s ease;
}
@media (max-width: 768px) {
	.mp-description-wrap { max-height: 180px; }
}

.mp-description-fade {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 80px;
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 100%);
	pointer-events: none;
	transition: opacity 0.3s ease;
}

/* ============================================================
   Beschreibung mit Weiterlesen (wie mobile.de)
============================================================ */
.mp-description-wrap {
	position: relative;
	max-height: 320px; /* Desktop */
	overflow: hidden;
	transition: max-height 0.4s ease;
}
@media (max-width: 768px) {
	.mp-description-wrap { max-height: 180px; }
}

.mp-description-fade {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 80px;
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 100%);
	pointer-events: none;
	transition: opacity 0.3s ease;
}

/* ============================================================
   Beschreibung mit Weiterlesen / Schließen
============================================================ */
#mp-desc-box {
	position: relative;
	overflow: visible;
}

#mp-desc-box .mp-description-wrap {
	max-height: 320px;
	overflow: hidden;
	position: relative;
	transition: max-height .4s ease;
}

@media (max-width:768px){
	#mp-desc-box .mp-description-wrap {
		max-height: 180px;
	}
}

#mp-desc-box .mp-description-fade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 80px;
	background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
	pointer-events: none;
	transition: opacity .3s ease;
	z-index: 1;
}

#mp-desc-box.mp-description-open .mp-description-wrap {
	max-height: none;
}

#mp-desc-box.mp-description-open .mp-description-fade {
	opacity: 0;
}

#mp-desc-more,
#mp-desc-less {
	display: block;
	margin: 12px auto 0;
}










/* ===============================================
Formfelder in Tab Profil
   =============================================== */
.mp-field {
	display: flex;
	flex-direction: column;
	margin-bottom: 15px;
}

.mp-field-row {
	display: flex;
	gap: 20px;
	width: 100%;
}

.mp-field-row .mp-field {
	flex: 1;
}

.mp-field label {
	font-size: 0.9rem;
	font-weight: 500;
	margin-bottom: 5px;
	color: #333;
}

.mp-field input,
.mp-field select,
.mp-field textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-size: 0.95rem;
	transition: border-color 0.2s ease;
}

.mp-field input:focus,
.mp-field select:focus,
.mp-field textarea:focus {
	border-color: #0073aa;
	outline: none;
}



/* ============================================================
   PROFILBEREICH: modernes Formularfeld-Design (Underline)
   ============================================================ */
.mp-profile-area .mp-field input,
.mp-profile-area .mp-field select,
.mp-profile-area .mp-field textarea {
    border: none !important;
    border-bottom: 2px solid var(--color-6) !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 8px 4px !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease;
}

.mp-profile-area .mp-field input:focus,
.mp-profile-area .mp-field select:focus,
.mp-profile-area .mp-field textarea:focus {
    border-bottom-color: var(--color-1) !important;
}








/* =============================== */
/* GLOBAL: Formular-Framework      */
/* =============================== */

.mp-form .mp-field input,
.mp-form .mp-field select,
.mp-form .mp-field textarea {
    border: none !important;
    border-bottom: 2px solid var(--color-6) !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 8px 4px !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease;
}

.mp-form .mp-field input:focus,
.mp-form .mp-field select:focus,
.mp-form .mp-field textarea:focus {
    border-bottom-color: var(--color-1) !important;
}

/* Einheitliche Checkboxen + Radiobuttons */
.mp-form input[type="checkbox"],
.mp-form input[type="radio"] {
    accent-color: var(--color-1);
    transform: scale(1.1);
    cursor: pointer;
}
/* GLOBAL: Checkboxen & Radiobuttons sauber links neben dem Text */
.mp-form label,
.mp-form .mp-field label {
    display: flex !important;
    align-items: center;
    gap: 10px;
}

.mp-form label input[type="checkbox"],
.mp-form label input[type="radio"] {
    margin: 0;
}


/* ============================================================
   ADMINBAR + HEADER – ENDGÜLTIGES, FEHLERFREIES SETUP
   ============================================================ */

/* 1) WordPress Adminbar fix oben */
#wpadminbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 99999 !important;
}

/* 2) Wenn Sticky Header aktiv → Header unter die Adminbar schieben */
:root[style*="--header-sticky: 1"] header.site-header {
    position: fixed !important;
    top: 32px !important;               /* Desktop-Adminbar */
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9000 !important;           /* Unter Adminbar-Dropdowns */
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* Mobile Adminbar (größer) */
@media (max-width: 782px) {
    :root[style*="--header-sticky: 1"] header.site-header {
        top: 46px !important;
    }
}

/* 3) Inhalt nach unten verschieben, damit nichts verdeckt wird */
:root[style*="--header-sticky: 1"] body {
    padding-top: calc(var(--header-height) + 32px) !important;
}

@media (max-width: 782px) {
    :root[style*="--header-sticky: 1"] body {
        padding-top: calc(var(--header-height) + 46px) !important;
    }
}

/* 4) Sicherstellen, dass die Adminbar nicht abgeschnitten wird */
body.admin-bar {
    overflow: visible !important;
}

/* ============================================================
   STANDARD HEADER (nicht sticky)
   ============================================================ */
header.site-header {
    background: var(--header-bg);
    color: var(--header-text);
    width: 100%;
    border-bottom: 1px solid var(--block-border);
    z-index: 9000; /* Unter Adminbar-Dropdowns */
    font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
}

/* Header-Inhalt */
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 28px;
    max-width: var(--footer-width, 1200px);
    margin: 0 auto;
    min-height: var(--header-height, 60px);
}






/* ============================================================
   LOGIN-DROPDOWN (Header)
   ============================================================ */

.login-dropdown {
    position: absolute;
    top: 56px;
    right: 0;
    width: 300px;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 4px 18px rgba(0,0,0,0.08);
    border-radius: 8px;
    padding: 15px;
    z-index: 9999;
}

/* Tabs */
.login-tabs {
    display: flex;
    margin-bottom: 12px;
    border-bottom: 1px solid #eee;
}

.login-tabs .tab {
    flex: 1;
    padding: 8px 0;
    text-align: center;
    font-size: 15px;
    cursor: pointer;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
}

.login-tabs .tab.active {
    border-bottom: 2px solid var(--color-1, #006699);
    font-weight: 600;
}

/* Inputs */
#mp-ajax-login-form input[type="text"],
#mp-ajax-login-form input[type="password"] {
    width: 100%;
    margin-bottom: 10px;
    padding: 10px 8px;
    background: transparent;
    border: none;
    border-bottom: 1px solid #ddd;
    font-size: 15px;
}

#mp-ajax-login-form input:focus {
    outline: none;
    border-bottom-color: #006699;
}

/* Passwort vergessen */
.pw-forgot {
    display: inline-block;
    font-size: 13px;
    color: #006699;
    margin-bottom: 12px;
}

/* Login Button */
.btn-login {
    width: 100%;
    padding: 10px;
    background: #006699;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    cursor: pointer;
    margin-bottom: 10px;
}

.btn-login.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Rückmeldungen */
.login-message {
    font-size: 14px;
    margin-bottom: 10px;
}

.login-message.error {
    color: #cc3333;
}

.login-message.success {
    color: #28cc00;
}

/* Social Login Buttons */
.social-login {
    margin-top: 10px;
}

.social-btn {
    width: 100%;
    padding: 10px;
    margin-bottom: 8px;
    border-radius: 6px;
    border: 1px solid #ddd;
    background: #f7f7f7;
    cursor: pointer;
    font-size: 14px;
}

.social-btn:hover {
    background: #eee;
}



/* ============================================================
   MietPortalo – Suchformular (bb-search)
   Frontend-Design – Theme-Version
============================================================ */

.mp-search-form {
	display: flex;
	gap: 12px;
	align-items: center;
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
}

/* Input nach MietPortalo-Standard: Unterstrich, keine Box */
.mp-search-input {
	flex: 1;
	font-size: 16px;
	padding: 10px 0;
	background: transparent;
	border: none;
	border-bottom: 2px solid #ccc;
	outline: none;
	transition: border-color 0.2s ease;
}

.mp-search-input:focus {
	border-bottom-color: #006699;
}

/* Button kompatibel zum MP-Button-System */
.mp-search-btn {
	padding: 10px 18px;
	font-size: 16px;
	background: var(--color-1);
	color: #fff;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.2s ease;
}

.mp-search-btn:hover {
	background: var(--color-text-hover);
}

/* Mobile Optimierung */
@media (max-width: 600px) {
	.mp-search-form {
		flex-direction: column;
		align-items: stretch;
	}

	.mp-search-btn {
		width: 100%;
	}
}