@font-face {
    font-family: 'CormorantGaramondSemiBold';
    src: url('/eichendorff/Cormorant_Garamond/static/CormorantGaramond-SemiBold.ttf')
         format('truetype');
}

:root{
    --bg:#2c2c2c;
    --paper:#fff;
    --text:#d7d2c8;
}

*{
    box-sizing:border-box;
}

body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:system-ui,sans-serif;
}


/* ----------------------------------
   HEADER
---------------------------------- */

header{
    padding:1rem 2rem;
    border-bottom:1px solid rgba(255,255,255,.1);
}

header h1{
    margin:0;
    font-size:1.3rem;
}

nav{
    margin-top:.5rem;
}

nav a{
    color:var(--text);
    text-decoration:none;
    margin-right:1rem;
}

/* ----------------------------------
   NAVIGATION
---------------------------------- */

.controls{
    display:flex;
    justify-content:center;
    gap:1rem;
    padding:1rem;
}

.controls button{
    padding:.6rem 1.2rem;
    cursor:pointer;
}

/* ----------------------------------
   AUFSCHLAG
---------------------------------- */

.spread{
    display:none;
    justify-content:center;
    gap:20px;

    padding:20px;
}

.spread.active{
    display:flex;
}

.page{
    width:42vw;
    aspect-ratio:210 / 297;

    background:var(--paper);
    color:#000;

    overflow:auto;

    padding:20px;

    box-shadow:0 0 15px rgba(0,0,0,.35);
}

/* relative eingefügt für qr */

.page {
    position: relative;
}

/* ----------------------------------
   NOTEN
---------------------------------- */

.page.notes{
    padding:10px;
}

.page.notes img{
    width:100%;
    display:block;
}

/* ----------------------------------
   TYPOGRAFIE
---------------------------------- */

.page h1,
.page h2{
    margin-top:0;

}

.page p,
.page li{
    line-height:1.5;
}

/* ----------------------------------
   FOOTER
---------------------------------- */

/* ----------------------------------
   FOOTER
---------------------------------- */

footer{

    text-align:center;

    padding:1rem 2rem;

    border-top:1px solid rgba(255,255,255,.1);
}

footer a{

    color:var(--text);

    text-decoration:none;

    margin:0 .75rem;
}

footer a:hover{

    text-decoration:underline;
}

.heft-qr-box{
    position:absolute;
    right:12mm;
    bottom:12mm;

    display:flex;
    align-items:center;
    gap:5mm;
}

.qr-hinweis{
    margin:0;
    width:50mm;

    font-size:10pt;
    line-height:1.3;
    text-align:right;
}

.heft-qr img{
    display:block;
    width:22mm;
    height:22mm;
}

.qr-url {
    margin-top: 2mm;
    text-align: center;
    font-size: 6.5pt;
    line-height: 1;
}

/* ----------------------------------
   SMARTPHONE
---------------------------------- */

@media (max-width: 900px){

    .spread.active{
        flex-direction:column;
        align-items:center;
    }

    .page{
        width:min(95vw, 210mm);
        aspect-ratio:auto;
        min-height:70vh;
    }
}

/* ----------------------------------
   DRUCKBUCH
---------------------------------- */

.print-book{
    display:none;
}

@page{
    size:A4;
    margin:0;
}

@media print{

    header,
    footer,
    .controls{
        display:none !important;
    }

    .spread{
        display:none !important;
    }

    .print-book{
        display:block !important;
    }

    body{
        background:#fff;
        margin:0;
        padding:0;
    }

    .page{
          position: relative;

        width:210mm;
        height:297mm;

        margin:0;

        overflow:hidden;

        box-shadow:none;

        page-break-after:always;
        break-after:page;
    }

    .page.notes{
        padding:15mm;
    }

    /* kleinerer Text */
.small-text {
  font-size: 0.9rem; /* oder 90% */
}

.heft-qr-box{
    position:absolute;
    right:12mm;
    bottom:12mm;

    display:flex;
    align-items:center;
    gap:5mm;
}

.qr-hinweis{
    margin:0;
    width:50mm;

    font-size:10pt;
    line-height:1.3;
    text-align:right;
}

.heft-qr img{
    display:block;
    width:22mm;
    height:22mm;
}

.qr-url {
    margin-top: 2mm;
    text-align: center;
    font-size: 6.5pt;
    line-height: 1;
}
    /* ----------------------------------
   SEITE 3 - VORREDE
---------------------------------- */

.page.three{

    display:flex;
    flex-direction:column;

    justify-content:center;

    text-align:center;

    transform:translateY(-20mm);
}

.page.three p:first-of-type{
    font-weight:bold;
}

.page.three p{

    max-width:28em;

    margin:0 auto 1.5em auto;

    line-height:1.6;
}

/* ----------------------------------
   SEITE 7
---------------------------------- */

.page.seven{

    padding:15mm !important;
}

.page.seven h2{

    margin-top:0;
    margin-bottom:6mm;

    font-size:1.25rem;
}

.page.seven h3{

    margin-top:2mm;
    margin-bottom:1mm;

    font-size:1rem;
}

.page.seven p{

    margin-top:0;
    margin-bottom:3mm;

    line-height:1.35;
}

.page.seven ul{

    margin:0;
    padding-left:5mm;
}

.page.seven li{

    margin-bottom:2mm;
}

/* Ende Vorrede */

    .page.notes img{
        width:100%;
        height:100%;
        object-fit:contain;
        display:block;
    }

    .page:not(.notes){
        padding:20mm;
    }

    .page.cover{
    font-family:'CormorantGaramondSemiBold', serif !important;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:30mm;
}

    .page.cover h1{
    font-size:32pt;
    margin:0 0 20mm 0;
}

.page.cover .subtitle{
    font-size:16pt;
}

    .page.blank{
        background:#fff;
    }
}