/* ----------------------- 1. Einbindung Schrift --------------------- */

@font-face {
    font-family: 'cantoriamt-regular';
    src: url('cantoriamt-svg-font-2021.10.16-11.46.28-webfont.woff2') format('woff2'),
    url('cantoriamt-svg-font-2021.10.16-11.46.28-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/* ----------------------- 2. Variablen --------------------- */
/* 
    --Schriftfarbe-heller: #b1b1b1; 
    --Schriftfarbe-normal: #6e6e6e;
*/

:root {
    --Größe-horizontal:  1035px;
    --Größe-vertical:  635px;
	
	--Anzahl-Spalten: 7;

    --Schriftfarbe-inaktiv: #CCCCCC;
    --Schriftfarbe-heller: #989898;
    --Schriftfarbe-normal: #363636;

    --Schriftgröße-hauptseite: 116%;
    --Zeilenabstand-hauptseite: 1.6em;

    --Schriftgröße-name: 210%;
    --Schriftgröße-inhaber-und-individueller: 87%;

    --Schriftgröße-nav-produkte-inaktiv: 80%;
    --Schriftgröße-nav-produkte-aktiv: 80%;
    --Schriftgröße-nav-produkte-hover: 80%;
    --Zeilenabstand-nav-produkte: 3.0em;

    --Schriftgröße-nav-haupt-inaktiv: 80%;
    --Schriftgröße-nav-haupt-aktiv: 80%;
    --Schriftgröße-nav-haupt-hover: 80%;

    --Schriftgröße-unternehmen: 95%;

    --Schriftgröße-leistungen: 95%;
    --Schriftgröße-leistungen-beschreibung: 95%;

    --Schriftgröße-produkte-beschreibung: 85%;
    --Schriftgröße-produkte-details: 80%;
    --Schriftgröße-produkte-weitere: 70%;
    --Schriftgröße-produkte-schrank-regal: 100%;

    --Schriftgröße-kontakt: 95%;

    --Schriftgröße-datenschutz: 95%;

    --Schriftgröße-agb: 95%;
    --Schriftgröße-agb-link: 100%;

    --Schriftgröße-impressum: 95%;
}

/* ----------------------- 3. Allgemein --------------------- */

* {
    font-size: 100%;
    color: var(--Schriftfarbe-normal);
    font-family: cantoriamt-regular;
    text-align:center;
    text-rendering: optimizeLegibility;
    line-height:1.2em;

    padding: 0;
    margin: 0;
}

*, *:before, *:after {
  box-sizing: border-box;
}

body {
    width:100%;
    height:100%;

    background-color: #FFFFFF;

    overflow: auto;
}

gesamt-inhalt {
    width: var(--Größe-horizontal);
    height: var(--Größe-vertical);

    position:relative;
    top: max(10px, calc(50vh - var(--Größe-vertical)/2));
    left: max(10px, calc(50vw - var(--Größe-horizontal)/2));

    display: grid;
    grid-template-columns: 14.28% 14.28% 14.28% 13.28% 19.28% 12.28% 12.28%;
    /* grid-template-columns: 19.8% 17.48% 16.62% 16.62% 12.56% 16.91%; */
    grid-template-rows: 7.0% 4.67% 2.24% 74.80% 2.14% 4.45% 2.14%;
}


linie-oben {
    grid-column: 1 / span var(--Anzahl-Spalten);
    grid-row: 3; 

    align-content: center;

    margin-top: 1%;
}

inhalt-simple {
    grid-column: 1 / span var(--Anzahl-Spalten);
    grid-row:    4;  
}

inhalt-spalte-1 {
    grid-column: 2;
}

inhalt-spalte-2 {
    grid-column: 3;
}

inhalt-spalte-3 {
    grid-column: 4;
}


linie-mitte {
    grid-column: 1 / span var(--Anzahl-Spalten);
    grid-row: 5;

    align-content: center;
}


linie-unten {
    grid-column: 1 / span var(--Anzahl-Spalten);
    grid-row: 7;
    
    align-content: center;
    padding-top: 0.3%;
}

/* ----------------------- 4. Navigation Produkte --------------------- */

a.nav-produkte:link { 
    text-decoration: none; color: var(--Schriftfarbe-inaktiv); font-size: var(--Schriftgröße-nav-produkte-inaktiv); line-height: var(--Zeilenabstand-nav-produkte);
}
a.nav-produkte:visited { 
    text-decoration: none; color: var(--Schriftfarbe-inaktiv); font-size: var(--Schriftgröße-nav-produkte-inaktiv); line-height: var(--Zeilenabstand-nav-produkte);
}
a.nav-produkte:hover { 
    text-decoration: none; color: var(--Schriftfarbe-normal); font-size: var(--Schriftgröße-nav-produkte-hover); line-height: var(--Zeilenabstand-nav-produkte);
}
a.nav-produkte:active { 
    text-decoration: none; color: var(--Schriftfarbe-normal); font-size: var(--Schriftgröße-nav-produkte-aktiv); line-height: var(--Zeilenabstand-nav-produkte);
}
p.nav-produkte {
    text-decoration: none; color: var(--Schriftfarbe-normal); font-size: var(--Schriftgröße-nav-produkte-aktiv); line-height: var(--Zeilenabstand-nav-produkte);
}

/* ----------------------- 5. Navigation unten --------------------- */

a.nav-haupt:link { 
    text-decoration: none; color: var(--Schriftfarbe-inaktiv); font-size: var(--Schriftgröße-nav-haupt-inaktiv); 
}
a.nav-haupt:visited { 
    text-decoration: none; color: var(--Schriftfarbe-inaktiv); font-size: var(--Schriftgröße-nav-haupt-inaktiv); 
}
a.nav-haupt:hover { 
    text-decoration: none; color: var(--Schriftfarbe-normal); font-size: var(--Schriftgröße-nav-haupt-hover); 
}
a.nav-haupt:active { 
    text-decoration: none; color: var(--Schriftfarbe-normal); font-size: var(--Schriftgröße-nav-haupt-aktiv); 
}
p.nav-haupt {
    text-decoration: none; color: var(--Schriftfarbe-normal); font-size: var(--Schriftgröße-nav-haupt-aktiv); 
}

/* ----------------------- 6. Kopfzeilen --------------------- */

name {
    grid-column: 1 / span var(--Anzahl-Spalten);
    grid-row:    1;    
    padding-left: 0.8%;
    text-align: left;
}

a.name:link { 
    text-decoration: none; color: var(--Schriftfarbe-normal); font-size: var(--Schriftgröße-name);
}
a.name:visited { 
    text-decoration: none; color: var(--Schriftfarbe-normal); font-size: var(--Schriftgröße-name);
}
a.name:hover { 
    text-decoration: none; color: var(--Schriftfarbe-normal); font-size: var(--Schriftgröße-name);
}
a.name:active { 
    text-decoration: none; color: var(--Schriftfarbe-normal); font-size: var(--Schriftgröße-name);
}
p.name {
    font-size: var(--Schriftgröße-name); text-align: left;
}

inhaber {
    grid-column: 1 / span 3;
    grid-row:    2;   
    padding-left: 2%;
}

p.inhaber {
    font-size: var(--Schriftgröße-inhaber-und-individueller); text-align: left;
}

individueller {
    grid-column: 5 / span 3;
    grid-row:    2;    
    padding-right: 2%;
}

p.individueller {
    font-size: var(--Schriftgröße-inhaber-und-individueller); text-align: right;
}

/* ----------------------- 7. Hauptseite --------------------- */

p.hauptseite {
    font-size: var(--Schriftgröße-hauptseite); line-height: var(--Zeilenabstand-hauptseite); text-align: left; padding-left: 5.0%; padding-top: 7.4%;
}

/* ----------------------- 8. Unternehmen --------------------- */

nav-unternehmen {
    grid-column: 1;
    grid-row:    6;    
}

inhalt-unternehmen {
    grid-column: 1 / span var(--Anzahl-Spalten);
    grid-row:    4;  

    display: inline-grid;
    grid-template-columns: 27.73% 44.4% 27.83%;
}

p.unternehmen {
    font-size: var(--Schriftgröße-unternehmen); text-align: justify; hyphens: auto; padding-top: 16.0%;
}

/* ----------------------- 9. Leistungen --------------------- */

nav-leistungen {
    grid-column: 2;
    grid-row:    6;    
}

inhalt-leistungen {
    grid-column: 1 / span var(--Anzahl-Spalten);
    grid-row:    4;  

    display: inline-grid;
    grid-template-columns: 4.54% 23.19% 46.38% 25.89%;
}

p.leistungen {
    font-size: var(--Schriftgröße-leistungen); color: var(--Schriftfarbe-heller); text-align: left;
}

p.leistungen-beschreibung {
    font-size: var(--Schriftgröße-leistungen-beschreibung); text-align: justify; hyphens: auto;
}

/* ----------------------- 10. Produkte --------------------- */

nav-produkte {
    grid-column: 3;
    grid-row:    6;    
}

inhalt-produkte {
    grid-column: 1 / span var(--Anzahl-Spalten);
    grid-row:    4;  

    display: inline-grid;
    grid-template-columns: 1.45% 16.91% 59.42% 20.77% 1.45%;
}

inhalt-spalte-1.nav-produkte {
    grid-row: 1; padding-top: 5%;
}

inhalt-spalte-2.produkt-bild {
    grid-row: 1;
}

inhalt-spalte-2.schrank-regal {
    grid-row: 1; padding-top: 30%;
}

inhalt-spalte-3.detail-beschreibung {
    grid-row: 1;
}

div.detail-beschreibung {
    text-align: center; height: 51.2%; padding-top: 9%;
}

p.detail-beschreibung {
    font-size: var(--Schriftgröße-produkte-beschreibung); text-align: center;
}

table.detail-beschreibung {
    width: 65.12%; margin-left: auto; margin-right: auto; margin-top: 8%;
}

td.detail-beschreibung-links {
    font-size: var(--Schriftgröße-produkte-beschreibung); text-align: left;
}

td.detail-beschreibung-rechts {
    font-size: var(--Schriftgröße-produkte-beschreibung); text-align: right;
}

*.detail-bilder {
    margin-right: 2.7%;
}

div.details {
    text-align: left;
}

p.details {
    font-size: var(--Schriftgröße-produkte-details); text-align: left; margin-bottom: 1.2%;
}

div.weitere {
    text-align: left; padding-top: 11.7%;
}

p.weitere {
    font-size: var(--Schriftgröße-produkte-weitere); text-align: left; margin-bottom: 0.9%;
}

p.schrank-regal {
    font-size: var(--Schriftgröße-produkte-schrank-regal); text-align: center;
}

/* ----------------------- 11. Kontakt --------------------- */

nav-kontakt {
    grid-column: 4;
    grid-row:    6;    
}


inhalt-kontakt {
    grid-column: 1 / span var(--Anzahl-Spalten);
    grid-row:    4;  

    display: inline-grid;
    grid-template-columns: 30.63% 48.31% 19.32% 1.74%;
}

p.kontakt {
    font-size: var(--Schriftgröße-kontakt); text-align: left; padding-top: 16%;
}

/* ----------------------- 12. Datenschutz --------------------- */

nav-datenschutz {
    grid-column: 5;
    grid-row:    6;    
}


inhalt-datenschutz {
    grid-column: 1 / span var(--Anzahl-Spalten);
    grid-row:    4;  

    display: inline-grid;
    grid-template-columns: 30.63% 48.31% 19.32% 1.74%;
}

p.datenschutz {
    font-size: var(--Schriftgröße-datenschutz); text-align: left; padding-top: 16%;
    max-height: 464px;
    overflow-y: auto;
}

/* ----------------------- 13. AGB --------------------- */

nav-agb {
    grid-column: 6;
    grid-row:    6;    
}

inhalt-agb {
    grid-column: 1 / span var(--Anzahl-Spalten);
    grid-row:    4;  

    display: inline-grid;
    grid-template-columns: 30.63% 48.31% 19.32% 1.74%;
}


a.agb:link { 
    text-decoration: none; color: var(--Schriftfarbe-normal); font-size: var(--Schriftgröße-agb-link);
}
a.agb:visited { 
    text-decoration: none; color: var(--Schriftfarbe-normal); font-size: var(--Schriftgröße-agb-link);
}
a.agb:hover { 
    text-decoration: none; color: var(--Schriftfarbe-normal); font-size: var(--Schriftgröße-agb-link);
}
a.agb:active { 
    text-decoration: none; color: var(--Schriftfarbe-normal); font-size: var(--Schriftgröße-agb-link);
}

p.agb {
    font-size: var(--Schriftgröße-agb); color: var(--Schriftfarbe-heller); text-align: left; padding-top: 16%;
}

/* ----------------------- 14. Impressum --------------------- */

nav-impressum {
    grid-column: 7;
    grid-row:    6;    
}

inhalt-impressum {
    grid-column: 1 / span var(--Anzahl-Spalten);
    grid-row:    4;  

    display: inline-grid;
    grid-template-columns: 30.63% 48.31% 19.32% 1.74%;
}

p.impressum-mitte {
    font-size: var(--Schriftgröße-impressum); text-align: left; padding-top: 16%;
}

p.impressum-rechts {
    font-size: var(--Schriftgröße-impressum); text-align: left; padding-top: 90%;
}