/* Wrapper für horizontales Scrollen auf mobilen Geräten */
.hp-table-wrapper {
    width: 100%;
    overflow-x: auto; /* scrollen erlauben */
    -webkit-overflow-scrolling: touch; /* sanftes Scrollen auf iOS */
}

/* Tabelle */
.hp-table { 
	width:100%; 
	min-width: 600px;
	border-collapse:collapse; 
	margin-top:10px; }
.hp-table th, 
.hp-table td { 
	border:1px solid #ccc; 
	padding:8px; 
	text-align:left; 
	vertical-align:middle; }

/* Fixierte erste Spalte */
.hp-table th:first-child,
.hp-table td:first-child {
    position: sticky;
    left: 0;
	background: #f9f9f9; /* gleiche Farbe wie Header / Tabelle */
    z-index: 2;
	box-shadow: 2px 0 5px -2px rgba(0,0,0,0.2); /* optional: leichter Schatten */
}

.hp-table th:not(:first-child),
.hp-table td:not(:first-child) {
	min-width: 200px;
}

/* Textfeld + Button nebeneinander */
.hp-table input[type=text] {
    width: 70%;
	margin: 0em;
	vertical-align: middle;   /* zentriert auf derselben Höhe */
    box-sizing: border-box;
}
.hp-table button {
    width: 24px;
    padding: 4px 6px;
	margin: 0em;
	line-height: 1.2;
    /*font-size: 16px;*/
    cursor: pointer;
}

/* Erfolg / Fehler Meldungen */
.hp-msg { background:#e8ffe8; padding:8px; border:1px solid #b3e6b3; margin-top:8px; }
.hp-error { background:#ffecec; padding:8px; border:1px solid #f5c6c6; margin-top:8px; color:#900; }

/* Mobile */
@media (max-width:700px) {
    #hp-selectors { display:block; gap:8px; }
    .hp-table th, .hp-table td { font-size:14px; padding:6px; }
    input[type=text], button { font-size:16px; padding:6px; width:100%; box-sizing:border-box; margin-bottom:4px;}
}

/* Drucken */
@media print {
    body * { visibility: hidden; }
    .hp-frontend, .hp-frontend * { visibility: visible; }
    .hp-frontend { position: absolute; left: 0; top: 0; width: 100%; }
    button, input { display:none !important; }
}