/* Anwendung Webauftritt Familienarchiv 
V01.0 22.06.2026 Ersterstellung   
26.07.2026 V2.2 Formular login-form mit 1 Spalte login in index
28.07.2026 V2.3 Konsolidierung
30.07.2026 V2.3 kompletter Neuaufbau 
02.08.2026 V2.4 fa_bilddaten_editieren ergänzt
21.08.2026 V2.7 fa_home Intro vor slideshow
21.08.2026 V3.0 überflüssige Kommentare und debug gelöscht

==============================
   Z-INDEX SYSTEM
   0    background / overlay
   10   page content
   20   image UI
   100  header
   200  mobile navigation
   1000 modal / lightbox
============================== 
 */

/*für test box-rahmen
  border: 2px solid rgb(86, 6, 117) !important;  */

  /* ===================== */
/* A Grundlayout */
/* ===================== */
/* zentraler html und body */
html, body { /*iO*/
    margin: 0;           /* entfernt Ghostscroll */
    padding: 0;
    height: 100%;
    font-family: Arial, sans-serif;
    overflow-x: hidden;    /* 03.04.2026 verhindert seitliches scrollen insbesondere auf dem handy */
    overflow-y: hidden;
}

/* globale Variablen für Höhe header und footer */
:root {/*iO*/
  --header-height: 100px;
  --footer-height: 30px;
}

@media (max-width: 768px) {
  :root {/*iO*/
    --header-height: 130px;
    --footer-height: 45px;
  }
}

/* content immer zwischen topbar und footer */
main {/*iO*/
    display: flex;
    flex-direction: column;
    /*flex: 1;                       nimmt verfügbare Höhe zwischen Header & Footer */
   /* margin-top: 10px; */
    /*margin-bottom: calc(var(--footer-height) + 60px); */
    /*margin-bottom: calc(var(--footer-height));*/
    top: var(--header-height);
    bottom: var(--footer-height);
    
    /* height: calc(100vh - 200px); height: calc(100dvh - 200px); wird mit flex: 1 übersteuert */
    overflow-y: auto;              /* nur Main scrollt */
    position: relative;            /* für absolute Kinder wie Slideshow Caption */
    /* border: 5px solid rgb(80, 33, 167); für Test bei layout box */
}

/* Definition der main Bereiche , um scrollen in der Tabelle zu ermögliche */
main.main-table {
    display: flex;
    flex-direction: column;

    position: fixed;
    top: var(--header-height);
    bottom: var(--footer-height);
    left: 0;
    right: 0;

    overflow: hidden;
}

main.main-home {
    position: fixed;
    top: var(--header-height);
    bottom: var(--footer-height);
    left: 0;
    right: 0;

    overflow-y: auto;
}

/* ===================== */
/* E Grundlayout */
/* ===================== */

/* ===================== */
/* A index.php mit login */
/* ===================== */
.login-box {/*iO*/
    width: 400px;
    margin: 50px auto;
    padding: 5px;
    background: rgb(176, 191, 231);    
    border: 2px solid #110202;
    border-radius: 4px;    
}
@media (max-width: 768px) {
    .login-box {/*iO*/
        width: 200px;
    }
}

.login-box h2 {/*iO*/
    font-size: clamp(14px, 1.2vw, 18px); /* passt SG dynamisch an min, bevorzugt, max wert */
    text-align: center; /*zentriert Überschriften */
}

.login-box input {/*iO*/
    box-sizing: border-box;  /* richtet input-feld an box aus */
    border: 1px solid #272222;
}

.login-box button {/*iO*/
    background: black;
    color: white;
    border: 4px solid #6ce61b;
    cursor: pointer;
}

.login-box input,
.login-box button {/*iO*/
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    border-radius: 4px;
    font-size: clamp(12px, 1.2vw, 14px); /* passt SG dynamisch an min, bevorzugt, max wert */
}

.login-box .error {/*iO*/
    color: red;
    margin-top: 10px;
}
/* ===================== */
/* E index.php mit login */
/* ===================== */

/* ===================== */
/* A fa_admin admin-box und usertabelle*/
/* ===================== */
.admin-box {/*iO*/
    width: 400px;
    /* margin: calc(var(--header-height) + 20px) auto 0; <main> berücksichtigt bereits header */
    margin: 10px auto 0;
    padding: 5px;
    background: rgb(176, 191, 231);    
    border: 2px solid #110202;
    border-radius: 4px;    
}

.admin-box h2 {/*iO*/
    font-size: clamp(14px, 1.2vw, 18px); /* passt SG dynamisch an min, bevorzugt, max wert */
    text-align: center; /*zentriert Überschriften */
}

.admin-box input {/*iO*/
    box-sizing: border-box;  /* richtet input-feld an box aus */
    border: 1px solid #272222;
}

.admin-box button {/*iO*/
    background: black;
    color: white;
    border: 4px solid #6ce61b;
    cursor: pointer;
}

.admin-box input,
.admin-box button {/*iO*/
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    border-radius: 4px;
    font-size: clamp(12px, 1.2vw, 14px); /* passt SG dynamisch an min, bevorzugt, max wert */
}

.admin-box .error {/*iO*/
    color: red;
    margin-top: 10px;
}

.benutzer-tabelle {
    /* max-height: 350px; kann entfallen max höhe über main definiert */
    overflow-y: auto;
    margin-top: 10px;
}

.benutzer-tabelle table {
    border-collapse: collapse;
    width: 100%;
}

.benutzer-tabelle th,
.benutzer-tabelle td {
    border: 1px solid #ccc;
    padding: 5px;
}
/* Kopfzeile bleibt stehen */
.benutzer-tabelle th {
    position: sticky;
    top: 0;
    border: 1px solid #1f0e0e;
    background: rgb(186, 158, 238);
    z-index: 1;
}

/* ===================== */
/* E fa_admin admin-box und usertabelle*/
/* ===================== */
/* ============================== */
/* A fa_up_head.php */
/* ============================== */
/* kein CSS
/* ============================== */
/* E fa_up_head.php */
/* ============================== */

/* ============================== */
/* A fa_up_menue.php */
/* ============================== */
/* A topbar für menue */
.topbar {/*iO*/
  position: fixed;
  top: 0;
  left: 0;
  right: 0;   /* fixed element braucht Randabstände für max Breite / Höhe, ansonsten Breite berechnet nach Inhalt */
  height: var(--header-height);
  border: 2px solid #110303;
  background: rgba(179, 216, 214, 0.9);
  backdrop-filter: blur(8px);
  z-index: 3000;
}

.topbar-inner {/*iO*/
  position: relative;
  max-width: 1200px;
  height: 90%;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* E topbar für menue */

/* A logo */
/* A Für alle medias Logo links und an topbar hängen */
/*Element*/
.logo {/*iO*/
  position: relative;     /* kein fixed mehr */
  left: 0;
  top: 0;
  z-index: 210;
}
/* gilt für Bild im Element*/
.logo img {/*iO*/
  height: 80px;
  width: auto;
  display: block;
  /* wegen Überlappung icon und Menue im Übergang von Tablet zu Handy mit Burger-menue*/
  opacity: 0.8;   /* 0 = unsichtbar | 1 = voll sichtbar */
}
/* A Für Handy Logo zentriert*/
/* Änderungen für logo dynasmisch positionieren*/
@media (max-width: 768px) {
  .logo {/*iO*/
    position: absolute;
/* Änderung zentriert und 5px von oben */
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
  }
/* Reset von: durchscheinend wegen Überlappung icon und Menue im Übergang von Tablet zu Handy mit Burger-menue*/
  .logo img {/*iO*/  
  opacity: 1;   /* 0 = unsichtbar | 1 = voll sichtbar */
  }
  /* icon CSV Bearbeitung linksbündig für handy */
  .admin-link {/*iO*/
    margin-right: auto; /* schiebt alles andere nach rechts */
    display: flex;
    align-items: center;
  }
}
/* E Für alle medias Logo links und an topbar hängen*/
/* E logo

/* V2.3 A allgemein CSS für Navigation */
.main-nav {/*iO*/
  display: flex;
  justify-content: center;
  position: fixed;
  top: 55px;
  left: 50%;
  column-gap: 15px;
  row-gap: 2px;
  transform: translateX(-50%);
  width: min(600px, 90%);  
  flex-wrap: wrap;         /* 🔥 wichtig */
  z-index: 200;
}

/* A neuer Stand Animaton Auswahlpunkt */
.main-nav a {/*iO*/
  position: relative;
  text-decoration: none;
  color: #222;
  font-size: clamp(12px, 1.2vw, 14px); /* passt SG dynamisch an min, bevorzugt, max wert */
  font-weight: 400;
  letter-spacing: 0.5px;
  transition: color 0.3s ease;
}

.main-nav a::after {/*iO*/
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 1px;
  background: #c6a75e;   /* warmes Kunst-Gold */
  transition: width 0.35s ease;
}

.main-nav a:hover {/*iO*/
  background: rgba(160,25,25,0.05);
  color: #a01919;
}
 
/* Ankerelement für dropdown-content */
.dropdown {
    position: relative;
    display: inline;
    border: none;
    padding: 0;
    color: #222;
    font-size: clamp(12px, 1.2vw, 14px);
    font-weight: 400;
}

/* Menue Auswahlpunkt */
.dropbtn {/*iO*/
  background: transparent;  /* lässt Hintergrundfarbe durchscheinen, d h keine weiße Box um Text */
  border: none;
  font: inherit;
  color: inherit;
  padding: 0;
  margin: 0;
  line-height: inherit;
  vertical-align: middle;
  cursor: pointer;
  font-size: clamp(12px, 1.2vw, 14px);
  letter-spacing: 0.5px;
}

/* content-box für Auswahlpunkte */
.dropdown-content {/*iO*/
  position: absolute;
  max-height: 70vh;   /* 70 % der Fensterhöhe */
  overflow-y: auto;   /* inhalte scrollbar */
  display: none;      /*blendet Liste aus */
  background: rgb(233, 212, 212); /* Hintergrundfarbe der dropdown-box */
  min-width: 180px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);  /* Schlagschatten dropdown-box*/
  z-index: 1000;
  border-radius: 6px;
}

/* Auswahlelemente */
.dropdown-content a {/*iO*/
  display: block;
  padding: 5px 5px 0px 5px;  /* todo wirkung?*/
  font-size: clamp(12px, 1.2vw, 14px); /* passt SG dynamisch an min, bevorzugt, max wert */
  letter-spacing: 0.5px;
  text-decoration: none;
  color: black;
}

.dropdown-content a:hover {/*iO*/
  background: #f1e5e5;  /* Hintergrundfarbe dropdown listeneintrag bei hoover */
}
/* Öffner dropdown-box per hoover am Desktop */
.dropdown:hover .dropdown-content {/*iO*/
  display: block;
}
/* V2.3 E allgemein CSS für Navigation */

/* A Burger Menue */
/* Burger-Menue wird für Desktop deaktiviert */
.burger {/*iO*/
    display: none;
}

/* Burger CSS für Handy */
@media (max-width: 768px) {

  /* Burger-Button */
  .burger {/*iO*/
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 22px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 220;
    position: absolute;
    top: 50px;
    right: 20px;
  }

  .burger span {/*iO*/
    display: block;
    height: 3px;
    width: 100%;
    background-color: #111;
    border-radius: 2px;
    transition: all 0.3s ease;
  }

  .burger.active span:nth-child(1) {/*iO*/
    transform: rotate(45deg) translate(5px, 5px);
  }

  .burger.active span:nth-child(2) {/*iO*/
    opacity: 0;
  }

  .burger.active span:nth-child(3) {/*iO*/
    transform: rotate(-45deg) translate(5px, -5px);
  }

/* A Mobile Navigation Hauptmenue wird über Burger dargestellt*/
  .main-nav {/*iO*/
    top: 130px;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;      /* 🔥 Box passt sich Text an */
    min-width: 220px;        /* optional, für Optik */
    padding: 0;          /* 🔑 nur minimal */
    gap: 0;                  /* ❗ wichtig */

    display: none;
    flex-direction: column;

    background: #fff; 
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  
    z-index: 999;
  }
   
  .main-nav.active {/*iO*/
    display: flex;
    animation: slideDown 0.25s ease-out;
  }

  .main-nav a {/*iO*/
    display: block;
    padding: 6px 14px; /* 🔥 hier steuert man die Höhe */
    line-height: 1.3;    /* ❗ kein unnötiger Zeilenabstand */
    margin: 0;

   /* color: #111;
    white-space: nowrap; */
   /* font-size: 15px;   desktop 14 */
   /* letter-spacing: 0.08em; desktop 0.5px */
   /* transition: background 0.2s, color 0.2s; s. Desktop */
  }
 
/* E Mobile Navigation Hauptmenue wird über Burger dargestellt*/

  .dropbtn {/*iO*/
      padding-left: 14px;
  }

/* E Drop-Down Liste für Kategorie Auswahl */
} /* schließt @media für Burger-Menue*/
/* E Burger Menue */

/* A Seitentitel */
.page-title {/*iO*/
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);

  font-family: "Montserrat", "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;

  color: #111;
  opacity: 0;
  white-space: nowrap;
  pointer-events: none;

  animation: titleFadeUp 1.2s ease-out forwards;
}

/* feine Galerie-Linie */
.page-title::after {/*iO*/
  content: "";
  display: block;
  height: 1px;
  margin: 8px auto 0;
  background: rgba(0,0,0,0.25);

  opacity: 0;
  width: 150px;         
  animation: lineFade 0.8s ease-out forwards;
  animation-delay: 0.6s;
}

/* A Für Handy Page Title */
@media (max-width: 768px) {
  .page-title {/*iO*/
    top: auto;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.05rem;
    letter-spacing: 0.14em;
    pointer-events: none;
    color: #111;
  }

  .page-title::after {/*iO*/
    width: 62px;
    max-width: 62px;
    margin-top: 6px;
  }
}
/* E Für Handy Page Title */

/* Animation page-title */
@keyframes titleFadeUp {
  from {
    opacity: 0;
    transform: translate(-50%, -6px);
  }
  to {
    opacity: 0.9;
    transform: translate(-50%, 0);
  }
}

@keyframes lineFade {
  from {
    opacity: 0;
    width: 0;
  }
  to {
    opacity: 1;
    width: 150px;
  }
}

/* E Seitentitel */

/* ============================== */
/* E fa_up_menue.php */
/* ============================== */

/* =========================== */
/* A fa_home.php mit slideshow */
/* =========================== */
/* A Container für slideshow bei variablen header und footer */
.container {/*iO*/
  /*max-width: 1200px;
  margin: var(--header-height) auto var(--footer-height) auto;   mittig zentriert zwischen header und footer, kein scrollen lks re*/
  padding: 0;
 /* border: 3px solid rgb(247, 243, 8); */
}

/* Subtiles Overlay über Hintergrundbild in container für bessere Lesbarkeit,
 existiert nur in CSS, todo kann auch entfallen*/
#container::before {/*iO*/
    content: "";  /*nur bei leeren Bereich*/
    position: fixed;
    inset: 0;  /* alle Ränder 0 d h ganzer BS*/
    background: rgba(255,255,255,0.05);  /* weiß mit 5% Deckkraft */
    z-index: 0; 
    pointer-events: none;
}

/* E Container für slideshow bei standardcontainer für bodyinhalte bei variablen header und footer */
/*A Slideshow in home.php */
.index-galerie { /*iO*/
  /*test für layout box
  border: 5px solid red !important; */
  display: grid;                                
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  /*height: calc(100svh - var(--header-height) - var(--footer-height)); wird nicht benötigt, ansonsten scrollen über footer */
  gap: 20px;           /* Abstand der Elemente in einer Flexbox oder Grid-Container, hier horizontal für Desktop */
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 0px 0px 0px; /* Abstand über der Slideshow für desktop*/
}

/* A SLIDESHOW home.php */
/* beschleunigt Darstellung erstes Bild */
.slideshow img:first-child {/*iO*/
    opacity: 1;
}

.slideshow {/*iO*/
    position: relative; /*sehr wichtig, sonst keine richtige Positionierung der slideshow */
    isolation: isolate;
    aspect-ratio: 4 / 3;
    min-height: 170px;
    overflow: hidden;
    background: #eee;
    will-change: opacity;
    z-index: 10;
}

.slideshow img {/*iO*/
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.9s ease; /* langsamer für Gallerie */
    z-index: 1;
}

.slideshow img.active {/*iO*/
    opacity: 1;
}

/* Hover nur hoverfähige Geräte z. B. Maus Desktop */
/* V2.3 wirkt mit der class caption */
@media (hover: hover) {/*iO*/
    .slideshow:hover .caption {
        background: rgba(0,0,0,0.6);
    }
}

/* V2.3 wirkt mit der class caption */
.slideshow .caption {/*iO*/
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #fff;
    text-align: center;
    padding: 0.75rem;

    z-index: 2;
}

/* V2.3 wirkt auf Unterschriftsbereich der slideshow nicht mehr nötig, wird über .slideshow .caption gesteuert
.caption {
    display: inline-flex;  erlaubt Icon direkt neben Text 
    align-items: center;   vertikal zentrieren 
    gap: 5px;              Abstand zwischen Pfeil und Tür 
}
*/

/* für handy von grid auf flex bilder untereinander */
@media (max-width: 768px) {

  .index-galerie {/*iO*/
    display: flex;
    flex-direction: column;
    /*test für layout box
    border: 5px solid red !important; */
    background-color: rgba(86, 18, 211, 0.1) !important; /* leichter roter Hintergrund */
    
    gap: 10px;  /* Abstand der Elemente in einer Flexbox oder Grid-Container, hier vertikal für handy */
    margin: 0 auto;
    
    /* Padding o- zum container */
    padding-top: 10px;
    
    /* Höhe = verfügbare Höhe minus 50px verhindert vert. scrollen im container */
    /*max-height: calc(100svh - var(--header-height) - var(--footer-height) - 50px);*/
    /* V2.0 Scrollen auf Handy zulassen */
    /*height: 100svh;*/
    /*overflow-y: hidden;  */   
  }  
/* slideshow auf handy bilder untereindander*/
  .index-galerie .slideshow {/*iO*/
    flex: 1 1 auto;
    aspect-ratio: auto;                /* responsive */
    width: 70%;
    /*aspect-ratio: 3 / 4;*/
    margin: 0 auto;
    align-self: center;      /* im Flex-Container zentrieren */
  }
  
    .slideshow img {/*iO*/
        object-fit: contain;
        width: 100%;
        height: auto; 
        /*max-height: calc(100vh - var(--header-height) - var(--footer-height) - 100px);*/
    }
}
/* E SLIDESHOW home.php */

/* A Portal in Slideshow*/
/* Overlay mittig */
.portal-overlay {/*iO*/
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Portal Wrapper mit Glas & Glow */
.portal-wrapper {/*iO*/
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border-radius: 50%;

    background: transparent;              /* komplett transparent */
    backdrop-filter: none;                /* kein Glas */
    border: none;                         /* kein Rahmen */

    box-shadow:
        0 0 20px rgba(0,255,255,0.3);     /* nur Glow */

    transition: all 0.3s ease;
}

/* Hover Glow & Skalierung */
.slideshow:hover .portal-wrapper {/*iO*/
    box-shadow:
        0 0 30px rgba(0,255,255,0.3),
        inset 0 0 15px rgba(0,255,255,0.15);
    transform: scale(1.05);
}

/* Portal selbst */
.portal {/*iO*/
    width: 100%;
    height: 100%;
    border-radius: 50%;

    background: transparent;  /* keine Fläche */
    border: 2px solid rgba(0,255,255,0.6);  /* leuchtender Ring */
    
    opacity: 0.8; /* 29.08.2026 ergänzt*/

    display: flex;
    align-items: center;
    justify-content: center;

    /* V2.0 Portal botton Slideshow sichtbarer; nur Ring leuchtet
        box-shadow:
        0 0 10px rgba(0,255,255,0.6),
        0 0 25px rgba(0,255,255,0.4); */
    
    box-shadow:
        0 0 12px rgba(0,255,255,0.7);

    animation: pulsePortal 2.5s infinite alternate;
}

/* Portal auf Smartphones 29.08.2026 inaktiviert immer opacity 0.8
@media (max-width: 768px) {
    .portal {
        opacity: 0.8; 
    }
}
*/
/* Pulsieren */
@keyframes pulsePortal {/*iO*/
    0% {
        box-shadow:
            0 0 8px rgba(0,255,255,0.5),
            0 0 15px rgba(0,255,255,0.3);
    }
    100% {
        box-shadow:
            0 0 20px rgba(0,255,255,0.8),
            0 0 35px rgba(0,255,255,0.5);
    }
}

/* A V2.0 Portal botton Slideshow sichtbarer; leicht getönte Scheibe in der Mitte des Portals und botton mehr kontrast anpassen */
.portal::before {/*iO*/
    content: "";
    position: absolute;
    inset: 12%;
    border-radius: 50%;

    background: rgba(0,0,0,.18);
    backdrop-filter: blur(2px);

    z-index: 1;
}

/* Knopf im Portal */
.portal-button {/*iO*/
    position: relative;
    padding: 0.4rem 0.9rem;
    background: transparent;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;  /* semi-bold */
    transition: all 0.3s ease;
    text-shadow:
        0 0 3px #000,
        0 0 6px #000;
    z-index: 2;
}
/* E V2.0 Portal botton Slideshow sichtbarer; leicht getönte Scheibe in der Mitte des Portals und botton mehr kontrast anpassen */

.portal-button:hover {/*iO*/
    border-color: rgba(0,255,255,0.9);
    color: rgba(0,255,255,1);
}

/* Partikel im Portal */
.portal-particles {/*iO*/
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(0,255,255,0.25) 2%, transparent 50%);
    background-size: 8px 8px;
    animation: moveParticles 4s linear infinite;
    z-index: 1;
}

/* V2.0 Portal botton Slideshow sichtbarer; opacity 0,2-0,3 */
.portal-particles {/*iO*/    
    opacity: 0.25;
}

@keyframes moveParticles {/*iO*/
    0% { background-position: 0 0; }
    100% { background-position: 16px 16px; }
}
/* E Portal in Slideshow*/

/* =========================== */
/* E fa_home.php mit slideshow */
/* =========================== */

/* =========================== */
/* A fa_up_footer.php mit slideshow */
/* =========================== */
footer {/*iO*/
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--footer-height);
    background: #fff;
    color: #000;
    border: 1px solid #272222;
    z-index: 100;    
}

.site-footer-inner {/*iO*/
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 100px;
    max-width: 1200px;
    width: 100%;
    font-size: 14px;
}

.footer-left, .footer-right {/*iO*/
    color: #777;
    font-size: 14px;
}

.footer-left a,
.footer-right a {/*iO*/
    text-decoration: none;
    color: inherit;
}

.footer-left a:hover,
.footer-right a:hover {/*iO*/
    color: #000;
    text-decoration: underline;
}

@media (max-width: 768px) {   
    .site-footer-inner {/*iO*/
        flex-direction: column;
        gap: 5px;
        text-align: center;
    }
}
/* =========================== */
/* E fa_up_footer.php mit slideshow */
/* =========================== */

/* ======================================== */
/* A fa_bilder_bearbeiten.php mit slideshow */
/* ======================================== */
/* A Dífferenzierung der Darstellung Desktop / Handy über mobil-text und desktop-text */
.mobile-text {/*iO*/
    display: none;
}

.desktop-text {/*iO*/
        display: inline;
    }

    /* Handy */
@media (max-width: 768px) {

    .desktop-text {/*iO*/
        display: none;
    }

    .mobile-text {/*iO*/
        display: inline;
    }
}

.burger-ea {/*iO*/
        display: inline;
    }

@media (max-width:768px) {
    .main-nav a.burger-ea {
        display: none;
    }
}


/* E Dífferenzierung der Darstellung Desktop / Handy über mobil-text und desktop-text */

/* A 14.06.2026 Upload-Box  */

.upload-wrapper {/*iO*/
    display: flex;
    gap: 20px;
    margin: 0;
}

/* Upload bleibt kompakt */
.upload-container {/*iO*/
   /* flex: 1;    
    min-width: 0;
  /*  margin-top: calc(var(--header-height)); V2.3 blockelement unterhalb topbar*/
    max-width: 70vw;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
    padding: 5px;
    border: 3px solid #641010;
    border-radius: 8px;
    background: #fff;
}

/* V2.0 button in die nächste Zeile */
.upload-container button {/*iO*/
    display: block;
    margin-top: 8px;
}

.upload-container h3 {/*iO*/
    margin: 0 0 4px 0; /* Abstand nach unten zum nächsten element */
    font-size: 14px;
}

/* eine Zeile */
.row-inline {/*iO*/
    display: flex;
    gap: 4px;
    font-size: 12px;
    margin-bottom: 3px;
    align-items: center;
}

/* Inputs gleich hoch */
.row-inline input,
.row-inline select {/*iO*/
    height: 24px;
    font-size: 12px;
    padding: 1px 4px;
    border: 1px solid #ccc;
    border-radius: 5px;
    flex: 1;
}

/* Datei etwas breiter */
.row-inline input[type="file"] {/*iO*/
    flex: 2;
}

/* V2.0 upload-box; Objekt Nr. schmäler und Reihenfolge geändert */
.row-inline input[name="objektnr"] {/*iO*/
    flex: 0 0 50px;
}

/* Button klein */
.row-inline button {/*iO*/
    font-size: 12px;
    height: 24px;
    padding: 0 8px;
    border: none;
    border-radius: 5px;
    background: #2d6cdf;
    color: white;
    cursor: pointer;
}

.row-inline button:hover {/*iO*/
    background: #1f56b8;
}

/* A V2.3 neue Struktur zweispaltig für nur upload handy und desktop mit form-row */
/* V2.4 Umstellung auf 2/3 der Bildschirmbreite wegen thumbnail*/
 .form-row{
    font-size: clamp(8px, 1.2vw, 14px); /* V2.5 passt SG dynamisch an min, bevorzugt, max wert */
    display:grid;
    grid-template-columns:180px 1fr;
    align-items:center;
    gap:10px;
    margin-bottom:4px;  /* V2.5 von 8 auf 4 geändert */
}

.form-row label{
    font-weight:600;
}

.form-row input,
.form-row select{
    width:100%;
    box-sizing:border-box;
}
/* erste Spalte schmal für Handy */
@media (max-width:768px){

    .form-row{
        grid-template-columns:120px 1fr;
        gap:6px; /* V2.5 von 8 auf 6 geändert */
    }

}
/* E V2.3 neue Struktur zweispaltig für nur upload handy und desktop mit form-row */
/* E 14.06.2026 Upload-Box  */

/* A Tabellenbereich in fa_bilder_bearbeiten */
.tabelle {/*iO*/
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 5px;
    padding: 5px;
    padding-bottom: var(--footer-height);
    margin: 5px;
    border: 3px solid #250d0d;
    border-radius: 8px;
    background: whitesmoke;
    box-sizing: border-box;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.tabelle h3 {/*iO*/
    margin: 0 0 8px 0;
    font-size: 14px;
}

/* wirkt nur für diese Seite über <body class=page-table>*/
.page-table {/*iO*/
    height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* verhindert doppeltes Scrollen */
}

/* oberer Bereich 2 button und Datei hochladen, bleibt fix */
.topbar-table {/*iO*/
    margin-top: 10px;
    /*margin-top: var(--header-height); gestrichen zu großer Abstand von Header */
    padding-top: 5px;      /* optional */
    flex: 0 0 auto;
    /* border: 3px solid #690e0e;  keinen Rahmen einheitlich mit Tabelle */
}

/* Datenbereich der scrollbaren Tabelle füllt den Rest */
.table-scroll {/*iO*/
    flex: 1;              /* <<< das ist der Trick */
    min-height: 0;
    overflow: auto;
    font-size: 12px;
    border: 1px solid #ccc;
}
/*
.table-scroll table {
    font-size: 12px !important;
}
*/
/* Tabellenlinien */
table {/*iO*/
    border-collapse: collapse;
    width: 100%;
}

thead th {/*iO*/
    position: sticky;
    top: 0;
    background: #bc9ae7;
    z-index: 10;
    /*border: 1px solid #000;*/
    box-shadow: 0 2px 0 #000; /* optional für „dicke Linie“, stabiler als border */
}

tbody td {/*iO*/
    border: 1px solid #ccc;
}

th,
td {/*iO*/
    padding: 4px 6px;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

/* Breite der Aktionsspalte für Kopf und Daten für 3 button*/
.Aktion-Breite {/*iO*/
    width: 200px;
    min-width: 200px;
}

/* A entfernt Unterstriche in der Aktion-Spalte */
td a {/*iO*/
    text-decoration: none;
}

td a:hover {/*iO*/
    text-decoration: none;
}
/* E entfernt Unterstriche in der Aktion-Spalte */

/* A vertikale Striche in der Aktion-Spalte */
.aktionen a {/*iO*/
    text-decoration: none;
    padding: 0 6px;
    border-right: 1px solid #999;
}
.aktionen a:last-child {/*iO*/
    border-right: none;
}
/* E vertikale Striche in der Aktion-Spalte */

/* E Tabellenbereich in fa_bilder_bearbeiten */

/* A 18.07.2026 V2.1 Bild editierter Satz wird angezeigt, aus fa_bilder_bearbeiten.php */
#editPreview{

    position:fixed;

    top: var(--header-height);
    right:20px;

    width: 280px;

    padding:8px;

    background:white;

    border:1px solid #999;

    box-shadow:0 4px 12px rgba(0,0,0,.3);

    z-index:3000;
}

#editPreview img{

    width:100%;
    display:block;

    object-fit:contain;
}
/* E 18.07.2026 V2.1 Bild editierter Satz wird angezeigt, aus fa_bilder_bearbeiten.php */

/* V2.3 ab hier konsolidiert */

/* A class für edit formular Bilderdatentabelle bearbeiten */
.edit-form {/*iO*/
    margin: 0;
    padding: 0;
}
/* A class für edit formular Bilderdatentabelle bearbeiten */

/* A V2.1 21.07.2026 Upload-Box für Desktop / Handy mit neuer class upload-form*/
/* Desktop */
.upload-form {
    margin: 0;
    margin: 10px auto;
    padding: 5px;  /* V2.5 von 20 auf 5 geändert */
    background-color: rgba(123, 176, 230, 0.7); /* rgba für durchscheinenden Hintergrund */
    /*margin: 20px auto;
    max-width: 600px;    */
    border: 1px solid #ccc;
    border-radius: 4px;
    text-align: left; /* Für linksbündige Ausrichtung der Inhalte */
}

/* A 20.07.2026 V2.1 Fehlermeldung aus upload, aus fa_bilder_bearbeiten.php */
.upload-fehler {
    margin-top:10px;
    color:#b00020;
    font-weight:bold;
}
/* E 20.07.2026 V2.1 Fehlermeldung aus upload, aus fa_bilder_bearbeiten.php */

/* A V2.1 21.07.2026 Upload-Box für Handy mit neuer class upload-form*/
@media (max-width: 768px) {

.upload-form {
    /*margin: 5px auto; */
    padding: 4px 2px 0 2px;
    background-color: rgba(123, 176, 230, 0.7); /* rgba für durchscheinenden Hintergrund */
    /*margin: 20px auto;
    max-width: 600px;    
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: rgba(123, 176, 230, 0.7);  rgba für durchscheinenden Hintergrund 
    text-align: left;  Für linksbündige Ausrichtung der Inhalte */
}
   
/* A V2.1 ergänzt um scrollen im container zu ermöglichen */
    .topbar-table {/*iO*/
    width: 95%;
    margin: 10px auto 0 auto;
    padding: 3px;
    overflow: visible;
}
    .upload-container {
    max-width: 95vw;
    max-height: calc(100vh - var(--header-height) - var(--footer-height) - 30px);

    margin: 5px auto;
    padding: 3px;
    padding-bottom: calc(var(--footer-height) + 10px);

    overflow-y: auto;
    box-sizing: border-box;
}
    .upload-container h3 {
        font-size: 0.8rem;
        line-height: 1.3;  /*vernachlässigbar*/
    }

/* E V2.1 ergänzt um scrollen im container zu ermöglichen */

    .row-inline {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 4px;
}

    .row-inline label {
        width: auto;
        font-weight: 600;
    }

    .row-inline input,
    .row-inline select,
    .row-inline button {
        width: 100%;
        box-sizing: border-box;
        font-size: 16px;      /* verhindert Zoom auf iPhone */
    }

    .row-inline button {
        height: auto;
        /*min-height: 44px;*/
        padding: 4px;
        white-space: normal;
    }
}
/* E V2.1 21.07.2026 Upload-Box für Handy mit neuer class upload-form*/
/* ======================================== */
/* E fa_bilder_bearbeiten.php mit slideshow */
/* ======================================== */

/* ======================================== */
/* A V2.4  fa_bilddaten_editieren.php       */
/* ======================================== */
/* A 14.06.2026 Anzeigen des Bildes aus dem aktiven Datensatz  */

.image-preview {
    position: fixed;
    right: 10px;
    top: 10px;

    width: 220px;
    height: auto;

    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 8px;

    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    z-index: 9999;
}

.image-preview img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
}
/* E 14.06.2026 Anzeigen des Bildes aus dem aktiven Datensatz  */

/* A scrollen mit Mausrad */
.navigation-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;   /* Abstand zwischen den drei Elementen */
    margin-bottom: 20px;
}
/*A Änderungsbutton */
.form-actions {
    display: flex;
    justify-content: center;
    margin: 15px 0; /* V2.5 Grenzen verkleinert */
}

.form-actions button {
    padding: 10px 20px;  /* V2.5 Abstände verkleinert */
    font-size: 1.2rem;
    font-weight: bold;
    color: #fff;
    background: #0b6efd;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    transition: all 0.2s ease;
}

.form-actions button:hover {
    background: #0a58ca;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.3);
}

.form-actions button:active {
    transform: translateY(0);
}
/*E Änderungsbutton */

/* A Datenfeldbreiten im Formular */
.form-row {
    display:grid;
    grid-template-columns:180px var(--feldbreite);
    align-items:center;
    gap:10px;
    margin-bottom:8px;
}

.form-row input,
.form-row textarea,
.form-row select {
    width:100%;
}
/* E Datenfeldbreiten im Formular */

.filter-buttons {
    min-height: 30px;
    display: flex;
    gap: 30px;
    align-items: center;
}
/* ======================================== */
/* E V2.4  fa_bilddaten_editieren.php       */
/* ======================================== */

/* ======================================== */
/* A V2.7  fa_home Intro vor slideshow      */
/* ======================================== */

/* ============================================================
   INTRO
   ============================================================ */

/* ======================================== */
/* A V2.7 fa_home Intro vor slideshow       */
/* ======================================== */

.intro {
    position: relative;

    width: 100%;
    height: 500px;

    display: block;

    overflow: visible;

    background: black;
}

.intro-media {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;
    object-position: center;
}

.intro-weiter {
    position: absolute;
    opacity: 0.6;   /* 0 = unsichtbar | 1 = voll sichtbar */

    left: 60%;
    bottom: 15px;

    transform: translateX(-50%);

    z-index: 100;

    padding: 12px 30px;

    cursor: pointer;
}

/* ======================================== */
/* E V2.7  fa_home Intro vor slideshow      */
/* ======================================== */