/* Google Font Roboto import */
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

/* Grundlegendes Font-Setting */
html,
body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
}
.titel {
	text-align:center;
    width: 80vw;
    margin: 22px auto -8px;
}
/* Layout für Container: Bildbereich und Formular im Verhältnis 1:2 */
.container {
    display: flex;
    width: 60%;
    margin: 25px auto 80px;
    background-color: #EFEEEE;
    padding-top: 10px;
    padding: 16px;
    /*+placement: -132px 3px;*/
    position: relative;
    left: -132px;
    top: 3px;
}
.thumb-wrapper {
    flex: 1;
    text-align: center;
    padding-right:20px;
}
.thumb {
    max-width: 98%;
    height: auto;
    padding: 4px;
    padding-top: 24px;
    margin-left: 0px;
    border-left: 0px solid black;
    /*+placement: 4px -15px;*/
    position: relative;
    left: 4px;
    top: -15px;
}

.thumbportrait{
	height:500px;
}
.info {
    font-size: 0.9em;
    color: #555;
    margin-top: 5px;
}
form {
    padding-left: 0px;
    flex: 1.1;
    display: flex;
    flex-direction: column;
}
.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}
label {
    margin-bottom: 2px;
    font-weight: bold;
}
.iptc-input,
.iptc-textarea {
    margin-top: 2px;
    padding: 4px 12px 4px 4px;
    border: 1px solid #CCC;
    border-radius: 4px;
    font-size: 1em;
    margin-left: 2px;
    margin-right: 3px;
    font-family: courier;
}
.iptc-input::placeholder,
.iptc-textarea::placeholder {
    color: #888;
    padding-left: 0px;
    padding-right: 0px;
    width: 100%;
}
.iptc-textarea {
    min-height: 5em;
    resize: vertical;
    padding-right: 0px;
    font-family: courier;
}
.required {
    background-color: #FFE5E5 !important;
}
/* Hervorhebung und Deaktivierung für Bilder unter 2000px */
.container.small {
    opacity: 0.5;
}
.container.small .form-group input,
.container.small .form-group textarea,
.container.small button[name="save"] {
    pointer-events: none;
    background: #CCC;
    cursor: not-allowed;
}
.buttons {
    margin-top: 10px;
}
.buttons button {
    margin-right: 5px;
    padding: 5px 10px;
    font-size: 1em;
    border: none;
    border-radius: 4px;
}

.img-meta{
    display:flex;justify-content:space-between;
    font:0.9rem/1.4 system-ui,sans-serif;margin-top:.25rem;
}
.meta-left,.meta-right{white-space:nowrap;}

button[name="save"]:disabled {
    background: #CCC;
    cursor: not-allowed;
}
button[name="save"] {
    background: #28A745;
    color: white;
}
button[name="delete"] {
    background: #DC3545;
    color: white;
}
/* Gültiger Inhalt */
.ok {
    background-color: #E5FFE5;
}


.warnung {color:#b00;background:#fff3f3;border:1px solid #b00;padding: 20px;border-radius:4px;text-align:center;font-weight:bold;margin: 10px;width: 50%; }