/*- class="nichtdrucken"(für HTML Dieser Text wird nur am Bildschirm angezeigt und beim Drucken versteckt. -*/
@media print {
.nicht-drucken {display:none;}
}

/* == Inhalt (zBsp wichtiger Inhalt blau und fett), der nur gedruckt werden soll! (am Bildschirm nicht angezeigt) == */
@media print {
  .nur-drucken { 
	   display: block; /* Beim Drucken anzeigen */
          color: blue;
          font-weight: bold; }
}

/* ----macht auf Bildschirm unsichtbar--z.Bsp: <div style="display: none;">inhalt unsichtbar</div>
 ---  */
.hide {
display: none;
}

/* CSS Reset damit allen Browsern gleich aussieht, alle Standardabstände und Rahmen im Browser entfernt 
  werden– als Basis für ein sauberes, einheitliches Layout.*/

* {
	margin: 0px;
	padding: 0px;
	border: 0px;
    box-sizing: border-box; /*  Reset / Box model fix /wichtig: verhindert Breitenüberschuss */
}
   /* ======  Clearfix Das „leere Div“ (Klassische Methode) ====== */
  .clr {                 /* <div style="clear: both;"></div> <!-- Erzwingt das Ende der Floats -->  */
       clear: both;
       height: 0;
       line-height: 0;
       font-size: 0;
 } 
 /* =========== „Micro Clearfix“ (Empfohlen) ========== */    
 .clearfix:after {
    content: "";
    display: table;
    clear: both;
}
/* HTML: Beispil
   <div class="content clearfix">     Du fügst dem Elternelement eine Klasse (z. B. clearfix) hinzu.Das CSS nutzt ein Pseudoelement, 
   <div class="img-right">...</div>    um den Float am Ende des Containers unsichtbar aufzuheben
   <div class="textleft">...</div>
   </div>  */
      
  /* ============================  Schriften  ============================== */
     
 /* ================= Lato ================= */
        
@font-face {
    font-family: 'Lato';
    src: url('fonts/Lato/Lato-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Lato';
    src: url('fonts/Lato/Lato-LightItalic.woff2') format('woff2');
    font-weight:300;
    font-style: italic;
    font-display: swap;
} 
@font-face {
    font-family: 'Lato';
    src: url('fonts/Lato/Lato-Italic.woff2') format('woff2');
    font-weight:normal;
    font-style: italic;
    font-display: swap;
} 
@font-face {
    font-family: 'Lato';
    src: url('fonts/Lato/Lato-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /*tauschen*/
}
@font-face {
    font-family: 'Lato';
    src: url('fonts/Lato/Lato-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
  /* ================== Playfair Display ======================= */
@font-face {
    font-family: 'Playfair Display';
    src: url('fonts/Playfair/PlayfairDisplay-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Playfair Display';
    src: url('fonts/Playfair/PlayfairDisplay-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
} 
@font-face {
    font-family: 'Playfair Display';
    src: url('fonts/Playfair/PlayfairDisplay-Italic.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Playfair Display';
    src: url('fonts/Playfair/PlayfairDisplay-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
/* ==========================  Grundlayout  =============================== */
html, body {
    margin: 0;
    padding: 0;
    background: #d8d8d8;
    font-family: 'Lato',sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
 }
  
/* ================= Playfair Display blau ================= */
.largex {
	font-family: 'Playfair Display'; 
    font-weight: normal;
    font-style: normal;
	color:#21498F; /*== textfarbe blau ==*/
	font-size:40px; /* == für FLÖTENBAU == */
	text-align:center;
} 
/* ==== titel ===== */
h1{ 
    font-family: 'Playfair Display'; 
    font-weight: normal;
    font-style: normal;
    width:auto;
	height:auto;
	float:left;
	color:#21498F;/*== textfarbe blau ==*/
	font-size:30px;
	line-height:30px;
  }
   
 /* ==== subtitles_cont ===== */ 
h2{  
    font-family: 'Playfair Display'; 
    font-weight: normal;
    font-style: normal;
	width:auto;
	height:auto;
	color:#21498F;/*== textfarbe blau ==*/
	font-size:24px;
	line-height:24px;
	margin:20px 0;
}
h3{  
    font-family: 'Playfair Display'; 
    font-weight: normal;
    font-style: normal;
	color:#21498F; /*== textfarbe blau ==*/
	font-size:20px;
	margin:20px 0;
} 
h4{
	font-family: 'Playfair Display'; 
	font-weight: normal;
    font-style: normal;
	color:#21498F; /*== textfarbe blau ==*/
	font-size:20px;
	margin:10px 0;
} 
.large {
	font-family: 'Playfair Display'; 
    font-weight: normal;
    font-style: normal;
	color:#21498F; /*== textfarbe blau ==*/
	font-size:20px;
} 
h5{  
    font-family: 'Playfair Display'; 
    font-weight: normal;
    font-style: normal;
	color:#21498F; /*== textfarbe blau ==*/
	font-size:18px;
	margin:20px 0;
} 
h6{  /* bestelformular */
    font-family: 'Playfair Display'; 
    font-weight: normal;
    font-style: normal;
	color:#21498F;/*== textfarbe blau ==*/
	font-size: 16px;
}
.italic{
	font-family:'Playfair Display'; 
	font-weight: normal;
    font-style: normal;
    color:#21498F; /*== textfarbe blau==*/
	font-size:16px;
}
.black {
    font-family: 'Playfair Display'; 
    font-style: normal;
    font-weight:normal;
	color:#1d1d1d;
	font-size:18px;
}
.black-kl {
    font-family: 'Playfair Display'; 
    font-style: normal;
    font-weight:normal;
	color:#1d1d1d;
	font-size:16px;
}
.blue {
    font-family: 'Playfair Display'; 
    font-style: normal;
    font-weight:500;
	color:#21498F;
	font-size:18px;
}
.blau {
    font-family: 'Playfair Display'; 
    font-style: normal;
    font-weight:500;
	color:#21498F;
	font-size:16px;
}
.bluecolor {    /* tradition  */
    font-family: 'Playfair Display';
    font-weight: 500;
    font-style: normal;
    font-size:14px;
    line-height:20px;
	color:#21498F;	
}
/* ================= Lato ================= */
 p {
	font-family: 'Lato';
	font-weight: 300;
    font-style: normal;
	color:#1d1d1d; /*== textfarbe#292929 #2b2a29==*/
	font-size:16px;
	line-height:24px;
 }
.italik {
   font-family: 'Lato';
   font-weight: normal;
   font-style: italic;
   color:#1d1d1d; /*== textfarbe#292929 #2b2a29==*/
   font-size:16px;
   line-height:24px;
}
 .italic {
   font-family: 'Lato';
   font-weight: 300;
   font-style: italic;
   color:#1d1d1d; /*== textfarbe#292929 #2b2a29==*/
   font-size:16px;
   line-height:24px;
}  
.bold   {
   font-family: 'Lato';
   font-weight: 700;
   font-style: normal;
 }
.regular {
    font-family: 'Lato';
	font-weight: normal;
    font-style: normal;
 }
.medium {
	font-size:14px;
	line-height:17px;
}
.small {
	font-size:12px;
	line-height:16px;
}
.blue_color {   /* tradition  */
    font-size:16px;
	color:#21498F;
	font-weight:700;	
}
/* ===========  Typografie Beispiel  =========== */
.content h2 {
     font-family: "Playfair Display", serif;
     letter-spacing:1px;
 } 
 .fett {
    font-family: 'Playfair Display';
    font-weight: 700;
    font-style: normal;
    font-size:inherit;
}
 strong {
    font-family: 'Lato';
    font-weight: 700;
    font-style: normal;
    font-size:inherit;
}
.red {
	color:#900;
}
a {
	color:#21498F; /* blau */
	text-decoration: none;
	outline:none;
 }
a:hover {
     text-decoration:underline;
}
/* ------- */
.link {
   text-decoration:none;
   font-family: 'Playfair Display'; 
   font-weight:700;
   font-style: normal;
   font-size:20px;
   color:#21498F;
   background:url(grafiken/icon_autlink.png) no-repeat right 9px;
   padding-right:19px;
}  
.link a:hover{
     text-decoration:underline;
}
/* --- in footer ---- */
.link_white {
   text-decoration:none;
   font-family: "Playfair Display", serif; 
    font-weight: normal;
    font-style: normal;
    font-size:16px;
    line-height:22px;
    color:#ffffff;
 }  
.link_white:hover{
     text-decoration:underline;
}
/* ------- */
span.links a {
	display:inline-block;
	background:url(grafiken/icon_outlink_pf.gif) no-repeat right 2px;
	padding-right:15px;
}
span a:hover {
     text-decoration:underline;
}

span.links_black a {  /*========  M.Hasel und Klangbsp.=======*/
    font-family: 'Lato';
	font-weight: normal; 
    color:#446cb3;
   	display:inline-block;
	background:url(grafiken/icon_outlink_pf.gif) no-repeat right 6px;
	padding-right:17px;
}

/* ====  E-Mail mit klick aktiv(bei impressum)===== */  
 #mail a {
  color: #21498F;
  text-decoration: none;
}
#mail a:hover {
  font-weight: 500;
}
 /* === E-Mail ohne klick pasiv(bei kontakt) ===*/

 .email,.email-text {
  font-family: 'Playfair Display';
  font-weight: normal;
  font-style: normal;
  color: #21498F;
  /*font-family: inherit; erben*/
  cursor: text;       /* zeigt Text-Cursor */
  user-select: text;  /* explizit markierbar */
}
 /* ====== Hauptcontainer 860px ====== */
  #main {
     width: 860px;
     margin: 9px auto;
     background: #ffffff;
     border: 1px solid #999; /* 1px border innen, box-sizing sorgt dafür, dass die 860px inkl. border sind */
     position: relative;
       /*  CSS3 (optional, aber stört CSS 2.1 nicht) */
     box-shadow: 0 4px 12px rgba(0,0,0,0.35), /*(0.20, 0.15, 0.10) sanfterer Außenschatten */
                 0 12px 24px rgba(0,0,0,0.20),
                 0 24px 48px rgba(0,0,0,0.10);
            }   
 /* ============= Header =================
      Du hattest 850px width und margin:5px - hier nutzen wir 100% Breite
      mit 5px Innenabstand, damit es zuverlässig in #main passt. */
  #header {
     width: auto;
     height: 162px;
     margin:5px;
	 background:url(grafiken/header_bg.png) repeat-x;  /* == 26+136=162px Farbe#1f5c89 == */         
	 border-top: 1px solid #c9c9c9;
 }
 
.mail::after {
 content: attr(data-nutzer) "@" attr(data-name) "." attr(data-ende);
 cursor: pointer;
 text-decoration: underline;
 float: left;
}
 
/* ======= Logo im Header absolut platzieren  ========= */
.logo {
    display: block;
    width: 120px;
    height: 120px;
    position: absolute;
    top: 39px;        /* 36px unter Header-Top */
    left: 50%;        /* Mitte */
    margin-left: -60px; /* Hälfte der Breite → perfekt zentriert */
    background: url("grafiken/logo.png") no-repeat center center;
    background-size: 120px 120px;
    /* ====== Rechtsklick verhindern ======== */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: auto;    /* Link bleibt klickbar */
    /* ====== Rechtsklick-Blocker ====== */
    -webkit-touch-callout: none;
}
/* ====== Retina-Version ====== */
@media 
(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo {
        background-image: url("grafiken/logo@2x.png");
        background-size: 120px 120px; }  }

 /* ========== topmenu  ===============*/
  .topmenu {
    width:292px;
	height:auto;
    float:right;
    font-family: "Playfair Display", serif; 
    font-weight: normal;
    font-style: normal;
    color: black;
    font-size:13px;
    text-align: center;      
 }
  .topmenu-inner {
    display: inline-block;
    position: relative;
 }
  .topmenu-inner a {
    color: #000; /* Link-Farbe */
    margin: 0 0px; /* 5px Abstand zwischen den Menüpunkten */
    text-decoration: none;  
    padding: 0 5px;/* 5px  Menüpunkten seitliche blaue ramen */
    border-radius: 5px;
    transition: background-color 0.6s ease; /*  Sanfter Übergang für Hover */
 }
  .topmenu-inner a:hover { 
     background-color: #1f5c89; /* Hintergrund beim Hovern */
     color: #fff; 
 }
  .topmenu-inner a.active {
	 background-color: #1f5c89; /* Hintergrund beim dauer active seite */
     color: #fff; 
 }
  /* ======== ende topmenu =======*/
 
  /* =======================================
   Content (1-Spalte) 850px-(2x75=)150=700px
   ======================================== */
   #content {
    width: auto;   /* oder 100%  */
    min-height: 250px;
    margin-left: 5px;
    margin-right:5px;
    margin-bottom:5px;
    background: #fff;
    border-top: 1px solid #999;
    border-left: 1px solid #999;
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
    padding: 1px 75px 50px 75px;   /* innenabstand, in box-sizing enthalten */
   }
/* ========== Menü ============= */
 .menu {
    width: auto;
    font-family: "Playfair Display"; 
    font-weight: normal;
    font-style: normal;
    color: black;
    font-size:15px;
    text-align: center;
    padding-top: 0;
    padding-bottom:30px;
    background: white;
    }
  .menu-inner {
    display: inline-block;
    position: relative;
    padding: 5px 0;
    border-bottom: 4px double #90a4c7; /* #8c8c8c #b7b8b9; untere Linie */
   }

  .menu-inner a {
    color: #000; /* Link-Farbe */
    margin: 0 5px; /* 5px Abstand zwischen den Menüpunkten */
    text-decoration: none;  
    padding: 0 5px;/* 5px  Menüpunkten seitliche blaue ramen */
    border-radius: 5px;
    transition: background-color 0.3s ease; /*  Sanfter Übergang für Hover */
 }
  .menu-inner a:hover { 
     background-color: #1f5c89; /* Hintergrund beim Hovern */
     color: #fff; 
 }
  .menu-inner a.active {
	 background-color: #1f5c89; /* Hintergrund beim dauer active seite */
     color: #fff; 
 }
/* ===== menü ende=====
  #back_to_top {
	width:auto;
	height:auto;
	text-align:right;
} */
 /* ===================
           Footer
   ===================== */
  #footer {
     width: auto;
     height: auto;
     background:#1f5c89;  
     margin-left:5px;
     margin-right:5px;
     margin-bottom:5px;
     color: #FFF;
     font-size: 16px;
     line-height: 20px;
     text-align: center;
     padding: 12px 0;
 }
 .separator {
	text-align:center;
	padding-bottom:20px;
	padding-top:2px;	
}
  /*=================================================== index ========================================================== */   
   #home_content {
    width: auto;   /* oder 100%  */
    text-align:center;
    min-height: 250px;
    margin-left: 5px;
    margin-right:5px;
    margin-bottom:5px;
    background: #fff;
    border-top: 1px solid #999;
    border-left: 1px solid #999;
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
    padding: 1px 75px 30px 75px;   /* innenabstand, in box-sizing enthalten */
   }

.home_logo {
    text-align:center;
    letter-spacing: 2px;      
    margin-right: -2px; 
	height:auto;
	padding-bottom:-2px;
	margin-left:auto;
	margin-right:auto;   /* margin-left:47px;*/	
}
#home_title_bg {
	height:auto;
	text-align:center;
	padding-top:15px;
	padding-bottom:12px;
}
#home_sub_title {
	height:auto;
	text-align:center;
	font-family: 'Playfair Display'; 
    font-weight: normal;
    font-style: normal;
	color:#21498f;
	font-size:16px;
	padding-bottom:35px
}
      /* Vorschaubild (nicht klickbar) */
 /* ========= (2 Pic.) piccolo un kleinefloete ============= */
.foto-zwe_piclfloete{
    display: block;
    margin: 18px auto 0 auto;     /* 18px Abstand nach oben, 'auto' zentriert sie perfekt mittig */
    width: 700px;
    height: 195px;
    background-image: url('grafiken/piccolo_kleinefloete.png');
    background-size: cover;
    background-position: center;
    background-color:#d7d8da; /* #d1d2d3 */
    border: 1px solid #a2a2a2;   /* #c4c5c6  #c8c8c8; #e0e0e0 */
    border-radius: 10px;
    pointer-events: none; /* Rechtsklickschutz */
    margin-top:5px;
}
/* Retina Vorschaubild */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
 .foto-zwe_piclfloete { background-image: url('grafiken/piccolo_kleinefloete@2x.png'); }
}
/* ======== Verzier FLÖTENBAU Verzier ===========  */
/*======= mittlere Grafik unter dem Titel ======== */

/* ---  Code für Zeile 1 --- */
.titel-box-inline {
  text-align: center;       
}
/* Gemeinsame Stile für Text und Grafik-Container */
.grafik-inline, 
.text-inline {
  display: inline-block;  
  vertical-align: -5px;     /* Ihre perfekt eingestellte vertikale Position */
}
/* Nur für den Text */
.text-inline {
  letter-spacing: 6px;      
  margin-right: -6px;       /* Präzise Korrektur für letter-spacing: 6px */
}
/* Die Grafik-Container erhalten die feste Anzeige-Größe (91x21px) */
.grafik-inline {
  width: 91px;
  height: 21px;
  margin: 0 15px;           
  background-repeat: no-repeat;
  background-position: center;
  /* Option: background-size: 100% 100%; (Erfordert CSS3, wird aber von Retina-Geräten IMMER unterstützt) */
  background-size: 91px 21px; 
}
/* Standard-Bilder für normale Bildschirme (1x) */
.grafik-links {
  background-image: url('grafiken/verzir-links.png');
  pointer-events: none; /* Rechtsklickschutz */
}
.grafik-rechts {
  background-image: url('grafiken/verzir-rechts.png');
  pointer-events: none; /* Rechtsklickschutz */
}
/* ======= Grafik unter dem Titel Zeile 2 ========= */
.grafik-mitte {
  display: block;               /* Erzeugt eine neue Zeile */
  width: 200px;                 /* Feste Anzeige-Breite (CSS 2.1) */
  height: 42px;                 /* Feste Anzeige-Höhe */
  margin: 18px auto 0 auto;     /* 20px Abstand nach oben, 'auto' zentriert sie perfekt mittig */
  background-repeat: no-repeat;
  background-position: center;
  background-size: 200px 42px;  /* Zwingt das Retina-Bild in die richtige Größe */
  background-image: url('grafiken/verzir-mitte.png'); /* Standard-Bild (1x) */
}

/* == RETINA-WECHSEL: Lädt alle scharfen Bilder auf hochauflösenden Displays === */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), 
       only screen and (min-resolution: 144dpi), 
       only screen and (min-resolution: 1.5dppx) 
{
  .grafik-links {
    background-image: url('grafiken/verzir-links-g@2x.png');}
  .grafik-rechts {
    background-image: url('grafiken/verzir-rechts-g@2x.png');}
  .grafik-mitte {
    background-image: url('grafiken/verzir-mitte-g@2x.png');}
}
/* ===== STERN ====== */
.stern-mittig
{
    display: block;         /* Erzeugt eine neue Zeile */
    margin: 18px auto 0 auto; /* 18px Abstand nach oben, 'auto' zentriert sie perfekt mittig */
    width: 34px;            /* Feste Anzeige-Breite (CSS 2.1) */
    height: 34px;           /* Feste Anzeige-Höhe */
    background-image: url('grafiken/stern.png');
    background-size: cover;
    background-position: center;
    pointer-events: none; /* Rechtsklickschutz */
}

/* Retina Vorschaubild */
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 192dpi) {
 .stern-mittig { background-image: url('grafiken/stern@2x.png'); }
}

  /*=============================================== Kleine Flöte ================================================= */   
.center_text {
	text-align:center;
} 
.sepa {
	text-align:center;
}
.right-text {
    float:right;
}   
.center-img {
   display: block;     /* wichtig */
   margin-left: auto;  
   margin-right: auto; /* beide AUTO → zentriert */
   border-radius: 8px;
} 
   
.listenkette li { 
    display:block;        /* rot #a70000 */
    background:url(grafiken/rot.png) no-repeat left 7px; /* Vertikal bsp.(3px ist höcher) */
    padding-left:12px; /* Platz für das Icon schaffen */
}  
 .left-img-formular {  /* Preisliste-Formular */
    float:left;
    margin-right: 10px;
    margin-top: 15px; 
}
 .left-img {  /* Piccolo Etui & Wischerstab */
    float:left;
    margin-right: 25px;
    margin-top: 20px; 
}
 .right-img {  /* Klangbsp. */
    float:right;
    margin-right: 50px;
    margin-top: 25px; 
} 
 .left-casecover {  /* Piccolo Etui */
    float:left;
    width: 326px;
    margin-right: 25px;
    margin-top: 20px; 
}
.right-case {
    float:right;
    margin-right: 25px;
    margin-top: 30px;
}
.right-caseopen {
    float:right;
    margin-right: 25px;
    margin-bottom : 22px;
}

.imgright {
    float: right;
	vertical-align:top;
}
.imgleft {
    float: left;
	vertical-align:top;
}

.img_left {
  margin: 10px 10px 5px 0;
  float: left;
  padding: 1px;
  display:inline;
 /* background: #cccccc;
  border: 4px solid #e8e8e8;*/
 }
 
.img_ecke {
  border-radius: 8px;   /* Äussere Kante des Rahmens Ecke abgerundet  */
}   
.img_ecke_schat{  
  border-radius: 8px; /* Äussere Kante des Rahmens Ecke abgerundet  */
  box-shadow: 5px 5px 8px #767676;  
  /* Schatten: links, unten, Stärke, Farbe (grau: hel #e0e0e0  mittel #c0c0c0 #cbcbcb dunkel #9d9d9d #767676) */
} 
 .imgright_ecke_schat{ 
  border-radius: 8px; /* Äussere Kante des Rahmens Ecke abgerundet  */
  box-shadow: 3px 3px 6px #767676;  
  float: right;
  vertical-align: middle;
  margin-right:10px;
  margin-top:0px;
} 
.image {
  padding:4px; /* Breite des Rahmens */
  background:#f4f4f4; /* Farbe des Rahmens, weiss */
  border:1px solid #9d9d9d;  /* Äussere Kante des Rahmens, dunkelgrau  */
  border-radius: 4px;   /* Äussere Kante des Rahmens Ecke abgerundet  */
  box-shadow: 3px 3px 8px #9d9d9d;  /* Schatten: links, unten, Stärke, Farbe (grau: hel #e0e0e0  mittel #c0c0c0 #cbcbcb dunkel #9d9d9d) */
}
.left_image {
  float:left; 
  margin:6px 10px 6px 10px; 
  border:1px solid #9d9d9d; 
  border-radius: 4px; 
  box-shadow: 3px 3px 8px #9d9d9d;
}  
.right_image {
  float:right; 
  margin:6px 10px 6px 10px;
  border-radius: 8px; 
  box-shadow: 5px 5px 10px #9d9d9d;
} 
/* ===== GEMEINSAMES LIGHTBOX-FUNDAMENT für alle 4 ====== */
#conkleinefl, #piccolo, #piccolo-hb, #cylkleinefl {
    position: fixed;
    top: 0;
}
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    opacity: 0;
    visibility: hidden;
    pointer-events: auto;
    transition: opacity 0.35s ease;    
    overflow-x: auto;
    overflow-y: hidden;
}

/* Aktivierung bei Klick */
#conkleinefl:target + .lightbox,
#piccolo:target + .lightbox,
#piccolo-hb:target + .lightbox,
#cylkleinefl:target + .lightbox {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Gemeinsame Content-Basis */
.lightbox-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) scale(0.96);
    transition: transform 0.35s ease;
    text-align: center;
}

/* Skalierungs-Effekt beim Öffnen */
#conkleinefl:target + .lightbox .content-conkleinefl,
#piccolo:target + .lightbox .content-piccolo,
#piccolo-hb:target + .lightbox .content-piccolo-hb,
#cylkleinefl:target + .lightbox .content-cylkleinefl {
    transform: translateY(-50%) scale(1);
}

/* Schließen-Flächen Basis */
.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    cursor: zoom-out;
}
.conkleinefl-wrapper a, .piccolo-wrapper a, .piccolo-hb-wrapper a, .cylkleinefl-wrapper a {
    position: absolute;
    inset: 0;
    cursor: zoom-out;
}

/* Rechtsklickschutz-Ebenen für Vorschaubilder */
.foto-conkleinefl::after, .foto-piccolo::after, .foto-piccolo-hb::after, .foto-cylkleinefl::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* ========== INDIVIDUELLE BILDER UND GRÖSSEN  =========== */

/* --- VORSCHAU-CONTAINER --- */
.cont-piccolo {
     width: 700px;
     margin: 9px auto;
}
.cont-piccolo-hb {
     width: 420px;
     margin: 20px auto;
}
/* ---  PICCOLO (700x98px / GB: 1400x196px) --- */
.foto-piccolo {
    display: inline-block;
    width: 700px;
    height: 98px;
    background: url('grafiken/piccolo.png') no-repeat;
    background-size: cover;
    border: 1px solid #a2a2a2;
    border-radius: 8px;
    cursor: zoom-in;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .foto-piccolo { background-image: url('grafiken/piccolo@2x.png'); }
}
.content-piccolo {
    width: 1410px;
    margin-left: -705px;
}
.piccolo-wrapper {
    position: relative;
    width: 1400px;
    height: 196px;
    background: url('/grafiken/piccolo_gb.png') center / contain no-repeat;
    border: 5px solid #fff;
    border-radius: 10px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .piccolo-wrapper { 
        background-image: url('grafiken/piccolo_gb@2x.png');
        background-size: 1400px 196px;
    }
}
.ov-piccolo { min-width: 1450px; }

 /* -------  Ende Piccolo  ------ */
 /* --- PICCOLO-HB (420x84px / GB: 840x168px) --- */
.foto-piccolo-hb {
    display: inline-block;
    width: 420px;
    height: 84px;
    background: url('grafiken/piccolo-hb.png') no-repeat;
    background-size: cover;
    border: 1px solid #a2a2a2;
    border-radius: 8px;
    cursor: zoom-in;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .foto-piccolo-hb { background-image: url('grafiken/piccolo-hb@2x.png'); }
}
.content-piccolo-hb {
    width: 850px;
    margin-left: -425px;
}
.piccolo-hb-wrapper {
    position: relative;
    width: 840px;
    height: 168px;
    background: url('/grafiken/piccolo-hb_gb.png') center / contain no-repeat;
    border: 5px solid #fff;
    border-radius: 10px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .piccolo-hb-wrapper { 
        background-image: url('grafiken/piccolo-hb_gb@2x.png');
        background-size: 840px 168px;
    }
}
.ov-piccolo-hb { min-width: 890px; }

 /* ---- Ende Piccolo-hb ------- */
 
/* ---   Konische-kleine-Flöte (700x90px / GB: 1400x180px) --- */
.foto-conkleinefl {
    display: inline-block;
    width: 700px;
    height: 90px;
    background: url('grafiken/konkleinefl.png') no-repeat;
    background-size: cover;
    border: 1px solid #a2a2a2;
    border-radius: 8px;
    cursor: zoom-in;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .foto-conkleinefl { background-image: url('grafiken/konkleinefl@2x.png'); }
}
.content-conkleinefl {
    width: 1410px;
    margin-left: -705px;
}
.conkleinefl-wrapper {
    position: relative;
    width: 1400px;
    height: 180px;
    background: url('/grafiken/konkleinefl_gb.png') center / contain no-repeat;
    border: 5px solid #fff;
    border-radius: 10px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .conkleinefl-wrapper { 
        background-image: url('grafiken/konkleinefl_gb@2x.png');
        background-size: 1400px 180px;
    }
}
.ov-conkleinefl { min-width: 1450px; }

 /* ------ Ende Konische-kleine-Flöte  ------ */
 
 /* ---  Zil kleine-Flöte (700x93px / GB: 1400x186px) --- */
.foto-cylkleinefl {
    display: inline-block;
    width: 700px;
    height: 93px;
    background: url('grafiken/cylkleinefl.png') no-repeat;
    background-size: cover;
    border: 1px solid #a2a2a2;
    border-radius: 8px;
    cursor: zoom-in;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .foto-cylkleinefl { background-image: url('grafiken/cylkleinefl@2x.png'); }
}
.content-cylkleinefl {
    width: 1410px;
    margin-left: -705px;
}
.cylkleinefl-wrapper {
    position: relative;
    width: 1400px;
    height: 186px;
    background: url('/grafiken/cylkleinefl_gb.png') center / contain no-repeat;
    border: 5px solid #fff;
    border-radius: 10px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .cylkleinefl-wrapper { 
        background-image: url('grafiken/cylkleinefl_gb@2x.png');
        background-size: 1400px 186px;
    }
}
.ov-cylkleinefl { min-width: 1450px; }
/* --- Ende  Zil kleine-Flöte  --- */

/* Vorschaubild (nicht klickbar) */
/* =========  Kopf  ============= */
.foto-kopf
{
    display: block;
    margin-left: auto;  
    margin-right: auto; /* beide AUTO → zentriert */
    width: 505px;
    height: 110px;
    background-image: url('grafiken/kopf.png');
    background-size: cover;
    background-position: center;
    border: 1px solid #a2a2a2;
    border-radius: 8px;
    pointer-events: none; /* Rechtsklickschutz */
}

/* Retina Vorschaubild */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
 .foto-kopf { background-image: url('grafiken/kopf@2x.png'); }
}

/* ========= 3 Etuis/case  ============= */
/* Vorschaubild (nicht klickbar) */
.foto-case_open
 {
    display: block;
    margin-left: auto;  
    margin-right: auto; /* beide AUTO → zentriert */
    width: 292px;
    height: 155px;
    background-image: url('grafiken/case_open.png');
    background-size: cover;
    background-position: center;
    border-radius: 6px;
    pointer-events: none; /* Rechtsklickschutz */
}

/* Retina Vorschaubild */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
 .foto-case_open { background-image: url('grafiken/case_open@2x.png'); }
}
/* ======== */
.foto-case
 {
    display: block;
    margin-left: auto;  
    margin-right: auto; /* beide AUTO → zentriert */
    width: 278px;
    height: 85px;
    background-image: url('grafiken/case.png');
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    pointer-events: none; /* Rechtsklickschutz */
}

/* Retina Vorschaubild */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
 .foto-case { background-image: url('grafiken/case@2x.png'); }
}
/* ======== */
.foto-case_cover
 {
    display: block;
    margin-left: auto;  
    margin-right: auto; /* beide AUTO → zentriert */
    width: 324px;
    height: 130px;
    background-image: url('grafiken/case_cover.png');
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    pointer-events: none; /* Rechtsklickschutz */
}

/* Retina Vorschaubild */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
 .foto-case_cover { background-image: url('grafiken/case_cover@2x.png'); }
}
/* ========= Ende 3 Etuis/case  ============= */

  /*================================================  Flöte  ===================================================*/
 
/* =========  Flöte  ============= */
/* Vorschaubild (nicht klickbar) */
.foto-flöte {
    display: block;
    margin-left: auto;  
    margin-right: auto; /* beide AUTO → zentriert */
    width: 700px;
    height: 75px;
    background-image: url('grafiken/floete.png');
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    pointer-events: none; /* Rechtsklickschutz */
}

/* Retina Vorschaubild */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
 .foto-flöte { background-image: url('grafiken/floete@2x.png'); background-size: 700px 75px; }
}

/* ============ gallery ============= */                
.gallery {            
        display: inline-block;  /* hält die 2x2 Boxen zusammen */
 }
/* Einzelne Fotos */
.photo { 
    display: inline-block;
    width: 320px;
    height: 103px;
    background-size: cover;   /* für Retina-Bilder passt sich an */
    background-position: center;
    margin: 0 10px 10px 15px; /* Abstand rechts und unten */
    position: relative;
    -webkit-user-select: none; /* Textauswahl verhindern */
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; 
} 
/* Entfernt den rechten Margin für jedes zweite Bild pro Reihe */
  /*  background-position: center;
    margin: 0 10px 10px 15px; /* Abstand rechts und unten */
  /*  position: relative;
    -webkit-user-select: none; /* Textauswahl verhindern */
   /* -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; 
}*/ 

/* Entfernt den rechten Margin für jedes zweite Bild pro Reihe */
.photo:nth-child(2n) {
    margin-right: 0;  /* kein rechter Rand beim zweiten Element jeder Reihe */
}
/* Bilder 320x103 */
.photo1 { background-image: url("grafiken/fl_obere-mech.png"); border-radius: 8px; }
.photo2 { background-image: url("grafiken/fl_untere-mech.png"); border-radius: 8px; }
.photo3 { background-image: url("grafiken/fl_hintere-mech.png"); border-radius: 8px; }                
.photo4 { background-image: url("grafiken/fl_h-fuß.png"); border-radius: 8px; }

 /* ===== Retina-Version (@2x)Bilder sollten 640×206px sein ==== */
 @media(-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi) {
    .photo1 { background-image: url("grafiken/fl_obere-mech@2x.png"); }
    .photo2 { background-image: url("grafiken/fl_untere-mech@2x.png"); }
    .photo3 { background-image: url("grafiken/fl_hintere-mech@2x.png"); }
    .photo4 { background-image: url("grafiken/fl_h-fuß@2x.png"); } 
 }
    
/* Rechtsklick-Schutz */
 #content {
    -webkit-touch-callout: none; /* iOS Safari */
}
 #content .photo {
    pointer-events: none; /* verhindert Rechtsklick */
}
/* =========  Flöte-zweiteilig  ============= */
/* Vorschaubild (nicht klickbar) */
.foto-fl_zweitg
 {
    display: block;
    margin-left: auto;  
    margin-right: auto; /* beide AUTO → zentriert */
    width: 420px;
    height: 107px;
    background-image: url('grafiken/fl_zweitg.png');
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    pointer-events: none; /* Rechtsklickschutz */
}

/* Retina Vorschaubild */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
 .foto-fl_zweitg { background-image: url('grafiken/fl_zweitg@2x.png'); background-size: 420px 107px; }
}

/* =============== Flöte in Etui ============= */
.fl_etui { 
    width: 334px;
    height: 175px;
    margin-left: auto;  
    margin-right: auto; /* beide AUTO → zentriert */
    position: relative;
    background-image: url("grafiken/fl_in_etui.png");
    background-size: cover;   /* für Retina-Bilder passt sich an */
    background-repeat:no-repeat;
    background-position: center;
    border-radius: 10px;
    pointer-events: none; /* verhindert Rechtsklick */
    user-select: none;
    -webkit-touch-callout: none; /* iOS Safari */
}
/* Retina-Version */
@media(-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi) {
    .fl_etui { background-image: url("grafiken/fl_in_etui@2x.png"); background-size: 334px 175px;}
}

/*=========================================  klang ======================================================*/
.content_title_center_youtube {
    display: inline-block; 
	width:80px;
	height:38px;
	margin: -30px auto 0 auto;     /* -30px Abstand nach oben, 'auto' zentriert sie perfekt mittig */	
}

.flute_youtube {
    width: auto;
    height:125px;
    border:1px solid #c8c8c8;  /* #e2e3e4*/
    background-color:#f0f2f5;                              
    border-radius: 8px;
   /* margin-top:5px;
    margin-left:5px;*/
    padding-top:5px; 
    padding-bottom:6px;
    padding-left:8px
}
/* =========  Kanal  ============= */
.kanal
{
    display: inline-block;
     margin-bottom:-12px;
    margin-left: auto;  
    margin-right: auto; /* beide AUTO → zentriert */
    width: 34px;
    height: 34px;
    background-image: url('grafiken/kanalyt.png');
    background-size: cover;
    background-position: right;
    pointer-events: none; /* Rechtsklickschutz */
}

/* Retina Vorschaubild */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
 .kanal { background-image: url('grafiken/kanalyt@2x.png'); }
}
/* ===================== */
#klang_box {
  width: 100%;
  height: 100%;
}
#klang_box_left {
	width:343px;
	height:auto;
	float:left;
	border:1px solid #c8c8c8;
	background-color:#f0f2f5;
	border-radius: 8px;
	text-align:center;
	margin-top:5px;
	margin-left:5px;
	margin-right:5px;
	padding-top:14px;
	padding-bottom:6px;
}
#klang_box_right {
	width:343px;
	height:auto;
	float:right;
	border:1px solid #c8c8c8;
	background-color:#f0f2f5;
	border-radius: 8px;
	text-align:center;
	margin-top:5px;
	padding-top:14px;
	padding-bottom:6px;
}
.piccolo_cd {
    width:690px;
    padding-left:15px;
    margin-top:5px;
    height:auto;             /* blau50  gra50  grau */
    background-color:#f0f2f5; /*ebf8ff #f7fafc #f2f4f9 #f1f3f8 */
    border:1px solid #c8c8c8;
    border-radius: 8px;
}
/* ===========  CSS für Videobox Klangbox_Left + Klangbox-right  ================ */

/* Overlay der Videobox */
.videobox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(5px);  /* Hintergrund verschwommen */
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* Anzeige bei Ziel (:target) */
.videobox:target {
  display: block;
  opacity: 1;
}

/* Klickfläche zum Schließen (Hintergrund) */
.videobox-close {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Inhalt der Videobox (Video + Rahmen + Animation) */
.videobox-content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 900px;                  /* feste Breite */
  background: #000;
  border: 5px solid #fff;        /* weißer Rahmen */
  border-radius: 10px;           /* abgerundete Ecken */
  box-shadow: 0 0 20px #000;
  transform: translate(-50%, -50%) scale(0.9);
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
  text-align: center;
}

/* Animation beim Öffnen */
.videobox:target .videobox-content {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Video selbst */
.videobox-content video {
  display: block;
  width: 890px;
  height: 500px;
  border-radius: 16px;         /* optional leicht abgerundet */
  margin: 0 auto;
}

/* Beschreibung unterhalb des Videos */
.videobox-description {
  color: #fff;
  font-size: 15px;
  line-height: 1.4;
  padding: 12px 15px;
  text-align: center;
  background: rgba(0,0,0,0.6);
  border-top: 1px solid rgba(255,255,255,0.3);
}

/* X-Button zum Schließen */
.videobox-x {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 28px;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  background: rgba(0,0,0,0.4);
  padding: 5px 10px;
  border-radius: 5px;
  z-index: 2;
  transition: background 0.2s ease, color 0.2s ease;
}

.videobox-x:hover {
  background: rgba(255,255,255,0.9);
  color: #000;
}
/* ==========  ende videos ==========  */

/*=======================================  service und preise ======================================================*/
#liste-inhalt_box{
	width: auto; 
	height:auto;
	background-color:#f0f2f5 ;/*#f7f8fa #f0f2f5*/
	float: left;
	border: 1px solid  #c8c8c8;   /* #e0e0e0  #999 */
	border-radius: 10px;
	font-family: "Playfair Display"; 
    font-weight: normal;
    font-style: normal;
    color:#21498F;
    font-size:13px;
	margin: 10px 20px 6px 0;
	padding:15px;
	display:inline;
}
.liste-inhalt li { 
    display:block;        /* blau #21498F */
    background:url(grafiken/pfeil.png) no-repeat left 7px; /* Vertikal bsp.(3px ist höcher) */
    padding-left:12px; /* Platz für das Icon schaffen */
}  
.liste-inhalt li a:hover {
     text-decoration:underline;
}


.liste li { 
    display:block;        /* rot-viereck #a70000 */
    background:url(grafiken/rot.png) no-repeat left 7px; /* Vertikal bsp.(3px ist höcher) */
    padding-left:12px; /* Platz für das Icon schaffen */
    font-size:inherit;
}  
 /* ============= Flöten Preisliste ========= */
.price_list {
	width: auto; 
	height:auto;
	background-color:#f0f2f5; /* efefef */
	padding: 4px 19px 15px 20px;
	border: 1px solid #c8c8c8;
	border-radius: 10px;
}
.price_list_left {
	width:490px;
	height:auto;
	float:left;
	padding-bottom:2px;
}
.price_list_center {
	width:80px;
	height:auto;
	float:left;
	text-align:right;
	padding-bottom:2px;
}
.price_list_right {
	width:80px;
	height:auto;
	float:left;
	text-align:right;
	padding-bottom:2px;
}
span.links a {   /* === Bestellformular ===  */
	display:inline-block;
	background:url(images/icon_outlink_pf.gif) no-repeat right 9px;
	padding-left:10px; /* Platz für das Icon schaffen */
	padding-right:15px;
}
 /* =========== service-list ========= */
 .service-list {	
    width: 220px; 
	height:495px;
	text-align:center;
	float:right;
	background-color:#f0f2f5;
	padding:18px;
	border-radius: 10px;
	border: 1px solid #c8c8c8;
	margin-left: 15px;
}
 /* =========== Service Prisliste ========= */
 .price_serv-list {
	width: auto; 
	height:auto;
	background-color:#f0f2f5;
	padding:18px;
	border-radius: 10px;
	border: 1px solid #c8c8c8;
	margin-bottom: 20px;
}
.price_serv-list_left {
	width:460px;
	height:auto;
	float:left;
	padding-bottom:2px;
}
.price_serv-list_center {
	width:100px;
	height:auto;
	float: left;
	text-align:right;
	padding-bottom:2px;
}
.price_serv-list_right {
	width:95px;
	height:auto;
	float:right;
	text-align:right;
	padding-bottom:2px;
}
/*============================================= bestellformular ========================================================*/

.textright {
    float: right;
    margin: 1px 20px 1px 1px;
}
#contact_data_prot { /* auch in contact */
	width:270px;
	height:auto;
	padding-top:15px;
}

/*============================================= contact ========================================================*/

 #contact {
	max-width: 100%;
	height:auto;
	padding-top:15px;
	padding-bottom:1px;
}
#contact_left {
	width:345px;
	height:auto;
	float:left;
}
#contact_right {
	width:326px;
    height:auto;
	float:right;
}
#contact_img {
    text-align:center;
	height:auto;
}
.centertext {
	text-align:center;
} 

/* ===========================================  faq ======================================================= */
ul.list_page {
    font-family: 'Lato';
    color:#292929; /*== textfarbe ==*/
	font-size:16px;
	line-height:22px;
	list-style-type:none;
	margin:0;
	padding:0;
}
ul.list_page li {
	display:block;
	background:url(grafiken/rot.png) no-repeat left 7px; /*=== rot #a70000 === */
	padding-left:12px;
	padding-bottom:15px;
}
.faq_gallery {
	width:695px;
	height:auto;
	padding-top:10px;
	padding-bottom:25px;
}
.faq_gallery_left {
	width:348px;
	height:auto;
	float:left;
	text-align:center;
	padding-bottom:25px;
}
.faq_gallery_right {
	width:326px;
	height:auto;
	float:right;
	text-align:center;
	padding-bottom:25px;
 }
.img-center {
    display: block;
    margin-left: auto;  
    margin-right: auto; /* beide AUTO → zentriert */
 }
    
    
 /*============================================ tradition ====================================================*/
 /* ==== text und je ein bild ===== */
.tradition_img_left { 
	margin: 5px 20px 0px 0;
	height:auto;
	float:left;	
}
.tradition_img_left1 { 
	width:250px;
	margin: 10px 10px 0px 0;
	height:auto;
	float:left;	
}
.tradition_img_right { 
	width:200px;
	margin: 5px 0 0px 10px;
	height:auto;
	float:right;	
}

.tradition_small-text {   /* bild-text */
	width:200px;
	height:auto;
	text-align:center;
	font-family: 'Lato'; 
	font-weight: 300; 	
	font-size:12px;
	line-height:16px;
	padding-top:5px;
}
.tradition_bg_small-text {   /* haus-bild-text */
	width:700px;
	height:auto;
	text-align:center;
	font-family: 'Lato'; 
	font-weight: 300; 
	font-size:12px;
	line-height:16px;
	padding-top:10px;
}
/* ===== zwei bilder eva und anton in centrum ===== */
#tradition_img_big_title { 
	width:700px;
	height:auto;
	text-align:center;
	padding-bottom:12px;
}
#tradition_img_big_left {
	width:283px;
	height:auto;
	float:left;
	padding-left:24px;
}
#tradition_img_big_right {
	width:278px;
	height:auto;
	float:right;
}
#tradition_img_big_sep {
	width:auto;
	height:auto;
	text-align:center;
	padding-top:20px;
	padding-bottom:20px;
}
  
/* =========  Geschaeft 1900  ============= */
/* Vorschaubild (nicht klickbar) */
.foto-haus_1900
 {
    display: block;
    margin-left: auto;  
    margin-right: auto; /* beide auto → zentriert */
    width: 215px;
    height: 215px;
    background-image: url('grafiken/geschaeft.png');
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    box-shadow: 4px 4px 6px #9d9d9d;  
    pointer-events: none; /* Rechtsklickschutz */
}

/* Retina Vorschaubild */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
 .foto-haus_1900 { background-image: url('grafiken/geschaeft@2x.png'); }
}
/* ========= sohn anton 1928  ============= */
/* Vorschaubild (nicht klickbar) */
.foto-sohn-anton
 {
    display: block;
    margin-left: auto;  
    margin-right: auto; /* beide AUTO → zentriert */
    width: 196px;
    height: 196px;
    background-image: url('grafiken/sohn-anton1928.png');
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    box-shadow: 4px 4px 6px #9d9d9d; 
    pointer-events: none; /* Rechtsklickschutz */
}

/* Retina Vorschaubild */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
 .foto-sohn-anton { background-image: url('grafiken/sohn-anton1928@2x.png'); }
}
/* ========= centrale 1941 ============= */
/* Vorschaubild (nicht klickbar) */
.foto-centale
 {
    display: block;
    margin-left: auto;  
    margin-right: auto; /* beide AUTO → zentriert */
    width: 368px;
    height: 196px;
    background-image: url('grafiken/centrale_1941.png');
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    box-shadow: 4px 4px 6px #9d9d9d; 
    pointer-events: none; /* Rechtsklickschutz */
}

/* Retina Vorschaubild */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
 .foto-centale { background-image: url('grafiken/centrale_1941@2x.png'); }
}
/* ========= anton anton 1961  ============= */
/* Vorschaubild (nicht klickbar) */
.foto-anton-anton
 {
    display: block;
    margin-left: auto;  
    margin-right: auto; /* beide AUTO → zentriert */
    width: 200px;
    height: 194px;
    background-image: url('grafiken/anton-anton1961.png');
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    box-shadow: 4px 4px 6px #9d9d9d; 
    pointer-events: none; /* Rechtsklickschutz */
}

/* Retina Vorschaubild */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
 .foto-anton-anton { background-image: url('grafiken/anton-anton1961@2x.png'); }
}

/* =========  haus mit werstatt  ============= */
/* Vorschaubild (nicht klickbar) */
.foto-haus
 {
    display: block;
    margin-left: auto;  
    margin-right: auto; /* beide AUTO → zentriert */
    width: 600px;
    height: 300px;
    background-image: url('grafiken/haus_werkstatt.png');
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    box-shadow: 4px 4px 6px #9d9d9d; 
    pointer-events: none; /* Rechtsklickschutz */
}

/* Retina Vorschaubild */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
 .foto-haus { background-image: url('grafiken/haus_werkstatt@2x.png'); }
}
/* =========================  stammbaum / bilder ============================= */

/* =========  geigenbauer Bild  ============= */
/* Vorschaubild (nicht klickbar) */
.foto-geigenbauer 
 {
    display: block;
    margin-left: auto;  
    margin-right: auto; /* beide AUTO → zentriert */
    width: 182px;
    height: 220px;
    background-image: url('grafiken/geigenbauer.png');
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    box-shadow: 4px 4px 6px #9d9d9d; 
    pointer-events: none; /* Rechtsklickschutz */
}

/* Retina Vorschaubild */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
 .foto-geigenbauer  { background-image: url('grafiken/geigenbauer@2x.png'); }
}
/* =========  medaillen  ============= */
/* Vorschaubild (nicht klickbar) */
.foto-medaillen
 {
    display: block;
    margin-left: auto;  
    margin-right: auto; /* beide AUTO → zentriert */
    width: 220px;
    height: 178px;
    background-image: url('grafiken/medaillen.png');
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    box-shadow: 4px 4px 6px #9d9d9d; 
    pointer-events: none; /* Rechtsklickschutz */
}

/* Retina Vorschaubild */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
 .foto-medaillen { background-image: url('grafiken/medaillen@2x.png'); }
}
/* =========  stammbaum  ============= */

.left-bild {  /* Geigenbauer */
    float:left;
    margin-right:5px;
    margin-top: 5px; 
}

.tradition_img_left3 {
    margin: 5px 20px 0px 0;
	width:190px;
	height:225px;
	float:left;
}
/* ======== Table Stammbaum ========= */
.stamb {
	width:225px;
	height:auto;
	text-align: center;
}
/* ======== Logo Stammbaum ========= */
/* Vorschaubild (nicht klickbar) */
.foto-logo_stamb
 {
    display: block;
    margin-left: auto;  
    margin-right: auto; /* beide AUTO → zentriert */
    width: 81px;
    height: 81px;
    background-image: url('grafiken/logo_stammbaum.png');
    background-size: cover;
    background-position: center;
    pointer-events: none; /* Rechtsklickschutz */
}

/* Retina Vorschaubild */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
 .foto-logo_stamb{ background-image: url('grafiken/logo_stammbaum@2x.png'); }
}  
 /* ======== Ende Table Stammbaum ========= */
  
.cont-bilder{
   width: 700px;
   height:auto;
   display: block;     /* wichtig */
   margin-left: auto;  
   margin-right: auto; /* beide AUTO → zentriert */
   text-align:center;
}
/* =========  Anton B&W Orchester  ============= */
/* Vorschaubild (nicht klickbar) */
.foto-toni_bw
 {
    display: block;
    margin-left: auto;  
    margin-right: auto; /* beide AUTO → zentriert */
    width: 188px;
    height: 188px;
    background-image: url('grafiken/tonibw1935.png');
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    box-shadow: 4px 4px 6px #9d9d9d;
    pointer-events: none; /* Rechtsklickschutz */
}

/* Retina Vorschaubild */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
 .foto-toni_bw { background-image: url('grafiken/tonibw1935@2x.png'); }
}
/* =========  B&W Orchester  ============= */
/* Vorschaubild (nicht klickbar) */
.foto-bw_orchstr
 {
    display: block;
    margin-left: auto;  
    margin-right: auto; /* beide AUTO → zentriert */
    width: 500px;
    height: 188px;
    background-image: url('grafiken/bw1935.png');
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    box-shadow: 4px 4px 6px #9d9d9d;
    pointer-events: none; /* Rechtsklickschutz */
}
/* Retina Vorschaubild */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
 .foto-bw_orchstr
 { background-image: url('grafiken/bw1935@2x.png'); }
}
/* =========  Orch-Guban 1964  ============= */
/* Vorschaubild (nicht klickbar) */
.foto-orchstr1964
 {
    display: block;
    margin-left: auto;  
    margin-right: auto; /* beide AUTO → zentriert */
    width: 600px;
    height: 220px;
    background-image: url('grafiken/orchguban1964.png');
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    box-shadow: 4px 4px 6px #9d9d9d;
    pointer-events: none; /* Rechtsklickschutz */
}
/* Retina Vorschaubild */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
 .foto-orchstr1964
 { background-image: url('grafiken/orchguban1964@2x.png'); }
}
 /* ============ */